Samenwerken met GitHub en Codespaces

Waarom Git en GitHub?

Als je alleen werkt, kun je prima bestanden lokaal opslaan. Maar zodra je in een groep werkt, wordt het snel rommelig:

• Wie heeft de nieuwste versie?
• Wat als twee mensen tegelijk dezelfde code veranderen?
• Hoe voorkom je dat je werk kwijtraakt?

Daarom gebruiken programmeurs Git.

• Git bewaart alle veranderingen in de code als commits: kleine momentopnames met een uitleg.
• GitHub is de plek waar je deze commits online opslaat. Zo kunnen groepsgenoten jouw werk ophalen, zien wat er veranderd is, en hun eigen werk toevoegen.

Voorbeeld: Stel dat jij een knop toevoegt aan de website en een ander verandert de kleuren. Met GitHub kan je die twee veranderingen samenvoegen, zonder elkaars werk kwijt te raken.

Wat is Codespaces?

Codespaces is een online programmeeromgeving van GitHub. Het lijkt op Visual Studio Code, maar draait in de cloud.

• Je hebt geen installatie nodig, alleen een browser.
• Je kunt overal werken, ook op een Chromebook.
• De code wordt automatisch aan je GitHub-repo gekoppeld.

Voorbeeld: Jij opent je Codespace en voegt een nieuwe pagina toe. Je commit dit, en direct daarna kan je groepsgenoot dezelfde wijziging zien en verder werken.

Let op: je hebt 2000 minuten per maand. Sluit Codespaces dus netjes af na gebruik.

Kernbegrippen

• Repository (repo): De map met alle bestanden én de geschiedenis van je project.
• Commit: Een momentopname van de code. Je schrijft er altijd een bericht bij, bv. “API toegevoegd aan overzichtspagina”.
• Branch: Een zijtak van de code. In een branch werk je aan één taak, zonder dat je meteen het hoofdbestand (main) verandert.
• Pull Request (PR): Een voorstel om jouw branch samen te voegen met main. Een groepsgenoot bekijkt dit en keurt het goed.
• Merge conflict: Als twee mensen dezelfde regel hebben aangepast, moet Git weten welke versie je wilt bewaren.

Commit

Een momentopname van de code. Je schrijft er altijd een bericht bij. Een commit moet te begrijpen zijn zonder dat je de code opent.

• Goede commit-berichten:
  • API request toegevoegd voor lijst met 10 recepten (fetch + lijst renderen)
  • Navigatiebalk toegevoegd met Home en About
  • CSS: kleurcontrast verbeterd naar AA
• Foute commit-berichten:
  • aanpassingen
  • werkt niet maar ff pushen
  • update

Branch

Een zijtak van de code waarin je veilig aan een taak werkt. Zo blijft main schoon en stabiel. De naam geven we onze eigen naam + een korte beschrijving van waar we aan werken. Zo is meteen duidelijk wie waaraan werkt.

• Goede branchnamen:
  • Sanne-zoekfunctie
  • John-stijl-overzichtspagina
  • Denise-API-detailpagina
• Foute branchnamen:
  • test
  • newbranch
  • branch123

Pull Request (PR)

Om de code dan weer samen te voegen gebruiken we een Pull Request. Feitelijk betekent dit een voorstel om jouw branch samen te voegen met main. Een PR legt uit wat en waarom, zodat een groepsgenoot je code kan nakijken.

• Goede PR-titels:
  • John: Zoekfunctie toegevoegd aan overzichtspagina
  • Sanne: Detailpagina met sprite en type
• Goede PR-beschrijving:
  • “Ik heb een zoekveld toegevoegd waarmee gebruikers Pokémon kunnen filteren op naam. Hiervoor is de lijst in script.js aangepast. Graag review.”
• Foute PR’s:
  • eerste pull request
  • heb wat aangepast

Merge conflict

Wanneer twee mensen dezelfde regel veranderen, moet Git weten welke versie klopt.

Voorbeeld conflictblok:

<<<<<< HEAD
Mijn verandering
======
Verandering van groepsgenoot
>>>>>> John-zoekfunctie

Oplossing: 1. kies de juiste versie (of combineer) 2. verwijder de markers 3. commit de merge.

Voorbeeld: Jij en een klasgenoot voegen allebei je naam toe op regel 3 van classlist.md. Het conflict los je op door beide namen te laten staan, elk op een nieuwe regel.

Waarom zo werken?

• Branches: iedereen werkt veilig naast elkaar.
• Commits: elke stap is traceerbaar.
• Pull Requests: er is altijd een reviewmoment.
• Conflicts: normaal in teamwork, leer je oplossen.