Samenwerken met GitHub Status niet, af maar een eerste opzetje gegenreerd met NotebookLM/Codex 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 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 Ga naar github.com . Maak een GitHub-account aan als je er nog geen hebt. Klik op New Repository . Geef de repository de naam github-challenge . Kies voor een Public Repository . Vink Add a README.md aan. Klik op Create Repository . πŸ€” Denkvraag Waarom is een online repository handiger dan bestanden steeds naar elkaar mailen of via Teams versturen? πŸ“€ Inleveren Een screenshot van je repository op GitHub. De URL van je repository. 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 Open je repository github-challenge op GitHub. Klik op de groene knop Code . Kopieer de HTTPS-link van je repository. Open VS Code . Open de terminal in VS Code. Ga in de terminal naar je htdocs map. Typ het volgende commando: git clone PLAK_HIER_DE_URL_VAN_JE_REPOSITORY Druk op Enter . Open daarna de map github-challenge in VS Code. 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 Een screenshot van VS Code waarin de map github-challenge zichtbaar is. Een screenshot waarin het bestand README.md zichtbaar is. Het antwoord op de denkvraag. 3. Je eerste wijziging opslaan (Commit & Push) 🎯 Leerdoelen Je begrijpt wat een commit is. Je kunt wijzigingen opslaan met Git. Je kunt een commit naar GitHub sturen met git push . Je begrijpt waarom een goede commit message belangrijk is. 🌍 Situatie uit de praktijk Je hebt de repository naar je eigen computer gekopieerd. Nu kun je bestanden aanpassen. Maar Git houdt wijzigingen niet automatisch bij. Jij bepaalt zelf wanneer je een belangrijke stap wilt bewaren. Zo kun je altijd terugkijken welke wijzigingen je hebt gemaakt. Dit werkt een beetje zoals een savepoint in een computerspel. Gaat er later iets mis? Dan kun je altijd terug naar een eerdere versie. πŸ’‘ Uitleg Een commit is een momentopname van je project. Git slaat daarbij op: welke bestanden zijn gewijzigd; wie de wijziging heeft gemaakt; wanneer de wijziging is gemaakt; waarom de wijziging is gemaakt (de commit message). Na een commit staat de wijziging alleen nog op jouw computer. Met git push stuur je de commit naar GitHub zodat anderen jouw werk ook kunnen zien. Jouw computer β”‚ β”‚ git commit β–Ό Nieuwe versie opgeslagen β”‚ β”‚ git push β–Ό GitHub Repository πŸ› οΈ Opdracht – Maak je eerste commit Open de map github-challenge in VS Code. Maak een nieuw bestand met de naam index.html . Plaats onderstaande code in het bestand: Mijn eerste GitHub project

Hallo GitHub!

