Wat is GitHub
Github is een versioning tool, bedoeld om samen te kunnen werken aan één code met een team; je kan altijd terugkeren naar vorige versies. Alvast enkele begrippen:
- repository: bewaarplaats voor alle gedeelde bestanden
- clone: een lokale kopie van een online repository
- commit: wijzigingen doorvoeren aan een repository
- push: uploaden van een lokale commit naar een online repository
- pull: binnenhalen van wijzigingen in de online repository naar de lokale clone
Github account
Aanmaken
Je bestanden hou je online bij op het online sharingplatform github.com. Registreer eerst voor een gratis account op https://github.com/signup. Let er op dat je met je @student.odisee.be e-mail adres registreert, dit is belangrijk! Als je dit eerder al voor een ander vak deed, dan kun je deze en volgende stap overslaan uiteraard.
Omzetten naar Pro account
Als Odisee-student, kun je je Github account gratis laten omzetten naar een Pro-account. Ga daarvoor naar https://education.github.com/discount_requests/application, en dien een aanvraag in. Let op: de goedkeuring kan tot een dag duren, dus hou daar rekening mee.
In afwachting van de goedkeuring, kan je alvast verder zonder pro-account.
Github Desktop
Om het werken met Github te vergemakkelijken, gebruiken we de Github Desktop app.
Installatie
Download en installeer Github Desktop
Verbinden met Github account
Open Github Desktop, en log in met je Github account. Je kan dit ook achteraf op elk moment nog doen via File, Options:
Log in via de browser:
Repository opzetten
Kijk goed naar de exacte naam die gevraagd wordt voor het vak! Voor academiejaar 2024–2025 is dit (let op de hoofdletters):
- Basic Web Development: BWD-VoornaamAchternaam-2425
- Dynamic Web Development: DWD-VoornaamAchternaam-2425
- Introductie in Programmeren: IIP-VoornaamAchternaam-2425
- OOA Application Development: OOAD-VoornaamAchternaam-2425
Als de naam niet exact correct is, zal de docent je repository niet aanvaarden!
Aanmaken
Log in op github.com, en maak een nieuwe repository aan met de juiste naam:
Docent toevoegen
Vervolgens ga je naar settings, collaborators en klik je op Add people. Daar typ je de gebruikersnaam van je docent in (rogiervdl, ophalvens, polinakozlova, odiseephilippedewinne, fsalliau...) en klik je op add to this repository. Je docent zal je uitnodiging per mail krijgen en accepteren.
Lokaal clonen
Open Github Desktop. Open het programma, en maak hiermee een lokale kopie (clone) van je repo:
- kies Add, clone repository...
- tik de naam van je repo in, en selecteer het uit de lijst
- klik op Choose... en kies een zinvolle locatie
- klik op Clone
Vaktemplate toevoegen
Nu gaan we de standaard mappenstructuur en nog een paar bestanden overzetten naar je repository. Je zult een zip vinden op Toledo; waar het staat, hangt af van vak tot vak; je zult het b.v. vinden in module "opzetten leeromgeving":
Die unzip je in de map waar je je repo eerder gecloned hebt. Het zou er voor de verschillende vakken ongeveer zo moeten uitzien (er kunnen kleine wijzigingen zijn van jaar tot jaar):
Maak enkel de repo voor een vak aan als dat gevraagd wordt; begin niet gelijk alle vier aan te maken!
Let er op dat alle bestanden rechtstreeks in je repository staan, dus niet met een tussenmap github template (klassieke fout van studenten):
Readme.md invullen
Het bestand readme.md in de root bevat informatie over je repo. Een ideaal moment om te leren werken met Github, is het invullen van dit bestand, en de wijzigingen pushen naar github.com.
- open Visual Studio Code, en open de map van je repo
- open het bestand readme.md, vul de informatie aan, en sla het op
Commit en publish
Nu zullen we alle wijzigingen – de toegevoegde template met ingevulde readme – synchroniseren met de online repository op Github.com in twee stappen:
- ga terug naar Github Desktop; je zult zien dat er wijzigingen gebeurt zijn aan je repo
- eerst zullen we de wijzigingen committen, d.w.z. opslaan in onze lokale repository: geef de commit een naam (b.v. "eerste push") en klik op commit to main; als alles goed is, is de lijst met wijzigingen nu leeg dan zullen we de commit kopiëren naar de remote repository op Github.com: klik op Publish branch
Online versie bekijken
Als je online repo op github.com er ongeveer zo uitziet, is alles goed gelukt:
Let op: hoewel het theoretisch kan, mag je nooit een wijziging direct doorvoeren op github.com (upload, code aanpassen, bestand verwijderen...)! Je riskeert dat wijzigingen lokaal en online niet meer in sync zijn (de gevreesde merge conflicts), die zeer lastig op te lossen zijn.
Oefeningen pushen
In principe kan je zo vaak pushen als je wil, maar dat maakt het moeilijk achteraf een bepaalde commit terug te vinden.
Een goede stelregel is dus ongeveer: push na elke oefening.
Wijzigingen in VS Code bekijken
VS Code herkent een git repository en geeft in kleur aan welke veranderingen er zijn sinds de laatste commit:
Lokale commit
Als je Github Desktop opent, zie je met gelijkaardige kleurcodes alle wijzigingen. Geef een duidelijke commit mededeling, en druk op de commit knop:
Goede commit messages
Goede commit messages schrijven is niet makkelijk. Het is nochtans belangrijk, want ze komen op veel plaatsen voor, o.a. in het overzicht van de bestanden en de commit historiek. Een voorbeeld van hoe het niet moet:
Een beter voorbeeld:
Je kan trouwens ook iconen gebruiken in je commit messages als je dat handig vindt:
Online pushen
Nu zijn we klaar de gecommitte wijzigingen ook online te pushen:
Bekijken op github.com
Controleer op github.com of alles goed is aangekomen:
