Lektion 7. MereAppLab

Forberedelse

  • Læs indledningen til kapitel 6 om kodestrukturer og se de tilhørende videoer
  • Læs afsnit 6.1 om variable og se de tilhørende videoer
  • Læs afsnit 6.3 om forgreninger og betingelser og se de tilhørende videoer
  • Læs afsnit 6.7 om kommentarer og se de tilhørende videoer

Formål

  • Få mere rutine i at arbejde med AppLab

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?

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

7.1 Mere valutaomregner

Du skal arbejde videre med valutaomregneren. Dvs. du må gerne bruge den valutaomregner, som du har i forvejen. Det er fint nok, at vi kan regne den ene vej, men det kunne være fint også at kunne regne den anden vej med valutaen. Du kan hente en kopi af en valutaomregner 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

7.2 Indtast selv kursen

Det gælder også her, at du gerne må arbejde videre med den valutaomregner, som du allerede har lavet.

Dollarkursen har det med at svinge noget. Den 20. juni 2020 var den 6,67 kroner for en dollar. Derfor skal brugeren selv kunne indtaste en kurs.

  • Lav enten en ny side i din valutaomregner eller lav en helt ny valutaomregner, som du kalder for “dollar-omregner”.
  • Din bruger skal selv kunne indtaste kursen
  • Få den til at virke

7.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, så er formlen: Gammel pris x ((100 – 20)/100) = nye pris. Hvis du er tvivl, så lav beregningen i Excel først

7.4 Prøv en if-else sætning

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

  • Test den af med forskellige password og forskellige karakterer
  • Kik på koden: Hvordan virker de 2 knapper
    • Knap 1: Hvor mange muligheder for svar er der
    • Knap 1: Hvordan afgør koden, om du har tastet rigtigt
    • Knap 2: Hvor mange muligheder for svar er der
    • Knap 2: Hvordan finder koden ud af at vælge det rigtige svar, hvis du f.eks. indtaster 175
  • Lav password om, så det hedder “Balder” (Balder er min lille hund), “AGFerBedst” eller dit eget kælenavn. Hvad du vil, bare du laver det om :-).

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

7.5 Lav en BMI-beregning

Din ynglingsbutik ligger desværre lige ved siden af Paradis Is, og du holder forfærdelig meget af is. Så du må hellere passe lidt på vægten :-). Du skal nu kode en BMI beregner. Du har allerede i opgave 7.4 lavet en side i AppLab parat, og den skal du bruge nu.

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

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

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

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