Webbserverprogrammering 1 · område 3

Inlämning 3 – Komponentbibliotek

Bygg om din applikation så att sidorna består av komponenter i stället för av markup, och koppla ihop en listsida med en detaljsida genom adressen. Data ligger fortfarande i en hårdkodad lista – det är komponentstrukturen som bedöms.

13 okt Domänvalet ska vara gjort Kriterierna finns på egen sida.
9 nov Deadline kl 23:59 Repots adress lämnas i itslearning. Prov dagen efter.

1. Uppdraget

Du börjar inte om. Projektet från område 2 är utgångsläget och växer – så kommer det att vara resten av kursen.

Du får med dig fem saker:

Guiden, som bygger Filmarkivets komponenter steg för steg med all kod.
Referensprojektet Filmarkivet, färdigt att köra och läsa.
Övningsbanken med 22 övningar: 29–40, 41–46 och 47–50.
Sex komponenter som går sönder, med de felmeddelanden du kommer att få.
Lektionerna 15–21. Genomgångarna ligger på 15, 16, 18 och 19.

Facit till övningarna delas ut efter övningspasset, inte före.

Din domän, inte guidens

Guiden bygger Filmarkivet med komplett kod. Din applikation ska ha samma struktur och annat innehåll. Eftersom dina entiteter heter något annat och har andra fält går det inte att kopiera – bara att förstå och översätta. Översättningen är examinationen.

Fyll i högerkolumnen i guidens översättningstabell innan du börjar koda.

2. Steg 0 – välj din domän

Valet ska vara gjort på lektion 16 och godkänt av mig innan du börjar bygga. Kriterierna, åtta färdiga förslag och det som brukar fälla ett val står på egen sida.

Det här är sista gången bytet är gratis

Här finns bara en hårdkodad lista att skriva om. I område 5 finns en databas, migrationer och formulär som hänger på entiteten. Domänen ska bära dig till och med område 8 – lägg femton minuter på valet nu.

Domänen får inte vara filmer.

Kryssen nedan sparas i din webbläsare, så du kan bocka av allteftersom.

Skillnaden mot C är inte fler komponenter. Den är att komponenterna är avgränsade: var och en gör en sak, och det går att säga vilken.

5. Utmaning — nivå A, utöver C

En sökning via frågesträngen som filtrerar listsidan
En sortering via frågesträngen, som fungerar samtidigt som sökningen
Minst sex komponenter, ordnade i mappar efter vad de kan: de som känner till din domän för sig, de domänfria för sig
En komponent med två RenderFragment-parametrar, varav en namngiven
En komponent som anropar en annan som i sin tur anropar en tredje, och en mening om varför uppdelningen ser ut så
Något i layouten som du inte upprepar per sida, och en motivering
Du föreslår själv en komponent till som du inte hann bygga, och beskriver vilka parametrar den skulle ha och vad den skulle ersätta

6. Så bedöms den

Uppgiften prövar två av kursens betygskriterier särskilt.

Kriterium	Vad det betyder här
Att skilja presentationslagret från övrig logik	På E ska det vara skilt "i någon utsträckning", på C "tydligt". Det är precis vad komponenterna handlar om: en komponent som visar ska inte samtidigt bestämma vad den visar. En lista som själv går och hämtar sin data är fel byggd – den ska få listan.
Att koda enligt vedertagen praxis för vald teknik	Namngivning, mappstruktur, en komponent per fil, parametrar som är `public`. Kodningsstandard är eget centralt innehåll i kursen, inte en artighet.

Jag läser koden och kör projektet. Tre saker väger tyngst:

Att komponenterna är återanvändbara. Frågan jag ställer till varje komponent är: går den att använda på ett andra ställe utan att ändras? Kan den inte det är den en sida som råkat hamna i fel mapp.
Att adressen fungerar. Detaljsidan ska gå att nå genom att klicka, ett id som inte finns ska ge 404, och ett id som inte är ett tal ska också ge 404. Tre kontroller, tre sekunder var.
Att strukturen är begriplig. Jag ska kunna öppna Components/ och gissa vad varje fil gör innan jag öppnat den.

7. Inlämning

Kontrollera att projektet startar och att alla sidor svarar.
Kontrollera de tre adresserna: en post som finns, ett id som inte finns, ett id som inte är ett tal. Titta i nätverksfliken, inte på texten.
Skriv domänvalet i projektets README.md om det inte redan står där.
Gå igenom kravlistan för den nivå du siktar på.
git add ., git commit -m "…", git push
Öppna ditt repo på github.com och se att filerna finns där.
Klistra in repots adress i inlämningsrutan i itslearning.

Deadline är måndag 9 november kl 23:59. Provet är tisdag 10 november och prövar samma innehåll – att göra klart uppgiften är den bästa provförberedelsen som finns.

8. Vanliga misstag

Det här är det som gör att uppgiften underkänns i onödan.

Misstag	Vad som händer	Undvik det så här
Fyra kopior av samma komponent	Räknas som en. Kravet är fyra som gör olika saker	Bryt ut det som faktiskt upprepas
Komponenten hämtar sin egen data	Går inte att återanvända, och sänker på C	Skicka in listan som parameter
Komponenten används bara en gång	Då är den en sida, inte en komponent	Använd minst en på två sidor
`{id}` utan `:int`	Sidan kraschar på `/filmer/abc`	Skriv `{id:int}`
Detaljsidan nås bara genom att skriva adressen	Räknas inte som kopplade	Länka från kortet
Ett id som inte finns ger tom sida med status 200	Sidan ljuger om att allt gick bra	`NavigationManager.NotFound()`, med `return` efter
`[Parameter]` glömd	Körfel, inte kompileringsfel. Sidan bygger och kraschar	Läs felmeddelandet – det säger exakt detta
`RenderFragment` som heter något annat än `ChildContent`	Körfel när sidan öppnas	Antingen döp om, eller skriv ut taggnamnet vid användning
Detaljsidan visar samma sak som kortet	Ingen anledning att klicka. Sänker betyget	Lägg beskrivningsfältet bara på detaljsidan
Domänen vald på känsla	Faller isär i område 6 när kategorin ska in	Bocka av mot de sju kraven
Allt committat sista kvällen	Historiken visar inte arbetet	Committa efter varje pass