Design og udvikling af app (blok)

Introduktion

Dette forløb bruger systemet “App Lab” fra code.org, og anvender blokbaseret 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, man understøtter udviklingen af innovative kompetencer (krav til arbejdsmetoder på informatik C/B), og det kan bruges til elevens portfolio eller som en opstart til et eksamensprojekt (B/A-niveau).

Dette forløb har en alternativ version med tekstbaseret programmering, der er beskrevet her.

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

  • 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.
  • Innovation: Materialet om innovative systemer og arbejdsmetoder [1] kan enten gennemgås på forhånd eller gives som lektie til de relevante lektioner.

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 – [2]
Farvernes betydning, Jacob Olsen – [3]
Klient-server og tre-lags-arkitekturen Version 1.0, Henrik Bærbak Christensen – [4]
Kapitel 7-9 af Informatik C, Ken Mathiasen, Praxis 2017

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 app’en 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:

 Kopiér herfra til elevmaterialet 
  • 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.

 Kopiér herfra til elevmaterialet 
  • 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.

Appens datalag er især udviklet i den tredje video, men der er plads til at udvide datamodellen efter behov.

Start lektionen med at præsentere 3-lagsmodellen hvis du ikke har gennemgået den endnu. Hvis den er gennemgået repeteres den kort. App lab understøtter trelagsmodellen meget tydeligt, idet hele udviklingen af appen er centreret om de tre dele af app lab: Kode, Design og Data.

  • Opgave 1: Eleverne skal lære at tilføje nye data til datalaget. Indtast en eller flere nye pizzaer til pizzadatabasen. Husk at teste programmet grundigt, for at sikre at programmet er generelt nok til at håndtere den udvidede datase.
  • Opgave 2: Eleverne skal prøve at udvide datamodellen for pizzaerne. Tilføj en kolonne til databasen, så der kan gemmes et billede til hver pizza. Billederne kan gemmes i databasen i form at en url, til et ressource på internettet. Brugerfladen skal opdateres, så billederne vises.

Opgave 4

Ordrehåndtering

Varighed cirka 120 minutter

Målet med denne opgave er at give eleverne indblik i hvordan en proces kan modelleres i et system, og hvordan data tilføjes og ændres i en database.

Opgaver:

  • Eleverne diskuterer hvilken proces en pizzaordre skal gennemgå, og der tegnes et flowdiagram.
  • Databasens indhold skal bestemmes. Hvilke datafelter er relevante for en pizzabestilling
  • Databasetabellen ordrer oprettes i systemet.
  • Nu skal der udvikles noget kode:
    • Når brugeren klikker på Betal, skal der oprettes en ny ordre i databasen.
    • Når betalingen er gennemført, skal ordrens status opdateres.

Til underviseren er der lavet en ekstra version 4 af appen, hvor ordredatabasen er tilføjet. Denne kan bruges som inspiration.

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 udvidede app med billeder
  • Den udvidede app med ordrer. Her er der flere brugergrupper der skal kunne bruge systemet.

Den version der testes, skal være nogenlunde funktionel, for at testen giver mening.

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

 Kopiér herfra til elevmaterialet 
  • 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?
  • Lav tilrettelser på baggrund af den feedback i har fået (hvis 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.

 Kopiér herfra til elevmaterialet 
  • Beskriv et innovativt it-system.
  • Beskriv, hvad inkrementel og radikal innovation er, og diskuter eksempler på it-systemer i hver kategori.
    For eksempel: Inkrementel – app, der understøtter egen ”huskeseddel”. Radikal – app, der tillader online bestilling.
  • Beskriv 4p-modellen, og diskuter eksempler på it-systemer i hver kategori.
    For eksempel: Produkt – app, der understøtter egen ”huskeseddel” vs app, der tillader online bestilling. Proces – bestille i app vs bestille og betale i app. Position – almindelig ønskeseddel vs “Ønskeskyen” (interaktiv ønskeseddel). Paradigme – app til én take-away vs Just Eat.
  • Beskriv SAMR-modellen, og diskuter eksempler på it-systemer i hver kategori.
    For eksempel: Substitution – huskeseddel i app. Augmentation – bestilling i app. Modification – betaling i app. Redefinition – Just Eat som koncept.
  • 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 SAMR-modellen på dem – kan I ramme alle 4 niveauer?

Lektie: lektion 1-2 af http://cloud.cct.au.dk/wiki/index.php?title=Innovation

5 kommentarer til “Design og udvikling af app (blok)

  1. Hej Informatik-folk. Jeg synes, at det her ser fornuftigt ud. Jeg vil bruge det i praksis.

    Men: I forhold til farver og deres betydning har jeg et lille link til jer: Jeg har på et tidspunkt skrevet en e-bog for Systime, og i den er der noget let forståelig teori omkring bl.a. typografier og farver. Kan I bruge den til jeres litteraturliste? Grafisk præsentation, kapitel 4. Farvelære: https://grafisk.systime.dk/?

  2. Hej Lars

    Det er godt at høre, at du vil bruge forløbet. Held og lykke med det.

    Tak for dit bidrag til litteraturlisten. Med fagets beskedne erfaring er materialehenvisninger velkomne.

    Jesper

  3. Hej igen. Kopieringen af appen i starten har jeg haft rigtigt meget bøvl med. Jeg har lavet en brugervejledning (som dog stadigvæk ikke er komplet). Er I interesserede i at få brugervejledningen. Alternativt at lave en video, hvor I viser, hvordan man henter tingene over? Hvis I reagerer på dette, så skriv venligst på lalj@campusvejle.dk

    // Lars

Skriv en kommentar