Lektion 20. Mer’ App Lap

Forberedelse

  • Repeter kapitel 11

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
  • Huskat: Eleverne må gerne snakke sammen om opgaverne og sidde i grupper, men de skal lave øvelserne individuelt

Øvelser

20.1 Mere valutaomregner

Du skal arbejde videre med valutaomregneren. 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. Tag evt udgangspunkt i min valutaomregner: 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

20.2 Indtast selv kursen

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

20.3 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:

20.4 BMI beregner

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 derfir kode en BMI beregner.

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

20.5 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

20.6 Arrays og loops

Det eneste, du ikke har prøvet endnu, er at se på arrays og loops. Lav en kopi af appen Arrays og loops: Klik først på linket nedenfor, så på “Vis kode” og til sidst på “Bland igen”/”Remix”. Så har du en kopi. https://studio.code.org/projects/applab/jgzg-pvNC9B0q-CWdUiL9qKshtSgwkRa9if1sYg0BLE.

  • Prøv app’en af:
    • Klik først på knappen “Vis array/liste”
    • Skriv så et navn, f.eks. “Julius” i det nederste felt
    • Klik så på knappen “Indsæt element” og så knappen “Vis array/liste”
  • Prøv at forstå koden:
    • Hvordan er variablen i linje1 forskellig fra andre variable
    • Er variablene i linje 1 og 2 variable eller arrays
    • Hvad tror du, at den blå kode, der starter med “For” laver. Tip: Den gentager det antal gange, som arrayet er langt. “Langt” er “length” på engelsk, og koden forstår kun engelsk
  • Prøv at lave listen om, så der i stedet for “Arne” står “Anders” og i stedet for “Bodil” står “Bolette”
  • Prøv at tilføje “Åge” til den liste, der vises fra start. Dvs. du skal modificere linje 1 arrayet “Klasseliste” inde i selve koden

Hvis du vil prøve at kode arrays og loops selv, så kan du se videoen her: https://www.youtube.com/embed/ZMzWuIr62_A

20.7 Gå på jagt efter kodeudtryk

Du skal nu gå på jagt i din kode. Du skal finde eksempler på de forskellige slags koder.  Tag et skærmdump af koden og sæt det ind de rigtige steder i skemaet her. Alternativt lav kommentarer til koden og tag skærmdump af kode + kommentarer

Du kan evt. supplere kodeeksemplerne med mit eksempel her: https://studio.code.org/projects/applab/K7Si4zdC_rDfP-83Xsf0neZ310CRmia4s1jZx4F75FI   

UdtrykForklaringSæt et skærmfoto eller 2 ind fra din kode
Variabel  
Sekvens  
Forgrening og betingelse  
Arrays og loops 
Funktioner  
Events og funktioner  
Kommentarer  

20.8 Kodeudtryk i Pizza Appen

Download en kopi af 3L Pizza App V2 fra linket her https://studio.code.org/projects/applab/-Kf63UNjM3NZbKYnojplB9MTzpvo0L5g0pu1BkOV_lM.

  • Kør Pizza App’en og se, hvad den kan. Prøv f.eks. at bestille en Pizza og se, hvad der sker.
  • Find eksempler på forskellige typer kode (variable osv.)
  • forklare hvad der sker i koden, gerne ved hjælp af kommentarer inde i koden, og tag et skærmfoto (eller vis resultatet på en projektor). Du skal bruge fagudtryk for kodning i din forklaring (f.eks. variabel, loop osv.)

20.9 Min privatøkonomi

Du og din gruppe arbejder nu for “Kurts Kode”.

Kurts Kode er blevet kontaktet af hele 3 forskellige banker, der hver for sig gerne vil have en lille app til deres kunder. Appen hedder “Min privatøkonomi”. Din opgave er at producere appen.

Et godt råd: Efter hvert trin så lav en kopi af dit resultat. Hvis du så laver en fejl i trin 4, kan du altid tage en ny kopi af trin 3.

Trin 1. Start med en ikke særligt pæn side

Trin 2. Tilpas app’en til en målgruppe

Du skal nu lave din app pænere. Vælg mellem en af de 3 kunder nedenfor:

  • “Millionærbanken”, som satser på meget rige kunder + wannabees. Deres kunder elsker at vise deres rigdom frem
  • “Korsbæk Sparekasse”, som satser på kunder, der er meget traditionelle og måske også lidt sparsommelige
  • “Verdensmålsbanken”, som satser på kunder, der tænker alternativt og helst vil investere i grønne projekter

Brug din viden om Minerva modellen samt det grafiske puslespil til at designe en app, der rammer en af de 3 målgrupper og ser pæn ud.

Trin 3. Udvid beregneren

Du skal nu lave nye felter:

  • En label + et felt, hvor brugeren kan indtaste de årlige faste omkostninger
  • En ny knap, som kan trække de faste omkostninger fra indkomst efter skat og få disponibel indkomst
  • En label, der viser resultatet af beregningen + en label, hvor der står “Disponibel indkomst”

Trin 4. Månedlige faste omkostninger

Du holder ofte møder med kunden. Ved næste møde siger kunden, at de er glade for dit arbejde, men de har en ændring. I stedet for årlige faste omkostninger, så skal kunden indtaste de månedlige faste omkostninger. Kunderne har mere forstand på de månedlige faste omkostninger end de årlige, derfor.

  • Du skal ændre din beregner, så der i stedet for “Årlige faste omkostninger” eller “FO-år” nu står “Månedlige faste omkostninger” eller “FO-md”
  • Du skal selvfølgelig også ændre i matematikken bag, så din beregner regner rigtigt
  • Hvad hedder denne form for projektledelse, hvor man ofte holder møder med kunden og korrigerer – og er det den almindelige fremgangsmåde inden for IT

Trin 5. Lav en forside

I en af opgaverne i lektion 6, 7 eller 8 er der en video til, hvordan man laver en forside. Lav en pæn forside, der passer til den kunde, du har valgt. Du skal kunne klikke dig fra forsiden til økonomiberegneren og retur. Tip: Din navigation kan sagtens være knapper, men det kan også være en fald-ned menu.

Trin 6. Giv kunden besked

Din kunde vil gerne have, at deres kunder får ren besked om deres økonomi inde i økonomiberegneren. Kod løsningen og test den af.

  • Hvis din årlige disponible indkomst er over kr. 20.000, skal brugeren få en besked om at “Du er fornuftig med din økonomi”. Hvis overskuddet er under 20.000 men over 0, så skal beskeden være “Ok, men tænk dig om”. Under 0 men over -20.000, er beskeden “Vi har billige lån” og mindre end -20.000: “Du er lige til luksusfælden”.

Trin 7. Valutaberegner

  • Der skal være en valutaomregner, hvor man kan udregne fra euro, engelske pund og svenske kroner til danske kroner. Kurserne siger vi er 7,5 kr for en euro, 8,2 kr for et engelsk pund og 0,7 kr for 1 svensk krone. Se evt. dagskurserne hos Nationalbanken
  • Du må naturligvis gerne genbruge tidligere kode.

Trin 8. Tilføj selv

Find selv på udvidelser. Her er et par forslag

  • Tilføj en lommeregner, der kan regne med plus, minus, gange og dividere. Brugeren indtaster 2 tal og klikker på en knap. Man skal selvfølgelig kunne klikke sig vej frem og tilbage mellem forside, valutaomregner og økonomi beregner
  • Tilføj et felt til valutaberegneren, hvor brugeren selv kan indtaste dollar-kursen. Modsat kursen på euro, så kan alle andre valutaer svinge en del.