MMProg:WiSe2015:Praktikum:Aufgabe 1:Teil 1 - Versionsgeschichte

Kowa am 1. März 2023 um 13:02 Uhr

2023-03-01T13:02:40Z

← Nächstältere Version		Version vom 1. März 2023, 13:02 Uhr
Zeile 104:		Zeile 104:
	====Projekt aktuell halten====		====Projekt aktuell halten====

	Wenn Sie mit der Bearbeitung Ihres ~~Projektes~~ aufhören sollten Sie stets den aktuellen Stand in Ihrem Repository sichern.		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.		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'''.		Das bedeutet es ist '''nicht notwendig alle SVN-Befehle immer manuell über das Terminal auszuführen'''.

Kowa am 1. März 2023 um 13:02 Uhr

2023-03-01T13:02:22Z

← Nächstältere Version		Version vom 1. März 2023, 13:02 Uhr
Zeile 1:		Zeile 1:
	=Praktikumsaufgabe 1, Teil 1=		==Praktikumsaufgabe 1, Teil 1==

	==Einrichtung der Arbeitsumgebung==		===Einrichtung der Arbeitsumgebung===

	===Ziele===		====Ziele====

	* Installation und Konfiguration von WebStorm		* Installation und Konfiguration von WebStorm
Zeile 10:		Zeile 10:
	* Verbinden des Repositories mit der WebStorm IDE		* Verbinden des Repositories mit der WebStorm IDE

			====Installation von Webstorm====
	===Installation von Webstorm===

	Laden Sie sich zunächst [http://www.jetbrains.com/webstorm/ Webstorm] herunter und installieren Sie es.		Laden Sie sich zunächst [http://www.jetbrains.com/webstorm/ Webstorm] herunter und installieren Sie es.
	'''Anmerkung:''' Auf Rechnern der Hochschule ist Webstorm bereits vorinstalliert.		'''Anmerkung:''' Auf Rechnern der Hochschule ist Webstorm bereits vorinstalliert.


	====Lizenz====		====Lizenz====
Zeile 24:		Zeile 22:
	'''Anmerkung:''' Falls Sie an einem Rechner der Hochschule arbeiten können Sie die Hochschullizenz verwenden.		'''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.		Bitte kontaktieren Sie den Lehrbeauftragten / Professor um den Lizenzschlüssel zu erhalten.


	====IDE-Konfiguration====		====IDE-Konfiguration====
Zeile 38:		Zeile 35:
	Verifizieren Sie außerdem dass unter "Project settings" -> "JavaScript" die "JavaScript language version" auf		Verifizieren Sie außerdem dass unter "Project settings" -> "JavaScript" die "JavaScript language version" auf
	"ECMAScript 5.1" eingestellt ist.		"ECMAScript 5.1" eingestellt ist.


	====Code-Style====		====Code-Style====
Zeile 60:		Zeile 56:
	Installieren Sie dieses und starten Webstorm danach neu.		Installieren Sie dieses und starten Webstorm danach neu.

			===Checkout der Repositories===
	==Checkout der Repositories==

	Der folgende Abschnitt beschreibt eine exemplarische Verwendung von Subversion in der Kommandozeile um		Der folgende Abschnitt beschreibt eine exemplarische Verwendung von Subversion in der Kommandozeile um
