Hoe maak je een API met Express.js?

Een API maken is makkelijker dan je denkt en vereist niet zo veel tijd. Voor diegene die snel een opfrisser nodig hebben is dit een goede artikel die je kort en vlot uitlegt hoe je direct jou API kunt bouwen.

Vereisten

• Node.js
• IDE (Visual Studio Code word in het voorbeeld gebruikt)

Als voorbeeld gaan we de 'Mayor-Capitals-API' bouwen. Hierin zetten we de Data van verschillende Grote hoofsteden in de Wereld.

Start

Maak een Mapje aan op de locatie waar je je API gaat maken. Er komen namelijk een aantal andere bestanden bij, dus om het overzichtelijk te houden is het slim om alles in een map te hebben.

Maak in deze map een JavaScript document aan. In dit geval noem ik hem 'main.js' maar het maakt in principe niet uit. Je kan dit heel makkelijk doen door een tekstbestand aan te maken en vervolgens .txt te vervangen naar de .js extentie.

Hierna krijg je een melding waarbij je op 'Ja' kan drukken.

Open het bestand in je IDE, in deze voorbeeld maak in gebruik van 'Visual Studio Code'. En klik vervolgens op 'Terminal' en daarna op 'New Terminal'.

Wanneer de terminal is geopend maak je vervolgens een 'package.json' bestand aan door in je terminal het volgende commando uit te voeren;

npm init

Vervolgens krijg je een aantal vragen. In deze voorbeeld laten we die leeg om tijd te besparen. Deze vragen kan je leeg laten door op 'Enter' te drukken.

Uiteindelijk word er gevraagd om de configuratie te bevestigen. Druk vervolgens weer op 'Enter'.

Nu zie je dat er naast onze aangemaakte bestand er een nieuwe bestand bij is gekomen. De 'package.json' bestand.

In het kort; de 'package.json' bestand zorgt ervoor dat je verschillende modules kan opslaan doormiddel van de 'Node Package Manager'. In principe houd deze bestand alle modules bij die je bij je project wil hebben zodat je in een opslag kan zien uit welke modules je project bestaat en welke versienummer elke module heeft.

Uitgebreid weten hoe je NPM kan gebruiken? Deze artikel legt het simpel en uitgebreid uit!

Nu kunnen we onze eerste Module installeren !

Express.js

Installeer Express doormiddel van het volgende commando;

npm install express --save

Na een aantal seconden zie je dan het volgende;

Om te bevestigen of Express daadwerkelijk is geinstalleerd kan je kijken in het 'Package.json' bestand.

Yess! Hij staat onder 'dependencies'.

Nu we alles hebben geconfigureerd en geinstalleerd kunnen eindelijk beginnen aan het 'creëren van de API'.

Ontwikkelen van de API

Ga weer terug naar je JavaScript bestand, in dit voorbeeld heb ik hem 'Main.js' genoemd. En maak drie constante variables aan.

const express = require('express')
const app = express()
const PORT = 8000

De eerste variable (express) laat weten dat we de 'Express' module willen importeren. De tweede variable (app) laat weten dat we de module willen gebruiken. En bij de derde variable laten we weten op welke port we gaan luisteren naar 'requests'.

Nu kunnen we onze eerste stukje Data gaan invoeren die we beschikbaar willen stellen in de API. Aangezien onze API Data wil voorzien van verschillende Hoofdsteden over de hele wereld lijkt het me een goed idee om te beginnen met 'Amsterdam' en 'Parijs'.

Laten we eerst een lege Object maken genaamd 'hoofdsteden';

const hoofdsteden = {

};

Mooi. Laten we nu binnen de 'hoofdsteden' object, twee nieuwe Objects maken namelijk; Amsterdam en Parijs.

const hoofdsteden = {
    'amsterdam':{

    },
    'parijs':{

    }
};

Dit begint er al iets meer op te lijken! Laten we nu wat Data toevoegen aan de Objects. Laten we het Land waar de stad zich bevind, Oppervlakte en Burgemeester toevoegen aan elke Object.

const hoofdsteden = {
    'amsterdam':{
        'Burgemeester': 'Femke Halsema',
        'Land': 'Nederland',
        'Oppervlakte': '219.3 km²'
    },
    'parijs':{
        'Burgemeester': 'Anne Hidalgo',
        'Land': 'Frankrijk',
        'Oppervlakte': '105.4 km²'
    }
};

Top! We hebben onze eerste Data toegevoegd. Nu moeten we alleen nog configureren dat de juiste Data word teruggeven zodra de gebruiker een 'request' maakt. Dit doen we doormiddel van de .get method.

De standaard stukje code die je hiervoor gaat zien is het volgende;

app.get('/', (request, response) => {

})

Hierbij word onze 'app' aangeroepen en plakken we de '.get()' method erachter om te laten weten dat we willen luisteren naar bepaalde 'requests' die een gebruiker maakt. We hebben als twee parameters request en response gegeven. Hierbij laten we weten op basis van welke request we welke response gaan geven.

Ik heb als eerste .get() een '/' ingevoerd. Dit betekent dat de API gaat luisteren naar verzoeken die naar een '/' oftewel verzoeken naar de 'Home Pagina'. Hierbij geven we als antwoord (response) nattuurlijk onze 'index.html'.

Dit doen we door een response toe te voegen aan de body van deze functie;

app.get('/', (request, response) => {
    response.sendFile(__dirname + '/index.html')
})

achter de response hebben we de .sendFile() method toegevoegd om te laten weten dat we een bestand teruggeven als 'Response'.

Om te reageren met een 'index.html' moeten we hem nattuurlijk wel aanmaken.

