HTML5-Tutorium: JavaScript: Hello World 01: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) |
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
(37 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}} | {{HTML5-Tutorium:JavaScript:HelloWorld:Menü}} | ||
'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/ | |||
([ | '''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/2018/helloworld/WK_HelloWorld01/index.html <code>index.html</code>] | ||
([{{Git-Server}}/kowa/WK_HelloWorld01.git Git-Repository]) | |||
==Anwendungsfälle (Use Cases)== | ==Anwendungsfälle (Use Cases)== | ||
Im ersten Teil dieses Tutoriums wird zunächst mit Hilfe der [[IDE]] (integrated development environment | Im ersten Teil dieses Tutoriums wird zunächst mit Hilfe der [[IDE]] (integrated development environment) [[WebStorm]] | ||
[[WebStorm]] eine Web-Anwendung bestehend aus einem [[HTML]]-Dokument | eine Web-Anwendung bestehend aus einem [[HTML]]-Dokument erstellt. | ||
erstellt. | |||
Das HTML-Dokument enthält als einzigen Inhalt eine Begrüßung der gesamten Welt. | Das HTML-Dokument enthält als einzigen Inhalt eine Begrüßung der gesamten Welt. | ||
Zeile 11: | Zeile 11: | ||
==WebStorm vorbereiten== | ==WebStorm vorbereiten== | ||
Zur Erstellung der Anwendung wird [[ | Zur Erstellung der Anwendung wird [[WebStorm]] inklusive [[Node.js]] eingesetzt. | ||
Zunächst müssen Sie diese IDE [[ | Zunächst müssen Sie diese IDE [[HTML5-Tutorium:_JavaScript:_Entwicklungsumgebung|installieren und konfigurieren]]. Es handelt sich um eine kommerzielle | ||
Software, aber als Student erhalten Sie eine kostenlose Lizenz. | Software, aber als Student erhalten Sie eine kostenlose Lizenz. | ||
==WebStorm starten== | ==WebStorm starten== | ||
In WebStorm gibt es drei Alternativen, ein Projekt zu bearbeiten: Sie können | |||
eine neues Projekt erstellen, ein bestehendes Projekt öffnen oder ein bestehendes Projekt aus einem | eine neues Projekt erstellen, ein bestehendes Projekt öffnen oder ein bestehendes Projekt aus einem | ||
Versionsverwaltungstool laden (<code>check out</code>) und öffnen. | Versionsverwaltungstool laden (<code>check out</code>) und öffnen. | ||
Sie werden zunächst die erste Möglichkeit nutzen und ein neues Projekt erstellen. | Sie werden zunächst die erste Möglichkeit nutzen und ein neues Projekt erstellen. | ||
Anschließend werden Sie die Musterlösung für dieses Projekt aus einem [[ | Anschließend werden Sie die Musterlösung für dieses Projekt aus einem [[Git|Git-Repository]] herunterladen. | ||
==Ein neues Projekt erstellen== | ==Ein neues Projekt erstellen== | ||
* WebStorm starten | |||
* <code>File</code>/<code>WebStorm</code> → <code>New</code> → <code>Project</code> | |||
* <code>Empty Project</code>, im Feld <code>Location</code> einen sinnvollen Pfad auswählen, wo auf Ihrem Rechner das Projekt gespechert werden soll ({{zB}} <code>.../mmprog/hello_world/HelloWorld01</code>) | |||
Rechner | * <code>Create</code>. | ||
Links sehen Sie nun ein senkrechtes Menü mit | Links sehen Sie nun ein senkrechtes Menü mit mehreren Menüpunkten, <code>Structure</code>, <code>Favorites</code> | ||
und | und <code>Project</code>. (Wenn Sie dieses Menü nicht sehen, müssen Sie | ||
auf das Icon unten links in der Leiste klicken. Damit wird | auf das Icon unten links in der Leiste klicken. Damit wird es eingeblendet.) | ||
Klicken Sie auf | Klicken Sie auf <code>Project</code>. Es erscheint ein Dateibaum, | ||
der alle Dateien Ihres Projektes enthält. Bislang gibt es nur das Wurzelverzeichnis mit dem Projektnamen | der alle Dateien Ihres Projektes enthält. Bislang gibt es nur das Wurzelverzeichnis mit dem Projektnamen | ||
<code>HelloWorld01</code> sowie zwei Systemdateien <code>External Libraries</code> und <code>Scratches and Consoles</code>, die uns nicht weiter interessieren. | |||
Aktivieren Sie zunächst die Toolbar, sofern Sie dies noch nicht gemacht haben: | |||
* <code>View</code> → Häkchen bei <code>Toolbar</code> | |||
Hier finden Sie insbesondere den Reload-Button, mit dem Sie den Dateibaum in WebStorm neu laden können, | |||
wenn dieser außerhalb von WebStorm verändert wurde. | |||
Klicken Sie mit der rechten Maus auf das Wurzelverzeichnis des Baumes und anschließend auf <code>New</code>. | Klicken Sie nun mit der rechten Maus auf das Wurzelverzeichnis des Baumes und anschließend auf <code>New</code>. | ||
Es öffnet sich ein Drop-Down-Menü mit einer Auswahl an Dateien, die Sie erstellen können. | Es öffnet sich ein Drop-Down-Menü mit einer Auswahl an Dateien, die Sie erstellen können. | ||
Erstellen Sie eine HTML-Datei | Erstellen Sie eine HTML-Datei <code>index.html</code> vom Typ <code>HTML 5 file</code>. | ||
In die HTML-Datei wurde von WebStorm folgender Code automatisch eingefügt: | In die HTML-Datei wurde von WebStorm folgender Code automatisch eingefügt: | ||
Zeile 60: | Zeile 63: | ||
</source> | </source> | ||
Die erste Zeile legt den Typ der Datei fest. Diese Information benötigen | Die erste Zeile legt den Typ der Datei fest. Diese Information benötigen die Browser, damit | ||
sie den nachfolgenden HTML-Code richtig interpretieren und [[Renderer|rendern]] können. | sie den nachfolgenden HTML-Code richtig interpretieren und [[Renderer|rendern]] können. | ||
Mit | Mit <code><!DOCTYPE html></code> wird festgelegt, dass es sich um eine HTML5-Datei handelt. | ||
Eine HTML-4.01-Datei, die die sich an die strengen HTML-4-Vorgaben hält ( | Eine HTML-4.01-Datei, die die sich an die strengen HTML-4-Vorgaben hält (<code>strict</code>) | ||
würde eine wesentlich komplexere Doctype-Angabe erfordern: | würde eine wesentlich komplexere Doctype-Angabe erfordern: | ||
Zeile 75: | Zeile 78: | ||
Es gibt noch diverse weitere HTML-Varianten. Wir werden uns allerdings auf HTML5 konzentrieren. | Es gibt noch diverse weitere HTML-Varianten. Wir werden uns allerdings auf HTML5 konzentrieren. | ||
Die zweite und die letzte Zeile des Dokuments ( | Die zweite und die letzte Zeile des Dokuments (<code><html lang="en"></code> und <code></html></code>) | ||
begrenzen den eigentlichen HTML-Code. Das [[Attribut]] | begrenzen den eigentlichen HTML-Code. Das [[Attribut]] <code>lang</code> zeigt dem Browser an, | ||
in welcher Sprache das Dokument verfasst ist. Wenn ein deutsches HTML-Dokument erstellt werden | in welcher Sprache das Dokument verfasst ist. Wenn ein deutsches HTML-Dokument erstellt werden | ||
soll, müssen Sie den Wert | soll, müssen Sie den Wert <code>en</code> (Englisch) in <code>de</code> (Deutsch) ändern. | ||
Da es sich bei „Hello World“ jedoch um einen englischen Text handelt, ändern wir den Attributwert nicht. | Da es sich bei „Hello World“ jedoch um einen englischen Text handelt, ändern wir den Attributwert nicht. | ||
Zeile 102: | Zeile 105: | ||
Im nächsten Schritt wird die von WebStorm erzeugte HTML-Datei mit Inhalten gefüllt. | Im nächsten Schritt wird die von WebStorm erzeugte HTML-Datei mit Inhalten gefüllt. | ||
Es wird ein Titel in Head-Bereich eingetragen. Im Body-Bereich fügen Sie bitte | Es wird ein Titel in Head-Bereich eingetragen. Im Body-Bereich fügen Sie bitte | ||
eine Hauptüberschrift (heading, | eine Hauptüberschrift (heading, <code><h1></code>...<code></h1></code>) sowie | ||
anschließend einen Absatz (paragraph, | anschließend einen Absatz (paragraph, <code><p></code>...<code></p></code>) | ||
mit sinnvollem Text ein. | mit sinnvollem Text ein. | ||
Zeile 109: | Zeile 112: | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html lang="en"> | <html lang="en"> | ||
<head> | <head> | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
<title>HelloWorld01</title> | <title>HelloWorld01</title> | ||
</head> | </head> | ||
<body> | <body> | ||
<h1>Hello, World!</h1> | <h1>Hello, World!</h1> | ||
<p>Welcome to Multimedia Programming!</p> | <p>Welcome to Multimedia Programming!</p> | ||
</body> | </body> | ||
</html> | </html> | ||
</source> | </source> | ||
Zeile 123: | Zeile 129: | ||
Ein schließendes Tag steht entweder in derselben Zeile wie das öffnende Tag oder beide sind exakt gleich weit eingerückt. | Ein schließendes Tag steht entweder in derselben Zeile wie das öffnende Tag oder beide sind exakt gleich weit eingerückt. | ||
Tag-Blöcke, die '''innerhalb von anderen Tags''' platziert werden, werden um '''zwei Leerzeichen''' weiter '''eingerückt''', als ihre | Tag-Blöcke, die '''innerhalb von anderen Tags''' platziert werden, werden um '''zwei Leerzeichen''' weiter '''eingerückt''', als ihre | ||
Eltern-Tags. Vier Leerzeichen, wie oft von der IDE vorgegeben, sind für größere, tief verschachtelte Dateien zu viel. (Eventuell ist | |||
aber auch die Datei zu groß und daher zu tief verschachtelt. So etwas vermeiden Sie, wenn Sie strukturiert arbeiten.) | aber auch die Datei zu groß und daher zu tief verschachtelt. So etwas vermeiden Sie, wenn Sie strukturiert arbeiten.) | ||
Eine Datei mit Programmcode sollte in der Regel nicht mehr als | Eine Datei mit Programmcode sollte in der Regel nicht mehr als | ||
Zeile 209: | Zeile 215: | ||
Ein derartiger Server ist in WebStorm bereits enthalten. Daher ist das Testen der Web-Anwendung ganz einfach. | Ein derartiger Server ist in WebStorm bereits enthalten. Daher ist das Testen der Web-Anwendung ganz einfach. | ||
Klicken Sie im Dateibaum von WebStorm mit der rechten Maustaste auf | Klicken Sie im Dateibaum von WebStorm mit der rechten Maustaste auf <code>index.html</code> | ||
und klicken Sie dann auf | und klicken Sie dann auf <code>Run 'index.html'</code>. Wenn man diesen Befehl erstmals ausgeführt hat, | ||
erscheint in der | erscheint in der Hauptmenü-Leiste von WebStorm ein Drop-Down-Menü mit ausführbaren Dateien sowie rechts | ||
daneben ein grünes Dreieck als Icon, mit dem die im Menü selektierte Datei direkt gestartet werden kann. | daneben ein grünes Dreieck als Icon, mit dem die im Menü selektierte Datei direkt gestartet werden kann. | ||
Der Startbefehl hat zur Folge, dass ein lokaler Web-Server gestartet und die selektierte HTML-Datei in einem Browser | Der Startbefehl hat zur Folge, dass ein lokaler Web-Server gestartet und die selektierte HTML-Datei in einem Browser | ||
geöffnet wird. Welcher Browser dies ist, kann in WebStorm folgendermaßen festgelegt werden | geöffnet wird. Welcher Browser dies ist, kann in WebStorm folgendermaßen festgelegt werden: | ||
* Fahren Sie mit der Maus in die rechte obere Ecke des Editor-Fensters von <code>index.html</code>, bis dort ein kleines Fenster mit diversen Browser-Icons erscheint. | |||
* Klicken Sie auf das Icon eines Browsers, den Sie auf Ihrem Rechner auch installiert haben, dann wird die Datei in diesem Browser geöffnet.. | |||
Sie können den Defaultbrowser im Browser jederzeit ändern: | |||
* Im Dateibaum <code>index.html</code> selektieren. | |||
* Reiter <code>Run</code> → <code>Edit Configurations...</code> → Klick auf <code>...</code> hinter dem Label <code>Browser</code> → Defaultbrowser festlegen | |||
*<code>OK</code> | |||
Wenn man anschließend in WebStorm Änderungen an der im Browser geöffneten Datei vornimmt, muss man nicht jedes mal die | Wenn man anschließend in WebStorm Änderungen an der im Browser geöffneten Datei vornimmt, muss man nicht jedes mal die | ||
Datei neu starten. Es reicht, im Browser den | Datei neu starten. Es reicht, im Browser den Reload-Button zu drücken. | ||
Der von WebStorm gestartete Web-Server bedient diverse Browser, die sich auf dem Entwicklungsrechner befinden. | Der von WebStorm gestartete Web-Server bedient diverse Browser, die sich auf dem Entwicklungsrechner befinden. | ||
Wenn man dieselbe HTML-Datei in einem anderen Browser testen will, kann man dazu den URI im ersten Browser kopieren und in die URI-Leiste | Wenn man dieselbe HTML-Datei in einem anderen Browser testen will, kann man dazu den URI im ersten Browser kopieren und in die URI-Leiste | ||
des zweiten Browsers einfügen. WebStorm bemerkt, dass der URI in einem anderen Browser geöffnet werden soll und stellt dazu eine | des zweiten Browsers einfügen. WebStorm bemerkt, dass der URI in einem anderen Browser geöffnet werden soll und stellt dazu eine Sicherheitsfrage: | ||
<div class="formula"><code>Copy authorization URL to clipboard</code></div> | <div class="formula"><code>Copy authorization URL to clipboard</code></div> | ||
Wenn man dies bestätigt enthält das Clipboard anschließend einen | Wenn man dies bestätigt, enthält das Clipboard anschließend einen | ||
URI, die man mit | URI, die man mit <code>Strg-v</code> als Ersatz für den zuerst eingefügte URI in den neuen Browser kopieren kann. | ||
Dieser URI wird dann angezeigt und kann ebenfalls per Reload aktualisiert werden. | Dieser URI wird dann angezeigt und kann ebenfalls per Reload aktualisiert werden. Schneller geht der Test mit einem alternativen Browser jedoch mit den Browser-Icons in der rechten oberen Ecke des Editor-Fensters. | ||
Man könnte die Seite sogar von einem anderen Device, wie {{zB}} einen Smartphone aus aufrufen. | Man könnte die Seite sogar von einem anderen Device, wie {{zB}} einen Smartphone aus aufrufen. | ||
Zeile 238: | Zeile 248: | ||
unterbunden. | unterbunden. | ||
==Vermeidung von Sonderzeichen in Dateinamen== | |||
Da eine Web-Anwendung üblicherweise irgendwann einmal auf einen | |||
öffentlich zugänglichen Web-Server gelegt werden soll, sollten | |||
Sie bei der Bezeichnung von Ordner- und Dateinamen ein paar Namenskonventionen konsequent einhalten: | |||
* keine Leerzeichen in Datei- und Ordnernamen | |||
* keine Nicht-ASCII-Zeichen (wie ä, ö, ü, ß) in Datei- und Ordnernamen | |||
* strikte Unterscheidung von Groß- und Kleinschreibung bei Datei- und Ordnernamen | |||
Nun ist es an der Zeit, die erste Version | Der Grund ist, dass Leer- und Sonderzeichen in Pfadnamen häufig Probleme | ||
bereiten, wenn sie auf reguläre Web-Server gestellt werden. Noch schlimmer | |||
ist die Groß- und Kleinschreibung. Wenn Sie eine Datei <code>main.js</code> | |||
erzeugen und diese in einer Datei <code>index.html</code> unter dem Namen | |||
<code>Main.js</code> einbinden, funktioniert Ihre Anwendung auf Ihrem | |||
Windows-Rechner einwandfrei, da unter Windows bei Dateinamen zwischen | |||
Groß- und Kleinschreibung nicht unterschieden wird. Sollten Sie die Anwendung später | |||
auf einen Mac-Rechner (einer Teamkollegin) oder einen Unix-Web-Server kopieren, | |||
funktioniert die Anwendung dagegen nicht mehr, da Mac OS X und Unix zwischen | |||
Groß- und Kleinschreibung bei Datei- und Ordnernamen unterscheiden. | |||
<!-- | |||
Es sollten also keine | |||
Ordner mit Namen wie „<code>3. Semester</code>“, „<code>Praktikum 01</code>“, „<code>Müller</code>“ etc. | |||
im Dateipfad enthalten sein.--> | |||
==Speichern der Web-Anwendung in einem Git-Repository== | |||
Nun ist es an der Zeit, die erste Version Ihrer Web-Anwendung in einem [[Repository]] (= digitales Archiv) eines | |||
[[Versionsverwaltungssystem]]s (''version control system'', VCS) zu speichern. Hier wird | [[Versionsverwaltungssystem]]s (''version control system'', VCS) zu speichern. Hier wird | ||
[[Git]] verwendet. | |||
Sehen Sie zunächst nach, ob Git bei Ihnen funktioniert. Öffnen Sie das Terminal in WebStorm und | |||
geben Sie dort <code>git --version</code> ein. Wenn sich Git mit einer Versionsnummer meldet, | |||
haben Sie das Tool korrekt installiert. | |||
Überprüfen Sie nun, ob WebStorm das Git-Tool auch findet:<br/> | |||
* <code>WebStorm</code>/<code>File</code> → <code>Preferences</code>/<code>Settings</code> → <code>Version Control</code> → <code>Git</code><br/> | |||
auch | Solle hier im Attribut <code>Path to Git executable</code> kein Pfad eingetragen sein, müssten Sie das nachholen. | ||
im | |||
Als nächstes sollten Sie in Ihrem Projekt eine Datei namens <code>.gitignore</code> einfügen, | |||
< | die bescheibt, welche Dateien '''nicht''' im Git-Repository gesichert werden sollen. | ||
Das sind vor allem Dateien mit sensiblen Informationen (wie {{zB}} Passwörtern) sowie | |||
</ | Dateien, die automatisch generiert werden können. | ||
Kopieren Sie die Datei <code>https://glossar.hs-augsburg.de/beispiel/tutorium/2018/.gitignore</code> | |||
in das Wurzelverzeichnis Ihres Web-Projektes. Speichern Sie sie unbedingt unter dem Namen | |||
<code>.gitignore</code> (mit einem Punkt als erstes Zeichen). Diese Datei enthält die Namen und | |||
Endungen zahlreicher Dateien und Ordner, die üblicherweise nicht auf einem Git-Server gespeichert | |||
werden sollten. Sie können sie in Ihrer Studienarbeit natürlich an Ihre Bedürfnisse anpassen. | |||
Um Ihr Projekt in einem Git-Repository zu speichern, dient das Git-Tool. Sie können den Befehl <code>git</code> von der Kommandozeile aufrufen, | |||
eine Verwendung der WebStorm-Umgebung ist nicht zwingend notwendig: [https://git-scm.com/book/en/v2/ Pro Git von Scott Chacon und Ben Straub]. | |||
Sie können aber in den meisten Fällen auch WebStorm zur Arbeit mit Git verwenden: | |||
* Reiter <code>VCS</code> → <code>Enable Version Control Integration</code> | |||
* <code>Git</code> auswählen | |||
* <code>OK</code> | |||
Nun sehen Sie in der Toolbar den Eintrag <code>Git:</code> gefolgt von zwei grünen Icons, einem Pfeil und einem Häkchen. | |||
Mit einem Klick auf den Pfeil können Sie Ihre lokale Version der Web-Anwendung aktualisieren, sofern sie | |||
auf einem externen Server liegt und sich dort Änderungen ergeben haben. Das ist aber noch nicht der Fall. | |||
Mit einem Klick auf das Häkchen können Sie eine neue Version Ihres Dateibaums erstellen (Commit). | |||
Wenn Sie später Änderungen an einer Datei vornehmen, können Sie jederzeit auf ältere Versionen | |||
der Datei zurückgreifen, die Sie mittels eines Commits gesichert haben. | |||
Es | Klicken Sie nun auf das Häkchen. Es geht ein Fenster auf mit dem Titel <code>Commit Changes</code>. | ||
Darin sehen Sie eine baumartige Listen von Dateien, die alle unter dem Ordner <code>Unversioned Files</code> zu finden sind. | |||
Solange eine Datei nicht unter die Kontrolle von Git gestellt wurde, wird sie durch einen Commit auch nicht versioniert. | |||
Es ist sinnvoll, nicht alle Dateien zu versionieren, da es Dateien gibt, die jederzeit wieder automatisch generiert werden können oder nur temporär existieren. Auch Dateien mit vertraulichen Inhalten sollte man nicht in einem öffentlichen Repository speichern. (Man findet dort allerdings immer wieder mal Dateien mit Kennungen und Passwörtern oder ähnlich vertraulichen Daten.) | |||
Klicken Sie auf das rechteckige Kästchen vor <code>Unversioned Files</code>. Damit werden '''alle''' bislang unversionierten Ordner und Dateien des Projektes unter die Versionskontrolle von Git gestellt. Geben Sie nun eine <code>Commit Message</code> ein (Zum Beispiel: <code>Projekt neu angelegt</code>) und klicken Sie anschließend auf <code> Commit</code>. Damit sind Kopien aller Dateien des Projektes in einem Spezial-Ordner (<code>.git</code>) gesichert worden. | |||
Wenn | Wenn Sie jetzt eine Änderung an der Datei <code>index.html</code> vornehmen ({{zB}} indem Sie die Anzahl der Ausrufezeichen in der Datei erhöhen), | ||
ändert WebStorm die Farbe der Datei im Dateibaum von schwarz nach blau. Damit sehen Sie, dass es eine neuere Version der Datei gibt, die noch nicht mittels <code>Commit</code> gesichert wurde. | |||
Führen Sie testhalber folgende Befehle aus: | |||
* Rechtsklick auf <code>index.html</code> im Dateibaum → <code>Git</code> → <code>Compare with the Same Repository Version</code> | |||
Dann sehen Sie, welche Änderungen Sie an der Datei seit dem letzten Commit vorgenommen haben. | |||
Sichern Sie auch diese Version der Datei mittels eines Commits (Vergessen Sie nicht, eine neue <code>Commit Message</code> einzugeben). | |||
Sehen Sie sich nun die Projekthistorie an: | |||
* Reiter <code>VCS</code> → <code>Git</code> → <code>Show History</code> | |||
Dann sehen Sie, dass es bislang zwei Versionen gibt. Bei jeder Version ist vermerkt, wer sie angelegt hat, wann dies geschah und was geändert wurde. | |||
Sie können auch mit einem Doppelklick auf einen Eintrag in der Liste, weitergehende Informationen zur jeweiligen Aktion bekommen. | |||
Es gibt viele weitere Befehle zur Arbeit mit einem Git-Repository: Wiederherstellung von alten Versionen, Anlegen von Entwicklungszeigen (Branches), Zusammenführen von Entwicklungszeigen etc. Lesen Sie dazu bitte die oben genannte Git-Dokumentation. | |||
==Speichern eines Git-Repositories auf einem Git-Server== | |||
Für die Lehrveranstaltung steht Ihnen ein Git-Server zur Verfügung, den Sie auch benutzen müssen, wenn Sie an der Prüfung teilnehmen möchten: | |||
*{{Git-Server}} | |||
Sie | |||
Sie können sich dort mit Ihrem RZ-Account einloggen. (Wenn Sie '''kein Mitglied der Hochschule Augsburg''' sind, können alternativ einen beliebigen anderen öffentlichen Git-Server verwenden, wie {{zB}} https://gitlab.com/public oder https://github.com/. Sie müssen sich dort nur registrieren.) | |||
{{zB}} | |||
Loggen Sie sich auf dem GitLab-Server ein. Bislang befindet sich dort keinerlei Projekte von Ihnen. | |||
Öffnen Sie im WebStorm das Terminal und geben Sie dort folgende Befehle ein: | |||
* <code>git remote add origin {{Git-Server}}/ACCOUNT/HelloWorld01.git</code> ('''Ersetzen Sie <code>ACCOUNT</code> durch Ihren RZ-Account.''') | |||
* <code>git remote -v</code> | |||
Der letzte Befehl zeigt an, mit welchen externen Repositories Ihr Repository unter welchem Namen verbunden ist. | |||
(Ein Git-Repository kann durchaus mit mehreren Repositories zur selben Zeit verbunden sein.) Der Standardname eines externen Repositories ist <code>origin</code>. Sie können aber theoretisch auch jeden anderen Namen wählen. | |||
Falls Ihnen der letzte Befehl zeigt, dass Sie die falsche URL eingetragen haben (weil Sie {{zB}} vergessen haben <code>ACCOUNT</code> durch Ihren RZ-Account zu ersetzen), | |||
können Sie die Verbindung auch wieder löschen und das Repository mit einer anderen URL verbinden_ | |||
* <code>git remote remove origin</code> | |||
* <code>git remote -v</code> | |||
* <code>git remote add origin {{Git-Server}}/ACCOUNT/HelloWorld01.git</code> ('''Ersetzen Sie auch diesmal <code>ACCOUNT</code> durch Ihren RZ-Account.''')</code> | |||
* <code>git remote -v</code> | |||
''' | |||
Sollte die URL korrekt sein, können Sie Ihr Repository auf den Git-Server kopieren: | |||
* Reiter <code>VCS</code> → <code>Git</code> →<code>Push</code> | |||
* Klick auf <code>Push</code> (Wenn Sie nach einer Kennung und einem Passwort gefragt werden, verwenden Sie Ihren RZ-Account) | |||
Dasselbe erreichen Sie, wenn Sie künftig im Terminal einfach den Befehl <code>git push</code> eingeben. (Beim ersten Mal müssen Sie allerdings <code>git push -u origin master</code> eingeben, um Git mitzuteilen, dass das Repository in den Master-Zweig des Repositories <code>origin</code> eingefügt werden soll. | |||
Sehen Sie jetzt noch einmal im Browser in Ihrem GitLab-Account nach. Dort sollte jetzt das Projekt <code>HelloWorld01</code> zu sehen sein. | |||
==Lizenz hinzufügen== | |||
In GitLab fügen Sie jetzt testhalber eine Lizenzdatei ein: | |||
* Öffen Sie das Projekt im Browser. | |||
* Klicken Sie auf <code>Add license</code> | |||
( | * Es öffnet sich ein Texteditor, in dem Sie Ihre Lizenzbedingungen eintragen sollen (Autor, Copyright, Lizenzbezeichner, Link zur Lizenzbeschreibung; Beispiel: [https://de.wikipedia.org/wiki/MIT-Lizenz MIT-Lizenz]) | ||
* <code>Commit changes</code> | |||
Wenn Sie nun in WebStorm auf das Update-Icon (grüner Pfeil nach links unten neben dem Text „Git:“) in der Toolbar klicken, wird die neue Datei in ihre lokale Kopie des Pojektes übertragen. | |||
==Projekte aus einem Git-Repository laden== | |||
Unter {{Git-Server}}/kowa/WK_HelloWorld01.git finden Sie eine Musterlösung dieser Aufgabe. | |||
Öffnen sie diese URL in einem Browser. Im Menü unterhalb der Projekt-ID sehen Sie | |||
Drop-Down-Menü mit den beiden Labeln <code>SSH</code> und <code>HTTPS</code>. | |||
In der Textbox dahinter steht jeweils ein Link, den Sie zum Kopieren des Projektes | |||
auf Ihren Rechner verwenden können. Der SSH-Link wird {{iAllg}} verwendet, wenn | |||
Sie die Git-Befehle von der Konsole absetzen. Dazu müssten Sie allerdings ein | |||
Schlüsselpaar erzeugen und den öffentlichen Schlüssel in GitLab hinterlegen. | |||
In WebStorm ist es daher einfacher, den HTTPS-Link zu verwenden. Dieser lautet für die Musterlösung: | |||
<div class="formula"> | <div class="formula"><code>{{Git-Server}}/kowa/WK_HelloWorld01.git</code></div> | ||
<code> | |||
</div> | |||
Wenn Sie diesen Link im Browser öffen, werden Sie einfach zu der schon bekannten Repository-Seite weitergeletet. | |||
Öffen Sie nun diesen Link ins WebStorm: | |||
* <code>VCS</code> → <code>Checkout from Version Control</code> → <code>Git</code> | |||
* URL: <code>{{Git-Server}}/kowa/WK_HelloWorld01.git</code> einfügen | |||
* Directory: geeigneten lokalen Speicherplatz wählen | |||
* <code>Clone</code> | |||
* <code>Yes</code> (neues Projekt in WebStorm öffnen) | |||
* <code>This Window</code> oder <code>New Window</code>, ganz nach Gusto | |||
Nun | Nun können Sie die lokale Kopie betrachten und bearbeiten sowie Ihre Änderungen committen. | ||
Allerdings können Sie Ihre Änderungen nicht mittels <code>git push</code> in mein Server-Repository zurückspielen, da Ihnen dazu das Recht fehlt. | |||
Sie könnten allerdings das Projekt mit Ihrem GitLab-Account verknüpfen und Ihre Änderungen dort sichern. | |||
==Fortsetzung des Tutoriums== | ==Fortsetzung des Tutoriums== |
Version vom 8. November 2018, 17:27 Uhr
Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:
Korrektheit: 3 (zu größeren Teilen überprüft) |
Umfang: 4 (unwichtige Fakten fehlen) |
Quellenangaben: 3 (wichtige Quellen vorhanden) |
Quellenarten: 5 (ausgezeichnet) |
Konformität: 3 (gut) |
Inhalt | Teil 1 | Teil 2 | Teil 3
Musterlösung: index.html
(Git-Repository)
Anwendungsfälle (Use Cases)
Im ersten Teil dieses Tutoriums wird zunächst mit Hilfe der IDE (integrated development environment) WebStorm eine Web-Anwendung bestehend aus einem HTML-Dokument erstellt.
Das HTML-Dokument enthält als einzigen Inhalt eine Begrüßung der gesamten Welt.
WebStorm vorbereiten
Zur Erstellung der Anwendung wird WebStorm inklusive Node.js eingesetzt. Zunächst müssen Sie diese IDE installieren und konfigurieren. Es handelt sich um eine kommerzielle Software, aber als Student erhalten Sie eine kostenlose Lizenz.
WebStorm starten
In WebStorm gibt es drei Alternativen, ein Projekt zu bearbeiten: Sie können
eine neues Projekt erstellen, ein bestehendes Projekt öffnen oder ein bestehendes Projekt aus einem
Versionsverwaltungstool laden (check out
) und öffnen.
Sie werden zunächst die erste Möglichkeit nutzen und ein neues Projekt erstellen. Anschließend werden Sie die Musterlösung für dieses Projekt aus einem Git-Repository herunterladen.
Ein neues Projekt erstellen
- WebStorm starten
File
/WebStorm
→New
→Project
Empty Project
, im FeldLocation
einen sinnvollen Pfad auswählen, wo auf Ihrem Rechner das Projekt gespechert werden soll (z. B..../mmprog/hello_world/HelloWorld01
)Create
.
Links sehen Sie nun ein senkrechtes Menü mit mehreren Menüpunkten, Structure
, Favorites
und Project
. (Wenn Sie dieses Menü nicht sehen, müssen Sie
auf das Icon unten links in der Leiste klicken. Damit wird es eingeblendet.)
Klicken Sie auf Project
. Es erscheint ein Dateibaum,
der alle Dateien Ihres Projektes enthält. Bislang gibt es nur das Wurzelverzeichnis mit dem Projektnamen
HelloWorld01
sowie zwei Systemdateien External Libraries
und Scratches and Consoles
, die uns nicht weiter interessieren.
Aktivieren Sie zunächst die Toolbar, sofern Sie dies noch nicht gemacht haben:
View
→ Häkchen beiToolbar
Hier finden Sie insbesondere den Reload-Button, mit dem Sie den Dateibaum in WebStorm neu laden können, wenn dieser außerhalb von WebStorm verändert wurde.
Klicken Sie nun mit der rechten Maus auf das Wurzelverzeichnis des Baumes und anschließend auf New
.
Es öffnet sich ein Drop-Down-Menü mit einer Auswahl an Dateien, die Sie erstellen können.
Erstellen Sie eine HTML-Datei index.html
vom Typ HTML 5 file
.
In die HTML-Datei wurde von WebStorm folgender Code automatisch eingefügt:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
Die erste Zeile legt den Typ der Datei fest. Diese Information benötigen die Browser, damit
sie den nachfolgenden HTML-Code richtig interpretieren und rendern können.
Mit <!DOCTYPE html>
wird festgelegt, dass es sich um eine HTML5-Datei handelt.
Eine HTML-4.01-Datei, die die sich an die strengen HTML-4-Vorgaben hält (strict
)
würde eine wesentlich komplexere Doctype-Angabe erfordern:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
Es gibt noch diverse weitere HTML-Varianten. Wir werden uns allerdings auf HTML5 konzentrieren.
Die zweite und die letzte Zeile des Dokuments (<html lang="en">
und </html>
)
begrenzen den eigentlichen HTML-Code. Das Attribut lang
zeigt dem Browser an,
in welcher Sprache das Dokument verfasst ist. Wenn ein deutsches HTML-Dokument erstellt werden
soll, müssen Sie den Wert en
(Englisch) in de
(Deutsch) ändern.
Da es sich bei „Hello World“ jedoch um einen englischen Text handelt, ändern wir den Attributwert nicht.
Innerhalb des öffnenden und des schließenden HTML-Tags müssen die beiden wesentlichen Bereiche eines HTML-Dokuments mit Inhalt gefüllt werden.
Im Body-Bereich stehen die eigentlichen Inhalte, die dem Leser im Contentbereich des Browsers angezeigt werden sollen. Da WebStorm keine Ahnung hat, was für Inhalte präsentiert werden sollen, ist dieser Bereich noch leer.
Im Head-Bereich stehen dagegen Informationen, die für den Browser zwar interessant sind, die aber nicht gerendert und daher im Content-Bereich des Browsers nicht dargestellt werden müssen. Typische Vertreter sind der Titel des Dokuments, der im Browser-Tab angezeigt wird, sowie die Zeichenkodierung (UTF-8, ISO-8859-1, ASCII, ...). In HTML5 werden Zeichen standardmäßig in UTF-8 kodiert. In HTML 4 war noch ISO 8859-1 Standard. In ISO 8859-1 (ISO Latin 1) gibt es maximal 256 Zeichen. Davon sind 191 spezifiziert.[1] Mit UTF-8 können dagegen theoretisch über 4 Billionen Zeichen kodiert werden, praktisch werden aber (derzeit) nur etwas mehr als eine Million Kodierungen als korrekt angesehen.[2].
Die HTML-Datei mit Inhalten füllen
Im nächsten Schritt wird die von WebStorm erzeugte HTML-Datei mit Inhalten gefüllt.
Es wird ein Titel in Head-Bereich eingetragen. Im Body-Bereich fügen Sie bitte
eine Hauptüberschrift (heading, <h1>
...</h1>
) sowie
anschließend einen Absatz (paragraph, <p>
...</p>
)
mit sinnvollem Text ein.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloWorld01</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>Welcome to Multimedia Programming!</p>
</body>
</html>
Gewöhnen Sie sich an, ineinander verschachtelte Elemente der HTML-Datei ganz akribisch einzurücken. Ein schließendes Tag steht entweder in derselben Zeile wie das öffnende Tag oder beide sind exakt gleich weit eingerückt. Tag-Blöcke, die innerhalb von anderen Tags platziert werden, werden um zwei Leerzeichen weiter eingerückt, als ihre Eltern-Tags. Vier Leerzeichen, wie oft von der IDE vorgegeben, sind für größere, tief verschachtelte Dateien zu viel. (Eventuell ist aber auch die Datei zu groß und daher zu tief verschachtelt. So etwas vermeiden Sie, wenn Sie strukturiert arbeiten.) Eine Datei mit Programmcode sollte in der Regel nicht mehr als 80 Zeichen breit sein. Sonst leidet die Lesbarkeit zu sehr.
Verwenden Sie im Programmcode niemals Tabulatorzeichen, sondern immer Leerzeichen. Für wie viele Leerzeichen ein Tabulatorzeichen steht, ist nicht genormt. Das heißt, wenn eine Programmcode-Datei mit Tabulatorzeichen in einem Text-Editor korrekt strukturiert wird, kann die Struktur derselben Datei in einem anderen Editor oder im Browser (z. B. bei einem Web-Zugriff auf ein Repository eines Versionsverwaltungssystems) fehlerhaft sein.
Fügen Sie nicht willkürlich Leerzeilen in den Code ein. Leerzeilen dienen ebenso wie Leerzeichen der Strukturierung und können – geschickt eingesetzt – die Lesbarkeit des Codes verbessern oder – unstrukturiert eingestreut – verschlechtern.
Alle drei der obigen Tipps sind für den Compiler oder den Interpreter eines Programmcodes vollkommen unerheblich. Diese Werkzeuge kommen mit jedem syntaktisch korrektem Code zurecht. Die Tipps sind ausschließlich für Personen wichtig, die den Code lesen müssen (Programmierer, Mitarbeiter der Qualitätssicherung, Studenten, Prüfer etc.). Menschen können schlecht strukturierten Code viel schlechter lesen, als gut strukturierten Code.
Folgende Variante des obigen Codes ist ebenfalls syntaktisch korrekt und wird vom Browser in derselben Weise interpretiert und dargestellt. Aber lesbar ist diese Variante nur noch sehr eingeschränkt.
<!DOCTYPE html> <html lang
="en">
<head
>
<meta
charset= "UTF-8"><title
>HelloWorld01</title>
</head
><body>
<h1 >Hello,
World!</h1> <p>Welcome to Multimedia Programming!
</p>
</body>
</html>
BTW (By the way): Auch die Einrückungen des HTML5-Templates von WebStorm sind nicht ganz korrekt. Eigentlich sollte der Code folgendermaßen aussehen:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloWorld01</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>Welcome to Multimedia Programming!</p>
</body>
</html>
Allerdings ist es durchaus sinnvoll, nicht nur das html
-Element sondern auch das head
-Element und das body
-Element
am Zeilenanfang beginnen zu lassen, da diese Elemente in jeder HTML-Datei mit Sicherheit jeweils genau einmal und
jedes mal auch an derselben Stellen (am Datei-Anfang, am Datei-Ende sowie einmal in der Datei-„Mitte“) vorkommen.
Dadurch wird die Datei um zwei Zeichen schmäler, was ebenfalls der Lesbarkeit zugute kommt.
Fazit: Keine Regel ohne Ausnahme, aber Ausnahmen sollten begründet sein.
Start der Web-Anwendung
Um die zuvor erzeugte HTML-Datei in einem Browser ansehen zu können, muss sie in das Dokument-Verzeichnis eines Web-Servers gelegt werden. Dies ist normalerweise etwas umständlich, wenn der Web-Server nicht auf dem Entwicklungsrechner läuft. Eine Möglichkeit wäre nun, auf dem Entwicklungsrechner, also auf Ihrem Laptop oder PC, einen Server wie Apache oder Tomcat zu installieren. Das ist aber für einfache HTML-Seiten nicht notwendig, d. h. für HTML-Seiten, die keinen Python-, PHP-, Java-, JavaScript- oder sonstigen Code enthalten, der ausgeführt werden muss, bevor die Seite an den Client (Browser) ausgeliefert wird.
In diesem Tutorium werden nur HTML-Seiten erstellt, die JavaScript-Code enthalten. Dieser Code soll nicht vom Server sondern vom Client ausgeführt werden, nachdem die HTML-Seite (samt JavaScript-Code) an den Client übermittelt wurde. Daher reicht uns ein ganz einfacher Server, der nichts weiter macht, als HTML-Seiten auszuliefern. Ein derartiger Server ist in WebStorm bereits enthalten. Daher ist das Testen der Web-Anwendung ganz einfach.
Klicken Sie im Dateibaum von WebStorm mit der rechten Maustaste auf index.html
und klicken Sie dann auf Run 'index.html'
. Wenn man diesen Befehl erstmals ausgeführt hat,
erscheint in der Hauptmenü-Leiste von WebStorm ein Drop-Down-Menü mit ausführbaren Dateien sowie rechts
daneben ein grünes Dreieck als Icon, mit dem die im Menü selektierte Datei direkt gestartet werden kann.
Der Startbefehl hat zur Folge, dass ein lokaler Web-Server gestartet und die selektierte HTML-Datei in einem Browser geöffnet wird. Welcher Browser dies ist, kann in WebStorm folgendermaßen festgelegt werden:
- Fahren Sie mit der Maus in die rechte obere Ecke des Editor-Fensters von
index.html
, bis dort ein kleines Fenster mit diversen Browser-Icons erscheint. - Klicken Sie auf das Icon eines Browsers, den Sie auf Ihrem Rechner auch installiert haben, dann wird die Datei in diesem Browser geöffnet..
Sie können den Defaultbrowser im Browser jederzeit ändern:
- Im Dateibaum
index.html
selektieren. - Reiter
Run
→Edit Configurations...
→ Klick auf...
hinter dem LabelBrowser
→ Defaultbrowser festlegen OK
Wenn man anschließend in WebStorm Änderungen an der im Browser geöffneten Datei vornimmt, muss man nicht jedes mal die Datei neu starten. Es reicht, im Browser den Reload-Button zu drücken.
Der von WebStorm gestartete Web-Server bedient diverse Browser, die sich auf dem Entwicklungsrechner befinden. Wenn man dieselbe HTML-Datei in einem anderen Browser testen will, kann man dazu den URI im ersten Browser kopieren und in die URI-Leiste des zweiten Browsers einfügen. WebStorm bemerkt, dass der URI in einem anderen Browser geöffnet werden soll und stellt dazu eine Sicherheitsfrage:
Copy authorization URL to clipboard
Wenn man dies bestätigt, enthält das Clipboard anschließend einen
URI, die man mit Strg-v
als Ersatz für den zuerst eingefügte URI in den neuen Browser kopieren kann.
Dieser URI wird dann angezeigt und kann ebenfalls per Reload aktualisiert werden. Schneller geht der Test mit einem alternativen Browser jedoch mit den Browser-Icons in der rechten oberen Ecke des Editor-Fensters.
Man könnte die Seite sogar von einem anderen Device, wie z. B. einen Smartphone aus aufrufen. Dies ist jedoch im WebStorm-Server standardmäßig aus Sicherheitsgründen unterbunden.
Vermeidung von Sonderzeichen in Dateinamen
Da eine Web-Anwendung üblicherweise irgendwann einmal auf einen öffentlich zugänglichen Web-Server gelegt werden soll, sollten Sie bei der Bezeichnung von Ordner- und Dateinamen ein paar Namenskonventionen konsequent einhalten:
- keine Leerzeichen in Datei- und Ordnernamen
- keine Nicht-ASCII-Zeichen (wie ä, ö, ü, ß) in Datei- und Ordnernamen
- strikte Unterscheidung von Groß- und Kleinschreibung bei Datei- und Ordnernamen
Der Grund ist, dass Leer- und Sonderzeichen in Pfadnamen häufig Probleme
bereiten, wenn sie auf reguläre Web-Server gestellt werden. Noch schlimmer
ist die Groß- und Kleinschreibung. Wenn Sie eine Datei main.js
erzeugen und diese in einer Datei index.html
unter dem Namen
Main.js
einbinden, funktioniert Ihre Anwendung auf Ihrem
Windows-Rechner einwandfrei, da unter Windows bei Dateinamen zwischen
Groß- und Kleinschreibung nicht unterschieden wird. Sollten Sie die Anwendung später
auf einen Mac-Rechner (einer Teamkollegin) oder einen Unix-Web-Server kopieren,
funktioniert die Anwendung dagegen nicht mehr, da Mac OS X und Unix zwischen
Groß- und Kleinschreibung bei Datei- und Ordnernamen unterscheiden.
Speichern der Web-Anwendung in einem Git-Repository
Nun ist es an der Zeit, die erste Version Ihrer Web-Anwendung in einem Repository (= digitales Archiv) eines Versionsverwaltungssystems (version control system, VCS) zu speichern. Hier wird Git verwendet.
Sehen Sie zunächst nach, ob Git bei Ihnen funktioniert. Öffnen Sie das Terminal in WebStorm und
geben Sie dort git --version
ein. Wenn sich Git mit einer Versionsnummer meldet,
haben Sie das Tool korrekt installiert.
Überprüfen Sie nun, ob WebStorm das Git-Tool auch findet:
WebStorm
/File
→Preferences
/Settings
→Version Control
→Git
Solle hier im Attribut Path to Git executable
kein Pfad eingetragen sein, müssten Sie das nachholen.
Als nächstes sollten Sie in Ihrem Projekt eine Datei namens .gitignore
einfügen,
die bescheibt, welche Dateien nicht im Git-Repository gesichert werden sollen.
Das sind vor allem Dateien mit sensiblen Informationen (wie z. B. Passwörtern) sowie
Dateien, die automatisch generiert werden können.
Kopieren Sie die Datei https://glossar.hs-augsburg.de/beispiel/tutorium/2018/.gitignore
in das Wurzelverzeichnis Ihres Web-Projektes. Speichern Sie sie unbedingt unter dem Namen
.gitignore
(mit einem Punkt als erstes Zeichen). Diese Datei enthält die Namen und
Endungen zahlreicher Dateien und Ordner, die üblicherweise nicht auf einem Git-Server gespeichert
werden sollten. Sie können sie in Ihrer Studienarbeit natürlich an Ihre Bedürfnisse anpassen.
Um Ihr Projekt in einem Git-Repository zu speichern, dient das Git-Tool. Sie können den Befehl git
von der Kommandozeile aufrufen,
eine Verwendung der WebStorm-Umgebung ist nicht zwingend notwendig: Pro Git von Scott Chacon und Ben Straub.
Sie können aber in den meisten Fällen auch WebStorm zur Arbeit mit Git verwenden:
- Reiter
VCS
→Enable Version Control Integration
Git
auswählenOK
Nun sehen Sie in der Toolbar den Eintrag Git:
gefolgt von zwei grünen Icons, einem Pfeil und einem Häkchen.
Mit einem Klick auf den Pfeil können Sie Ihre lokale Version der Web-Anwendung aktualisieren, sofern sie
auf einem externen Server liegt und sich dort Änderungen ergeben haben. Das ist aber noch nicht der Fall.
Mit einem Klick auf das Häkchen können Sie eine neue Version Ihres Dateibaums erstellen (Commit). Wenn Sie später Änderungen an einer Datei vornehmen, können Sie jederzeit auf ältere Versionen der Datei zurückgreifen, die Sie mittels eines Commits gesichert haben.
Klicken Sie nun auf das Häkchen. Es geht ein Fenster auf mit dem Titel Commit Changes
.
Darin sehen Sie eine baumartige Listen von Dateien, die alle unter dem Ordner Unversioned Files
zu finden sind.
Solange eine Datei nicht unter die Kontrolle von Git gestellt wurde, wird sie durch einen Commit auch nicht versioniert.
Es ist sinnvoll, nicht alle Dateien zu versionieren, da es Dateien gibt, die jederzeit wieder automatisch generiert werden können oder nur temporär existieren. Auch Dateien mit vertraulichen Inhalten sollte man nicht in einem öffentlichen Repository speichern. (Man findet dort allerdings immer wieder mal Dateien mit Kennungen und Passwörtern oder ähnlich vertraulichen Daten.)
Klicken Sie auf das rechteckige Kästchen vor Unversioned Files
. Damit werden alle bislang unversionierten Ordner und Dateien des Projektes unter die Versionskontrolle von Git gestellt. Geben Sie nun eine Commit Message
ein (Zum Beispiel: Projekt neu angelegt
) und klicken Sie anschließend auf Commit
. Damit sind Kopien aller Dateien des Projektes in einem Spezial-Ordner (.git
) gesichert worden.
Wenn Sie jetzt eine Änderung an der Datei index.html
vornehmen (z. B. indem Sie die Anzahl der Ausrufezeichen in der Datei erhöhen),
ändert WebStorm die Farbe der Datei im Dateibaum von schwarz nach blau. Damit sehen Sie, dass es eine neuere Version der Datei gibt, die noch nicht mittels Commit
gesichert wurde.
Führen Sie testhalber folgende Befehle aus:
- Rechtsklick auf
index.html
im Dateibaum →Git
→Compare with the Same Repository Version
Dann sehen Sie, welche Änderungen Sie an der Datei seit dem letzten Commit vorgenommen haben.
Sichern Sie auch diese Version der Datei mittels eines Commits (Vergessen Sie nicht, eine neue Commit Message
einzugeben).
Sehen Sie sich nun die Projekthistorie an:
- Reiter
VCS
→Git
→Show History
Dann sehen Sie, dass es bislang zwei Versionen gibt. Bei jeder Version ist vermerkt, wer sie angelegt hat, wann dies geschah und was geändert wurde. Sie können auch mit einem Doppelklick auf einen Eintrag in der Liste, weitergehende Informationen zur jeweiligen Aktion bekommen.
Es gibt viele weitere Befehle zur Arbeit mit einem Git-Repository: Wiederherstellung von alten Versionen, Anlegen von Entwicklungszeigen (Branches), Zusammenführen von Entwicklungszeigen etc. Lesen Sie dazu bitte die oben genannte Git-Dokumentation.
Speichern eines Git-Repositories auf einem Git-Server
Für die Lehrveranstaltung steht Ihnen ein Git-Server zur Verfügung, den Sie auch benutzen müssen, wenn Sie an der Prüfung teilnehmen möchten:
Sie können sich dort mit Ihrem RZ-Account einloggen. (Wenn Sie kein Mitglied der Hochschule Augsburg sind, können alternativ einen beliebigen anderen öffentlichen Git-Server verwenden, wie z. B. https://gitlab.com/public oder https://github.com/. Sie müssen sich dort nur registrieren.)
Loggen Sie sich auf dem GitLab-Server ein. Bislang befindet sich dort keinerlei Projekte von Ihnen.
Öffnen Sie im WebStorm das Terminal und geben Sie dort folgende Befehle ein:
git remote add origin https://gitlab.multimedia.hs-augsburg.de/ACCOUNT/HelloWorld01.git
(Ersetzen SieACCOUNT
durch Ihren RZ-Account.)git remote -v
Der letzte Befehl zeigt an, mit welchen externen Repositories Ihr Repository unter welchem Namen verbunden ist.
(Ein Git-Repository kann durchaus mit mehreren Repositories zur selben Zeit verbunden sein.) Der Standardname eines externen Repositories ist origin
. Sie können aber theoretisch auch jeden anderen Namen wählen.
Falls Ihnen der letzte Befehl zeigt, dass Sie die falsche URL eingetragen haben (weil Sie z. B. vergessen haben ACCOUNT
durch Ihren RZ-Account zu ersetzen),
können Sie die Verbindung auch wieder löschen und das Repository mit einer anderen URL verbinden_
git remote remove origin
git remote -v
git remote add origin https://gitlab.multimedia.hs-augsburg.de/ACCOUNT/HelloWorld01.git
(Ersetzen Sie auch diesmalACCOUNT
durch Ihren RZ-Account.)git remote -v
Sollte die URL korrekt sein, können Sie Ihr Repository auf den Git-Server kopieren:
- Reiter
VCS
→Git
→Push
- Klick auf
Push
(Wenn Sie nach einer Kennung und einem Passwort gefragt werden, verwenden Sie Ihren RZ-Account)
Dasselbe erreichen Sie, wenn Sie künftig im Terminal einfach den Befehl git push
eingeben. (Beim ersten Mal müssen Sie allerdings git push -u origin master
eingeben, um Git mitzuteilen, dass das Repository in den Master-Zweig des Repositories origin
eingefügt werden soll.
Sehen Sie jetzt noch einmal im Browser in Ihrem GitLab-Account nach. Dort sollte jetzt das Projekt HelloWorld01
zu sehen sein.
Lizenz hinzufügen
In GitLab fügen Sie jetzt testhalber eine Lizenzdatei ein:
- Öffen Sie das Projekt im Browser.
- Klicken Sie auf
Add license
- Es öffnet sich ein Texteditor, in dem Sie Ihre Lizenzbedingungen eintragen sollen (Autor, Copyright, Lizenzbezeichner, Link zur Lizenzbeschreibung; Beispiel: MIT-Lizenz)
Commit changes
Wenn Sie nun in WebStorm auf das Update-Icon (grüner Pfeil nach links unten neben dem Text „Git:“) in der Toolbar klicken, wird die neue Datei in ihre lokale Kopie des Pojektes übertragen.
Projekte aus einem Git-Repository laden
Unter https://gitlab.multimedia.hs-augsburg.de/kowa/WK_HelloWorld01.git finden Sie eine Musterlösung dieser Aufgabe.
Öffnen sie diese URL in einem Browser. Im Menü unterhalb der Projekt-ID sehen Sie
Drop-Down-Menü mit den beiden Labeln SSH
und HTTPS
.
In der Textbox dahinter steht jeweils ein Link, den Sie zum Kopieren des Projektes
auf Ihren Rechner verwenden können. Der SSH-Link wird i. Allg. verwendet, wenn
Sie die Git-Befehle von der Konsole absetzen. Dazu müssten Sie allerdings ein
Schlüsselpaar erzeugen und den öffentlichen Schlüssel in GitLab hinterlegen.
In WebStorm ist es daher einfacher, den HTTPS-Link zu verwenden. Dieser lautet für die Musterlösung:
Wenn Sie diesen Link im Browser öffen, werden Sie einfach zu der schon bekannten Repository-Seite weitergeletet. Öffen Sie nun diesen Link ins WebStorm:
VCS
→Checkout from Version Control
→Git
- URL:
https://gitlab.multimedia.hs-augsburg.de/kowa/WK_HelloWorld01.git
einfügen - Directory: geeigneten lokalen Speicherplatz wählen
Clone
Yes
(neues Projekt in WebStorm öffnen)This Window
oderNew Window
, ganz nach Gusto
Nun können Sie die lokale Kopie betrachten und bearbeiten sowie Ihre Änderungen committen.
Allerdings können Sie Ihre Änderungen nicht mittels git push
in mein Server-Repository zurückspielen, da Ihnen dazu das Recht fehlt.
Sie könnten allerdings das Projekt mit Ihrem GitLab-Account verknüpfen und Ihre Änderungen dort sichern.
Fortsetzung des Tutoriums
Sie sollten nun Teil 2 des Tutoriums bearbeiten.
Quellen
- ↑ ISO/IEC 8859-1:1998
- ↑ [https://tools.ietf.org/html/rfc3629 Request for Comments 3629, UTF-8, a transformation format of ISO 10646]
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)