kmom01 - En router

Tanken är att komma igång med utveckling av mobila applikationer. De mobila applikationerna utvecklar vi med tekniker baserade på HTML, CSS och JavaScript. Vi ser hur vi kan utnyttja dessa tekniker för att ändra innehållet utan att ladda om applikationen. Som ett första steg så läser vi på om grunderna och börjar så smått med det löpande projektet för alla sex kursmoment.

Vi har i tidigare kurser sett hur vi man kan skapa applikationer i webbläsaren där vi aldrig laddar om sidan. Vi ska fortsätta på det spåret och bygga vidare på detta med webbens inbyggda teknologier för till exempel hämtning av data från ett API.

Som ett första steg ska vi börja med en löpande uppgift där vi i detta kursmoment skapar början till en lagerhanteringsapp. Nedan finns en liten video som visar hur det kan se ut när man är klar med Lager appen del 1.

(Detta är instruktionen för kursmomentet och omfattar det som skall göras inom ramen för kursmomentet. Momentet omfattar cirka 20 studietimmar inklusive läsning, arbete med övningar och uppgifter, felsökning, problemlösning, redovisning och eftertanke. Läs igenom hela kursmomentet innan du börjar jobba. Om möjligt — planera och prioritera var du vill lägga tiden.)

Labbmiljön

(ca: 1 studietimme)

Som i andra kurser bör du ha en lokal labbmiljö innehållande:

Webbläsare (gärna flertalet olika)
En bash-terminal (WSL2 för Windows)
Visual Studio Code

Börja med att lämna in uppgiften Github konto på Canvas enligt videon nedan.

Acceptera sedan inbjudan och använd SAML SSO inloggning för att knyta ditt GitHub konto mot ditt studentkonto.

I nedanstående video visar Emil hur du kommer igång med kursen. Om du föredrar text kan du hoppa över videon, men den är starkt rekommenderat.

Du börjar kursen genom att skapa en webapp katalog i din dbwebb-kurser-katalog. Du kan sedan klona example-repot (dbwebb-webapp/webapp-example) till webapp-katalogen så du har tillgång till kursens exempel-kod.

cd $HOME/dbwebb-kurser
mkdir webapp
cd webapp
git clone https://github.com/dbwebb-webapp/webapp-example.git

Sedan vill du skapa en fork av repot dbwebb-webapp/webapp-lager. Du klonar sedan repot till din dbwebb-kurser/webapp katalog. Se till att byta ut användarenamn mot ditt användarenamn i de två nedanstående URL’r.

git clone git@github.com:användarenamn/webapp-lager.git

Gå nu till sidan https://github.com/användarenamn/webapp-lager/actions och godkänn att Actions kan köras genom att klicka på stora gröna knappen: “I understand my workflows, go ahead and run them”. Dessa workflows används för att köra tester, validering, driftsättning och rättning.

Avsluta veckans uppstart med att skapa en branch för att jobba med kmom01 genom följande kommando.

git checkout -b kmom01

Veckans genomgång

Emil har genomgånger måndagar kl 13:15, efter genomgången uppdateras denna delen av sidan med veckans genomgång.

Veckans föreläsning

Emil har föreläsningar onsdagar kl 10:15, efter föreläsningen uppdateras denna delen av sidan med veckans föreläsning.

Läsanvisningar

(ca: 6-10 studietimmar)

Artiklar

Läs följande artiklar för att få bakgrunden till övningarna.

Läs om viewport på MDN i artikeln “Using the viewport meta tag to control layout on mobile browsers”.
Bekanta dig med dokumentationen för fetch som vi använder för att ladda data via JavaScript.
Bekanta dig översiktligt med web components i artikeln “Introduction”.

Lästips

Läs översiktligt denna samling av “best-practices” för typografi på webben Typography Handbook. Spara den i dina bokmärken som en framtida referens.

Övningar & Uppgifter

(ca: 6-10 studietimmar)

Övningar

Gör följande övningar för att träna inför uppgifterna.

Läs igenom artikeln “Typografi i mobila enheter”. Du kan spara koden i ditt webapp-lager repo.
I övningen “Web Components” kan du repetera web components och titta på hur vi driftsätter applikationen. Koden som byggs upp i den övningen är det som redan finns i webapp-lager repot.
Gör övningen “Knappar för mobilen”. Spara eventuella testfiler i ditt webapp-lager repo.
Gör övningen “En router i JavaScript”. Spara med fördel koden i ditt webapp-lager repo.

Uppgifter

Dessa uppgifter skall utföras och redovisas.

Gör uppgiften “Lager appen del 1”. Spara din kod i ditt kursrepo i ditt webapp-lager repo.

Emil visar i nedanstående video hur du gör en inlämning i webapp.

Resultat & Redovisning

(ca: 1-2 studietimmar)

Skriv en redovisningstext och redovisa dina reflektioner från kursmomentet. Besvara de specifika frågor som finns för varje kursmoment. Reflektera över svårigheter, problem, lösningar, erfarenheter, lärdomar, resultatet, etc.

Se till att följande frågor besvaras i redovisningstexten som en del av din Pull Request, se videon nedan för hur du gör en inlämning.

Är du sedan tidigare bekant med utveckling av mobila appar?
Vilket är den viktigaste lärdomen du gjort om typografi och knappar för mobila enheter?

TIL är en akronym för “Today I Learned” vilket leksamt anspelar på att det finns alltid nya saker att lära sig, varje dag. Man brukar lyfta upp saker man lärt sig och där man kanske hajade till lite extra över dess nyttighet eller enkelhet, eller så var det bara en ny lärdom för dagen som man vill notera.

Vilken är din TIL för detta kmom?

I artikeln “Att skriva en bra redovisningstext” finns exempel och goda råd kring att skriva bra redovisningstexter.