GitHub met Codespaces en VS Code

GitHub is een website waar je code kunt opslaan en delen. Codespaces is een codeeromgeving binnen GitHub waar je code kunt wijzigen en uitvoeren. Codespaces maakt gebruik van de webversie van de editor Visual Studio Code.

1. Wat zijn GitHub, Codespaces en VS Code?

Screenshot van Github	Screenshot van Codespace

GitHub is een website waar je code kunt opslaan en delen.

GitHub bewaart alle oude versies van je code.
Code op GitHub kun je gemakkelijk delen met anderen.
Met GitHub kun je in groepen aan dezelfde code werken.
Bestanden in GitHub worden bewaard in repositories. Een repository (ook wel afgekort tot repo) is een soort hoofdmap. Voor elk project maak je een aparte repository.
GitHub werkt op basis van Git. Git is open source software. Er zijn veel programmeeromgevingen die via Git kunnen samenwerken met GitHub.

Codespaces is een codeeromgeving binnen GitHub waar je code kunt uitvoeren.

Codespaces biedt een devcontainer (computer in de cloud) waar je op kunt werken via een browser.
In je browser zie je VS Code. VS Code “praat” met Codespaces.
Wijzigingen in bestanden in je Codespace kun je bewaren in GitHub.
Je kunt code uitvoeren in je Codespace, bijvoorbeeld door commando’s te typen in de terminal.

VS Code is de editor die in Codespaces wordt gebruikt.

VS Code gebruik je voor het wijzigen en runnen van code in Codespaces.
VS Code is geschikt voor alle populaire programmeertalen
VS Code is meer dan een editor, zo verzorgt VS Code ook de verbinding met je Codespace en GitHub
Je kunt de instellingen van VS Code naar je eigen smaak aanpassen. Wij gebruiken instellingen om het bewaren van wijzigingen in github gemakkelijker te maken.
De functies van VS Code kun je uitbreiden met extensions. Wij gebruiken extentions om previews van .pdf en .html bestanden te bekijken.
VS Code (spreek uit als “vie es koot”) is een veelgebruikte afkorting voor Visual Studio Code.

2. Starten met een opdracht

2.1 Maak een account in GitHub

Ga naar https://www.github.com/ (gebruik bij voorkeur Chrome).
Klik op sign-up.
Gebruik je email adres van school.
Kies een wachtwoord dat je terug kunt vinden.
Kies als username je voornaam met de eerste letter van je achternaam, als die al bezet is voeg je een nummer toe. Bijvoorbeeld jamesb007
Bevestig je account door te klikken op de link in de mail die je ontvangt van GitHub.

2.2 Maak een Codespace met startcode voor je opdracht

De docent deelt een link naar GitHub Classroom waarmee jij je kunt inschrijven voor een opdracht. Na inschrijven krijg je automatisch een repository met startcode voor de opdracht.
Als je in een groepje werkt dan maakt het eerste groepslid die zich inschrijft een team aan. De naam van dat team bestaat uit alle voornamen van de groepsleden gescheiden door een streepje. Bijvoorbeeld anne-jasmin-noah. De andere groepsleden joinen bij inschrijven het team dat is aangemaakt.
Je maakt je eigen Codespace door op de knop “Create Codespace te klikken”. Alle bestanden uit de GitHub repository worden gekopieerd naar jouw Codespace. Dit kan enkele minuten duren.

3. Werken aan een opdracht

3.1 Codespace starten

Als je een Codespace start, dan zie je het scherm van VS Code in je browser.

vscode screenshot Op bovenstaande plaatje zie je het scherm van VS Code met de volgende onderdelen:

(A) Activity Bar, klik op het bovenste icoon (Explorer) om je mappen en bestanden te zien, klik op het derde icoon (Source Control) van boven om te werken met GitHub
(C) Editor Groups, hier verschijnen de bestanden die je opent.
(D) Panel, hierin zit onder andere de Terminal. De terminal geeft toegang tot de virtuele computer, je kunt er commando’s intypen.

3.2 Code aanpassen

Dubbelklik op een bestand, bijvoorbeeld index.html of main.py. Het bestand wordt geopend in de editor.
Je kunt nu het bestand aanpassen.

3.3 Resultaat bekijken

Het hangt van de programmeertaal af hoe je kunt bekijken wat je code voor resultaat geeft. In het README.md bestand van de startcode staat beschreven hoe dit moet. Voor een aantal veelgebruikte programmeertalen vind je hier een korte samenvattig

html (eventueel met css en/of javascript):

Start een webserver in de Codespace, bij de meeste startcode gebeurt dit automatisch als je de Codespace start. De webserver zorgt ervoor dat de html-bestanden uit de Codespace door een browser op je computer kunne worden geladen.
Open een browser-venster met het index.html bestand uit je Codespace. Klik hiervoor op Ports, klik daarna op de link met het adres van de webserver.

python:

Type in de terminal python main.py, het programma start
Als het programma lang duurt, stop het dan met de toetsen [CRTL]+[C]
Start het programma opnieuw met de toets [PIJL OMHOOG]

python met pygame:

Type in de terminal python main.py, het programma start
Open een browser-venster dat via novnc is verbonden met het grafische scherm dat pygame gebruikt. Klik hiervoor op Ports, klik daarna op de link met het adres van de novnc-server.

3.4 Wijzigingen bewaren in GitHub

Klik in de activity bar op het Source Control icoon.
Voer een beschrijving van de wijziging in
Druk op de groen knop “Commit & Sync”. Je wijzigingen worden nu bewaard in GitHub. Je kunt controleren op github.com of het is gelukt.

4. Samenwerken

4.1 Een team van één persoon

Bewaar nieuwe versies van je code steeds in Github. Dan heb heb je een backup als er iets misgaat in Codespaces.

De laatste versie van je code uit je Codespace bewaren op GitHub doe je zo:

In de iconenbalk links op je scherm is een icoon voor “source control”. Dit is het derde icoon van boven, als je er even met je muis op staat dan verschijnt de tekst “source control”. Klik op het icoon. Je ziet onder “changes” een lijst met bestanden waarin je wijzigingen hebt gemaakt. Daarboven zie je een knop “Commit & Sync”. Boven de knop zie je een invoerveld met de tekst “Message”.
Type een korte beschrijving van je wijziging in het “Message” invulveld. Dit heet een commit message. Klik daarna op “Commit & Sync”.
Je code wordt nu bewaard in GitHub. Als alles gelukt is dan zie je de beschrijving van je wijziging terug in GitHub. Controleer dat in GitHub.

Het werkt het best als je aanpassingen doet in kleine stapjes.

Type steeds een paar regels code en test dan of het doet wat je verwacht had.
Maak per lesuur één of enkele commits en bewaar dit in GitHub. Een commit is een versie met een aantal kleine wijzigingen die samen iets nieuws toevoegen. Het is niet handig om elke minuut een commit te maken, maar minimaal één commit per les zou wel moeten.

4.2 Een team van twee of drie

Elk teamlid heeft zijn eigen kopie van de code in zijn eigen Codespace. In GitHub staat de gezamenlijke code.

Als je in teams werkt, dan is het opslaan van je code ingewikkelder. Je moet immers zorgen dat jouw wijzigingen en die van je maatje worden samengevoegd. GitHub helpt daarbij.

De laatste versie van je code uit je Codespace bewaren op GitHub doe je zo:

Wijzig en test : Type steeds een paar regels code en test dan of het doet wat je verwacht had.
Stage : Zet de gewijzigde bestanden klaar voor de commit. Een commit is en nieuwe versie.
Commit : Type een korte beschrijving waaronder je de nieuwe versie terug kan vinden.
Pull : Haal de wijzigingen van teamgenoten uit Github binnen in jouw Codespace.
Push : Duw je commit in Codespace naar je repository op GitHub.

Stap 2, 3, 4, en 5 worden direct achter elkaar gedaan als je klikt op de knop “Commit & Sync”. Als je in teams werkt, dan kan het zijn dat je maatje iets in GitHub bewaart, terwijl jij in jouw Codespace aan het werk bent. De wijzigingen van jouw maatje komen niet automatisch in jouw Codespace, zodat jij ongestoord verder kunt coderen. Als jij na je maatje wijzigingen in GitHub bewaart, dan probeert GitHub de wijzigingen van jou en je maatje automatisch samen te voegen. Als jullie dezelfde regels in hetzelfde bestand gewijzigd hebben, dan lukt het samenvoegen niet automatisch. CodeSpace geeft dan aan dat er een merge-conflict is. Jij moet dan zelf aangeven welke wijzigingen GitHub moet kiezen. Daarna klik je op “Continue” om te zorgen dat alle stappen uit “Commit & Sync” worden afgemaakt.

Deze video legt uit hoe je merge-conflicten in Codespaces oplost . Als je goede afspraken maakt over wie wat doet, dan heb je weinig merge-conflicten.

Als je langer dan een dag niet aan je code gewerkt hebt, dan is het handig om de laatste wijzigingen van jullie gezamenlijke code in GitHub binnen te halen. Dat heet “Pull”. Onze Codespace is zo ingesteld, dat je op het pijltje naast “Commit & Sync” kunt drukken om te pullen. Pullen kan alleen als je na je laatste commit geen wijzigingen meer hebt gedaan.

4.3 Een team van vier of meer

In grotere teams worden er heel veel veranderingen tegelijk doorgevoerd. De gezamenlijke code wijzigt daardoor heel vaak. Dat is onhandig.

Het werkt in grote teams handiger als je het werk verdeelt in branches. Vraag hierover uitleg aan je docent, als jullie daaraan toe zijn.

5. Howto’s en veelgestelde vragen

5.1 Bestanden en mappen

Ik wil een nieuw bestand maken, de naam van een bestand veranderen, een bestand uploaden, bestanden downloaden of andere dingen met bestanden of mappen doen. Hoe doe ik dat?

Bestanden bekijken

Nieuw bestand of map maken

Naam van bestand of map wijzigen

Bestanden verplaatsen

Bestand uploaden naar Codespaces

Bestand downloaden uit Codespaces

Alle bestanden downloaden