Je hebt tot nu toe een API gemaakt en een game. Je gaat nu met Copilot een webportaal bouwen dat de resultaten uit je eigen API ophaalt en op het scherm zet. Die API staat op jouw laptop en kent niemand anders, Copilot dus ook niet. Hij weet niet op welk adres hij draait, welke endpoints er zijn of hoe de JSON eruitziet.

image.png

image.png

Context meegeven aan Copilot

<aside> 💡

Geef je geen context, dan verzint de AI er een. Dat is geen fout van het model, dat is het enige dat hij kan als jij het niet zegt.

</aside>

Vier manieren

Manier Hoe Waarvoor
#bestandsnaam typ # en kies een bestand of map één bestand erbij, bijvoorbeeld #index.html
#codebase typ het in je prompt hij zoekt zelf in je hele project
Slepen trek een bestand uit de Explorer het chatvenster in snel, zelfde effect als #
Add Context de knop boven het invoerveld kiezen uit bestanden, mappen of symbolen

Voor een symbool (een klasse of methode) moet dat bestand wel open staan in je editor.


De beste manier: één bestand dat altijd meegaat

Maak in de hoofdmap van je project:

.github/copilot-instructions.md

Wat daarin staat wordt automatisch bij elk chatverzoek meegestuurd. Je hoeft het dus nooit meer te plakken en je kunt het niet vergeten.

Gewone tekst, gewoon Markdown. Zet erin wat altijd geldt.


Voorbeeld voor het portaal

markdown

# Over dit project

Ik bouw een webpagina die resultaten toont uit een eigen API.

## De API

Draait op <http://localhost:5050>

| Methode | Adres | Geeft terug |
|---|---|---|
| GET | /resultaten | alle resultaten |
| GET | /resultaten/{id} | één resultaat, of 404 |
| GET | /resultaten/top/{oefening} | de vijf snelste tijden |

GET /resultaten geeft dit terug:

{
  "resultaten": [
    { "cursist": "Daan", "oefening": "klimmen",
      "seconden": 94.20, "fouten": 1, "id": 1 }
  ]
}

De veldnamen zijn exact zoals hierboven, met kleine letters.

## Hoe ik wil dat je code schrijft

- Gewone HTML, CSS en JavaScript. Geen React, geen Vue, geen build.
- Gebruik fetch, geen externe bibliotheken.
- Nederlandse tekst op het scherm, Engelse namen in de code.
- Toon altijd iets als er een fout is of als de lijst leeg is.

## Wat je niet doet

- Verzin geen endpoints die hierboven niet staan.
- Verzin geen velden die niet in de JSON zitten.
- Heb je iets nodig dat ik niet gegeven heb, vraag het dan.

Die laatste regel is de belangrijkste van het hele bestand.