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 1’ 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 1’ druk je op de knop ‘Deelnemen’ achter het vak ‘Propedeuse [leerroute] - semester 1’.
    • 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 duur 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.

SSH-key instellen

Om veilig te kunnen werken en communiceren met onze Gitlab-omgeving heb je een SSH-key nodig. Doorloop de volgende stappen om deze te instellen:

• Installeer Git op je computer, volg de instructies op Git - installeren onder het kopje ‘Git installeren’ voor jouw besturingssysteem.
• Open vervolgens een commando-venster en controleer of je Git geïnstalleerd hebt met de volgende opdracht: git --version.
  • Op Windows gebruik je het programma ‘Git Bash’.
  • Op Mac/Linux gebruik je het programma ‘Terminal’.
• Nu kan je een sleutel genereren op je eigen computer voor Gitlab, volg hiervoor de stappen onder ‘Git koppelen aan GitLab’ op Git - installeren.
  • Vergeet niet om de publieke sleutel te kopiëren en toe te voegen aan je GitLab-account.

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’-knop van je toetsenbord.

Als echt alles is goed 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:

• Navigeer naar de Visual Studio Code website.
• Download de installer voor jouw besturingssysteem.
• Installeer Visual Studio Code op je computer, doorloop de installatie stappen van de software.
• Na installatie open je 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’.
• 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.