Fun met Electronica Workshop Android apps maken met MIT...

Fun met Electronica Workshop

Android apps maken met MIT App Inventor 2

Fun met Electronica Workshop Android apps maken met MIT App Inventor 2

Inhoudsopgave

Inleiding 3

Installatie 4

De ontwikkeltool 6

Je eerste app HelloPurr 8

PaintPot 14

MoleMash 23


Inleiding MIT App Inventor is ontwikkeld door MIT (Massachusetts Institute of Technology), de ontwikkelaars

van o.a. Scratch. Met Scratch leren kinderen zelf eenvoudige games en animaties programmeren die

zij dan zelf kunnen spelen binnen de Scratch- omgeving. Net een stapje verder is het maken van een

échte app, die je zelf op smartphones en tablets kunt installeren. MIT App Inventor is een online

programmeeromgeving waarmee je apps voor Android telefoons en tablets kunt maken, gebaseerd

op hetzelfde ‘blocks’ (puzzelstukjes) systeem van Scratch. MIT App Inventor is daarmee een mooi

middel om zelf apps te leren bouwen, bovendien zijn er vele tutorials en cursussen die er online voor

te vinden zijn.

In deze workshop leer je een drietal apps maken. De workshop is gebaseerd op het boek App

Inventor 2 (Wolber, Abelson, Spertus & Looney). Daarnaast is gebruik gemaakt van diverse andere

bronnen zoals; Android apps met App Inventor 2 (F. Vonk, 27-10-2015).


Installatie MIT App Inventor 2 draait in de webbrowsers Chrome en Firefox. Om toegang te krijgen tot App

Inventor 2 heb je een Google account nodig. In de browser start je op

http://appinventor.mit.edu/explore/ en klik je op “Create apps!”

Voer je Google account in en sla de vragenlijst nog maar even over.

We lopen de schermen die nu verschijnen door:

Om er zeker van te zijn, voer de volgende stappen uit. Heb je geen Android smartphone, dan in ieder

geval de tweede stap.

http://appinventor.mit.edu/explore/


Eerste stap:

Setting Up App Inventor; op deze pagina worden de opties beschreven.

De eerste optie is de mooiste, de makkelijkste. Je hebt er wel een Android toestel voor nodig en WiFi

met niet al te ingewikkelde firewalls die bij bedrijven en op scholen wel eens toegepast worden.

Doorgaans werkt de eerste optie thuis zeer goed. Deze optie wordt ook aangeraden. Ga met je

smartphone naar de Play Store, download en installeer AI2 Companion. Of

scan de QR-code rechts.

Zorg dat de computer en de smartphone in hetzelfde WiFi netwerk zitten.

Via MIT app Inventor in je browser maak je daarna contact met je

smartphone. Meer informatie daarover later.

De tweede stap:

Ook als je wel een Android toestel hebt is het handig om stap twee uit te voeren. Om er zeker van te

zijn dat je MIT app Inventor op je laptop ook elders kan gebruiken, b.v. in het (WiFi)netwerk van

school of bij een bedrijf. Hiervoor moet je ook het programma voor de emulator installeren. De

emulator is een “nep” smartphone die op je beeldscherm verschijnt, maar waar je wel de meeste

functies van je app op kan testen. Klik op “Set up and run the Android emulator” en voer de

installatiestappen uit behorende bij je besturingssysteem. Windows en Linux gebruikers moeten een

starten/of desktopicoon aanmaken en aiStarter handmatig opstarten (dubbelklik). aiStarter werkt

op de achtergrond, indien je het venster opent zie je een wat vreemd scherm. Op Mac start aiStarter

automatisch en alleen wanneer het nodig is.

Ook de emulator start je vanuit de browser. Ook hier, meer informatie hierover later. De eerste keer

dat je de emulator volledig opstart, duurt het best wel even.

Het volgende scherm is weer een welkomscherm.


Tijd om aan de slag te gaan…

De ontwikkeltool

Om de ontwikkeltool goed te kunnen bekijken moeten we een nieuw project aanmaken. Laten we

die maar direct de naam geven van de eerste app. Klik op het driehoekje naast Projects.

Kies; Start new project; noem het HelloPurr en klik op OK.

App Inventor maakt het nieuwe project aan en start het eerste screen op in de Designer Mode.

Het scherm in de Designer Mode bestaat uit diverse gebieden. Elk gebied heeft een eigen functie.


1. Knoppenbalk: In deze balk vind je knoppen om "Screens" te selecteren, toe te voegen en te

verwijderen. Verder kun je via deze balk wisselen tussen het "Designer" scherm en de "Blocks

Editor".

2. Palette: Het palette is de plek waar je alle ingebouwde componenten terugvindt om te gebruiken

in jouw app. Deze componenten zijn onderverdeeld in categorieën. Om een component te gebruiken

sleep je deze naar het scherm in de Viewer.

3. Viewer: In de viewer kun je de gebruikersinterface ontwerpen.

4. Components: Dit is een overzicht van alle componenten die op dit moment in gebruik zijn. Door op

een component te klikken kun je zijn eigenschappen bekijken in het Properties gebied.

