Ga naar hoofdinhoud

Labo 2 — Samenwerken via GitHub

In dit labo verbind je je lokale repository met GitHub. Je oefent het pushen en pullen van wijzigingen en de pull request workflow.

Vereiste

Je hebt een GitHub-account nodig. Maak er één aan op github.com als je dat nog niet gedaan hebt.

Leerstof

Raadpleeg deze sectie als je iets wil nalezen:

Oefening 1 — Je portfolio naar GitHub pushen​

Gebruik de portfolio-repository uit Labo 1.

  1. Maak een nieuwe lege repository aan op GitHub met de naam portfolio. Voeg geen README, .gitignore of licentie toe — die heb je lokaal al.
  2. Koppel je lokale repository aan de GitHub-repository via git remote add.
  3. Controleer met git remote -v of de koppeling correct is.
  4. Push je lokale commits naar GitHub.
  5. Ga naar github.com en open je repository. Zie je alle bestanden en commits?
  6. Pas de <h1> in index.html aan, commit en push. Verifieer de wijziging op GitHub.

Oefening 2 — Clonen en aanpassen​

  1. Kloon je eigen portfolio-repository naar een nieuwe map op je computer met een andere naam, bijvoorbeeld portfolio-clone.
  2. Open het gekloonde project in VS Code.
  3. Maak een nieuw bestand README.md aan met een korte beschrijving van het project.
  4. Commit het bestand met een duidelijk bericht.
  5. Push naar GitHub.
  6. Controleer op GitHub of het bestand verschijnt.
  7. Ga terug naar je originele portfolio-map en haal de laatste wijzigingen op met git pull. Is README.md nu ook daar aanwezig?

Oefening 3 — Feature branch en pull request​

Werk vanuit de originele portfolio-map.

  1. Haal eerst de laatste versie van main op.
  2. Maak een nieuwe branch feature/skills aan en schakel ernaar.
  3. Maak een bestand skills.html aan met een lijst van technologieën die je aan het leren bent: 
    <!DOCTYPE html>
    <html>
    <head>
      <title>My Skills</title>
    </head>
    <body>
      <h1>Skills</h1>
      <ul>
        <li>HTML & CSS</li>
        <li>Git</li>
        <li>JavaScript</li>
      </ul>
    </body>
    </html>
  4. Commit de wijziging op de branch.
  5. Push de branch naar GitHub.
  6. Ga naar GitHub — je ziet een melding over de nieuwe branch. Maak een Pull Request aan van feature/skills naar main. Schrijf een korte beschrijving.
  7. Merge de Pull Request op GitHub.
  8. Haal lokaal de laatste versie op met git pull en controleer dat skills.html nu in main zit.
  9. Verwijder de branch lokaal.

Oefening 4 — Samenwerking (duo)​

Deze oefening doe je samen met een medestudent. Je simuleert een echte samenwerking waarbij jullie allebei bijdragen aan hetzelfde project.

Persoon A — repository opzetten:

  1. Maak een nieuwe GitHub-repository samenwerking aan.
  2. Maak lokaal een index.html met een welkomstbericht, commit en push.
  3. Voeg persoon B toe als collaborator: Settings → Collaborators → Add people.

Persoon B — bijdragen via een branch:

  1. Kloon de repository van persoon A.
  2. Maak een branch feature/intro aan.
  3. Voeg een bestand intro.html toe met een korte introductietekst.
  4. Commit en push de branch.
  5. Open een Pull Request op GitHub.

Persoon A — review en merge: 6. Bekijk de Pull Request van persoon B. Voeg een opmerking toe. 7. Merge de Pull Request.

Beiden: 8. Voer git pull uit en bekijk samen de commit-geschiedenis. Wiens commits zie je?

Uitdaging — Volledige GitHub workflow​

Geen instructies meer. Pas alles toe wat je geleerd hebt.

Doel: publiceer de webshop uit Labo 1 op GitHub en werk samen aan een nieuwe feature.

  • Push de webshop-repository naar GitHub
  • Voeg een medestudent toe als collaborator
  • Werk elk aan een andere feature op een aparte branch (feature/checkout, feature/search, ...)
  • Open allebei een Pull Request
  • Review elkaars PR en merge beide
  • Zorg dat beiden na afloop de meest recente versie hebben

Reflecteer achteraf:

  • Wat is het verschil tussen git clone en git pull?
  • Wanneer gebruik je een Pull Request in plaats van direct te mergen?
  • Wat gebeurt er als je pusht terwijl een teamlid intussen ook gepusht heeft?