Back-end (CMS)

Repo: https://github.com/jochemvogel/jungle-gym-cms

Voor het bewerken van de content (spellen) is een headless CMS gekozen. Om precies te zijn: Strapi. Strapi is snel op te zetten, te personaliseren en daarnaast ondersteund het zowel REST, als GraphQL. De UI ziet er goed uit en is erg logisch. Het aanpassen van een spel is getest bij de opdrachtgevers en dit lukte hen. Het was erg vanzelfsprekend voor hen.

Installatie

Volg de stappen in de README.

Wat is een headless CMS?

Headless houdt in dat de front-end van een website is los gekoppeld van de back-end (of CMS). De back-end en de front-end communiceren dan met elkaar via een API in plaats van dat ze echt met elkaar gekoppeld zijn.

Het voordeel hiervan is flexibiliteit. Het een heeft de ander niet nodig, dus als er op ten van React naar Vue geswitcht wordt, dan is dat voor het CMS geen probleem, terwijl dit bij de traditionele manier wel een probleem zou zijn.

Naast dat het dus flexibel is, is het voor een prototype een goede keuze. Het CMS werkt eigenlijk out-of-the-box en daardoor is het niet nodig om deze functionaliteit in de app zelf te bouwen.

Daarnaast is Strapi volledig aan te passen naar de wensen van de ontwikkelaar, waardoor je het beste van beide wereld hebt: én snel op te zetten, én te personaliseren.

Hoe krijg je data uit Strapi in de front-end

Normaliter is de data te halen uit het endpoint dat gelijk staat aan het Content Type. Dus in het voorbeeld van JungleGym: https://jungle-gym-cms.herokuapp.com/games. Zoals je ziet, staan alle spellen hierin.

Er is echter voor gekozen om een eigen API te gebruiken en de API van Strapi te patchen. Hierdoor is het mogelijk om de keys van de API zelf aan te passen. De API van Strapi wordt dus niet (direct) gebruikt in de front-end.

Hoe customise je Strapi?

Strapi valt te personaliseren, waardoor het mogelijk is om kleuren en vertalingen aan te passen. Het admin panel van Strapi is gemaakt met React. Op het moment dat de ontwikkelaar weet hoe React werkt, is het mogelijk om alles aan te passen.

Op het moment dat dit niet het geval is, is het ook mogelijk om dingen aan te passen. Wellicht zijn er sommige dingen iets te complex, maar het aanpassen van kleuren en tekst moet geen probleem zijn.

In de README van het project is meer informatie te vinden over het aanpassen van de admin.