Skip to main content

Samenwerken met GitHub

1. Waarom GitHub? Maak je eerste repository

🎯 Leerdoelen
  • Je begrijpt waarom softwareontwikkelaars GitHub gebruiken.
  • Je kunt een GitHub-account aanmaken.
  • Je kunt een nieuwe repository aanmaken.
  • Je begrijpt wat een repository is.
🌍 Situatie uit de praktijk

image.png

Stel je voor dat jij en een klasgenoot samen een website maken.

  • 👩 Lisa werkt thuis.
  • 👨 Tom werkt op school.

Beiden hebben een laptop.

Ze plaatsen beiden hun bestanden op een gemeenschappelijke drive van school (bijvooebeeld OneDrive).

website.html
website_nieuw.html
website_final.html
website_final_v2.html
website_final_echt.html

Na een paar dagen weet niemand meer welke versie de nieuwste is. Misschien heeft Lisa een fout opgelost, terwijl Tom ondertussen nieuwe functies hebt toegevoegd. Welke versie moet je nu gebruiken?

Softwareontwikkelaars hebben hiervoor een oplossing bedacht: Git en GitHub.

💡 Uitleg

Een repository of repo is de centrale plek waar alle bestanden van een project worden opgeslagen. Zie het als een online kluis waarin alle teamleden samenwerken.

Elke wijziging wordt opgeslagen. Daardoor kun je altijd zien:

  • wie een wijziging heeft gemaakt;
  • wanneer deze is gemaakt;
  • wat er precies is veranderd;
  • en je kunt oude versies terughalen als er iets misgaat.

Vrijwel ieder professioneel softwarebedrijf gebruikt Git en GitHub of een vergelijkbaar systeem.

🛠️ Opdracht – Maak je eerste repository
  1. Ga naar github.com.
  2. Maak een GitHub-account aan als je er nog geen hebt.
  3. Klik op New Repository.
  4. Geef de repository de naam github-challenge.
  5. Kies voor een Public Repository.
  6. Vink Add a README.md aan.
  7. Klik op Create Repository.
🤔 Denkvraag

Waarom is een online repository handiger dan bestanden steeds naar elkaar mailen of via Teams versturen?

📤 Inleveren
  1. Een screenshot van je repository op GitHub.
  2. De URL van je repository.
  3. Het antwoord op de denkvraag in 2 tot 5 zinnen.

---

xxx

2. De kluis naar je eigen computer halen (Clone)

💡 Uitleg

Om te kunnen werken, moet je de online code naar je eigen laptop kopiëren. Dit noemen we Clonen. Je gebruikt hiervoor Git in VS Code.

🛠️ Opdracht – Clone de repo

Gebruik het commando git clone [URL] in de terminal van VS Code om je repo lokaal te zetten in je htdocs map.

📤 Inleveren
  1. Een screenshot van VS Code waarin de bestanden uit je repo zichtbaar zijn.

3. Je werk opslaan (Commit & Push)

💡 Uitleg

Een Commit is een momentopname (savepoint). Een Push stuurt deze savepoints naar de online kluis op GitHub.

🛠️ Opdracht – Voeg code toe

Maak een bestand index.html aan. Voer een commit uit met het bericht "Eerste pagina toegevoegd" en push de wijziging naar GitHub.

📤 Inleveren
  1. Screenshot van GitHub waarop de nieuwe index.html zichtbaar is.

4. Wijzigingen ophalen (Pull)

💡 Uitleg

Als een teamlid (of jijzelf op een andere pc) iets verandert, moet je de lokale versie bijwerken. Dit doe je met Pull.

🛠️ Opdracht – Test de pull

Pas op de website van GitHub direct je README.md aan. Gebruik daarna in VS Code git pull om je lokale computer weer 'up-to-date' te maken.

📤 Inleveren
  1. Screenshot van je terminal waarin staat dat de pull is geslaagd.

5. Teamleden uitnodigen (Collaborators)

🛠️ Opdracht – Deel je kluis

Ga naar de instellingen van je repo op GitHub en nodig een klasgenoot uit als Collaborator. Je klasgenoot moet de uitnodiging via e-mail accepteren.

📤 Inleveren
  1. Screenshot van de 'Collaborators' pagina waarop je klasgenoot te zien is.

6. Tegelijkertijd bouwen

💡 Uitleg

Het mooie van Git is dat teamleden aan verschillende bestanden kunnen werken zonder elkaar te storen.

🛠️ Opdracht – Ieder zijn eigen bestand

Jij maakt pagina1.html en je teamgenoot maakt pagina2.html. Commit en push beiden jullie werk en doe daarna allebei een pull.

📤 Inleveren
  1. Screenshot van je lokale map waarin zowel pagina1.html als pagina2.html staan.

7. Help, een Merge Conflict! (Deel 1)

💡 Uitleg

Een Merge Conflict ontstaat als twee mensen dezelfde regel in hetzelfde bestand aanpassen. Git weet dan niet welke versie 'de juiste' is.

🛠️ Opdracht – Forceer een conflict

Pas beiden regel 1 van index.html aan met een andere tekst. Laat je teamgenoot eerst pushen. Probeer daarna zelf te pushen. Wat gebeurt er?

📤 Inleveren
  1. Screenshot van de foutmelding in je terminal (rejected).

8. De tijdmachine repareren (Deel 2)

💡 Uitleg

In VS Code zie je nu paarse en blauwe markeringen bij de code. Jij moet kiezen: houd je jouw code, die van je maatje, of beide?

🛠️ Opdracht – Los het op

Kies 'Accept Both Changes', sla het bestand op, doe een nieuwe commit en push de oplossing.

📤 Inleveren
  1. Screenshot van de opgeloste code in VS Code.

9. Werken op een zijspoor (Branches)

💡 Uitleg

Met een Branch werk je aan een nieuwe feature zonder de 'hoofdcode' (main) kapot te maken. Pas als het af is, voeg je het samen (Merge).

🛠️ Opdracht – Maak een feature-branch

Maak een branch nieuwe-layout. Verander de achtergrondkleur van je site in CSS op deze branch en push de branch naar GitHub.

📤 Inleveren
  1. Screenshot van GitHub waarop de nieuwe branch zichtbaar is in het dropdown-menu.

10. Reflectie: De Teamplayer

🧠 Reflectie

Beantwoord de volgende vragen in een PDF:

  • Waarom is git pull de belangrijkste handeling voordat je begint met typen?
  • Hoe voorkom je merge conflicten in een echt project?
  • Wat is het grootste voordeel van werken met GitHub voor je portfolio?
📤 Inleveren
  1. Het reflectieverslag in PDF.

---

Back to top