Werkomgeving¶

Om aan de slag te kunnen gaan met de opdracht, en dus bijvoorbeeld het schrijven van code, heb je een werkomgeving nodig. Op deze pagina leggen we uit hoe je deze werkomgeving kunt instellen op je eigen computer.

Verwijder na deze opdracht zeker niet deze omgeving direct van je computer, de kans is groot dat je deze later nog nodig hebt.

Project¶

Opdrachten binnen HBO-ICT worden gemaakt in de vorm van projecten. Een project kan individueel zijn, maar ook groepswerk. Om je hierbij op weg te helpen bieden we vaak aan starter-project aan. In zo’n starter-project vind je vaak een begin van een project zodat je direct aan de slag kunt.

Doorloop nu de volgende stappen om een project aan te maken voor jouw profielpagina-opdracht (met Firefox, Chrome of Edge):

Navigeer naar de Digitale Leeromgeving van de HvA (DLO).
Kijk of je de tegel ‘Propedeuse [leerroute] - Semester X’ hebt, klik op deze tegel.
- Zie je deze tegel niet? Dan moet je je eerst aanmelden voor het vak, dat doe je als volgt:
  - Navigeer naar de Course Selector van de HvA.
  - Zoek voor de opleiding ‘HBO-ICT (bachelor, voltijd)’.
  - Vervolgens onder het tabblad ‘Propedeuse’, onder het kopje ‘Semester X’ druk je op de knop ‘Deelnemen’ achter het vak ‘Propedeuse [leerroute] - semester X’.
  - Keer nu terug naar de DLO, refresh de pagina en kijk of je de tegel nu wel ziet.
Je zit nu binnen het vak, hierin klik je door naar de ‘Content’-pagina, hierin kan je vervolgens navigeren binnen ‘Tools’ naar ‘Git projects’.

Binnen deze tool kan je jouw HBO-ICT projecten vinden, voor nu ga je een nieuw project aanmaken.
Druk op de knop ‘New project’.
De eerste keer krijg je een melding dat je nog geen Gitlab account hebt.

Gitlab¶

Binnen de informatica wordt veel gewerkt met het versiebeheersysteem Git. Dit is een systeem waarin je je werk kunt opslaan en terug kunt halen. Voor deze opdracht gaan we gebruik maken van de GitLab-website van de HvA.

Je bent zojuist gestart met het aanmaken van een nieuw project, daar heb je nu de volgende melding gekregen:

Druk op de link van ‘Gitlab-environment’ in de melding, dit zal je naar de GitLab-website van de HvA brengen.
Klik vervolgens als je nog niet bent ingelogd op de knop ‘Surfconext login’, dit brengt je naar een login-pagina van de HvA.
- Omdat het de eerste keer is moet je de Gitlab omgeving toestemming geven om je in te loggen.
Als je ziet dat je bent ingelogd op onze Gitlab omgeving kan je terugkeren naar de DLO.

Zorg er nu voor dat je kiest voor het project ‘Profielpagina’ en druk op de knop ‘Create new project’. Het aanmaken van het project duurt enkele minuten.

Git¶

Je bent nu bezig geweest met het aanmaken van een project welke na enkele minuten beschikbaar komt op onze GitLab-omgeving. De volgende stap is dat je Git wilt gebruiken om aan je project te kunnen werken. Deze stappen kan je uitvoeren terwijl je nog aan het wachten bent op het project.

Git installeren¶

Git is een programma dat je moet installeren op je computer. Git heeft (standaard) geen grafische interface — je doet alles via de commando-regel.

WindowsMacLinux

Ga naar de Git-website.
Download de installer voor Windows.
Installeer Git op je computer, doorloop de installatie stappen van de software.

Tussen de programma’s op je computer moet je nu Git Bash kunnen vinden. Als je deze kan vinden dan is Git succesvol geïnstalleerd.

In de meeste gevallen is Git al standaard geïnstalleerd op je Mac. Controleer dit door een Terminal-venster te openen en het volgende commando uit te voeren:

git --version

Krijg je een foutmelding? Dan moet je Git nog installeren:

Ga naar de Git-website.
Aangeraden is om de Homebrew-versie te installeren, dit is een pakketbeheerder voor Mac. Volg hiervoor de stappen op de website.

