Ziggy
Deze week zijn we bezig geweest met de fase "oriënteren en begrijpen” op het gebied van frontend. We hebben gemaakt: stijlbord, moodboard, job stories, persona, bad, good and best practices, literatuuronderzoek naar de doelgroep en tot slot onze eerste tijdelijke wireflow.
Dit geeft ons de optie om alle keuzes aan het einde van week 4 te finalizen zodat wij in week 5 daadwerkelijk kunnen beginnen met het coderen van het front end gedeelte.
Onze opdrachten van week 4 waren vrij standaard en kostte niet heel veel moeite, omdat wij dit proces al vaak hebben doorlopen tijdens de opleiding. Het kostte vooral wat tijd om precies uit te zoeken welke opdrachten handig zijn voor ons einddoel en welke opdrachten verplicht zijn om te maken.
Stijl/moodboard: Tijdens het maken keken we vooral naar voorbeelden van apps die muziek bevatten. Maar ook keken we naar apps waar mensen zelf diensten kunnen aanbieden zoals fiverr.
Job stories: Dit zat eigenlijk niet echt meer in ons hoofd dus we hadden teruggekeken naar vorige projecten waardoor we wisten dat we een zin moesten schrijven over de gebruiker waar de punten “situatie, motivatie en doel” van pas komen
persona: We hebben best wel een wijde doelgroep, dus uiteindelijk hebben we gekozen voor iemand precies in het midden, niet te oud maar ook niet te jong (35) . Onderwerpen die we belangrijk vonden om te beschrijven waren (over mij, personaliteit, frustraties, gedrag en motivatie), omdat we met deze onderwerpen een goede balans konden schetsen over wat onze doelgroep drijft, waar ze tegenaan lopen, en wat hen motiveert, dus hoe ze om zullen gaan met onze app.
bad, good and best practices: We hebben 5 voorbeelden van soortgelijke websites en apps die 1 of meer dezelfde doelen hebben als onze app. We hebben ze daarna verdeeld op functionaliteiten en welke apps en websites het beste ons einddoel representeren.
literatuuronderzoek: Om nog dieper in te gaan op onze doelgroep hebben we artikelen en forums opgezocht over de struggles die zij nu ervaren m.b.t het vinden van een band.
wireflow: We hadden eigenlijk een hele neutrale flow gemaakt, meer gefocust op de eisen vanuit de opdracht, omdat we nog geen vast concept hebben gekozen.
-
Vinden jullie dat onze stijlbord en moodboard een duidelijke en consistente visuele stijl communiceren die past bij ons project? Waarom wel/niet?
-
Komen de job stories overeen met wat wij willen bereiken met onze app? Waarom wel/niet?
-
Is de voorlopige wireflow goed haalbaar qua backend? Waarom wel/niet?
-
Zitten er functionaliteiten in de "bad, good and best practices" die jullie sowieso in onze app willen terugzien? Waarom wel/niet?
-Ik was helaas afwezig
- Waar ligt de grens tussen wat ik als frontender moet kunnen/weten qua backend en wat ik aan de backenders kan overlaten?
- Is het misschien handig dat we met z'n allen even kijken naar de requirement list voor de app?
Deze week hebben we verder gewerkt aan de fase "Verbeelden en conceptualiseren". We hebben alle research en bevindingen van week 4 erbij gepakt en deze omgezet naar een concept op Figma. We hebben hifi schermen ontworpen met behulp van veel verschillende ontwerpprincipes ( Balans, Contrast, Herhaling, Ritme, Schaal en Proportie, Hiërarchie, Eenheid en Harmonie, Ruimte, Uitlijning, Beweging). Ook hebben we de verschillende states van de schermen ontworpen (404,Completed/submitted, Loading, Error).
Met deze sterke basis hebben we aan een concrete stijl kunnen werken. Zo hebben we gekozen voor een vibrante kleur van de app, omdat een vibrante kleur vaak in contact word gebracht met muziek. Ronde vormingen, om de app een vriendelijkere casual uitstraling te geven. Een Tiktok achtige homepage, omdat dit een vaak voorkomend model is voor onze doelgroep.
Kwa het concept hebben we vooral gekeken naar de leeftijd van de doelgroep, hun (doel, frustraties, motivatie) binnen de app, en hun (doel, frustraties, motivatie) buiten de app en welke info zij belangrijk vinden, voordat ze verder in zee gaan met een potentiële match.
-Willen wij dat de gebruiker tijdens het aanmaken van zijn account, alvast filters kan instellen? Waarom wel/niet?
-Nee, het is handiger om de gebruiker alleen info over zijn/haar eigen acc in te vullen en dan de gebruiker vervolgens navigeren naar de filters wanneer het account is aangemaakt.
-Geen
Deze week ben ik als frontender overgestapt van het designen (Verbeelden & conceptualiseren) naar het echt maken van ons product ( Prototypen en uitwerken). Ik heb me voor het eerst (buiten veel overleggen om) direct aangesloten bij de backenders en ben begonnen met Html, css en javascript in het project waar zij tot nu toe aan hadden gewerkt.
Voor de html heb ik een paar forms gemaakt voor de registratie en een deel van de partials gelinked aan de juiste pagina's
Voor de forms was het belangrijk dat ik de juiste classes en id's gebruikte zodat deze matched met de backend. Ook heb ik de juiste types voor de invoervelden gebruikt. En tot slot wanneer er files ingevoerd kunnen worden heb ik aangegeven welke files dit mogen zijn met de "accept" tag
De partial paginas waren al aangemaakt, het was alleen belangrijk dat we deze goed structureerde in onze mappen en dan in de juiste stappen voor de gebruiker neerzetten
Voor de style heb ik fonts geimporteert, en stijl aan de knoppen en tekstvelden gegeven
Ik heb ervoor gekozen om @font-face te gebruiken omdat dit word ondersteund door meerdere browsers en niet afhankelijk is van meerdere externe bronnen zoals bij het simpelweg gebruiken van een font link.
Ik heb de exacte maten van ons prototype in figma omgezet van px naar em, zodat het relatief blijft. Ook heb ik ervoor gekozen om ieder individueel type input te selecteren, zodat als er eentje aangepast moet worden ik deze makkelijk uit de lijst kan halen. Tot slot heb ik svg van onze iconen van figma overgezet naar ons project en deze op de correcte manier gelinkt met het input veld.
Voor het stijlen van de buttons was het alleen nodig dat ik het juiste id aansprak.
Ik heb een functie geschreven waardoor de progressbar verder gaat wanneer je verder gaat met de registreer stappen. Dit zorgt ervoor dat de gebruiker altijd op de hoogte is van hoever in het proces hij/zij zich bevindt.
Eerst declareer ik de current step met let omdat dit nummer kan veranderen en daarna de dom elementen met const omdat deze elementen vaststaan in de html. Daarna voeg ik een eventlistener toe aan de knoppen zodat deze interactief worden. Als eerste voor de next knop controleer ik of er nog ruimte is voor het activeren, zo ja, dan geef ik de huidige step van de progressbar een class die ik stijl met css.
Hetzelfde gebeurd ook met de previous knop alleen dan word er gecontroleerd of er active classes zijn om te verwijderen, zo ja, dan word de class weggehaald.
- Ik heb deze week geen feedbackvragen.
-Moeten de bronnen van de gebruikte iconen en fonts zichtbaar zijn op de website?
-De progressbar functie stopt niet wanneer er een error plaatsvind en de eerste stap is niet ingekleurd
Deze week zijn wij als frontenders dieper gedoken in de functionaliteiten van de hoofdpagina's (For you, Profile, Settings). Persoonlijk ben ik aan de slag gegaan met de for you page, techniekene die ik daar hebt gebruikt zijn: Html + Dynamische data ophalen, Css, Javascript. Dit is de een na laatste week, dus het doel is om de hoofdfuncties af te krijgen en dan volgende week alles netjes te maken en de puntjes op de i zetten.
Begin deze week heb ik de html opgezet voor de for you page, ik had geen idee hoe ik dynamische data daadwerkelijk kon weergeven, dus heb ik hulp gevraagd aan mijn teamgenoten. Dante had de tijd genomen om mij in zijn vrije tijd een uitbundige uitleg te geven over hoe dit in zijn werk gaat. Hierdoor kon ik verder zonder problemen.
Hier is een voorbeeld van een stukje dynamische data + een foreach om meerdere genres per gebruiker naast erlkaar te weergeven
De css spreekt eigenlijk voor zich, hier heb ik niet heel veel moeite mee gehad, omdat ik hier al best wel bekend mee ben. De grootste struggle was om alle data te groeperen als een kaartje en deze voor de desbetreffende video te plaatsen en dan alles kunnen sliden om naar de volgende pagina te gaan.
Ook heb ik css gemaakt voor een uitklappende search par wanneer je hier op klikt.
Tot slot heb ik een filter pop up gemaakt die in je beeld schuift wanneer je op de knop drukt
Overigens is er niet echt iteratie mogelijk, omdat wij de eerste paar weken een sterk design hebben ontworpen in figma en wij dit design strikt volgen.
Ik denk dat ik 75% van mijn tijd heb besteed aan javascript functionaliteiten deze week, het is belangrijk dat alles details goed werken aangezien dit de main page is van de app. Ik heb gewerkt aan:
Ik was begonnen met een pauze functie voor de video's, dit sprak best wel voor zich en ging goed. Ik had een eventlistener op alle video's gezet en wanneer je klikt zal de video gepauzeerd worden
Na een tijdje kwam ik erachter dat video's blijven doorspelen wanneer je verder scrolled naar de volgende video. Het koste mij een paar uur om een functie te schrijven die video's pauzeerd als ze uit de viewport zijn, maar het werkte telkens niet. Toen bedacht ik dat ik ook gewoon de video makkelijk kon pauzeren wanneer gedetecteerd word dat ik verder scrol naar de volgende video.
Ik begon met het design maken in html en css, en vervolgens hoefde ik er alleen maar voor te zorgen dat de juiste height waardes werken toegepast wanneer ik op de desbetrevende knoppen druk.
Eerder in dit project zag ik dat we deze knoppen al hadden gemaakt, maar om ze te stijlen hadden we er een button omheen gezet. Ik dacht dat het makkelijker kon dus heb ik ervoor georgd wanneer je een input aanvinkt, de desbetreffende label een donkere rand krijgt.
Ik geef eerst de lijst met checkboxes aan en voor elke checkbox wanneer deze aangevinkt is pakt hij de matchende label index en maakt de border een andere kleur. Als het niet meer checked is gaat de kleur terug naar normaal
Ook had ik hier feedback gekregen van Amber, dat als je "?" gebruikt op items waar je een eventlistener zet, je geen errors krijgt dat het element niet is gevonden op andere pagina's.
Ik begon met een werkende filteroptie maken voor de members:
kortgezegd word er een array gemaakt van de geselecteerde checkboxes en er word gecheckt of er een match is met de members op de for you page. Alle geen matches worden hidden.
Nu wou ik dit ook toepassen op de genres en dat lukte niet helemaal, dus heb ik chatgpt erbij gepkat en ben ik tot dit resultaat gekomen:
Ook ben ik verder gegaan en ervoor gezorgd dat wanneer je 1 genre en 1 member aantal hebben, deze op hetzelfde profile moeten staan, dus de filters kunnen elkaar niet overschrijven.
Tot slot voor accessibility geef ik weer of er filters actief zijn of niet, door de filter knop paars te maken.
Bij deze functie heb ik eigenlijk het meest geitereerd en heb ik het stap voor stap aangepakt.
Ik begon met de basis search functie:
Nu ik een basis search functie had ging ik ermee aan de slag en kijken hoe ik het meer toegankelijk kon maken voor de gebruiker.
Stap 1 was om een empty state te maken en duidelijk maken dat er geen resulaten zijn gevonden.:
Een extra functie die je vaak ziet terugkomen bij social media apps is wanneer je het zoekveld leegmaakt en weg klikt, deze automatisch weer alles laat zien. In mijn geval moest ik eerst de balk leegmaken en enter klikken om weer alle resultaten te zien, dus dit heb ik aangepast met deze functie:
daarna ging ik weer kijken wat er nodig was voor de gebruiksvriendelijkheid. Uit eerder onderzoek van dit project was te zien dat als je klaar bent met zoeken, je weer terugkeert naar waar je eerst was. Dus had ik een functie toegevoegd die je scrollpositie voor het zoeken opslaat en je daar weer naartoe brengt als je klaar bent met zoeken:
Ik was deze week niet aanwezig bij de feedback omdat ik ziek was, maar wij hebben de feedbacksessie opnieuw gehouden in het weekend.
- Ik heb de stijl van de homepage aangepast, aangeziek het oude design mij niet goed lukte. Wat vinden jullie van het nieuwe design?
- De zoekfunctie zoekt alleen op naam van een band, is dit goed, of moet er gezocht worden op meer dan alleen de bandnaam?
- Kan er een nieuwe route worden gemaakt om het profiel van een gebruiker (niet eigen acc) te zien?
- Het lukt mij niet om een geuploade video van een gebruiker te weergeven, hoe zou ik dit kunnen doen?
-
Dit was oke en ik heb een ander design gemaakt
-
Dante heeft mij hierbij op school geholpen en alles werkte
Deze week hebben wij ons product afgerond en zijn we tot een geheel werkend product gekomen. De laatste paar dagen hebben we vooral benut om kleine bugs op te lossen en alles mergen.
Persoonlijk heb ik nog een sorteer fucntie gemaakt en vooral gekeken naar wat voor kleine aanpassingen ik kan maken om de app toegankelijker te maken. Ook heb ik nog wat css gedaan voor de registratie.
Deze laatste dagen moesten Amber en ik beide vaak in het zelfde bestand werken, wat niet handig was, omdat dit conflicts oplevert. Om dit te voorkomen hebben wij beide neiwue branches aangemaakt om conflicts te voorkomen. Nadat wij klaar waren, hebben we dit weer samen gemerged naar de development branch.
Hierna hebben wij door elkaars werk gelopen dus een test en gezocht naar bugs. Vervolgens hebben wij de resulataten getackeld en aangepast
Dit was tot nu toe de moeilijkste functie die ik heb gemaakt. Dit kwam doordat er veel elementen voor nodig waren die ik tot nu toe in dit project nog niet heb gebruikt. Omdat we toch een sorteerfunctie wouden heb ik heel wat research moeten doen en heb ik ook voor een deel chatGPT gebruikt.
Bronnen: Video over sorteren, Text over sorteren
Uit deze bronnen heb ik niet persee een hele functie geleerd maar het was een soort van vangnet en reminder als ik ergens niet uitkwam kon ik terug gaan naar de basis. Ook heb ik veel debugging gedaan tijdens het maken van de sorteerfunctie, door middel van veel console.log op verschillende plaatsen te gebruiken en te zien waar de code precies vastloopt.
Het eerste gedeelte ging vrij soepel en hetzelfde als bij de filter fucntie, maar het array gedeelte ging anders, omdat ik ipv van kijk welke filters zij geselecteerd en dan de rest hiden, ik de volledige array nodig had van de actieve sorteeroptie, zodat deze in de juiste manier gehusseld kan worden.
Het middelste gedeelte was het lastigst aangezien ik datums van onze gebruikers uit de database moest omzetten naar datum die javascript kan lezen en dat lukte mij gewoon niet, dus daar had ik hulp van chatgpt bij ingeschakeld.
Bij het derde deel had ik eigenlijk het meeste gebruik gemaakt van mijn bronnen. Het enige punt waar ik op vast liep was dat ik niet kon uitvogelen dat ik niet de videos zelf moest verwijderen, maar de container.
Tot slot heb ik wat toegankelijkheid toegepast voor de gebruikers.
Ik heb ervoor gezorgd dat er ook gezocht kan worden als er filters aan staan en dan zoek je alleen binnen die filters. In de eerste instantie wanneer ik klaar was met zoeken verwijderde de functie alle hidden classes, maar omdat ik ook hidden gebruik voor filters, werden alle weggefilterde items ook weer laten zien. De oplossing was om de hidden klassen van de search een andere naam te geven, zodat wanneer ik klaar ben met zoeken, alle filters alsnog hidden zijn.
Ik heb ervoor gezorgd dat gebruikers alleen hun form kunnen submitten wanneer ze bij de laatste stap van registratie zijn. Dit voorkomt vroegtijdige errors.
