Modul 21. Mere AppLab

Forberedelse

  • Læs afsnit 15.2 Variable, 15.3 Sekvens, 15.4 Forgrening og betingelse samt 15.8 Kommentarer.
  • Hvis du har brug for et overblik, så genlæs det første afsnit i kapitel 15.

Formål

  • Få mere rutine i at arbejde med AppLab
  • Brug fagbetegnelser i forhold til kode

Fælles gennemgang

Fra sidst

  • Hvad går 3-lags strukturen ud på
  • Hvordan genfinder vi 3-lags strukturen …
    • … I AppLab
    • … på en almindelig hjemmeside, f.eks. Facebook
  • Hvorfor er sætningen her så vigtig “Fail often, fail early”? Hvilken udviklingsmodel peger den mod?
  • Rutediagram

Lektien til denne gang

  • Forklar begreberne:
    • Variabel (som de mødte sidst)
    • Forgrening-betingelse
    • Kommentar
  • Vis et eksempel (f.eks. linket til øvelse 1) og forklar figuren her:

Øvelser

21.1 Lav en “forside” til valutaberegneren

  • Start med at undersøge appen her: Bemærk at den har en “Forside”
  • Du lærte sidste, hvordan man
  • Bagefter gennemfør videoen, så du får en forside til din valutaomregner. Du bestemmer helt selv, hvordan din forside skal se ud, bare navigationen virker. Dvs. at der er en knap til næste side. Du får lidt hjælp her. Du skal selvfølgelig være i Design mode (1). Fra fald-ned menuen vælg New Screen (2). Når du har designet en passende forside med en knap, der kan lede brugeren hen til side 2, så klik på knappen Make Default (3). Hvis du gør det, så vil siden være den første, der popper op, når du tester appen af ved at klikke på Run (4)
  • Ud over det brug videoen herunder samt koden
  • Videoen giver dig den fulde version

21.2 Mere valutaomregner

Du skal arbejde videre med valutaomregneren, så den kan regne begge veje. Dvs. du må gerne bruge den valutaomregner, som du har i forvejen, men lav en kopi af den. Ellers hent en kopi af valutaomregneren her: https://studio.code.org/projects/applab/a442pnfYvVx8okKSET01IFFxFgppIs5zdaAfIqvscgM

  • Tilføj en ny knap. Hvis du har regnet DKK –> Euro, så skal den nye knap være Euro –> DKK
  • Få knappen til at virke

21.3 Lav en rabatberegner med menu

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.

  • Lav en forside, som du kalder for “Hjælp til shopping”
  • Lav en knap, så du kan komme ind på rabatberegneren

Du skal lave en app, hvor:

  • Du skal kunne indtaste den gamle pris i et felt
  • Indtaste en rabat i procent i et nyt felt
  • Når brugeren klikke på en knap. så vises den nye pris i et 3. felt med rabatten fratrukket. Husk at hvis rabatten er 20 procent (indtastet “0.20”), så er formlen: Gammel pris x (1 – rabat) = nye pris. Hvis du er tvivl, så lav beregningen i Excel først
  • Jeg har hjulpet dig lidt og har lavet udkastet til selve beregneren. Du skal så få beregneren til at virke og tilføje forsiden. Du kan se udkastet her: https://studio.code.org/projects/applab/ioY4dw-LQtUyrXA3u90qvKt1kl2MducXirlmtMtYtPc
  • Mit udkast til en beregner er ikke særligt pænt. Du er velkommen til at gøre det pænere 🙂
  • Indsæt kommentarer i koden. Dem finder du under Functions nederst
  • Når den virker: Tegn rutediagrammet
  • Ekstra: Lav en beregner, hvor brugerne selv kan indtaste rabatprocenten

21.4 En if-else sætning

