Cursus app ontwikkelen met Node.js en React Native

Les 1 • De Node.js-omgeving opzetten

Installeert en configureert Node.js, npm en essentiële CLI-tools. Een correcte installatie voorkomt omgevingsfouten gedurende de cursus.

Les 2 • Projectstructuur en codeerconventies

Definieert mapindeling, naamgevingsconventies en linterregels voor een onderhoudbare codebase. Een consistente structuur vermindert de drempel voor teamprojecten.

Les 3 • De full-stackarchitectuur begrijpen

Brengt de relatie in kaart tussen een Node.js-backend en een React Native-frontend. Dit biedt het mentale model dat nodig is voor ieder volgend hoofdstuk.

Les 1 • De API testen en documenteren

Schrijft unit- en integratietests voor API-routes en genereert interactieve API-documentatie. Geteste en gedocumenteerde API's versnellen de frontendontwikkeling.

Les 2 • Authenticatie en autorisatie

Implementeert JWT-gebaseerde authenticatie en op rollen gebaseerde toegangscontrole voor cursisten en instructeurs. Beveiligde auth beschermt alle beveiligde API-routes.

Les 3 • Verbinding maken met een database

Integreert een relationele of documentdatabase om educatieve content en gebruikersvoortgang te bewaren. Studenten schrijven modellen en voeren CRUD-operaties uit.

Les 4 • RESTful API-endpoints ontwerpen

Past REST-principes toe om endpoints te ontwerpen voor cursussen, lessen en gebruikers. Een goed API-ontwerp zorgt voor een schone integratie met de React Native-frontend.

Les 1 • Gebruikersinvoer en formulieren verwerken

Bouwt gecontroleerde formuliercomponenten met TextInput, Switch en Picker. Het verwerken van invoer is essentieel voor inlog-, quiz- en zoekschermen.

Les 2 • Een herbruikbare componentenbibliotheek bouwen

Haalt algemene UI-patronen naar een gedeelde componentenbibliotheek met gedocumenteerde props. Herbruikbare componenten versnellen de schermontwikkeling in latere hoofdstukken.

Les 3 • Stylen met StyleSheet en Flexbox

Past de StyleSheet-API en het Flexbox-layoutmodel van React Native toe om componenten te positioneren en te dimensioneren. Consistente stylingpatronen voorkomen lay-outfouten op verschillende schermformaten.

Les 1 • React Hooks voor lokale status

Gebruikt useState, useReducer en useEffect om status op componentniveau en bijwerkingen te beheren. Deze hooks vormen de basis van alle functionele features in de app.

Les 2 • Offline-ondersteuning en lokale persistentie

Slaat kritieke gegevens lokaal op zodat cursisten content kunnen raadplegen zonder netwerkverbinding. Offline-mogelijkheid is een belangrijk onderscheidend kenmerk voor educatieve mobiele apps.

Les 3 • Globale status met de Context API

Implementeert een op Context gebaseerde opslag voor authenticatiestatus en gebruikersvoorkeuren. Context voorkomt het doorgeven van props door diep geneste schermbomen (prop drilling).

Les 1 • Authenticatiestroom en beveiligde routes

Render voorwaardelijk auth- of app-navigators op basis van de aanwezigheid van een JWT. Het beveiligen van routes voorkomt onbevoegde toegang tot cursuscontent.

Les 2 • Stack- en tab-navigators

Bouwt een native stack-navigator voor lesstromen en een bottom tab-navigator voor hoofdsecties. Het combineren van navigators creëert een intuïtieve app-structuur.

Les 3 • Kernconcepten van React Navigation

Installeert React Navigation en configureert een root-navigator met getypeerde routeparameters. De navigatiearchitectuur bepaalt de gehele gebruikersreis door de app.

Les 1 • Voortgangsregistratie en dashboards

Toont de leerlingvoortgang met grafieken en voltooiingsbadges op een persoonlijk dashboard. Voortgangsgegevens worden van de backend opgehaald en in realtime zichtbaar gemaakt.

Les 2 • Lessencontent-speler

Rendert tekst-, afbeeldings- en videolescontent met een voortgangsindicator. De speler registreert voltooiing en stuurt updates naar de backend.

Les 3 • Meldingen en herinneringen

Verzendt lokale en pushmeldingen om cursisten te herinneren aan onvoltooide lessen en aanstaande deadlines. Meldingen worden gepland op de backend en via een pushservice bezorgd.

Les 4 • Quiz- en beoordelingsmodule

Implementeert meerkeuze- en openvragenquizzes met directe feedback en scoreberekening. Quizresultaten worden naar de backend weggeschreven voor beoordeling door de instructeur.

Les 1 • Componentrendering optimaliseren

Past React.memo, useMemo en useCallback toe om onnodige herrenderingen te elimineren. Renderoptimalisatie verbetert direct de soepelheid van scrollen en animaties.

Les 2 • React Native-prestaties profileren

Gebruikt de React Native Profiler en Flipper om trage renders en JS-thread-knelpunten te identificeren. Profileren vóór optimaliseren voorkomt verspilde moeite aan niet-kritieke paden.

Les 3 • Bundelgrootte en laadtijd verkleinen

Past code splitting, lazy imports en asset-optimalisatie toe om de app-bundel te verkleinen. Kleinere bundels verkleinen de installatiegrootte en verbeteren de koude-starttijd.

Les 1 • End-to-end-teststrategie

Schrijft end-to-end-tests die echte gebruikersreizen door de volledige stack simuleren. E2E-tests vangen integratieregressies op voordat ze in productie komen.

Les 2 • Continue-integratiepipeline

Configureert een CI-pipeline die linting, unit-tests en E2E-tests uitvoert bij elke pull request. Geautomatiseerde controles handhaven codekwaliteitsnormen in het team.

Les 3 • De Node.js-backend implementeren

Maakt de Express-server containergericht met Docker en implementeert deze op een cloudplatform. Een betrouwbare backend-implementatie zorgt ervoor dat de mobiele app altijd een live API heeft.

Les 4 • Monitoring en crashrapportage

Integreert foutopsporingstools en analysetools om de live app na release te monitoren. Proactieve monitoring verkort de gemiddelde tijd tot oplossing van productieproblemen.