WOGO - Trisjan/Freago GitHub Wiki

Op deze pagina houd ik mijn eigen documentatie van mijn eigen werk bij van Wogo. Wogo is het teamopdracht waar ik samen werk met Michelle en Sanne.

Op de dag van Maandag 15 April hebben we een start gemaakt aan het project van de opdrachtgever Wogo. Michelle is hier al voorheen mee bezig geweest. Michelle heeft de nieuwkomers (Sanne & Trisjan) een kleine briefing gegeven over het bedrijf Wogo. Zij gaf ons een rondleiding in de repository en liet ons haar code zien die ze tot nu geschreven had. Michelle gaf ons daarna een rondleiding in het projectboard en liet alle taken zien. Sanne kwam al snel met een aanbeveling om 2 taken te combineren naar 1 taak omdat ze overeen komen en nog steeds klein genoeg zijn als ze samen 1 taak worden.

Doelstellingen van het project. Het herontwerpen en optimaliseren van de WOGO website om te voldoen aan de groeiende behoeften van het platform, met als kernpunten het verbeteren van de laadtijden en responsiviteit, en het integreren van nieuwe functies. Deze functies omvatten het boeken van individuele bars met specifieke cocktails, een realtime synchronisatie met de reserveringssystemen van bar-eigenaren, en een verbeterde chatbox met AI-ondersteuning voor efficiënte klantinteracties.

De website wordt voorzien met diverse pagina's, waaronder een Homepage, Ticketpagina's, en een Work-with-us pagina met subpagina's voor "Are you a bar" en "Are you a brand". Daarnaast komt er een How-it-works pagina, een pagina voor Groepsuitjes met een contactformulier, en secties voor About, Blog, Giftcard, een Reserveringssysteem en een Betalingssysteem.

Ik heb voor de ticket overview page lofi schetsen gemaakt van de pagina en van de cards

Hieronder is de lofi schets te zien van de pagina.

Hieronder zijn de lofi schetsen te zien van de variaties van de kaarten die ik bedacht heb.

Hieronder zijn de lofi schetsen te zien van de variaties van de filter dropdown die ik gemaakt hebt.

Nadat ik mijn lofi schetsen heb gemaakt heb ik feedback gevraagd aan mijn teamgenoten.

Ik kreeg feedback van Sanne op mijn card designs

Na de feedback van sanne ben ik begonnen met het maken van een hifi schets en heb ik haar punten daarin meegenomen.

Na de feedback sessie met Berat heb ik mijn hifi versie nog een keer aangepast en dat is er zo uit komen te zien.

Bij het maken van de filter heb ik eerst zelf onderzoek gedaan. Ik heb het toen eerst zelf geprobeerd. Ik leerde dat bij het serverside filteren je gebruik moet maken van je url en params. Dit heb ik een tijdje geprobeerd maar ik kwam er niet uit. Een mede student genaamd Badr heeft dit ook gedaan voor zijn project, ik heb bij hem nagevraagd voor uitleg. Hij liet me zijn code zien en vertelde hoe het werkt. Na zijn uitleg snapte ik het wat beter, toen heb ik zijn code nogmaals bestudeerd en deze weten om te bouwen om het voor mijn leertaak te kunnen gebruiken.

Ik heb Badr benaderd via teams met de vraag of hij een bron of website voor mij had voor het bouwen van de filter.

Badr heeft mij een aantal bronnen opgestuurd voor het bouwen van de filter. Dit heeft mij geholpen bij het bouwen van de filter. Door deze bronnen heb ik de logica geanalyseerd. HIj stuurde me het volgende:

• Sveltekit documentatie van forms actions link
• Een video over forms actions link
• Een video over een PE form link
• Een blog die uitleg geeft en in stappen laat zien hoe die een filter PE heeft gemaakt link

De derde link kwam goed van pas met hoe je een form PE kan maken, deze heb ik gebruikt bij het maken van de form voor Freago. Dit is hier terug te lezen hoe ik het heb gedaan.

Verder heb ik zelf gekeken naar de links en vervolgens naar Badr zijn code. Ik heb ook ChatGPT om hulp gevraagd voor de logica om deze te begrijpen en heb vervolgens mbv Badr en ChatGPT de filter kunnen implementeren in het WOGO project. Hieronder leg ik uit hoe ik dat gedaan heb

Nadat het me gelukt is stuur ik Badr nog een berichtje van mijn succes.

Ik heb op mijn pagina een 2 componenten gebruikt waarvan ik één component zelf heb gebouwd. Deze componenten zijn ook dynamisch dus daar moet je data aan meegeven. Dat heb ik op de volgende manier gedaan.

Ik importeer de componenten (filter en ticketcard) vanuit de $lib/index en exporteer cities en itemCollection die ik vanuit de server meegeef aan de pages. De cities en itemCollection bevatten data. Bij het gebruiken van de componenten gebruik ik geef ik de de values van cities en itemCollection mee aan de componenten zodat deze ingeladen worden met de componenten.

<script>
  import { Filter, TicketCard } from '$lib/index'
  export let itemCollection
  export let cities
</script>

<section>
  <section>
    <h1>Tickets</h1>
    <Filter {cities} />
  </section>

  <section>
    <TicketCard {itemCollection} />
  </section>
</section>

De filter component (die ik heb gemaakt) ziet er als volgt uit. Ik exporteer de cities die ik dus meegeef aan het component. Doordat ik de cities meegeef loop ik de values in de form met een for each loop zodat ik voor elke waarde een value in de dropdown heb. Met elke waarde wil ik kunnen filteren dus ik zet een function op de form op de submit. De function is de applyfilter function die ik boven aan de page in de script heb geshreven. de applyfilter function haalt de value uit de form op, dit is nu een parameter en deze zet hij dan in de url. Op basis van de url wordt er dan server side een nieuwe aanvraag gedaan met de cards die overeenkomen met de value in de url. Deze cards krijg je dan terug in de ticketoverview page.

<script>
  import { page } from '$app/stores'
  import { onMount } from 'svelte'

  let filter = []
  export let cities

  onMount(() => {
    const urlSearchParams = new URLSearchParams($page.url.search)
    filter = urlSearchParams.getAll('locatie') || []
  })

  function applyFilter() {
    return function (event) {
      event.preventDefault()
      const formData = new FormData(event.target)
      const locatie = formData.get('locatie')
      const url = new URL(window.location)

      if (locatie) {
        url.searchParams.set('locatie', locatie)
      } else {
        url.searchParams.delete('locatie')
      }

      window.location = url
    }
  }
</script>

