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. Voer rechts 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

GitHub is een website waar je code kunt opslaan en delen. Codespaces is een codeeromgeving binnen GitHub waar je code kunt wijzigen en uitvoeren.

Wat zijn GitHub en Codespaces?

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 wijzigen en uitvoeren.

• In Codespaces werkt je met de editor VSCode om je code te wijzigen.
• 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.
• Codespaces biedt een Virtual Machine (computer in de cloud) waar je op kunt werken via elke browser. Als je de browser sluit dan wordt de Virtuele Machine op pause gezet.

Starten met een opdracht

Maak een account in GitHub

1. Ga naar https://www.github.com/ (gebruikt Chrome of Firefox, in 21/22 werkt dit niet in Safari)
2. Klik op sign-up
3. Gebruik je email adres van school ( 1xxxxx@emmauscollege.nl )
4. Zorg dat je het wachtwoord dat je kiest terug kunt vinden
5. Kies als username je voornaam met een 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

Maak een Codespace met startcode voor je opdracht

1. De docent heeft een repository met startcode voor deze opdracht op GitHub gezet. Deze repository is read-only voor leerlingen. De docent vertelt hoe je een kopie van deze repository kunt maken waarin je zelf aanpassingen kunt doen. Sommige docenten delen een link naar GitHub Classroom waarmee jij je kunt inschrijven en automatisch je eigen kopie van de repository krijgt. Andere docenten laten je zelf een kopie maken door de repository met startcode te forken. Gebruik je eigen kopie van de repository voor de volgende stappen.
2. Klik op de knop “Code”, een pop-up-box verschijnt, kies in de pop-up-box de tab “Codespaces”, klik op de knop “Create Codespace” om een nieuwe Codespace te maken. De volgende keer kun je de Codespace kiezen die je nu gemaakt hebt.
3. Alle bestanden uit de GitHub repository worden gekopieerd naar jouw Codespace. Dit kan enkele minuten duren.
4. Als je de browser sluit dan wordt je Codespace op pauze gezet. Als je Codespace een maand achter elkaar op pauze staat, dan wordt hij verwijderd.

In je eentje werken aan je opdracht

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.

Met zijn tweeën of drieën werken aan je opdracht

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.

Met zijn vieren of meer werken aan je opdracht

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.

Veelgestelde vragen

GitHub 404 fout

Ik heb via email een link ontvangen om toegang te krijgen tot een repo, maar als ik op de link druk dan krijg ik een 404 fout. Wat moet ik doen?

Login op GitHub en druk daarna nogmaals op de link.

Merge conflict

Ik heb een merge conflict, hoe los ik dat op?

Kijk deze video, daarin wordt uitgelegd hoe je een merge conflict in Codespaces oplost.
https://www.youtube.com/watch?v=HosPml1qkrg

Als je er met de video niet uitkomt en er is niemand in de buurt die je kan helpen, dan kun je het volgende doen.

• Maak een nieuwe Codespace. In de nieuwe Codespace wordt de laatste versie van de code van GitHub ingelezen.
• Knip en plak de wijzigingen van je oude Codespace naar je nieuwe Codespace.
• Test of je code het doet, haal de fouten eruit.
• Bewaar je wijzigingen in GitHub door in je nieuwe Codespace op Commit en Sync te klikken.

Scherm delen

Ik wil mijn scherm delen met iemand anders, hoe doe ik dat?

In de iconenbalk links op je scherm zie een soort gebogen pijl. Dit is de extension “live-share”. Hiermee kun je je scherm delen met andere GitHub gebruikers.

Deze functie is bedoeld om samen snel een klein probleem op te lossen. Gebruik hem niet meer dan een paar minuten per les. Echte programmeurs verdelen het werk, maken elk hun eigen stuk code in hun eigen Codespace en delen het dan via GitHub. Dat moet jij ook leren.

Werken met bestanden in Codespaces

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?

• Met bestanden werken doe je het gemakkelijkst in Codespaces.
  In de kolom met iconen links op je scherm zie je bovenaan een icoontje met twee velletjes papier. Klik daarop. Je ziet nu een lijst met al je bestanden en mappen. Mappen kun je uitklappen. Als je dubbelklikt op een bestand, dan wordt het geopend. Als je met je rechtermuisknop op een bestand of map klikt, dan verschijnt er een drop-down menu waarin je meer met het bestand of de map kunt doen.
