My App

Af Hanne Søe og Malene Cramer Engebjerg

Præsentation af forløbet (video)

Introduktion

Forløbet er tænkt som det første forløb på informatik C/B. Tanken er, at eleverne hurtigt skal gå fra at være it-forbrugere til at blive it-producenter. Eleverne skal arbejde med “My App” udviklet i App Lab fra code.org – en app, som er tilpasset deres egne behov. Idéen er, at eleverne hurtigt skal føle, at de dels kan skabe et it-produkt, og at de dels får en oplevelse af at faget og produktet er relevant og anvendeligt for dem. I forløbet arbejdes der med mange af de faglige mål, og eleverne får således hurtigt en introduktion til de kerneområder, der skal arbejdes med i løbet af skoleåret.

Eleverne får til at starte med stillet en meget simpel app til rådighed, som kan omregne fra danske kroner til euro (tanken er, at eleverne lige er kommet tilbage efter sommerferien, hvor de kan have haft brug for en valutaberegner). Eleverne skal starte med at bruge app’en (use), og der stilles en screencast til rådighed, som viser tilblivelsen af app’en (worked example – WE). Herefter skal eleverne modificere app’en (modify), så den f.eks. også kan regne fra euro til danske kroner, og så der bliver mulighed for selv at indtaste valutakursen. Dernæst er der lavet en række stilladserede opgaver efter princippet stepwise improvement, hvor eleverne blandt andet skal lave en side, hvor de kan trække 20% fra en pris, som de kan bruge, når der f.eks. er udsalg.

Herefter skal eleverne via innovative arbejdsmetoder selv komme med bud på, hvad app’en kan udvides med. På den måde kommer app’en til at dække nogle af de behov, som eleverne selv har. Målet er altså at skrabe en “customized” app, som passer til elevernes egne behov. Disse idéer (eller nogle af dem), skal så implementeres i app’en (create). For at facilitere processen udarbejdes en række små WEs (eller der henvises til andres WEs), som illustrerer, hvordan man eksempelvis indsætter en knap, hvordan man laver funktionalitet, når man trykker på knappen, hvordan man går fra én side til en anden osv. Tanken er, at hver WE varer 2-3 minutter og har en sigende overskrift, så eleverne nemt kan orientere sig i dem.

Når eleverne har en app med mere eller mindre udvidet funktionalitet, er det meningen, at der skal laves usability evaluering. Eleverne skal udarbejde en testplan og gennemføre en usability evaluering. På baggrund af den laves en liste med usability problemer. Herefter gives en kort introduktion til interaktionsdesign (f.eks. gestalt lovene og Don Normans designprincipper). På baggrund af de oplevede usability problemer og den nye viden om interaktionsdesign skal eleverne tilpasse deres app.

Når eleverne har deres færdige app, skal den vurderes i forhold til graden af innovation.

Det endelig mål er, at eleverne får en app, som de kan bruge på deres egen mobil (f.eks. via “Føj til hjemmeskærm” på iPhone).

Alle WE samlet i en playliste på youtube

Faglige mål

  • Konstruktion af IT-system som løsning til en problemstilling
    • Kernen i IT-faget er at skabe IT-systemer. Med skabelse af et IT-system vil fagets fire nedenstående faglige mål blive inddraget. En app skal konstrueres og videreudvikles med både stilladserede delopgaver og afsluttende med mere kreative og åbne opgaver.
  • IT-systemers og menneskelig aktivitets gensidige påvirkning
    • Usability evaluering af IT-systemet i forhold til at kvalitetssikre systemet.
  • Repræsentation og manipulation af data
    • Data kan repræsenteres på forskellig vis i forløbet. Som udgangspunkt som værdier i variable og manipulation af disse variable og med udvidelsesmuligheder til database-anvendelse i de sidste åbne opgaver.
  • Programmering
    • Programmering (C+B) med udvikling af app i App Lab fra code.org med programmering både som blok-programmering og javascript. Programmet er styresystem-uafhængigt. Forståelse for og kompetencer i brugen af basale programmeringsstrukturer såsom variable, funktioner og selektion (if-sætninger).
  • Interaktionsdesign
  • Innovation
    • Udvikle innovative kompetencer ved skabelse af en del af et IT-system ud fra egne innovative idéer samt vurdering af graden af innovation i det færdige produkt og innovationstype.

