MMProg:WiSe2015:Praktikum:Aufgabe 1:Teil 1

Praktikumsaufgabe 1, Teil 1

Einrichtung der Arbeitsumgebung

Ziele

• Installation und Konfiguration von WebStorm
• Checkout des Repositories der Lehrveranstaltung
• Checkout des eigenen Subversion-Repositories
• Verbinden des Repositories mit der WebStorm IDE

Installation von Webstorm

Laden Sie sich zunächst Webstorm herunter und installieren Sie es. Anmerkung: Auf Rechnern der Hochschule ist Webstorm bereits vorinstalliert.

Lizenz

Als Student der Hochschule Augsburg erhalten Sie mit Ihrer Hochschul-E-Mail-Adresse eine kostenlose Studentenlizenz. Gehen Sie dazu auf die Antragsseite und füllen Sie das Formular aus.

Anmerkung: Falls Sie an einem Rechner der Hochschule arbeiten können Sie die Hochschullizenz verwenden. Bitte kontaktieren Sie den Lehrbeauftragten / Professor um den Lizenzschlüssel zu erhalten.

IDE-Konfiguration

Webstorm ist auf die Entwicklung mit HTML, CSS und JavaScript ausgelegt, wodurch sich die Konfiguration einfach gestaltet.

Stellen Sie sicher dass unter "Webstorm" -> "Preferences" -> "IDE Settings" -> "Plugins" auf jeden Fall folgende Plugins aktiviert sind (diese sollte standardmäßig der Fall sein):

• JavaScript Support
• Subversion Integration

Verifizieren Sie außerdem dass unter "Project settings" -> "JavaScript" die "JavaScript language version" auf "ECMAScript 5.1" eingestellt ist.

Code-Style

Standardmäßig sind vier Leerzeichen als Einrückung für Code-Formattierungen eingestellt. Eine Vorgabe dafür gibt es nicht, die Empfehlung sind aber zwei Leerzeichen aufgrund der häufigeren Verwendung.

Um diese Einstellung zu ändern klicken Sie jeweils auf "JavaScript", "CSS" und "HTML" und tragen bei "Tab size", "Indent" und "Continuation Indent" die gewünsche Zahl an Leerzeichen ein.

Vermeiden Sie in jedem Fall das Tab-Zeichen zu verwenden, da dies nicht genormt ist und je nach Betriebssystem anders aussieht.

Markdown

Die Anmerkungen zu den Praktikumsaufgaben sind im Repository als Markdown-Dokumente abgespeichert. Für Syntax Highlighting und eine Vorschauansicht müssen Sie das entsprechende Plugin installieren. Dazu gehen Sie auf "Webstorm" -> "Preferences" -> "IDE Settings" -> "Plugins", suchen dort nach "Markdown support" und klicken anschließend auf "Browse". Es erscheint dann ein Plugin namens "Markdown support". Installieren Sie dieses und starten Webstorm danach neu.

Checkout der Repositories

Der folgende Abschnitt beschreibt eine exemplarische Verwendung von Subversion in der Kommandozeile um die für das Praktikum notwendigen Repositories auf dem lokalen Rechner einzurichten.

Anmerkung: Alternativ können Sie die folgenden Schritte auch mit TortoiseSVN, svnX oder auch mit dem integrierten Subversion-Support in Webstorm durchführen.

Es ist nicht notwendig jedes Mal die Kommandozeile zu verwenden.

Vorbereitung auf Windows

• TortoiseSVN inklusive Command Line Tools installieren
• Alternativ SlikSVN installieren
• Im Explorer zum gewünschten Ordner navigieren in dem die Daten gespeichert werden sollen (z.B. C:\studium)
• Shift + Rechtsklick -> "Eingabeaufforderung hier öffnen"

Vorbereitung auf OSX

• Optional: svnX installieren
• Terminal öffnen
• In den gewünschen Ordner bzw. auf den Desktop gehen: cd Desktop

=Arbeitsschritte

• Ordner erstellen: mkdir mmprog
• Ordner betreten: cd mmprog
• SVN testen: svn list https://praktikum.multimedia.hs-augsburg.de/svn/lawrence
• Falls nachgefragt wird das Zertifikat der Hochschule zu speichern, dann mit "p" bestätigen
• Lehrveranstaltung auschecken: svn checkout https://praktikum.multimedia.hs-augsburg.de/svn/lawrence/ lehrveranstaltung --username rz-kennung
• Eigenes Repository auschecken: svn checkout https://praktikum.multimedia.hs-augsburg.de/svn/rz-kennung repository
• Ordner betreten: cd repository
• Ordner "aufgabe1" anlegen: mkdir aufgabe1
• Ordner im SVN adden: svn add aufgabe1
• Commit ausführen: svn commit -m "Initial commit."
• Ordner betreten: cd aufgabe1
• Ordner "teil1" anlegen: mkdir teil1
• Ordner im SVN adden: svn add teil1
• Commit ausführen: svn commit -m "Second commit."
• Nun können Sie Webstorm öffnen und auf "Open Directory" klicken. Wählen Sie dann den Ordner "repository" aus
• Anmerkung für OSX: Falls Sie den Ordner auf dem Desktop erzeugt haben können Sie diesen über den Finder verschieben

Falls Sie auf OSX ein Problem damit haben das Zertifikat zu akzeptieren führen Sie folgenden Befehl aus: sudo svn list https://praktikum.multimedia.hs-augsburg.de/ Da der Befehl als superuser ausgeführt wird müssen Sie Ihr lokales Rechner-Passwort eingeben.

Projekt aktuell halten

Wenn Sie mit der Bearbeitung Ihres Projekts aufhören sollten Sie stets den aktuellen Stand in Ihrem Repository sichern. Webstorm verfügt über integrierten Subversion-Support und erkennt automatisch welche Operationen auszuführen sind. Das bedeutet es ist nicht notwendig alle SVN-Befehle immer manuell über das Terminal auszuführen. Wichtig: Verschieben oder Löschen Sie keine Dateien im Explorer/Finder ohne die entsprechenden SVN-Operationen.

Öffnen Sie nach Änderungen den Commit-Dialog:

• Im Projektexplorer Rechtsklick auf das aktuelle Projekt
• Klick auf "Subversion"
• Klick auf "Commit Directory"
• Verifizieren, dass alle zu speicherenden Dateien angehakt sind
• Eine entsprechende Commit-Message eingeben
• "OK" klicken

Anmerkung: Eine rot markierte Datei bedeutet, dass WebStorm diese nicht als Teil des Repositories erkennt. Machen Sie dann einen Rechtsklick auf die Datei und wählen "SVN" -> "Add..." aus um die Datei hinzuzufügen. Beim nächsten Commit wird die Datei dann mit auf den SVN-Server übertragen.

Wenn Sie auf einem anderen Rechner an diesem Projekt weiterarbeiten wollen, müssen sie beim ersten Mal das Projekt in der oben beschriebenen Weise aus dem Repository auf Ihren Rechner laden. Wenn Sie dies einmal gemacht haben, reicht es wenn Sie künftig die lokale Version wie folgt aktualisieren, bevor Sie mit der Arbeit beginnen:

• Im Projektexplorer Rechtsklick auf das aktuelle Projekt
• Klick auf "Subversion"
• Klick auf "Update Directory"

Repository im Browser einsehen

Sie können Ihr Repository jederzeit im Browser einsehen und so verifizieren, dass der aktuelle Stand online ist. Rufen Sie dazu folgende URL auf: https://praktikum.multimedia.hs-augsburg.de/svn/rz-kennung