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

Transcriptie

1 2

2 Inhoudsopgave Inleiding 3 Installatie 4 De ontwikkeltool 6 Je eerste app HelloPurr 8 PaintPot 14 MoleMash 23 2

3 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, ). 3

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

5 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 start- en/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. 5

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

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

8 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 8

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

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

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

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

13 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). Ben je nog verbonden met je mobiel? Probeer het uit! 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. Ben je nog verbonden met je mobiel? Probeer het uit! 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. 13

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

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

16 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). 16

17 Component Palette-groep Component naam Functie (rename) 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. 17

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

19 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 : 19

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

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

22 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) 22

23 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) 23

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

25 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) 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: 25

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

27 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: 27

28 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 = = 164. Staat de mol boven, dan is Y = 0, staat de mol onder, dan is Y = = 258. De maximale waardes voor X en Y zijn hiermee bepaald; X = Y = Let op, we laten App Inventor dit zelf uitrekenen. 28

29 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: Roep MoveMole elke seconde op; Hou de score bij: 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. 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. 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. 29

30 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: 30

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