Kernestof

Worked examples til App Lab: Adgang til den første version af MyApp: MyApp – version 1

Worked examples:

Power Points:

Websider: Niels Gamborg om gestaltlovene: Gestaltlovene

Bøger:

  • Interaktionsdesign:
    • Informatik C, Ken Mathiasen, PRAXIS – kapitel 9: “Interaktionsdesign, IxD”, side 193-226
  • Programmering:
    • IT B Merkantil, Ken Mathiasen og Regin Buss Vels Jensen, Praxisonline – kapitel 15.1.2 (i udvalg): “Introduktion til variable, funktioner, parametre, løkker og if-sætninger”
      eller
    • Informatik C, Ken Mathiasen, PRAXIS – kapitel 8: “Velkommen til en ny guldalder – programmering”, side 177-192
  • Innovation:
    • Innovation C, Kristian Philipsen, Pia Petersen og Claus Holst Christensen, Nyt teknisk forlag – kapitel 7: ”Udvikling og evaluering af forretningsideer” (specielt side 110-117 om idéudviklingsteknikker, De Bonos tænkehatte og idéscreening)
      eller
    • Informatik C, Ken Mathiasen, PRAXIS – kapitel 6: “Gør plads til de vilde løsninger – innovation”, side 137-151

Didaktik

Use-modify-create og stepwise improvement er de bærende didaktiske principper i dette forløb. Desuden er der også udarbejdet en række worked examples (WE) om brugen af App Lab. Disse er der henvist til i nedenstående.
De konkrete didaktiske overvejelser til hver opgave er anført i kursiv nedenfor den enkelte opgave.

Undervisningsdifferentiering er med udgangspunkt i erfaringer med forløbet en nødvendighed. Dygtige elever skal hele tiden have bud på udvidede opgaver f.eks. lave et fedt design, mens de svageste elever afsluttende skal have en klassegennemgang, som de kan følge og udføre samtidigt. Mellemgruppen og den svageste gruppe støttes under opgaveløsning undervejs.

Elevernes udbytte evalueres løbende ved, at der eksplicit er indlagt fire seancer efter hver af de større, faglige milepæle i forløbet, hvor eleverne skal skrive i deres logbog. Som værktøjer hertil kan eksempelvis benyttes OneNote eller Google Docs.

Lektioner

Forløbsplanen er struktureret i moduler, som hænger sammen fagligt. Varigheden af hvert modul vil være afhængig af antallet af elever, elevsammensætning og -kompetencer. Typisk forventes det, at et modul kan gennemføres på 60-90 minutter.

Modul 1

  • Præsentation af forløb via mindmap.
  • Brug app’en (use). Anvendelse og undersøgelse af app’en og koden.
  • Opgave 1 – brug app’en
    Hent og remix/bland igen start-udgaven af myApp, klik her
  • Opsamling – hvad her I fundet ud af? (kobles med fagudtryk: variable, funktioner, parametre, interaktion)
  • PP: Programmering (slide 1-7)
  • Se video om hvordan app’en er blevet til sammen med eleverne – stop undervejs og reflektér.
  • WE – Sådan laves MyApp
  • Tilføjelser til app’en (modify)
  • Opgave 2 – fra euro til kroner
  • WE – Tilføj skærmbillede og knap

Modul 2

  • Tilføjelser til app’en (modify kursfelt)
  • Opgave 3 – tilføj kursfelt
  • Tilføjelser til app’en (create rabat-beregning)
  • Opgave 4 – tilføj rabat-beregning (og forside med navigation til undersider)
  • WE – sådan indsættes en side (incl. navigering) – Tilføj skærmbillede og knap
  • En række små WEs som illustrerer forskellige ting, eleverne kan få brug for
    WE – Del app med andre
    WE – Kør/test app
    WE – Sådan indsættes en menu