• Een nieuw bestand of map aanmaken:
  Als je muis op de lijst met bestanden staat, dan zie je vlak boven de lijst twee icoontjes met een +. Als je op de linker klikt, dan maak je een nieuw bestand. Als je op de rechter klikt, dan maak je een nieuwe map.
• De naam van een bestand of map veranderen:
  Klik met de rechtmuisknop op een bestand of map. Er verschijnt een drop-down menu. Kies “Rename…” in het pull-down menu. Pas de naam aan en druk op Enter.
• Een bestand verplaatsen:
  Sleep het bestand van de ene naar de andere map.
• Een bestand uploaden:
  Sleep een bestand van je bureaublad naar het lijstje bestanden in Codespaces.
  Een andere manier om een bestand te oploaden:
  Ga op een map staan, klik op de rechtermuisknop, een pull-down menu verschijnt, kies “Upload…” in het pull-down menu.
• Meerdere bestanden selecteren:
  Klik op het bovenste bestand. Beweeg je muis naar een bestand verder naar onderen. Houdt SHIFT ingedrukt terwijl je op het onderste bestand klikt.

De Github website gebruiken

Waarvoor heb ik de GitHub website nodig, code aanpassen en uitvoeren doe ik toch in Codespaces?

Dat klopt, je gebruikt de GitHub website vaak alleen om in te loggen en je Codespace te starten. Code aanpassen en uitvoeren doe je in je Codespace. Toch zijn er een aantal handige functies op de GitHub website.

• Repo’s zoeken:
  Links in het scherm staan de repo’s die je recent en vaak gebruikt hebt. Door op een repo te klikken wordt deze geladen. De link van de repo staat bovenin je browser.
• Bekijken wat er in een repo zit:
  Je kunt snel zien wat er in een repo zit door op de bestanden of mappen in de repo te klikken.
• Bekijken wat er gewijzigd is:
  Je kunt alle wijzigingen in een repo terugzien. Een lijst met de laatste wijzigingen krijg je door te klikken op het aantal commits, onder de groene knop met “Code”. Van elke commit kun je zien wat er is gewijzigd, klik daarvoor op het nummer van de commit aan het einde van de regel.
• Alle bestanden uit een repo downloaden:
  Je kunt alle bestanden in een repo downloaden in een zip-bestand. klik op de groene knop “Code” en kies in het menu dat verschijnt voor “Download ZIP”.

GitHub (tot eind 2023)

Vanaf begin 2024 wordt GitHub met Replit (havo) of GitPod (vwo) vervangen door GitHub met Codespaces (have en vwo)
GitHub is een website waar je code kunt opslaan.

Wat is GitHub?

GitHub is een website waar je code kunt opslaan

• Heel veel goede programmeurs gebruiken GitHub
• Heel veel programmeeromgevingen kunnen samenwerken met GitHub
• GitHub bewaart alle oude versies van je code
• Code op GitHub kun je gemakkelijk delen met anderen
• GitHub biedt heel veel speciale mogelijkheden om in groepen aan dezelfde code te werken

GitHub kun je zien als een soort cloudopslag voor je code. Github slaat code op in repositories. Een repository (kortweg: repo) bevat de code voor één project of opdracht. De kern van een repository zijn de bestanden.

Een account aanmaken

1. Ga naar https://www.github.com/ (gebruikt Chrome of Firefox, in 21/22 werkt dit niet in Safari)
2. Klik op sign-up
3. Gebruik je email adres van school ( 1xxxxx@emmauscollege.nl )
4. Zorg dat je het wachtwoord dat je kiest terug kunt vinden
5. Kies als username je voornaam met een 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

Hoe werkt code wijzigen in Github?

Er zijn veel manieren om code die je in GitHub bewaard te wijzigen. Bijna altijd maak je eerst een kopie van GitHub in je eigen ontwikkelomgeving (je computer of een online ontwikkelomgeving zoals Gitpod of Replit). Dit heet clonen (spreek uit als “kloonen”). Vervolgens wijzig en test je code die in je clone zit. Als een wijziging goed is, dan zet je die terug op GitHub. Dit wijzigen gaat in de volgende stappen:

1. Pull : Haal alle updates van GitHub binnen in je lokale repository.
2. Codeer : Maak / verander je programmeercode en test of het werkt.
3. Save : Sla je veranderingen op.
4. Probeer : Test uit of het werkt.
5. Stage : Zet de gewijzigde bestanden klaar voor de commit.
6. Message : Typ een korte maar begrijpelijke commitboodschap.
7. Commit : Maak een nieuw punt in je tijdlijn.
8. Pull : Kijk of er intussen geen nieuwe wijzigingen in GitHub zijn gemaakt door een team-genoot.
9. Push : Duw je commit van je ’lokale’ repository naar je (cloud) repository op GitHub.

Hoe werkt versiebeheer in GitHub?

Je kunt je git het gemakkelijkst voorstellen als een tijdlijn. De punten op de tijdlijn zijn alle versies die jij vanaf het begin hebt ‘opgeslagen’:

Hoe werkt dit? Tijdens het programmeren werk je vaak zo:

• Maak / verander je programmeercode.
• Sla je veranderingen op.
• Test uit of het werkt.

Het maakt eigenlijk niet uit of je hierbij gebruik maakt van GitPod, Repl.it, Arduino of een andere programmeeromgeving.

Met het gebruik van git komt daar nog een stap bij: de commit. Een commit doen betekent dat je een nieuw punt aan je tijdlijn toevoegt. Dit doe je als volgt:

• Zet de bestanden klaar voor de commit
• Typ een korte maar begrijpelijke commitboodschap
• Commit

Hoe werkt samenwerken in GitHub?

GitHub functioneert als de centrale cloudopslag waar iedereen mee synchroniseert. Het is belangrijk om te beseffen dat je code in je programmeeromgeving en GitHub wel aan elkaar verbonden, maar niet automatisch gesynchroniseerd zijn. Je zult dit handmatig moeten doen. Maak je gebruik van GitHub, dan voer je na je commit een synchronisatie uit:

• Duw je commit van je ’lokale’ repository naar je repository op GitHub.

Wanneer je samenwerkt met anderen, wil je als je later verdergaat eerst eventuele aanpassingen van je teamgenoten binnenhalen. Als zij die netjes hebben geduwd naar de repository op GitHub, kun jij die eenvoudig binnenhalen. Bij samenwerken in een team wordt stap 1 dus:

• Haal eventuele nieuwe commits van je GitHub repository binnen.

Gitpod en Replit gebruiken

Gitpod en Replit (of andere online ontwikkelomgevingen) hebben een koppeling met GitHub. Dat betekent dat je vanuit Gitpod en Replit wijzigingen in GitHub kunt opslaan. Zie de handleiding van Gitpod en de handleiding van Replit op deze deze website voor meer informatie.

De Github dev omgeving gebruiken

In de Github dev-omgeving kun je meerdere bestanden tegelijk wijzigen, verplaatsen of toevoegen. Het lijkt erg op Gitpod, maar in tegenstelling tot Gitpod kan de Github dev-omgeving je code niet uitvoeren.

Je komt in de Github dev-omgeving door de punt (".") op je toetsenbord in te drukken op het moment dat je een repo ziet in GitHub.

Links in het scherm zie je al je bestanden. Enkele mogelijkheden zijn:

• Downloaden van een bestand: Klik met de rechtermuisknop op een bestand en kies “download” in het menu dat verschijnt.
• Toevoegen van nieuwe bestanden kan door bestanden van je bureaublad naar de dev-omgeving te slepen.
• Bestanden kopieren, een andere naam geven, verplaatsen of verwijderen.
• Een map maken, een andere naam geven, verplaatsen of verwijderen (letop: Github kan niet goed overweg met mappen waar geen bestanden in staan)

Als je klaar bent met wijzigen, dan commit je de wijzigingen en push je ze naar GitHub. Druk daarvoor links op het versiebeheer icoon (drie rondjes met 2 lijntjes ertussen) en gebruik het menu onder de drie puntjes dat verschijnt op de plek waar je bestanden stonden.
LETOP: Als je vergeet te committen en pushen dan worden je wijzigingen niet opgeslagen!!!

De Github website gebruiken

De Github website werkt niet handig voor het aanbrengen van wijzigingen in je code, maar er zijn een aantal functies die je hier wel handig kunt doen.

