Kmom01: Single Page Application

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, bygger en me-sida med fokus på mindre terminaler 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 skapar vi en me-app anpassat främst för mobilen, men som även fungerar klockrent på en större enhet. På en av sidorna i vår me-app hämtar vi data från Github för att visa upp våra repon. Det är även här vi skriver redovisningstexten så vi ska titta på hur vi gör mycket text lättläst på små och stora enheter.

Som en sista del av kursmomentet 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.

Installera labbmiljön för kursen. Vänta med att installera ‘Apache Cordova’ och ‘Emulator och fysisk enhet’ till kmom05.

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

#Läsanvisningar

(ca: 6-10 studietimmar)

#Kurslitteratur

Läs följande:

1. Mobile HTML5.
   • Introduction
   • Ch 1: Setting the stage

#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”.

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

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

#Övningar & Uppgifter

(ca: 6-10 studietimmar)

#Övningar

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

1. Läs igenom tipset om “Developer tools i webbläsaren för mobila enheter”.

2. Läs igenom artikeln och installera “Utvecklingsverktyg för REST tjänster”.

3. Gör övningen “En Single Page Application”. Spara resultatet i me/redovisa.

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

#Uppgifter

Dessa uppgifter skall utföras och redovisas.

1. Gör uppgiften “SPA me-app”. Spara din kod i me/redovisa.

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

#Extra

Det finns ingen extrauppgift.

#Resultat & Redovisning

(ca: 1-2 studietimmar)

Läs instruktionen om hur du skall redovisa.

Se till att följande frågor besvaras i redovisningstexten.

• Ä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 två 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