Meesterproef WEEK 01

🕛 15-04-2024 t/m 19-04-2024

Taken per dag

Dag	Taken
MAANDAG 15/04	- Sprintplanning uitleg, Sanne & Trisjan uitleg gegeven over het project, gedeeld in teams, Figma en Projectboard doorgenomen, teamcanvas samen gesteld, Code Conventie afspraken vastgesteld en team afspraken gemaakt
DINSDAG 16/04	Project planning met Trisjan, Gekeken wat er per taak nodig is.
WOENSDAG 17/04	Persoonlijk Project
DONDERDAG 18/04	Persoonlijk Project
VRIJDAG 19/04	Team overleg

Analysefase

Introductie project WOGO

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.

Code Conventie Afspraken

📅 15-04-2024

1. Project Structuur

1.1. Bestandsindeling Volg de principes van atomic design om componenten te structureren:

• Atoms: Kleinste herbruikbare componenten (bijv. Button, Icon).
• Molecules: Combinaties van atoms die samen een functie vervullen (bijv. SearchBar).
• Organisms: Combinaties van molecules die samen een sectie van een interface vormen (bijv. Header).
• Templates: Herbruikbare pagina layouts (bijv. MainLayout).
• Pages: Unieke pagina's die templates en organisms samenbrengen (bijv. Home).

src/
├── components/
│   ├── atoms/
│   ├── molecules/
│   ├── organisms/
│   ├── templates/
│   ├── pages/
├── graphql/
│   ├── queries/
│   ├── mutations/
├── lib/
├── routes/
├── styles/

2. Naamgevingsconventies

2.1. Algemeen

• Gebruik Engelse benamingen voor alle code elementen.
• Bestandsnamen voor CSS: Kebab-case (bijv. navigation-list).
• Bestandsnamen voor Svelte componenten: PascalCase (bijv. UserProfile.svelte).
• JavaScript/TypeScript variabelen en functies: camelCase (bijv. getUserData).

3. TypeScript Conventies

3.1. Typing Gebruik altijd expliciete types voor variabelen, parameters en return types. Definieer interfaces voor objecten en complexe datastructuren.

interface User {
  id: string;
  name: string;
  age: number;
}

3.2. Gebruik van any Vermijd het gebruik van het any type. Gebruik unknown als het type niet van tevoren bekend is en voer type checks uit.

4. CSS Conventies:

• Gebruik voor CSS-code altijd een apart bestand en zet dus geen CSS in je HTML-code.
• Gebruik in je CSS-code geen !important.
• CSS-code wordt in lower case geschreven.
• Maak in je CSS-code zo weinig mogelijk gebruik van id selectors (#).
• Voorzie je CSS-code zoveel mogelijk van zinvol commentaar.
• Gebruik zinvolle naamgeving waaruit blijkt wat de CSS-code doet of waar het voor gebruikt wordt.
• Webpagina’s zijn responsive voor telefoon, tablet en desktop

4.1. CSS Order:

• 🔗 CSS-rule-order

Team Canvas

📅 15-04-2024

Als aller eerste stap in dit blok hebben we als team samen een teamcanvas gemaakt. Hierin hebben we de normen en waarden van het team besproken en hebben we onze zwaktes en sterktes bespreekbaar gemaakt. Ook hebben we een aantal belangrijke regels opgesteld als team waar we ons aan zullen houden om zo het respect naar elkaar toe te waarborgen. Het team canvas is hieronder te zien.

Team Afspraken

📅 16-04-2024

• Werkdagen: Sanne & Trisjan: Maandag en Vrijdag. Michelle: Maandag, Dinsdag en Vrijdag
• Documentatie bijhouden in de Readme en Wiki.
• Voortdurende communicatie via Teams.
• Elk teamlid zorgt ervoor dat je de dagelijkse voortgang volgt, en indien nodig je planning bijwerkt in het projectboard.
• Branch-namingconventie: feature/naam van het teamlid/issue nummer/naam van de feature. (bijv. feature/Michelle/43/navigation)
• Codebeoordeling: Elke teamlid bekijkt je PR en keurt en goed voordat de code wordt samengevoegd.

Voorbeeld PR-schrijven

• Issue-koppeling: Koppel PR's aan gerelateerde GitHub-issues om de traceerbaarheid en communicatie te verbeteren
• Merge-strategie: Merge pull request.

• Elke week een stand-up op maandag met de opdrachtgever:
• Elke twee weken een sprint review met de opdrachtgever op maandag(totaal 4 sprints)
• Elke twee weken een Retrospect met het team op maandag
• Kampvuur-sessie: VRIJDAG 14/06
• Laatste week: 10-06-2024 t/m 14-06-2024: Readme schrijven, Oplevering Project, laatste testfase?

🕛 UREN

• Michelle: 24u p/w
• Sanne: 16 p/w
• Trisjan: 16 p/w

Doelstellingen en Scope Definiëren

Opdrachtomschrijving

• WOGO wil een oplossing implementeren om plaatsconflicten tussen het reserveringssysteem van de website en de agenda van de cocktailbars te voorkomen.
• WOGO wil een oplossing voor het responsive problemen
• WOGO wil een oplossing voor het handmatig menselijke inbreng in een chatbox.
• WOGO wil een oplossing voor het reserveringssysteem voor losse tickets bij een specifieke bar, gericht op individuele aankopen van prepaid drankjes.
• WOGO wil een oplossing voor het ongemak dat gebruikers momenteel ervaren doordat ze beperkt zijn in hun mogelijkheid om zelf boekingen te wijzigen.
• WOGO wil een giftcard-systeem
• WOGO wil een oplossing implementeren voor het eenvoudig plaatsen van reviews. 
• WOGO wil een oplossing voor een login-systeem**
• WOGO wil een volledig nieuwe dynamische, app-like gebruikersinterface (UI)

Opdracht omschrijving pagina's

• About pagina
• Ticketpagina's
• Work-with-us pagina met subpagina's voor "Are you a bar" en "Are you a brand"
• Work-with-us pagina met subpagina's voor "Are you a bar" en "Are you a brand"
• Groepsuitjes pagina
• Blog Pagina

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.

3. Bepaal de scope: wat wordt wel en niet meegenomen in het project?

🔴 Must-have	🔵 Wont-have
[COCKTAIL ROUTES PAGE] Als potentiële klant van WOGO wil ik een duidelijk en gemakkelijk toegankelijk overzicht kunnen bekijken van verschillende cocktailwandeling-routes, zodat ik gemotiveerd raak om een boeking te plaatsen vanwege het gemak en de duidelijkheid die het biedt.	[VERTALING]Als een internationale bezoeker van de WOGO website wil ik de inhoud van de website kunnen lezen in mijn voorkeurstaal, zodat ik de aangeboden informatie volledig kan begrijpen.
[WORK WITH US PAGE] Als bar- of merkeigenaar wil ik meer informatie vinden over hoe ik kan samenwerken met WOGO en wat de voordelen zijn.	[GIFTCARD] Als klant van WOGO wil ik online eenvoudig een cadeaubon kunnen kopen en schenken.
[PREPAID DRINKS RESERVERINGSYSTEEM] Als klant wil ik losse tickets kunnen kopen voor specifieke bars en prepaid drankjes via de website, zodat ik gemakkelijk kan plannen en betalen voor mijn uitjes.
[ABOUT PAGINA] Als nieuwe gebruiker wil ik meer te weten komen over WOGO en wat het platform te bieden heeft.	[CHATBOX] Als gebruiker van WOGO wil ik via de website toegang hebben tot een AI-gestuurde chatbox die mijn vragen direct beantwoordt en gepersonaliseerde ondersteuning biedt.
[GROUP OUTINGS] Als klant van WOGO wil ik gemakkelijk een cocktailwalk voor mijn groep kunnen boeken door simpelweg een datum en locatie te kiezen, zodat we samen kunnen genieten van heerlijke cocktails en onvergetelijke momenten tijdens een gezellige activiteit.	[RESERVERING] Als gebruiker van WOGO wil ik eenvoudig een cocktailticket kunnen reserveren voor een specifieke bar of evenement.
[BLOG PAGE] Als gebruiker wil ik toegang hebben tot artikelen en updates over cocktailtrends en evenementen.	[BETALING SYSTEEM ]Als gebruiker wil ik een ticket van de cocktailwalk willen kopen, zodat ik de activiteit kan plannen wat past binnen ons budget.
	[LOYALITEITEN PUNTEN SYSTEEM] Als frequente klant van WOGO wil ik loyaliteitspunten kunnen verdienen en inwisselen bij elke aankoop of boeking die ik doe via de website

Planning

📅 15-04-2024

Hoe Werkt het Project board & Hoe heb ik het ingericht?

Labels

• Developmentfase: Bepaalt de fase van de ontwikkeling (bijv. Ontwerp, Ontwikkeling, Testen)
• MosCOW: Prioriteitsmodel (Must Have, Should Have, Could Have, Would Have)
• Sprints: Tijdsblokken waarin gewerkt wordt aan projectdoelen
• Weeks: Weken binnen een sprint
• Workday: Dagen binnen een week
• Scheduled hours: Geplande uren voor een taak
• Actual hours: Bestede uren aan een taak
• Pages: Paginaomschrijving

Groepering:

• Board: Overview: Geeft een totaaloverzicht van alle projecttaken

Link naar Board →

Link naar Overview →

• Sprints: Taken gegroepeerd per sprint

Link naar Sprints: Voorbeeld →

1. Takenlijst:

• Schrijf alle taken op die je moet doen, groot en klein per pages (In de overview zijn de taken gegroepeerd op pages)
• Grote taken in kleinere verdeeld.
• Development fase labels gekoppeld aan taken.

2. Taken geprioriteerd

• De MosCOW-methode (Must Have, Should Have, Could Have, Would Have) gebruikt.

3. Schat de benodigde tijd in:

• Bekeken met het team hoeveel tijd nodig voor een taak?

4. Plan je taken in:

Rekening gehouden met uren:

🕛 UREN

• Michelle: 24u p/w
• Sanne: 16 p/w
• Trisjan: 16 p/w

• 4.1. taken over de beschikbare tijd verdeeld in sprint
• 4.2. taken in de sprint verdeeld onder de weken
• 4.3. taken in de weken verdeeld in onder de dagen
• 4.4. na het afronden actual hours labels gekoppeld, zodat ik kan reflecteren op realistische plannen.

Takenlijst met reflectie

Dag	Taken
MAANDAG 15/04	- Sprintplanning uitleg, Sanne & Trisjan uitleg gegeven over het project, gedeeld in teams, Figma en Projectboard doorgenomen, teamcanvas samen gesteld, Code Conventie afspraken vastgesteld en team afspraken gemaakt
DINSDAG 16/04	Project planning met Trisjan, Gekeken wat er per taak nodig is.
WOENSDAG 17/04	Persoonlijk Project
DONDERDAG 18/04	Persoonlijk Project
VRIJDAG 19/04	Team overleg