Klik op de 'New File' icoontje en noem het bestand vervolgens 'index.html'. Het fijne aan Visual Studio Code is dat het bestandje gelijk word aangemaakt in de Directory waar je je momenteel bevind. Ook word automatisch gelijk het nieuwe bestand geopened.

door 'html' te typen in het lege 'index.html' bestand zie je gelijk drie opties verschijn. Selecteer hierbij de tweede optie. Dit zorgt ervoor dat onze 'index.html' bestand gelijk word voorzien van alle standaard elementen, zodat we dit niet hoeven te doen. Dit word ook wel een 'boilerplate' genoemd.

Hierbij verander ik alleen de 'title' om de naam van de project te weergeven. En heb ik een welkomstbericht toevoegd doormiddel van de 'h1' element.

Nu gaan we verder naar het reageren op API Requests. Hier maken we weer gebruik van de .get() method.

Door het gebruik van 'Query Parameters' kunnen we wat gerichter luisteren naar wat de gebruiker nou echt wil.

app.get('/api/:hoofdstad', (request, response) => {

})

Zoals je in de code hierboven ziet, luisteren we naar de request '/api/:hoofdstad'. Maar in dit geval gaan we de Query Parameter 'hoofdstad' vervangen door de stad die de gebruiker heeft gekozen.

Dit doen we door een variable aan te maken die de keuze van de gebruiker opslaat.

app.get('/api/:hoofdstad', (request, response) => {
    const gekozenHoofdstad = request.params.hoofdstad.toLowerCase()
})

De keuze van de gebruiker hebben we opgeslagen in de variable genaamd 'gekozenHoofdstad'. En de ingevoerde tekst van de gebruiker hebben we doormiddel van de 'toLowerCase()' method automatisch omgezet naar lowercase letters.

Nu kunnen we een 'if-statement' maken die evalueert of de 'gekozenHoofdstad' in onze API voorkomt, zoniet dan laten we de gebruiker dat weten.

app.get('/api/:hoofdstad', (request, response) => {
    const gekozenHoofdstad = request.params.hoofdstad.toLowerCase()

    if (hoofdsteden[gekozenHoofdstad]){
        response.json(hoofdsteden[gekozenHoofdstad])
    }
})

Dus als de 'gekozenHoofdstad' voorkomt in de 'hoofdsteden' object. Geef dan als response de 'gekozenHoofdstad' in een JSON Format.

Laten we nog een object toevoegen aan onze 'hoofdsteden' object zodat we ook een foutmelding kunnen geven. De object is precies hetzelfde als de andere steden die we al hebben. Maar nu vervangen we de waardes voor 'onbekend' zoals in het voorbeeld;

const hoofdsteden = {
    'amsterdam':{
        'Burgemeester': 'Femke Halsema',
        'Land': 'Nederland',
        'Oppervlakte': '219.3 km²'
    },
    'parijs':{
        'Burgemeester': 'Anne Hidalgo',
        'Land': 'Frankrijk',
        'Oppervlakte': '105.4 km²'
    },
    'onbekend':{
        'Burgemeester': 'onbekend',
        'Land': 'onbekend',
        'Oppervlakte': 'onbekend'
    }

};

Nu kunnen we bij onze if-statement een 'else' toevoegen die de 'onbekend' object teruggeeft zodra een gebruiker een verzoek naar een stad die niet in onze API zit.

app.get('/api/:hoofdstad', (request, response) => {
    const gekozenHoofdstad = request.params.hoofdstad.toLowerCase()

    if (hoofdsteden[gekozenHoofdstad]){
        response.json(hoofdsteden[gekozenHoofdstad])
    } else {
        response.json(hoofdsteden['onbekend'])
    }
})

Mooi, onze API is bijna klaar! We moeten er nog alleen voor zorgen dat de API gaat luisteren naar de verzoeken van de gebruikers. Dit doen doormiddel van de .listen() method.

app.listen(PORT, () => {
    console.log(`De server is nu opgestart op poort ${PORT}`)
})

Zoals in de voorgaande methods in de syntax bijna hetzelfde. Ook laten we nu een console.log achter om te herinneren op welke poort de server aan het draaien is.

Om de server te starten open je weer de terminal en ga je naar de locatie toe waar je 'main.js' bestand is en voer je de volgende commando uit;

Als je je JS bestand een andere naam hebt gegeven vervang je 'main.js' nattuurlijk met de naam die je gegeven hebt.

node main.js

Vervolgens moet je het volgende te zien krijgen;

Onze server is up and running!!! Dit kunnen we zien door twee indicatoren. Ten eerste zien we de console bericht die we in het programma geschreven hebben. En ten tweede zien we dat de 'Cursor' als het waren bevroren is.

Om de API nu te testen gaan we naar de browser en vullen we het volgende in;

'localhost:' met erachter de poort waarop de server te vinden is, in ons geval '8000'

Top!! We hebben de homepagina gekregen. Laten we nu een Query parameter toepassen. Laten we beginnen met amsterdam.

http://localhost:8000/api/amsterdam

Zoals je ziet krijgen we hier een de gegevens van Amsterdam in een JSON Format.

Maar wat nou als we een stad vragen die niet in onze API zit zoals 'Berlijn'?

Hierbij krijgen we weer nieuwe gegevens in een JSON Format, maar in dit geval krijgen we de object genaamd 'onbekend' terug die we toegevoegd hebben bij de 'else' statement!

Je bent nu in staat om API's te ontwikkelen met behulp van Express.js! Maar hopelijk heeft deze artikel je ook een beter beeld gegeven over hoe simpel een API eigenlijk is. Het klinkt uitdagend en complex. (in sommige gevallen is dat ook zo)

Maar zodra je bij het fundament begint is het eigenlijk heel erg simpel. Veel succes ;)