Druk knop opdracht¶

Voor deze opdracht ga je aan de slag met een hoop verschillende (nieuwe) componenten:

Je gaat Docker gebruiken om verschillende services te draaien.
Je gaat een API bouwen met behulp van Python Flask.
Je gaat voor het eerst werken met een relationele database.
Je gaat een drukknop aansluiten op je microcontroller.
Je gaat HTTP requests versturen vanuit javascript naar je API.
Je gaat je embedded systeem verbinden aan de wifi en HTTP requests versturen naar je API.

Om dit te doen ga je aan de slag met 3 opdrachten. Bij deze opdrachten zul je vooral gebruik moeten maken van de knowledgebase, maar ook zul je soms zelf moeten gaan googlen en experimenteren. Vraag vooral om hulp als je vastloopt!

Opdracht 1: Docker gebruiken¶

In jullie project ‘HBO-ICT x Studiekiezers’ staat een configuratie waarmee je relatief makkelijk gebruik kan maken van de services die we hierboven hebben genoemd. Dit doen we door gebruik te maken van Docker, een container platform waarmeze jij makkelijk services kan draaien zonder dat je deze op je eigen computer hoeft te installeren en configureren.

Hier in de knowledgebase vind je hoe je Docker gaat gebruiken, in hoofdlijnen:

Installeer Docker Desktop op je computer.
Open je project in Visual Studio Code.
Open in Visual Studio Code de terminal.
Voer je een commando uit om de containers te starten.

Ieder teamlid moet de docker containers werkend krijgen op de eigen laptop. Je kan testen of de containers werken door in je webbrowser te navigeren naar http://localhost/.

Opdracht 2: P5js druk-knop registratie¶

Voor deze opdracht ga je zorgen dat je door middel van een virtuele drukknop, een knop in een P5js sketch, data kan stoppen in je database. Hiervoor ga je het volgende stappenplan volgen:

Maak in het python bestand ‘app.py’ een nieuw endpoint ‘/knop’ aan.
- Zoek op internet hoe je een nieuw endpoint kan aanmaken in een Flask applicatie.
- Het endpoint moet een stukje tekst teruggeven zodat je kan testen of het endpoint werkt.
Log nu in op phpmyadmin, http://localhost/phpmyadmin, creeër vervolgens een database in phpmyadmin door de volgende SQL uit te voeren:
```
CREATE DATABASE fusion;
```

Nu voeg je een nieuwe tabel toe aan deze database (selecteer de database voordat je onderstaande SQL uitvoert):

CREATE TABLE drukknop (
    id INT AUTO_INCREMENT PRIMARY KEY,
    tijdstip TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Om nu vervolgens een nieuwe rij toe te voegen aan de tabel drukknop kan je dat als volgt doen:

INSERT INTO drukknop () VALUES ();

(id en tijdstip worden automatisch ingevuld door MySQL, daardoor hoef je geen waardes mee te geven tussen de haakjes.)

Voeg nu aan het endpoint, /knop, toe dat je een nieuwe rij toevoegt aan de tabel drukknop.
Bezoek deze pagina (http://localhost/knop) in je browser, elke keer als je refresht moet er een rij in de database komen te staan.

Als dit werkt ga je aan de slag om dit te integreren in een P5js sketch.

Hiervoor volg je de volgende stappen:

Maak een knop in P5js, voeg hier een ‘onclick’-listener aan toe.
Laat de ‘onclick’-listener telkens als er op de knop gedrukt wordt een request sturen naar je flask endpoint.
Controleer in phpmyadmin of je ook daadwerkelijk de data ziet verschijnen.

Om te weten hoe je data vanuit je P5js sketch naar je Flask endpoint kunt sturen, kan je gebruik maken van dit voorbeeld programma: https://editor.p5js.org/slow_izzm/sketches/UgWRuFnIp.

Als je een virtuele drukknop werkend hebt waarmee je data in je database kunt stoppen, ga je aan de slag om dit te integreren in je embedded systeem in de volgende opdracht.

Opdracht 3: knop-druk registratie Arduino¶

Je gaat nu een daadwerkelijke drukknop aansluiten op je embedded systeem, je ESP32, deze ga je dan verbinden aan de wifi zodat je een HTTP request kunt sturen naar je Flask endpoint. Hier komt veel bij samen, een goede uitdaging dus!

Om ervoor te kunnen zorgen dat jouw ESP32 kan praten met de webserver op je laptop ga je beide apparaten verbinden met het Iotroam-netwerk van de HvA.
- In de knowledgebase vind je hier informatie over.
Zoek vervolgens uit hoe je een drukknop kan aansluiten aan je ESP32. Zorg ervoor dat je in de code van je ESP32 kan bepalen of de knop is ingedrukt of niet.
Laat de ESP32 telkens als er op de knop gedrukt wordt een HTTP request sturen naar je Flask endpoint.
- In plaats van een request te versturen naar http://localhost/knop moet je nu een request versturen naar http://[IP-ADRES-VAN-JE-LAPTOP]/knop. Dit werkt alleen als je beide apparaten verbonden zijn met het Iotroam-netwerk. Je kan de IP-adres van je laptop vinden door in je terminal te typen ipconfig.
Controleer nogmaals in phpmyadmin of je ook daadwerkelijk de data ziet verschijnen.