Kursen webapp (v3)

Kursen Webbapplikationer för mobila enheter, a.k.a. webapp, lär dig hur du bygger applikationer för mobila enheter och läsplattor med HTML, CSS och JavaScript.

Kursen syftar till att lära ut utveckling av webbapplikationer med HTML, CSS och JavaScript och fokuserar på mobila enheter och läsplattor.

Kursen går igenom konstruktioner i HTML, CSS och JavaScript som hjälper dig bygga applikationer som är oberoende av skärmens storlek och enhetens styrning (mus, touchscreen, penna, tangentbord).

Du bygger en applikation som använder sig av HTML, CSS och JavaScript på klientsidan och du jobbar med RESTful API:er och JSON-data för att bygga både webappar och hybrid webappar.

Via litteraturstudier och praktiska övningar förkovrar du dig i området. I slutet av kursen får du visa dina färdigheter i ett praktiskt programmeringsprojekt där allt integreras.

#Förkunskaper

Det formella förkunskapskravet är:

För tillträde till kursen krävs genomgångna kurser motsvarande 15 hp i programmering och webbteknologier varav 6 hp ska vara programmering med JavaScript.

#Innehåll

Kursen omfattar följande områden:

• HTML5, CSS3, JavaScript med mobilt fokus.
• CSS3 för att styla webbapp som en “native app”.
• Mobilen och läsplattan som test och utvecklingsmiljö.
• Touch-event.
• Responsive design, storlekar, landskap, portätt.
• Jobba med RESTful API:er och JSON.
• Mobil prestanda och tillgänglighet.
• Att använda hårdvarufunktioner som är specifika på mobila enheter, tex splash-screens, logotyper och filhantering.
• Jobba med webappar och hybrid webapp för att komma åt hårdvarunära funktioner.
• Felsökning och tekniker att debugga sitt program.
• Utvecklingsmiljö och verktyg för utveckling av mobila appar.

#Mål

#Kunskap och förståelse

Efter genomförd kurs skall studenten:

• påvisa grundläggande förståelse för utveckling av mobila applikationer med valda tekniker genom att skriftligen beskriva och sammanfatta erfarenheter och observationer från övningar och projekt.
• påvisa god förståelse för mobila enheters begränsningar och styrkor samt anpassa mobila applikationer för tillgänglighet och användbarhet.
• påvisa goda kunskaper i att skapa mobila appar, med HTML, CSS och JavaScript, genom att tillämpa dessa tekniker i praktiska övningar och projekt.
• påvisa goda kunskaper i att använda JSON API:er för att hämta, skapa, uppdatera och ta bort data genom att använda JSON API:er i praktiska övningar och projekt.

#Färdighet och förmåga

Efter genomförd kurs skall studenten:

• självständigt utveckla, dokumentera och presentera ett projekt baserat på utveckling av en mobil app.
• ha god praktisk förmåga att hantera de verktyg och miljöer som används vid utveckling och felsökning av mobila appar med valda tekniker.

#Kursmoment

Kursen är uppdelad i kursmoment där varje kursmoment uppskattas till 20h studerande i form av programmering, undersökning, läsande, övningar, uppgifter, redovisning och eftertanke. Alla kursmoment skall redovisas och du samlar alla redovisningar i din me-sida.

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

Instruktion till kursmoment 01.

#Kmom02: Mobila enheters begränsningar

Vi tar en titt på vilka begränsningar och utmaningar man står inför som användare av en mobil enhet. Vi brytar ut CSS koden från kmom01 till ett GUI komponentbaserad ramverk och lägger till fler GUI komponenter till vårt ramverk.

Vi fortsätter med vår applikation från kmom01 och använder tekniker för att strukturera JavaScript koden på ett bättre sätt.

Innan vi gör detta tittar vi på ett verktyg som hjälper oss att söka och visa information i JSON-filer.

Instruktion till kursmoment 02.

#Kmom03: Formulär och CRUD

I detta kursmoment fortsätter vi med att utveckla våra GUI komponenter från tidigare kursmoment. Vi skapar lättanvända formulärfält med hjälp av HTML5 och kopplar ihop fälten i formulär som är lätta att använda på små skärmar där kontext och möjligheten att skriva snabbt och enkelt saknas.

I vår applikation lägger vi till möjligheten att skapa, uppdatera och ta bort data via formulär. Vi har i tidigare kursmoment arbetat enbart med vanilla JavaScript, men ska i detta kursmoment titta på hur vi kan använda oss av JavaScript ramverket mithril för att underlätta hämtning av data, rendering av HTML-element och de olika vyer.

Instruktion till kursmoment 03.

#Kmom04: Autentisering med JWT

Vi fortsätter med Lager appen och lägger till en funktion för att skapa fakturor utifrån en order. Alla ska inte kunna skapa fakturor så innan vi skapar faktura funktionen skapar vi inloggning och tittar på JSON Web Tokens för autentisering.

När man skapar en faktura är det bra att ha snygga och responsiva tabeller. Så kursmomentets GUI-komponent är just tabeller och hur vi optimerar dessa för mobila enheter.

