Lees dit eerst — dan weet je precies wat je vandaag wel en niet leert

Bij elk lab werk je eerst een tijdje zelfstandig (of in duo's); de trainer bespreekt pas ná de oefentijd klassikaal na. Kom je er niet uit? Gebruik eerst de hint, dan pas de oplossing. Sneller klaar? Elk lab heeft een optioneel bonusblok — leuk om te doen, maar nooit verplichte stof.

Lees dit vóór de labs

Een API (Application Programming Interface) is een afgesproken manier waarop twee stukken software met elkaar praten. Jij stuurt een verzoek (request) en krijgt een antwoord (response) terug — zonder dat je hoeft te weten hoe de andere kant vanbinnen werkt.

Frontend, backend en de API ertussen

De meeste apps bestaan uit drie lagen. De frontend is wat jij ziet en aanraakt (de knoppen en schermen). De backend is waar de gegevens en de logica staan, meestal op een server. De API is het afgesproken doorgeefluik daartussen: de frontend vraagt via de API iets aan de backend en krijgt een antwoord terug. Zie een API daarom als een contract — het legt precies vast hoe je iets mag vragen en wat je terugkrijgt, los van hoe het systeem vanbinnen gebouwd is.

API's zitten overal

Je gebruikt er dagelijks tientallen zonder het te merken:

• Weer-app — haalt de verwachting op bij een weer-API (zoals Buienradar).
• "Inloggen met Google" — de app vraagt via Google's API of jij bent wie je zegt te zijn.
• Betalen in een webshop — de kassa praat via een API met de betaalprovider (iDEAL, Stripe).
• Google Maps in een bezorg-app — de kaart en route komen via de Maps-API binnen.
• KVK-nummer invullen bij een boekhoudpakket — de app haalt via de KVK-API automatisch je bedrijfsnaam en adres op, zodat je die niet zelf hoeft te typen.

Waar worden API's ingezet?

Een API is de lijm tussen software: overal waar twee systemen gegevens moeten uitwisselen, zit er een API tussen. Grofweg kom je ze in vier situaties tegen:

• Tussen een app en zijn server — je mobiele bank-app toont je saldo, maar de gegevens staan op de servers van de bank. De app vraagt ze op via een API. Elke keer dat je scrollt, refresht of iets aanklikt, gaat er een request de deur uit.
• Tussen bedrijfssystemen onderling — de webshop moet een bestelling doorgeven aan het voorraadsysteem, dat weer aan de boekhouding en de pakketvervoerder. Die koppelingen lopen via API's, zodat je gegevens niet handmatig hoeft over te typen.
• Open en publieke data — overheden en instanties stellen data beschikbaar via API's: het KNMI (weer), KVK (bedrijven), OV-reisinformatie, RDW (kentekens). Iedereen mag die opvragen en in eigen apps gebruiken.
• AI en automatisering — tools als ChatGPT, Copilot en Power Automate draaien op API's. Een flow die automatisch een e-mail verstuurt of een AI die een tekst samenvat, doet dat door achter de schermen een API aan te roepen.

Praktijksituaties: wie gebruikt API's, en waarvoor?

API's zijn geen vakgebied op zich — vrijwel elke IT-rol gebruikt ze, alleen met een ander doel. Herkenbare voorbeelden uit de praktijk:

Val je in geen van deze rollen? Kijk dan naar het patroon, niet de titel: overal waar iemand data ophaalt, doorstuurt of automatiseert tussen twee systemen, zit een API — en de manier waarop je 'm aanroept is in elk vakgebied hetzelfde.

Het vaste patroon: request → response

Dit is het beeld om te onthouden: jij (de user) stuurt via internet een request naar de API, die de database raadpleegt en de gevraagde data als response terugstuurt.

Elke API-aanroep bestaat uit dezelfde onderdelen. Dit is een GET-verzoek om producten op te halen:

En dit krijg je terug — gestructureerde data in JSON-formaat (hier ingekort; de echte response bevat meer velden):

{
  "id": 7,
  "title": "Chanel Coco Noir Eau De",
  "price": 129.99,
  "category": "fragrances"
}

Een verzoek heeft altijd deze bouwstenen:

Waarom JSON?

JSON (JavaScript Object Notation) is de taal waarin de meeste API's antwoorden. Het is voor mensen leesbaar én voor computers makkelijk te verwerken: sleutels en waarden tussen accolades. Je herkent het aan de "sleutel": waarde-paren — precies zoals hierboven.

Niet alles is JSON: soms XML

De meeste moderne API's geven JSON terug, maar je komt (vooral bij oudere systemen) ook XML tegen (Extensible Markup Language) — dezelfde data, maar verpakt in tags zoals <prijs>129.99</prijs>. Vaak mag je zélf kiezen welk formaat je terugkrijgt met de Accept-header op je verzoek: Accept: application/json vraagt om JSON, Accept: application/xml om XML. Welke formaten een API ondersteunt, staat in de documentatie.

De documentatie: de menukaart van de API

Bij elke API hoort documentatie die precies vertelt wat je mag vragen: welke endpoints er zijn, welke parameters en headers ze verwachten en hoe de response eruitziet. Zonder documentatie tast je in het duister — het is letterlijk de menukaart uit de ober-vergelijking.

Veel API's publiceren die docs in een standaardvorm die je meteen herkent:

• OpenAPI / Swagger — een interactieve pagina waarop je elk endpoint ziet én direct kunt uitproberen ("Try it out") zonder een regel code.
• ReDoc — een strakke, leesbare variant van diezelfde OpenAPI-beschrijving, handig om snel doorheen te scrollen.

De vuistregel voor de hele workshop: loopt iets vast, dan is de documentatie leidend — die vertelt altijd het juiste endpoint, formaat en de vereiste velden.

Samen met de trainer

Alles in dit lab is GET

In dit lab leer je data ophalen: één item, hele lijsten, gericht zoeken en filteren met parameters, en tot slot een echte dataset uitpluizen. Werk dit lab eerst zelfstandig (of in duo's) door — de trainer bespreekt het pas ná de oefentijd klassikaal na.

A. De basis

B. Query parameters

C. De speurtocht 🔍

Beantwoord elke vraag met een request — niet door te scrollen. De docs op dummyjson.com/docs/products zijn je menukaart.

D. Wissel van dataset

POST PUT DELETE

In dit lab schrijf je zelf naar de API: je maakt iets aan, wijzigt het en verwijdert het weer. Ook hier eerst zelfstandig (of in duo's) werken — nabespreking volgt na de oefentijd.

A. Aanmaken met POST

{
  "title": "Skills4-IT Koffiemok",
  "price": 12.50,
  "category": "kitchen-accessories"
}

B. Wijzigen met PUT

{ "price": 19.99 }

C. Verwijderen met DELETE

Eerst zelfstandig (of in duo's) werken — nabespreking volgt na de oefentijd

Theorie: drie vormen van API-authenticatie

Bijna elke serieuze API wil weten wie je bent voordat je erbij mag. Drie vormen kom je verreweg het vaakst tegen — van simpel naar veilig:

A. Eerst voelen: de dichte deur

B. Inloggen en het token pakken

{
  "username": "emilys",
  "password": "emilyspass"
}

C. Het token gebruiken

Nieuw gereedschap: Graph Explorer in plaats van Postman · Eerst zelfstandig (of in duo's) werken — nabespreking na de oefentijd

Tot nu toe werkte je met publieke sandbox-API's. Microsoft Graph is anders: het is de ene centrale API waarmee elke applicatie bij Microsoft 365 kan — mail, agenda, Teams, OneDrive, SharePoint, gebruikers. Elke keer dat een Power Automate-flow een mail leest of Outlook je agenda toont, gebeurt dat via Graph. Hetzelfde request → response-patroon dat je in Lab 1-3 leerde, gebruik je hier gewoon weer — alleen zit er nu een echt Microsoft 365-account achter.

A. Aan de slag met Graph Explorer

B. Je eerste Graph-request

C. De response beperken: $select en $top

Een volledige Graph-response kan tientallen velden bevatten — vaak meer dan je nodig hebt, en soms gevoeliger dan nodig. Met $select vraag je alleen specifieke velden op; met $top beperk je het aantal resultaten. Zelfde idee als select, limit en skip bij DummyJSON in Lab 1.

D. Permissies: wie mag wat zien?

Elke Graph-call vereist een permissie (scope) — Graph Explorer vraagt daar bij het inloggen expliciet toestemming voor. Bekijk het tabblad "Modify permissions" naast je request: daar zie je welke permissie bij deze call hoort (bijvoorbeeld Mail.Read voor stap 4, Calendars.Read voor stap 5).

E. De opdracht: persoonlijke werkdagassistent

Een medewerker wil in één oogopslag zien: de eerstvolgende agenda-afspraken, de laatste e-mails en recente OneDrive-bestanden. Je hebt de drie requests van onderdeel C al — beantwoord er nu deze vragen bij, per endpoint:

1. Welk endpoint gebruik je, en welke HTTP-methode?
2. Welke permissie hoort erbij (zie het tabblad "Modify permissions")?
3. Welke velden komen terug, en welke zijn voor deze assistent relevant?
4. Welk privacyrisico zit er in de volledige response — en hoe beperk je dat met $select?

// accessToken komt uit een eerdere inlogstap (Graph Explorer toont 'm onder "Access token")
const response = await fetch(
  "https://graph.microsoft.com/v1.0/me/events?$top=5&$select=subject,start,end",
  { headers: { Authorization: `Bearer ${accessToken}` } }
);

if (!response.ok) {
  throw new Error(`Graph-request mislukt: ${response.status}`);
}

const data = await response.json();
console.log(data.value);

6 vragen · kies per vraag één antwoord en klik daarna op Nakijken

Nog een echte API — nu in code in plaats van in Postman

Tot nu toe stuurde je requests met de hand in Postman. Maar precies datzelfde patroon gebruikt een app ook, alleen dan automatisch in code. Om dat te laten zien pakken we een andere publieke API: FreeToGame — een gratis API die een lijst van free-to-play games teruggeeft. Geen sleutel, geen login: gewoon een GET.

De response is een array van games — elk met een title, genre, thumbnail, game_url en meer:

[
  {
    "id": 540,
    "title": "Fortnite",
    "genre": "Shooter",
    "platform": "PC (Windows)",
    "publisher": "Epic Games",
    "thumbnail": "https://www.freetogame.com/g/540/thumbnail.jpg"
  },
  ... honderden games
]

Hetzelfde patroon, nu met fetch()

In JavaScript haal je die data op met fetch() — de code-variant van op Send klikken in Postman:

// Stuur het GET-verzoek en wacht op de response
const response = await fetch("https://www.freetogame.com/api/games?platform=windows");

// Zet de JSON-response om naar een bruikbare lijst
const games = await response.json();

console.log(games[0].title); // bijv. "Fortnite"

Nog een voorbeeld: landgegevens combineren

Dezelfde fetch()-aanpak, nu met een herkenbaardere zakelijke case: een klantregistratiesysteem dat automatisch landgegevens aanvult zodra iemand een land intypt. De REST Countries API geeft per land onder meer hoofdstad, regio, inwonertal, talen en valuta terug — geen sleutel nodig.

Handige publieke API's om zelf te proberen

Wil je verder oefenen? Deze API's zijn gratis en werken prima in Postman. De meeste hebben geen sleutel nodig — plak de URL en klik op Send (of hieronder op Uitvoeren).

Om te bewaren — alles van vandaag op één plek

De vier methods

Voorbeeld uit de praktijk: een sociaal netwerk gebruikt GET om berichten te tonen, POST om een nieuw bericht te plaatsen, PUT/PATCH om het te wijzigen en DELETE om het te verwijderen — precies de vier CRUD-acties.

Statuscodes die je moet kennen

Het eerste cijfer verraadt de familie: 2xx gelukt · 3xx doorverwezen · 4xx de fout zit aan jouw kant · 5xx de fout zit bij de server.

Let op: een 200 betekent alleen dat het technisch lukte — controleer altijd óók de response-body of je echt de juiste gegevens terugkreeg.

DummyJSON-endpoints van vandaag

Werkt je request niet? Loop dit systematisch af

De snelste manier om een kapot request te repareren is stap voor stap controleren — in deze volgorde: