Forberedelse

• Vi skal arbejde med App Lap
• Opret dig som bruger på App Lab: https://code.org/educate/applab
• Kik kort (3 minutter) på vejledning 6. De vigtigste kommandoer i App Lap. Lad dig ikke skræmme, du skal bare vide, hvor oversigten findes 🙂
• Læs kapitel 15 til og med afsnit 15.2 om variable. Se de 2 videoer, som er med i afsnittene

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

• 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 3-lags arkitekturen repetition

Her er figuren med 3-lags arkitekturen. Brug den som udgangspunkt i opgaven her:

• 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.2 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 (se nedenstående)
• 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

Bemærk: Du tester ved at bruge den orange knap

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.

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:

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

20.3 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.5 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ævnelige klubber fra betonslummen og de larmende motorveje i det vestlige København er GRIMT :-).
• Her er AGF’s logo til opgaven

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, Instagram eller andet. 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