5. Media: In een applicatie kun je gebruik maken van bijvoorbeeld afbeeldingen, deze kun je hier

toevoegen en beheren.

6. Properties: In dit deel van het scherm pas je eigenschappen van een component aan, bijvoorbeeld

de kleur.

De app maken…


Je eerste app HelloPurr Tijdens het maken van je eerste app leer je:

De belangrijkste onderdelen van App Inventor te gebruiken, de designer en blocks editor.

Je gaat media van je computer uploaden en gebruiken in App Inventor

Je gaat de app live testen; op je smartphone met AI2 Companion via WiFi.

Tot slot maak je een .apk bestand van je app die geïnstalleerd kan worden op je smartphone.

Informatie vooraf:

Als het goed is zie je in je browser het bovenstaande scherm.

App Inventor is nog leeg. Het staat in jouw eerste project “HelloPurr”.

Alles wat je nu gaat doen in de app wordt automatisch opgeslagen, App Inventor is een cloud-based

tool. Door later opnieuw in te loggen vind je je projecten weer terug.

Op het lege scherm moeten we componenten toevoegen. Dit kunnen eenvoudige componenten zijn

zoals Label (tekst in een kader) of een drukknop. Aan een drukknop kun je weer een actie koppelen.

Andere componenten zijn uitgebreider: het Canvas, waar je op kan tekenen of dat beelden en

animaties kan vasthouden; een accelerometer, dat is een bewegingssensor die detecteert wanneer u

het apparaat verplaatst of schudt; of componenten die kunnen sms'en, muziek en video afspelen, het

verkrijgen van informatie van websites, en ga zo maar door.

Voor de HelloPurr app hebben we twee zichtbare componenten nodig. Het Label, waarop je kunt

lezen “Pet the Kitty” en een drukknop met een plaatje van een kat erin. Daarnaast kent deze app ook


twee niet zichtbare componenten; een geluidsfragment en de accelerometer die een beweging om

gaat zetten in een actie.

Voordat we componenten gaan toevoegen moet je er eerst twee bestanden downloaden. Plaatje van

de kat en het geluidsfragment. Beide zijn te downloaden via.

http://appinventor.mit.edu/explore/content/hellopurr.html

Het Label maken:

Ga naar; Palette > open User Interface > sleep

Label in screen 1.

Er verschijnt nu het vlak “Tekst for Label 1”

Kijk ook in Components en Properties. Hier is

het Label er ook aan toegevoegd.

Verander in Properties > Label 1 > Tekst de tekst in “Pet the Kitty”, TextColor in geel,

BackgroundColor in blauw. Tot slot, zet FontSize op 20.0.

Kijk in Viewer voor het resutltaat..

De knop toevoegen:

De knop die je gaat toevoegen moet omgezet worden in het plaatje van de kat. Volg de instructie.

http://appinventor.mit.edu/explore/content/hellopurr.html


Sleep uit Palette een knop (Button) in je scherm onder het label. De knop wordt weergegeven als een

rechthoek. Button1 is nu ook toegevoegd in Components en onder Properties. Upload nu kitty.png

via de uploadknop in Media (onder Components). Nu

moet je nog de knop er uit laten zien als de kat. In

Properties staat onder Button1 bij Image; none.

Verander dit in kitty.png. De knop is veranderd in het

plaatje van de kat, maar in het plaatje staat nog tekst.

Haal die weg. Viewer ziet er nu als volgt uit.

Het Meow geluid toevoegen:

Kies in Palette de categorie Media door er op te klikken. Sleep Sound in Screen1. Sound1 verschijnt

onder Screen1 als niet zichtbare component. Sound1 wordt ook toegevoegd aan Components en

wordt weergegeven in Properties. In Properties wordt de selectie van Components weergegeven.

Upload Meow.mp3 via de uploadknop in Media en selecteer dit bestand in Properties, Sound1 onder

Source.

In het designer gedeelte ben je nu klaar. Even een overzicht.

Pallete groep Component type Naam component Doel

User Interface Label Label1 Tekst “Pet the Kitty” weergeven

User Interface Button Button1 Laat de kat miauwen

Media Sound Sound1 Speelt meow.mp3 af

Live testen:

Wat we tot nu toe en wat we nog gaan doen kunnen we live testen. In het hoofdstuk installatie heb

je al aanwijzingen gekregen om de app op je Android toestel te installeren en aiStarter op je

computer te installeren.

Eerst de handigste en makkelijkste stap. Open op je smartphone MIT App Inventor 2 Companion en

kies op de computer Connect > AI Companion. Je ziet nu de

volgende schermen.


Scan met je smartphone de QR code

en wacht.. Als het goed kun je nu

live je app zien op je toestel! Lukt

dit, kies dan altijd voor deze wijze

van testen.

Lukt het niet, dan zit je smartphone

niet in hetzelfde WiFi netwerk of

zijn er beveiligingen die de

verbinding onmogelijk maken.

Probeer dit samen met een systeembeheerder op te lossen of kies voor de emulator.

Op Windows of Linux moet je nu handmatig aiStarter opstarten. aiStarter gaat op de achtergrond het

