Arbeiten mit WebStorm

6.1 Überblick über die IDE

Lasst uns herausfinden, was ihr hier seht.

1. Baumstruktur der Projektordner und -dateien:

Hier wird der Inhalt des Projektordners angezeigt — web-storm-10.

Ich habe extra eine Datei erstellt, damit es klarer wird, wie alles organisiert ist. In der nächsten Vorlesung werdet ihr das auch alles machen.

2. Aktuell geöffnete Datei:

Dies ist einfach der Inhalt der Datei index.html, der Code-Syntax ist hervorgehoben.

3. Oben seht ihr das Hauptmenü:

Nützliche Schaltflächen oben rechts:

• „Grünes Dreieck“ — Schaltfläche zum Starten des Projekts
• „Käfer“ — Schaltfläche zum Starten des Debug-Modus
• „Lupe“ — Projektsuche
• „Zahnrad“ — Einstellungen

4. Links seht ihr das Seitenmenü:

Hier gibt es einige nützliche Schaltflächen. Besonders interessant ist die Schaltfläche Terminal.

5. Statusleiste:

Links in der Statusleiste wird der Pfad der aktuell geöffneten Datei angezeigt. Rechts sieht man die Kodierung: CRLF, UTF-8. Bald werdet ihr all das perfekt verstehen.

6.2 Projektanalyse

1. HTML-Dateien.

Solche Dateien haben die Erweiterung .html, und WebStorm kennzeichnet sie mit einem grünen Symbol mit zwei Pfeilen. Hier gibt es nur eine solche Datei — index.html

Solche Dateien haben die Erweiterung .js, und WebStorm kennzeichnet sie mit einem gelben Symbol. Im Moment gibt es keine solchen Dateien im Screenshot.

2. CSS-Dateien mit Styles.

Solche Dateien haben die Erweiterung .css, und WebStorm kennzeichnet sie mit einem blauen Symbol. Im Moment gibt es keine solchen Dateien im Screenshot.

3. Statische Mediendateien. So nennt man Dateien, die Daten, aber keinen Code enthalten. Das können Textdateien, Bilder, Mediendateien usw. sein. In unserem Projekt sind sie derzeit nicht vorhanden.

4. Externe Bibliotheken (External libraries). Momentan gibt es sie in unserem Projekt nicht, aber wenn ihr sie herunterladet, wird WebStorm sie hier anzeigen.

6.3 Arbeiten mit dem Terminal

In WebStorm könnt ihr direkt mit der Befehlszeile des Betriebssystems arbeiten. In Linux und MacOS wird die Befehlszeile üblicherweise als Terminal bezeichnet, daher wird sie auch in WebStorm so genannt. Das ist im Grunde keine Eigenart von WebStorm, sondern ein etabliertes Benennungsschema unter Programmierern.

Um das Terminal zu öffnen, müsst ihr auf die Schaltfläche Terminal im Seitenmenü klicken:

Es sollte ein solches Fenster erscheinen:

In diesem Fenster könnt ihr Befehle eures Betriebssystems eingeben. Uns interessiert einer davon.

Lass uns herausfinden, welche Windows-Version aktuell ist. Dazu muss man folgendes eingeben:

    
      ver
    
  

Das ist, was bei mir herauskam:

Wenn bei euch ein Fehler aufgetreten ist, gebt zuerst den Befehl „cmd“ ein und dann den Befehl „ver“.

6.4 Was ist das CodeGym-Plugin und wofür wird es benötigt?

Es ist eine Anwendung, ein spezielles Softwaremodul, das in die Entwicklungsumgebung Intellij IDEA oder WebStorm integriert wird und es euch ermöglicht, in ihr mit den Aufgaben des CodeGym-Kurses zu arbeiten. Zum Beispiel Code-Lösungen zu schreiben, sie zur Überprüfung zu senden, eure Lösung mit der „Default“-Lösung zu vergleichen und vieles mehr. Der Fortschritt bei der Lösung von Aufgaben im Plugin wird mit eurem CodeGym-Konto synchronisiert, sodass er auf der Website und in der Entwicklungsumgebung gleich aussieht.

