Webbserverprogrammering 1 · område 1 · v.34–36

Webbservern, Blazor och projektets arkitektur

Innan du skriver en enda rad applikationskod på egen hand ska du ha två saker: en fungerande bild av vad en webbserver gör, och en karta över ditt eget projekt. Området har ingen tenta – det som bedöms är sajten du lämnar in och hur du arbetar under lektionerna.

2 sept Inlämning 1 – Hur webbservern arbetar, kl 23:59 Repots adress lämnas i itslearning.

Guide · hela området Webbresan, steg för steg

Från tomt projekt till färdig sajt, med all kod. Följ den här om du missat ett pass eller vill arbeta i din egen takt.

Inlämning 1 Hur webbservern arbetar

Krav för E, C och A, med kryssrutor som sparas i din webbläsare.

Referens · lektion 2 Klient och server

Adressens fem delar, statuskoderna och skillnaden mellan statiskt och dynamiskt.

Referens · lektion 3 Renderingslägen

Vad -int None gjorde, komponentens tre delar och var en enskild rad körs.

Referens · lektion 4 Projektets arkitektur

De sex filerna som gör en förfrågan till en sida, i den ordning de körs.

Lektion 5 · sista passet Lämna in

Ordningen du gör de sista sakerna i, och det som stoppar en inlämning.

1. Fem lektioner

Området är komprimerat till fem lektioner eftersom skolstarten tog tisdagen den 18 augusti.

#	Datum	Längd	Vad vi gör
1	ons 19 aug	45 min	Kursintro och verktygskedjan. Du skapar ditt repo, ditt projekt och kör det.
2	tis 25 aug	85 min	Klient och server: vad som faktiskt händer vid en förfrågan. GET, POST, statuskoder, DNS. Referenssidan.
3	ons 26 aug	45 min	Blazor Web App och renderingslägen. Varför kursen håller sig på serversidan. Referenssidan.
4	tis 1 sept	85 min	Projektets arkitektur: vilken fil gör vad, och i vilken ordning körs de. Referenssidan.
5	ons 2 sept	45 min	Färdigställ och lämna in. Deadline samma kväll kl 23:59. Sidan för sista passet.

2. Det här ska sitta

Du kan följa en förfrågan hela vägen: adressfältet, DNS, request, svar, statuskod.
Du kan säga vad som är statiskt innehåll och vad som skapas på servern vid varje förfrågan.
Du kan peka ut filerna i ditt Blazor-projekt och säga vad var och en gör.
Du kan starta projektet, ändra i det och pusha ändringen till GitHub.
Du vet varför Å, Ä och Ö ibland blir frågetecken, och hur du undviker det.

3. Kom igång

Det här gjorde vi på lektion 1. Har du missat passet, eller bytt dator, gör du samma sak igen.

Har du missat ett senare pass tar du igen det i guiden. Den går hela vägen från tomt projekt till färdig sajt, med all kod, och varje referenssida säger överst vad du ska göra om du var borta.

Skapa repot tomt

När du skapar repot på github.com: bocka inte i "Add a README file", ingen .gitignore och ingen licens. Ett repo som redan har en fil vägrar ta emot din första push, och felmeddelandet berättar inte varför.

Steg	Det du gör
1	Logga in på github.com och skapa ett tomt, publikt repo som heter `webbresan`.
2	Kör en gång per dator: `git config --global user.name "Ditt Namn"` och `git config --global user.email "din.skolmejl@exempel.se"`
3	Skapa projektet: `dotnet new blazor -o Webbresan -int None`
4	Gå in i mappen och kör det: `cd Webbresan` och `dotnet run`
5	Öppna adressen terminalen skriver ut. "Hello, world!" ska synas.
6	Stoppa servern med Ctrl+C och koppla på GitHub: `git init`, `git add .`, `git commit -m "Första körningen"`, `git branch -M main`, `git remote add origin …`, `git push -u origin main`

Prova själv

Be en klasskamrat om adressen till deras körande projekt och försök öppna den. Det går inte. Det är innebörden av localhost: den här datorn, ingen annan.

4. Så lämnar du in

Koden ligger på GitHub. itslearning tar emot länken till den. Kort version: kontrollera att projektet startar, gå igenom kraven, committa och pusha, och klistra in repots adress i itslearning.

Hela ordningen, kamratgranskningen och det som brukar gå fel den sista timmen står på Lämna in. Läs den innan du pushar sista gången.

Committa löpande under arbetets gång, inte allt sista kvällen. Antalet commits är ett krav i uppgiften just därför – historiken visar när du arbetade, inte bara att du gjorde det.

5. Felsökning

Sök på felmeddelandet du fick, eller på ett ord ur det.

Sök bland felen

11 rader

Symptom	Trolig orsak	Åtgärd
`dotnet: command not found`	.NET SDK saknas, eller PATH är fel	Installera .NET 10 SDK. Starta om terminalen efteråt.
`The template "blazor" could not be found`	För gammal SDK	`dotnet --version` ska svara 10.x. Uppdatera annars.
Terminalen hänger utan prompt	Servern kör – det är meningen	Ctrl+C stoppar den. Öppna en andra terminal om du vill köra git samtidigt.
`Address already in use`	En gammal `dotnet run` kör kvar	Stäng den terminalen, eller starta om datorn.
Ändringen syns inte i webbläsaren	Servern startades inte om	Ctrl+C och `dotnet run` igen.
`Please tell me who you are`	`git config` är inte körd	Kör de två raderna med user.name och user.email.
`Updates were rejected` / `non-fast-forward`	Din push avvisas eftersom repot skapades med README	Enklast: ta bort repot på GitHub och skapa ett nytt, utan bockar.
`Repository not found`	Din push går till fel adress – användarnamnet stämmer inte	`git remote -v` visar vad som är inställt. Rätta med `git remote set-url origin …`
`src refspec main does not match any`	Du försöker pusha utan att ha gjort en commit	`git add .` och `git commit -m "…"` först.
`Support for password authentication was removed`	Du skrev ditt lösenord när du pushade	Logga in via Visual Studio Code, eller skapa en personal access token på GitHub.
`remote origin already exists`	`remote add` körd två gånger	`git remote set-url origin …` i stället.

6. Orden

Orden nedan används från och med nu utan förklaring. Träna tills du kan dem.

Ordträning

Ord	Betyder
webbserver	Program som tar emot förfrågningar över nätet och skickar tillbaka svar.
localhost	Adressen till din egen dator. Ingen annan når den.
port	Numret efter kolon i adressen. Talar om vilket program på datorn som ska svara.
request	Förfrågan från webbläsaren till servern.
response	Serverns svar, med statuskod, headers och innehåll.
statuskod	Tresiffrigt tal i svaret som säger hur det gick. 200 lyckades, 404 fanns inte.
statisk serverrendering	Servern bygger färdig HTML och skickar den. Ingen kod körs sedan i webbläsaren.
SDK	Verktygen du behöver för att bygga och köra .NET-program. `dotnet` är kommandot.
repo	Mappen med ditt projekt plus hela dess historik. Ligger både lokalt och på GitHub.
commit	En sparad punkt i historiken, med ett meddelande om vad du ändrade.
push	Att skicka upp dina commits till GitHub.
clone	Att hämta ned ett helt repo till en dator.