Repo’s zoeken

Links in het scherm staan de repo’s die je recent en vaak gebruikt hebt. Door op een repo te klikken wordt deze geladen. De link van de repo staat bovenin je browser, deze heb je bijvoorbeeld nodig als je de repo in Gitpod of replit wilt gebruiken.

Bekijken wat er in een repo zit

Je kunt snel zien wat er in een repo zit door op de bestanden of mappen in de repo te klikken.

Bekijken wat er gewijzigd is

Je kunt alle wijzigingen in een repo terugzien. Een lijst met de laatste wijzigingen krijg je door te klikken op het aantal commits, onder de groene knop met “Code”. Van elke commit kun je zien wat er is gewijzigd, klik daarvoor op het nummer van de commit aan het einde van de regel.

Alle bestanden uit een repo downloaden

Je kunt alle bestanden in een repo downloaden in een zip-bestand. klik op de groene knop “Code” en kies in het menu dat verschijnt voor “Download ZIP”.

Git gebruiken

Veel programmeurs gebruiken git op hun computer om code op de slaan in repo’s. Git is een programma waarin alle commando’s zitten die nodig zijn om met repo’s te werken. Als je hier dagelijks mee werkt en veel commando’s uit je hoofd kent, dan werkt dit heel snel. Voor leerlingen is dit niet zo een handige methode, wij gebruiken hem daarom niet.

Veelgestelde vragen

GitHub 404 fout

Ik heb via email een link ontvangen om toegang te krijgen tot een repo, maar als ik op de link druk dan krijg ik een 404 fout. Wat moet ik doen?

Login op GitHub en druk daarna nogmaals op de link.

Replit (tot eind 2023)

Vanaf begin 2024 wordt Replit vervangen door GitHub met Codespaces
Replit is een online ontwikkelomgeving waarin je code kunt wijzigen en uitvoeren. We gebruiken dit op de havo.

Wat is Replit?

• Replit is een online editor
  • Replit werkt op elk apparaat met internettoegang en een moderne webbrowser, er is geen installatie van apps of programma’s nodig
  • Je code wordt direct bewaard op de replit servers, inclusief oude versies
  • Syntax checks door middel van kleuren van code voorkomt fouten
  • Ondersteuning van heel veel talen: html/css/javascript, python, sqlite, php enzovoort
• Je kunt code die je gemaakt hebt uitvoeren in Replit
  • Snel zien wat je code doet in een preview-venster
  • Bekijk en test je websites uitgebreid in je browser dankzij de ingebouwde webserver
  • Gebruik de ingebouwde shell access voor gevorderde functies
• Je kunt code die je in Replit gemaakt hebt bewaren op GitHub
  • Heel veel goede programmeurs gebruiken GitHub
  • Bewaar de laatste versie van je code op veilig GitHub (minimaal 1x per week, liefst elke les)
  • De docent kan helpen als je code op GitHub staat
  • Je kunt efficiënt samenwerken in groepjes als je code op GitHub bewaart

De eerste keer Replit starten

1. Replit is gratis, sommige functies zoals het wijzigen van private repo’s is afgeschermd in de gratis versie.
2. Je hoeft voor het gebruik van Replit niets te installeren, alles werkt vanuit de browser Gebruik bij voorkeur Chrome of anders Firefox.
3. Ga naar https://replit.com/
4. Druk op de knop “inloggen met Github” om in te loggen.
5. Geef Replit rechten in Github om wijzigingen aan te brengen in jouw repo’s door op de groene knop te drukken.
6. Ga door vanaf stap 2 onder “De volgende keren Replit starten”

De volgende keren Replit starten

1. Ga naar https://replit.com/ en druk op de knop “inloggen met Github” om in te loggen.
2. Klik op de blauwe knop “+Create” en klik in de popup die verschijnt op “Import from Github”.
3. Knip en plak de link naar de repo op github waar je je code hebt staan. Deze kun je vinden in Github. De link lijkt op https://github.com/emmaus-4h/website-piet/ .
4. Kies de juiste taal (“HTML/CSS/Javascript” voor de website en game, “Bash” voor de webshop)
5. Klik op de knop “Import from Github”. Replit haalt nu de laatste versie van je code uit GitHub
6. Wijzig je code.
7. Test of je code werkt, je kunt op de groene RUN knop drukken om een nieuw voorbeeld te zien.
8. Klik op het “Git” icoontje links in het scherm. Type rechts in het scherm een korte beschrijving van de wijziging, druk op de knop “Commit”, druk op de knop “Push”, druk op toestaan gebruik van je github gegevens.
9. Check in op https://github.com/ dat je codewijzigingen zijn opgeslagen
10. Als je nog verder wilt werken, gaan dan terug naar stap 4.

