Meesterproef WEEK 05

🕛 13-05-2024 t/m 17-05-2024

Taken per dag

Dag	Taken
MAANDAG 13/04	Retrospective
DINSDAG 14/04	Eigen Project
WOENSDAG 15/04	Clean project opzetten
DONDERDAG 16/04	Eigen Project
VRIJDAG 17/04	Data structure aangepast

Week Planning

Analyseren 🔎

📅 13-05-2024

Retrospective Sprint 1 & Sprint 2

Wat ging goed?

• De taken waren duidelijk verdeeld onder teamleden. Regelmatig updates geven aan elkaar en elke week het projectboard doornemen.
• Iedereen is productief en reageert snel in de chat.
• Iedereen is op de teamwerkdagen aanwezig.
• Iedereen is behulpzaam en niemand veroordeelt elkaar.
• Algemeen goed gevoel van tevredenheid over het project en enthousiasme voor de resterende sprints.

Wat ging niet goed?

• Toegang tot Contentful duurde langer dan verwacht, hoewel voor de rest wel overal toegang voor is.
• Het projectboard was eerst niet duidelijk, maar werd overzichtelijker na gezamenlijke doorloop en wekelijkse taakbesprekingen.
• Er werden niet veel pull-requests gedaan, waardoor het moeilijk was om de voortgang van te traceren(Michelle)

Welke successen hebben we deze periode behaald?

Taken in de eerste sprint zijn afgerond:

Taken tweede sprint:

Bovenstaande taken zijn afgerond, maar de andere taken worden meegenomen naar Sprint 3:

Taken Sanne:

• Detail pagina bouwen
• Design aanpassen na review

Taken Trisjan:

• About pagina bouwen

Taken Michelle:

• ⁠Bouwen work with us pagina
• ⁠Contact formulier (plan intake)
• Design About page
• Aanpassingen review opdrachtgever.

Welke lessen kunnen we trekken uit zowel onze successen als mislukkingen? Michelle: Het inschatten van taken was niet reëel, waardoor er meer taken opstapelden dan verwacht en sommige taken vertraging opliepen. Trisjan: Het ontbreken van benodigde data verhinderde voortgang; in de toekomst zou dit eerder aangekaart moeten worden door Trisjan.

Hoe kunnen we deze lessen toepassen in toekomstige projecten?

• Betere taakinschattingen en voortdurende evaluatie van benodigdheden en voortgang om vertragingen te voorkomen.
• Regelmatig controleren of alle benodigde middelen beschikbaar zijn voor het starten van taken.
• Implementeren van meer gestructureerde check-ins voor taakvoortgang. Overwegen van het gebruik van een nieuw tool voor projectmanagement dat beter geschikt is voor onze behoeften.

Zijn er zorgen over de werkdruk of de teamdynamiek?

Werkdruk is een aandachtspunt, vooral iedereen zich overweldigd voelen door de hoeveelheid werk.

Hoe kunnen we elkaar beter ondersteunen?

Meer onderlinge hulp en mogelijk het toewijzen van mentors voor degenen die nieuw zijn met bepaalde taken of tools en door dagelijkse laten weten welke taken er zijn afgerond voor die dag. 


Bouwfase ⚙️

📅 15-04-2024

Rebase naar een clean sveltekit project met slugs

Commit Justus

Beperking in Contentful:

In Contentful kunnen we maximaal 20 modellen aanmaken. Hierdoor is het niet mogelijk om voor elke pagina een apart model te creëren. Hiervoor heb ik 1 "pages" model aangemaakt, dit model is herbruikbaar voor elk pagina. Omdat niemand van ons weet hoe we het beste de logica hiervan kunnen verwerken hebben we Justus om hulp gevraagd. Onze eerste aanpak was om een page aan te maken met een route met een apart server bestand en een apart page bestand, maar hierdoor wordt het niet dynamische voor zowel de componenten en de pagina's zelf.

Oplossing gezocht met Justus:

Samen met Justus overlegd hoe we dit het beste per pagina kunnen aanpakken. Justus gaf aan dat wij de volgende aanpak moesten volgen: Dat je op basis van de slug parameter, de juiste gegevens voor de pagina moet ophalen en deze terug moet geven, de volgende stap is dat de juiste items in de componenten per pagina meegestuurd moeten worden.

Structuur in Contentful:

Het model "pages" ziet er in Contentful als volgt uit:

Implementatie van Dynamische Pagina's met Slugs in Svelte en Contentful

Hier leg ik stap voor stap uit hoe ik dynamische pagina's heb opgezet met behulp van slugs in een Svelte- en Contentful-project. Deze aanpak zorgt ervoor dat elke pagina unieke content kan weergeven gebaseerd op de slug in de URL.

Stap 1: Slugs Synchroniseren in Contentful

Allereerst heb ik ervoor gezorgd dat alle links dezelfde slug hebben als die van de pagina's in Contentful. Dit houdt in dat de slugs in Contentful exact overeenkomen met die van de pagina's op de website.

Stap 2: Slug in de Query en Return naar de Page.svelte File

Vervolgens heb ik de slug in de GraphQL-query verwerkt en deze teruggestuurd naar de page.svelte file. De query ziet er als volgt uit:

page.server @[slug]

    pageCollection(where: {slug:"${params.slug}"}) {
      items {
        slug
        title
}

  return {
      pageData: items,
      slug: params.slug
  };

Stap 3: Slug in de Navigatie Component De slug wordt ook in de query voor navigatie (in de Layout.server file) verwerkt en teruggestuurd naar de navigatiecomponent. Dit zorgt ervoor dat de slugs in de navigatie overeenkomen met de slugs van de pagina's in Contentful.

header.svelte component

<Link href={link.slug} title={link.title} aria-label={link.label} noHover={true} />

Stap 4: Dynamische Componenten Renderen Daarna heb ik ervoor gezorgd dat de juiste componenten worden gerenderd op basis van de slug in de URL. Hiervoor heb ik een component map gebruikt die de juiste component koppelt aan elke slug.

<script>
 import { WorkWithUs, HomePage, GroupOutings, OverviewPage } from '$lib/index'
  export let data

 const componentMap = {
    home: HomePage,
    walks: OverviewPage,
    'work-with-us': WorkWithUs,
    'group-outings': GroupOutings,
  }
  
 const Component = componentMap[data.slug] || HomePage
</script>

<svelte:component this={Component} />

Stap 5: Pagina's en Componenten Koppelen Tot slot heb ik ervoor gezorgd dat de juiste componenten worden gekoppeld aan de pagina's op basis van de slug in de URL. De onderstaande code laat zien hoe de juiste items (componenten) worden meegegeven aan de Home-pagina:

<script>
  import { WorkWithUs, HomePage, GroupOutings, OverviewPage } from '$lib/index'
  export let data

  const componentMap = {
    home: HomePage,
    walks: OverviewPage,
    'work-with-us': WorkWithUs,
    'group-outings': GroupOutings,
  }
  
  const items = data.pageData.find((pageDataItem) => pageDataItem.slug === data.slug)
    .componentsCollection.items
    
  const Component = componentMap[data.slug] || HomePage
</script>

<svelte:component this={Component} {items} />

<script>
  import { Hero, TicketCard } from '$lib/index'
  export let items
</script>

<svelte:head>
  <title>{items[0].title}</title>
</svelte:head>

<Hero {items} />

<TicketCard />

Optimaliseren van de Query door performance problemen?

Het inladen van de pagina duurt best lang op advies van Joost hierna te kijken omdat dit mogelijk te maken heeft met de lange query. De query kan namelijk ervoor zorgen dat performance achteruit gaat. In de query worden alle pagina data en componenten opgehaald.

Materiaal

• sveltekit-how-do-i-do-slug-based-dynamic-routing
• ChatGPT