🙌

De Noodzaak van een Digitale Aanwezigheid

In een steeds meer verbonden wereld is een digitale aanwezigheid cruciaal geworden voor organisaties om in contact te komen met hun gemeenschap, hun werk te laten zien en communicatie te vergemakkelijken. Digitale Innovatie, ondanks de technologische focus, miste in eerste instantie een webaanwezigheid. Dit besef leidde tot het opzetten van een project om een website te creëren die als digitaal platform voor de organisatie zou dienen, waardoor deze kon communiceren met haar publiek, updates kon delen en projectvoorstellen kon accepteren.

Introductie

Het "Digitale Innovatie Website" project was een groepsinspanning gericht op het creëren van een webaanwezigheid voor Digitale Innovatie. Ons team verdeelde de verantwoordelijkheden over verschillende aspecten van het project, en mijn voornaamste rol was om de server-side code voor het inlogsysteem te ontwikkelen en de ingediende berichten of projectvoorstellen te beheren.

Mijn Rol in het Project

Als lid van het team was mijn belangrijkste verantwoordelijkheid het ontwikkelen van de backend-functionaliteit. Dit betrof de implementatie van het inlogsysteem met behulp van GitHub-authenticatie en het afhandelen van de verwerking en opslag van berichten en projectvoorstellen die via het contactformulier van de website werden ingediend. Ik was ook betrokken bij besluitvormingsprocessen, droeg bij aan discussies en hielp bij het kiezen van de technologieën die in het project werden gebruikt.

Keuze van Tools en Vereistenanalyse

Een van de eerste stappen in het project was het selecteren van de juiste technologieën. We evalueerden verschillende populaire front-end ontwikkelingsframeworks, waaronder NuxtJS, NextJS en Hugo. Na het overwegen van de kenmerken en mogelijkheden van elk, kozen we voor NextJS met statische sitegeneratie vanwege de hoge prestaties en flexibiliteit.

Ook de styling was een aspect waar we een keuze moesten maken. We evalueerden Sass, CSS en TailwindCSS, en kozen uiteindelijk voor TailwindCSS vanwege zijn dynamische aard en gebruiksgemak. Het zorgde voor een consistente stylingaanpak tussen verschillende teamleden, bevorderde de samenwerking en handhaafde de consistentie in onze codebase.

Voor de hosting overwogen we Vercel, Cloudflare en Netlify. We kozen voor Cloudflare voornamelijk vanwege persoonlijke voorkeur en het feit dat onze andere infrastructuur al gehost werd op Cloudflare, wat de integratie vlotter en handiger maakte.

Vooraleer al dit nuttig was, is er ook een analyse gemaakt van de vereisten. Deze analyse hebben we uitgevoerd door het maken van een use-case diagram.

Fig 1. Datamodel

Datamodellering

De inzendingen van het formulier werden opgeslagen in Cloudflare's Key-Value (KV) opslag. Omdat de werkelijke data in Cloudflare KV werd opgeslagen, was mijn rol om de typedefinities voor deze inzendingen te creëren. De voornaamste gedefinieerde typen waren:

ProjectData: Dit type ving de details over een project op, inclusief filter, pad, afbeelding, titel, datum, ruwe datum, positie, samenvatting, inhoud en uitgelichte status.
InquiryData: Dit type omvatte de details van een onderzoek, inclusief een optionele ID, de voornaam, achternaam, e-mail, bericht, datum en een optionele bestandsbijlage van de gebruiker.
EventData: Dit type vertegenwoordigde de details van een evenement, inclusief pad, afbeelding, titel, datum, ruwe datum, positie, samenvatting en inhoud.

Deze typen waren essentieel om ervoor te zorgen dat de data die in Cloudflare KV werd opgeslagen, een voorspelbare en consistente structuur hadden.

Uitdagingen en Oplossingen

Hoewel de implementatie van het inlogsysteem met GitHub-authenticatie vrij eenvoudig was, was de grootste uitdaging die we tegenkwamen het afhandelen en beheren van formulierinzendingen. Het formulier op de contactpagina stelt gebruikers in staat om vragen of projectvoorstellen in te dienen, en deze moesten efficiënt worden opgeslagen en beheerd. Om dit aan te pakken, ontwikkelde ik een robuust systeem dat de inzendingen sorteerde en categoriseerde op basis van hun inhoud, waardoor het voor het team van Digitale Innovatie gemakkelijker werd om ze te beheren en erop te reageren.

Implementatie van de Server-side Code

Ons team werkte samen aan de ontwikkeling van de server-side code voor het afhandelen van het inloggen en de inzending van formulieren. Voor het inlogsysteem implementeerde ik GitHub-authenticatie. Voor de inzending van formulieren maakte ik de eerder genoemde typen om gebruikersvragen en projectvoorstellen te beheren.

Interface en Login Functionaliteit

We werkten samen om een gebruikersvriendelijke interface voor de inlogpagina te creëren. Gebruikers konden inloggen met hun GitHub-accounts, wat zorgde voor een soepel en veilig inlogproces. Ook het formulier voor het indienen van vragen en projectvoorstellen was intuïtief ontworpen, met de nadruk op gebruiksgemak.

Conclusie

Door onze gezamenlijke inspanningen hebben we met succes een website ontwikkeld die niet alleen aan de oorspronkelijke vereisten voldeed, maar ook een gebruiksvriendelijk platform voor interactie bood. De reis had zijn aandeel in uitdagingen, maar deze werden overwonnen door zorgvuldige planning, selectie van geschikte technologieën en teamwork. De voltooiing van dit project heeft geleid tot een digitale aanwezigheid voor Digitale Innovatie, het bevorderen van betrokkenheid van de gemeenschap en het stimuleren van groei.

Syan Delbart