- De leerlingen kunnen het verschil uitleggen tussen HTTP GET- en POST-requests en deze toepassen in praktische scenario's
- De leerlingen kunnen een webhook aanmaken en gebruiken als trigger in een Make.com scenario
- De leerlingen kunnen een Router met Filters inzetten om verschillende werkstromen (GET en POST) in één scenario uit te voeren
- De leerlingen kunnen AI inzetten om HTML/CSS/JavaScript-formulieren te genereren en deze integreren in webhooks
- De leerlingen kunnen formulierdata verwerken en opslaan in Google Sheets via webhook POST-requests
- De leerlingen kunnen dynamische responses en validaties implementeren voor gebruikersinteractie
In deze les gaan we leren hoe je met één scenario een custom html-formulier kunt tonen, invullen en de data direct kunt verwerken.
Deel 1: De taal van het internet (HTTP & Webhooks)
Theorie
Om te begrijpen hoe automatisering werkt, moeten we kijken naar hoe computers met elkaar praten.
Dit gebeurt meestal via HTTP-requests.
Zie een HTTP-request als een postpakketje tussen een browser en een server.
Er zijn twee acties die je constant gebruikt:
- GET: Je vraagt informatie op (bijvoorbeeld het laden van een TikTok-profiel of een website).
- POST: Je stuurt informatie op (bijvoorbeeld het versturen van een formulier of het plaatsen van een comment).
Een Webhook is een unieke URL die door Make.com wordt aangemaakt om te 'luisteren' naar deze pakketjes.
In deze les maken we één Webhook die beide taken uitvoert: hij deelt het formulier uit (GET) en vangt de ingevulde data op (POST).
Oefening 1: De methode herkennen Stel je voor dat je een dashboard bouwt voor de organisatie van een lokaal muziekfestival. Analyseer de volgende acties.
| Actie | Gebruikershandeling | Methode |
|---|---|---|
| De line-up bekijken | De pagina 'artiesten' openen in je browser. | ? |
| Tickets kopen | Je naam en mailadres invoeren en op 'bestel' klikken. | ? |
| Feedback geven | Een ster-rating en review achterlaten na het festival. | ? |
| Het blokkenschema checken | Een link aanklikken om de PDF te downloaden. | ? |
Opdracht:
- Noteer voor de vier situaties of er sprake is van een GET- of een POST-request en leg kort uit waarom je hiervoor kiest.
Deel 2: De Router als Verkeersregelaar
Theorie
In Make.com gebruiken we een Router om binnen één scenario onderscheid te maken tussen het tonen van het formulier en het opslaan van de data.
De Router splitst de workflow in twee paden op basis van de HTTP Method.
Hiervoor gebruiken we een Filter op de verbindingslijnen:
- Pad 1 (GET): Als de methode gelijk is aan
GET, sturen we een Webhook Response met de HTML-code van het formulier. - Pad 2 (POST): Als de methode gelijk is aan
POST, verwerken we de binnengekomen data.
Zo heb je geen twee verschillende webhooks nodig voor één project.
Oefening 2: Het scenario-geraamte We gaan een systeem opzetten voor een "Side-hustle Tracker" waarbij je via een formulier je gewerkte uren kunt doorgeven.
Data-architectuur:
| Module/Filter | Functie | Instelling |
|---|---|---|
| Webhook | Trigger | Maak een 'Custom Webhook' aan en kopieer de URL. |
| Router | Splitsing | Geen specifieke instellingen nodig. |
| Filter 1 | Route naar GET | Conditie: Method (Text operator) Equals: GET. |
| Filter 2 | Route naar POST | Conditie: Method (Text operator) Equals: POST. |
Opdracht:
- Bouw dit geraamte in Make.com.
- Let op: je hebt de HTTP method nodig in de filterinstellingen van de router. Standaard zal de webhook deze niet meegeven. Je kan dit aanzetten door bij de webhook op Advanced settings te klikken en bij Get request HTTP method voor Yes te kiezen.
- Voeg achter Filter 1 een Webhook Response toe met de tekst "Dit is het formulier".
- Test je scenario door de Webhook URL in je browser te openen. Zie je de tekst?
Deel 3: HTML-formulieren met AI (De GET-route)
Theorie
Om een echt formulier te tonen, moet de Webhook Response in de GET-route gevuld worden met HTML-code.
Je hoeft dit niet zelf te programmeren; we gebruiken AI.
Een modern formulier heeft drie onderdelen nodig in één bestand:
- HTML: De velden (tekstvakken, knoppen).
- CSS: De styling (zodat het eruitziet als een professionele app).
- JavaScript (Fetch): De code die zorgt dat de data naar jouw Make-URL wordt verstuurd.
De JavaScript moet de data terugsturen naar exact dezelfde URL waar het formulier vandaan kwam via een POST-request.
Oefening 3: De complete App bouwen Je gaat nu een tool maken voor een studentenjob-administratie.
De Prompt voor de AI:
"Schrijf een modern, single-file HTML/CSS formulier voor 'Urenregistratie Bijbaan'. Velden: Naam, Datum, Aantal uren en Taakomschrijving. Styling: Gebruik een strak 'Glassmorphism' thema. Het formulier dient naar de huidige URL ge-POST te worden via form submission."
Opdracht:
- Genereer de code met de prompt en plak deze in de Webhook Response van je GET-route.
- Voer dit scenario al één keer uit. Je ziet dat de webhook wacht op een HTTP request. Plak de URL in je browser. Je zou nu je formulier moeten zien verschijnen.
- De webhook weet nog niet welke data hij kan verwachten. Klik daarom op de webhook settings en kies Redetermine data structure. Vul je formulier in de browser in, en klik op verzenden. De boodschap in je webhook module verandert naar Succesfully determined. Dit zorgt ervoor dat je in de volgende stappen toegang hebt tot de data uit de formuliervelden.
- Zorg dat je POST-route (na Filter 2) de data opslaat in een Google Sheet.
Deel 4: Uitdagingen voor Experts
Voor degenen die sneller klaar zijn:
- Dynamische Bevestiging: Zorg dat de POST-route ook een Webhook Response heeft. Stuur een HTML-pagina terug die de gebruiker persoonlijk bedankt: "Bedankt [Naam], je uren zijn opgeslagen!"
- Validatie-filter: Voeg een extra filter toe in de POST-route. Als het 'Aantal uren' groter is dan 10, mag de data niet naar Google Sheets, maar krijgt de gebruiker een foutmelding.
- Huisstijl: Pas de CSS-code aan zodat de knoppen en kleuren exact overeenkomen met de huisstijl van een bekend merk zoals Spotify of Instagram.
- HTTP GET en POST-requests: twee fundamentele methoden voor communicatie tussen client en server
- Webhooks: unieke URL's die als triggers fungeren in automatiseringsscenario's
- Router met Filters: techniek om verschillende werkstromen (GET/POST) in één scenario uit te voeren
- AI-gegenereerde HTML/CSS/JavaScript: formulieren automatisch laten genereren voor webhooks
- Formulierdata-verwerking: opslaan van ingevulde gegevens in Google Sheets via POST-requests
- Dynamische responses en validaties: gebruikersinteracties en data-checks implementeren in webhooks
