Applab

Status & planer

Der findes en serie videoer med worked examples, der viser udviklingen af et program, som eleverne skal arbejde videre på:

Video 1

Video 2

Video 3

Der mangler at blive lavet en introduktionsvideo til forløbet (Søren).

Hanne:

-mangler innovation specifikt relateret til spil/spiludvikling.

-have kategorisering af innovative systemer som forudsætning.

Introduktion

Dette forløb er en alternativ version til et andet forløb, der er beskrevet her. Dette forløb bruger systemet "App Lab" fra code.org, og anvender blokbaseret programmering, i modsætning til det andet forløb, der anvender tekstbaseret programmering.

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

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, samt kategorisering af innovative it-systemer.

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
• Innovation (C+B): Eksempler på og kategorisering af innovative it-systemer

Indhold

• Modellering af processer
• Design af brugergrænseflader (gestalt, farver, typografi osv.)
• Prototyping
• Arkitekturdesign
• Programmering af app i Applab fra code.org
• Test af systemer
• Kategorisering af innovative it-systemer

Forudsætninger

Eleverne kan nemt komme igang med at lave apps i app lab, og systemet er lavet til nybegyndere, der slet ingen erfaring har med programmering eller appdesign.

Det kan være en fordel for eleverne at kende til trelagsmodellen, der eksplicit anvendes i applab. Desuden vil elever der kender til javascript let kunne lave avancerede ting i applab.

• Teknologi: PC med browser. De udviklede apps kan deles til andre platforme, i forbindelse med test og evaluering.

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

Videoer:

Video 1

Video 2

Video 3

Tekster:
Interaktionsdesign, Kapitel 15, ”Informationsteknologi”. Martin Damhus m. fl., Systime 2013
Gestaltlovene, Niels Gamborg - [1]
Farvernes betydning, Jacob Olsen - [2]
Klient-server og tre-lags-arkitekturen Version 1.0, Henrik Bærbak Christensen - [3]
Typografier

Opgaver

Emnet i dette eksempel er en app til bestilling af pizza, men det kunne være hvad som helst.
Du kan se en video der præsenterer videoen her: Introduktion til app'en

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 appen

Varighed ca. 20 minutter

Efter at have set den første video, skal eleverne selv arbejde lidt med programmet. (Man kan også starte med at se alle tre videoer, der gør ikke den store forskel.)

Eleverne svarer på følgende arbejdsspørgsmål:

• Hvilke funktioner er der?
• Hvad mangler der?
• Appen på videoen har to knapper til at navigere, højre og venstre, men kun den ene knap virker. Prøv at ændre i programmet, så man kan lede begge veje gennem pizzaerne.

Til underviseren Formålet med opgaven er blot, at eleverne kommer igang med systemet. Opgaven med den manglende knap er nem for nogle, mens andre vil skulle bruge lidt hjælp til at "kopiere" løsningen fra videoen til den anden knap. De hurtige elever kan have frie hænder til at lave de ændringer, som de synes er spændende.

Opgave 2

Design og navigation

Varighed cirka 30 minutter

Målet med denne opgave er at eleverne trænes i at modellere problemstillinger og anvende konkret teori til at lave prototyper. Opgaven giver mest mening, hvis den udføres efter at have set mindst de to første videoer.

• Tegn et flowdiagram over brugerens vej gennem systemet, når der bestilles en pizza.
• Tilføj en eller flere sider til flowdiagrammet. Hvilken funktionalitet kan forbedre appen?

Opgave 2.1

Implementering af nyt design

Varigheden varierer efter kompleksitet og omfanget af ændringer - Regn med min. 100 minutter

Denne opgave handler om design af brugerfladen, og kan kobles sammen med teori om farver, gestaltlove osv.

Målet med denne opgave er at eleverne får forståelse for og træning i at programmere en app, og anvender teorien om brugerfladedesign.

• Eleverne implementerer deres ændringsforslag i appen.

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

Visning af ordrer

Varighed cirka 120 minutter

Målet med denne opgave er at give eleverne indblik i hvordan data præsenteres for brugeren og hvordan det kan ændres.

Eleverne starter med at undersøge oversigt.html, hvor ordrerne fra app'en gemmes.

Opgaver:

• Eleverne finder uhensigtsmæssigheder i oversigt.html og skriver dem ned
• Eleverne skal herefter analysere sig frem til forbedringsforslag - f.eks. sortering
• Eleverne tegner en papirprototype over deres forberede version af oversigt.html
• Eleverne undersøger kildekoden i oversigt.html
• Eleverne analyserer sig frem til hvilke ændringer der skal laves i hvert af lagene i 3-lagsmodellen for at implementere deres eget design (C-niveau)
• Eleverne implementerer deres eget design i oversigt.html

Til underviseren er der lavet kodeeksempler sortering, udvælgelse og visning af bestemte order:

• Sorter ordrer - Højreklik og vælg gem som for at hente filen
• Kun ordrer fra idag - Højreklik og vælg gem som for at hente filen
• Få kommentarer med - Højreklik og vælg gem som for at hente filen

Opgave 5

Test af brugervenlighed

Varighed cirka 90 minutter

Målet med denne opgave er at eleverne skal få indblik i test af systemer

I denne opgave skal du lave en test af om din app er brugervenlig. Som underviser kan du enten vælge om eleverne skal teste:

• Den oprindelige app
• Den papirprototype der blev lavet i opgave 2
• Den prototyper der blev laver i opgave 2.1
• Hvis eleverne har lavet opgave 4 kan oversigt.html også testes - fokus på forskellen mellem testen af den kunderettede del af systemet (frontend) og den del der rettes sig med de ansatte (backend)

Inden testen planlægges og udføres gennemgås test af interaktionsdesign.

• Beskriv 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 (vis tilrettelserne ikke skal laves på papir, så skal varigeheden af øvelsen forlænges)

Opgave 6

Opret din egen app

Varighed min. 180 minutter

Målet med denne opgave er at tage de ting eleverne har lært igennem de første opgaver i forløbet og anvende dem til at designe deres egen app.

Enten kan eleverne komme på en case eller underviseren kan udlevere en f.eks. at pizzariaejeren har købt en grillbar og vil også have en app dertil eller lav en app til registrering af fravær.

Opgave 7

Kategorisering af innovative it-systemer

Varighed ca 90 minutter

Målet med denne opgave er, at eleverne får kendskab til, hvordan man kan kategorisere innovative systemer.

• Spørg: Hvad er et innovativt system?
• Beskriv, hvad inkrementel og radikal innovation er og diskuter eksempler på it-systemer i hver kategori.
• Beskriv 4p-modellen
• Beskriv SWOT-modellen
• Opgave i grupper:
  • Udvælg nogle innovative it-systemer og indplacer dem i 4p-modellen - kan I ramme alle 4 p'er?
  • Udvælg 1-2 it-systemer og anvend SWOT modellen på dem. Brug skemaet nederst i lektien.

http://cloud.cct.au.dk/wiki/index.php?title=Innovation

Pixi

Alle opgaverne kan køres som selvstædige pixiforløb.

Udvidelser og genanvendelse

Skabelonen for undervisningsforløbet kan anvendes til udvikling af flere forløb.

Der er allerede udviklet et ekempel med selv samme app, men hvor datagrundlaget er en MySQL database. Det giver muligheder for at lave mere specifikke dataudtræk med SQL og udvide app'en. Eksemplet kan hentes her: [4] zip: [5], med tilhørende backend (uden design) [6].

Derudover kan man også følge samme skabelon hvor udgangspunktet er en webshop på en php hjemmeside. Se et eksempel her webshop - Download zip med kildekode her zipfil