Lektion 19. AppLap

Forberedelse

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
3 lags arkitektur
Den grundlæggende 3-lags struktur i 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 AppLab: 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
Kodegangen i AppLab

Ø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 AppLab

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å AppLab, hvis du ikke allerede har gjort det
  • Se videoen “Brugerflader i AppLab” igennem uden afbrydelser
  • Udfør videoen i AppLap

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 AppLab

  • Log ind i AppLab, 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

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

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