Analyseren

Voor dit project ga ik een debriefing aan met de opdrachtgever en zal ik voornamelijk een techstack onderzoek doen.

Debriefing

Op de dag van 17 April heb ik een debriefing gehad met de opdrachtgever.

Contactgegevens

Bedrijf: Freago Contactpersoon: Revo Wahjudi - [email protected] Aanvraag: 17-04-2024 Oplevering: Week 8 van semester 4

Achtergrondinformatie

Freago is een bedrijf dat werk als uitzendbureau. Ze zijn (nu) voornamelijk bezig met de schoonmaak- en bezorg sector. Ze geven opdrachten aan zzp'ers. Ze hebben een gat in de markt gevonden waarbij er vaak een buitenlands persoon wordt ingehuurd voor opdrachten door andere bedrijven, en deze mensen spreken dan vaak geen Nederlands. Zij focussen zich vooral jonge ondernemers, specifiek studenten die geld willen verdienen maar geen vaste baan willen. Deze studenten zijn jong, sterk en capabel. Ze willen werken en zijn vaak gemotiveerd. Freago heeft ook directe lijnen met opdrachtgevers, daardoor is communicatie een sterk punt van dit bedrijf.

Opdrachtomgschrijving

Freago wilt een website maar ze hebben geen tijd en expertise. Ze willen een stukje dat uitlegt wie ze zijn. Waarom ze zijn begonnen. Een stukje wat ze bieden. Samenwerkingen met bedrijven. Hoe kunnen zzp’ers met hun werken. Hoe kunnen bedrijven van met hun werken. Foto’s en ervaringen van onze werknemers. Contactgegevens. Mission en vision.

Aanleiding

Freago zocht naar iemand die hun kan helpen met een website bouwen. Toevallig kende één van de opdrachtgevers de student die hun uit de brand gaat helpen. Deze student bevat de tijd en expertise om een professionele website te bouwen.

Doelstelling

Freago wilt een website waarbij opdrachtgevers en zzp'ers kunnen aanmelden om werk te verlenen of werk te geven. Daarnaast willen ze laten zien aan eventuele klanten wie ze zijn, hoe ze kunnen samenwerken en foto's van zzp'ers die aan het werk zijn.

Oplevering

Aan het einde van semester 4 ga ik een website leveren met de volgende werkende onderdelen:

• Een gebruiksvriendelijke headless CMS
• Een techstack onderzoek met waarom ik de gekozen techstack gebruik.
• Code ingedeeld op basis van het atomic design
• Nette code
• Site map
• Wie zijn we pagina
• Contact formulier
• Samenwerk pagina

Randvoorwaarden

• Het moet er professioneel uit zien.
• Je moet kunnen zien wat het bedrijf aanbiedt.
• We houden wekelijks contact

Gebruikers van het eindresultaat

• ZZP'ers
• Bedrijven die zzp'ers willen inhuren voor werkzaamheden waar ze geen vaste werknemer voor willen.

Relatie met andere projecten

Één van de eigenaren heeft een ander bedrijf wat zich focust op fotografie en videografie. Het kan dus zijn dat hun foto's voor dit bedrijf afkomstig zijn van het ander bedrijf.

Techstack

Ik ga voor mijn meesterproef de techstack Sveltekit (als framework) met Prismic (als headless CMS) gebruiken.

Sveltekit

Voor dit project voor de meesterproef ga ik Sveltekit gebruiken als framework. Dit heb ik al van te voren besloten omdat ik het ZELF ook een hele fijne framework vind om mee te werken en het heeft duidelijke documentatie en een grote community die met de dag mee blijft groeien.

Headless CMS

Ik heb 2 CMS'en uitgekozen bij het onderzoeken tijdens de analyse fase. Deze 2 content management systemen zijn Hygraph en Prismic. Uiteindelijk heb ik voor Prismic gekozen en ik zal vertellen waarom.

Waarom Hygraph en Prismic?

