Node.js-tutorial deel 1: backend en API!

Node.js is een schaalbare netwerktoepassing. Het is handig voor tools en scripts. Ook gebruik je zo niet meerdere programmeertalen en kan het de groei van je website aan. In een tweedelige tutorial neem ik je mee door de wondere wereld van APIs en Node.js bij Antagonist. Is je interesse gewekt? Laten we snel beginnen met het eerste deel!

Node.js-tutorial deel 2: frontend met React!
Klaar met het eerste deel? Ga verder met deel 2 van deze tutorial!

Node.js in het kort

Node.js is een softwareplatform, waarmee je aan de serverzijde applicaties bouwt. Het is gebaseerd op de programmeertaal JavaScript en gaat dieper dan bijvoorbeeld WordPress. Je maakt er zowel de grafische voorkant van je website mee (frontend) als de technische achterkant (backend). Bovendien laat je deze beide kanten informatie met elkaar uitwisselen. Zo heb je een schaalbare netwerktoepassing die meegroeit met jouw eisen en die van je bezoekers.

De backend, frontend en API

We gaan in het eerste deel aan de slag met de backend en een API (met behulp van Express). In het tweede deel bouwen we een frontend React-applicatie die met deze API gaat communiceren. Wel handig om te weten welk doel deze onderdelen hebben, dus dat volgt nu!

Backend

Een backend omvat alles wat op de server aanwezig is. Hierbij kun je denken aan de opslag voor gegevens, maar ook de structuur en logica achter de werking van een website. De meeste gegevens en code in de backend zijn niet toegankelijk voor bezoekers.

Frontend

Een frontend zorgt voor alles wat een bezoeker ziet en waar hij of zij interactie mee heeft. Wanneer je omschrijft hoe een website eruit ziet, benoem je vooral aspecten van een frontend. Het is een visuele weergave van de code die is gebouwd door een backend. De backend en frontend communiceren dus met elkaar. De verzonden en ontvangen data worden gebruikt om een webpagina weer te geven.

API

Met een Application Programming Interface (API) wordt de transformatie mogelijk van backend naar frontend. De API maakt dus de vertaalslag van de ene interface naar de andere. Daardoor kunnen allerlei applicaties en apparaten informatie met elkaar delen. Ideaal om van elkaar verschillende systemen toch met elkaar te laten communiceren om één website te maken.

De kok, eettafel en ober

Behoefte aan een meer eenvoudige uitleg? Persoonlijk vind ik het altijd goed te vergelijken met uit eten gaan. Kijk maar:

• De kok in de keuken is de backend.
• De gedekte tafel waaraan je zit, is de frontend.
• De ober die je bestelling opneemt, is de API.

Zonder de ober die het menu brengt, is een geslaagd etentje geen zekerheid. Alle gasten moeten dan zelf hun bestelling plaatsen bij de kok. Zomaar gerechten verzinnen, werkt echter niet. Misschien ontbreken de ingrediënten, is er geen grillpan of spreekt de kok alleen Frans (en jij niet). Wat nu?

Gelukkig hebben alle obers geleerd om op dezelfde wijze te communiceren. De obers zijn hierin dus de koppeling tussen de kok en wat er op tafel komt. Zij weten wat er op de menukaart staat, wat de werkwijze van de kok is en spreken dezelfde taal. Dit maakt het proces een stuk duidelijker, overzichtelijker en efficiënter.

Doel en benodigdheden

We maken een simpele toepassing die cijfers ophaalt vanuit de backend en ze toont in de frontend. In dit eerste deel genereren we een package.json-bestand bij aanvang. Dit bestand bepaalt onder andere welke packages onze applicatie nodig heeft en welke versies daarvan zijn vereist. Een package of pakket kun je gemakshalve vergelijken met een plugin. Om mee te doen met deze stappen, heb je het volgende nodig:

• Node.js
• Visual Studio Code
• Webhosting Plus of Pro

Stap 1. Express als dependency

Binnen de eerste stap voegen we het framework Express als dependency toe. Een dependency kun je zien als een ingrediënt. Zonder pan, ei en spatel wordt bijvoorbeeld een spiegelei maken lastig. Het spiegelei is letterlijk afhankelijk van de ingrediënten. De pan, ei en spatel zijn daarom dependencies. Ze bieden een werkwijze voor het afhandelen van onderliggende processen.

Package.json genereren

1. Start Visual Studio Code, klik op File en vervolgens op Open Folder…

2. Blader naar de locatie op je harde schijf waar je alle bestanden gaat onderbrengen. Maak een nieuwe map aan en noem het bijvoorbeeld ‘Node.js REST API Tutorial’. Selecteer de aangemaakte map en klik op Open.

Vraagt Visual Studio of je de auteur van de code vertrouwt?
Kies voor ‘Yes, I trust the author’. Je hebt het namelijk zelf aangemaakt en er is nog geen code aanwezig in de map.

3. Open nu een nieuwe terminal via Terminal → New Terminal. Deze opent automatisch op dezelfde locatie als de net geopende map.

4. Onderin beeld is nu het terminal-venster verschenen. Typ in dit venster het volgende commando. Daarmee genereer je een standaard package.json-bestand.

npm init -y

5. Nu installeer je het laatste benodigde package door het volgende commando uit te voeren:

npm i express

Zorg dat je Node.js hebt geïnstalleerd
Anders werken bovenstaande commando’s niet – zie benodigdheden.

Stap 2. API-code met één route

Bij deze volgende stap schrijven we voor de vertaalslag tussen de backend en frontend de API-code met één route. Een route biedt een specifiek pad om bepaalde informatie of gegevens uit een API te halen en kan meerdere eindpunten hebben. Welk eindpunt wordt gebruikt, hangt af van het ingediende verzoek. APIs hebben vaak veel verschillende routes, waarover de API kan worden benaderd. Wil je meer routes, check dan de Express routing-pagina.