werk doen, onderin zie je wel dat het programma actief is. Je krijgt de melding dat het een paar

minuten kan duren, dat is ook zo. Er wordt softwarematig een mobiel gebouwd, opgestart en virtueel

verbonden met AI Companion. En zie het resultaat:

Er is nog een derde manier. Hiervoor heb je geen WiFi nodig, wel een Android toestel. Ik beveel het

niet aan, het is v.w.b. de benodigde drivers toestel-afhankelijk. Volg de Engelstalige instructie op de

volgende sites.

http://appinventor.mit.edu/explore/ai2/setup-device-usb.html

http://appinventor.mit.edu/explore/ai2/connect-USB-win.html

Verder werken aan de app; Het programmeren.

Om de kat te laten miauwen als je er op drukt moet je dit programmeren in de Blocks Editor. De knop

hiervoor vind je helemaal rechts.

http://appinventor.mit.edu/explore/ai2/setup-device-usb.html

http://appinventor.mit.edu/explore/ai2/connect-USB-win.html


Net als het "Designer" scherm bestaat ook dit scherm uit verschillende onderdelen.

De knoppenbalk zit op dezelfde plek als in het "Designer" scherm. In deze balk verandert feitelijk

niets, behalve dat de Designer en Blocks knoppen een andere kleur krijgen.

Links zit het Blocks gedeelte met daaronder het Media gedeelte en rechts zit het grootste gedeelte

van het scherm genaamd de Viewer.

In het Blocks gedeelte vind je alle bouwblokken om programma's mee te maken. De blokken zijn

onderverdeeld in drie groepen: De Built-in blokken; Deze zijn onderverdeeld in diverse categorieën.

Elke categorie heeft een eigen kleur. Deze blokken bieden algemene functionaliteit aan. De Screen

blokken; De blokken die bij de app-componenten uit je ontwerp horen. Deze blokken bieden

functionaliteit specifiek voor je app-componenten aan. De Any component blokken; Deze blokken

bieden functionaliteit voor groepen van dezelfde soort blokken aan.

Als je op een naam in het Blocks gedeelte klikt, dan zie je

een transparante overlay over het Viewer gedeelte. Als je op

een blok klikt, dan kun je dat blok naar het Viewer gedeelte

slepen.

Klik je op Button1, dan krijg je alle stukjes die specifiek

horen bij Button1. We willen dat Sound1 te horen is bij klik

op Button1, sleep “when Button1.Click>Do” naar het viewer

scherm. Selecteer nu Sound1 in Blocks en sleep “call

Sound1.Play” in de “do”-socket van Button1.Click. Je hoort

dat de blokjes passen alsof je een puzzelstukje op zijn plaats

legt.


Ben je nog verbonden met je mobiel? Probeer het uit!

Purr betekent het spinnen van een kat. Met je mobiel

kun je dat nabootsen door die te laten trillen. Deze

functie kunnen we toevoegen door er een blokje bij te

steken. In Sound1 vind je “call Sound1.vibrate>millisecs”.

Sleep deze onder “callSound1.Play”. Je ziet dat rechts

van millisecs iets mist. Dit betekent dat de code nog niet

compleet is! Er moet nog een waarde ingeplakt worden.

Het getallenblokje kun je vinden in Math (blauw). Kies

het getal 0, sleep het blokje erin, verander 0 in 500.

(halve seconde).


Wat ook nog mogelijk is, is dat we de acceleratorsensor gaan koppelen aan deze app. Je mobiel

merkt met deze sensor op dat je met je mobiel schudt. Jij gaat het koppelen aan Sound1.

Voor deze functie moet je even terug naar het Designer

scherm. Sleep uit Palette > Sensors >

AccelerometerSensor in Screen1. Dit component wordt

geplaatst bij niet-zichtbaar component. Verander niets in

Properties, maar schakel direct over in het Blocks

scherm.

Aan je Blocks is nu AccelerometerSensor1 toegevoegd.

Sleep “when AccelerometerSensor1.shaking do” naar de

viewer. Vul dit blok vervolgens met callSound1.play.


Elke app heeft eenmaal geïnstalleerd een eigen icoontje. Voordat je het .apk bestand laat maken

moeten je dit nog toevoegen. Dit doe je in het Designer scherm. Selecteer in Components Screen1.

Voeg in Properties > Screen1 > Icon het bestand toe voor je Icoontje. Je bent nu klaar met bouwen.

App Inventor kan jouw gemaakte app opbouwen tot een .apk bestand. Dit bestand kun je, in eigen

beheer, delen met anderen. Iedereen kan deze app ook daadwerkelijk installeren op een Android

smartphone.

Om dit bestand te bouwen heb je twee manieren om het uit te voeren. Dit gaat vanuit de Build-knop.


Kies je voor “provide QR code for APK” dan maakt App Inventor het bestand en plaatst het tijdelijk op

een server. Je kan dan met de QR code het bestand op je mobiel downloaden.

De aangemaakte QR code is maar 2 uur geldig, daarna wordt het bestand

weer van de server verwijderd.

Kies je voor “save .apk to my computer” dan wordt het bestand gemaakt en automatisch naar je

computer gedownload (Downloads map).

Het .apk bestand installeren op je mobiel. Omdat het .apk bestand niet afkomstig is uit de PlayStore

moet je een instelling op je mobiel aanpassen. Ga naar Instellingen > Beveiliging en klik aan

“Onbekende bronnen”. Je geeft hiermee aan dat jouw mobiel ook apps kan installeren van bronnen

buiten de PlayStore om.


Samenvatting

• Je bouwt apps door het selecteren van componenten in Designer, vervolgens vertel je in Blocks

Editor wat de componenten moeten doen en wanneer.

• Sommige onderdelen zijn zichtbaar en sommige niet. De zichtbare worden weergegeven in de

gebruikersinterface van de app. De niet-zichtbare onderdelen doen dingen zoals het afspelen van

geluiden.

• Je definieert het gedrag van componenten 'door het samenstellen van blokken’ in de Blocks Editor.

Je sleept een ‘voorwaarde-commando-blok’ uit, zoals Button1.Click, en plaats dan commando

blokken zoals Sound.Play er binnen. Alle commando blokken binnen Button1.Click zullen worden

uitgevoerd wanneer de gebruiker op de knop tikt.

• Sommige commando's hebben extra informatie nodig om ze te laten werken. Een voorbeeld

hiervan is Trillen, dit commando moet weten hoeveel milliseconden te trillen. Deze waarden worden

argumenten of parameters genoemd.

• Getallen worden voorgesteld als blokken. U kunt deze aansluiten op commando's die getallen als

argumenten nodig hebben.

• App Inventor heeft sensor componenten. De AccelerometerSensor kan detecteren wanneer het

apparaat wordt verplaatst of geschud.

• U kunt de apps bouwen, verpakken en downloaden naar de telefoon. Geïnstalleerd functioneren ze

onafhankelijk van App Inventor.


PaintPot Bij het maken van de volgende app leer je een teken-app te maken. PaintPot is van origine het eerste

programma geweest om, in de jaren 70, de kracht van een PC aan te tonen. In die tijd was een

tekenprogramma maken een bijzonder complex proces. Met App Inventor zullen we zien dat er al

heel veel werk voor ons achter de schermen is verzet.

Wat kan de PaintPot app:

Doop je vinger in een virtuele pot verf en verf met die kleur.

Sleep met je vinger over het scherm en teken zo een lijn.

Tik op het scherm om stippen te maken.

Verander de grootte van de stippen.

Gebruik een knop om het scherm weer schoon te maken.

Gebruik de camera van je toestel en teken op die foto.

Je moet aanleren:

Hoe je in een bepaalde layout de componenten op het scherm schikt.

Hoe je tikken en slepen over het scherm programmeert.

Hoe je de eigenschappen (properties) van een component kan laten veranderen door op een knop te

drukken.

Hoe je variabelen definieert en bewaart om later te gebruiken, b.v. de kleur waarmee je gaat

tekenen.

Uit welke componenten bestaat PaintPot en wat is de functie van deze onderdelen?

Van boven naar beneden:

Drie knoppen die in een horizontaal kader staan.

Een canvas om op te tekenen.

En nog vier knoppen in een tweede horizontaal kader. In

totaal zijn het negen onderdelen. Op de volgende bladzijde

een overzicht in tabelvorm.

Let op: Omdat we bij deze app met veel componenten

werken, moeten we deze componenten herkenbare namen

geven. Bijna elk component wordt voorzien van een eigen

naam (rename).


Component Palette-groep Component naam (rename)

Functie

Button User Interface RedButton Verandert de tekenkleur naar rood

Button User Interface BlueButton Verandert de tekenkleur naar blauw

Button User Interface GreenButton Verandert de tekenkleur naar groen

HorizontalArrangement Layout HorizontalArrangement1 Plaats de drie bovenste knoppen naast elkaar

Canvas Drawing and Annimation

DrawingCanvas Het çanvas’ om op te schilderen

Button User Interface TakePictureButton Start de camera op

Button User Interface WipeButton Maakt het ‘canvas’ leeg

Button User Interface BigButton Verandert de grootte van de stip naar groot

Button User Interface SmallButton Verandert de grootte van de stip naar klein

HorizontalArrangement Layout HorizontalArragement2 Plaatst de vier onderste knoppen naast elkaar

Aan de slag:

Maak een nieuw project aan en noem het PaintPot.

De nieuwe app PaintPot wordt opgestart in de Designer Modus.

Verander in ‘Properties’ de ‘title’ van Screen1 in PaintPot.

Properties is rechts te vinden.

Klik in ‘Media’ op ‘Upload File’ en upload Kitty.png. Dit is

hetzelfde plaatje van de App ‘HelloPurr’

Sleep een Button uit ‘Palette’ de ‘Viewer’ in .

Verander de naam van ‘Button1’ in RedButton (rename).

Verander in ‘Properties’ de ‘Text’ van ‘Tekst for button 1’ in

Rood

Sleep nog een Button uit ‘Palette’ de ‘Viewer’ in .

Verander de naam van ‘Button1’ in BlueButton en de ‘Tekst’ in Blauw.

Sleep een derde Button uit ‘Palette’ de ‘Viewer’ in .

Verander de naam van ‘Button1’ in GreenButton en de ‘Tekst’ in Groen.

Verander nu bij alle drie de knoppen de ‘BackgroundCollor’ in de kleuren rood (Red), blauw

(Blue) en groen (Green). Hiervoor moet je de knoppen in ‘Components’ selecteren,

vervolgens kun je in ‘Properties’ dit aanpassen.


Nu gaan we de knoppen naast elkaar plaatsen. Hiervoor gebruiken we een ‘HorizontalArrangement’.

Tip: Kijk tussendoor op je mobiel om te zien hoe het er daar uit ziet.

Kies bij ‘Palette’ voor de categorie ‘Layout’

Sleep een ‘HorizontalArrangement’ de viewer in onder de knoppen.

Sleep de knoppen Rood, Blauw en Groen het vierkant van ‘HorizontalArrangement’ in.

De eerste gaat makkelijk, de tweede en de derde knop moet je er gewoon bovenop slepen.

Schik de knoppen in de volgorde; Rood, Blauw, Groen.

Selecteer ‘HorizontalArrangement1’ en verander ‘AlignHorizontal’ in Center:3

Stel de ‘Width’ in op Fill parent

Nu gaan we het teken canvas plaatsen, we zetten er nog even geen plaatje in.

Kies bij ‘Palette’ voor de categorie ‘Drawing and Animation’

Sleep een ‘Canvas’ in de viewer, onder de knoppen.

Verander de naam van ‘Canvas1’ in DrawingCanvas

Verander in ‘Poperties’ ‘PaintColor’ in de kleur ‘Rood’

Nu plaatsen we de tweede rij knoppen in de viewer onder het canvas.

Sleep Button in viewer, hernoem naar TakePictureButton en verander ‘Tekst’ in knop naar

Neem Foto.

Sleep Button in viewer, hernoem naar WipeButton en verander ‘Tekst’ in knop naar Wis.

Sleep Button in viewer, hernoem naar BigButton en verander ‘Tekst’ in knop naar Groot.

Sleep Button in viewer, hernoem naar SmallButton en verander ‘Tekst’ in knop naar Klein.


We gaan deze vier knoppen naast elkaar zetten in een ‘HorizontalArrangement’

Sleep een ‘HorizontalArrangement’ (Palette, Layout) de viewer in onder de vier knoppen.

Stel in dit ‘HorizontalArrangement’ de ‘Width’ in op Fill parent

Sleep hierin de knoppen ‘Neem foto’, ‘wis’, ‘groot’ en ‘klein’.

Selecteer in ‘Components’ ‘DrawingCanvas’

Nu kan je van ‘DrawingCanvas’ de ‘BackgroundImage’ instellen op Kitty.png

Kijk op je mobiel om te zien hoe de knoppen eruit zien.

Speel met de properties ‘Height’ en ‘Width’ van de knoppen en de ‘HorizontalArrangement’

om de verdeling te optimaliseren. Kijk hiervoor voortdurend op je mobiel.

Ben je tevreden met het uiterlijk van de App? Dan moeten we nog één ding toevoegen aan de

viewer.

Stel ‘Palette’ in op ‘Media’ en sleep ‘Camera’ de viewer in.

Dan kan je nu gaan programmeren. We controleren vooraf de lijst ‘Components’:


Klopt het? Klaar voor de volgende fase! Programmeren doen we in ‘Blocks’. Van ‘Designer’ naar ‘Blocks’ schakel je over met de knoppen rechts boven op de pagina De eerste functie: Ik raak het scherm aan en teken een stip.

Selecteer rechtsboven ‘Blocks’.

De Viewer die je nu te zien krijgt is nagenoeg leeg. Er is nog niets geprogrammeerd. In Blocks zie je

alle componenten terug in die je in Designer toegevoegd hebt.

Klik op DrawingCanvas. In viewer verschijnt nu een keuzeveld, klik

‘when DrawingCanvas.Touched’. Jouw keuze blijft achter op Viewer. Sleep dit blok naar de

linkerbovenhoek.

Klik opnieuw in ‘Blocks’ op DrawingCanvas en selecteer in het keuzescherm

‘call DrawingCanvas.DrawCircle’. Klik dit blok in de do-socket van ‘when

DrawingCanvas.Touched’.

Aan de rechterkant van

‘DrawingCanvas.DrawCircle’ zie je drie

insteekmogelijkheden (sockets). Hier moeten de

waarden van de X en Y positie en de grootte van

de stip bepaald worden. De grootte van de stip

wordt in de radius (straal) weergegeven. Omdat

de waarde van X en Y bepaald wordt door de

plaats waar je op het scherm tikt is X en Y geen

vaste waarde, je moet deze waarde (laten)

ophalen.


Haal blokjes uit ‘x’ en ‘y’ naast touchedAnySprite. Kies voor ‘get x’ en ‘get y’ en plak deze in

‘centerX’ en ‘centerY’.

Voor de radius kiezen we, voorlopig, de vaste waarde 5.

Klik ergens in het lege vlak, type 5 en geef ‘Enter’. Plak 5 in ‘radius’.

Ben je nog steeds met je mobiel verbonden? Probeer het maar eens uit!

Kun je je nog herinneren dat je in Designer in DrawingCanvas de PaintColor op rood had ingesteld?

De tweede functie: Sleep over het scherm en teken een lijn.

De teken-app die je maakt moet ook lijnen kunnen teken als je over het scherm sleept. Als volgt..

Selecteer uit het ‘DrawingCanvas’ keuzemenu ‘when DrawingCanvas.Dragged’.

Zet het onder het reeds gemaakte blok. Ook dit blok moet je weer vullen met gegevens.

Sleep het blok ‘call DrawingCanvas.DrawLine’ in.

Een lijn bestaat uit een beginpunt en

een eindpunt. Van beide punten moet

de X en Y opgevraagd worden. Dit zou

alleen rechte lijnen mogelijk maken,

een grillige lijn maak je door

voortdurend lijntjes te maken van

vorige positie en de huidige positie vast

te stellen.

Kijk naar het plaatje hierboven.

Haal uit ‘prevX’ ‘get prevX’ en plak die in x1.

Kijk ook naar ‘y1’ ‘x2’ ‘y2’ Probeer hier ook de juiste blokken in te plakken.

Probeer het maar weer uit.


De derde functie: De kleur veranderen.

In Designer hebben we knoppen aangemaakt om de tekenkleur aan te passen. Nu ga je dit

programmeren.

Selecteer in Blocks ‘RedButton’ om het keuzemenu van deze knop te krijgen.

Kies ‘when RedButton.Click’.

Nu wil je dat deze knop in ‘DrawingCanvas’ de ‘PaintColor’ gaat veranderen. Je moet het commando

gaan zoeken in het keuze menu van ‘DrawingCanvas’.

Sleep ‘set DrawingCanvas.PaintColor to’ in het blok ‘when

RedButton.Click’

De kleur die je tot slot moet inklikken vind je in ‘Built-in > Colors’.

Maak de onderstaande blokken voor BlueButton, GreenButton en WipeButton af.

Probeer het uit…. Maar er moet nog meer….

De functie: De grootte van de tekenstip veranderen. In Designer heb je twee knoppen aangemaakt, Big dots en Small dots. Eerder hebben we de grootte

van de stippen een vaste waarde gegeven; radius = 5. Met de knoppen Big dots en Small dots gaan

we deze waarde veranderen. Laten we afspreken een Small dot = 2 en een Big dot = 8. De app begint

met Small dot. Om dit voor elkaar te krijgen moeten we een variabele aanmaken.

Een variabele aanmaken: Om de verschillende waardes voor Radius te kunnen gebruiken moet je dit wel laten weten. De vaste waarde van 5 moet vervangen worden door een variabele. Een variabele is een geheugenplaats, in dit geval hoort in de geheugenplaats de waarde voor Radius te komen; 2 of 8. Eerst moet je de variabele aanmaken en een naam geven (adres voor de geheugenplaats). Onder ‘Built-in’ hangt het blokje ‘Variables’. (zie volgende bladzijde voor afbeelding)


Sleep ‘initialize global name to’ in de viewer en verander de naam in ‘dotSize’. Omdat we afgesproken hebben dat de app start in Small dot plakken we hieraan de waarde 2. Nu moeten we de variabele ‘dotSize’ gaan koppelen aan

DrawCircle. De naam ‘dotSize’ hadden we zelf verzonnen.

Haal uit het paarse blok ‘call DrawingCanvas.DrawCirkel’ de vaste waarde 5 eruit.

Plaats hiervoor in de plaats; de variabele ‘dotSize’ in. Die vind je in Build-in > Variables als .

Klikken we het driehoekje open, dan vind je daar de zojuist aangemaakte variabele

‘global dotSize’.

De functie toevoegen: Het veranderen van de waarde dotSize.

We moeten nog een stukje code programmeren voor het veranderen van een variabele. De knoppen

‘BigButton’ en ‘SmallButton’ moeten die verandering doorgeven als erop geklikt wordt.

Maak onderstaande blokken.

De verandering (set) haal je uit ‘variables’. De waarde waarin

verandert moet worden hadden we al afgesproken. Voer dit

voor beide knoppen door.

Probeer het uit….

De functie: Vraag de gebruiker een foto te maken.

De laatste, misschien wel de leukste stap. In Designer heb je de camera component toegevoegd, dat

moet natuurlijk ook nog ingesteld worden.

Sleep uit ‘TakePictureButton’ ‘when TakePictureButton.Click”

Sleep uit ‘Camera1’ ‘call Camera1.TakePicture’

Je vraagt nu om een foto te nemen. Daarna, als de foto genomen is.. (AfterPicture) moet de

BackgroundImage van DrawingCanvas veranderd worden in de genomen foto. Dit leidt tot de

volgende blokjes: (zie volgende bladzijde)


Probeer het maar eens uit….

De complete code:

Wil je van deze app een .apk bestand maken om te kunnen installeren? Volg dan de stappen zoals die

bij ‘Hello Purr’. Vergeet niet in Designer in Properties van Screen 1 ‘Icon’ in te stellen…..


Mole Mash Mole Mash wordt je eerste game-app. Mole Mash is gebaseerd op het klassieke arcade spel Whac-A-

Mole.

Ellen Spertus, van het App Inventor team, heeft de app die je gaat maken

ontwikkeld.

Welke functies heeft deze app allemaal in zich:

Een figuur, mol, die op verschillende plaatsen op het scherm verschijnt.

Tikken op de mol levert een trilling van het toestel op en verhoogt de score.

Tikken op het scherm, maar mis je de mol, dan wordt het opgeteld bij het aantal ‘misses’, gemiste

pogingen.

Een resetknop herstelt de score en het aantal gemiste kansen.

Aan de slag..

Maak een nieuw project aan en noem het ‘MoleMash’.

Download het plaatje van de mol (mole.png)

http://appinventor.mit.edu/explore/ai2/molemash.html

Je start in Designer. Wat moet je aan maken?

Een Canvas dat als speelveld gaat dienen.

Een ImageSprite, een figuur die actief deel uit maakt van je app.

Een Sound die trilt als de mol wordt geraakt.

Een Label die de Hits en Misses als getal gaat weergeven.

Een HorizontalArrangement voor een goede positie van de Labels.

Een Button om de getallen te resetten.

Een Clock die er voor zorgt dat de mol elke seconde een andere positie inneemt.

Een overzicht van de componenten en de functies:

http://appinventor.mit.edu/explore/ai2/molemash.html


Component type Palette groep Naam Functie

Canvas Drawing and Animation

Canvas1 Het speelveld voor ImageSprite

ImageSprite Drawing and Animation

Mole Voor de gebruiker om op te slaan

Button User Interface ResetButton Om de score te resetten

Clock Sensors Clock1 Regelt de beweging van de mol

Sound Media Sound1 Trilt als de mol wordt geraakt

Label User Interface HitsLabel Geeft “Hits” weer

Label User Interface HitsCountLabel Geeft het aantal hits weer

HorizontalArrangement Layout HorizontalArragement1 Zet HitsLabel en HitsCountLabel naast elkaar

Label User Interface MissesLabel Geeft “Misses” weer

Label User Interface MissesCountLabel Geeft het aantal missers weer

HorizontalArrangement Layout HorizontalArrangement2 Zet MissesLabel en MissesCountLabel naast elkaar

Het plaatsen van de componenten in viewer:

Sleep een Canvas in de Viewer, stel Width in op ‘Fill parent’, Height op 300 pixels.

Sleep een ImageSprite in Canvas1, hernoem naar Mole en stel in Properties Picture in als mole.png

(uploaden).

Sleep een Button in de Viewer, hernoem naar ResetButton.

Sleep een Clock de Viewer in, die wordt weergegeven als niet zichtbaar component.

Sleep een Sound de Viewer in, die wordt ook weergegeven als component.

Je scherm ziet er als volgt uit.


De Labels plaatsen:

Sleep een HorizontalArrangement onder de knop.

Sleep twee Labels in HorizontalArrangement1.

Hernoem het linker Label naar ‘HitsLabel’ en stel de Tekst in Properties in als ‘Hits: ’(Let op,

na dubbelepunt een spatie).

Hernoem het rechter Label naar ‘HitsCountLabel’ en stel de Tekst in Properties in met het

getal ‘0’.

Sleep een tweede HorizontalArrangement onder HorizontalArrangement2.

Sleep twee Labels in HorizontalArrangement2.

Hernoem het linker Label naar ‘MissesLabel’ en stel de Tekst in Properties in als ‘Misses: ’

(Let op, na dubbelepunt een spatie).

Hernoem het rechter Label naar ‘MissesCountLabel’ en stel de Tekst in Properties in met het

getal ‘0’.

Het scherm ziet er als volgt uit:


We zijn klaar in Designer, nu moeten we de acties gaan toevoegen in de Block editor.

We willen dat de mol willekeurig gaat bewegen over het speelveld, elke seconde neemt de mol een

andere plaats in. De gebruiker moet, op het moment dat de mol verschijnt, raak tikken. Het aantal

keer raak (Hits) en het aantal keer mis (Misses) moet worden weergegeven.

Het bewegen van de mol:

In de vorige programma’s/apps heb je gebruik kunnen maken van vooraf ingestelde commando’s.

Om een ImageSprite te kunnen laten bewegen moeten we een aantal procedures zelf aanmaken. We

gaan een procedure aanmaken die ervoor zorgt dat de mol willekeurig gaat bewegen. We geven het

de naam MoveMole en we starten de game ermee.

Het aanmaken van de MoveMole procedure:

Om te begrijpen hoe de mol beweegt moeten we een beetje wegen hoe de grafische kant van

Android werkt. Het Canvas kan worden voorgesteld als een veld met een horizontale (X) en een

