Als Digital Problem Solver kom je vaak voor verrassende digitale uitdagingen te staan. Recentelijk kreeg ik zo'n kans om mijn tanden te zetten in een project dat twee belangrijke kennisgebieden met elkaar verbond: het inzetten van een headless CMS Directus en de kracht van Rapid Prototyping met behulp van AI. Een dubbele winst!
Een prospect benaderde mij met een specifieke vraag: hoe kunnen we een Excel-dataset omzetten naar een functionerende website, gevoed door een headless SAAS-applicatie? De betreffende applicatie? Directus. Eerlijk is eerlijk, ik had er zelf nog nooit van gehoord. Maar zoals altijd, zie ik een nieuw Digital Problem als een uitnodiging om te leren en te innoveren.
De Basis Leggen: Data en Directus
Voor een prototype heb je data nodig. Gelukkig kwam mijn Tradetracker-account goed van pas. Ik downloadde een bestaande productfeed, die een goede basis vormde voor een datamodel.
Directus biedt een handige Docker image aan, waardoor ik de applicatie moeiteloos op mijn thuisserver kon opstarten met een eenvoudige compose.yaml configuratie.
services:
directus:
image: directus/directus:latest
ports:
- 8055:8055
volumes:
- ./florapracht/database:/directus/database
- ./florapracht/uploads:/directus/uploads
- ./florapracht/extensions:/directus/extensions
environment:
SECRET: "replace-with-random-value"
ADMIN_EMAIL: "admin@example.com"
ADMIN_PASSWORD: "d1r3ctu5"
DB_CLIENT: "sqlite3"
DB_FILENAME: "/directus/database/data.db"
WEBSOCKETS_ENABLED: "true"
Na het inloggen bij Directus bouwde ik op basis van de CSV-headers snel een datamodel. Voor dit snelle prototype hield ik het simpel: alles als tekstvelden, zonder directe validatie. Snelheid was hier de sleutel. Om te zorgen dat de frontend veilig toegang had zonder de data te kunnen manipuleren, creëerde ik een specifiek 'read-only' account. De data stond klaar; tijd voor de website!
De Frontend Sprong met AI: Gemini Canvas
Voor de frontend wilde ik een nieuwe tool verkennen: Gemini Canvas. Deze AI-gedreven omgeving belooft je in staat te stellen websites te creëren zonder zelf te coderen. Precies wat ik zocht voor een rapid prototype!
Mijn instructie aan de AI was helder en gedetailleerd:
Maak een simpele webpagina die op basis van een API-endpoint van het headless CMS Directus een lijst van collectie items weergeeft. Zorg er ook voor dat je een detailpagina krijgt voor elk collectie-item. Het systeem moet los deploybaar zijn. Zorg op de detailpagina ervoor dat er een goede call-to-action knop staat. De producten gaan over bloemen en bloemstukken. Verzin ook een originele naam. De site moet mobile-first en responsive zijn.
Het resultaat liet niet lang op zich wachten. Na een korte conversatie stond er al snel een website die de data netjes presenteerde en waar je gemakkelijk doorheen kon klikken.
Live Gaan en Fijn Afstellen
Een website heeft een naam nodig! Ik vroeg Gemini om hulp bij het vinden van een geschikte, vrije domeinnaam voor een bloemenwinkel. De suggestie florapracht.nl was perfect en nog beschikbaar! Met een simpele Docker Nginx image koppelde ik de website aan dit nieuwe domein.
services:
florapracht:
image: nginx:latest
ports:
- "80:80"
volumes:
- ./florapracht/html:/usr/share/nginx/html/
- ./floraprachtnginx:/etc/nginx/conf.d/
De volgende stap was het optimaliseren van de URL-structuur. Ik wilde dat elk bloemstuk zijn eigen 'schone' URL zou krijgen. Dit vereiste aanpassingen in zowel Directus als de gegenereerde code van de site. Directus heeft extensies voor automatische 'slugs' (gebruiksvriendelijke URL's), maar deze werkten niet optimaal tijdens een bulk-import. De oplossing vond ik in Directus Flows: een krachtige functie waarmee je met een stukje code automatische acties kunt uitvoeren bij elke 'create' of 'update' van een item, zelfs bij het importeren van de items werkt dit.
Vervolgens gaf ik Gemini Canvas de opdracht:
De response heeft ook een slug-veld. Als deze bestaat, gebruik die als URL voor de detailpagina.
En om het helemaal af te maken:
Ik wil de slug ook in de browser adresbalk zien.
Na een snelle update van de code op mijn server, was het zover: een simpele, maar volledig functionele website, gevoed door een headless Directus met een CSV-bestand als bron.
Prototype Geslaagd: Twee Vliegen in Eén Klap!
Deze exercitie heeft bewezen hoe snel en efficiënt je complexe digitale uitdagingen kunt aanpakken door de juiste tools te combineren met innovatieve AI-oplossingen. Ik ben niet alleen een ervaring rijker, maar ook weer een stap dichterbij in mijn missie als Digital Problem Solver voor ondernemers.
Zit je met een digitale uitdaging die vraagt om een doeltreffende oplossing? Neem vrijblijvend contact op of vul het formulier in en laten we samen kijken hoe de ik die ambitie kan realiseren.