App
Contents
Status & planer
Dette forløb er under tilretning og det nye forløb kan indtil videre ses her Version 2
Der er produceret 2 worked examples, et statisk(HTML/CSS/JQUERY) [1] zip: [2] og et dynamisk (HTML/CSS/JQUERY/PHP) [3] zip: [4], med tilhørende backend (uden design) [5].
Storyboard til 90 sek video kan ses her: Storyboard app
Introduktion
Video appetizer: Se den her
Forløbet kan skaleres til både informatik C/B og IT A. Hvis man gennemfører alle øvelserne bliver de fleste af de faglige mål behandlet og det kan bruge til elevens portfolio eller som en opstart til et eksamensprojekt (B/A-niveau). Forløbet kan dog brydes op således at man kun beskæftiger sig med en eller flere af øvelserne, da de ikke er gensidig afhængige. Dog er introduktionen til app'en i opgave 1 nødvendig at gennemføre. Slutproduktet kan også varieres og eleverne kan enten aflevere en papirprototype eller en mere eller mindre færdig app.
Formål
Eleverne anvender konstant app's i deres hverdag og dette forløb har til hensigt at give dem en basisviden om hvilke hensyn man skal tage sig når man designer og udvikler apps. Desuden vil forløbet give eleverne kendskab til designprincipper, arkitektur, modellering og programmering.
Læreplansmål
Informatik:
- Interaktionsdesign (C+B): Design af interaktionen i app'en
- Arkitekur (C+B): IT-Arkitekturen i apps
- Modellering (C+B): Modellering af flow og process i app'en
- Programmering (C+B): Udvikling af app i JQuery mobile
Indhold
- Modellering af processer
- Design af brugergrænseflader (gestalt, farver, typografi osv.)
- Database modellering
- Prototyping
- Arkitekturdesign
- Programmering af webapp i JQuery Mobile
- Test af systemer
Forudsætninger
- Forforståelse: Hvis man agter at eleverne skal programmere en webapp er basisforståelse for HTML/CSS en klar fordel.
- Teknologi: PC med editor til programmering f.eks. Komodo edit [8] eller Aptana [9].
- Da oprettelsen af ordrer anvender php/javascript, så skal eleverne have en lokal server sat op på deres egen pc eller på et webhotel som skole stiller til rådighed
Aktiviteter & materialer
Lektionsplan
Antallet af lektioner varierer efter hvor meget vægt man vil lægge på det enkelte emne. Selve udviklingen af app'en tager en del tid, hvis det skal være en prototype, der både visuelt og funktionelt, er af en vis kvalitet.
Materialer
Tekster:
Interaktionsdesign, Kapitel 15, ”Informationsteknologi”. Martin Damhus m. fl., Systime 2013
Gestaltlovene, Niels Gamborg - [10]
Farvernes betydning, Jacob Olsen - [11]
Klient-server og tre-lags-arkitekturen Version 1.0, Henrik Bærbak Christensen - [12]
Typografier
Opgaver
Emnet i dette eksempel er en app til bestilling af pizza, men det kunne være hvad som helst.
Forløbet er opdelt i en række opgaver, der kan gennemføres i en sammenhæng eller enkeltvis uafhængig af hinanden. :
Opgave 1
Undersøg webapp’en
Varighed ca. 30 minutter
Eleverne får udleveret kildekoden til webapp'en og en adgang til hver sin app.
App'en kan ses her City Pizza og kildekoden kan hentes her kildekode(zip)
Eleverne svarer på følgende arbejdsspørgsmål:
- Hvilke funktioner er der?
- Hvad mangler der?
- Undersøg koden og forklar hvordan en webapp adskiller sig fra en normal hjemmeside.
De mangler eleverne registrerer kan bruges som afsæt til de næste opgaver.
Opgave 2
Design og navigation
Varighed cirka 120 minutter
Målet med denne opgave er at eleverne trænes i at modellere problemstillinger og anvende konkret teori til at lave prototyper.
Struktur - og flowdiagram for app’en udleveres
Med udgangspunkt i litteratur om interaktionsdesign, gestaltlove osv. modificerer eleverne app’ens udseende og struktur.
Opgaver:
- Eleverne skal lave deres eget redesign og tilpasse strukturen i app’en med udgangspunkt i de ideer de fik i opgave 1.
Der tegnes en papirprototype, mens det nuværende struktur- og flowdiagram tilpasses til ændringerne.
Her kan man vælge at stoppe opgaven på C-niveau eller man kan gå til opgave 2.2 hvor man laver et stylesheet, så man selv bestemmer farver osv.
Opgave 2.1
Implementering af nyt design
Varigheden varierer efter kompleksitet og omfanget af ændringer - Regn med min. 120 minutter
Målet med denne opgave er at eleverne får forståelse for og træning i at programmere webapps.
Implementering af redesign og ny struktur (B/A niveau)
- Eleverne implementerer deres ændringsforslag i app'en (-kræver grundlæggende forståelse for HTML/CSS)
Til underviseren er der udviklet kode eksempler på:
- Oprette nye sider - hent kode - se video
- Oprette nye menupunkter - hent kode - se video
- Tilføje sletknap i bestilingslisten - hent kode - se video
- Udvide bestillingsformularen med kommentarfelt - hent kode - se video
Opgave 2.2
Styling af app'en
Varighed cirka 60 minutter
Målet med denne opgave er at eleverne får forståelse for præsentationslaget og anvender viden om design til styling af webapps.
- Eleverne opretter et nyt stylesheet lavet på https://themeroller.jquerymobile.com og indsætter det i app'en. Se vejledning her [13]
- Eleven kan også give app'en et nyt navn og indsætte eget logo - se video
Opgaven giver et godt afsæt til at tale om 3-lagsmodellen, hvor vi her arbejder i præsentationslaget.
Opgave 3
Arkitektur - Data
Varighed cirka 60 minutter
Målet med denne opgave er at eleverne får forståelse for datalagets betydning i 3-lagsmodellen. De skal forstå hvordan ændringer i datalaget fører til ændringer i hele systemet, selvom man ikke ændrer ved præsentations- eller applikationslaget.
App'ens datalag er tekstfiler i JSON format. Det er fra menukort.json menukort hentes og i ordrer.json at ordrerne gemmes. Se videoer der forklarer json filerne i app'en her:
Start lektionen med at præsentere 3-lagsmodellen hvis du ikke har gennemgået den endnu. Hvis den er gennemgået repeteres den kort.
Inden eleverne begynder at ændre i datalaget skal de have billeder af deres pizzaer klar og uploadet til serveren.
Opgaver:
- Eleverne skal nu tilføje deres egne pizzaer til app'en. - Se video
- Efter de har tilføjet de nye pizzaer skal de forsøge at oprette ordrer hvor de nye pizzaer bestiller, hvorefter de tjekker oversigt.html for at se om de er med.
- Eleverne skal herefter gå ind og slette gamle ordrer i ordrer.json - Se video - Tjek herefter oversigt.html for at se om det slår igennem.
Opgave 4
Design
Varighed cirka 90 minutter
I denne opgave skal du lave en model af hvordan app'en kan se ud. Læs først:
- 15.4 i Interaktionsdesign, Kapitel 15, ”Informationsteknologi”. Martin Damhus m. fl., Systime 2013 (er læst i forrige opgave, men anden del af kapitlet er vigtig for denne opgave ligeså)
- Farvernes betydning, Jacob Olsen - [14]
- Gestaltlovene, Niels Gamborg - [15]
Gå herefter ind på Moqups [www.moqups.com] og lav skitser af følgende:
- hvordan appens forside skal se ud
- hvordan brugerne skal kunne vælge pizza.
- hvordan brugeren skal kunne oplyse leveringsadresse og betale.
Farver og grafisk udtryk bestemmer du selv. Husk:
- Du designer en app til en Smartphone.
- En skitse er kun en grov model - alle detaljer behøver ikke at være på plads. Se eksempel:
Opgave 5
Logo
Varighed cirka 60 minutter
Tip: Alt efter hvor du som underviser lægger vægten i forløbet (programmering eller interaktionsdesign) kan du afsætte mere eller mindre tid til denne del.
I denne opgave skal du bruge den viden, du nu har om layout- og designregler, og lave et logo til din pizza-app.
Til designet af logoet kan du anvende photoshop/illustrator/gimp, hvis du er god til det. Alternativt kan du bruge et af de adskillige gratis logo services der findes på nettet.
Der er følgende krav til denne opgave:
- Logoet skal hænge sammen med dit design fra opgave 4.
- Giv en grundig beskrivelse af de gestaltlove, typografi-, farve- og kontrastregler, der er brugt i logoet.
- Du skal forklare hvilket format billedet skal være i, når du skal bruge det i din pizza-app.
- En samlet begrundelse for, hvorfor dit logo er det helt rigtige til en pizza-app.
Opgave 6
Test af brugervenlighed
Varighed cirka 90 minutter
I denne opgave skal du lave en test af om din app er brugervenlig. Ofte kan man lave en horisontal prototype først og så teste den. I vores tilfælde tester vi ud fra den mock-up, du lavede i forrige opgave.
- 15.4 i Interaktionsdesign, Kapitel 15, ”Informationsteknologi”. Martin Damhus m. fl., Systime 2013.
- Beskriv herefter (ud fra metoderne i teksten) hvordan du vil teste om din app er brugervenlig. Beskrivelsen skal som minimum indeholde svar på følgende:
- Hvilke opgaver skal test-deltagerne løse (Lav de spørgsmål som de skal svare på)?
- Hvilken opgave har testlederen?
- Hvor mange testdetagere skal der være?
- Hvad skal der ske før, under og efter testen?
- Udfør testen på jeres prototype. TIP: Lad eleverne teste hinandens prototyper
- Lav tilrettelser på baggrund af den feedback i har fået
Opgave 7
Arkitektur
Varighed cirka 20 minutter
IT-systemer med mange brugere, der deler information med hinanden, kan beskrives som en tre-lagsarkitektur.
Læs først: Klient-server og tre-lags-arkitekturen Version 1.0, Henrik Bærbak Christensen - [16]
- Lav en grundig beskrivelse af arkitekturen i app'en.
- Du skal minimum komme ind på følgende emner:
- Klient
- Server
- Præsentationslag
- Applikationslag
- Datalag
Opgave 8
Database design
Varighed cirka 90 minutter
Nu skal datalaget designes og der skal oprettes en database.
Ud fra din papirprototype og dit flowdiagram skal du nu lave af ud- og inddata. For hvert skærmbillede skriver du det data ned, der hentes fra database og det der skrives i databasen. Et eksempel kunne være menukortet hvor der hentes pizzanummer, billede, pris osv. fra databasen, mens der fra bestillingsformularen skrives navn, adresse osv. til databasen.
Ud fra din dataanalyse kan du nu strukturere din database i tabeller og skabe relationer.
Til sidst normaliseres din database.
Den færdige database implementeres i f.eks. MySQL. TIP: Det er kun nødvendigt at implementere databasen hvis man vil lave en aktiv dynamisk app.
Databasetabeller brugt i worked example kan downloades i sql format her: [17]. De er klar til import i phpMyAdmin
En vejledning til dataanalyse og oprettelse af databasetabeller i phpMyAdmin kan hentes her: Dataanalyse og databaser
Opgave 9
Udvikling af app
Varighed: Alt efter elevernes forkundskaber indenfor HTML/CSS/PHP og om der laves en statisk app i HTML/CSS/JQUERY eller en dynamisk app med tilhørende database er der forskellig varighed. Elever med basic skills indenfor HTML og CSS vil kunne lave en statisk app med eget stylesheet på 4 lektioner a 60 minutters varighed, mens en dymanisk app tager min. 6 lektioner.
Påbegynd udviklingen af din pizza app.
Tag udgangspunkt i et færdiglavet worked example eller med en af disse skabeloner:
Worked Examples:
- Dynamisk med tilhørende database (HTML/CSS/JQUERY/PHP/SQL) [20] zip: [21], med tilhørende backend (uden design) [22].
Skabeloner (Klik for at se og højreklik - gem som for at downloade):
- Opstart uden stylesheet og med kun en side: [23] - Se eventuelt guide til hvordan du kan få et stylesheet lavet på https://themeroller.jquerymobile.com overført til en app her: [24]
- Simpel app med flere sider: [25] - Læg mærke til hvordan menupunkterne i navbar linker vha. hashtags (<a href="#menukort">Menu</a>
- Statisk menukort: [26] - Koden til menukort starter på linje 53
- Dynamisk menukort, hvor data hentes fra den database der designes i opgave 8: [27] - forbindelse til database er først i filen, mens menuen dannes fra linje 72
Tilpas din app til dit design.
- Anvend https://themeroller.jquerymobile.com til oprettelse af stylesheet
- Inspiration til funktioner i JQuery mobile: http://www.w3schools.com/jquerymobile/default.asp
Opgave 10
Test af app
Varighed cirka 60 minutter
På baggrund af det arbejde du lavede i opgave 6 skal du nu udføre en brugervenlighedstest af din app.
Tilpas herefter designet så der tages højde for den feedback du har fået
Eksemplarisk materiale
Worked examples:
Statisk web app: [28]
Dynamisk web app med backend: [29]
Pixi - 3-lagsarkitektur
Spring processen over og dyk direkte ned i koden og lav din egen app, ved at ændre præsentations og datalag
Introduktion
I stedet for at tage udgangspunkt i en systemudviklingsproces og lave en app på baggrund af processen, kan eleverne anvende en generisk webapp som udgangspunktet for deres arbejde med webapps. App'en er dynamisk og fungerer uden brug af database, da datalaget er JSON filer (tekstfiler).
App'en er kaldet MyVeryOwnShop og er en webshop med 3 varer i. Brugeren kan klikke på varerne og tilføje dem til en kurv, hvorefter de kan bestille dem og ordren bliver herpå gemt i en JSON fil og kan vises i en ordreoversigt.
Eleverne kan ved at ændre på datalaget lave en webapp der kan sælge alt fra pizzaer og sko til tøj og dagligvarer. Derefter kan de tilpasse designet til det de ønsker at sælge.
App'en kan ses her [30]
Formål
Give eleverne en god forståelse for hvordan webapp's virker og arbejde med arkitektur, programmering og design
Læreplansmål
Informatik:
- Interaktionsdesign (C+B): Design af interaktionen i app'en
- Arkitekur (C+B): IT-Arkitekturen i apps
- Programmering (C+B): Udvikling af app i JQuery mobile
Indhold
- Arkitekturdesign
- Programmering af webapp i JQuery Mobile
- Design af brugergrænseflader (gestalt, farver, typografi osv.)
Forudsætninger
- Forforståelse: Hvis eleverne har grundlæggende kendskab til HTML er den en fordel, men det kan godt laves uden.
- Teknologi: PC med editor til programmering f.eks. Komodo edit [34] eller Aptana [35].
- Webserver enten lokalt på elevens egen computer eller i skyen
Aktiviteter & materialer
Lektionsplan
Materialer
Tekster:
Klient-server og tre-lags-arkitekturen Version 1.0, Henrik Bærbak Christensen - [36]
Opgaver
Forløbet er opdelt i en række opgaver. :
Opgave 1
'Introduktion til MyVeryOwnShop
Varighed ca. 60 minutter
Eleverne skal have hver deres version af webapp'en.
Eleverne skal herefter anvende app'en og lave en ordre. Eleven kan se resultatet på siden: oversigt.html
Herefter kan eleven ændre datagrundlaget for app'en ved at tilføje sine egne varer. Varerne ligger i varer.json - Se video
Eleven kan også tilføje varer i varer.json filen. - Se video
Eleven kan så derefter lave ordrer på de nye varer og se hvordan oversigt.html ændrer sig.
Tip: Det kan være en fordel at have en kopi af den oprindelige varer.json fil, da der ikke skal mere end en forkert indsat } til at siden ikke længere viser varerne.
Slut lektionen af med en snak omkring 3-lagsarkitekturen og hvordan det er en fordel at adskille lagene.
Opgave 2
""Tilpas design og varer efter et emne""
"Varighed ca. 60 minutter"
Eleverne kan nu lave en app ud fra et selvvalgt tema eller undervisneren kan udvælge nogle for dem. f.eks. tøj, køkkengrej, sko, kasketter osv.
Eleverne skal herefter oprette varer indenfor temaet ligesom i lektionen før
Derefter skal de tilpasse designet og de øvrige undersider til temaet. Guide til stylesheet oprettet på https://themeroller.jquerymobile.com kan ses her: [37]