Het eerste wat jij je als lezer afvraagt is natuurlijk: "waarom hygraph en prismic?". De reden dat ik deze twee CMS'en in gedachten had, is omdat ik hier eerder mee heb gewerkt. Doordat ik eerder hiermee heb gewerkt kan ik tijd besparen omdat ik al bekend ben met beide systemen, dit heb ik bewust gedaan omdat we tijdens dit semester met 2 projecten tegelijk gaan werken en dus moet ik tijdefficiënte keuzes maken. Naar mijn ervaring waren hygraph en prismic ook super fijn om te gebruiken naar mijn mening, ook waren ze allebei compatibel met sveltekit en hadden een uitgebreide en duidelijke documentatie.

Compatibility

Beide content management systemen zijn compatibel met het framework Sveltekit. Wat ik zo goed vind aan Prismic is dat er een uitgebreide documentatie wordt aangeboden vanuit prismic wanneer je deze wilt gebruiken met sveltekit. Deze documentatie is hier te vinden en ze hebben ook een hele crash course op hun youtube kanaal met sveltekit. De documentatie van hygraph met sveltekit daarin tegen is wat aan de magere kant. Ik heb alleen een video kunnen vinden en een blog.

Userfriendly UI

Wanneer ik klaar ben het product kan overdragen aan de opdrachtgever, zullen ze zelf of iemand die ze inhuren de CMS moeten beheren. Prismic heeft een hele gebruiksvriendelijke UI wat dat betreft. Wat Prismic heel slim doet, is dat het onderscheid maakt van de developer gedeelte van het CMS en de management gedeelte. Wanneer ik het eindproduct oplever kan ik heel makkelijk een link sturen met de inloggegevens van de headless CMS. De management kant van Prismic ziet er zo uit:

Je ziet heel duidelijk wat voor pagina's er zijn en als je op een pagina drukt zie je duidelijk wat er op de pagina te zien is en wat je kan veranderen:

Je kan live zien aan de linkerkant wat je veranderd en hoe dit eruit komt te zien wanneer ik vercel configureer in de repo en dat maakt de UI super gebruiksvriendelijk en makkelijk te begrijpen.

Hygraph daarin tegen is niet veelzeggends op het eerste oog. Je ziet duidelijk wat je pagina's zijn en welke content daarbij hoort.

Overdraagbaarheid

In prismic heb je zogeheten slices. Slices zijn als het ware components van een website. Als ik deze slices als developer zodanig goed configureer en netjes opzet, dan is de overdraagbaarheid van dit CMS een sterk punt. Waarom is dit dan een sterk punt vraag je je af? Nou als content manager van de CMS kan je gemakkelijk nieuwe pagina's aanmaken op basis van de slices die ik heb geconfigureerd. Dit houdt in dat het aanmaken van nieuwe pagina's mogelijk is zonder een developer. Daarnaast kan je de link dan ook nog toevoegen naar deze pagina in de navigatie of doormiddel van een andere button. Dit is hoe de UI er uit ziet wanneer je een nieuwe pagina maakt:

In Hygraph heb je geen duidelijke pages en dat je zonder een developer een pagina kan toevoegen. Wanneer je een pagina wilt toevoegen moet je in de code duiken en een nieuwe directory aanmaken.

Projectboard

Ik heb een projectboard aan gemaakt en daar de taken ingeschreven. Ik heb per pagina een taak aangemaakt en heb deze opgesplitst in kleinere taken. Per pagina heb ik dus kleinere taken gemaakt die behapbaarder zijn om te doen. Ik heb in mijn projectboard gebruik gemaakt van de volgende labels om zo een duidelijk overzicht te creëren. Deze ik heb de volgende labels gebruikt:

• Taakgrootte (XS, S, M, L, XL)
• MoSCoW labels (Must, Should, Could, Wont)
• Pagina labels
• DLC fase

VOORBEELD

Doordat ik de vanuit de pagina kleinere taken heb gemaakt heb ik dus geanalyseerd wat per pagina nodig is, en hiervan kleinere taken/issues voor aangemaakt. De afbeelding hierboven is een voorbeeld van een kleinere taak die ontstaan is uit een grotere taak. Dit heb ik gedaan zodat de taken haalbaar zijn in een dag of het liefst in 2 uur tijd. Het projectboard heeft mij ook geholpen bij het inplannen van dit project en het WOGO project die ik beiden in dezelfde periode heb moeten maken.