Khan Academy

Khan Academy is internationale online lesmethode met cursussen voor diverse onderwerpen. Wij gebruiken enkele cursussen uit de sectie Computer Programming.

De eerste keer inloggen op Khan Academy

1. Start je browser (Chrome werkt het best) en ga naar https://www.khanacademy.org/

Als je inlogt op khanacademy, dan onthoudt de website wat je al bekeken en gemaakt hebt. Inloggen kan als volgt:

2. Klik op “login”
3. kies de knop “continue with google”
4. type je school-email van google en bijbehorende wachtwoord in

De eerste keer dat je inlogt krijg je een aantal vragen

4. “What grade are you in?” -> kies “Grade 12 / Year 12”
5. “What courses can we help you learn?” -> scroll omlaag en kies “Computer Programming”

Je kunt nu naar je cursus gaan:

6. Klik linksboven op courses.
7. Kies computer programming.
8. Kies de juiste cursus.
9. Bekijk de video’s en maak de opdrachten.

De volgende keer inloggen op Khan Academy

1. Start je browser (Chrome werkt het best) en ga naar https://www.khanacademy.org/
2. Klik op “login”
3. kies de knop “continue with google”
4. type je school-email van google en bijbehorende wachtwoord in
5. Klik linksboven op courses.
6. Kies computer programming.
7. Kies de juiste cursus.
8. Bekijk de video’s en maak de opdrachten.

Je kunt ook de links gebruiken op diverse plaatsen op de informatica-website. Die brengen je gelijk naar de goede plek.

Veelgestelde vragen

Ik kan de cursus niet vinden

Kijk of je op de Engelstalige site zit. Als je zoekt via google, dan kom je vaak op de Nederlandstalige site, daar staat niet de cursus die wij gebruiken. De Engelstalige site vind je op https://khanacademy.org/

De juiste cursus vind je door linksboven op de knop “courses” te klikken. Vervolgen kies je “Computer Programming”. Nu kom je op een pagina waar alle cursussen staan die we gebruiken.

Ik krijg steeds de Nederlandse in plaats van de Engelse site

De Engelstalige site vind je op https://khanacademy.org/ . Als je daar steeds teruggezet wordt op de Nederlandse site, dan moet je in je profiel aangeven dat je voorkeur hebt voor de Engelse taal. Dit doe je als volgt: klik rechtsboven op je inlognaam, klik in het menu dat verschijnt op setting, verander Primary Language in “English”

Informatica Actief

Informatica Actief is de lesmethode voor informatica die wij gebruiken. Wij gebruiken enkele modules uit de methode.

De eerste keer inloggen op Informatica Actief

1. Start je browser (Chrome werkt het best) en ga naar https://www.informatica-actief.nl/

De volgende stappen zijn een grove beschrijving, die we later nog uitwerken:

2. Klik op “login”.
3. Klik op aanmelden via Entree. Je kunt je magister inloggegevens gebruiken om in te loggen.
4. Als er gevraagd wordt om een mailadres, gebruik dan je schoolmail. Je krijgt een bevestingsmail met een link waar je op moet klikken. Log opnieuw in op de pagina waar de link je naartoe brengt.
5. Klik linksboven op het IA icoontje, je komt dan terug op de home page van de site. Schuif een popup uit door rechts op het pijltje te klikken en voer de voucher code in, inclusief de streepjes. Deze code krijg je van je docent. Je moet die voucher code elk jaar vernieuwen, anders wordt de site afgesloten.
6. Kies de module die we gebruiken. Letop: we doen niet alle onderdelen van een module, kijk in de lesstof welke onderdelen bij de stof horen.

De volgende keer inloggen op Informatica Actief

1. Start je browser (Chrome werkt het best) en ga naar https://www.informatica-actief.nl/
2. Klik op “login”.
3. Klik op aanmelden via Entree. Je kunt je magister inloggegevens gebruiken om in te loggen.
4. Kies de module die we gebruiken.

Je kunt ook de links gebruiken op diverse plaatsen op de informatica-website. Die brengen je gelijk naar de goede plek.

Q&A

Mijn voucher code werkt niet

Let op het verschil tussen 0 (cijfer nul) en O (hoofdletter oo) en let op het verschil tussen l (kleine letter l) en 1 (cijfer één).

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

1. Ga naar https://www.github.com/ (gebruik bij voorkeur Chrome).
2. Klik op sign-up.
3. Gebruik je email adres van school.
4. Kies een wachtwoord dat je terug kunt vinden.
5. Kies als username je voornaam met de eerste letter van je achternaam, als die al bezet is voeg je een nummer toe. Bijvoorbeeld jamesb007
6. 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

1. 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.
2. 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.
3. 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.

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

1. Dubbelklik op een bestand, bijvoorbeeld index.html of main.py. Het bestand wordt geopend in de editor.
2. 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):

1. 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.
2. 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:

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

python met pygame:

1. Type in de terminal python main.py, het programma start
   
2. 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