Sla het bestand op. Open de terminal. Voer achter elkaar de volgende commando's uit: git add . git commit -m "Eerste webpagina toegevoegd" git push Open daarna je repository op GitHub. Controleer of index.html online zichtbaar is. πŸ’¬ Goede commit messages Een commit message moet duidelijk beschrijven wat je hebt veranderd. Minder goed Goed Update Eerste webpagina toegevoegd Dingen gedaan Navigatiemenu toegevoegd Fix Fout in contactformulier opgelost πŸ€” Denkvraag Waarom is een duidelijke commit message belangrijk wanneer je samenwerkt met andere programmeurs? πŸ“€ Inleveren Een screenshot van GitHub waarop index.html zichtbaar is. Een screenshot van de terminal waarin de commit en push succesvol zijn uitgevoerd. Het antwoord op de denkvraag in 2 tot 5 zinnen. 4. Altijd de nieuwste versie ophalen (Pull) 🎯 Leerdoelen Je begrijpt wat git pull doet. Je kunt wijzigingen van GitHub naar je eigen computer ophalen. Je begrijpt waarom je bijna altijd eerst een git pull uitvoert voordat je gaat programmeren. 🌍 Situatie uit de praktijk Stel dat je gisteren aan je project hebt gewerkt. Vandaag open je opnieuw je laptop. Ondertussen heeft een klasgenoot ook aan hetzelfde project gewerkt en zijn wijzigingen naar GitHub gestuurd. Jouw computer weet daar nog niets van. Als je nu meteen gaat programmeren, werk je met een oude versie van het project. Dat kan later voor problemen zorgen. Daarom beginnen softwareontwikkelaars vaak met één simpel commando: git pull πŸ’‘ Uitleg Met git pull haal je de nieuwste wijzigingen van GitHub op naar je eigen computer. Je lokale repository wordt daardoor weer gelijk aan de online repository. GitHub Repository β”‚ β”‚ git pull β–Ό Jouw computer Onthoud deze gouden regel: Begin iedere programmeersessie met git pull . πŸ› οΈ Opdracht – Haal de nieuwste versie op Open je repository op GitHub in de browser. Open het bestand README.md . Klik op het potloodje ( Edit ). Voeg onder de bestaande tekst de volgende regel toe: Dit project is gemaakt tijdens de GitHub Challenge. Sla de wijziging op met Commit changes . Open nu VS Code. Open de terminal. Voer het volgende commando uit: git pull Open README.md in VS Code. Controleer of de nieuwe regel nu ook op jouw computer zichtbaar is. πŸ§ͺ Controle Is de nieuwe tekst zichtbaar in README.md ? Dan is de pull succesvol uitgevoerd. In de terminal zie je meestal een melding waarin staat welke bestanden zijn bijgewerkt. πŸ€” Denkvraag Waarom is het verstandig om altijd eerst git pull uit te voeren voordat je zelf wijzigingen gaat maken? πŸ’‘ Extra uitdaging Vraag een klasgenoot om ook een regel aan README.md toe te voegen. Voer daarna opnieuw git pull uit. Welke wijziging is erbij gekomen? πŸ“€ Inleveren Een screenshot van de terminal waarin git pull succesvol is uitgevoerd. Een screenshot van README.md in VS Code waarin de nieuwe tekst zichtbaar is. Het antwoord op de denkvraag in 2 tot 5 zinnen. 5. Samenwerken aan hetzelfde project (Collaborators) 🎯 Leerdoelen Je kunt een klasgenoot uitnodigen als collaborator. Je begrijpt wat een collaborator is. Je begrijpt waarom softwareontwikkelaars samenwerken via één repository. 🌍 Situatie uit de praktijk Tot nu toe heb je alleen gewerkt. In de praktijk bouw je software bijna nooit alleen. Bij een softwarebedrijf werken vaak meerdere programmeurs tegelijkertijd aan hetzelfde project. De één maakt de website, een ander werkt aan de database en weer iemand anders lost fouten op. Iedereen werkt in dezelfde repository. Daardoor is altijd duidelijk wat de nieuwste versie van het project is. πŸ’‘ Uitleg Een Collaborator is iemand die toestemming heeft gekregen om wijzigingen aan jouw repository te maken. Collaborators kunnen: bestanden aanpassen; nieuwe bestanden toevoegen; commits maken; wijzigingen naar GitHub pushen. Je bepaalt zelf wie toegang krijgt tot jouw repository. Jij β”‚ β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚ β”‚ β–Ό β–Ό GitHub Repository β–² β–² β”‚ β”‚ Klasgenoot Andere collaborator πŸ› οΈ Opdracht – Nodig een collaborator uit Open je repository op GitHub. Ga naar Settings . Klik op Collaborators . Klik op Add people . Zoek de GitHub-gebruikersnaam van je klasgenoot. Verstuur de uitnodiging. Je klasgenoot accepteert de uitnodiging. Controleer of je klasgenoot nu als collaborator zichtbaar is. πŸ§ͺ Controle Vraag je klasgenoot om de repository te openen. Kan hij of zij de repository openen en wijzigingen maken? Dan is de uitnodiging succesvol geaccepteerd. πŸ€” Denkvraag Waarom is het veiliger om alleen vertrouwde personen als collaborator toe te voegen? πŸ’‘ Extra uitdaging Bekijk de lijst met collaborators. Kun je ontdekken wie de eigenaar (Owner) van de repository is? πŸ“€ Inleveren Een screenshot van de pagina Collaborators waarop je klasgenoot zichtbaar is. Een screenshot van je klasgenoot waarop dezelfde repository geopend is. Het antwoord op de denkvraag in 2 tot 5 zinnen. 6. Tegelijkertijd aan hetzelfde project werken 🎯 Leerdoelen Je ervaart hoe meerdere programmeurs tegelijkertijd aan één project kunnen werken. Je leert hoe Git wijzigingen van verschillende personen combineert. Je oefent met de complete Git-werkwijze: pull, wijzigen, commit en push. 🌍 Situatie uit de praktijk Je werkt nu samen met een klasgenoot aan dezelfde repository. Bij een softwarebedrijf werkt bijna nooit één programmeur aan een project. Vaak zijn tientallen ontwikkelaars tegelijkertijd bezig. Gelukkig hoeven zij niet steeds op elkaar te wachten. Als iedereen aan een ander onderdeel werkt, kan Git de wijzigingen automatisch samenvoegen. In deze opdracht gaan jullie dat zelf ervaren. πŸ’‘ Uitleg Wanneer twee programmeurs verschillende bestanden aanpassen, ontstaat er meestal geen probleem. Alex β”‚ β”œβ”€β”€ pagina1.html β”‚ β–Ό GitHub Repository β–² β”‚ β”œβ”€β”€ pagina2.html β”‚ Sam Git ziet dat beide programmeurs aan verschillende bestanden hebben gewerkt en voegt de wijzigingen automatisch samen. πŸ› οΈ Opdracht – Werk tegelijkertijd Werk samen met de klasgenoot die collaborator is van jouw repository. Voer allebei eerst git pull uit. Jij maakt een bestand pagina1.html . Je klasgenoot maakt een bestand pagina2.html . Zet in beide bestanden een eenvoudige HTML-pagina met een titel en een koptekst. Voer daarna uit: git add . git commit -m "Nieuwe pagina toegevoegd" git push Laat daarna ook je klasgenoot zijn of haar wijzigingen committen en pushen. Voer vervolgens opnieuw git pull uit. Controleer of je nu zowel pagina1.html als pagina2.html in je project hebt. πŸ§ͺ Controle Open de projectmap in VS Code. Als het goed is, zie je nu: README.md index.html pagina1.html pagina2.html Open beide HTML-bestanden in je browser. Werken ze allebei? Dan zijn de wijzigingen succesvol samengevoegd. πŸ€” Denkvraag Waarom ontstond er geen conflict terwijl jullie allebei tegelijkertijd aan hetzelfde project werkten? πŸ’‘ Extra uitdaging Maak nu allebei nΓ³g een nieuw HTML-bestand, bijvoorbeeld contact.html en over-ons.html . Kunnen deze opnieuw zonder problemen worden samengevoegd? πŸ“€ Inleveren Een screenshot van VS Code waarop zowel pagina1.html als pagina2.html zichtbaar zijn. Een screenshot van GitHub waarop beide bestanden zichtbaar zijn. Het antwoord op de denkvraag in 2 tot 5 zinnen. 7. Help! Een Merge Conflict ontstaat (Deel 1) 🎯 Leerdoelen Je ervaart hoe een merge conflict ontstaat. Je begrijpt waarom Git soms een push weigert. Je leert dat Git jouw werk beschermt tegen overschrijven. 🌍 Situatie uit de praktijk Stel dat jij en je klasgenoot tegelijkertijd dezelfde pagina aanpassen. Jullie veranderen allebei precies dezelfde regel. Daarna probeer je allebei de wijzigingen naar GitHub te sturen. Wie heeft er dan gelijk? Git weet dat niet. Daarom weigert Git de tweede push. Zo voorkomt Git dat het werk van iemand anders per ongeluk wordt overschreven. πŸ’‘ Uitleg Een Merge Conflict ontstaat wanneer twee programmeurs dezelfde regel in hetzelfde bestand wijzigen. Git kan dan niet bepalen welke versie de juiste is. Alex verandert regel 5 β”‚ β–Ό index.html β–² β”‚ Sam verandert ook regel 5 ❓ Welke versie moet Git bewaren? In plaats van zomaar één versie te kiezen, stopt Git en vraagt het jou om de juiste keuze te maken. πŸ› οΈ Opdracht – Forceer een merge conflict Voer allebei eerst git pull uit. Open index.html . Verander allebei dezelfde regel, bijvoorbeeld de tekst in de

