Inrichten van de API

[SamaraFellaDina]

Wij gaan werken naar een Directus API, Kijk naar #18 om te zien hoe die moet worden ingericht

• API

Voorbeeld datamodel #18

[SamaraFellaDina]

Ik heb zojuist toegang gevraagd aan joost naar de API toegang

[SamaraFellaDina]

Er zijn twee datasheets

• Van de verschillende sites
• Van alle scanresultaten

Hoe werkt deze API?

• Als allereerst heb je de data van de sites

  {
  "id": 11,
  "title": "Nieuwekijk",
  "url": "https://nieuwekijk.nl/",
  "scans": [
  11,
  12,
  13,
  14,
  15
  ]
  },

  In de scans, staan de resultaten van de verschillende maanden, neem bijvoorbeeld van scans: [11]

{
"id": 11,
"score": 54,
"frd_site_id": 11,
"date": "2024-08-01T00:00:00",
"title": "Automatisch scan resultaat",
"description": "Uw webpagina voldoet niet aan de WCAG richtlijnen.\n\nEr zijn meerdere fouten ontdekt die verholpen moeten worden om de toegankelijkheid te waarborgen.",
"result": [
  {
  "title": "Ontdekte fouten",
  "amount": 66
  },
  {
  "title": "Contrast fouten",
  "amount": 12
  },
  {
  "title": "Structurele fouten",
  "amount": 32
  },
  {
  "title": "Ontbrekende alt-teksten",
  "amount": 8
  },
  {
  "title": "Ontbrekende aria-labels",
  "amount": 14
  }
]
}

Dan kom je uit op deze data. Dit is dan de data van de maand augustus.

[SamaraFellaDina]

Hoe stuur ik data naar componenten?

De componenten kunnen de data niet lezen, aangezien het niet daarnaartoe word gestuurd, waarschijnlijk kan ik het desondanks wel erinzetten, aangezien het in de +page.svelte word geplaatst

[SamaraFellaDina]

Hoe stuur ik data naar componenten?

De componenten kunnen de data niet lezen, aangezien het niet daarnaartoe word gestuurd, waarschijnlijk kan ik het desondanks wel erinzetten, aangezien het in de +page.svelte word geplaatst

Na het verdiepen in deze vraag, is het mij gelukt! Bij deze een uitleg!

Hoe stuur ik data naar componenten?

1. Als allereerste moest ik de data naar de +page.svelte sturen door gebruik te maken van de +page.server.js

https://github.com/SamaraFellaDina/lose-your-head-the-client-case/blob/affe20fbd17a9b4dc115002ae1f9c07a3243db1f/src/routes/%2Bpage.server.js#L3-L14

2. Deze wordt vervolgens naar +page.svelte gestuurd, die heb ik vervolgens een bepaalde variabele gegeven

https://github.com/SamaraFellaDina/lose-your-head-the-client-case/blob/affe20fbd17a9b4dc115002ae1f9c07a3243db1f/src/routes/%2Bpage.svelte#L3-L5

3. Dus wanneer je deze console.log zou de data naar voren komen, je kan alleen niet meteen de componenten versieren, aangezien deze data niet bekend is bij dat specifieke component. Deze waarde moet je dus meegeven aan het component. Dit doe je zo:

https://github.com/SamaraFellaDina/lose-your-head-the-client-case/blob/affe20fbd17a9b4dc115002ae1f9c07a3243db1f/src/routes/%2Bpage.svelte#L19

Door gewoon simpelweg de waarde erin te zetten die je wilt meenemen.

4. Wanneer je dan in het component bent, kan je de data even checken. Ik heb in dit geval naar de ErrorResult.svelte gekeken, aangezien deze met listitems werkt. Hiervoor kan je dus een forEach gebruiken.

https://github.com/SamaraFellaDina/lose-your-head-the-client-case/blob/affe20fbd17a9b4dc115002ae1f9c07a3243db1f/src/lib/ErrorResult.svelte#L8-L13

Ik heb in dit geval één specifiek object aangeroepen, anders kan je hem niet goed aanroepen. Dus nu krijg ik de resultaten van één array. Dan is dus je resultaat:

resultaat

na al deze stappen te hebben gevolgd, kom je hierop uit:

[SamaraFellaDina]

Plaatsen van dynamische data in grafiek

Het is me ook gelukt om de dynamische data in een chart te plaatsen. Daarnaast begon ik me af te vragen hoe ik er voor zorg dat alle data in één keer mee gaf, in plaats van dat ik bij elk component moest aangeven dat het om het eerste object ging.

data van een object meer dynamisch maken

Wat dus inhoud dat je niet meer bij elk component moet aangeven dat het om het eerste object ging, maar dat al in de variabele aangeeft, zodat al die data kan worden meegenomen in de componenten

https://github.com/SamaraFellaDina/lose-your-head-the-client-case/blob/a69f7d5c154d0d68f146f7a2c30813e992bb4e6f/src/routes/%2Bpage.svelte#L5

Dat lukte door simpelweg al vanaf het begin aan te geven dat het bijvoorbeeld om het eerste object ging.

Heel interessant, aangezien je door deze waarde kan spelen met de maanden van de scans ;)

[SamaraFellaDina]

In de API kan je geen percentueel resultaat zien, misschien moeten we dat zelf berekenen of erin verwerken via directus?

[SamaraFellaDina]

In de API kan je geen percentueel resultaat zien, misschien moeten we dat zelf berekenen of erin verwerken via directus?

"description": "Uw webpagina voldoet niet aan de WCAG richtlijnen.\n\nEr zijn meerdere fouten ontdekt die verholpen moeten worden om de toegankelijkheid te waarborgen.",
"frd_site_id": 11,
"score": 75,
"id": 12

De score is het percentage dat zag ik eerder niet, maar heb het ingevoegd

https://github.com/SamaraFellaDina/lose-your-head-the-client-case/commit/a517ae5192904fab23330c359285e5dff04a0a5b