1. Klik in de activity bar op het Source Control icoon.
2. Voer een beschrijving van de wijziging in
3. 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:

1. 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”.
2. Type een korte beschrijving van je wijziging in het “Message” invulveld. Dit heet een commit message. Klik daarna op “Commit & Sync”.
3. 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:

1. Wijzig en test : Type steeds een paar regels code en test dan of het doet wat je verwacht had.
2. Stage : Zet de gewijzigde bestanden klaar voor de commit. Een commit is en nieuwe versie.
3. Commit : Type een korte beschrijving waaronder je de nieuwe versie terug kan vinden.
4. Pull : Haal de wijzigingen van teamgenoten uit Github binnen in jouw Codespace.
5. 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?

5.2 github.com gebruiken

5.3 Overige vragen en problemen

5.4 Documentatie

Waar vind ik meer documentatie?

Documentatie over VS Code

• https://code.visualstudio.com/docs/getstarted/userinterface

Arduino IDE

Arduino IDE is een programma waarin je code kunt schrijven en downloaden in je Arduino.

Wat is de Arduino IDE?

De Arduino IDE is een programma waarmee je je Arduino kunt programmeren. De Arduino IDE is beschikbaar voor computers met Windows, Linux en MacOS. Het programma is niet beschikbaar voor iPads en Chromebooks. Functies van de Arduino IDE:

• code-editor
• compileren
• gecompileerde code uploaden naar een Arduino microcontroller (via een USB-kabel)

Installeren van het programma

Op de schoolcomputers is de Arduino-IDE al geïnstalleerd. Als je Arduino thuis wilt gebruiken, dan moet je het zelf installeren. Dat gaat als volgt.

1. De Arduino IDE is gratis. Je hoeft geen account aan te maken.
2. Download de Arduino IDE van https://www.arduino.cc/en/software
3. Installeer het programma zoals je gewend bent om andere programma’s te installeren op je computer.

Je eerste Arduino schets

1. Start de Arduino IDE
2. Sluit de Arduino met een USB-kabel aan op de laptop
3. Stel de juiste Arduino in. Klik in het menu op “Hulpmiddelen”->“Board”->de_Arduino_die_je_hebt. De rode Arduino’s op school zijn “Aduino Nano”.
4. Stel de USB-poort in waarop je de Arduino hebt aangesloten. Klik in het menu op “Hulpmiddelen”->“Poort”->kies_de_juiste_poort. Meestal is de juiste poort iets met “arduino” of “mega” en iets zonder “bluetooth”.
5. Maak een schets. Een programma voor je Arduino microcontroller wordt vaak een schets (Engels: sketch) genoemd. Je kunt beginnen met een voorbeeld-schets. Klik in het menu op “Bestand”->“Voorbeelden”->“Basics”->“Blink”
6. Compileer de schets (vertaal je code naar machinetaal die de Arduino gebruikt). Klik in het menu op “Schets”->“Verifeer/Compileer”.
7. Upload (verstuur naar je Arduino via de USB-kabel). Klik in het menu op “Schets”->“Upload”.
8. Je ziet nu een klein ledje op je Arduino die knippert.
9. Verander de code, bijvoorbeeld delay(1000) aanpassen in delay(200). Herhaal stap 7. Je zult zien dat de Arduino stap 6 (compileren) vanzelf opnieuw doet, omdat je de code hebt aangepast. Het ledje knippert nu sneller. Nu je stap 9 gedaan hebt, weet je zeker dat het jouw programma is dat in de Arduino zit. De Arduino onthoudt namelijk het laatste programma, ook als de stroom eraf is geweest, dus het kan zijn dat het knipperend-led programma er al door een vorige leerling in is gezet.

Extra libraries installeren

De ingewikkeldere sensoren en actuatoren die je kunt aansluiten op je Arduino, zoals displays, hebben libraries nodig om ze te kunnen programmeren. Er zijn twee manieren om libraries te installeren

1. libraries die meegeleverd zijn met Arduino IDE
   Het installeren van libraries die meegeleverd zijn met de Arduino IDE kan via het menu “Schets” -> “Bibliotheek gebruiken” -> “Bibliotheken beheren”.
   Het vinden van de juiste bibliotheek kan wel eens lastig zijn, vraag het de docent als je twijfelt.
   
   
   
2. libraries uit een zip-bestand
   Het installeren van libraries waarvan je een .zip bestand hebt kan via het menu “Schets” -> “Bibliotheken gebruiken” -> “Voeg .ZIP bibliotheek toe”.
   De .zip bestanden vind je vaak terug bij startcode die je van je docent krijgt of op de site van leveranciers van Arduino-hardware.

Goede biblitheken bevatten voorbeeld-code die na installatie van de bibliotheek in de Arduino IDE terug te vinden is in het menu onder “Bestand” -> “Voorbeelden”

Meer informatie

1. Meer informatie over de Arduino-taal vind je op
   https://www.arduino.cc/ klik op “documentation” -> “reference”
