Del 9 av 10 · Examination

Individuell slutuppgift — Bygg en Blazor-app

En examination som täcker hela kursens centrala innehåll: komponenter, routing, formulär, state, DI, API-anrop, auth och deployment.

Examinationsform Individuell inlämning. Du bygger en komplett Blazor Web App och redovisar muntligt under sista lektionen.

Översikt

Du ska bygga en webbapp i Blazor Web App (.NET 10, target framework net10.0) som hanterar en domän du själv väljer (t.ex. bibliotek, recept, träningslogg, filmkatalog, projektlista). Appen ska demonstrera att du behärskar kursens kärnkoncept.

Tidsåtgång Räkna med ca 20–25 timmar arbete utöver lektionstid. Påbörja senast vecka 5.
Individuell · Examination
Min Blazor-app — komplett CRUD med auth
Format
Individuellt projekt
Inlämning
Git-repo + publicerad URL
Redovisning
10 min muntlig demo
Betyg
G / VG

Funktionella krav (G-nivå)

  • Domän: Välj en enkel domän med minst en huvudentitet (t.ex. Book, Recipe, Workout).
  • CRUD: Skapa, läsa, uppdatera och ta bort entiteten via Blazor-UI.
  • Routing: Minst 3 sidor (lista, detalj, formulär) med fungerande navigation.
  • Layout: Egen MainLayout med menyrad eller sidopanel och footer.
  • Formulär: Använd EditForm + DataAnnotationsValidator med minst tre olika fälttyper och valideringsmeddelanden.
  • Tjänst via DI: Datalagring sker via en service registrerad i DI (in-memory eller EF Core SQLite duger för G).
  • State över sidor: Något tillstånd ska delas mellan komponenter (t.ex. via service + event eller cascading value).
  • Felhantering: Visa snygga felmeddelanden vid validerings- eller lagringsfel.

Tilläggskrav för VG

  • Riktigt API: Bygg ett eget Minimal API (separat projekt) och anropa det från Blazor via typad HttpClient.
  • Autentisering: Använd --auth Individual. Endast inloggade får skapa/uppdatera/ta bort. Visa data är öppet.
  • Render mode-motivering: Välj minst två olika render modes i appen och motivera valen i README.
  • Deployment: Publicera appen till Azure App Service, IIS eller annan host. Bifoga URL.
  • Kodkvalitet: Tydlig mappstruktur, små komponenter (max ~150 rader), inga "magic strings", korrekta async-mönster.
  • .NET 10-funktion: Använd minst en .NET 10-specifik nyhet och motivera valet i README. Exempel: [PersistentState]-attributet, builder.Services.AddValidation() med [ValidatableType], Router.NotFoundPage + NavigationManager.NotFound(), eller passkeys i Identity.
  • README: Beskriv vald domän, körinstruktioner, arkitekturbeslut och vad du skulle förbättrat om du haft mer tid.

Tekniska ramar

  • Blazor Web App, .NET 10 (net10.0)
  • Endast Blazors inbyggda komponenter — inga UI-bibliotek (MudBlazor, Radzen, Syncfusion) i grundinlämningen
  • Egen CSS eller Bootstrap (som följer med templaten)
  • Källkod i ett publikt Git-repo (GitHub eller GitLab)

Inlämning

  1. Push koden till ett publikt Git-repo.
  2. Skicka länken till repot till läraren senast fredag i V8 kl 17.00.
  3. VG-inlämning ska också innehålla en publicerad URL till en levande app.
  4. Boka en redovisningstid (10 min) under V8.
Sen inlämning Sen inlämning utan godkänd anledning ger endast möjlighet till betyget G, även om VG-kraven är uppfyllda.

Bedömningsmatris

OmrådeGVG
Komponenter Sidor och delkomponenter med korrekt parameter-passing. Genomtänkt komponentnedbrytning, återanvändning, EventCallback används där lämpligt.
Routing & layout Minst 3 fungerande rutter, en MainLayout. Route-parametrar, NavLink med korrekt match, ev. flera layouter.
Formulär & validering EditForm + DataAnnotations, fel visas. Komplex validering, anpassade meddelanden, UX-feedback under skrivning.
State & DI Service via DI, delat tillstånd fungerar. Korrekt val av livstider, IDisposable-pattern på event-prenumerationer, motiveras i README.
API & auth In-memory eller EF lokalt. Eget API + typad klient + auth som skyddar skrivande endpoints.
Deployment Körs lokalt utan fel. Publicerad till Azure/IIS/Docker med fungerande HTTPS.
Kodkvalitet & README Läsbar kod, README med körinstruktion. Konsekvent stil, små filer, README med arkitekturmotivering och render-mode-resonemang.

Redovisning

Under redovisningen (10 min + 5 min frågor) ska du:

Tips för planering

Förslag på arbetsupplägg

Komma igång

// Skapa projekt (G-version)
dotnet new blazor -o MinApp --interactivity Server

// Skapa projekt (VG-version med auth)
dotnet new blazor -o MinApp --interactivity Auto --auth Individual

// Initiera Git
cd MinApp
git init
git add .
git commit -m "Initial commit"

← Föregående: Render & Deploy Nästa: Lektionsplan →