home       inleiding       sysadmin       services       tools       bash       werk       nothing      

oefenopdracht / mini project

 
een kleine maar echte keten bouwen: CSV → API → JSON → browser → Git
 

opdracht

  1. brondata: maak een kleine producten.csv 
    id,naam,prijs
1,Laptop,899
2,Muis,25
3,Toetsenbord,49
  2. API: schrijf een script (python/bash) dat
    • productencsv inleest
    • een REST-API aanbiedt met :
      • GET /api/producten → alle producten (JSON)
      • GET /api/producten/{id} → één product
  3. apache:
    • zet apache ervoor als reverse proxy (/api/ -> je script )
  4. client:
      • Maak een eenvoudige index.html die met fetch:
      • de lijst ophaalt van /api/producten.
      • de producten toont in een tabel.
  5. Git
    • initialiseer een Git-repo
    • commit step by step
      • CSV + eerste script
      • API-uitbreiding
      • Apache-config(no secrets)
      • HTML client
  6. reflectie
    • teken de dataflow
    • CSV -> API -> Apache -> browser
    • waar zitten JSON / CSV / REST / GIT in de keten

stap voor stap:

Mini‑project: Bouw je eigen dataflow
Doel van dit project: In dit mini‑project bouw je een echte dataflow van begin tot einde:
CSV → API → Apache → JSON → Browser → Git
Je ziet hoe data beweegt door een moderne keten, en je leert hoe bestanden, APIs en clients samenwerken.
 

  1. Brondata: CSV‑bestand
    Maak een bestand producten.csv:
    id,naam,prijs
    1,Laptop,899
    2,Muis,25
    3,Toetsenbord,49
     
    --> Verwachte output
    Een CSV‑bestand met drie producten.
    Open het bestand in een teksteditor, niet in Excel.
    CSV is gewoon tekst.
     
  2. API: CSV inlezen en JSON aanbieden
    Maak een klein Python‑script (api.py) dat:
    • producten.csv inleest
    • een REST‑API aanbiedt met twee endpoints:
    • GET /api/producten → lijst van alle producten
    • GET /api/producten/ → één product
      --> Verwachte output
    • Een draaiende API op http://127.0.0.1:5000/api/producten
    • JSON zoals:
      [
      {"id": 1, "naam": "Laptop", "prijs": 899},
      {"id": 2, "naam": "Muis", "prijs": 25},
      {"id": 3, "naam": "Toetsenbord", "prijs": 49}
      ]
       
      Gebruik csv.DictReader om CSV automatisch om te zetten naar dictionaries.
       
  3. Apache: reverse proxy naar je API
    Configureer Apache zodat:
  4. Client: HTML‑pagina die de API gebruikt
    Maak een bestand index.html:
    • gebruik fetch("/api/producten")
    • toon de producten in een tabel
      Verwachte output
      Een webpagina die:
    • de API aanspreekt
    • JSON ontvangt
    • een tabel toont met drie producten
      Hint
      Gebruik:
      fetch("/api/producten")
      .then(r => r.json())
      .then(data => console.log(data))
       
  5. Git: versiebeheer en samenwerking
    Initialiseer een Git‑repository:
    git init
    git add .
    git commit -m "Eerste versie"
     
    Maak daarna commits per stap:
    • CSV toegevoegd
    • API gebouwd
    • Apache‑config toegevoegd
    • HTML‑client toegevoegd
       
      --> Verwachte output
      Een Git‑geschiedenis die de evolutie van het project toont.
      ->
      Schrijf duidelijke commit‑boodschappen.
      Je toekomstige zelf zal je dankbaar zijn.
       
  6. Reflectie: teken de dataflow
    Teken de volledige keten:
    CSV → Python API → Apache → Browser → Tabel
     
     
    Beantwoord daarna:
    • Waar komt de data vandaan?
    • Waar wordt ze omgezet?
    • Waar wordt ze doorgestuurd?
    • Waar wordt ze getoond?
    • Waar zit JSON in de keten?
    • Waar zit CSV in de keten?
    • Waar zit Git in de keten?
      --> Verwachte output
      Een eenvoudige tekening + korte antwoorden.
       
  7. Bonus (optioneel)
    • Voeg een POST‑endpoint toe om een nieuw product toe te voegen.
    • Laat de HTML‑client een product toevoegen via een formulier.
    • Voeg foutafhandeling toe (404, 400).
    • Maak een branch feature/post-endpoint en merge die later.