. Sla het bestand op. Jullie voeren allebei uit: git add . git commit -m "Titel aangepast" Laat één persoon eerst git push uitvoeren. De andere persoon probeert daarna ook te pushen. Lees de foutmelding die Git geeft. πŸ§ͺ Controle De tweede programmeur krijgt een melding dat de push is geweigerd. Git doet dit expres om te voorkomen dat de wijzigingen van de eerste programmeur verloren gaan. πŸ€” Denkvraag Waarom weigert Git de tweede push in plaats van deze automatisch te accepteren? πŸ’‘ Wist je dat? Een merge conflict is geen fout in Git. Het is juist een veiligheidsmaatregel die voorkomt dat programmeurs elkaars werk kwijtraken. πŸ“€ Inleveren Een screenshot van de foutmelding in de terminal. Een screenshot waarop zichtbaar is dat de push is geweigerd. Het antwoord op de denkvraag in 2 tot 5 zinnen. 8. Los het merge conflict op (Deel 2) 🎯 Leerdoelen Je kunt een merge conflict herkennen. Je begrijpt welke wijzigingen van jou zijn en welke van je klasgenoot. Je kunt een merge conflict oplossen in VS Code. Je kunt de oplossing committen en naar GitHub pushen. 🌍 Situatie uit de praktijk In de vorige opdracht weigerde Git jouw push. Dat deed Git niet omdat er iets fout was, maar omdat het niet wist welke versie van index.html bewaard moest worden. Nu is het aan jou om die keuze te maken. Softwareontwikkelaars lossen merge conflicts regelmatig op. Het hoort bij samenwerken aan software. πŸ’‘ Uitleg Wanneer Git een merge conflict ontdekt, zet het beide versies tijdelijk in hetzelfde bestand. VS Code laat deze verschillen overzichtelijk zien. Je kunt vervolgens kiezen: Accept Current Change β†’ behoud alleen jouw wijziging. Accept Incoming Change β†’ behoud alleen de wijziging van je klasgenoot. Accept Both Changes β†’ behoud beide wijzigingen. Nadat je een keuze hebt gemaakt, moet je het bestand opnieuw opslaan, committen en pushen. Conflict gevonden β”‚ β–Ό Kies de juiste versie β”‚ β–Ό Opslaan β”‚ β–Ό git add . git commit git push πŸ› οΈ Opdracht – Los het conflict op Open index.html in VS Code. Bekijk de conflictmarkeringen. Kies Accept Both Changes . Controleer of beide teksten nu in het bestand staan. Sla het bestand op. Voer daarna uit: git add . git commit -m "Merge conflict opgelost" git push Open GitHub en controleer of de nieuwe versie online staat. πŸ§ͺ Controle Als het goed is: is de foutmelding verdwenen; staan beide wijzigingen in index.html ; is de laatste commit zichtbaar op GitHub. πŸ€” Denkvraag Wanneer zou je Accept Both Changes kiezen, en wanneer zou je juist één van de andere opties gebruiken? πŸ’‘ Wist je dat? Merge conflicts lijken in het begin lastig, maar ervaren softwareontwikkelaars lossen ze regelmatig op. Door vaak kleine commits te maken en regelmatig git pull uit te voeren, voorkom je de meeste conflicten. πŸ“€ Inleveren Een screenshot van VS Code waarop het merge conflict zichtbaar is. Een screenshot nadat het conflict is opgelost. Een screenshot van GitHub waarop de commit Merge conflict opgelost zichtbaar is. Het antwoord op de denkvraag in 2 tot 5 zinnen. 9. Veilig experimenteren met Branches 🎯 Leerdoelen Je begrijpt wat een branch is. Je kunt een nieuwe branch maken. Je kunt op een branch werken zonder de hoofdversie te wijzigen. Je kunt een branch naar GitHub pushen. 🌍 Situatie uit de praktijk Stel dat je een compleet nieuw ontwerp voor een website wilt maken. Wat gebeurt er als het nieuwe ontwerp toch niet mooi blijkt te zijn? Als je rechtstreeks in de main -branch werkt, kan het zijn dat je de werkende website kapot maakt. Daarom maken softwareontwikkelaars eerst een branch . Dat is een kopie van het project waarop je veilig kunt experimenteren. πŸ’‘ Uitleg Een branch is een aparte werkomgeving binnen dezelfde repository. Je kunt nieuwe ideeΓ«n uitproberen zonder dat de hoofdversie verandert. Pas als alles goed werkt, voeg je de branch samen met de main -branch. main ──────────────●────────────── \ \ nieuwe-layout ●──────────● Vrijwel iedere professionele softwareontwikkelaar werkt dagelijks met branches. πŸ› οΈ Opdracht – Maak je eerste branch Open de terminal in VS Code. Maak een nieuwe branch met de naam nieuwe-layout : git checkout -b nieuwe-layout Controleer met git branch dat je op de nieuwe branch werkt. Open index.html . Verander de achtergrondkleur van de pagina. Voeg eventueel ook een extra koptekst of alinea toe. Voer daarna uit: git add . git commit -m "Nieuwe layout gemaakt" git push -u origin nieuwe-layout Open GitHub. Controleer of de nieuwe branch zichtbaar is in het branch-overzicht. πŸ§ͺ Controle Controleer op GitHub of je twee branches hebt: main nieuwe-layout Je wijzigingen staan alleen in nieuwe-layout . De main -branch is nog niet aangepast. πŸ€” Denkvraag Waarom is het veiliger om grote wijzigingen eerst op een branch te maken dan direct op main ? πŸ’‘ Extra uitdaging Maak nog een branch met de naam experiment . Voeg hierin een opvallende achtergrondkleur of een extra HTML-element toe. Schakel daarna terug naar main met: git checkout main Zie je dat de wijzigingen uit de branch verdwenen zijn? Dat komt omdat ze nog niet zijn samengevoegd. πŸ“€ Inleveren Een screenshot van GitHub waarop de branches main en nieuwe-layout zichtbaar zijn. Een screenshot van de terminal waarin de branch is aangemaakt. Het antwoord op de denkvraag in 2 tot 5 zinnen. 10. Eindopdracht – Samen bouwen met GitHub 🎯 Leerdoelen Je past alle Git-vaardigheden uit deze module toe. Je werkt succesvol samen met een klasgenoot. Je laat zien dat je GitHub kunt gebruiken zoals professionele softwareontwikkelaars dat doen. 🌍 Situatie uit de praktijk Je bent nu softwareontwikkelaar bij een bedrijf. Je krijgt samen met een collega de opdracht om een eenvoudige website te bouwen. Jullie werken allebei aan hetzelfde project en gebruiken GitHub om samen te werken. Gebruik alles wat je in deze module hebt geleerd. πŸ› οΈ Eindopdracht Werk samen met een klasgenoot en breid jullie website uit. De website moet minimaal bevatten: een homepage ( index.html ); minimaal drie extra HTML-pagina's; een navigatiemenu tussen de pagina's; een eenvoudig CSS-bestand voor de opmaak. Gebruik tijdens het bouwen GitHub zoals je in deze module hebt geleerd. βœ… Eisen Iedere student maakt minimaal 3 commits . Iedere student voert minimaal 2 keer een git pull uit. Iedere student maakt minimaal 1 branch . Minimaal één branch wordt naar GitHub gepusht. Er wordt minimaal één merge conflict veroorzaakt Γ©n opgelost. Iedere commit heeft een duidelijke commit message. 🧠 Reflectie Waarom is git pull meestal het eerste commando dat je uitvoert? Waarom zijn branches handig bij grotere projecten? Hoe helpt GitHub om samen te werken zonder elkaars werk kwijt te raken? Welk onderdeel van Git vond jij het lastigst? Leg uit waarom. πŸ“€ Inleveren De URL van jullie GitHub-repository. Een screenshot van de commitgeschiedenis. Een screenshot van de branches. Een screenshot van de uiteindelijke website. De antwoorden op de reflectievragen in een PDF. 🏁 Klaar? Gefeliciteerd! Je hebt de belangrijkste basisvaardigheden van Git en GitHub geleerd: βœ” Repository maken βœ” Clone βœ” Commit βœ” Push βœ” Pull βœ” Samenwerken βœ” Merge Conflicts oplossen βœ” Branches gebruiken Dit zijn dezelfde basisvaardigheden die softwareontwikkelaars dagelijks gebruiken. --