Appearance
Kapitel 9: Praxisprojekte für Anfänger
9.1 Projekt 1: Persönliches Projekt versionieren (Einzelentwicklung)
📝 Szenario: Eine einfache Website erstellen und versionieren
Lernziele:
- ✅ Lokales Repository erstellen
- ✅ Dateien hinzufügen und committen
- ✅
.gitignorekonfigurieren - ✅ Branches für Features verwenden
Schritt 1: Projekt initialisieren
bash
# 1. Projektordner erstellen
mkdir meine-website
cd meine-website
# 2. Git-Repository initialisieren
git init
# 3. .gitignore erstellen
echo "node_modules/" > .gitignore
echo ".DS_Store" >> .gitignore
echo "*.log" >> .gitignore
# 4. Erste Dateien erstellen
echo "<!DOCTYPE html><html><head><title>Meine Website</title></head><body><h1>Willkommen</h1></body></html>" > index.html
echo "body { font-family: Arial; }" > style.cssSchritt 2: Ersten Commit erstellen
bash
# 1. Status prüfen
git status
# 2. Alle Dateien zur Staging Area hinzufügen
git add .
# 3. Ersten Commit erstellen
git commit -m "Initialer Commit: Website-Grundgerüst"
# 4. Historie anzeigen
git log --onelineSchritt 3: Änderungen vornehmen & committen
bash
# 1. index.html erweitern
echo "<p>Dies ist ein Paragraph.</p>" >> index.html
# 2. Änderungen committen
git add index.html
git commit -m "Feature: Paragraph zur index.html hinzugefügt"
# 3. style.css erweitern
echo "h1 { color: blue; }" >> style.css
# 4. Änderungen committen
git add style.css
git commit -m "Style: h1 Farbe auf blau geändert"Schritt 4: Versionsrückgängigmachen (Practice)
bash
# 1. Letzten Commit rückgängig machen (Änderungen bleiben erhalten)
git reset --soft HEAD~1
# 2. Status prüfen (Änderungen sind in Staging Area)
git status
# 3. Erneut committen (mit besserer Nachricht)
git commit -m "Fix: h1 Farbe korrigiert (Blau)"
# 4. Historie anzeigen
git log --onelineSchritt 5: Branch für neues Feature erstellen
bash
# 1. Neuen Branch erstellen
git checkout -b feature-kontaktformular
# 2. Neue Datei erstellen
echo "<form><input type="text" placeholder="Name"></form>" > kontakt.html
# 3. Committen
git add kontakt.html
git commit -m "Feature: Kontaktformular hinzugefügt"
# 4. Zurück zu main wechseln
git checkout main
# 5. Feature-Branch mergen
git merge feature-kontaktformular
# 6. Branch löschen
git branch -d feature-kontaktformularSchritt 6: Zu GitHub pushen
bash
# 1. Repository auf GitHub erstellen (siehe Kapitel 6.2)
# 2. Remote hinzufügen
git remote add origin https://github.com/ihr-username/meine-website.git
# 3. Pushen
git push -u origin main
# 4. Auf GitHub überprüfen9.2 Projekt 2: Zwei-Personen-Team-Simulation (Teamarbeit)
📝 Szenario: Zwei Entwickler arbeiten am selben Projekt
Lernziele:
- ✅ Repository klonen
- ✅ Branches erstellen und mergen
- ✅ Merge-Konflikte lösen
- ✅ Pull Requests erstellen
Vorbereitung: Repository auf GitHub erstellen
- Erstellen Sie ein neues Repository auf GitHub (siehe Kapitel 6.2)
- Fügen Sie eine
README.mdund eineindex.htmlhinzu - Laden Sie einen Freund (oder ein zweites Konto) als Collaborator ein (siehe Kapitel 6.6)
Schritt 1: Entwickler A klont und arbeitet
bash
# 1. Repository klonen
git clone https://github.com/ihr-username/team-projekt.git
cd team-projekt
# 2. Neuen Branch erstellen
git checkout -b feature-header
# 3. Änderungen vornehmen
echo "<header>Meine Website</header>" > header.html
# 4. Committen und pushen
git add header.html
git commit -m "Feature: Header hinzugefügt"
git push -u origin feature-header
# 5. Pull Request auf GitHub erstellen (Merge in main)Schritt 2: Entwickler B klont und arbeitet (parallel)
bash
# 1. Repository klonen (in einem anderen Ordner / Computer)
git clone https://github.com/ihr-username/team-projekt.git
cd team-projekt
# 2. Neuen Branch erstellen
git checkout -b feature-footer
# 3. Änderungen vornehmen
echo "<footer>Copyright 2024</footer>" > footer.html
# 4. Committen und pushen
git add footer.html
git commit -m "Feature: Footer hinzugefügt"
git push -u origin feature-footer
# 5. Pull Request auf GitHub erstellen (Merge in main)Schritt 3: Beide PRs werden gemergt (auf GitHub)
- Teamleiter (oder Sie selbst) mergen beide PRs auf GitHub
mainhat jetztheader.htmlundfooter.html
Schritt 4: Entwickler A aktualisiert seinen lokalen main
bash
# 1. Auf main wechseln
git checkout main
# 2. Neueste Änderungen pullen
git pull origin main
# 3. Überprüfen, ob footer.html da ist
ls -laSchritt 5: Entwickler B aktualisiert seinen lokalen main
bash
# 1. Auf main wechseln
git checkout main
# 2. Neueste Änderungen pullen
git pull origin main
# 3. Überprüfen, ob header.html da ist
ls -laSchritt 6: Merge-Konflikt simulieren und lösen
Entwickler A:
bash
# 1. Neuen Branch erstellen
git checkout -b feature-konflikt
# 2. index.html ändern (Zeile 5)
echo "Geänderter Titel von A" > index.html
# 3. Committen und pushen
git add index.html
git commit -m "Änderung von Entwickler A"
git push -u origin feature-konflikt
# 4. Pull Request erstellen (noch nicht mergen!)Entwickler B (gleichzeitig):
bash
# 1. Neuen Branch erstellen
git checkout -b feature-konflikt-b
# 2. index.html ändern (dieselbe Zeile!)
echo "Geänderter Titel von B" > index.html
# 3. Committen und pushen
git add index.html
git commit -m "Änderung von Entwickler B"
git push -u origin feature-konflikt-b
# 4. Pull Request erstellenMerge-Konflikt beim Mergen (auf GitHub):
- GitHub wird anzeigen: "Can't merge - merge conflicts"
- Lösung: Lokal mergen und Konflikt lösen
bash
# 1. main pullen
git checkout main
git pull origin main
# 2. Feature-Branch von B pullen
git checkout feature-konflikt-b
git pull origin feature-konflikt-b
# 3. main in feature-Branch mergen
git merge main
# 4. Konflikt in index.html lösen (Datei bearbeiten, Markierungen entfernen)
# (Siehe Kapitel 5.4 für Details)
# 5. Nach Lösung: Committen
git add index.html
git commit -m "Merge: Konflikt gelöst"
# 6. Pushen
git push origin feature-konflikt-b
# 7. Pull Request auf GitHub aktualisieren und mergen9.3 Zusammenfassung der Praxisprojekte
✅ Projekt 1 (Einzelentwicklung):
- Git-Repository initialisieren
- Dateien committen
- Branches für Features verwenden
- Zu GitHub pushen
✅ Projekt 2 (Teamarbeit):
- Repository klonen
- Paralleles Arbeiten in Feature-Branches
- Pull Requests erstellen
- Merge-Konflikte lösen
📝 Zusammenfassung
In diesem Kapitel haben Sie gelernt:
- ✅ Praxisprojekt 1: Einzelentwicklung (Website versionieren)
- ✅ Praxisprojekt 2: Teamarbeit (zwei Entwickler, Konfliktlösung)
- ✅ Wichtige Git-Befehle in der Praxis angewendet
Nächstes Kapitel: Wir werden ein Unternehmensprojekt simulieren (komplexer Workflow).
🔗 Weiterführende Links
Copyright © 2024 Git-Tutorial für Anfänger
