Wat is een API?

Waarschijnlijk ben je benieuwd naar wat een API is, anders was je nu niet dit artikel aan het lezen. Hier krijg je een makkelijke uitleg over een API. We gaan kijken naar 3 voorbeelden van API’s en tot slot zie je een voorbeeld van hoe je een API gebruikt. Lees lekker verder!

API uitleg

API staat voor “Application Programming Interface”. Een API maakt communicatie mogelijk tussen verschillende (software) applicaties/programma’s. Door een API hoef je niet te weten hoe een applicatie werkt en toch kan je ermee communiceren.

Restaurant

Een simpel voorbeeld is als je iets bestelt in een restaurant. Stel dat je in een Grieks restaurant zit met je familie en je wil wat bestellen. Eerst bekijk je de menukaart en dan maak je de keuze om Gyros te bestellen.

De ober komt en je geeft je bestelling door aan de ober. De ober ontvangt jouw bestelling en geeft dit door aan de keuken. Je weet niet wat er allemaal in de keuken gebeurt. Wat je wel weet, is dat je (lekkere) Gyros krijgt.

Als de keuken klaar is, wordt de ober weer ingelicht. De ober brengt de Gyros naar je toe, zodat je lekker kan smullen. De communicatie tussen applicaties door middel van een API komt op hetzelfde neer.

Je bestelt Gyros en krijgt dat ook. Je weet niet wat er allemaal in de keuken gebeurt en je hoeft dit ook niet te weten, als je maar je bestelling krijgt.

Communicatie tussen (software) applicaties/programma’s

Laten we als voorbeeld gaan kijken naar 2 applicaties, namelijk applicatie A en applicatie B. Applicatie A is een website met informatie over Frankrijk en applicatie B heeft een “Weerbericht” API.

Applicatie A heeft een artikel op de website staan over Parijs. In dat artikel wil applicatie A graag ook de huidige temperatuur van Parijs weergeven aan de bezoekers.

Hiervoor moet applicatie A de API van applicatie B gebruiken. Elke keer bij het laden van de pagina, van het artikel over Parijs, stuurt applicatie A een verzoek aan de API van applicatie B om de huidige temperatuur van Parijs op te halen.

Applicatie B ontvangt dit verzoek en verwerkt het. Applicatie A heeft geen idee hoe applicatie B werkt, maar wacht alleen op het antwoord. Het is ook niet nodig om te weten hoe de API op de achtergrond werkt, als je maar een antwoord krijgt waarin de temperatuur van Parijs staat. Applicatie B zal het antwoord sturen naar applicatie A.

Er zijn bepaalde standaard formaten, zodat het antwoord begrijpelijk is voor iedereen. Meer daarover in “Meest populaire API formaten”. Applicatie A heeft het antwoord ontvangen en gaat het formaat ontleden, om alleen de temperatuur te krijgen van Parijs.

Tot slot voegt applicatie A de temperatuur toe aan een HTML element, zodat het mooi op de website staat weergeven. Dit lijkt een heel proces, maar het gebeurt allemaal in een seconde.

In “Voorbeeld van hoe je een API gebruikt” zal het bovenstaande ook duidelijker voor je worden, als het nu nog niet helemaal duidelijk is.

Soorten API’s

Er zijn verschillende soorten API’s. Hieronder staan de meest bekende op een rijtje:

• Open API

Iedereen heeft toegang tot deze API. Er zitten geen beperkingen op.

• Partner API

Deze API mag niet door iedereen gebruikt worden. Er zitten bepaalde rechten op om toegang te krijgen tot de API.

• Internal API

Alleen interne systemen hebben toegang tot de API. Bedrijven gebruiken het vaak om hun diensten en/of producten te verbeteren door mensen en teams binnen het bedrijf zelf.

Meest populaire API formaten

Er zijn standaard API formaten die het communiceren makkelijker maken. Stel dat je een API gebruikt en een formaat krijgt in een response die je helemaal niet kent. Dan moet je gaan uitzoeken hoe je dit formaat kan gebruiken en of er überhaupt wel in code mee te werken valt.

Dit is natuurlijk geen doen, als er allemaal verschillende formaten zijn. Tegenwoordig is JSON het meest populaire formaat en daarna komt XML. We gaan kijken hoe beide formaten eruitzien met een zelfgemaakt voorbeeld:

• JSON

{
  "id": 1,
  "stad": "Parijs",
  "temperatuur": 21,
  "wijk": [
    "Les Halles",
    "Gaillon",
    "Notre-Dame"
  ],
  "inwoners": 2141000
}

• XML