Ihr könnt das CodeGym-Plugin aus dem Jetbrains-Marktplatz direkt in eurer Entwicklungsumgebung herunterladen. Wir werden die Schritte anhand von WebStorm demonstrieren, aber sie gelten auch für Intellij IDEA.

1. Geht zum Abschnitt "Einstellungen", Windows/Linux File - Settings, MacOS WebStorm - Preferences. Wenn es keinen Einstellungsabschnitt gibt, öffnet ein beliebiges Projekt oder erstellt ein neues.

2. Wählt im erscheinenden Fenster im Seitenmenü den Abschnitt Plugins und öffnet die Registerkarte Marketplace. Gebt in die Suchleiste codegym ein.

3. Wählt das Plugin aus und klickt auf die Schaltfläche Install.
4. Startet WebStorm neu (Restart IDE), um mit dem Plugin zu arbeiten.
5. Ihr seht eine leicht veränderte Oberfläche und die Schaltfläche In Konto einloggen in der oberen horizontalen Leiste.

Beim Klicken öffnet sich ein Fenster zur Anmeldung in eurem Konto, in dem ihr euren geheimen Schlüssel eingeben müsst:

Zur Erinnerung: Den geheimen Schlüssel findet ihr im Abschnitt “Einstellungen” → “Sicherheit und Anmeldung”.

Nach der Anmeldung beginnt der Download des Projekts und des Codegym SDK (nicht auf eine andere Version ändern).

6. Um eine neue Aufgabe zu öffnen, klickt auf Tasks im linken vertikalen Panel, dann auf die Aufgabenkarte im linken Seitenpanel, und im Popup-Fenster klickt auf Öffnen:

7. Ein Fenster mit zwei Registerkarten öffnet sich. Eine — mit der Aufgabenstellung, die andere — zur Eingabe des Codes.
8. Jetzt schreibt die Lösung der Aufgabe und klickt auf die Schaltfläche Check

Manuelle Installation des Plugins

1. Download Plugin
2. Geht zum Abschnitt "Einstellungen", Windows/Linux File - Settings, MacOS WebStorm - Preferences.
3. Wählt im erscheinenden Fenster im Seitenmenü den Abschnitt Plugins und klickt auf das Zahnrad (⚙️) und wählt „Install Plugins from disk“
4. Öffnet den Ordner, in dem sich das Plugin befindet. Wählt es (Archiv) aus und klickt auf OK (Restart IDE).

Das Plugin ist installiert! Jetzt könnt ihr Aufgaben lösen.

Synchronisation von Aufgaben Seite — Plugin

Die Liste der Aufgaben und deren Status wird alle fünf Minuten oder nach dem Senden einer beliebigen Aufgabe zur Überprüfung automatisch aktualisiert (Codegym-Server).

Daher, wenn ihr eine Aufgabe auf der Seite gelöst habt, wird sie auch im Plugin in der Liste der gelösten Aufgaben angezeigt. Wenn ihr die Statusinformationen der Aufgaben jetzt aktualisieren möchtet, klickt auf euren Avatar (oben rechts) und wählt im Dropdown-Menü den Punkt Aufgaben synchronisieren:

Anfängermodus im Plugin

Dies ist eine vereinfachte Version für Benutzer, die keine (oder wenig) Erfahrung mit WebStorm und anderen Entwicklungsumgebungen haben. Einige Funktionen von WebStorm sind verborgen. Um diesen Modus zu deaktivieren, klickt auf euren Avatar (oben rechts) und wählt im Dropdown-Menü den Punkt Einstellungen:

Wie man die Navigationsleiste des Plugins im PRO-Modus versteckt

Klickt auf den Punkt Einstellungen (⚙️) und entfernt das Häkchen bei "Navigationsleiste des Plugins anzeigen":