Einrichtung der Entwicklungsumgebung

5.1 Auswahl der IDE

Um Programme zu schreiben, musst du Programme schreiben. Da ist was Wahres dran. Aber um überhaupt damit anzufangen, musst du eine IDE (ein spezielles Programm zum Schreiben von Programmen) installieren und ein erstes Projekt erstellen.

Es gibt viele Optionen für IDEs, die man für das Studieren der Webentwicklung wählen kann. Sie sind fast alle gleichwertig, denn der Code deines Projekts wird sowieso im Browser ausgeführt 😊

Hier sind die 4 beliebtesten:

• Visual Studio Code von Microsoft
• Intellij IDEA Community Edition
• Atom von GitHub
• WebStorm Community Edition ()

Ich mag WebStorm, aber du kannst jedes andere Produkt wählen und wirst kaum einen Unterschied merken. Unten findest du Screenshots einiger wichtiger Schritte zur Einrichtung der IDE.

5.2 WebStorm herunterladen

Schritt 1. Um WebStorm zu installieren, musst du es zuerst herunterladen. Gib einfach WebStorm in Google ein oder folge dem Link. Dort wirst du dieses hübsche Bild sehen:

Schritt 2. Klicke mutig auf den Button „Herunterladen“, und der Download startet sofort. Wenn alles geklappt hat, siehst du diese Nachricht:

Schritt 3. Das richtige Betriebssystem sollte automatisch erkannt werden. Wenn das nicht der Fall ist, kannst du es auf dieser Seite auswählen — WebStorm herunterladen:

5.3 Installation von WebStorm

Nachdem du die passende Version von WebStorm heruntergeladen hast, musst du sie installieren. Hier sind einige wichtige Schritte:

Schritt 1. Starte den Installer — es sollte so ein Fenster erscheinen:

Schritt 2. Setze ein paar Häkchen, wie bei mir:

Schritt 3. Du musst nichts neu starten:

5.4 WebStorm für nicht-kommerzielle Nutzung

Wenn du diese IDEs für nicht-kommerzielle Zwecke wie das Lernen verwendest, kannst du sie kostenlos nutzen.

1. Starte WebStorm.
2. Beim Start erscheint ein Fenster, in dem du die Option für die nicht-kommerzielle Nutzung wählen kannst.
3. Melde dich bei deinem JetBrains-Konto an oder erstelle ein neues.
4. Akzeptiere die "Toolbox Subscription Agreement für nicht-kommerzielle Nutzung".
5. Viel Spaß beim Entwickeln.

Wenn du bereits einen Testzeitraum begonnen oder deine IDE mit einer kostenpflichtigen Lizenz aktiviert hast, kannst du trotzdem auf ein nicht-kommerzielles Abonnement umstellen, indem du folgende Schritte ausführt:

1. Für WebStorm, gehe zu Help | Register.
2. Im geöffneten Fenster klicke auf die Schaltfläche Remove License.
3. Wähle Non-commercial use (Nicht-kommerzielle Nutzung).
4. Melde dich bei deinem JetBrains-Konto an oder erstelle ein neues.
5. Akzeptiere die "Toolbox Subscription Agreement für nicht-kommerzielle Nutzung".
6. Viel Spaß beim Entwickeln.

5.5 Erstes Projekt erstellen

Nachdem du WebStorm installiert hast, bleibt nur noch, es zu starten und ein erstes Projekt zu erstellen. Folge der Anleitung:

Schritt 1. Starte WebStorm. Du wirst dieses Fenster sehen:

Schritt 2. Erstelle ein neues Projekt — klicke auf die Schaltfläche New Project.

Als nächstes musst du:

• Einen Namen für dein erstes Projekt wählen.
• Einen Ordner für dein erstes Projekt angeben (Feld Location). Wenn WebStorm standardmäßig den Ordner Admin vorschlägt, wäre es besser, ihn zu ändern. Das erspart dir später Probleme.

Bei mir sieht das etwa so aus:

Schritt 3. Wenn du alles richtig gemacht hast, wirst du dieses Bild sehen: