Voor dit Klantproject hebben mijn team en ik een platform ontwikkeld dat jonge kinderen een persoonlijke en toegankelijke manier biedt om verhalen te beleven. Het doel was om een gebruiksvriendelijk en betaalbaar alternatief te creëren voor traditionele prentenboeken. Ik heb meegewerkt aan het ontwerp van de app (PWA) en was verantwoordelijk voor de ontwikkeling van de app en de integratie van de API.
Project Lifecycle:
Project Start:
In de eerste fase hebben we ons gericht op het opzetten van een duidelijke structuur. We gebruikten tools zoals Trello om onze voortgang bij te houden en user stories te definiëren, zodat iedereen wist wat er moest gebeuren.
Concept Development:
Aan het begin hebben we de kernfunctionaliteiten van de PWA vastgesteld. Een belangrijk aspect was het personaliseren van verhalen, inclusief de optie om avatars te maken en bibliotheekkaarten te koppelen aan het account. Deze elementen werden opgenomen in ons prototype. Op basis van vroege feedback zijn we dieper ingegaan op onderwerpen zoals gebruiksvriendelijkheid en de flexibiliteit van het systeem om nieuwe content toe te voegen.
Design:
Het ontwerp van de PWA verliep als volgt:
Wireframes:
De eerste ontwerpen kregen positieve feedback over de helderheid van de navigatie, hoewel we enkele aanpassingen moesten doen aan de menustructuur om deze intuïtiever te maken.
Prototype:
Het functionele prototype werd goed ontvangen, waarbij met name de avatarfunctie en de bibliotheekkaartintegratie werden geprezen. Hierop voortbouwend hebben we een duidelijke lay-out ontworpen met gebruiksvriendelijke navigatie en een overzichtelijke inhoudsopmaak.
Product Creatie:
Nadat we tevreden waren over ons ontwerp zijn we aan de slag gegaan aan development. Hier was ik verantwoordelijk voor de front-end van de login/registratie pagina's, algemene instellingen en de back-end van de PWA.
HTML5, CSS, JavaScript voor de frontend en Node.js voor de backend.
Design:
Wireframe:
We begonnen met het uitwerken van wireframes voor de kernfunctionaliteiten van de app, met de nadruk op leesbaarheid en intuïtieve navigatie.
Gezien de jonge doelgroep kozen we voor een speels maar strak ontwerp met grote knoppen en gemakkelijk te begrijpen lay-outs.
Een belangrijk aandachtspunt was ervoor zorgen dat de app comfortabel te navigeren is.
Prototype 1:
Na het afronden van het wireframe begonnen we met het ontwerpen van de prototype.
Dit stelde ons in staat om te experimenteren met kleurgebruik en verschillende designelementen, zoals de wolken.
Mijn taak was om de inlog-/registratiepagina, de ontdekpagina, het overzicht van de AI-generator, de instellingen en accountgegevens, en de leespagina’s te ontwerpen.
Prototype 2:
Na het ontvangen van feedback hebben we enkele aanpassingen gedaan. Ik voegden opties toe voor kindveiligheid, zoals inhoudsfilters en ouderlijk toezicht.
Daarnaast werdt de app voorbereid om eenvoudig nieuwe verhalen en personages toe te voegen in de toekomst, waardoor deze flexibel blijft voor inhoudsupdates.
Code:
Voor het ontwikkelen van ons platform heb ik verschillende onderdelen van de app gebouwd, zoals de server, het ophalen van verhalen en afbeeldingen via een API, en het weergeven van de inhoud in de app.
Hier zijn de belangrijkste onderdelen van de code:
Opzetten server:
Dit is de code voor het opzetten van de server met Express en de nodige middleware voor JSON parsing, CORS, en het gebruik van environment variabelen voor de API-sleutels.
API request verhaal:
Dit is de code voor de externe API-aanroep om een verhaal te genereren, waarna het antwoord van de API wordt teruggestuurd naar de frontend.
API request afbeelding:
Dit is de code voor de externe API-aanroep om een afbeelding te genereren, waarna het antwoord van de API wordt teruggestuurd naar de frontend.
Verzenden formuliergegevens:
Deze code verzend de gegevens die ingevuld worden in de formulier velden naar de back-end voor het generen van een verhaal en passende afbeelding.
Weergeven verhaal:
Dit is de code voor het weergeven van het verhaal. Wanneer het verhaal gegenereerdt is wordt die opgehaald uit de back-end en op deze manier weergeven in de front-end.
Back-end voor gebruikersbeheer:
Deze code gebruikt API-endpoints voor gebruikersbeheer: inloggen, registreren, gegevens ophalen en bijwerken.
Bij inloggen wordt een JWT-token gegenereerd voor toegang.
Registreren voegt nieuwe gebruikers en controleerd of de gegevens juist zijn.
Gebruikersgegevens worden gelezen en opgeslagen in een JSON-bestand.
Front-end code Login:
De code zorgt ervoor dat een gebruiker kan inloggen. Wanneer het formulier wordt ingediend, stuurt de code de e-mail en het wachtwoord naar de server.
Als het inloggen lukt, slaat de code een token op (een soort digitale sleutel) en wordt de gebruiker doorgestuurd naar een andere pagina.
Gaat er iets mis, dan krijgt de gebruiker een foutmelding.
Front-end code Registreren:
Deze code zorgt ervoor dat een gebruiker zich kan registreren. Als het registratieformulier wordt ingediend,
controleert de code eerst of de wachtwoorden overeenkomen. Daarna worden de naam, e-mail en wachtwoord naar de server gestuurd via een POST-verzoek.
Als de registratie succesvol is, krijgt de gebruiker een melding. Als er een fout optreedt, wordt een foutmelding getoond.
Front-end code Bijwerken accountgegevens:
Deze code zorgt ervoor dat alleen ingelogde gebruikers toegang hebben tot een pagina en hun gegevens kunnen bekijken en bijwerken.
Als er geen token is opgeslagen, wordt de gebruiker doorgestuurd naar de loginpagina. Zo niet, dan haalt de code de gebruikersgegevens op met een token en vult het formulier in met die gegevens.
Bij het indienen van het formulier worden de bijgewerkte gegevens naar de server gestuurd om deze op te slaan. Bij fouten krijgt de gebruiker een foutmelding.
Reflectie:
Het werken aan dit klantproject was een leerzame en uitdagende ervaring die mijn technische en creatieve vaardigheden heeft aangescherpt.
Ik heb mijn kennis van front-end en back-end ontwikkeling goed kunnen ontwikkelen.
Het ontwerpen van de PWA was een van de sterkste punten van het project.
De positieve feedback op het prototype bevestigde dat we de juiste keuzes hebben gemaakt op het gebied van kleurgebruik, lay-out en navigatie.
Wat kon beter?
Hoewel we onze functionaliteiten hebben getest, hadden achteraf meer iteratieve tests met gebruikers, vooral binnen de doelgroep, nog waardevolle inzichten kunnen opleveren.
Omdat we begonnen waren met de front-end hadden we achteraf niet genoeg tijd om de back-end volledig te intergreren, hierdoor hadden we geen tijd om alle mogelijkheden van de API uit te testen.
