Lektion 6. Start med AppLab

Forberedelse

Formål

  • Forstå 3-lags arkitekturen
  • Lære at lave apps i AppLab, og vi starter fra 0 🙂

Fælles gennemgang

Fra sidst

  • Hvad er et CMS system
  • Hvad har du produceret i WordPress

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 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
ET PAR GODE RÅD OM AT ARBEJDE I APPLAB
  1. Først og fremmest: “Fail often, fail early”. Lav mange småtest, så fanger du fejlene og kan rette dem i tide
  2. AppLab kan godt blive langsom eller ikke virke, når du har arbejdet med en opgave i et stykke tid. Hvis det sker, så gem dit arbejde, luk AppLap
  3. Husk at den taler engelsk. Hvis du bruger komma i tal, så virker det ikke. Så skriv 7.5, ikke 7,5 hvis du f.eks. skal angive kursen på euro.
  4. 4. Du får tit brug for at hente informationer fra indtastede felter. I videoen laver de variablene ud fra UI kontrollen “getText(id)”. Det er bedre at brug “getNumber(id)” i stedet for, hvis du på forhånd ved, at du skal lave beregninger
Brug getNumber(id)

Øvelser

6.1 3-lags arkitekturen

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

6.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. LAV OPGAVEN PÅ KLASSEN, MAX 15. MIN

  • 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

6.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:

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

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

6.5 Prøv selv

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

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

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

6.8 Ekstra opgave: Udfordringen

  • 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