In deze demo maak je een API waarmee je een todo lijstje kan maken. Je gebruikt hiervoor Express, FileSystem, SQLlite3, Middleware en we eindigen met het opzetten van ESLint.
We doorlopen verschillende stappen:
- Stap 1: Opzetten van je programmeeromgeving
- Stap 2: TodoFile verder uitwerken
- Stap 3: Maak je API endpoints
- Stap 4: Vervang wegeschrijven naar je filesystem met SQLite
- Stap 5: Implementeer middleware
- Final: Voeg ESLint toe
We doorlopen volgende stappen:
- Installeer Express JS
- Installeer JSON bodyparser middleware
- Installeer dotenv en maak een .env bestand aan
- Maak een Express JS applicatie aan en gebruik de JSON bodyparser als middleware.
- Haal het poortnummer van je server (6001) uit het dotenv bestand en gebruik deze voor het lanceren van je Express applicatie.
- Maak een eigen logging systeem:
- Installeer Chalk
- Lees de documentatie van Chalk, je kan met deze bibliotheek kleurtjes geven aan je fouten in de console.
- Maak in een
/src/lib/
folder de fileLogger.js
. Dit is een ES6 module met daarin 6 verschillende functies:info()
: geeft blauwe tekst in de consolestressedInfo()
: geeft tekst met een blauwe achtergrond in de consoleerror()
: geeft rode tekst in de consolestressedError()
: geeft tekst met een rode achtergrond in de coonsolewarning()
: geeft oranje tekst in de console (lees de documentatie zodat je weet hoe je dit moet doen)stressedWarning()
: geeft tekst met een blauwe achtergrond in de coonsole (lees de documentatie zodat je weet hoe je dit moet doen)json()
: zorgt dat een JSON object wordt uitgeschreven in de console als tekst. De tekst zelf staat in een grijze kleur.
- We starten in deze stap met het opslaan van je
todo.json
bestand in eendata
folder vanaf je root.- Maak in je
/src/lib
folder een fileTodoFile.js
. Je maakt hierin een klasse met verschillende functies (zie volgende stappen). Voor nu volstaat:save()
: dit is een functie waarmee we een JSON bestand wegschrijven in jedata
folder. Voor het aanmaken, wijzigen en wegeschrijven van bestanden gebruik je de File System module van Node.js.
- Maak in je
- Maak in je Express applicatie een test-functie (bijv.
testToDos
) om een lege array weg te schrijven met daarin een object:[{ success: "success!" }]
Werk verder op het bestand TodoFile.js
dat je maakte in stap 1:
- Schrijf een
get()
functie in TodoFile.js om je array op te halen - Installeer uuid
- Maak een nieuw todo item en bewaar via een
add(description)
functie. Een todo item heeft een beschrijving en een id:{ "id": "9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6", "description": "Mijn eerste todo item" }
- Gebruik voor het genereren van je id het pakket
uuid
en maak een v4 id. - Maak een
update(id, description)
functie aan om een todo te wijzigen. Gebruik de id om je todo op te zoeken in je bestand. - Maak een
delete(id)
functie aan om een todo te verwijderen. Gebruik de id om je todo op te zoeken in je bestand. - Zorg dat je overal error handling toevoegt met je de
Logger
die je maakte in stap 1 zodat je weet waar er zich een probleem voordoet. - Test de functies met de test-functie die je maakte in Stap 1.
- Maak in je
src
-folder een actions folder, met daarin een folder voor je todo-acties. - Maak een
crudTodo.js
bestand, met daarin je CRUD (Create, Read, Update & Delete) bewerken die binnenkomen en buitengaan in je API. Detodo
parameter in onderstaande functies slaat op een instantie van je ToDoFile:getTodos(todo, request, response)
: voor het ophalen van je todosaddTodo(todo, request, response)
: voor het toevoegen van een todoupdateTodo(todo, request, response)
: voor het updaten van een tododeleteTodo(todo, request, response)
: voor het verwijderen van een todo
- Zorg dat je je fouten goed afhandelt en je, wanneer het fout loopt, de juiste http response code stuurt naar je client.
- De data die binnenkomt via je API moet voldoen aan een aantal voorwaarden. Maak daarom een
parseTodo
functie in een afzonderlijk bestand waarmee je controleert of die data voldoet:- Er moet een
todo
aanwezig zijn. - In een
todo
moet een description zitten.
- Er moet een
- Maak een functie waarmee je de verschillende endpoints registreert in je Express app.
- Maak in je actions folder een
registerTodoEndpoints.js
met daarin een functie die aan je Express app volgende endpoints toevoegt:- POST "/todos"
- GET "/todos"
- PUT "/todos"
- DELETE "/todos"
- Maak in je actions folder een
- Spreek de
registerTodoEndpoints([Instantie Express App])
aan in jeindex.js
-bestand van je applicatie. - Gebruik Postman om je API te testen.
- Installeer SQLite.
- Installer Knex.
- Maak een nieuwe folder
db
aan in de root van je applicatie. - Maak een SQLite database aan in je nieuwe folder: je geeft een leeg bestand de naam
todos.sqlite3
. - Download en installeer de SQLite Browser.
- Met de SQLite Browser kan je je
todos.sqlite3
openen en een database schema maken:- Maak een tabel
todos
. - Definieer twee velden in je tabel:
id
: deze is van het type INTEGER, kent geen Non Nullable fields, is de Primary Key en incrementeert automatisch.description
: deze is van het type TEXT.
- Maak een tabel
- Schrijf je aanpassingen weg naar je bestand door te klikken op
Write Changes
. - Maak een nieuw bestand aan in je
db
-folder:knexTodos.js
. - Knex is een manier om makkelijk(er) te communiceren met databases zoals MSSQL, MySQL, ... en ook SQLite3. De library laat je toe om op een makkelijke en begrijpbare manier data toe te voegen, te wijzigen, te verwijderen, op te halen, etc.
- Maak in je nieuwe
knexTodos.js
een functie die eenknex
-object teruggeeft, geconnecteerd aan jouw SQLite3 database. - Maak in je
lib
-folder een nieuw bestandTodoDb.js
en maak verschillende functies aan die gelijkaardig zijn aan jeTodoFile.js
, met dit verschil dat je nu je data zal wegschrijven naar een SQLite3 database. Lees de documentatie van Knex erop na zodat je weet hoe je dit kan aanpakken. - Pas je endpoints aan zodat deze nu gebruik maken van
TodoDb.js
in plaats vanTodoFile.js
. - Je API zou op dezelfde manier moeten werken (zelfde HTTP methods) alleen wordt data nu naar je database geschreven.
- Met Express JS kan je middleware gebruiken en zelf maken.
- Maak in je
src
-folder een mapjemiddleware
aan. - Maak
auth
middleware waarmee je authenticatie simuleert. Gebruik hiervoor een eenvoudige boolean. - Maak een
todofilter
middleware die de binnenkomende data zal scannen op taalgebruik. - UITBREIDING: maak een afzonderlijk bestand in
data/filterdata.js
met daarin een lijst van woorden die een user niet mag gebruiken bij het sturen van zijn/haar todo item.
- Valideer en fix je code door ESlint te installeren (incl. airbnb styles) met:
npm install eslint eslint-config-airbnb-base --save-dev
.