<?xml version="1.0" encoding="UTF-8" ?>
<root>
  <id>1</id>
  <stad>Parijs</stad>
  <temperatuur>21</temperatuur>
  <wijk>Les Halles</wijk>
  <wijk>Gaillon</wijk>
  <wijk>Notre-Dame</wijk>
  <inwoners>2141000</inwoners>
</root>

Voorbeelden van 3 echte API’s

Als het goed is, heb je nu een beter beeld over API’s. Het is leuk om eens te kijken naar voorbeelden van echte API’s, zodat je een beeld hebt welke API’s er zijn.

Tegenwoordig is er van vrijwel alles wel een API te vinden. Je weet al dat er “Weerbericht” API’s zijn. Hieronder 3 andere voorbeelden.

Flauwe vader grappen

We beginnen gelijk met een grappig voorbeeld. Er is namelijk een API met “Dad jokes”. Met deze API kan je willekeurige “Dad jokes” ophalen en gebruiken in bijvoorbeeld je website of applicatie.

In het volgende hoofdstuk gaan we deze API als voorbeeld gebruiken. Wil je zelf ermee gaan stoeien? Hier staat een duidelijke handleiding over hoe je de API kan gebruiken.

NASA

Dit is een serieuzer voorbeeld. NASA heeft ook een eigen API! Hier kan je onder andere data van kometen, metingen van Mars en real-time afbeeldingen van de aarde ophalen.

Als je geïnteresseerd bent in API’s, is het zeker leuk om eens een kijkje te nemen bij de NASA API.

WordPress

Meer dan 35% van de websites wereldwijd en ook ProgrammeerPlaats is met WordPress gemaakt. Daarom is het interessant om het over de WordPress API’s te hebben.

We gaan het niet over alle API’s van WordPress hebben, anders zijn we volgende week nog bezig. Hier een paar voorbeelden van wat je met WordPress API’s kan doen:

• Berichten en pagina’s ophalen
• Shortcodes maken
• Widgets maken
• Koppelingen maken met andere applicaties

Een WordPress website heb je binnen een korte tijd al gemaakt en het is makkelijk om te onderhouden. Het is erg gaaf om een eigen (WordPress) website te hebben!

Programmeurs kunnen losgaan met de mooie API’s van WordPress.

Voorbeeld van hoe je een API gebruikt

We gaan de “Daddy jokes” API als voorbeeld gebruiken. Elke keer als deze pagina laadt, wordt er hieronder een willekeurige “Daddy joke” opgehaald:

Daddy joke:

Als je deze pagina ververst (F5), zal je zien dat er andere “Daddy joke” staat.

Het is handig om de handleiding van de API goed door te nemen, als je er gebruik van wil maken. Met jQuery sturen we een GET request naar de API. Zo ziet de code eruit:

// Uitvoeren als DOM (Document Object Model) ready is
$(function() {
  getJoke();
});

// API waarin joke staat ophalen met een ajax GET request
function getJoke() {
  $.ajax({
    headers: {
      Accept: "application/json"
    },
    url: "https://icanhazdadjoke.com/",
    success: addToElement,
    error: errorMessage
  });
}

// De joke uit JSON response halen en toevoegen aan HTML element
function addToElement(response) {
  $("#addJoke").append(" " + response["joke"]);
}

// Bericht wanneer er iets fout gaat in de console
function errorMessage() {
  console.log("Er gaat iets mis met het opvragen van de API.");
}

Voor jQuery moet je ook een jQuery file downloaden en inladen in je HTML bestand. In je HTML bestand plaats je ook een HTML element met addJoke als id, zodat de “joke” wordt toegevoegd aan het juiste HTML element, zoals aangegeven in de bovenstaande code.

Het HTML bestand ziet er zo uit:

<!DOCTYPE html>
<html>
  <head>
    <title>API voorbeeld</title>
  </head>
  <body>
    
    <p id="addJoke">Daddy Joke:</p>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/apiExample.js"></script>
  </body>
</html>

Verander wel de src’s naar het juiste pad, waarin jij de JavaScript bestanden hebt opgeslagen. Wil je het uitproberen, maar heb je nog niet zoveel verstand van HTML en JavaScript? Lees dan eerst “HTML leren” en “JavaScript leren”. jQuery is een JavaScript library. Als je JavaScript begrijpt, ga je jQuery ook begrijpen met wat oefening.

Voor degenen die deze API willen uitproberen in hun WordPress website, is “JavaScript toevoegen aan je WordPress website” interessant om te lezen.

Heb je nog niet zoveel verstand van programmeren in het algemeen? Dan is “Snelcursus Leren Programmeren” echt een aanrader.

Hopelijk heb je nu een beter beeld over API’s en ben je enthousiast geworden om zelf aan de slag te gaan.

Heb je nog vragen en/of opmerkingen? Laat dan hieronder een reactie achter of neem contact op.