Home - Lawlzilla7/ProjectTech-Team2 GitHub Wiki

Welkom op de wiki van Team 2!

Starten

Brainstorm Tijdens de eerste les waarin wij groepen hebben gevormd zijn we aan de slag gegaan met de Brainstorm. Hieruit zijn de volgende drie ideeën gekomen, voor alle ideeën hebben we de doelgroep, interacties en look & feel uitgewerkt.
  1. Wat ga ik kijken tijdens het eten?
  • Doelgroep - 16 - 35 jaar oud, filmliefhebbers, mensen die niet van stilte houden.
  • Interacties - Inloggen om ideeën voor je vaste ontbijt etc, Voorkeuren aangeven, aangeven wat je aan het eten bent, favoriete maaltijden en films opslaan, sorteren op categorie etc.
  • Look & Feel - Less is more, simpel, overzichtelijk, veel foto's, heldere kleuren.
  1. Welke nieuwe auto ga ik kopen?
  • Doelgroep - Mensen met een rijbewijs, mensen met weinig kennis van auto's, nieuwe bestuurders.
  • Interacties - Inloggen om verschillende opties op te slaan, filteren op keuzes, auto samenstellen, auto's vergelijken, sorteren, selecteren.
  • Look & Feel - Metallic, strak, snel, donkere kleuren, veel accentkleuren.
  1. Wat voor kleding ga ik kopen?
  • Doelgroep - Mensen op een budget, voornamelijk studenten en jongeren. Mensen met interesse in kwaliteit, merken en duurzaamheid.
  • Interacties - Selecteren, filteren, sorteren, inloggen, opslaan, favorieten
  • Look & Feel - Groen, duurzaam, kwaliteit, zacht.

Uiteindelijk hebben we na deze brainstorm besproken om verder te gaan met idee twee. Binnen dit concept kunnen mensen gematcht worden met de perfecte auto.

Het concept Welke nieuwe auto ga ik kopen? In ons gekozen concept kunnen gebruikers hun droomauto samenstellen. Op basis van een aantal filtermogelijkheden kunnen zij een auto samenstellen zoals zij deze zouden willen. Vervolgens wordt er door de applicatie een aantal auto's aangegeven die voldoen aan de opgegeven auto. Zo kan de gebruiker een auto vinden die te koop staat én die helemaal naar smaak zal zijn.
  • Doelgroep - Mensen met een rijbewijs, mensen met weinig kennis van auto's, nieuwe bestuurders.
  • Interacties - Inloggen om verschillende opties op te slaan, filteren op keuzes, auto samenstellen, auto's vergelijken, sorteren, selecteren.
  • Look & Feel - Metallic, strak, snel, donkere kleuren, veel accentkleuren.
Job Stories ## Job Stories * Als mijn auto kapot is, wil ik een nieuwe auto, zodat ik naar mijn werk kan * Als ik mijn rijbewijs net heb gehaald, wil ik een auto kopen, zodat ik indruk kan maken op mijn vrienden * Als ik een nieuwe auto wil kopen, wil ik hulp krijgen, zodat ik een goede keuze kan maken * Als ik een nieuwe auto wil kopen, wil ik al mijn eisen erin kunnen verwerken, zodat ik de perfecte optie heb * Als ik mijn droomauto zoek, dan wil ik zien welke auto's daarbij in de buurt komen, zodat ik een auto kan vinden die het meeste lijkt op mijn droomauto. * Als ik een nieuwe auto wil kopen, wil ik weten wat de auto allemaal kan, zodat ik een afgewogen beslissing kan maken. * Als ik een nieuwe auto zoek, wil ik auto's kunnen vergelijken zodat ik weet wat de beste keuze is voor mij. * Als ik een nieuwe auto zoek, wil ik favorieten opslaan zodat ik deze kan vergelijken bij de dealer. * Als ik een nieuwe auto zoek, wil ik kunnen filteren op prijs zodat ik een keuze kan maken binnen mijn budget. * Als ik een nieuwe auto wil kopen, wil ik weten wat anderen vinden van de auto, zodat ik dat mee kan laten wegen in het maken van mijn keuze.
Verplichte componenten ## Verplichte componenten ### Frontend * Filteren = auto in elkaar zetten * Sorteren = op basis van prijs etc. * Animaties bij het laden van de content * Gedetailleerde Micro Interacties (Feedback, Feedforward bij interactie) * Je gebruikt twee of meer verschillende User Interface events (drag, drop, swipe, keyboard event, onExit)