Veelgestelde vragen

Mijn code springt niet goed in, hoe los ik dat op?

Klik op het icoontje met de drie streepjes rechtsboven het bestand dat je aan het bewerken bent. Replit auto-format het bestand dat je aan het bewerken bent.

Mijn voorbeeld laat alleen het bovenste stukje zien, hoe los ik dat op?

Klik op het icoontje met het vierkantje en het pijltje erdoor, rechtsboven het voorbeeldvenster. Het voorbeeld wordt nu in apart venster geopend. Druk op reload als je het wilt verversen.

Bewaren op Replit lukt niet, er is een foutmelding met access

Vraag docent om hulp

Bewaren op Replit lukt niet, er is een foutmelding met conflict

Vraag docent om hulp

Hoe update ik het voorbeeldvenster?

Druk op reload in je voorbeeldvenster

Hoe kan ik terug naar de laatste versie op GitHub?

1. Ga naar https://repl.io/ en log in met je Github account.
2. Klik op de blauwe knop “+Create” klik in de pop-up die verschijnt op de knop “import from Github”
3. Knip en plak de link naar de repo op github waar je je code hebt staan. Deze kun je vinden in Github. De link lijkt op https://github.com/emmaus-4h/website-piet/

Gitpod (tot eind 2023)

Vanaf begin 2024 wordt GitPod vervangen door GitHub met Codespaces
Gitpod is een online ontwikkelomgeving waarin je code kunt wijzigen en uitvoeren (en veel meer). We gebruiken dit op het vwo.

Wat is Gitpod?

• Gitpod is een online editor (en veel meer)
  • De Gitpod editor is gebaseerd op VS Code. VS Code is een heel populaire editor onder professionele programmeurs.
  • Gitpod werkt op elk apparaat met internettoegang en een moderne webbrowser, er is geen installatie van apps of programma’s nodig
  • Je code wordt direct bewaard op de Gitpod servers, inclusief oude versiesLETOP: In de gratis versie van Gitpod wordt je code van Gitpod verwijderd als je twee weken niets doet.
  • Syntax checks door middel van kleuren van code voorkomt fouten
  • Ondersteuning van heel veel talen: html/css/javascript, python, sqlite, php enzovoort
• Je kunt code die je gemaakt hebt uitvoeren in Gitpod
  • Snel zien wat je code doet in een preview-venster
  • Bekijk en test je websites uitgebreid in je browser door webserver te starten
  • Gebruik de ingebouwde shell access voor gevorderde functies
• Je kunt code die je in Gitpod gemaakt hebt bewaren op GitHub
  • Heel veel goede programmeurs gebruiken GitHub
  • Bewaar de laatste versie van je code op veilig GitHub (minimaal 1x per week, liefst elke les)
  • De docent kan helpen als je code op GitHub staat
  • Je kunt efficiënt samenwerken in groepjes als je code op GitHub bewaart

De eerste keer Gitpod starten

1. Gitpod is gratis, tot maximaal 50 uur per maand.
2. Je hoeft voor het gebruik van Gitpod niets te installeren, alles werkt vanuit de browser Gebruik Chrome of anders Firefox, in 21/22 zijn er problemen met een wit-scherm geconstateerd bij gebruik in Safari.
3. Ga naar https://gitpod.io/
4. Gebruik je Github-account om in te loggen
5. Geef Gitpod rechten in Github om wijzigingen aan te brengen in jouw repo’s (deze stap is verder uitgewerkt onder Q&A “Bewaren op Github lukt niet, er is een foutmelding met access”)

Code maken in Gitpod