<section>
  <form on:submit={applyFilter()}>
    <select name="locatie" id="locatie-select" tabindex="0">
      <option value="" selected={!filter}>Alle locaties</option>
      {#each cities as city}
        <option value={city} selected={filter === city}>
          {city}
        </option>
      {/each}
    </select>
    <button type="submit">Pas filter toe</button>
  </form>
</section>

Contentful was een knelpunt in dit team, omdat ik er niet eerder mee gewerkt had was het ook moeilijk om snel mijn draai te vinden in dit team. Ik snapte het schrijven van de query niet en ik was niet de enige. Sanne was ook nieuw in dit project en zij had ook nog niet eerder gewerkt met contentful. Ik heb dit bespreekbaar gemaakt met Michelle dat Sanne en ik moeite hebben met de nieuwe werkwijze van contentful. Zij heeft ons hierin begeleid, echter snapte we het nog steeds niet altijd even goed tijdens het bouwen van onze website.

Halverwege het semester kwam Michelle erachter dat er een betere manier was om te werken met contentful in combinatie met sveltekit. Dit betekende helaas dat de codebase als het ware gereset werd. Dit zorgde ervoor dat we eigenlijk weer begonnen vanaf 0. We hadden daardoor geen pagina's meer en ik had kort geleden nog een pull request gedaan naar de release candidate branch. Doordat we een nieuwe manier van werken gingen toepassen in onze codebase, was er een nieuwe logica toegepast die Sanne en ik opnieuw moesten leren. Dit was voor ons een enorme setback en het werkend heel erg demotiverend. We liepen erg lang vast vanwege de nieuwe werkwijze want Michelle had deze eigenlijk nog niet zo goed onder de knie. Hierdoor waren we heel veel tijd kwijt geraakt.

Wij hebben vandaag informatie gekregen over hoe het project een beetje in elkaar zit en hebben deze dag gebruikt voor invullen van het teamcanvas en de algemene afspraken zoals wanneer we standups doen, meetings met de opdrachtgever hebben en de kampvuursessies.

• Michelle: Heeft vandaag alles uitgelegd en veel informatie gegeven over het project en ons wegwijs gegeven in het projectboard.
• Trisjan: het projectoverzicht is nog niet helemaal duidelijk voor Trisjan en vind het lastig om zich te focussen, omdat het project van CMS nog loopt.
• Sanne: Aangegeven dat het project voor mij te onoverzichtelijk is door het overvolle projectboard. Er is zoveel informatie in genoteerd dat het project daardoor onoverzichtelijk is en dus niet effectief naar mijn mening. Na dit aangegeven te hebben aan het team in de standup is het duidelijk waar ik nu kan kijken om de taken duidelijker te zien en bespreken we ook elke maandag even het projectboard. Ik ga aan de slag met het design van de detailpages de komende dagen.

MEIVAKANTIE

• Michelle: bezig met data ophalen voor verschillende pagina's.
• Trisjan: Is begonnen aan de overzichtpagina van WOGO en heeft goede ideeën voor de ticketkaartjes.
• Sanne: Na het bekijken van de taken welke wel en niet haalbaar zijn in deze periode en het iets te minimaliseren heb ik voorgesteld om bepaalde taken los te laten en de prio te verschuiven naar "Want to have". Bijvoorbeeld de wil om Typescript te implementeren, terwijl wij dit allemaal niet beheersen en de onderzoeken naar moeilijke functionaliteiten waar wij niet aan toekomen.

• Michelle: Bezig geweest met het CMS systeem in te richten en de homepage. En update gestuurd:

• Trisjan: Tickets en filtersysteem nog niet af, maar wel goed op weg. Wel al een Pull request gedaan die meteen goed gekeurd werd.
• Sanne: Aangegeven in de standup dat ik moeite heb met dat er meerdere repositories zijn waaruit gewerkt word en dit gewoon niet efficient is. Ook na de standup met de docenten daarom toch besloten om het hele project over te zetten naar FDND-agency, zodat dubbel werk hierdoor word voorkomen en de manier van werken efficiënter is. Ook aangegeven dat Typescript misschien nu niet slim is binnen het tijdsbestek dat we hebben, aangezien wij hier alledrie niet genoeg van afweten. Dit hebben wij daarom niet toegepast.

Besloten om de laatste twee weken nog codebase om te gooien naar een betere manier van werken, omdat wij tegen aan aantal problemen aanliepen in het CMS systeem en overige dingen. Michelle en ik hebben met Justus gezeten om een begin te maken aan de reset van de codebase. We zijn wel een beetje laat hiermee en hebben nu dus nog maar 2 weken om het ons eigen te maken, maar hebben vertrouwen erin dat dit juist makkelijk is voor ons nu.

De codebase staat gelukkig en we kunnen vandaag dus echt verder met Contentful en het project in het algemeen. Vandaag hebben Michelle en Trisjan aan hun eigen project gewerkt. Ik heb aangegeven dat mijn taken voor de detailpagina naar volgende week moeten worden getild door de vertraging met de data, maar dat ik er vandaag wel met het tweede component voor de detailpage van WOGO in de nieuwe Codebase ga beginnen.

• Michelle: Bezig geweest met optimaliseren van de homepage, carousel en een probleem met de images. Helaas op discard geklikt van stashed changes waardoor er code verloren is. Gaat dit proberen te fixen en gaat daarna een pull request schrijven voor de homepage.
• Trisjan: Problemen met het bouwen van een filter zonder server side data, geprobeerd met mockdata maar nog zonder effect. Ook een kleine een beetje stress over de voortgang van het project.
• Sanne: Problemen gehad met errors en daardoor erg teleurgesteld dat het mij niet lukt om deze errors op te lossen en Contentful onder de knie te krijgen. In een videocall met Justus geprobeerd om meer grip te krijgen op het probleem, daardoor gevonden waar het probleem lag. Ook fijn geweest voor iets meer vertrouwen in mijn bewijslast en mentale staat. Ik ga verder met het About this walk component.

Als team taken doorgenomen en voor de laatste sprint(4) taken aangemaakt en alles laatste veranderingen gedocumenteerd. Trisjan heeft een update gegeven via team:

Hieronder ga ik de sprint reviews met de opdrachtgever bijhouden.

Op de dag van 26-04 hebben wij om 09:30 in de ochtend een meeting gehad met de opdrachtgever. Hierbij hebben Sanne en Trisjan kennis gemaakt met de opdrachtgever en zichzelf. Daarnaast hebben we individueel ons werk gepresenteerd aan de opdrachtgever. Michelle heeft haar (live) homepage laten zien die ze gebouwd heeft. Trisjan liet zijn design zien van de kaarten en het overzichtspagina die hij in Figma heeft gemaakt. Sanne liet haar design zien van de detailpagina die zij gemaakt heeft in Figma. Wij hebben per persoon nuttige feedback gekregen uit deze meeting.

Homepage

Maroussia had de volgende punten als feedback op de homepage van Michelle:

• Duidelijker maken dat er tickets zijn, ze staan nu namelijk onder de hero section die een groot gedeelte van de pagina innemen.
• De tekst van de button in de hero section veranderen. In plaats van "book a walk" de tekst veranderen in "book a cocktail walk".
• In de navigation bar een button maken met "book a cocktail walk".

Overzichtspagina + cards

Maroussia had de volgende punten als feedback op de overzichtspagina en cards van Trisjan:

• Ticket cards een kleine omschrijving geven wat je krijgt zodat er makkelijk in één oogopslag te zien is wat elke walk te bieden heeft en onderscheid maken makkelijker wordt.
• Gebruik maken van een cocktail icon waarbij te zien is hoeveel cocktails je krijgt.
• Plaatjes als achtergrond is een mooie toevoeging, alleen zorg ervoor dat er wel altijd een cocktail te zien is. Ook graag gebruik maken van eigen foto's.
• Giftcards dropdown is een logische oplossing.

Detailpagina

Maroussia had de volgende punten als feedback op de detailpagina van Sanne:

• Overview zou hoger kunnen, maar niet van belang.
• Maak duidelijk op welke dagen de walk beschikbaar zijn als je als gebruiker van plan bent om de walk te boeken.
• Maak duidelijk welke tijden de walk gehouden wordt zodat de gebruiker makkelijker kan zien welke tijden ze kunnen boeken.
• Icons aanpassen bij de titels in Figma.

Naast dat we onze designs hebben gepresenteerd hebben we verteld aan Maroussia dat we niet op schema lopen. We vertelde dat dit dus problemen kan veroorzaken in de toekomst ivm het gebrek aan tijd voor taken. Ik heb verteld dat ik eigenlijk ook te werk zou gaan met de About page, maar dat ik die pagina zal niet meer zal meenemen in mijn uren. Doordat er een achterstand is opgelopen komen we niet lekker meer uit met de uren. Van alle pagina's die ik mezelf aangewezen had, had de about page de laagste prioriteit dus koos ik ervoor om de pagina te laten vallen (in overleg met het team). Dit heb ik kunnen zien omdat ik samen met Michelle de taken had gelabeld met de MoSCoW termen. Dit hebben we overlegd met Maroussia. We vertelden dat door technische problemen (het inrichten van ons CMS contentful) we niet veel konden doen aan de website en daardoor tijd verloren. Zij begreep dit en was het er mee eens dat we de about page konden laten zitten voor nu ivm tijdsnood.