Kmom01: En mobil webapp i mithril

Tanken är att komma igång med utveckling av mobila applikationer. De mobila applikationerna utvecklar vi med tekniker baserade på HTML, CSS och JavaScript och vi kallar dem för mobila webbapplikationer. Som ett första steg så läser vi på om grunderna och vi bygger en me-app med fokus på mindre terminaler.

Eller ja, den blir skalbar så den fungerar även på större plattformar, men vårt fokus är mindre, mobila enheter.

Vi använder javascript ramverket mithril för att bygga våra webappar enligt MVC och cordova för att skapa hybrid appar för mobila enheter.

Bilden ovan ger en vy av hur man kan känna när man väljer mellan native app och hybrid webapp. Men om man tänker igenom sitt projekt och målgrupp så kommer nog det ena eller andra alternativet framstå som bästa vägen att gå. För vår del gäller hybrid webapp, vi har redan investerat tid och kraft i HTML, CSS och JavaScript och vår webapp är inte speciellt avancerad eller krävande och dessutom är det väldigt lockande att stödja flera plattformar med en kodbas.

Det kan se ut så här när vi är klara.

(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.)

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

2. Läs artikeln om “Mobile: native Apps, Web Apps, and hybrid Apps”.

3. Läs om “MVC architektur”.

4. Bekanta dig med dokumentationen för javascript ramverket mithril och genomgången av en enkel app i deras tutorial.

#Video

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

#Lästips

1. Läs artikeln Choosing between a native, hybrid or webapp.

#Övningar & Uppgifter

(ca: 6-10 studietimmar)

#Labbmiljö

Installera labbmiljön för kursen.

1. Installera labbmiljön som behövs för kursen.

2. Installera kommandot dbwebb samt kursrepot för kursen webapp.

Om detta är din första dbwebb-kurs så läser du också igenom hela manual-sidan för kommandot dbwebb.

#Ö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. Jobba igenom övningen “Kom igång med Cordova”.

3. Gör övningen “Kom igång med ramverket Mithril”.

4. Läs igenom artikeln “Virtuella noder”.

#Uppgifter

Dessa uppgifter skall utföras och redovisas.

1. Gör uppgiften “Skapa en mithril me-app”.

#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?
• Är du bekant med mithril?
• Hur känns det att jobba i mithril?
• Var det något som krånglade eller tog extra mycket tid?

#Revision history