1. Ga naar https://gitpod.io/ en log in met je Github account.
2. Klik op de groene knop “New workspace”
3. Knip en plak de link naar de repo op github waar je je code hebt staan. Deze kun je vinden in Github. De link lijkt op https://github.com/emmaus-4h/website-piet/
4. Wijzig je code
5. Test je code
6. Commit je wijzigingen
7. Synchroniseer je code in Gitpod met Github
8. Check in Github dat je codewijzigingen zijn opgeslagen

Veelgestelde vragen

Bewaren op Github lukt niet, er is een foutmelding met access

Zet de permissies van Gitpod goed, zodat hij op jouw account in Github wijzigingen kan maken

1. klik op het icoontje van een poppetje linksonderin, een menu verschijnt
2. klik op “Gitpod: Open Acces Control”, een nieuw scherm verschijnt nadat je “Open” hebt geklikt in de popup
3. klik op de drie puntjes op de regel “Gitpod” en kies “Edit Permissons” in het menu dat verschijnt
4. Zet alle vinkjes aan in de popup die verschijnt en klik op “update permissions”
5. geef toestemming in github als github daarom vraagt (groene knop).

Bewaren op Github lukt niet, er is een foutmelding met conflict

Er zijn conflicten tussen jouw wijzigingen in Gitpod en de wijzigingen die gelijktijdig, meestal door een teamgenoot, gemaakt zijn in een repo. Je moet handmatig kiezen welke wijzigingen je wilt bewaren.

1. Commit je wijzigingen
2. Pull alle wijzigingen uit Github naar Gitpod
3. Kies in de editor welke van de wijzigingen met een conflict je wilt bewaren
4. Test je programma
5. Commit
6. Push je wijzigingen naar Github

Hoe open ik een voorbeeldvenster met mijn website?

1. Klik rechtsonder op “Ports: xxxx”, linksboven verschijnt een menu
2. Klik linksboven op de regel met de poort
3. Klik op het wereldbolletje achteraan op de regel met de poort, een popup verschijnt
4. Klik op “Open” in de popup.

Hoe update ik het voorbeeldvenster?

Druk op reload in je voorbeeldvenster

Hoe kan ik terug naar de laatste versie op GitHub?

1. Ga naar https://gitpod.io/ en log in met je Github account.
2. Klik op de groene knop “New workspace”
3. Knip en plak de link naar de repo op github waar je je code hebt staan. Deze kun je vinden in Github. De link lijkt op https://github.com/emmaus-4h/website-piet/

Mijn code springt niet goed in, hoe los ik dat op?

Klik op [option]+[shift]+f. Gitpod auto-format het bestand dat je aan het bewerken bent.

Ik kan mijn workspace in gitpod nergens meer vinden 

Als je een workspace twee weken niet gebruikt, dan wordt hij door gitpod verwijderd. Je kunt dan een nieuwe workspace maken van de laatste versie van je code die je in github hebt gecommit.

Hoe kan ik zien hoeveel gitpod gebruik ik deze maand nog over heb? 

1. Klik linkonder op het icoontje van een poppetje (je account)
2. Kies “Gitpod: Upgrade subscription”, een nieuw scherm verschijnt nadat je in de popup die verschijnt op “Open” hebt geklikt
3. Je ziet midden boven het aantal gebruikte en resterende uren.
4. Beweeg met je muis over de tijd, er verschijnt een kleine popup die aangeeft van welke tot welke datum de huidige maand loopt

Mijn 50 uur gratis gitpod gebruik zijn op 

Bijna alle leerlingen hebben genoeg aan 50 uur per maand. Als dit bij jouw een keer niet zo is, dan kun je dit als volgt oplossen.

1. Bewaar al je werk op Github vlak voordat je tijd op is.
2. Maak met een ander e-email adres een nieuwe Github account aan.
3. Vraag de docent je Github account toe te voegen aan de repo waarin je werkt.
4. Login bij Gitpod met je nieuwe Github-account en maak een nieuwe workspace aan met de repo waarin je werkte.

Je hebt nu weer 50 uur.

Waar vind ik documentatie over Gitpod?

https://www.gitpod.io/docs/

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.
3. Backup voor als optie 1) (GitPod) meer dan een paar minuten duurt om te starten:
   Filius in Replit login bij replit met je GitHub account, druk op de groene Run knop in replit om Filius te starten, maximize de tab waarin Filius verschijnt.

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.