Ga van start met Node.js

Uitleg backend, frontend en API

Backend

De backend omvat alles wat zich op de server afspeelt. Denk aan de opslag van gegevens, de logica achter functies en processen, en de structuur die bepaalt hoe een website of webapplicatie werkt. Deze code en data zijn niet rechtstreeks zichtbaar of toegankelijk voor bezoekers. De backend vormt als het ware de motor die alles op de achtergrond draaiende houdt.

Frontend

De frontend is alles wat een bezoeker ziet en waar hij of zij mee kan interageren. Dit omvat het ontwerp, de opmaak, knoppen, formulieren — kortom, de volledige gebruikerservaring. De frontend is een visuele weergave van wat de backend aanlevert. Beide delen communiceren voortdurend met elkaar: de backend levert data, de frontend toont het op een gebruiksvriendelijke manier.

API

Een API (Application Programming Interface) vormt de brug tussen backend en frontend. Ze zorgt ervoor dat data uit de backend op een gestandaardiseerde manier beschikbaar wordt voor de frontend. Dankzij API’s kunnen verschillende systemen, applicaties en zelfs apparaten met elkaar communiceren. Zo combineer je eenvoudig informatie uit meerdere bronnen tot één samenhangende website of webapplicatie.

Stap 1. Express toevoegen als dependency

In deze eerste stap voegen we het framework Express toe als dependency. Je kunt een dependency vergelijken met een ingrediënt dat nodig is om een bepaald resultaat te bereiken.

Denk aan het maken van een spiegelei: zonder een pan, een ei en een spatel kom je nergens. Het spiegelei is afhankelijk van deze onderdelen — ze zijn dus jouw dependencies.

Op dezelfde manier werkt het bij software. Een dependency levert functionaliteit die jouw applicatie nodig heeft om bepaalde processen uit te voeren. Door Express toe te voegen, voorzie je je Node.js-app van een efficiënt framework dat de basis legt voor routing, request handling en andere belangrijke taken.

Package.json genereren

1. Open Visual Studio Code.

2. Klik op File en daarna op Open Folder… om de map te selecteren waarin je project komt te staan.

3. Selecteer de map waarin je project komt te staan en klik op Open.

4. Ga in VS Code naar het menu Terminal → New Terminal.

5. Een terminalvenster opent onderin je scherm. Hier kun je alle Node.js-commando’s uitvoeren.

6. Typ het volgende commando in de terminal en druk op Enter:

   npm init

   7 .npm zal je een aantal vragen stellen, zoals: naam van het project, versie, omschrijving en entry point. Je kunt alles invullen of gewoon Enter drukken om de standaardwaarden te accepteren.

   8. Wil je snel een package.json aanmaken met standaardwaarden? Gebruik dan:

   npm init -y

Hiermee maakt npm direct een bestand aan zonder dat je vragen hoeft te beantwoorden.

9. Na het aanmaken zie je in je projectmap een bestand package.json staan. Open het om te zien welke informatie is toegevoegd. Vanaf nu kun je dependencies installeren en scripts definiëren voor je project.

Stap 2. APi code

In deze stap schrijven we de API-code die de communicatie tussen de backend en frontend verzorgt, met één specifieke route. Een route definieert het pad waarmee bepaalde gegevens uit de API kunnen worden opgevraagd en kan meerdere eindpunten bevatten. Welk eindpunt wordt gebruikt, hangt af van het type verzoek dat wordt ingediend. Een API kan doorgaans via meerdere routes worden benaderd, waardoor verschillende soorten gegevens beschikbaar zijn.

De API schrijven

1. Blijf in Visual Studio Code. Klik met de rechtermuisknop op een lege plek in het Explorer-paneel aan de linkerkant van het scherm. Kies New File… en geef het bestand de naam 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();

Stap 3. Applicatie beschikbaar maken

In deze stap zorgen we ervoor dat onze API toegankelijk wordt. Dit doen we met Passenger, een webapplicatieserver die onder andere HTTP-verzoeken voor Node.js-applicaties afhandelt.

Passenger koppelt de in stap 2 aangemaakte API-map automatisch aan de public_html-map van het gekozen domein. Hierdoor wordt het app.js-bestand uitgevoerd wanneer een verzoek binnenkomt. Tegelijkertijd voegt Passenger de benodigde instellingen toe aan het .htaccess-bestand, zodat alles correct functioneert.

Stap 4. API-code uploaden

Ten slotte uploaden we de API-code naar het hostingpakket, zodat alles op de backend.

1. Open op je computer de map waarin de API-code staat. Selecteer de bestanden package-lock.json, package.json en app.js. Klik vervolgens met de rechtermuisknop en kies Comprimeer (of de optie die op jouw systeem beschikbaar is om een ZIP-bestand te maken).
2. We gaan nu het gemaakte Archief.zip-bestand met daarin onze applicatie uploaden, dit kun je doen via ftp.
3. Via de filemanager klik je 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.