Modul 3

  • Tilføjelser til app’en (create)
  • Opgave 4 – tilføj rabat-beregning, fortsat
  • Generel snak om programmeringspraksis
  • PP: Programmeringsprocessen

Modul 4

  • Introduktion til programmering (igen)
  • PP: Programmering (repetition slide 1-7, fortsættelse slide 8-10)
  • Tilføjelser til app’en (create)
  • Opgave 5 – BMI-beregning
  • WE – Sådan laves en if-else sætning
  • Opgave 6 – notesblok (ekstra)
  • Skriv i din logbog:
    • Hvad har du lært om programmering? Brug gerne billeder af kodeeksempler.
    • Hvad kan du tage med dig til fremtidige opgaver? Hvad fungerede godt og hvad fungerede mindre godt?
    • Indsæt et link til din app.

Modul 5

  • Innovative arbejdsmetoder hvor der genereres nye idéer til app’en
  • PP: Innovation
  • Opgave 7 – idégenerering og implementering

Modul 6

Modul 7

  • Implementering af idéer.
  • Skriv i din logbog:
    • Hvilken tilføjelse valgte du til din app og hvorfor? Indsæt skærmbilleder.
    • Hvad har du lært om det at være innovativ?
    • Hvad kan du tage med dig til fremtidige opgaver? Hvad fungerede godt og hvad fungerede mindre godt?
    • Indsæt et link til din app.

Modul 8

  • Usability evaluering
  • PP: Usability evaluering
  • Opgave 8 – usability-evaluering

Modul 9

  • Introduktion til interaktionsdesign (Don Norman, farver, KISS og gestaltlovene)
  • PP: Interaktionsdesign
  • Opgave 9 – redesign
  • Skriv i din logbog:
    • Hvad fik du ud af at lave en usability-evaluering?
    • Hvordan hjalp principperne om interaktionsdesign dig til at videreudvikle din app?
    • Hvad kan du tage med dig til fremtidige opgaver? Hvad fungerede godt og hvad fungerede mindre godt?
    • Indsæt et link til din app.

Modul 10

Forbedring af app’en.

Modul 11

  • Introduktion til innovation (definition, radikal/inkrementel innovation)
  • PP: Innovation (slide1-4)
  • Opgave 10 – innovationsgrad og -type
  • Skriv i din logbog:
    • Hvad er de vigtigste ting, du har lært i dette forløb?

Opgaver

