How to create your own API endpoint - GiovanniKaaijk/weekly-nerd-1920 GitHub Wiki

Wat is een API

Een API maakt het mogelijk om verbinding te leggen met een andere applicatie. Via deze manier kan je data opvragen, versturen, verwijderen of wijzigen binnen een andere applicatie. Je hebt verschillende mogelijkheden om een API aan te roepen:

• POST (maak een nieuw iets aan met bepaalde data)
• GET (verkrijg data)
• PUT (maak of vervang een bepaald element)
• PATCH (update een element of pas dit aan)
• DELETE (verwijder een element)

Express

Voor dit voorbeeld zal ik gebruik maken van het Express framework. Express is het meest populaire Node framework. Een aantal functionaliteiten van Express zijn:

• Het aanmaken van routes binnen je applicatie
• Via Express kan je gebruik maken met view rendering templates zoals EJS of Pug om zo pagina's met data te serveren.
• Het instellen van een bepaalde port die nodig is om connectie te leggen met je applicatie.
• Het toevoegen van middleware tijdens requests.

Voor het maken van de API komt het eerste punt goed van pas.

De API

Voor het aanmaken van een API, gebruik ik in dit voorbeeld een object met data wat via de API opgevraagd moet kunnen worden, later kan je dit natuurlijk veranderen met bijvoorbeeld data uit een database. Voor het voorbeeld zal ik het volgende object gebruiken:

const myPerson = {
    age: '19',
    name: 'Giovanni',
    city: 'Amersfoort'
}

Om te beginnen moet er een server op de back-end worden aangemaakt, dit gaat via de volgende stappen:

1. Create a folder
2. npm init
3. npm install express

Vervolgens maak je een server.js aan in deze map en zorg je dat Express wordt geïmporteerd. Via app.listen wordt de app online gezet wanneer node de server zal starten, dit kan je doen via node server.js. Nu is de app bereikbaar via localhost:3000, dit zal echter nog niet laden, omdat er geen route is aangemaakt.

const express = require('express')
const app = express()
const port = 3000

app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`))

Om een route aan te maken, is app.get beschikbaar, wanneer de route in de get overeen komt met die van het request, wordt er een bepaalde functie uitgevoegd

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`))

Wanneer je nu naar localhost/3000 gaat, zal er Hello world in je browser verschijnen, vanaf hier is het weinig moeite om dit te veranderen naar een json response. Express heeft hier al een functie voor, namelijk res.json().

Om het object wat wij aan het begin hebben aangemaakt terug te geven als response, veranderen wij de code naar het volgende:

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => res.json({age: '19',name: 'Giovanni',city: 'Amersfoort'}))

app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`))

Om het response dynamisch te maken, veranderen wij het response naar een variabele, in plaats van een hard coded response.

const express = require('express')
const app = express()
const port = 3000
const myPerson = {
    age: '19',
    name: 'Giovanni',
    city: 'Amersfoort'
}
app.get('/', (req, res) => res.json(myPerson))

app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`))

Database

Een voorbeeld hoe je dit kan gebruiken om data uit een MongoDB database te halen is als volgt:

Je verandert de functie van het request naar een async functie, omdat je wilt wachten op het response vanuit de database. Vervolgens vraag je data op uit de database en voeg je deze toe in het response. Ook wil je nu dynamisch een user ophalen, dit gebeurt via de Express route, hier geef je nu een name aan mee. Dit name id kan je vervolgens ophalen via req.params.name.

app.get('/:name', async (req, res) => {
    await mongoDbClient.connect()
    const db = mongoDbClient.db('users')
    await db.collection('user').findOne({name: req.params.name})
    .then(data => {res.json(data)})
 })

Je zou de .then chain ook kunnen vervangen voor een promise of een try catch, dit ligt puur aan persoonlijke voorkeur.

Het eindresultaat

Wanneer wij nu de server aan zetten via node server.js, kunnen wij vanaf de front-end een fetch doen naar localhost:3000/Giovanni om de data uit de database te verkrijgen.

 fetch('localhost:3000/Giovanni')
    .then(res => res.json())
    .then(res => console.log(res))

Je zal zien dat het object nu in de console staat via de front-end, de API is gelukt.