verticale (Y) as, met bijbehorende X en Y coördinaten. De X coördinaat verhoogt bij beweging naar

rechts, de Y coördinaat verhoogt bij de beweging naar beneden, niet helemaal zoals bij wiskunde

dus. De linkerbovenhoek wordt als oorsprong gezien, de coördinaten zijn daar (0,0).

Om de maximale waardes te bepalen voor de mol op het scherm, hebben we de Width en Height

waarde nodig van Canvas1 en Mole. Width en Height waardes van Mole zijn bepaald in de

eigenschap van het plaatje wat geupload is. Width x Height van Mole.png is 36x42 pixels. Van

Canvas1 weten we dat de Height door ons zelf ingesteld is op 300 pixels, Width is ingesteld als Fill

parent en is 200 pixels.

Staat de mol links tegen de kant dan is X = 0, staat de mol tegen de rechterkant dan is X = 200-36 =

164. Staat de mol boven, dan is Y = 0, staat de mol onder, dan is Y = 300 – 42 = 258.

De maximale waardes voor X en Y zijn hiermee bepaald; X = 0-164 Y = 0-258. Let op, we laten App

Inventor dit zelf uitrekenen.


Aanmaken procedure MoveMole:

Selecteer Blocks Editor.

Sleep uit Built-in > Procedures een ‘to procedure do’ blok de viewer in. Hernoem ‘procedure’ in

MoveMole. We willen de Mole laten bewegen dus uit Mole een ‘call Mole.moveTo’ in het slot bij do.

In de sockets bij x en y plaatsen we uit Math de ‘random integer from’ blokken. De waardes van 1 en

100 moeten we aanpassen. In beide gevallen maak je van 1 > 0. Het blokje 100 gooi je weg

(prullenbak slepen). Daarvoor in de plaats stop je in beide gevallen uit Math het rekenblokje voor een

aftreksom. Nu moet je de rekensom compleet maken. Bij X is dat ‘Canvas1.With’ – ‘Mole.With’, voor

Y is dat ‘Canvas1.Height’ – ‘Mole.Height’ . Dat ziet er als volgt uit:

Roep MoveMole op als de app start:

Omdat het voor programmeurs zo gebruikelijk is om dingen bij

aanvang te laten starten is er een blokje voor ‘when

Screen1.Initialize’. Schuif er vervolgens ‘call MoveMole’ uit

Procedures in.

Roep MoveMole elke seconde op;

In Designer heb je Clock1 aangemaakt. In Properties staat

TimerInterval standaard op 100 milliseconden ingesteld. Dit heb je

niet veranderd, dus kun je het zo laten. Kijk je in Designer? Schakel

dan weer naar Blocks en sleep uit Clock1 ‘when Clock1.Timer’ en de

do-socket met ‘call MoveMole’.

Hou de score bij:

Je hebt twee Labels aangemaakt, HitCountLabel en MissesCountLabel. Beide zijn in Tekst ingesteld

op 0. We willen dat die getallen kunnen toenemen volgens de gestelde spelregels. Om dat te doen

moeten we het ‘Canvas1.Touched’ blok gebruiken. Sleep deze in de viewer. Sleep uit Control een ‘if

then’ blokje in de do-socket. Maak van het ‘if then’ blokje een ‘if then else’ blokje door op het blauwe

blokje te klikken en een else-blokje in de if-socket rechts te schuiven.


Maak het blok af volgens onderstaand figuur. En probeer het als volgt te lezen:

Als je Canvas1 aan raakt en je raakt AnySprite (in dit geval Mole, er is maar 1 sprite), dan heb je een

punt verdient, dus moet HitCountLabel Tekst aangepast worden en wel met 1 verhoogd worden. Zo

niet, ik heb Mole gemist, dan moet MissesCountLabel Tekst aangepast worden en met 1 verhoogd

worden.

Nu wordt het tijd om te testen…..

Als laatste, Reset de score:

Eigenlijk zou je met de opgedane kennis zonder instructie deze laatste stap moeten kunnen zetten.

Ik vind het te langzaam gaan, jij ook? Pas het maar aan… Tip; niet te overmoedig zijn : )

We missen nog één ding. Het component Sound1 heeft nog geen functie. Zorg dat smartphone

vibreert als Mole wordt aangetikt. Kies zelf maar een tijd.

De complete code:


Op dit moment weet je eigenlijk al best wel veel. Je zou er knoppen en functies aan toe kunnen gaan

voegen. De snelheid van de Mole met knoppen beïnvloeden of misschien met een tweede

ImageSprite gaan werken. Maak het zo dat de gebruiker de keuze krijgt uit meerdere sprites op een

tweede screen. Het spel moet dan wel met een startknop of in een bepaalde volgorde gestart

worden.

Tot zover de Nederlandstalige handleiding van App Inventor.

In het boek App Inventor 2; Create your Own Android Apps van David Wolber, Hal Abelson, Ellen

Spertus en Liz Looney staan nog voordbeeld apps en uitleg over App Inventor.

Fun met Electronica Workshop Android apps maken met MIT...

Documents

Transcript of Fun met Electronica Workshop Android apps maken met MIT...