Værktøjshæfte Ken Mathiasen
Kvalifikationer og kompetencer
Informatik C
Praxis – Nyt Teknisk Forlag
Informatik C Værktøjshæfte – Kvalifikationer og kompetencer 1. udgave 2017, 2. oplag 2019 © Praxis – Nyt Teknisk Forlag 2017 Forfatter: Ken Mathiasen Forlagsredaktør: Jesper Nørgaard, jno@praxis.dk Omslag: Stig Bing, Grapida Omslagsfoto: Colourbox Tegninger: Stig Bing, Grapida Grafisk tilrettelæggelse og DTP: Stig Bing, Grapida ISBN: 978-87-571-2893-2 Sagsnummer: 174009-1 Hvor intet andet er angivet, er billeder fra Colourbox eller Pixabay.
Alle rettigheder ifølge gældende lov om ophavsret forbeholdes. Kopiering fra denne bog må kun finde sted på institutioner, der har en aftale om kopiering med Copydan Tekst & Node, og kun inden for aftalens rammer. Se mere på www.copydan.dk
Praxis – Nyt Teknisk Forlag Ny Vestergade 17, 4 1471 København K info@praxis.dk webshop.praxis.dk Ekspedition: Praxis, Munkehatten 28, 5220 Odense SØ, +45 63 15 17 00
Indhold Introduktion . . . . . . . . . . . . . . . . . . . . . . . . . . 5 1 Smartphoneprogrammering med App-Inventor . . . . . . . 7 2 Arbejde med en SQL-database . . . . . . . . . . . . . . . 27 3 Kodning af hjemmesider . . . . . . . . . . . . . . . . . . 33 Html-tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Tabeller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Projekt – Sønderborg turisthjemmeside . . . . . . . . . . . . . . . . 47
4 3D-printer . . . . . . . . . . . . . . . . . . . . . . . . . 49 3D-figurer i CAD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 3D-printerens virkemåde . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Facit/lærervejledning . . . . . . . . . . . . . . . . . . . . . 53 Projektforløb 1: Opbygning af webshop . . . . . . . . . . . 63 Lektionsplan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 Lektion 1 – Produktforståelse og målgruppe . . . . . . . . . . . . . 65 Lektion 2 – Papirmodel af en hjemmeside . . . . . . . . . . . . . . . 70 Lektion 3 – Brainstorm – forbedring af h jemmesiden . . . . . . . . 73 Lektion 4 – Brugerinterview . . . . . . . . . . . . . . . . . . . . . . . . 75 Facit/lærervejledning . . . . . . . . . . . . . . . . . . . . . 81
Projektforløb 2: Design af smartphone-app . . . . . . . . . 87 Lektionsplan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 Lektion 1 – Produktforståelse og h jemmesidedesign . . . . . . . . . 89 Lektion 2 – Papirmodel af lommelygte-appen . . . . . . . . . . . . 94 Lektion 3 – Programmering af UV Lamp-appen i App-Inventor . . 96 Lektion 4 – Design af en app til Lagkagehytten . . . . . . . . . . . . 99 Lektion 5 – Programmering af appen til Lagkagehytten . . . . . . 101 Facit/lærervejledning . . . . . . . . . . . . . . . . . . . . . 103
3
Introduktion Dette arbejds- og værktøjshæfte indeholder en beskrivelse af de værktøjer, vi skal arbejde med i informatik C. Det er adskilt fra informatik-bogen, fordi værktøjerne i modsætning til teorien løbende ændres, opdateres og forældes. Samtidig er hæftet med sin spiralryg nem at bladre i, mens man arbejder med programmeringsøvelserne. I margin er der gjort plads til at tage noter. Værktøjshæftet giver en grundig indføring i de tre værktøjer og kompetencer, vi skal arbejde med. Bagefter er du i stand til at bruge programmering til udvikling af simple IT-systemer. Der er tre kapitler med værktøjer: Smartphone-programmering: Vi udvikler apps til en smart phone. SQL-database: Vi søger i og udtrækker data fra en database. Html-kodning: Vi koder en hjemmeside.
• • •
Til alle tre temaer bruger vi browserbaserede værktøjer. Til smartphoneprogrammering bruger vi et værktøj, der hedder App-Inventor. Det er et godt program med en lav indgangstærskel. Vi tager udgangspunkt i styresystemet Android. Efterfølgende bruger vi portalen w3schools til både at lære at lave en hjemmeside og at søge i en SQL-database. Der er desuden en kort introduktion til 3D-print med værktøjet OpenSCAD. I arbejdshæftets sidste del er der to projektforløb (undervisningsforløb), som vi kan arbejde med. Det første forløb handler om oprettelse af en webshop, som sælger nøgleringe med en ”track-me”-funktion i. Der arbejdes med disse emner i forløbet: Opbygning af application know-how samt behov/dilemma/ problem, målgruppe og kategorisering af innovative produkter AIDAs kommunikationsmodel og en papirudgave af en hjemmeside Produktdifferentieringsmuligheder ved hjælp af brainstorm Prototype af en hjemmeside (marvelapp) og brugertest 4p-innovationsanalyse og elevens logbog
• • • • •
5
Informatik C – Værktøjshæfte | Introduktion
Det andet projektforløb (undervisningsforløb) handler om design af en smartphone-app, der skal hjælpe en bager med at sælge flere kager. Virksomhedens nye idé er, at den vil levere opskrifter med tilhørende ingredienser til hjemmebag. Der arbejdes med disse emner i forløbet: Interaktionsdesign og holdningsafklarende opgaver Prototypearbejde med appens brugerinterface Programmering af appen Brugertest
• • • •
Fagudtryk, du skal kende efter arbejdet med værktøjerne Html, editor, html-tags, lorem ipsum, kolonne, række, CSS, API, 3D-printer, OpenSCAD, App-Inventor, Block-editor, Designer, Canvas, Sprite.
6
1
Smartphoneprogrammering med App-Inventor Vi bruger det browserbaserede værktøj App-Inventor til at programmere en række apps til styresystemet Android. Start med at åbne en browser og gå ind på www.appinventor.mit.edu, og tryk på den orange knap ”Create apps!”
Hjemmesiden appinventor.mit.edu er lavet af Massachusetts Institute of Technology (MIT).
Der skal bruges en Gmail-konto for at logge ind på siden, og det er nødvendigt for at kunne bruge og gemme sine projekter. Har man ikke en Gmail-konto, kan den oprettes på gmail.google.com. Når man er kommet ind i App-Inventor, skal der klikkes på ”Start new project”. Nu kommer ”Designeren” frem (anden gang man logger på, bliver man sendt direkte ind til ”Designeren”). I Designeren opbygges brugergrænsefladen (GUI – Graphical User Interface). Brugergrænsefladen er det, brugeren ser på smartphoneskærmen, når appen køres. Brugergrænsefladen vises i Viewer-området.
7
Informatik C – Værktøjshæfte | 1 Smartphoneprogrammering med App-Inventor
Palette med komponenter, der kan indsættes på smartphone skærmen
Viewer-området, Properties viser hvor komponenter- de egenskaber, en ne indsættes komponent har
Her skiftes mellem Block-editor og Designer
Skærmbillede af Designeren med Viewer-området i midten.
På billedet ses, at en knap (”Text for Button1”) er indsat i Viewer-området. I højre side af skærmen kan man ændre knappens egenskaber. Eksempelvis kan man ændre knap-tekstens font. Programmeringen foregår i Block-editoren. Man kommer ind i Block-editoren ved at trykke på knappen ”Blocks” i øverste højre side af Designeren. Man kommer tilbage til Designeren igen ved at trykke på knappen ”Designer”. Når man arbejder i App-Inventor, skiftes løbende mellem Designeren og Block-editoren. Det var en hurtig introduktion til App-Inventor. Gennem de forskellige øvelser går vi mere i dybden med funktionerne.
8
Øvelse 1.1 – Opbygning af en Android-app Vi skal lave en app til en Android-smartphone, der kan afspille en miav-lyd. I Designeren påsætter vi de komponenter, brugeren kan se. a) Indsæt komponenten Button i Viewer-området, som det er gjort på billedet. b) Nu skal teksten på knappen ændres til ”Klik for Miav-lyd”. Det gøres ved at gå ind i Properties-området i højre side af skærmen. Rul ned til rubrikken Text, og ændr teksten ”Text for Button1” til ”Klik for Miav-lyd”. c) Appens navn skal være ”Kattelyde”. I Components-rubrikken (mellem Viewer-området og Properties) skal der klikkes på Screen1. Når det er gjort, kan man rulle ned og ændre Title fra ”Screen1” til ”Kattelyde”. d) Indsæt den komponent, der hedder Sound. Den findes i Palette- rubrikken Media. Træk komponenten Sound ind i Viewer-området. Sound er en ikke-synlig komponent, som selv lægger sig ned under skærmen, når man slipper den. e) Vi skal have en miav-lyd. Den kan man finde gratis på nettet. Gå ind på www.soundbible.com, og download en miav-lyd. f) Nu skal lyden tilknyttes Sound-komponenten. I Components-rubrikken klikkes på Sound1 (den skal være markeret). Klik herefter på Source-feltet i Properties-rubrikken. Klik til sidst på ”Upload File...” og find den miav-fil, du hentede fra soundbible.com.
Sound-komponenten ses i Components-rubrikken, men kan ikke ses i Vieweren, fordi den lægger sig ned under skærmen – det er en ikke-synlig komponent.
9
Informatik C – Værktøjshæfte | 1 Smartphoneprogrammering med App-Inventor
Øvelse 1.2 – Programmering i Block-editoren I øvelse 1 blev vi færdige med at lave brugergrænsefladen. Vi har indsat en knap og en lyd, og vi har fået navngivet appen. Lydfilen er uploadet og klar til at kunne bruges. Vi ønsker, at lyden afspilles, når brugeren trykker på knappen. Denne handling skal vi knytte til knappen. Det foregår i Block-editoren.
Programmeringen af handlinger foregår i Block-editoren. Nederst i venstre side ses de komponenter, vi har sat på i Designeren (markeret med en rød cirkel).
Block-editoren er inddelt i to rubrikker, Blocks og Viewer. I Blocks-rubrikken ses forneden alle de komponenter, vi har sat på i Designeren. Når man klikker på Button1, kan man se de forskellige programmeringsmuligheder, der er for en knap. a) Træk klodsen ”when Button1 Click” ind i Viewer-området. b) Når brugeren trykker på knappen, eksekveres de kommandoer, der lægges ind i klodsen. Der skal afspilles en lyd, når der trykkes på knappen. Klik på Sound1, og træk klodsen ”call Sound1 Play” ind i klodsen ”when Button1 Click” i Vieweren. Nu er vi færdige med appen, og vi skal have testet den.
10
Øvelse 1.3 – Test af appen Vi ønsker at afprøve den app, vi har lavet. Programmet skal derfor uploades til en Android-enhed (smartphone eller tablet). a) Find din Android-smartphone. Gå ind i Google Play, og hent appen MIT AI2 Companion (søg på ”mit ai2”).
Når PC og smartphone er på det samme WiFi-netværk, overføres filen nemt til smartphonen. (Foto: Ken Mathiasen)
I App-Inventor på PC’en skal man vælge menuen ”Connect” og så ”AI Companion”. Så kommer der en QR-kode op på skærmen. På smartphonen skal man åbne appen ”MIT AI2 Companion” og klikke på den blå knap (scan QR-kode). Scan herefter QR- koden fra PC’ens skærm.
Ved at forbinde en smartphone til PC’en (med QR-koden) kommer appen frem på smartphonen, så den kan testes. (Foto: Ken Mathiasen)
Det er vigtigt, at PC og smartphone er på det samme netværk. Vælg derfor skolens netværk i stedet for mobildata.
11
Informatik C – Værktøjshæfte | 1 Smartphoneprogrammering med App-Inventor
Øvelse 1.4 – Lyd og billede Nu skal programmet udvides. Lad PC og smartphone forblive forbundet, så kan du løbende følge udviklingen på smartphonens skærm. a) Gå ind på soundbible.com og hent yderligere en lyd af en kat. I App-Inventor skal der indsættes en ny knap (Button2), og den nye lyd skal tilknyttes (Sound-komponenten er gemt under fanen ”Media”). Button2-navnet skal ændres til den kattelyd, der sættes på. Det kunne være ”Klik for Hvæs”. b) Det ser lidt fjollet ud, at knapperne ikke er lige brede. Vi vil gerne gøre dem lige store, så det virker som om, de er grupperet (gestaltloven om lighed). I Properties-rubrikken er der et felt, der hedder ”Width” (når man har markeret en knap). Her kan man indstille en komponents bredde og højde. Vælg den samme bredde til de to knapper.
Når en komponent er markeret, kan alle komponentens egenskaber (properties) ændres. Fx kan en knap indstilles til at fylde 40 % af bredden af skærmen.
c) I Block-editoren programmeres Button2 til at afspille lyd nr. 2. Husk bagefter at tjekke programmet på din smartphone. d) Vi skal have indsat et billede. Funktionen skal være, at der afspilles en lyd, når man klikker på billedet. Gå ind på www.pixabay. com, og find et billede af en kat. Billedet skal downloades til din PC (lav opløsning er bedst).
12
Gå ind på soundbible.com, og hent yderligere en kattelyd. I App-Inventor skal der indsættes en ny knap (Button3) til denne lyd. Begynd med at sætte en ikke-synlig Sound3-komponent på. I properties for Button3 klikkes på feltet ”Image”. Indlæs herefter billedfilen. Knappens bredde (Width) sættes til ”Fill parent”, så billedet dækker hele bredden. Der er tekst oven på billedet – det er knapteksten (”Text for button3”). Det fjernes ved at indsætte et mellemrum i Text-feltet, så der ikke er tekst oven på billedet. Nu har vi et billede, der fungerer som en knap.
En tredje knap er ændret til et billede, der kan klikkes på.
Appen kan nu afspille tre lyde.
Gå ind i Block-editoren, og tilknyt lyd til Button3-knappen. Afprøv appen ved at vælge topmenu ”Connect” og ”AI Companion”.
13
Informatik C – Værktøjshæfte | 1 Smartphoneprogrammering med App-Inventor
Øvelse 1.5 – Tekstfelter, Labels og TextToSpeech Komponenten ”Label” giver dig som programmør mulighed for at vise brugeren en tekst. Omvendt, når brugeren skal indtaste noget i appen, bruges komponenten ”TextBox”. TextBox er et tekstfelt. Det smarte ved TextBox-komponenten er, at smartphonens tastatur automatisk kommer frem på skærmen, når brugeren i appen klikker på tekstfeltet. a) Gå ind i App-Inventor, og opret et nyt projekt, der hedder ”TekstTilTale”. Indsæt følgende:
(klik og træk ”TextBox” fra Paletten User Interface • Etindtekstfelt på Viewer-området) knap • EnTo labels (”Label” ligger også i Paletten User Interface) • Komponenten • Media) ”TextToSpeech” (den ligger i Palette-rubrikken AccelerometerSensor (den ligger under • Komponenten Sensors)
I det nye projekt skal der indsættes en knap, et tekstfelt, to labels, sensoren AccelerometerSensor og Media-komponenten TextToSpeech.
b) I Block-editoren skal du opbygge følgende:
14
Når programmet kører, og der klikkes på knappen (Button1), skrives der først i Label1: ”Her er en tekst, som programmøren har skrevet”. Bagefter overføres brugerens tekst fra tekstfeltet til Label2. Hvis smartphonen rystes, oplæses teksten ”Stop Shaking me”. Den røde klods findes i Blocks-rubrikken ”Build-in”, hvor den ligger øverst som den første klods under ”Text”. Når klodsen er indsat, kan man som programmør skrive en tekst i den.
Afprøv programmet ved at skrive en tekst og trykke på knappen. Prøv også at ryste smartphonen. c) Tid til oprydning. I Designeren skal du navngive Screen1 til ”Oplæsning”. Find en god tekst til knappen Button1, og skriv det på den. I TextBox1 skal hjælpeteksten ændres fra ”Hint for TextBox1” til ”Indtast den tekst, der skal læses højt”. Det gøres i Properties for TextBox1 ved at rulle ned til ”Hint” og ændre teksten i feltet. d) Programmet skal udvides, så den indtastede tekst også oplæses, når der trykkes på knappen. Det foregår i Block-editoren. ”when Button1 Click” skal nu også indeholde en ”call TextToSpeech1 Speak”. Man kan kopiere klodsen fra ”when AccelerometerSensor1 Shaking” ved at højreklikke og vælge ”Dublicate”. Den tekst, der skal læses højt, er ”TextBox1 Text” – altså teksten, brugeren har indtastet.
15
Informatik C – Værktøjshæfte | 1 Smartphoneprogrammering med App-Inventor
e) Appen kan gemmes som en *.apk-fil og sendes til andre. Gå ind i topmenuen ”Build”, og vælg ”App (save .apk to my computer)”. Den fil, der gemmes på din PC, er din egenudviklede app. Den kan du sende til andre, fx som vedhæftet fil i Facebook Messenger. Når dine kammerater modtager filen, kan de åbne den ved at klikke på den. For at kunne køre filen skal der i smartphonens indstillinger (sikkerhed) gives tilladelse til at køre apps fra andre (det hedder typisk Ukendte) kilder. I dette tilfælde ved vi, at det er os, der har udviklet appen, så det er ok. Men husk bagefter at sætte sikkerhedstilladelsen tilbage igen. Øvelse 1.6 – Lommeregner Nu skal du lave en lommeregner-app. Lommeregneren skal kunne lægge to tal sammen. Appen virker ved, at brugeren indsætter tallene i hver sit tekstfelt, og når der trykkes på en knap, lægges indholdet af felterne sammen. Facit vises i en label. For at kunne styre det grafiske udtryk indsættes en ramme. Det giver fx mulighed for at placere komponenter ved siden af hinanden. a) Gå ind i App-Inventor og opret et nyt projekt, der hedder ”Lommeregner”. Skærmens navn skal være ”Lommeregner”, og vi vil gerne have en anden baggrundsfarve. Gå ind i Properties-rubrikken for Screen1, og vælg en farve i ”BackgroundColor”. Indsæt VerticalArrangement (en ramme, der findes i Paletten Layout). Rammens properties ændres, så den fylder hele bredden (Width = Fill Parent). Vælg værdien ”Center : 3” i ”AlignHorizontal” for at få komponenterne til at stå lige under hinanden inde i rammen. Indsæt to tekstfelter i rammen, og ændr deres TextAlignment til ”Right 2”. Indsæt en knap med teksten ”Plus” i rammen. Indsæt til sidst en Label i rammen med teksten ”Her skrives facit”.
16
Der oprettes et nyt projekt (Lommeregner) med to tekstfelter, en knap og en label.
b) I Block-editoren skal du opbygge følgende:
Indholdet af de to tekstfelter lægges sammen og skrives i label. Det blå matematikfelt findes under ”Build-in-Math”. Afprøv appen.
Matematikfunktioner findes i Blocks-rubrikken ”Built-in”.
c) Udvid nu programmet, så der også er en minusknap. Plus- og minusknapperne skal stå på linje med hinanden. Det klares ved at indsættes en ramme om tekstfelterne, ligesom vi gjorde tidligere (denne gang HorizontalArrangement i Paletten Layout). Afprøv appen.
17
Informatik C – Værktøjshæfte | 1 Smartphoneprogrammering med App-Inventor
Det indsættes en minusknap ved siden af plusknappen.
d) I forhold til interaktionsdesign er det ikke så godt at bruge tekst på knapper – ikoner er bedre. Lav de to knapper om, så der ikke er tekst på dem, men billeder. Ikoner kan findes ved fx at Google ”math icon”.
Der indsættes ikoner i stedet for tekst på knapperne. I opgave e udvider vi programmet til fire funktioner.
e) Indsæt to nye knapper til at gange og dividere. Udvid også programmet, så facit oplæses. Det gøres på følgende vis:
18
Værktøjshæfte Kvalifikationer og kompetencer
Informatik C Dette arbejds- og værktøjshæfte er udarbejdet i tilknytning til bogen Informatik C. Det er adskilt fra bogen, fordi værktøjerne løbende ændres, opdateres og forældes. Samtidig er hæftet med sin spiralryg nem at bladre i, mens man arbejder med programmeringsøvelserne, og der er gjort plads til noter i margin. Værktøjshæftet giver en grundig indføring i de enkelte værktøjer og gør eleverne i stand til at bruge programmering til udvikling af simple IT-systemer. Der arbejdes med tre værktøjer og kompetencer: Smartphone-programmering, SQL-database og html-kodning. Til alle tre temaer anvendes browserbaserede værktøjer. Hæftet indeholder samtidig to projektforløb, læreren kan gennemføre med klassen. Det første forløb handler om opbygning af en webshop og det andet om design af en smartphone-app. Begge forløb tager udgangspunkt i emnerne fra Informatik C. Værktøjshæftet er skrevet i et elevnært sprog, er rigt illustreret og indeholder mange praktiske og letforståelige øvelser. Der anvendes worked examples og computational thinking, hvor eleven typisk skal arbejde videre med (eller ændre) en stillet opgave. Alle øvelser har en vejledende løsning.