De API schrijven

1. We blijven in Visual Studio Code. Klik met de rechtermuisknop op een lege plek in het explorer-paneel aan de linkerkant van het scherm. Kies vervolgens New File… en noem het bestand app.js. 

2. Voeg de volgende code toe voor een enkele API-route:

const express = require('express');
const app = express();

app.use(function(req, res, next) {
  next();
});

app.get('/api/cijfers', (req, res) => {
    res.send([1,2,3,7,8,9,10]);
});

app.listen();

Draait de API in productie? Dan krijg je hiermee de cijfers 1,2,3,7,8,9,10  terug, wanneer een browser of applicatie een GET-request stuurt naar jedomein.nl/api/cijfers (vervang ‘jedomein.nl’ met je eigen domein).

Stap 3. Applicatie beschikbaar maken

In de derde stap maken we de ruimte om onze API-code te plaatsen. Dit doen we met behulp van Passenger. Passenger is een webapplicatieserver die onder andere HTTP-verzoeken afhandelt voor Node.js-applicaties. Onder water maakt Passenger een koppeling tussen de in stap twee aangemaakte API-map en de public_html-map van het geselecteerde domein. Door deze koppeling wordt het app.js-script aangeroepen om uit te voeren. Daarmee wordt code bijgeschreven in het .htaccess-bestand.

Node.js-selector in DirectAdmin

1. Om je API beschikbaar te maken, gebruiken we de Node.js-selector in DirectAdmin. Klik op Create application en hanteer de volgende instellingen. Hierdoor word je applicatie ook meegenomen met de automatische backups.

• Application root | Geeft aan om welke map het gaat.
• Application URL | Dit is standaard URL van je website.
• Application startup file | Roept het app.js-script aan om uit te voeren.

2. Staat alles goed? Klik op Create om de applicatie automatisch te starten. Daarmee is de plek aangemaakt, waarnaar we onze API-applicatie gaan uploaden.

Stap 4. API-code uploaden

Ten slotte uploaden we de API-code naar het hostingpakket, zodat alles op de backend klaarstaat voor deel 2 van deze tutorial.

1. Open nu op je computer de map met de API-code. Daar selecteer je de bestanden package-lock.json, package.json en app.js. Klik op de rechtermuisknop en kies Comprimeer – of de voor jou beschikbare optie om te zippen.

2. We gaan nu het gemaakte Archief.zip-bestand met daarin onze applicatie uploaden. Hier zijn meerdere manieren voor, maar in dit voorbeeld gebruiken we Bestandsbeheer in DirectAdmin. 

Houd rekening met de bestandsgrootte
Via Bestandsbeheer in DirectAdmin kun je slechts één bestand tegelijkertijd uploaden van max. 10 MB. Wanneer je gecomprimeerde API groter is, werkt deze methode niet en zul je FTP moeten gebruiken. 

3. Open de map Domains en dan de map van van je domein. Open nu de map api – die heeft de Node.js-selector automatisch aangemaakt. Upload hier het Archief.zip-bestand naartoe.

3. Klik met de rechtermuisknop op het bestand en kies voor Extract om hem uit te pakken. Klik in het volgende venster ook op Extract. Daarmee is de API is nu geüpload.

4. Ga binnen de Node.js-selector in DirectAdmin weer terug naar Web applications en klik op het potloodje. 

5. De app start daarmee automatisch, maar is nog niet klaar voor gebruik. We missen de dependency Express nog. Stop de app door op de knop Stop app te klikken.

6. Scroll naar beneden en klik op de knop Run NPM Install. Hiermee worden alle benodigde dependencies uit het package.json-bestand op de server gedownload. 

7. Nu is de applicatie klaar voor gebruik en kunnen we hem weer opnieuw starten door op Start App te klikken.

Het resultaat tot nu toe

Wanneer je nu in je browser naar jedomein.nl/api/cijfers navigeert, stuurt je browser een zogenoemd GET-request naar de API. De API geeft dan de cijfers terug aan de browser en je browser laat deze cijfers vervolgens netjes zien. 

Bonustip: met het volgende JavaScript-commando kun je in je browser de API ook aanspreken.

fetch('https://voorbeeld.nl/api/cijfers').then(r => r.text()).then(t => console.log(t));

Onze API bevat een listener. Hierdoor blijft het script actief, zolang de Node.js Web Application draait binnen DirectAdmin. Zo blijft onze API continu bereikbaar. De API luistert naar de inkomende requests. Wanneer er een request binnenkomt om de cijfers op te halen, stuurt de API deze netjes terug.

Je API beveiligen

We hebben in dit blog niets aan authenticatie gedaan. Hierdoor is je API is nu publiekelijk toegankelijk. Het is echter verstandig om een veiligheidscheck te bouwen, voordat je de applicatie beschikbaar maakt. Er zijn veel authenticatie-opties voor Node.js. Zelf goed research doen over de beveiliging van je API, is dan ook zeker aan te raden. Let wel goed op, want authenticatie kan extreem ingewikkeld zijn en is sowieso sterk website-afhankelijk. Kom je er zelf niet uit, dan kun je hiervoor het best contact zoeken met een specialist. 

Klaar voor de volgende stap?

Je hebt nu geleerd wat een frontend, backend en API is. Ook heb je een eenvoudige API opgezet die cijfers ophaalt vanuit de backend en ze toont in de frontend. In deel 2 gaan we een frontend React-applicatie maken om met deze API te praten. Ik zie je daar!