Backend

  • Account maken / inloggen
  • favorieten opslaan
  • Node, Npm en Express worden gebruikt om een webserver te creëren die zonder fouten draait en pagina's bedient voor meerdere routes,
  • inclusief een 404-pagina en routes met behulp van een routeparameter of querystring.
  • Een template-engine wordt gebruikt om eenvoudige dynamische pagina's te renderen.
  • Gegevens opslaan
  • Basale beveiligingsmaatregelen om ervoor te zorgen dat toegangsinformatie tot de database privé wordt gehouden.
Taakverdeling ## Frontend Yani - Detailpagina. Dit houdt dat Yani de pagina's per auto ontwerpt en uitwerkt. Furkan - Samenstel pagina. Dit is de pagina waarop de carrousels te zien zijn en waarop de gebruiker de auto zelf kan samenstellen. Kenza - De resultatenpagina. Het filteren van de verschillende opties (en eventueel de favorieten, afhankelijk van de tijd).

Backend

Sindy - Aanmelden en Inloggen. Sindy zorgt ervoor dat er een account aangemaakt kan worden en dat de accounts opgeslagen worden in database en tot slot dat gebruikers kunnen inloggen. Daarnaast gaat ze het favorieten stuk aanpakken waarbij favorieten opgeslagen kunnen worden. Esmé - API. Esmé maakt de API. Daarnaast kijkt ze naar het vertonen van plaatjes en hoe op basis van de api de juiste gegevens worden opgehaald. De gegevens uit de API moeten hiervoor worden opgehaald. Ook gaat zij aan de slag met het opslaan van favorieten.

Feedback

Week 1 # Toevoegen algemeen * Hoe kunnen we het wat socialer maken? Waardoor niet alleen mensen aan auto's gekoppeld worden maar misschien ook aan elkaar? * Wie is de doelgroep? Voor wie maken we het etc. klein stukje UCD. * Voortgang omschrijven op basis van de competenties 'ik ben verbeterd in het competentie 'oriënteren en begrijpen' doordat ik... heb uitgezocht'

Taakverdeling

  • Preciezer uitzoeken wie wat gaat doen
  • 'leider' en 'technische leider'
  • Planning - deadlines etc.
Week 2 # Github * Github kunnen we meer inzetten - bijvoorbeeld door ook de 'projects' functie te gebruiken. In plaats van een losse planning of los trello bord kunnen we dit dus gebruiken om alles centraal te houden. * Denk aan de mappenstructuur. De mappenstructuur die Sindy heeft is de juiste. * Welke inhoud zetten we waar? Wat gaan/kunnen we al committen naar de master? * Breid de wiki wat uit, er mist nog wat informatie of het staat niet op de juiste plek. Voor nu is het nog overzichtelijk maar omdat het steeds meer wordt, let op dat het nog duidelijk wordt. * Maak codeafspraken zodat je codestandaarden kunt invoegen. Linten en committen naar de main - wie gaat dat doen? is iedereen verantwoordelijk voor het eigen deel of sturen we 1 iemand als 'architect' op.
Feedback verwerking We hebben de 'projects' functie ingesteld, waarbij iedereen zijn of haar eigen taken kan invullen. Dit heeft voor meer overzicht gezorgd binnen de groep. Iedereen weet nu van elkaar waar ze staan en wat er nog moet gebeuren, ook betreffende de team taken. Hiermee kan iedereen makkelijk en efficient aan de slag.

We werken meer vanuit de mappenstructuur vanuit de backenders. Dit houdt in dat we de frontenters laten committen naar de basis van de backenders zodat de mappenstructuur overzichtelijk en kloppend blijft.

Sindy is aangesteld als de Architect, zij zorgt dat de code netjes en overzichtelijk is en dat alles wat meer een geheel wordt. Esmé is aangesteld als eindverantwoordelijke voor de team wiki en het overzicht.

Proces

