06 – Einführung Projekt

Eine Notiz-App mit allem was dazugehört

JS Logo

Lernziele dieser Lektion

  • Erstellen der grundlegenden Codebase für dieses Projekt
  • Grundverständnis für Git aufbauen
  • Initialisieren eines Git-Repositories
  • Den Umfang des Projektes verstehen

Projekteinführung

Eine simple Notizenapp mit folgenden Features um das gelernte praktisch anzuwenden.

  • Erfassen neuer Notizen via Web-Interface
  • Verwalten von Notizen (löschen, bearbeiten)
  • Versionsverwaltung mit Git
  • (Opt.) Login, Authentifizierung

Versionsverwaltung mit Git

Kurzüberblick für unser Projekt

Was ist Git?

  • Git ist ein Versionsverwaltungssystem
  • Es speichert Änderungen am Code
  • Man kann jederzeit zu alten Versionen zurückkehren

Warum nutzen wir Git?

  • Übersicht über Änderungen
  • Sicherheit bei Fehlern
  • Zusammenarbeit im Team
  • Standard in der Softwareentwicklung

Wie arbeitet Git grundsätzlich?

  • Dateien werden geändert
  • Änderungen werden gespeichert (Commit)
  • Commits bilden die Projekt-Historie

Wichtige Git-Begriffe

  • Repository – das Projekt
  • Commit – gespeicherter Stand
  • History – alle bisherigen Versionen

Die wichtigsten Git-Commands

  • git init – Repository erstellen
  • git status – Status anzeigen
  • git add – Dateien vormerken
  • git commit – Aenderungen speichern

git add


                        git add .

Fügt alle aktuellen Änderungen zum nächsten Commit hinzu.

git commit


                        git commit -m "Erste Version der App"

Speichert einen festen Stand des Projekts.

Remote Repositories

  • Code kann online gespeichert werden
  • z.B. auf GitHub oder GitLab
  • Erlaubt Zusammenarbeit und Backup

git push


                        git push

Lädt die lokalen Commits ins Remote-Repository hoch.

Wichtig für dieses Projekt

  • Regelmässig committen
  • Sinnvolle Commit-Nachrichten schreiben
  • Git dient als Sicherheitsnetz

Merksatz

add → commit → push

Erstellen einer Codebase

  1. Erstellen Sie einen neuen Ordner notes-app
  2. Erstellen Sie darin die folgenden Dateien/Ordner
    • index.html
    • /css/styles.css
    • /js/main.js
  3. Erstellen Sie ein HTML5 Grundgerüst in der Datei index.html und binden Sie das CSS und JS ordnungsgemäss ein

Git-Repository initialisieren

Navigieren Sie in ihrem Terminal in ihren Projektordner und führen Sie git init aus

Github authentifizieren

  1. Neuen SSH-Key erstellen:
    ssh-keygen -t ed25519 -C "<mail>"
  2. Bestätigen aller Fragen mit Enter
  3. Inhalt der Datei
    C:/Users/<username>/.ssh/id_ed25519.pub kopieren
  4. In GitHub unter Profil → Settings → SSH and GPG keys → New SSH key einfügen

Remote erstellen

  • Erstellen Sie in Ihrem GitHub-Account (oder ähnlich) ein neues Repository.

  • Fügen Sie das Remote-Repository in ihrem lokalen Repository hinzu.

    git remote add origin git@github.com:<username>/<project-name>.git

Ersten Commit erstellen

  1. Im Ordner der Codebase, alle Änderungen zum Repository hinzufügen: git add .
  2. Ersten lokalen Commit erstellen: git commit -m 'initial commit'
  3. Lokalen Commit auf die GitHub-Remote pushen: git push
  4. Auf GitHub.com sollte der Code nun in Ihrem Repository vorhanden sein