Als je een antwoord krijgt wat lijkt op git version x.x.x dan is Git succesvol geïnstalleerd.

In de meeste gevallen is Git al standaard geïnstalleerd op je Linux-systeem. Controleer dit door een Terminal-venster te openen en het volgende commando uit te voeren:

git --version

Krijg je een foutmelding? Dan moet je Git nog installeren:

Ga naar de Git-website.
Kies de installatiemethode die bij jouw Linux-systeem past.

Als je een antwoord krijgt wat lijkt op git version x.x.x dan is Git succesvol geïnstalleerd.

Controleer

Open een commando-venster (Windows: Git Bash, Mac/Linux: Terminal) en voer uit: git --version. Je zou een versienummer moeten zien.

Git configureren¶

Wanneer je aan de slag gaat met Git ga je ook ‘commits’ maken, dit zijn de versies van je project. Om te laten weten wie deze commits maakt moet je Git configureren met je naam en HvA-emailadres.

Dit doe je in hetzelfde commando-venster door de volgende commando’s uit te voeren:

git config --global user.name "Jouw Naam"

(bijvoorbeeld: git config --global user.name "John Doe")

git config --global user.email "Jouw HvA-emailadres@hva.nl"

(bijvoorbeeld: git config --global user.email "john.doe@hva.nl")

Let op

Gebruik je echte naam en je HvA-emailadres. Dit wordt gekoppeld aan al je commits en is zichtbaar voor je docenten en medestudenten.

SSH-key instellen¶

Nu je Git geïnstalleerd hebt en je naam en emailadres hebt ingesteld, gaan we een veilige manier instellen om te communiceren met onze GitLab-omgeving. Bij HBO-ICT gebruiken we hiervoor altijd de SSH-key methode.

Wat is een SSH-key?

Een SSH-key is een veilige manier om jezelf te identificeren bij GitLab zonder elke keer je wachtwoord in te hoeven typen. Het bestaat uit twee delen:

Private key (privésleutel): Dit deel blijft op jouw computer en mag je nooit met anderen delen. Dit is als de sleutel van je huis.
Public key (publieke sleutel): Dit deel deel je met GitLab. Dit is als het slot van je huis — anderen kunnen het zien, maar zonder de privésleutel kunnen ze er niets mee.

Wanneer je code naar GitLab pusht of er vanaf haalt, gebruikt Git deze sleutels om te verifiëren dat jij het bent.

Controleer in hetzelfde commando-venster eerst of je al een SSH-key hebt:

ls -al ~/.ssh

Als je bestanden ziet zoals id_ed25519 en id_ed25519.pub (of id_rsa en id_rsa.pub), dan heb je al een SSH-key. Je kan deze gebruiken of een nieuwe maken.

Genereer een nieuwe SSH-key met het volgende commando, vervang het emailadres met jouw HvA-emailadres:

ssh-keygen -t ed25519 -C "jouw.hva.email@hva.nl"

Ed25519 vs RSA

We gebruiken ed25519 omdat dit een modernere en veiligere methode is. Als je systeem dit niet ondersteunt, gebruik dan -t rsa -b 4096 in plaats van -t ed25519.

Je wordt gevraagd waar je de key wilt opslaan — druk op Enter voor de standaardlocatie.
Vervolgens wordt je gevraagd om een wachtwoordzin (passphrase). Dit is optioneel voor extra beveiliging. Druk op Enter om dit over te slaan.

Kopieer nu de inhoud van je publieke sleutel:

ed25519 (aanbevolen)RSA

cat ~/.ssh/id_ed25519.pub

cat ~/.ssh/id_rsa.pub

De output ziet er ongeveer zo uit:

ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIGx... jouw.hva.email@hva.nl

Kopieer de volledige tekst (van ssh-ed25519 tot en met je emailadres).

Kopiëren in Git Bash

In Git Bash kan je de tekst selecteren en met de rechtermuisknop kopiëren, of gebruik Ctrl+Ins.

Ga nu naar GitLab om de key toe te voegen:

Log in op de HvA GitLab-omgeving.
Klik rechtsboven op je profielfoto en kies Preferences.
In het linkermenu klik je op SSH Keys.
Klik op de knop Add SSH key.
Plak de gekopieerde publieke sleutel in het veld Key.
Geef de key een beschrijvende naam in het veld Title (bijvoorbeeld “Mijn laptop”).
Zet de Expiration date op oneindig, zodat je niet elk jaar een nieuwe key hoeft toe te voegen.
Klik op Add key.