Verloop Het proces liep zowel heel soepel als af en toe wat moeizaam. Up's en downs dus! Iedereen wist wat er moest gebeuren en kon dus individueel goed aan de slag. Zoals ook bleek uit de feedback, hadden we als team af en toe wat moeite met de verbanden leggen en de communicatie wat betreft hoe we alles tot een geheel gingen maken. Dit had mede te maken met de opzet van het vak overigens, waarbij frontend en backend tegelijk aan de slag gaan, en dingen dus soms dubbel gebeurden, of juist niet gebeurden, of opnieuw moesten omdat het niet uitkwam op deze manier. Ook was er niet altijd duidelijk voor de groep wat precies viel onder backend en frontend waardoor er af en toe ook wat verwarring ontstond. Hoewel het niet helemaal vlekkeloos verlopen is, zijn we wel tevreden over het eindresultaat. Iedereen heeft een bijdrage geleverd aan ons project waar we allemaal trots op zijn. Nogmaals, iedereen wist wat er verwacht werd en kon daarmee goed aan de slag, indien er hulp nodig was konden we bij elkaar terecht en ook werden er soms taken van elkaar overgenomen als we zagen dat iemand even te veel tegelijk had.
Wie deed wat? ## Esmé - server opstarten (oefeningen in de les) - connectie met mongodb (oefeningen in de les) - renderen van de detail pagina - Id vinden dat passend is bij het resultaat waar je op klikt - Gegevens ophalen uit de database - bookmark (favorieten) toevoegen - bookmark (favorieten) verwijderen - Favorieten koppelen aan gebruikers - controle aanmaken voor of de auto wel bestaat - anders feedback met foutmelding - testfunctie voor tonen volledige api in JSON - Resultaten ophalen op basis van de build pagina - Statische HTML omzetten in dynamische EJS - Juiste gegevens uit de api toepassen op de ejs bestanden (passende resultaten laten zien en passende detailpagina geven) - api bouwen - Van resultaten en favorieten 1 pagina gemaakt, omdat dit vrijwel dezelfde pagina. Afhankelijk van de actie de passende gegevens toewijzen aan de pagina - error handling (oefeningen in de les) - webserver starten (oefeningen in de les)

Sindy

  • server opstarten (oefeningen in de les)
  • connectie met mongodb (oefeningen in de les)
  • account aanmaken
  • wachtwoord ophalen en wachtwoord hashen
  • Gegevens ophalen uit de database
  • inloggen met account
  • sessie aanmaken - is de gebruiker ingelogd? Op basis van of de gebruiker ingelogd is de volgende actie laten gebeuren
  • account vinden in de database
  • wachtwoord vergeten?
  • Nieuw wachtwoord aanvragen
  • emailadres aanpassen
  • mijn account - waarin je je account gegevens kunt aanpassen
  • avatar opslaan en nieuwe avatar kiezen
  • gebruikersnaam wijzigen
  • uitloggen
  • account verwijderen
  • Statische HTML omzetten in dynamische EJS
  • error handling (oefeningen in de les)
  • webserver starten (oefeningen in de les)

Furkan

  • api fetch (oefeningen in de les)
  • List zoeken (oefeningen in de les)
  • List sorteren (oefeningen in de les)
  • Styling pagina's (hoofdpagina, bouwpagina en overzichtspagina)
  • Opzet styling zoals basis opzet van knoppen, achtergronden, property's etc
  • Pagina's responsive gemaakt
  • Html bouw pagina
  • Css bouw pagina
  • Javascript bouw pagina met Swiper
  • Data doorsturen tussen pagina's van bouw naar resultaten zoals de gekozen auto onderdelen
  • Html resultaten pagina
  • Css resultaten pagina
  • Javascript resultaten pagina
  • Gepersonaliseerde resultaten gebaseerd op je keuze bij het bouwen met query's
  • Illustraties van de verschillende auto onderdelen

Kenza

Gevraagd om een lijstje maar niets naar mij gestuurd.

Yani

Gevraagd om een lijstje maar niets naar mij gestuurd.

Competenties als team Oriënteren en begrijpen - tijdens de brainstorm, waarbij we de verschillende concepten bekeken aan de hand van de opdracht. Wat was geschikt? Waarin kunnen we alle verplichte componenten kwijt? Waarvan kunnen we allemaal iets leren? Welk onderwerp vinden we allemaal interessant? Welk concept vindt iedereen leuk om uit te werken?

