Modul 20. Start med App Lab

Forberedelse

Formål

  • Forstå 3-lags arkitekturen
  • Lære at lave apps i App Lab, og vi starter fra helt fra nul 🙂

Fælles gennemgang

Fra sidst

  • Hvad er en database
  • Hvad er der galt med databasen her, og hvad skal vi gøre ved det? Brug ord som primærnøgle og normalisering i din forklaring

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
  • Demonstration i App Lab: Vis, hvordan man laver et remix/kopi, og hvordan man koder en simpel valutaomregner.
  • Vigtigt: Tænk agilt, dvs. TEST OFTE. FAIL OFTEN, FAIL EARLY. Så er tingene lettere at rette.
  • Rutediagram

Øvelser

Inden du går i gang: Kodeøvelser er individuelle. Dvs. du må gerne sidde sammen med andre og diskutere øvelserne, men du skal lave dem individuelt på din egen computer. Dvs. jeg-kikker-bare-på-hans-computer løsningen er ikke hverken gangbar eller acceptabel.

20.1 I gang med App Lab

Meningen med opgaven er, at du skal prøve at lege med mulighederne for at designe i App Lab. Med andre ord, du skal arbejde i frontend. Du lærer at designe i App Lap samt lave en knap, der kan få brugeren fra den ene skærm til den anden.

  • Opret dig som bruger på App Lab, hvis du ikke allerede har gjort det
  • Vis kort, hvordan frontend fungerer i App Lap
  • Se videoen “Brugerflader i App Lab” igennem uden afbrydelser
  • Udfør videoen i App Lap. Du er velkommen til at lave et andet layout end AGF’s, f.eks. Liverpool, Dortmund eller andet, der matcher AGF. Bemærk at gult og blåt i kombination med visse unævnlige klubber i betonslummen i det vestlige København er GRIMT :-).
  • Her er AGF’s logo til opgaven
AGF kåmsådehviiiii

20.2 3-lags arkitekturen repetition

  • Forklar figuren ovenfor
  • 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
  • Kik i App Lap. Hvor finder du frontend, backend og database henne

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

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:

20.4 Tegn rutediagrammet for opgave 20.3

Tegn rutediagrammet for regnemaskinen i opgave 20.3. Symbolerne kan du få repeteret her: https://bliv-klogere.ibc.dk/index.php/laerebog-til-del-3-programmering-kapitel-13-18/#151_Rutediagrammerflowcharts

Brug enten PowerPoint eller bedre programet draw.io. Draw.io er online og gratis

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

Ekstra: Kan du få den til at trække 2 tal fra hinanden, i stedet for at lægge dem sammen?

20.6 Prøv selv

  • Se først videoen “Din første app i AppLab” igennem uden afbrydelser
  • Bagefter lav en valutaomregner ud fra videoen
  • Tegn til sidst rutediagrammet

20.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 :-).

20.8 Ekstra opgave: Udfordringen

Se videoen “Tilføje skærmbillede og knap” igennem uden afbrydelser. Videoen findes under

  • Udfordring 1. Lav en forside til valutaomregningeren. Find en målgruppe ud fra Minerva modellen, og lav et passende design til målgruppen
  • Udfordring 2. Prøv at se, om du kan få den til at udregne til andre valutaer, f.eks. fra kroner til US dollar