Zeile 71:		Zeile 66:
	Es ist '''nicht''' notwendig jedes Mal die Kommandozeile zu verwenden.		Es ist '''nicht''' notwendig jedes Mal die Kommandozeile zu verwenden.

			====Vorbereitung auf Windows====
	===Vorbereitung auf Windows===

	* TortoiseSVN inklusive Command Line Tools [http://glossar.hs-augsburg.de/Installation_von_Tortoise_%28Windows%29 installieren]		* TortoiseSVN inklusive Command Line Tools [http://glossar.hs-augsburg.de/Installation_von_Tortoise_%28Windows%29 installieren]
Zeile 79:		Zeile 73:
	* Shift + Rechtsklick -> "Eingabeaufforderung hier öffnen"		* Shift + Rechtsklick -> "Eingabeaufforderung hier öffnen"

			====Vorbereitung auf OSX====
	===Vorbereitung auf OSX===

	* Optional: svnX [http://glossar.hs-augsburg.de/Subversion/HowTo#svnX installieren]		* Optional: svnX [http://glossar.hs-augsburg.de/Subversion/HowTo#svnX installieren]
Zeile 86:		Zeile 79:
	* In den gewünschen Ordner bzw. auf den Desktop gehen: <code>cd Desktop</code>		* In den gewünschen Ordner bzw. auf den Desktop gehen: <code>cd Desktop</code>

			====Arbeitsschritte===
	===Arbeitsschritte===

	* Ordner erstellen: <code>mkdir mmprog</code>		* Ordner erstellen: <code>mkdir mmprog</code>
Zeile 110:		Zeile 102:
	Da der Befehl als superuser ausgeführt wird müssen Sie Ihr lokales Rechner-Passwort eingeben.		Da der Befehl als superuser ausgeführt wird müssen Sie Ihr lokales Rechner-Passwort eingeben.

			====Projekt aktuell halten====
	===Projekt aktuell halten===

	Wenn Sie mit der Bearbeitung Ihres Projektes aufhören sollten Sie stets den aktuellen Stand in Ihrem Repository sichern.		Wenn Sie mit der Bearbeitung Ihres Projektes aufhören sollten Sie stets den aktuellen Stand in Ihrem Repository sichern.
Zeile 140:		Zeile 131:
	* Klick auf "Update Directory"		* Klick auf "Update Directory"

			====Repository im Browser einsehen====
	===Repository im Browser einsehen===

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

Lawrence am 2. Oktober 2015 um 10:30 Uhr

2015-10-02T10:30:26Z

← Nächstältere Version		Version vom 2. Oktober 2015, 10:30 Uhr
Zeile 94:		Zeile 94:
	* Falls nachgefragt wird das Zertifikat der Hochschule zu speichern, dann mit "p" bestätigen		* Falls nachgefragt wird das Zertifikat der Hochschule zu speichern, dann mit "p" bestätigen
	* Lehrveranstaltung auschecken: <code>svn checkout https://praktikum.multimedia.hs-augsburg.de/svn/lawrence/ lehrveranstaltung --username rz-kennung</code>		* Lehrveranstaltung auschecken: <code>svn checkout https://praktikum.multimedia.hs-augsburg.de/svn/lawrence/ lehrveranstaltung --username rz-kennung</code>
	* Ordner verlassen: <code>cd ..</code>
	* Eigenes Repository auschecken: <code>svn checkout https://praktikum.multimedia.hs-augsburg.de/svn/rz-kennung repository</code>		* Eigenes Repository auschecken: <code>svn checkout https://praktikum.multimedia.hs-augsburg.de/svn/rz-kennung repository</code>
	* Ordner betreten: <code>cd repository</code>		* Ordner betreten: <code>cd repository</code>

Lawrence am 2. Oktober 2015 um 10:18 Uhr

2015-10-02T10:18:05Z

← Nächstältere Version		Version vom 2. Oktober 2015, 10:18 Uhr
Zeile 104:		Zeile 104:
	* Ordner im SVN adden: <code>svn add teil1</code>		* Ordner im SVN adden: <code>svn add teil1</code>
	* Commit ausführen: <code>svn commit -m "Second commit."</code>		* Commit ausführen: <code>svn commit -m "Second commit."</code>
	* Nun können Sie Webstorm öffnen und auf "Open Directory" klicken. Wählen Sie dann den Ordner "~~aufgabe1~~" aus		* 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		* '''Anmerkung für OSX:''' Falls Sie den Ordner auf dem Desktop erzeugt haben können Sie diesen über den Finder verschieben

Lawrence am 2. Oktober 2015 um 08:47 Uhr

2015-10-02T08:47:02Z

← Nächstältere Version		Version vom 2. Oktober 2015, 08:47 Uhr
Zeile 91:		Zeile 91:
	* Ordner erstellen: <code>mkdir mmprog</code>		* Ordner erstellen: <code>mkdir mmprog</code>
	* Ordner betreten: <code>cd mmprog</code>		* Ordner betreten: <code>cd mmprog</code>
	* SVN testen: <code>svn list https://praktikum.multimedia.hs-augsburg.de/</code>		* SVN testen: <code>svn list https://praktikum.multimedia.hs-augsburg.de/svn/lawrence</code>
	* Falls nachgefragt wird das Zertifikat der Hochschule zu speichern, dann mit "p" bestätigen		* Falls nachgefragt wird das Zertifikat der Hochschule zu speichern, dann mit "p" bestätigen
	* Lehrveranstaltung auschecken: <code>svn checkout https://praktikum.multimedia.hs-augsburg.de/svn/lawrence/ lehrveranstaltung --username rz-kennung</code>		* Lehrveranstaltung auschecken: <code>svn checkout https://praktikum.multimedia.hs-augsburg.de/svn/lawrence/ lehrveranstaltung --username rz-kennung</code>

Lawrence am 2. Oktober 2015 um 08:42 Uhr

2015-10-02T08:42:50Z

← Nächstältere Version		Version vom 2. Oktober 2015, 08:42 Uhr
Zeile 56:		Zeile 56:
	Für Syntax Highlighting und eine Vorschauansicht müssen Sie das entsprechende Plugin installieren.		Für Syntax Highlighting und eine Vorschauansicht müssen Sie das entsprechende Plugin installieren.
	Dazu gehen Sie auf "Webstorm" -> "Preferences" -> "IDE Settings" -> "Plugins",		Dazu gehen Sie auf "Webstorm" -> "Preferences" -> "IDE Settings" -> "Plugins",
	suchen dort nach "Markdown" und klicken anschließend auf "Browse".		suchen dort nach "Markdown support" und klicken anschließend auf "Browse".
	Es erscheint dann ein Plugin namens "Markdown".		Es erscheint dann ein Plugin namens "Markdown support".
	Installieren Sie dieses und starten Webstorm danach neu.		Installieren Sie dieses und starten Webstorm danach neu.

Lawrence: Die Seite wurde neu angelegt: „=Praktikumsaufgabe 1, Teil 1= ==Einrichtung der Arbeitsumgebung== ===Ziele=== * Installation und Konfiguration von WebStorm * Checkout des Repositories der…“

2015-10-01T21:00:35Z

Die Seite wurde neu angelegt: „=Praktikumsaufgabe 1, Teil 1= ==Einrichtung der Arbeitsumgebung== ===Ziele=== * Installation und Konfiguration von WebStorm * Checkout des Repositories der…“

Neue Seite

=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 [http://www.jetbrains.com/webstorm/ 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 [https://www.jetbrains.com/estore/students/ 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
[https://de.wikipedia.org/wiki/Markdown 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" und klicken anschließend auf "Browse".
Es erscheint dann ein Plugin namens "Markdown".
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 [http://glossar.hs-augsburg.de/Installation_von_Tortoise_%28Windows%29 installieren]
* Alternativ SlikSVN [https://sliksvn.com/ 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 [http://glossar.hs-augsburg.de/Subversion/HowTo#svnX installieren]
* Terminal öffnen
* In den gewünschen Ordner bzw. auf den Desktop gehen: <code>cd Desktop</code>

===Arbeitsschritte===

* Ordner erstellen: <code>mkdir mmprog</code>
* Ordner betreten: <code>cd mmprog</code>
* SVN testen: <code>svn list https://praktikum.multimedia.hs-augsburg.de/</code>
* Falls nachgefragt wird das Zertifikat der Hochschule zu speichern, dann mit "p" bestätigen
* Lehrveranstaltung auschecken: <code>svn checkout https://praktikum.multimedia.hs-augsburg.de/svn/lawrence/ lehrveranstaltung --username rz-kennung</code>
* Ordner verlassen: <code>cd ..</code>
* Eigenes Repository auschecken: <code>svn checkout https://praktikum.multimedia.hs-augsburg.de/svn/rz-kennung repository</code>
* Ordner betreten: <code>cd repository</code>
* Ordner "aufgabe1" anlegen: <code>mkdir aufgabe1</code>
* Ordner im SVN adden: <code>svn add aufgabe1</code>
* Commit ausführen: <code>svn commit -m "Initial commit."</code>
* Ordner betreten: <code>cd aufgabe1</code>
* Ordner "teil1" anlegen: <code>mkdir teil1</code>
* Ordner im SVN adden: <code>svn add teil1</code>
* Commit ausführen: <code>svn commit -m "Second commit."</code>
* Nun können Sie Webstorm öffnen und auf "Open Directory" klicken. Wählen Sie dann den Ordner "aufgabe1" 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:
<code>sudo svn list https://praktikum.multimedia.hs-augsburg.de/</code>
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 Projektes 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: <code>https://praktikum.multimedia.hs-augsburg.de/svn/rz-kennung</code>