Introduktion

Min første App

Opgave 1 - My App version 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:

• Opret dig som bruger på https://code.org/educate/applab

• Tilmeld dig holdet tilmeld 3x if 2526 

• Klik på link  til My App (se resource nedenfor). I browseren klikkes “Vis kode” og klik “Bland igen”.

• Prøv at bruge app’en. Hvad kan den bruges til, og hvad kan den ikke bruges til?

• Hvis du i venstre side vælger “Kode”, kan du se koden. Er der noget i koden, du kan se meningen med?

• Nedskriv med dine egne ord hvad du tror, koden gør.

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

Resource

Adgang til den første version af MyApp: MyApp – version 1 

Genfind det du har lavet i App Lab: App Lab Projekter 

Opsamling

Hvad har I fundet ud af?

Programmering

Opgave 2 - Kurs-beregner (1)

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

• Tegn på papir hvordan det nye skærmbillede skal se ud (ressource: iPhone-prototype):

  • Hvilke tekstfelter skal der være? 

  • Hvilke knapper er der brug for? 

  • Skriv nu trin for trin, hvordan den nye tilføjelse skal virke.

• Vælg i venstre side “Design” og lav nu i app’en det skærmbillede, som du har tegnet på dit papir.

• Første version:

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

• Anden version:

  • Æ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.

• Indsæt kommentarer i din kode hvor du passende steder forklarer, hvad koden gør.

Opgave 3 - Kurs-beregner (2)

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.

• Tegn på papir hvordan det nye skærmbillede skal se ud 

  • Hvilke tekstfelter skal der være? hvilke knapper er der brug for?

  • Skriv nu trin for trin, hvordan den nye tilføjelse skal virke.

• Vælg i venstre side “Design” og lav nu i app’en det skærmbillede, som du har tegnet på dit papir.

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

  • Brug nu “kurs” variablen i dine udregninger fra tidligere i stedet for den faste kurs på 8.

• Prøv det af og se om det virker.

• Indsæt kommentarer i din kode hvor du passende steder forklarer, hvad koden gør.

Opgave 4 - Rabat-beregner

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.

• Tegn på papir hvordan det nye skærmbillede skal se ud:

  • Hvilke tekstfelter skal der være? 

  • Hvilke knapper er der brug for?.

  • Skriv nu trin for trin, hvordan den nye tilføjelse skal virke.

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

• Lav nu i app’en det skærmbillede, som du har tegnet på dit papir.

• Sørg først for at du i et tekstfelt kan indtaste den gamle pris og at denne pris gemmes i en variabel.

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

• Lav en variabel som du kalder for “rabat” og gem den rabat, som brugeren indtaster i denne variabel.

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

• Prøv det af og se om det virker.

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

• Tilføj forside (ny screen) med to knapper som kaldes for “Valuta-beregner” og “Rabat-beregner” (se evt. ovenfor).

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

• Indsæt kommentarer i din kode hvor du passende steder forklarer, hvad koden gør.

• Indsæt en knap i valuta-beregneren og rabat-beregneren som sender brugeren tilbage til forsiden.

• Indsæt kommentarer i din kode hvor du passende steder forklarer, hvad koden gør.

Variable

Sådan defineres og anvendes en variabel

kurs er global (eksempel 2), og kan ses fra alle dele af koden.
kroner og euro er lokale, og kan kun ses inden for funktionen.

• Overvej fordele og ulemper ved de to eksempler.

Opgave 5 - BMI-beregner

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

Mål 1: 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.

Mål 3: Brug af en if-else blok

Se evt. video nedenfor. Vælg en af de to forslag.

Forslag 1 - App viser en fortolkning af tallet (enten i tekst eller farver)

1. Undersøg hvad man kan gøre (tekst eller farver).

2. Tegn prototype på papir, og skriv trin for trin hvordan det skal virke.

3. Udvid din app med den nye funktion.

4. Afprøv.

Forslag 2 - App accepterer højde indtastet i både cm og m.
App vælger selv den korrekte udregning.

1. Undersøg hvad der skal til for at skelne mellem cm og m    (fx højde < 50)

2. Udvid din app med den nye funktion

3. Afprøv.

Opgave 6 - Notesblok

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.

Innovation

Grupper

• Caroline og Khadra

• Mathilde og Lærke

• Simon og Jakob

• Dian, Maya og Kristina.

Ideer fra brainstorm i grupper

• Mappe med billeder af grupperede gule sedler 

Opgave 7

1. Arbejd med at finde på nye idéer til en funktionalitet til jeres app. Processen styres vha. ovenstående præsentation.

2. Implementer din app.

3. Overfør din app til din telefon (se video Overfør app til telefon nedenfor)

Brugbarhedsvurdering

INteraktionsdesign

Opsummering af forløbet