Test nu de verbinding met het volgende commando:

ssh -T git@gitlab.fdmci.hva.nl

De eerste keer dat je verbinding maakt, wordt je gevraagd of je de “authenticity of host” wilt accepteren. Type yes en druk op Enter. Als alles goed is gegaan, zie je een bericht zoals:

Welcome to GitLab, @jouw_gebruikersnaam!

Gelukt!

Je SSH-key is nu succesvol ingesteld en gekoppeld aan je GitLab-account!

Problemen? "Permission denied (publickey)"

Als je deze foutmelding krijgt, controleer dan:

Of je de publieke sleutel correct hebt gekopieerd (zonder extra spaties of regels).
Of je de juiste GitLab-omgeving gebruikt (gitlab.fdmci.hva.nl).
Of je SSH-agent de key heeft geladen: ssh-add -l

Project clonen¶

Zorgen dat het project op je eigen computer komt te staan zodat je eraan kan werken noemen ze in Git ‘clonen’. Wanneer je project gereed is, kan je deze clonen door de volgende stappen uit te voeren:

Navigeer naar de DLO omgeving en zoek weer naar de ‘Git projects’ tool.
In het overzicht staat het door jou aangemaakt project, ‘Profielpagina’. Als hier nog staat ‘Synchronising…’ dan moet je nog even wachten.
Als het project gereed is zie je de knoppen ‘Clone’ en ‘Open on GitLab’.
- Klik op ‘Open on Gitlab’ om direct naar jouw profielpagina-project op Gitlab te gaan.
We gaan nu deze project clonen, klik op de knop ‘Clone’.
In het venster dat opent krijg je als eerste stap te zien dat je een SSH-key moet instellen, als je dat al hebt gedaan kan je verdergaan.
Je krijgt nu een regelcode te zien, deze kopieer je.
- Open nu het commando-venster (Windows: Git Bash, Mac/Linux: Terminal) op je computer.
- Navigeer door middel van het commando cd naar de map waar je jouw project wilt opslaan.
  - (Wil je direct navigeren naar je thuis-map? Gebruik dan cd ~)
- Als je in de juiste map bent, en alleen dan, plak je de regelcode in het commando-venster.
- Om het commando uit te voeren druk je op Enter.

Wat doet cd?

Het commando cd staat voor change directory en wordt gebruikt om naar een andere map te navigeren in je commando-venster. Bijvoorbeeld: cd Documenten brengt je naar de map ‘Documenten’.

Als echt alles goed is gegaan zou je nu op je computer, op de door jou gekozen plek, een map moeten hebben staan met de naam ‘PP-‘. Vraag om hulp als je dit niet kunt vinden of tussentijds een foutmelding krijgt.

Je bent dan nu klaar om met een code editor aan de slag te gaan.

Visual Studio Code¶

Programmeurs, I(C)T’ers, ontwikkelaars, … hoe je ze noemen wilt, ze hebben allemaal gemeen dat ze graag zelf bepalen hoe hun ontwikkelomgeving eruit ziet. Bij deze stap gaan we echter gebruik maken van Visual Studio Code, een code editor die veel gebruikt wordt binnen de informatica.

Wel kan je zelf kiezen of je gebruik maakt van light-mode of dark-mode 😉.

Als je nog geen Visual Studio Code geïnstalleerd hebt, volg je deze instructies:

WindowsMacLinux

Navigeer naar de Visual Studio Code website.
Download de installer voor Windows.
Installeer Visual Studio Code op je computer, doorloop de installatie stappen van de software.
Na installatie open je Visual Studio Code.

Navigeer naar de Visual Studio Code website.
Download de installer voor Mac.
Open het gedownloade .dmg bestand en sleep Visual Studio Code naar je Applications-map.
Open Visual Studio Code vanuit je Applications-map.

Navigeer naar de Visual Studio Code website.
Download het .deb of .rpm pakket dat bij jouw Linux-distributie past.
Installeer het pakket via je pakketbeheerder of door erop te dubbelklikken.
Open Visual Studio Code.

Project openen¶

