Forberedelse

• Læs hele kapitel 10 i lærebogen kort igennem
• Opret dig som bruger på AppLab: https://code.org/educate/applab
• Kik kort på vejledning 6. De vigtigste kommandoer i AppLap. Lad dig ikke skræmme, du skal bare vide, hvor oversigten findes 🙂

Formål

• Komme i gang med dynamiske sprog
• Arbejde med frontend og backend

Fælles gennemgang

Fra sidst

• Eventuel opfølgning på kodearbejdet

Lektien til denne gang

• Hvad går figuren nedenfor ud på
• Hvordan kan vi være sikre på, at der f.eks. er en database bag de fleste programmer

• Forklaring på, hvorfor vi har brug for javaScript
  • Hvad definerer frontend sprog
  • Hvorfor kan man sige, at javaScript er det eneste dynamiske frontend sprog. Der laves masser af apps og hjemmesider i f.eks. C# og PHP
• Demonstration i App Lab: Vis, hvordan man laver et remix/kopi, og hvordan man koder en simpel valutaomregner.
• Vigtigt: TEST OFTE. FAIL OFTEN, FAIL EARLY. Så er tingene lettere at rette
• Forklar figuren her

Øvelser

19.1 Repetition af 3-lags arkitekturen

• Forklar figuren med 3-lags arkitekturen
• Hvordan kan man sammenligne et program/en app med en restaurant
• Hvor må en app’s brugere færdes
• Hvad bruger vi backend laget til
• Vi kan gemme data i både frontend, backend og i datalaget. Hvorfor er det bedre at gemme data i datalaget
• Åben siderne her: www.facebook.com, www.al-bank.dk (eller en anden netbank), youtube.com, https://www.zalando.dk og Amazon.com , . Forklar, hvorfor vi kan være sikre på, at de overholder 3-lags arkitekturen.

19.2 I gang med App Lab

Meningen med opgaven er, at du skal prøve at lege med mulighederne for at designe i AppLab. Med andre ord, du skal arbejde i frontend.

• Opret dig som bruger på App Lab, hvis du ikke allerede har gjort det
• Se videoen “Brugerflader i App Lab” igennem uden afbrydelser
• Udfør videoen i App Lap

19.3 Undersøg en regnemaskine

Inden du går i gang: Der er 2 vejledninger under spørgsmålene. Den første forklarer, hvordan du tager en kopi af noget. Den anden forklarer, hvordan du tester/sætter-i-gang i App Lab

• Log ind i App Lab, hvis du ikke allerede er logget ind
• Lav en kopi af appen, så du har den lokalt
• Kør appen, så du ser, hvad den kan
• Prøv at forklare, hvad der sker i app’en. Brug begreber som frontend og backend i din forklaring

Sådan laver du en kopi eller et remix

• Åben www.code.org og log ind, hvis du ikke allerede er logget ind i forvejen
• Gå ind på linket her i en browser: https://studio.code.org/projects/applab/dpIVHzjT40wW-8YGusCscsjjMTaVAgYXZVGHjd_NdMw
• Klik på knappen “Vis kode” (Show code), så den åbner i AppLab.

• I AppLab klik på knappen Bland igen (Remix). . Så har du en kopi, du kan arbejde med

Du tester ved at klikke på den orange knap. Hvis du er i tvivl, så se videoen “Kør/test app” herunder. Den er kun 18 sekunder lang:

19.4 Lav om på en apps udseende

Regnemaskinen, som du lavede en kopi af i opgave 3, kunne måske godt trænge til et lidt pænere udseende. Gør den pænere. Brug din viden fra “det grafiske puslespil”.

19.5 Prøv selv

• Se først videoen “Din første app i App Lab” igennem uden afbrydelser
• Bagefter lav en valutaomregner ud fra videoen

19.6 Lav et nyt skærmbillede med knap

• Se videoen “Tilføje skærmbillede og knap” igennem uden afbrydelser
• 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

19.7 Se din app på nettet

• Se først videoen “Del app med andre” herunder igennem uden afbrydelser
• Bagefter gennemfør videoen
• Se din app på mobiltelefonen
• Del evt. linket også på din Facebook. Du må gerne blære dig max med dit resultat :-).

19.8 Færdig før andre

Gå videre til næste opgavesæt, hvor der venter mere App Lab.