Start: Git, Github und Pages - JirkaDellOro/EIA2 GitHub Wiki

Checkliste

Wenn Sie diese Aufgabe vollständig und korrekt erledigt haben, verfügen Sie über

  • eine lauffähige Installation von VSCode mit arbeitendem TypeScript-Compiler und Linter
  • einen Workspace an einem Ort Ihrer Wahl, darin zwei Projekte, eines für Ihre Userpage mit Portrait und Steckbrief und eines für die EIA2-Aufgaben
  • zwei lokale Git-Repositories an einem Ort Ihrer Wahl, für jedes Projekt eines
  • zwei damit verbundene Remote-Repositories auf GitHub. Die Repositories heißen "[username].github.io" für die Userpage und (so wird hier angenommen) "EIA2" für die Aufgaben
  • zwei mit diesen Repositories verbundene Github-Pages. Diese sind erreichbar unter "https://[username].github.io" (Userpage) und "https://[username].github.io/EIA2" (Projectpage)
  • die Registrierung des Steckbriefes auf der Kursseite, wo er angezeigt wird
  • eine Datei README.MD, tsconfig.json und tslint.json in Ihrem EIA2-Projekt und dessen Repositories, parallel dazu einen Ordner für Aufgabe 0 und darin Ihre Lösung für die kleine interaktive Website.
  • je einen Link zu Ihrem EIA2-Repository, zur Userpage und zu Ihrer Lösung in der Projectpage im Steckbrief, sowie einen Link zur Lösung auf der Userpage
    Alle Repositories, Pages und der Workspace sind synchronisiert

Aufgabe

1. Installation

  • Installieren Sie die VSCode, sowie Node, TypeScript und den Linter auf ihrem Arbeitssystem (empfohlen), einem Stick oder einem anderen Medium (siehe Ast "Installations" in Mindmap)

2. Github-Account und Userpage

  • Legen Sie sich einen Github-Account an und erstellen Sie eine Userpage (siehe Ast "create user+page" in Mindmap)
  • Stellen Sie ein, dass Sie automatisch über Aktivitäten auf Ihrem Repository benachrichtigt werden
  • Klonen Sie ihr Userpage-Repository auf ihr System in VSCode (siehe Ast "Git in VSCode" in Mindmap)
  • Erweitern Sie die Datei index.html und gestalten Sie damit Ihre persönliche Userpage in HTML und CSS
  • Pushen Sie diese wieder zurück auf Github

3. Steckbrief

  • Legen Sie dort auch Ihren Steckbrief und ihr Portrait ab, ggf. in einem eigenen Ordner. Vorlagen finden Sie im Startpaket auf der Kursseite. Achten Sie auf die korrekte Bildgröße beim Portrait
  • Registrieren Sie Ihren Steckbrief auf der Kursseite. Nutzen sie hierfür den Pfad zu Pages (...github.io/...). Prüfen Sie zuvor, dass ihr Browser über Pages Zugriff auf die beiden Dateien hat und sie korrekt anzeigt.

4. Github-Project und Projectpage

  • Erstellen Sie ein neues Repository für EIA2 auf Github und aktivieren Sie Pages
  • Klonen Sie das Projekt in einen eigenen Ordner in VSCode
  • Kopieren Sie die Dateien "tsconfig.json" und "tslint.json" vom EIA2-Repository in dieses Projekt. Diese steuern das Verhalten des Compilers, der den Code übersetzt, sowie des Linters, der Ihnen beim ordentlichen Erstellen des Codes hilft

5. Eine winzige, interaktive Webseite

  • Der Nutzer soll mit Hilfe von prompt(...) seinen Namen eingeben
  • Daraufhin erscheint eine persönliche Begrüßung auf der Seite. Der gleiche Text erscheint zudem in der Browserkonsole.
  • erstellen Sie hierfür im EIA2 Ordner einen Unterordner und darin die erforderliche HTML-Seite
  • Programmieren Sie das Verhalten in TypeScript und zwar explizit typisiert. Alle verwendeten Variablen sind also mit Typ-Annotationen zu versehen
  • Referenzieren Sie den entstandenen JavaScript-Code von der HTML-Seite aus
  • Pushen Sie das Ergebnis zurück auf Github

6. Links

  • erstellen Sie im Steckbrief klickbare Links
    • zu ihrem Github-Repository
    • und zu ihrer Userpage
  • erstellen Sie klickbare Links zu der Miniseite (Aufgabe 0)
    • im Steckbrief und
    • in Ihrer Userpage