Lav en kopi af app’en her: https://studio.code.org/projects/applab/zL_t3a-FmhYWDNFeeEL-3Fh6aiL1hyeuch2WkaqdP8o

  • Klik dig rundt. Der er 2 skærme. Hvad kan de 2 forskellige skærme
  • Kik på koden på den første skærm (Password)
    • Hvor mange muligheder for svar er der
    • Hvordan afgør koden, om du har tastet rigtigt
  • Kik på koden til den anden skærm (vurder højde)
    • Hvor mange muligheder for svar er der
    • Hvordan finder koden ud af at vælge det rigtige svar, hvis du f.eks. indtaster 175
  • Lav password om til password-delen, så password er “Balder” (Balder er min lille hund), “AGFerBedst” eller hvad du har lyst til. Bare du laver det om :-).
  • Lav beskederne om til højde-vurderingsdelen. Hvis højden < 160, så skriv: “Pyt, vi er mange som dig”. Hvis højden er < 180, så skriv “Du er lidt af en stræber, hvad :-)”, under 200 = “Du har sikkert talent for basketball” og over 200 “Pas på flyene”. Pyt med, hvad du skriver, bare du laver det om.
  • Tegn rutediagrammet for app’en.

Hvis du vil i detaljer med if-else sætninger, så se evt. videoen her:

21.5. Lav en dørmand-app

Kod en app til dørmænd. Den er meget primitiv. Brugeren skal kunne indtaste alder. Når der klikkes på en knap, skal koden kunne skrive “Rødt lys”, hvis brugeren er under 18 år. Hvis over 18 år, skal brugeren have beskeden “Grønt lys”.

Når det øverste virker: Lav en udvidelse. Hvis brugeren er over 40 år, så skriv “Tag morfar på sofaen i stedet.

Tegn rutediagrammet for begge løsninger til opgave 21.5 (ikke opgave 21.4).

21.6 Ekstra opgave. Lav en BMI-beregning

  • Formlen for BMI kan du se her
  • Vi får brug for følgende felter. Se billedet nedenfor
    • Forskellige labels, så brugeren ved, hvad han/hun skal gøre
    • 2 tekstinput felter til indtastning af hhv. vægt og højde
    • En knap til beregning
    • Den kunne f.eks. se sådan her ud, din beregner
  • Her er lidt hjælp til opgaven
    • I backend får du brug for 3 variable: kilo, hoejde og bmi
    • Bemærk: Når du navngiver felter og f.eks. variable, så undgå æ, ø og å. Ikke “højde” men “hojde”
    • Formlen for BMI kan du beregne sådan: bmi = kilo/(hoejde * hoejde). Bemærk: Undgå æ, ø og å, når du navngiver.
    • Prøv det af og se om det virke
    • Indsæt kommentarer i din kode hvor du på passende steder forklarer, hvad koden gør.

21.6 Fortæl brugeren om resultatet af din BMI beregning

Du skal nu fortælle brugeren om resultatet. TIP: Brug, hvad du lærte i opgave 7.4.

  • Se videoen “Sådan laver du en if-else sætning” herunder igennem uden ophold
  • Lav et tekstfelt, hvor du kan give brugeren besked om resultatet af testen. Kategorierne ser sådan ud:
    • Under 18,5: Undervægtig
    • 18,5-25: Normalvægtig
    • 25-30: Overvægtig
    • Over 30: Svært overvægtig
  • Alt efter resultatet af testen skal din app kunne skrive om man er undervægtig, normalvægtig, overvægtig eller svært overvægtig

21.7 Lav en menu

I stedet for knapper som menu kunne vi godt tænke os en fald-ned menu.

  • Se videoen “Sådan indsættes et menu” igennem uden ophold
  • Lav bagefter en ny side, “Beregn dit BMI indeks”. Den skal vi arbejde med i næste opgave
  • Gennemfør videoen, så du kan navigere mellem forside, rabatberegner og BMI indeks. Dvs. du skal kunne navigere fra alle sider til alle sider

21.8 Ekstra opgave: Udfordringen

Lav en kopi af din valutaomregner med (remix). Lav en menu, så du kan vælge mellem følgende typer omregnere: DKK –> Euro, DKK –> US dollar og DKK –> engelske pund. Alt efter, hvad brugeren vælger, skal valutaomregneren kunne lave de forskellige udregninger.

Har du endnu mere tid, så udvid, så man også kan regne Euro –> DKK, US dollar –> DKK og engelske pund –> DKK.