description
In deze cursus zal je kennis maken met Headless CMS systemen. Wordpress als backend, GraphQL als API en Gatsby als frontend!

Cursus Overzicht

Headless WP, Gatsby en GraphQL

We gaan ons toespitsen op een specifieke infrastructuur namelijk Headless. Samen zullen we een headless WordPress website opzetten voor een artiesten agentschap die via een GraphQL API gegevens zal doorsluizen naar een zelfgeschreven front-end in Gatsby.

Voor velen onder jullie zullen de termen Headless, GraphQL en Gatsby je niet veel zeggen. Geen zorgen! Samen zullen we stap voor stap het gehele proces doorlopen.

Kort samengevat:

• Headless: frontend-agnostische CMS infrastructuur die aan de hand van een API gegevens doorsluist van de back-end. Bv. Headless WordPress als back-end die gekoppeld is met een frontend geschreven in Bv. React, Angular, React Native, Vue, Gatsby, Next.js, etc.
• GraphQL: een zoektaal dat een alternatief biedt op REST en verschillende problemen waarmee REST kampt oplost.
• Gatsby: een op React gebaseerde, GraphQL-aangedreven, statische sitegenerator. Het weeft de beste delen van React, webpack, react-router, GraphQL en andere front-end-tools samen tot één zeer gebruiksvriendelijke ontwikkelaarservaring.

Je zal leren hoe je de standaard WordPress installatie omtovert tot een Headless Wordpress Applicatie. Dit door het gebruik van verschillende plugins waaronder Advanced Custom Fields en WPgraphQL.

Je WordPress Applicatie zal aan de hand van één GraphQL endpoint de gegevens die je in de dashboard van WordPress aanmaakt openstellen naar de buitenwereld toe. Vervolgens zal je leren hoe je een Gatsby front-end ontwikkeld en deze gegevens via de GraphQL API kunt opvragen.

In het dashboard van je headless WordPress applicatie zal je dynamisch data kunnen toevoegen. De aanpassingen worden met behulp van een build webhook doorgegeven aan je Gatsby front-end die een nieuwe build genereert van je statische website (static site generation). De nieuwe build zal automatisch gepusht worden naar je hosting provider die op zijn beurt de meest recente versie van je website online zet!

Langlopende opdracht

Eenmaal als je het voorbeeld project hebt doorlopen is het aan jullie om met de bovenstaande technologieën aan de slag te gaan. Als opdracht moeten jullie een Showroom naar keuze uit werken. Dit kan een showroom zijn voor auto’s, videogames, interieurdesign, etc. Ongeveer in het midden van het semester zal je dit moeten opgeven.

Jullie zullen zelf een Headless WordPress back-end en Gatsby front-end opzetten die met elkaar communiceren via een GraphQL API.

Je zal je website via de hosting service van Netlify online moeten zetten. Dit zal je doen met behulp van Continuous Deployment!

Voorbeeld opdracht: Artist Agency

{% hint style="info" %} Opmerking 📣: Termen zoals statische webpagina's en Continuous Deployment zeggen je waarschijnlijk niet veel. Geen zorgen! We zullen alles stap per stap overlopen! {% endhint %}

Doelstelling

Op het einde van deze cursus zal je een goede basis hebben van het ontwikkelen van Content Management Systemen die voldoen aan de eisen van het toekomstig internet zoals wij het nu kennen. Je zal mee zijn met de nieuwste technologieën binnen het CMS landschap en zelf beslissingen kunnen nemen omtrent welke technologieën van toepassing zijn voor specifieke use-cases.