Kmom01: Web Components

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)

Det finns en längre beskrivning om kursens labbmiljö. Läs den om du är osäker på vad som skall göras, eller om detta är din första dbwebb-kurs.

Uppdatera dbwebb-cli samt klona och initiera kursrepot.

# Gå till din katalog för dbwebb-kurser
dbwebb selfupdate
dbwebb clone webapp
cd webapp
dbwebb init

#Veckans genomgång

Nedan berättar Andreas om veckans övningar och uppgifter och visar lite tips och trix.

#Läsanvisningar

(ca: 6-10 studietimmar)

#Artiklar

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

1. Läs om viewport på MDN i artikeln “Using the viewport meta tag to control layout on mobile browsers”.

2. Bekanta dig med dokumentationen för fetch som vi använder för att ladda data via JavaScript.

3. Bekanta dig översiktligt med web components i artikeln “Introduction”.

#Video

1. Det finns en videoserie kopplat till kursen, titta på videos som börjar på 0 och 1.

#Lästips

1. 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.

2. För mer om tillgänglighet (accessibility, a11y) titta in på The A11Y Project.

#Övningar & Uppgifter

(ca: 6-10 studietimmar)

#Övningar

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

1. Läs igenom artikeln “Typografi i mobila enheter”. Spara koden i me/kmom01/typography.

2. Skapa en API-nyckel och produkter i ditt egna lager med hjälp av artikeln “Introduktion till Lager-API:t”.

3. Gör övningen “Web Components”. Spara resultatet i me/lager.

#Uppgifter

Dessa uppgifter skall utföras och redovisas.

1. Gör uppgiften “Lager appen del 1”. Spara din kod i me/lager.

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

#Resultat & Redovisning

(ca: 1-2 studietimmar)

Läs instruktionen om hur du skall redovisa.

Se till att följande frågor besvaras i redovisningstexten och lämnas in på Canvas.

• Är du sedan tidigare bekant med utveckling av mobila appar?
• Vilket är den viktigaste lärdomen du gjort om typografi för mobila enheter?
• Du har i kursmomentet hämtat data från ett stycken API. Hur kändes detta?

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?

#Revision history