Visual Studio code heeft als code editor een behoorlijk aantal functies, om deze nu maar ook in de toekomst goed te kunnen gebruiken is het belangrijk dat je een volledig project die op je computer staat opent.

Een project open je door:

Klik op de knop ‘File’ in de navigatiebalk aan de bovenkant van de editor.
Kies vervolgens voor ‘Open folder’ en navigeer naar de map ‘PP-
’ op je computer.
- Je selecteert dus de hele project-map, niet meer en niet minder.
Na het openen moet je in de ‘explorer’ van Visual Studio Code de bestanden kunnen zien die je project bevat.

Bestand aanmaken¶

Voor dit project staan er standaard nog niet zoveel bestanden in de project-map. Voor jouw profielpagina-opdracht moet je deze zelf aanmaken, dat doe je als volgt:

Verplaats je cursor over de map ‘PP-’ in de ‘explorer’ van Visual Studio Code.
Aan de rechterkant hiervan verschijnt vervolgens een knop met een ‘+’ teken bij een icoontje in de vorm van een bestand, klik op deze knop.
Je kan nu zelf een bestandsnaam invoeren, sluit deze altijd af met een extensie die aangeeft wat voor soort bestand het is.
- Bijvoorbeeld documentatie.md, titel_van_aantekeningen.txt, mijn_website.html of design.css.

Visual Studio Code en Git¶

Visual Studio Code herkent automatisch dat het project dat je hebt geopend een Git-project is. Hierdoor kan je makkelijk je werk opslaan op onze GitLab-omgeving.

Een wijziging die je hebt gemaakt in je project wil je nu ‘opslaan’ in Git(lab), dat doe je als volgt:

Klik op de knop ‘Source control’/’Git’ in de navigatiebalk aan de zijkant van Visual Studio Code.
Zorg ervoor dat je een wijziging hebt gemaakt in je project.
- Je hebt een nieuw bestand aangemaakt.
- Je hebt een regel code geschreven.
- Je hebt een stuk tekst weggehaald.
- …
In het venster dat je nu te zien krijgt zie je alle wijzigingen die je hebt gemaakt.
- Dit is je kans om een goed overzicht te krijgen van de wijzigingen die je hebt gemaakt.
Ga de wijzigingen langs, we willen een ‘commit’ gaan maken.
- Een ‘commit’ is een ‘versie’ van je project.
Wanneer je een wijziging wil opnemen in de commit druk je op de knop ‘Stage Changes’.
Wanneer je een of meerdere wijzigingen hebt klaargezet ga je een bericht schrijven bij de commit wat een samenvatting is van deze wijzigingen en druk je op de knop ‘Commit’.

Schrijf een duidelijk commit-bericht

Beschrijf kort en duidelijk wat je hebt veranderd, bijvoorbeeld: “Profielfoto en introductietekst toegevoegd”. Vermijd vage berichten zoals “update” of “fix” — je docent en medestudenten moeten kunnen begrijpen wat er is gewijzigd.

- Als laatste stap in dit proces ga je de wijzigingen naar GitLab sturen, ‘pushen’. Hiervoor druk je in Visual Studio Code op de knop ‘Sync Changes’.

Deze stappen ga je nu altijd herhalen wanneer je werk hebt gemaakt. Controleer op de GitLab-website of je werk en je commit terug te vinden zijn.

Peer feedback — Checklist werkomgeving¶

Je hebt nu je volledige werkomgeving ingesteld. Voordat je verder gaat is het belangrijk om te controleren of alles correct werkt. Dit doe je samen met een medestudent: jullie controleren elkaars werkomgeving aan de hand van de onderstaande checklist.

Hoe werkt het?

Zoek een medestudent en ga naast elkaar zitten.
Open allebei een commando-venster (Windows: Git Bash, Mac/Linux: Terminal).
Loop de checklist hieronder door op de computer van je medestudent.
Vink elk onderdeel af wanneer het correct is.
Wissel daarna van rol zodat jouw werkomgeving ook gecontroleerd wordt.
Maak een screenshot van de ingevulde checklist als bewijs voor je portfolio.

Portfolio bewijs

Gebruik de ingevulde checklist als bewijs in je portfolio. Maak een screenshot waarop te zien is dat een medestudent jouw werkomgeving heeft gecontroleerd. Noteer de naam van je medestudent en de datum bij het screenshot.