Verbeelden en conceptualiseren

  • Tijdens de tweede fase van het project, waarin we wel al een concept hebben, maar hoe nu verder? Wat is belangrijk voor onze eindgebruiker? Denk aan job stories. Waar heeft de gebruiker/doelgroep behoefte aan? Wat is nuttig en wat is minder nuttig? Wie is überhaupt onze doelgroep?

Prototypen en uitwerken

  • We hebben het concept verder uitgewerkt door schetsen te maken. Hierbij hebben we gekeken naar de optimale manier om ons concept tot leven te laten komen, waarbij de gebruiker niets te kort komt en het ontwerp zal voldoen aan (bijna) alle eisen.

Evalueren

  • We evalueren op basis van de job stories. Helaas hebben we geen tijd gehad om een test uit te voeren binnen de doelgroep. In de ideale situatie zouden we dit natuurlijk wel doen, om eventuele fouten of onduidelijkheden uit het ontwerp te halen.
  • voldoet het prototype aan de randvoorwaarden (job stories)?
  • Als ik een nieuwe auto wil kopen, wil ik hulp krijgen, zodat ik een goede keuze kan maken
  • Voldoet. We hebben namelijk een ondersteunende tool gemaakt waarmee de gebruiker een gelimiteerd aantal opties krijgt, om het niet te overweldigend te laten worden.
  • Als ik een nieuwe auto wil kopen, wil ik al mijn eisen erin kunnen verwerken, zodat ik de perfecte optie heb
  • De gebruiker bouwt een auto op basis van beperkte voorkeuren maar kan vervolgens wel filteren en sorteren op meer opties. Voor elke auto zijn veel specificaties te zien waarbij de gebruiker gegarandeerd een juiste optie zal vinden
  • Als ik mijn droomauto zoek, dan wil ik zien welke auto's daarbij in de buurt komen, zodat ik een auto kan vinden die het meeste lijkt op mijn droomauto.
  • Voldoet. Je kunt filteren op basis van bijvoorbeeld kilometer stand, waarbij je zelf kunt kiezen wanneer de kilometer stand te hoog wordt. Daarbij kun je auto's toevoegen aan favorieten om ze makkelijk te vergelijken.
  • Als ik een nieuwe auto wil kopen, wil ik weten wat de auto allemaal kan, zodat ik een afgewogen beslissing kan maken.
  • Voldoet. Er zijn veel specificaties beschikbaar op de detail pagina.
  • Als ik een nieuwe auto zoek, wil ik auto's kunnen vergelijken zodat ik weet wat de beste keuze is voor mij.
  • Voldoet. Je kunt filteren op basis van bijvoorbeeld kilometer stand, waarbij je zelf kunt kiezen wanneer de kilometer stand te hoog wordt. Daarbij kun je auto's toevoegen aan favorieten om ze makkelijk te vergelijken.
  • Als ik een nieuwe auto zoek, wil ik favorieten opslaan zodat ik deze kan vergelijken bij de dealer.
  • Voldoet. Je kunt auto's toevoegen aan favorieten om ze makkelijk te vergelijken.
  • Als ik een nieuwe auto zoek, wil ik kunnen filteren op prijs zodat ik een keuze kan maken binnen mijn budget.
  • Voldoet. Je kunt filteren op prijs.
  • Als ik een nieuwe auto wil kopen, wil ik weten wat anderen vinden van de auto, zodat ik dat mee kan laten wegen in het maken van mijn keuze.
  • Voldoet nog niet. Indien er meer tijd beschikbaar is zou er een deel knop geïmplementeerd worden waarmee gebruikers auto's kunnen delen met anderen om meningen te vragen. Op dit moment is dit geen mogelijkheid.

In de ideale situatie zouden er meer foto's beschikbaar zijn van de auto's, zouden er meer opties zijn op de build pagina (meer typen bijvoorbeeld ipv alleen SUV, Hatchback en Coupe. Tot slot zouden we het concept meer willen uitbreiden, bijvoorbeeld door een deelknop, een optie tot kopen, contact leggen etc.

⚠️ **GitHub.com Fallback** ⚠️