Opgave 1 – brug app’en

  1. Gå ind på https://valutaomregneren.dk/ – hvad kan siden bruges til? Hvor meget svarer 100 danske kroner til i euro? Findes der apps, som kan det samme?
    Nu har vi jo ikke lige adgang til den bagvedliggende kode til valutaomregneren.dk – men vi har noget, der næsten er lige så godt! Derfor:
  2. Opret dig som bruger på https://code.org/educate/applab
  3. Klik på det link til My App som du har fået (i browseren klikkes “Vis kode” og klik “Bland igen”).
  4. Prøv at bruge app’en. Hvad kan den bruges til, og hvad kan den ikke bruges til?
  5. Hvis du i venstre side vælger “Kode”, kan du se koden. Er der noget i koden, du kan se meningen med?
  6. Nedskriv med dine egne ord hvad du tror, koden gør.
  7. Sæt nu på passende steder kommentarer ind i koden, hvor du kort med dine egne ord forklarer, hvad der sker (det gøres ved i “Værktøjskasse” at vælge “Functions” og så vælge den grå “// Comment”).

Opgave 2 – fra euro til kroner

Hvis man har brug for at regne fra kroner til euro, har man sikkert også en gang imellem brug for at regne den modsatte vej. Det er målet med denne opgave.

Mål: Tilføj en ny knap med funktionaliteten “beregn fra EURO til kr.”

  1. Tegn på papir hvordan det nye skærmbillede skal se ud (hvilke tekstfelter skal der være? hvilke knapper er der brug for?).
  2. Skriv nu trin for trin, hvordan den nye tilføjelse skal virke.
  3. Vælg i venstre side “Design” og lav nu i app’en det skærmbillede, som du har tegnet på dit papir.
  4. Lav først en version hvor, det du skriver i “EURO-feltet”, bliver direkte overført til “DKr-feltet”. Prøv det af og se om det virker, inden du går videre (når du har valgt den knap, som man skal trykke på, skal du vælge fanebladet “EVENTS” og under “Click” trykker du på “Insert and show code”.).
  5. Ændre nu i det du lige har lavet, så app’en korrekt kan udregne fra euro til kroner. Prøv det af og se om det virker.
  6. Indsæt kommentarer i din kode hvor du passende steder forklarer, hvad koden gør.

Opgave 3 – tilføj kursfelt (ekstra opgave til de dygtige)

I app’en, som den er nu, er kursen altid fast. Det er selvfølgelig urealistisk. Kursen ændrer sig hele tiden, og det vil være smart, hvis man selv kan få lov til at indtaste den nuværende kurs. Dette er målet med denne opgave.

Mål: Tilføj muligheden for at ændre kursen.

  1. Tegn på papir hvordan det nye skærmbillede skal se ud (hvilke tekstfelter skal der være? hvilke knapper er der brug for?).
  2. Skriv nu trin for trin, hvordan den nye tilføjelse skal virke.
  3. Vælg i venstre side “Design” og lav nu i app’en det skærmbillede, som du har tegnet på dit papir.
  4. Lav en variabel som du kalder for “kurs” (ligesom vi har variable, som hedder “kroner” og “euro”). Sørg for at den kurs, som brugeren indtaster, gemmes i denne variabel.
  5. Brug nu “kurs” variablen i dine udregninger fra tidligere i stedet for den faste kurs på 8.
  6. Prøv det af og se om det virker.
  7. Indsæt kommentarer i din kode hvor du passende steder forklarer, hvad koden gør.

Opgave 4 – tilføj rabat-beregning

Når der er udsalg i din yndlings tøjbutik, er rabatten ofte angivet i procent. Det kan være svært hurtigt at overskue, hvad den nye pris er, men det skal vores lille app nu hjælpe med.

Mål 1: Lav en rabat-beregner til app’en.

  1. Tegn på papir hvordan det nye skærmbillede skal se ud (hvilke tekstfelter skal der være? hvilke knapper er der brug for?).
  2. Skriv nu trin for trin, hvordan den nye tilføjelse skal virke.
  3. Tilføj en ny side til app’en som skal bruges til rabat-beregning (indsæt en screen mere ved i venstre side at vælge “Design” og dernæst vælge “Screen” i “Design ToolBoxen” (brug drag-and-drop)).
  4. Lav nu i app’en det skærmbillede, som du har tegnet på dit papir.
  5. Sørg først for at du i et tekstfelt kan indtaste den gamle pris og at denne pris gemmes i en variabel.
  6. Overfør den gamle pris direkte til et tekstfelt med den nye pris, når der trykkes på knappen (altså ingen rabat). Prøv det af og se om det virker.
  7. Lav en variabel som du kalder for “rabat” og gem den rabat, som brugeren indtaster i denne variabel.
  8. Opdater den nye pris så rabatten trækkes fra (husk: hvis rabatten er på 25%, så skal den gamle pris ganges med fremskrivningsfaktoren 1-0,25=0,75 for at trække 25% fra).
  9. Prøv det af og se om det virker.
  10. Indsæt kommentarer i din kode hvor du passende steder forklarer, hvad koden gør.

Mål 2: Indsæt en forside til app’en, hvor man kan vælge mellem valuta-beregner og rabat-beregner (navigation).

  1. Tilføj forside (ny screen) med to knapper som kaldes for “Valuta-beregner” og “Rabat-beregner” (se evt. ovenfor).
  2. Tilføj en funktion til hver knap så man kommer hen til den rigtige side (i funktionen skal UI Control kodeblokken: setScreen(“screenID”) indsættes og vælg så den ønskede Screen).
  3. Indsæt kommentarer i din kode hvor du passende steder forklarer, hvad koden gør.
  4. Indsæt en knap i valuta-beregneren og rabat-beregneren som sender brugeren tilbage til forsiden.
  5. Indsæt kommentarer i din kode hvor du passende steder forklarer, hvad koden gør.

Opgave 5 – BMI-beregning

I denne opgave skal app’en udvides, så den giver brugeren mulighed for at udregne et BMI.

Mål: Lav en BMI-beregner til app’en.

  1. Undersøg hvordan man udregner et BMI.
  2. Tegn på papir hvordan det nye skærmbillede skal se ud (hvilke tekstfelter skal der være? hvilke knapper er der brug for?).
  3. Skriv nu trin for trin, hvordan den nye tilføjelse skal virke.
  4. Tilføj en ny side til app’en som skal bruges til BMI-beregning (ligesom du gjorde det med rabat-beregneren). Lav på denne side det skærmbillede, som du har tegnet på dit papir.
  5. Lav variable som hedder “vægt” og “højde” og gem den vægt og højde, som brugeren indtaster i disse variable.
  6. Overfør først vægten og dernæst højden direkte til et tekstfelt, hvor BMI’en skal stå. Prøv det af og se om det virker.
  7. Ret i den kode, som du lige har lavet, så den udregner BMI’en korrekt.
  8. Prøv det af og se om det virker.
  9. Indsæt kommentarer i din kode hvor du passende steder forklarer, hvad koden gør.

Mål 2: Indsæt en forside til app’en, hvor man kan vælge mellem valuta-beregner, rabat-beregner og BMI-beregner.

  1. Følg anvisningerne fra opgave 4.

Opgave 6 – notesblok (ekstra opgave til de hurtige)

Idéen med denne opgave er at lave en notesblok i app’en, hvor brugeren kan skrive ting, som han/hun skal huske.

Mål: Lav en notesblok til app’en.

  1. Tegn på papir hvordan det nye skærmbillede skal se ud (hvilke tekstfelter skal der være? hvilke knapper er der brug for?). Der skal være mulighed for at rydde alle noterne.
  2. Skriv nu trin for trin, hvordan den nye tilføjelse skal virke.
  3. Tilføj en ny side til app’en som skal bruges til notesblokken. Lav på denne side det skærmbillede, som du har tegnet på dit papir.
  4. Sørg for at knappen, som kan rydde alle noter virker (husk at prøve det af).
  5. Indsæt kommentarer i din kode hvor du passende steder forklarer, hvad koden gør.

Opgave 7 – idégenerering og implementering

  1. Arbejd med at finde på nye idéer til en funktionalitet til jeres app. Processen styres vha. PP om innovation.
  2. Implementer din app.
  3. Overfør din app til din telefon.

Opgave 8 – usability-evaluering

  1. Udarbejd en usability-evaluering:
    1. Lav en testplan
    2. Gennemfør en usability-evaluering af app på telefon med 1-2 testbrugere. Du skal udvælge to testbrugere – helst ikke klassekammerater med kendskab til My App, hvis det kan lade sig gøre. Herved vil du kunne teste din app bedst.
    3. Nedskriv en liste med identificerede usability problemer.

Opgave 9 – redesign

  1. Udarbejd et redesign af din app:
    1. Analyser egen app med Don Normans designprincipperne, som du har hørt om.
    2. Argumenter for forbedringerne og implementér dem ud fra:
      1. problemlisten i jeres usability-evaluering
      2. analyse vha. designprincipper til at forbedre jeres app.

Opgave 10 – innovationsgrad og -type

Sammenlign egen app med konkurrerende apps med særlig vægt på graden af innovation og afgør, hvilket innovationstype jeres app er.

Assistance til elever (f.eks. til brug ved undervisningsdifferentiering)