Softwarearkitektur - Opgaver Modul 4

Opgave 1 - Kig i Blazor-app’en

Klon en kopi af fagets GitHub-repository. Find blazor-app’en under modul 4. Kør den og tjek om den virker som den skal.

Kig i koden og svar på følgende spørgsmål sammen med en studerende fra din gruppe:

1. Hvilke services er der registreret i blazor-app’en?
2. Hvad finder man i namespacet “Shared”?
3. Hvad er forskellen på komponenterne i “Shared” og dem i “Pages”?
4. Hvad gør “TodoList.razor” hvis listen af tasks er tom? Hvad hvis listen er null?
5. Beskriv koden i “PostTask.razor”.
6. Beskriv koden i “TodoTask.razor”.
7. Hvornår bruges “CallRequestRefresh()” i TodoListService.cs og hvorfor?

Opgave 2 - Test din TODO-API med en Blazor-app

I opgave 7 fra sidst skulle du lave din egen “Todo List API”.

Prøv om den virker sammen med Blazor-app’en i opgave 1.

Hvis du ikke har lavet API’en færdig, eller hvis du finder fejl i den under din test, skal du arbejde videre med den nu.

Hvis du får fejl i browser-konsollen, når du tester blazor-app’en, som omhandler “CORS”, kan du løse det ved at tillade “CORS” i din API-kode. Se eksemplet herunder:

// Åben op for "CORS" i din API.
// Læs om baggrunden her: https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-6.0

var AllowCors = "_AllowCors";
builder.Services.AddCors(options =>
{
    options.AddPolicy(name: AllowCors, builder => {
        builder.AllowAnyOrigin()
               .AllowAnyHeader()
               .AllowAnyMethod();
    });
});

var app = builder.Build();
app.UseCors(AllowCors);

Opgave 3 - Mini-projekt: Byg en Quiz API

En quiz indeholder en spørgsmålstekst, samt mindst fire svarmuligheder. En af svarmulighederne er angivet som den rigtige.

Du skal som minimum implementere følgende endpoints:

• GET /api/questions: Henter alle spørgsmål og deres svarmuligheder, men ikke hvilke svar der er de rigtige
• GET /api/questions/{id}: Henter et bestemt spørgsmål og dets svarmuligheder, men ikke hvilket svar der er det rigtige
• POST /api/questions/{id}/validate: Her kan postes et spørgsmåls-id og en svarmulighed, og så får man at vide, om svaret er rigtigt eller forkert

Sørg for der er noget testdata i programmet når det starter op. Det er ikke nødvendigt at gemme data i en rigtig database (bare brug et array eller en list).

Test API’en med Postman eller curl.

Opgave 4 - Mini-projekt: Byg en Quiz App med Blazor

Byg en blazor-app til API’en i sidste opgave.

Du kan nok ikke nå at lave en fuld quiz-app, men prøv at få disse grundlæggende krav på plads:

• Man kan se en liste af spørgsmål.
• Man kan vælge et svar på et spørgsmål, og så kan man se, om man valgte rigtigt eller forkert.

Tilføj gerne flere endpoints til API’en, hvis det er nødvendigt. Forsøg at overholde principperne i en REST-arkitektur.

Kopier lystigt kode fra eksempler og tidligere opgaver du har løst, for at spare tid.