Beetje Coderen

Les 1 · Module 1 · API-basis

Je eerste Web API

Een Web API-project maken, een eerste endpoint schrijven en het testen met een HTTP-bestand.

⏱ 60–90 minuten leestijd + oefenen

🎯 Na deze les kun je

  • een Web API-project aanmaken met de .NET CLI
  • een GET- en een POST-endpoint schrijven die JSON gebruiken
  • een API testen met een .http-bestand of curl

In Een beetje ASP.NET bouwde je webpagina's die HTML teruggeven. Een Web API geeft data terug, meestal JSON, voor een andere applicatie: een app, een JavaScript-frontend of een ander systeem. In deze cursus bouw je één API voor een kleine webwinkel en breid je die elke les uit.

Wat je nodig hebt

  • .NET 8 SDK (dotnet --version)
  • Kennis van C#, minimal API's en dependency injection uit Een beetje ASP.NET

Project maken

dotnet new web -n Winkel.Api
cd Winkel.Api
dotnet run

Uitgewerkt voorbeeld

Vervang Program.cs door:

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

var producten = new List<Product>
{
    new(1, "Toetsenbord", 39.95m),
    new(2, "Muis", 19.95m),
};

app.MapGet("/producten", () => producten);

app.MapGet("/producten/{id:int}", (int id) =>
    producten.FirstOrDefault(p => p.Id == id) is { } p ? Results.Ok(p) : Results.NotFound());

app.MapPost("/producten", (Product nieuw) =>
{
    producten.Add(nieuw);
    return Results.Created($"/producten/{nieuw.Id}", nieuw);
});

app.Run();

record Product(int Id, string Naam, decimal Prijs);

Voorspel eerst: welke statuscode krijg je bij GET /producten/3? En hoe ziet de JSON van GET /producten eruit?

Maak winkel.http (VS Code met REST Client, of Visual Studio/Rider ondersteunen dit direct):

GET http://localhost:5000/producten

###
GET http://localhost:5000/producten/3

###
POST http://localhost:5000/producten
Content-Type: application/json

{ "id": 3, "naam": "Monitor", "prijs": 179.00 }

GET /producten/3 geeft eerst 404. Na de POST geeft hij 200 met het product. De JSON gebruikt camelCase (naam, prijs): dat is de standaard van System.Text.Json in ASP.NET Core. Zonder .http-bestand kan het ook met curl -i http://localhost:5000/producten/3. Let op: de poort staat in de uitvoer van dotnet run.

Statuscodes zijn deel van je API

Situatie Code
gevonden 200 OK
aangemaakt 201 Created (+ Location-header)
bestaat niet 404 Not Found
ongeldige invoer 400 Bad Request (les 5)

Oefenen

  1. Voeg DELETE /producten/{id} toe die 204 of 404 teruggeeft.
  2. Wat gebeurt er als je twee keer hetzelfde id post? Noteer het. In les 5 los je dit netjes op.
  3. Voeg GET /producten?maxPrijs=30 toe met een optionele queryparameter.

Typische fouten

  • 415 Unsupported Media Type: je POST mist Content-Type: application/json.
  • Lege lijst na herstart: de data staat in het geheugen. Vanaf les 8 sla je hem op met EF Core.
  • Verkeerde poort: kijk in Properties/launchSettings.json of in de uitvoer van dotnet run.

Samenvatting

Een Web API koppelt HTTP-methodes en routes aan code die JSON en statuscodes teruggeeft. In de volgende les leer je hoe je die routes ontwerpt volgens REST.