Instruktion till kursmoment 04.

#Kmom05: Native

Än så länge har vi skapat applikationer för webbläsaren, men i detta och nästa kursmoment skapar vi applikationer på ‘riktigt’ för våra mobila enheter. Vi ska se vilka fördelar detta kan ge och hur vi maximerar styrkorna för våra mobila enheter. Vi lägger till ikoner och splash screens och fokuserar på att anpassa applikationernas design för de olika plattformarna och skärmstorlekar.

Instruktion till kursmoment 05.

#Kmom06: Mobila enheters styrkor

I detta kursmoment fortsätter vi att utnyttja styrkorna i våra mobila enheter. Vi kopplar in kamera och GPS för att skapa en fulländad applikation, som utnyttjar alla möjligheter vi har på en mobil plattform.

Instruktion till kursmoment 06.

#Kmom07/10: Projekt och examination

Avslutningsvis gör du ett projekt enligt en specifikation. Projektet är det sista som du gör och tillsammans med alla redovisningar som finns på din me-sida så används detta som underlag för att examinera dig från kursen.

Projektet bygger på tidigare kursmoment och med dina nya erfarenheter skapar du en tillgänglig och användbar mobil applikation enligt specifikationen.

Instruktion till kursmoment 10.

#Kurslitteratur

Måste jag skaffa kurslitteraturen?

#Kurslitteratur

Det finns läsanvisningar i samband med varje kursmoment.

• Mobile HTML5 – Estelle Weyl Boken går igenom de delar av HTML5, CSS3 och JavaScript som är relevanta när man bygger applikationer för mobila enheter. Använd boken som ett uppslagsverk och skumma bara igenom den.

#Referenslitteratur

Följande böcker har jag valt som referenslitteratur. De kan vara bra att ha tillhands och ger lite extra läsmöjligheter. De behövs inte för att klara kursen men vill du bemästra kursens område så är dessa böcker bra startpunkter.

• HTML och CSS-boken – Rolf Staflin En stabil bok för att komma igång med HTML och CSS.

• JavaScript: The definitive Guide – D. Flanagan En tegelsten, komplett med allt du vill veta om språket JavaScript med dess Core, DOM och eventhantering, inklusive en referens till olika funktioner. Perfekt för dig som verkligen vill JavaScript.

• JavaScript: The Good Parts – D. Crockford En genomgång av JavaScript Core och hur man ska, och inte ska, skriva sin kod.

• You Don’t Know JS – K. Simpson (@getify) Om du vill förstå JavaScript på djupet och därigenom bli kung på JavaScript, men samtidigt en bättre programmerare rekommenderas You Don’t Know JS starkt.

#Övrig litteratur

I varje kursmoment kan det tillkomma läsanvisningar i till exempel artiklar, manualer och webbmaterial.

#Läsanvisningar

Här följer en sammanställning av de läsanvisningar till kurslitteraturen som ges i varje kursmoment.

Dessutom har varje kursmoment läsanvisningar i artiklar och videos.

#Rekommenderad studieplan

Kursen har en rekommenderad studieplan som visar en översikt över kursens olika moment och när de i tiden bör utföras för att studenten skall ligga i fas med kursens planering.

I studieplanen visas när rättning sker av respektive inlämnat moment samt när det finns möjligheter att göra restinlämningar.

Läs mer om den rekommenderade studieplanen.

#Lektionsplan

Det finns en lektionsplan som visar en detaljplanering för undervisningen i kursen, vecka för vecka.

Läs mer om lektionsplanen.

#Lärarstöd och handledning

Schemalagda labbtillfällen, hangouts samt forum och chatt de viktigaste källorna för handledning. Läs om handledning och hjälp-till-självhjälp.

Ofta ställda frågor (FAQ) finns på GitHub issues.

#Betygsättning

Det finns ett särskilt dokument som beskriver hur bedömning och betygsättning sker.

#Ladok

Enligt kursplanen finns ett antal ladokmoment och de är kopplade till kursens kursmoment enligt följande.

Läs mer om rapportering av resultat.

#Kursutvärdering och kursutveckling

Det finns ett särskilt dokument som beskriver hur arbetet med kursutvärderingar och kursutveckling sker. Det är oerhört viktigt för mig att du säger till vad du tycker om kurs och kursmaterial, du kan alltid hojta till i både forum, chatt eller mail.

Läs om hur jag jobbar med kursutvärdering och kursutveckling.

#Kursplan

Kursplanen är kursens formella dokument som fastställts av högskolan. När kursen utvärderas görs det mot kursplanen. I kursplanen kan du läsa om kursens klassificering, syfte, innehåll, mål, generella förmågor, lärande och undervisning, bedömning och examination, litteratur, mm.

Kursens namn är “Webbapplikationer för mobila enheter”.

Från och med våren 2019 hittar du kursplanen genom att söka på kurskoden DV1609 via BTH’s hemsida.

Fram till våren 2018 så gavs kursen under kurskoden DV1546.

#Revision history