Modul 14. App Lab intro

Øvelser

Inden du går i gang bemærk 2 ting:

  • Alle kodeøvelser er individuelle. Snak gerne med sidemanden, men du skal løse tingene selv. “Jeg-kikker-lige-over-skulderen” er ikke tilladt
  • Du skal være oprettet som bruger hos www.code.org. Når du er det, så log ind!
  • Jeg kan se, hvad du har lavet i Code.org
  • LINK TIL 1 F:
    • Jeg arbejder på sagen
  • LINK TIL 1 G:

14.1 App Lab kursus hos Code.org

  • Gennemfør App Lab’s introduktionskursus. Det bør ligge på https://studio.code.org/s/applab-intro/lessons/1/levels/1
  • Til sidst i kurset lærer du at publishe. Når du publisher, ligger din app på nettet. Hvis du kopierer linket, vil du kunne se appen på din mobiltelefon, i en anden browser end den, du arbejder i eller bare på et selvstændigt faneblad

14.2 En lille app til en fantastisk klub

  • Du skal i øvelsen her lave en app til en virkelig skøn fodboldklub. Flot trøje, fedt stadion, super fans. KSDH!
  • Se videoen Skab brugerflader i App Lab
  • Udfør videoen i App Lab. Du er velkommen til at lave et andet layout end AGFs, f.eks. Liverpool, Napoli, Dortmund eller lignende klubber, der nogenlunde matcher AGF. Du må også gerne lave noget for en klub fra en anden sportsgren, hvis du har lyst eller en app om dig selv. Jeg har set elever lave en app for “Hamsternes befrielsesfront”, så der er nogenlunde fri leg her. Bemærk dog at GULT ER GRIMT :-). Uanset om man bor i Horsens eller Malmö Vest
  • Her er AGFs logo til opgaven
  • Publicer og se din app i en anden browser end den, du bruger til App Lab. Har du kun 1 browser installeret, så brug et andet faneblad i den samme browser i stedet
  • Send url’en til din mobiltelefon. Test at den virker. Spørg underviseren, hvis du er i tvivl om hvordan, ellers se video 4 på siden her: https://bliv-klogere.ibc.dk/index.php/videoer-3-applab/

Til de dygtige:

  • Lav undersider i din app, hvor du fortæller mere om AGF. Det er jo en herlig klub. Det kan være om spillerne, klubbens historie mv. Du skal kunne navigere fra forsiden til undersiderne og retur, dvs. at du skal lave nogle knapper, så man kan klikke sig rundt
  • Prøv at sætte et link ind til videoen her i din app https://youtu.be/7c8U2g7H55Q?t=34. Google, hvordan det kan lade sig gøre, men det er ikke så svært. Lav fx en knap til videoen og sæt noget ind i eventen :-).

Baggrund. Ikke en del af opgaverne

Forberedelse

Fokus til din forberedelse

  • Hvilke 3 lag er de fleste programmer/apps bygget op i
  • Hvilken funktion har de enkelte lag
  • Hvordan kan man sammenligne de 3 lag med en restaurant
  • Hvordan ved vi, at der er 3 lag i f.eks. Facebook

Formål

  • Starte op i App Lab

Fælles gennemgang

Fra sidst

  • Mangler

Lektien til denne gang

  • Gennemgå 3-lags arkitektur
    • Eksempel med Facebook, netbank og Zalando
    • IKKE intro til at gemme data
    • Inklusive de 3 front-end sprog + w3schools.com
  • Vise hvordan det hænger sammen i App Lab
  • Kort intro: Tænk agilt, dvs. TEST OFTE. FAIL OFTEN, FAIL EARLY. Så er tingene lettere at rette.
  • Forklar, at Code.org kan “hænge”. Brug refresh-knappen.
  • Vis hvordan hour of code fungerer
    • Video 1: Skift egenskaber
      • Øvelser video 2 – 4
    • Video 5. Gør det interaktivt
      • Øvelser video 6 – 7
    • Video 8. Billeder og lyd
      • Øvelser video 9
    • Video 10. Design
      • Øvelser video 11 – 13
    • Video 14. Del skærmen
      • Øvelser video 15