2. Meer informatie over de pinnen van je Arduino vind je op
   https://www.arduino.cc/ klik op “hardware” -> kies jouw Arduino -> kies het tabblad “FAQ”

Veelgestelde vragen

Hij doet het niet

1. Kijk of de USB-kabel goed in de Arduino zit (je voelt een kleine klik)
2. Kijk of je de juiste Arduino hebt aangeven in de IDE (Arduino Nano)
3. Kijk of je de juiste USB-poort het aangegeven in de IDE
4. Kijk of er foutmeldingen zijn bij uploaden en lees die aandachtig

Bij het uploaden krijg ik de melding “avrdude: ser_open(): can’t open device”…

Je hebt waarschijnlijk vergeten de juiste USB-poort te kiezen. Kies de juiste USB-poort in het menu onder “Hulpmiddelen”->“Poort”

Ik krijg één of meerdere foutmelding(en) tijdens het compileren

Je hebt fout gemaakt in de code. Bekijk de bovenste foutmelding. Kijk of je de melding begrijpt. Er staat bij op welke regel de fout gevonden is. Probeer de fout in je code op te lossen. Compileer de code daarna opnieuw.

Ik krijg een foutmelding met “undefined” tijdens het compileren

Je hebt waarschijnlijk een variabele gebruikt zonder deze te declareren of een typefout gemaakt in de naam van de variabele.

Compileren en uploaden gaat goed, maar mijn programma doet niet wat ik wil

Laat je programma berichten op de Seriële monitor zetten, zodat kunt meekijken wat er gebeurt en de fout kunt vinden. De seriële monitor van Arduino is een soort console, die je misschien kent van eerdere opdrachten.

1. Zet in de setup() functie de opdracht Serial.begin(115200);
2. Zet aan het begin van loop() functie de opdracht Serial.println("Start");
3. Voeg op meer nuttige plaatsen berichten toe, zodat je weet welke code wel en niet wordt uitgevoerd.
4. Je kunt ook de inhoud van variabelen of de uitkomst van functies afdrukken, bijvoorbeeld met Serial.println("Milliseconde na opstarten" + millis());
5. Open voordat je programma upload de seriele monitor door in de Arduino-IDE te klikken op het menu “Hulpmiddelen” -> “Seriële monitor”, let op dat de snelheid staat ingesteld op 115200.

Ik heb een kleine rode arduino en op de video van arduino-lessen.nl zie ik een grote blauwe arduino

Op school gebruiken wij een Arduino Nano van het merk Suideeeno . Deze heeft dezelfde mogelijkheden als de grote blauwe of groene Arduino Uno . Bij de Nano sluit je draadjes aan via het breadboard, terwijl je de draadjes bij de Uno direct in de Arduino prikt. De pinnen op beide Arduino’s werken hetzelfde, je kunt aan de namen die erbij staan zien welke je moet hebben.

Mijn display heeft andere stekkers dan het display op de video van arduino-lessen.nl

Op school gebruiken we een display van het merk Seeeduino . Dit display kun je met een grove kabeltje aansluiten op de rode Arduino Nano. Het grove kabeltje is het kabeltje met vier draadjes in de kleuren geel-wit-rood-zwart draadjes en twee witte plastic stekkers aan de uiteinden.

Hoe sla ik een sketch op?

1. Kies in het menu “Bestand” -> “Opslaan als”, kies een map en geef je schets een naam. Een schets wordt altijd opgeslagen in een map met dezelfde naam als de schets.

Filius

Filius is een programma waarmee je netwerken kunt namaken en simuleren.

Wat is Filius?

Filius is een programma waarmee je netwerken kunt bouwen en simuleren.

Installeren van het programma

Filius is gratis en je hoeft geen account aan te maken. Je kunt Filius op diverse manieren starten.

1. Open Filius in GitHub en volg de stappen uit de Readme.md. Dit werkt op (bijna) elk apparaat met een moderne webbrowser. Je browser opent GitPod en op de servers van GitPod wordt een Linux-omgeving met Filius geopend. Je kunt in GitPod inloggen met je (gratis) GitHub account.
2. Installeer Filius op je eigen apparaat. Filius is beschikbaar voor Windows, MacOS en Linux.

Veelgestelde vragen

Filius verdwijnt van het scherm en ik krijg de melding “noVNC”.

Als je in de workspace in gitpod een half uur niets aanpast dan wordt de workspace afgesloten. Klikken in Filius telt niet als een aanpassing. Er is geen echte oplossing, maar wel een work-around. Om te voorkomen dat de workspace wordt afgesloten terwijl je in Filius werkt kun je elk half uur een kleine wijziging maken in je workspace, bijvoorbeeld door een puntje aan het einde van je README.md toe te voegen.

Meer informatie

1. Meer informatie over Filius kun je vinden op de website van de maker: https://www.lernsoftware-filius.de
2. De help over het gebruik van Filius zit in het programma: druk op het vraagteken.