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.

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

🎯 Leerdoelen
  • Je begrijpt wat clonen betekent.
  • Je kunt een GitHub-repository naar je eigen computer kopiëren.
  • Je kunt de repository openen in VS Code.
  • Je begrijpt het verschil tussen de online versie en de lokale versie.
🌍 Situatie uit de praktijk

Je repository staat nu online op GitHub. Dat is handig om je project veilig te bewaren en te delen.

Maar je gaat natuurlijk niet de hele tijd op de website van GitHub code typen. Als softwaredeveloper werk je meestal op je eigen laptop in een editor zoals VS Code.

Daarom moet je de repository eerst naar je eigen computer halen. Dat noemen we clonen.

💡 Uitleg

Clonen betekent dat je een kopie van de online repository op je eigen computer zet.

Na het clonen heb je twee versies van hetzelfde project:

  • de online versie op GitHub;
  • de lokale versie op je eigen computer.

Je werkt meestal in de lokale versie. Later stuur je je wijzigingen weer terug naar GitHub. Dat leer je in de volgende opdracht.

GitHub repository
        ↓ clone
Jouw computer / VS Code
🛠️ Opdracht – Clone je repository
  1. Open je repository github-challenge op GitHub.
  2. Klik op de groene knop Code.
  3. Kopieer de HTTPS-link van je repository.
  4. Open VS Code.
  5. Open de terminal in VS Code.
  6. Ga in de terminal naar je htdocs map.
  7. Typ het volgende commando:
git clone PLAK_HIER_DE_URL_VAN_JE_REPOSITORY
  1. Druk op Enter.
  2. Open daarna de map github-challenge in VS Code.
  3. Controleer of je het bestand README.md ziet.
🧪 Controle

Als het goed is, staat je repository nu op je eigen computer.

Je kunt dit controleren door te kijken of je deze map hebt:

htdocs/github-challenge

In deze map moet minimaal het bestand README.md staan.

🤔 Denkvraag

Wanneer zou je een clone willen maken van een Github Repository, noem tenminste twee situtaties.

📤 Inleveren
  1. Een screenshot van VS Code waarin de map github-challenge zichtbaar is.
  2. Een screenshot waarin het bestand README.md zichtbaar is.
  3. Het antwoord op de denkvraag.

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