Android apps met App Inventor 2

2015

Android apps met App Inventor 2

F. Vonk versie 1 27-10-2015

inhoudsopgave 1.

inleiding .......................................................................................... - 2 -

2.

installatie ........................................................................................ - 3 -

3.

ontwikkelomgeving ........................................................................... - 5 -

4.

Mollen Meppen ................................................................................. - 9 -

5.

Schrandere Scholier ........................................................................ - 24 -

6.

Meteoor ........................................................................................ - 37 -

7.

Appendix A: projecten samenvoegen ................................................ - 48 -

Dit werk is gelicenseerd onder een Creative Commons Naamsvermelding – NietCommercieel – GelijkDelen 3.0 Unported licentie Dit werk is gebaseerd op Android Apps met App Inventor; Coen Crombach, Robin Eggenkamp, François Vonk; 1 november 2012. De afbeelding op het voorblad is verkregen via INFOwrs. Copyright © 2010 INFOwrs Serviços em informatica.

-1-

1. inleiding Om apps te ontwikkelen bestaan een aantal ontwikkelomgevingen. De meest gebruikte, maar ook meest complexe, is Java met XML. Een alternatief is Basic4android. Voor beide moet je (voldoende) goed tekstueel kunnen programmeren. Een eenvoudiger alternatief is App Inventor 2. Dit is een drag and drop programmeeromgeving zoals GameMaker. Welkom bij de module Android apps met App Inventor 2. Deze module gaat je leren hoe je een aantal simpele apps maakt met deze ontwikkelomgeving. In dit boek worden enkele notaties gebruikt om het voor jou als lezer makkelijker leesbaar te maken: 

block: Blocks ga je gebruiken om te programmeren. Blocks in App Inventor worden weergegeven als puzzelstukjes.



knop, menu of component: Knoppen, menuopties en componenten worden op deze manier aangegeven.

In deze module kom je opgaves tegen die je moet maken om de lesstof te verwerken. De antwoorden kunnen in de les besproken worden.

opgave Opgaves in blauw moet je maken.

Er zijn ook bonus opgaves die je niet hoeft te maken maar waarvan het misschien wel slim en/of leuk is om het wel te doen. Ze bieden je in ieder geval extra oefenmateriaal.

bonus opgave Opgaves in groen zijn facultatief en dienen als verdieping of om meer te oefenen.

Let op, links in dit document hebben een rode kleur. Veel plezier en succes.

-2-

2. installatie De App Inventor 2 ontwikkelomgeving draait in een webbrowser. Om toegang tot App Inventor 2 te krijgen heb je een Google account nodig. Je kunt zo’n account aanvragen op: Google account. Als je een Google account (aangemaakt) hebt kun je inloggen via de volgende link: App Inventor 2. Daarna moet je App Inventor 2 toegang geven tot je Google account. Nadat je ingelogd bent, krijg je een aantal welkomst schermen. Als je die weg klikt, dan zie je een scherm zoals afgebeeld in Figuur 1.

Figuur 1: het "My Projects" scherm

Op school is alle software die App Inventor 2 nodig heeft al voor je geïnstalleerd. Maar als je thuis aan de slag gaat is dat misschien niet zo. Daarom volgen hierna de instructies om thuis te zorgen dat de App Inventor 2 ontwikkelomgeving goed werkt. Als je al een werkende omgeving hebt kun je meteen door naar het volgende hoofdstuk.

thuis installeren Het is nu belangrijk dat je de software installeert die App Inventor 2 nodig heeft om de "Blocks Editor" en de emulator uit te voeren. Deze termen zullen je nu misschien nog niets zeggen en dat is op dit moment niet erg. Verderop in het materiaal zullen ze in detail behandeld worden. Het is nu belangrijk om op de "Get Started" link onder de Help menuoptie te klikken, zie Figuur 2.

Figuur 2: de "Get Started" link

-3-

Als je dit hebt gedaan zie je in je browser de pagina zoals afgebeeld in Figuur 3.

Figuur 3: Getting Started webpagina

Vervolgens klik je op link 1: "Setup Instructions" en volgt de instructies die je krijgt via de links bij "Option Two" en "Option Three".

-4-

3. ontwikkelomgeving waarschuwing Voordat we van start gaan met App Inventor 2 een kleine waarschuwing. De ontwikkelomgeving is niet altijd even snel en het gaat niet sneller door veelvuldig op links of knoppen te klikken. Sterker nog: dit kan er voor zorgen dat de omgeving nog langzamer wordt en dat er fouten op gaan treden. Om dit te voorkomen vragen we je om geduld te hebben en te wachten als de omgeving je daarom vraagt!.

Als het goed is heb je na het inloggen het scherm voor je zoals afgebeeld in Figuur 1 en heb je nog geen projecten. Het eerste dat je daarom gaat doen is een project uploaden. Dat wil zeggen dat je een project dat iemand anders voor je gemaakt heeft gaat binnenhalen in de ontwikkelomgeving. Om dit te doen klik je op de Projects menuoptie en kiest vervolgens de eerste "Import project" link, zie Figuur 4.

Figuur 4: de eerste "Import project" link

In ons geval gaan we het "MollenMeppen" project (dat je kunt vinden in de ELO bij deze module) binnenhalen. App Inventor 2 projecten worden opgeslagen als AIA bestanden. Je moet het MollenMeppen.aia bestand uit de ELO halen en op een USB stick, de harde schijf, of je home drive zetten. Daarna klik je op bladeren, zie Figuur 5, en selecteert het MollenMeppen.aia bestand. Als je dan op OK klikt, dan wordt het project binnengehaald.

Figuur 5: de "Import Project" pop-up

-5-

Nadat je op OK hebt geklikt wordt het project "MollenMeppen" in ons scherm toegevoegd, zie Figuur 6.

Figuur 6: het "My Projects" scherm met het MollenMeppen project erin

Korte tijd nadat het project is toegevoegd zal de ontwikkelomgeving automatisch naar het "Designer" scherm springen. In dit scherm zie je het ontwerp van de app, zie Figuur 7.

Figuur 7: het "Designer" scherm voor de MollenMeppen app

het "Designer" scherm Het "Designer" scherm bestaat uit diverse gebieden. Om straks de gebruikersinterface van je eigen applicatie te kunnen ontwerpen, is het belangrijk dat je deze gebieden en hun functie kent en snapt. De gebieden zie je in Figuur 8.

-6-

Figuur 8: de diverse gebieden van het "Designer" scherm

Figuur 2.5 De verschillende onderdelen van het Design-scherm 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. Om weer naar het "Projects" scherm te gaan, klik je op de Projects menuoptie en kiest vervolgens de "My Projects" link, zie Figuur 9.

-7-

Figuur 9: de "My Projects" link

-8-

4. Mollen Meppen Je hebt zojuist je eerste project geladen en het ontwerp ervan kort gezien. Voor je het een en ander uitgebreid bekijkt ga je de applicatie eerst een keer uitvoeren. Dit doe je door het programma aiStarter.exe op te starten. Dit programma kun je vinden in C:\Program Files (x86)\AppInventor. Daarna klik je op de Connect menuoptie en kiest vervolgens de "Emulator" link, zie Figuur 10.

Figuur 10: de "emulator" link

De emulator wordt vervolgens opgestart. Dit duurt even, dus je zult wat geduld moeten hebben. Er komen achtereenvolgens een aantal dialogen voorbij. Deze zie je hierna afgebeeld. Sommige zie je meerdere keren.

Het opstarten van de emulator gaat niet helemaal goed. Je krijgt de volgende dialoog te zien en daarin moet je op "Not Now" klikken.

-9-

Het kan zijn dat je ook een fout in de emulator ziet. Deze zie je in de volgende afbeelding. Je moet daar op "Wait" klikken.

let op Zorg ervoor dat je aiStarter.exe en de emulator maar één keer opstart. Als je één van deze twee meerdere keren opstart, dan leidt dit tot een instabiele situatie en zorgt ervoor dat op den duur de boel kan crashen of dat er helemaal niks gebeurt.

Nadat de emulator opgestart en je app geladen is, zie je het volgende. Klik op de mol en kijk wat er gebeurt.

- 10 -

Wat er op dit moment gebeurt is nog niet zo heel spannend en uitdagend, maar daar kun je wat aan doen! Je kunt de emulator open laten terwijl je programmeert. Om de zoveel tijd wordt je code opnieuw gedownload in de emulator. Soms loopt de emulator echter vast. In dat geval moet je hem afsluiten door op de Connect menuoptie te klikken en vervolgens de "Reset Connection" link te kiezen, zie Figuur 11.

Figuur 11: de "Reset Connection" link

Hieronder volgt een serie opdrachten waardoor je "MollenMeppen" tot een echt spel kunt maken. We raden je aan om na iedere opgave waarin je de code aanpast deze uit te testen op de emulator. Veel plezier en succes! - 11 -

de "Blocks Editor" De "Blocks Editor" is de omgeving waarin je gaat programmeren. Je komt in de "Blocks Editor" door op de Blocks knop te drukken. Deze zit rechts boven in de knoppenbalk, zie Figuur 12. Met de Designer knop kun je weer terug switchen naar het "Designer" scherm.

Figuur 12: locatie van de Blocks knop

Voordat je de code gaat aanpassen staan we even stil bij het scherm dat je nu ziet. Net als het "Designer" scherm bestaat ook dit scherm uit verschillende onderdelen. Deze onderdelen zie je in Figuur 13.

Figuur 13: de "Block Editor"

- 12 -

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 blokken die bij de app-scherm (Screen) elementen uit je ontwerp horen. Deze blokken bieden functionaliteit specifiek voor je app-scherm elementen 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, zie Figuur 14. Als je op een blok klikt, dan kun je dat blok naar het Viewer gedeelte slepen.

Figuur 14: transparante overlay voor blokken

- 13 -

opgave 4.1 Klik eens wat rond in de "Blocks Editor" en kijk wat voor functionaliteit App Inventor 2 allemaal aanbiedt. Sleep ook eens een paar blokken in het Viewer gedeelte en verwijder ze weer. Je kunt blokken verwijderen door ze naar de prullenbak rechts onder te slepen of door ze te selecteren en op de delete knop op het toetsenbord te drukken.

Als je goed gekeken hebt in de "Blocks Editor" is het je hopelijk opgevallen dat elk blok een context menu heeft (klik met de rechter muisknop op het blok). Via het context menu kun je commentaar aan blokken toevoegen. Ook kun je ze uitschakelen, inklappen en weer uitklappen, zie Figuur 15 en Figuur 16.

Figuur 15: context menu van een uitgeklapt blok

Figuur 16: context menu van een ingeklapt blok

willekeurig opduiken van de mol De mol beweegt zich erg voorspelbaar op dit moment en dat maakt het spel saai. In de Blocks Editor kun je zien waarom de mol zich zo gedraagt.

- 14 -

opgave 4.2 Bekijk de code van de procedure verplaatsMol en beredeneer waarom de mol zich verplaatst zoals je ziet wanneer je erop klikt.

procedures Als je de code bekeken hebt zoals in de opgave hiervoor gevraagd werd, is je hopelijk opgevallen dat er een zogenaamde procedure is gemaakt met de naam verplaatsMol. Deze procedure wordt aangeroepen vanuit when sprMol.Touched. Een procedure (in veel programmeertalen ook wel functie genoemd) is een stuk code met een naam. In ons geval to verplaatsMol. Via de naam kan de bijbehorende code uitgevoerd worden. De naam is als het ware een afkorting voor het stuk code. Procedures zijn handig omdat ze voorkomen dat je hetzelfde stuk code steeds opnieuw moet maken als je die code op meerdere plaatsen nodig hebt. Dit is minder werk en beperkt tevens de lengte van je applicatie. Wanneer je bovendien duidelijke namen gebruikt is je code ook makkelijker te lezen. Dit alles draagt bij aan de overzichtelijkheid en daarmee de onderhoudbaarheid van de code.

Wat je hier feitelijk wilt is dat de x en y positie van de mol (de sprite) willekeurig bepaald worden. Hiervoor kun je een blok vinden bij de Built-in blokken in de categorie Math, zie Figuur 17. Nadat je een blok in het Viewer gedeelte hebt gezet, kun je ze aan elkaar klikken als ze passen.

- 15 -

Figuur 17: locatie van de Math categorie

opgave 4.3 Verander de code van de procedure to verplaatsMol zodat de mol zich willekeurig verplaatst binnen het veld. Hint: Wat is het Engelse woord voor willekeurig?

geluid toevoegen als je de mol raakt Als de mol geraakt wordt is het leuk als je dat ook hoort. Gelukkig kun je dit programmeren in App Inventor 2. Bij het materiaal zit een bestand whack.mp3 dat je hiervoor kunt gebruiken. Als je dit bestand niet kunt vinden vraag dan aan je leraar waar het staat. Om whack.mp3 in je project te krijgen moet je het geluidsbestand toevoegen aan de media. Dit kun je zowel het "Designer" scherm als de "Blocks Editor" doen. Als je niet kunt vinden waar je moet zijn kijk dan eens terug in deze module naar Figuur 8 of Figuur 13.

opgave 4.4 Voeg het geluidsbestand toe aan het spel.

- 16 -

Als je whack.mp3 hebt toegevoegd, dan moet je in het "Designer" scherm nog een geluid toevoegen. Dit kun je doen via de Media categorie in het palette. Sleep de Sound component naar de Viewer. Je ziet dat deze component niet in het zichtbare gedeelte wordt neergezet. Geluid hoef je namelijk niet te zien. Je ziet ook dat de component in het Components gedeelte verschijnt. Als je daarna teruggaat naar de "Blocks Editor" dan zie je dat bij de Screen blokken Sound1 is toegevoegd. Als je op Sound1 klikt, dan vind je diverse blokken die met het afspelen van geluiden te maken hebben.

opgave 4.5 Zorg dat het toegevoegde geluid afgespeeld wordt op het moment dat de speler op de mol klikt. Zorg dat je de naam van de toegevoegde component van Sound1 in

SoundGeraakt verandert. Je kunt de naam van een component veranderen door de component te selecteren in het Components gedeelte van het "Designer" scherm en op de Rename knop te drukken. Hint: Zorg dat je het geluidsbestand aan de component koppelt.

de mol op een timer laten bewegen Op het moment is het zo dat de mol zich alleen verplaatst als je hem een mep verkoopt. Het is leuker als de mol af en toe uit zichzelf ergens anders opduikt. Om dit voor elkaar te krijgen ga je een zogenaamde "timer" gebruiken.

- 17 -

Figuur 18: locatie van de Clock component

Een timer kun je krijgen via de Clock component in de Sensors categorie in het palette, zie Figuur 18.

opgave 4.6 Voeg een Clock component aan het spel toe en kijk goed waar deze neergezet wordt. Beredeneer waarom de Clock component hier neergezet wordt. Zorg dat je de naam van de toegevoegde component van Clock1 in

MolClock verandert.

Nadat je de Clock component hebt toegevoegd kun je de timer programmeren. Hiervoor moet je weer in de "Blocks Editor" zijn. Bij de Screen blokken is nu MolClock toegevoegd, zie Figuur 19. Klik op MolClock en je ziet bovenaan het when MolClock.Timer blok.

- 18 -

Figuur 19: locatie van de Clock1 blokken groep

opgave 4.7 Voeg een when MolClock.Timer blok toe en zorg dat de mol zich om de zoveel tijd uit zichzelf verplaatst. Hint: Kijk eens bij de Built-in blokken onder de categorie Procedures.

Als je niet weet hoe een timer werkt of je komt er niet helemaal uit, klik dan eens op de Help knop en kies de "Tutorials" link. Je kunt dan via de Resources knop de "documentation" link volgen. Helemaal onderaan de pagina vind je dan een link voor "Components Documentation". Als je die aanklikt kun je de documentatie van bijvoorbeeld de sensor componenten vinden. Naast de "Components Documentation" link vind je ook de "Language Blocks Documentation".

- 19 -

procedures Als het goed is heb je nu voordeel gehad van de procedure die we al voor je gemaakt hebben. In plaats van de code opnieuw te maken heb je als het goed is nu de procedure aangeroepen.

tellen van het aantal maal dat je mis slaat Naast het bijhouden hoe vaak een speler de mol raakt wil je ook graag bijhouden hoe vaak de speler mis slaat. In het Components gedeelte het "Designer" scherm staat een HorizontalArrangementGeraakt die ervoor zorgt dat je componenten horizontaal in je scherm kunt rangschikken. De componenten erin (LabelGeraaktTekst en LabelGeraaktTeller) komen overeen met "aantal geraakt" en "0" in het Viewer gedeelte.

opgave 4.8 Voeg een HorizontalArrangement component toe, waarin je de tekst "aantal gemist" en de bijbehorende teller zet. Breid bovendien je programma in de "Blocks Editor" uit zodat het aantal keer dat de speler misslaat wordt bijgehouden. Zorg dat je zinvolle namen gebruikt voor je componenten.

score toevoegen Het bijhouden van het aantal keer raak en mis slaan is leuk maar een score is nog leuker. Voor iedere keer dat een speler de mol raakt krijgt hij/zij 2 punten. Voor iedere keer dat de speler de mol mist verliest hij/zij een punt.

opgave 4.9 Voeg nog een HorizontalArrangement component toe aan je ontwerp waarin je de score laat zien. Breid bovendien je programma via de "Blocks Editor" uit zodat de score wordt bijgehouden. Zorg weer dat je zinvolle namen gebruikt voor je componenten.

- 20 -

de mol sneller laten bewegen bij hoge score Naarmate de tijd vordert, en hopelijk de score hoger wordt, blijft de uitdaging van het spel op dit moment gelijk. Het spel vereist dus helaas niet steeds meer van het reactievermogen van de speler maar dat kun je veranderen. Daarvoor moet je onder bepaalde voorwaarden de mol steeds sneller laten bewegen. Om dit voor elkaar te krijgen heb je een if-statement (instructie) nodig. Het blok voor het if-statement is het if-then blok. Het is het eerste blok bij de Built-in blokken in de categorie Control. Met dit blok kun je ook het if-then-else blok maken. Bij een if-then blok wordt er getest of een conditie waar of niet waar is (we noemen zo’n conditie ook wel een Booleaanse expressie). Als de conditie waar is wordt de code die binnen het if-statement staat wel uitgevoerd en anders wordt deze code overgeslagen. Bij een if-then-else wordt de code binnen het "else" gedeelte uitgevoerd als de conditie bij de if onwaar is.

opgave 4.10 Zorg ervoor dat voor elke 50 punten die de speler heeft de mol 50 milliseconden sneller beweegt. Houd rekening met een grens voor de snelheid. Hint: Als je de Clock1 component selecteert in het Components gedeelte van het "Designer" scherm, dan zie je in het Properties gedeelte een veld dat "TimerInterval" heet. Kun je iets vergelijkbaars vinden in de "Blocks Editor"?

conditioneel uitvoeren van code Het conditioneel uitvoeren van code gebeurt bij het programmeren vaak met if of if-else statements. Dit is voorlopig ook de enige manier in App Inventor 2. If-statements zijn belangrijk en essentieel bij het programmeren. Ze zorgen ervoor dat delen van het programma alleen onder bepaalde voorwaarden worden uitgevoerd. We noemen dit "program control" en het geeft gebruikers van onze applicatie de mogelijkheid om de flow van het programma te beïnvloeden.

- 21 -

testen op je telefoon Tot nu toe heb je de app enkel getest in de emulator. Leuker is natuurlijk om de app ook op je eigen telefoon te draaien, je kunt hem dan ook thuis laten zien! In de knoppenbalk kun je via de Build knop de "App (provide QR code for apk)" link vinden, zie Figuur 20. Als je op de link klikt en even wacht, dan krijg je na verloop van tijd (afhankelijk van de drukte bij de QR code generator kan dit enkele minuten duren) een venster met daarin een QR code, zie Figuur 21. Deze code kun je scannen met de camera van je telefoon. Hiervoor heb je een app nodig om QR codes te scannen. Deze kun je downloaden via de Play Store.

Figuur 20: de "App (provide QR code for apk)" link

Figuur 21: een QR code behorende bij een App Inventor 2 app

Na het openen van de QR code scanner, scan je de QR code met je camera. Richt de camera op de QR code op het scherm. De QR code scanner app leest de barcode en geeft je de optie de URL die hierin verstopt is te openen in de browser. Na het openen van de browser wordt de download van het APK bestand gestart. Na het downloaden open je het APK bestand. Wat er precies gebeurt is afhankelijk van je telefoon en de versie van Android. Waarschijnlijk krijg je eerst de melding dat de installatie is geblokkeerd. Sommige Android telefoons zijn standaard ingesteld dat ze enkel applicaties vanuit de Play Store kunnen installeren. Door "Onbekende bronnen" aan te vinken in het "Beveiliging" onderdeel van "Instellingen" kun

- 22 -

je dit toestaan. Nadat je dit hebt gedaan open je het APK bestand opnieuw en kun je het installeren. Na enkele ogenblikken is de applicatie geïnstalleerd en kun je hem runnen. De volgende keer dat je de applicatie via een QR code wilt installeren zal de telefoon vragen of je de applicatie wilt vervangen. Dit bevestig je door op OK te klikken en de applicatie vervolgens opnieuw te installeren.

bonus opgaven

bonus opgave 4.1 De achtergrond van het spel is op het moment saai wit. Voeg een achtergrond toe aan het spel om de boel wat op te fleuren. Tip: Kijk eens bij de "Properties" van de CanvasVeld component.

bonus opgave 4.2 Je kunt op dit moment nog niet afgaan bij het spel. Verander dit door de speler af te laten gaan wanneer zijn/haar score onder de 0 punten zakt.

Het afgaan in het spel kun je ook op een heel andere manier aanpakken. Je kunt de speler bij het begin van het spel een aantal levens geven en onder bepaalde omstandigheden laten verliezen. De speler is af wanneer hij/zij geen levens meer over heeft.

bonus opgave 4.3 Bouw het concept van levens in je spel. Om levens te verliezen voeg je nog een ander dier toe aan het spel, bijvoorbeeld een schattig konijntje of juist een gruwelijk monster. Laat het andere dier af en toe verschijnen in plaats van de mol en wanneer de speler het andere dier mept verliest hij/zij een leven. Tip: Laat het andere dier vaker verschijnen naarmate de speler een hogere score bereikt.

- 23 -

5. Schrandere Scholier In het vorige hoofdstuk heb je een leuk spel gemaakt, je kunt echter ook serieuze applicaties schrijven. Waarschijnlijk vraag je jezelf wel eens af welk cijfer je moet halen voor een toets om een 8 gemiddeld te blijven staan voor een vak. In dit hoofdstuk ga je hier een hulpmiddel voor ontwikkelen. Je zult de applicatie stap voor stap opbouwen. Je gaat verder met het gebruiken van het "Designer" scherm en je zult ook weer de "Blocks Editor" moeten gebruiken. In de "Blocks Editor" ga je ervoor zorgen dat de gebruiker cijfers kan invoeren waarmee je vervolgens kunt gaan rekenen. Ook hier raden we je aan om na iedere opgave waarin je het ontwerp of de code aanpast deze uit te testen op de emulator.

een nieuw project aanmaken Je begint met het aanmaken van een nieuw project. In Hoofdstuk 4 heb je een project aangemaakt door een bestaand project te uploaden. Dit keer begin je vanaf het begin. Als je nog niet in het "My Projects" scherm bent, ga hier dan nu naar toe door op de My Projects knop te klikken, zie Figuur 22.

Figuur 22: locatie van de My Projects knop

Klik vervolgens op de knop Start new project. Je krijgt dan de dialoog uit Figuur 23 te zien. Vul in de dialoog de naam van het project in, in dit geval ‘SchrandereScholier’. Als je dan op OK klikt, wordt het nieuwe project aangemaakt en schakelt de omgeving na een tijdje naar het "Designer" scherm waarin je nieuwe project te zien is. Op dit moment is er nog weinig te zien, want je project is leeg.

Figuur 23: de "Create new project" dialoog

- 24 -

gebruikersinterface Na het aanmaken van het project begin je met het ontwerpen van de gebruikersinterface. Voordat je hiermee aan de slag gaat is het verstandig nog een keer naar Figuur 8 te kijken. Klik ook nog eens door de categorieën in het palette van het "Designer" scherm. Nu kun je beginnen met het maken van de gebruikersinterface van je app. Je begint eenvoudig met het toevoegen van enkele label, textbox en knop (button) componenten. Deze componenten vind je in de User Interface categorie van het palette.

opgave 5.1 Voeg een Label component toe. Componenten worden automatisch uitgelijnd. Hierdoor komt het label linksboven te staan. Verander de tekst van het label naar "toets 1:". Om onze applicatie overzichtelijk te houden pas je ook de naam van het Label component aan. Hiervoor selecteer je het label in het Components gedeelte en gebruik je de knop Rename om de naam van het label te veranderen naar "lblToets1". Voeg een textbox toe om te zorgen dat er cijfers ingevoerd kunnen worden door de gebruiker. Verander de naam van de TextBox component naar "tbToets1". Herhaal het bovenstaande zodat je 3 toetsen in kunt voeren.

Je zou nu het volgende moeten zien in het Viewer gedeelte van het "Designer" scherm.

- 25 -

duidelijke naamgeving Geef componenten, variabelen en procedures altijd een duidelijke naam, dit maakt het programmeren en het lezen van je programma makkelijker.

Zodra de gebruiker de cijfers heeft ingevoerd wil je het cijfer kunnen uitrekenen dat de gebruiker moet halen voor de volgende toets om een 8 gemiddeld te blijven staan. De berekening ga je later programmeren, maar je gaat nu al wel een knop en twee labels toevoegen om het resultaat weer te geven.

opgave 5.2 Voeg een Button component toe. Verander de tekst van de knop naar "bereken". Verander ook de naam van de Button component naar "btnBereken". Voeg ook een HorizontalArrangement component toe met twee labels erin zodat je in het Viewer gedeelte van het "Designer" scherm het volgende ziet. Noem het eerste label lblToets4Tekst en het tweede label lblToets4Cijfer.

Zorg dat je de horizontal arrangement ook een zinvolle naam geeft!

- 26 -

Als het goed is heb je de opgaves op de emulator (of je telefoon) getest. Je hebt hopelijk gezien dat je al cijfers kunt invoeren, maar dat er niets gebeurt wanneer je op de knop drukt. Daar ga je nu iets aan doen!

rekenen Je gaat nu zorgen dat je app daadwerkelijk kan rekenen. Hiervoor moet je programmeren en dit doe je in de "Blocks Editor" zoals je in het vorige hoofdstuk ook hebt gedaan. Bij de vorige app was er al een stukje voorgeprogrammeerd. Nu is de "Blocks Editor" nog helemaal leeg. Aan de linker kant in het Blocks gedeelte staan weer de Built-in, Screen en Any component groepen. Bij de Screen groep zie je als het goed is bekende namen staan. Dit zijn de namen van de componenten die je in je "Designer" scherm gebruikt hebt, zie Figuur 24.

Figuur 24: de blokken uit de Screen groep

Voor elke component die je in je "Designer" scherm gezet hebt, vind je de blokken waarmee je het gedrag van die componenten kunt programmeren. Je wilt dat er gerekend gaat worden zodra er op de knop btnBereken geklikt wordt. Hier gebruikt je when btnBereken.Click blok voor, dit is het bovenste blok in de lijst. Wanneer er op de knop wordt gedrukt, dan wordt alle code die in het when btnBereken.Click blok staat uitgevoerd. Je gaat eerst de gegevens verzamelen waarmee je moet gaan rekenen. Die gegevens zijn de cijfers die de gebruiker invoert. Om die te verzamelen moet je tekst uit ieder textbox lezen. Om dat te doen vind je blokken bij iedere textbox component.

- 27 -

opgave 5.3 In deze opgave begin je makkelijk door eerst alle cijfers die de gebruiker ingevoerd heeft bij elkaar op te tellen. Om de uitkomst te laten zien moet je het resultaat van het optellen in de "Text" property component lblToets4Cijfer zetten. Je hebt hiervoor het set lblToets4Cijfer.Text blok tot je beschikking. Voeg dit blok toe. Vervolgens voeg je vanuit de Math categorie bij de Built-in blokken het + blok toe. Hopelijk is het je opgevallen dat dit blok ook een blauw wieltje heeft zoals het if-then blok. Hiermee kun je het aantal getallen dat je kunt optellen instellen. Zorg dat je met één blok 3 getallen op kunt tellen. Tel vervolgens de waardes van tbToets1.Text, tbToets2.Text en tbToets3.Text bij elkaar op.

Als het goed is heb je je app getest. Heb je gekeken wat er gebeurt als je in één textbox niet invult? Nu is het tijd om echt uit te rekenen welk cijfer je moet halen om een 8 gemiddeld te staan. Je mag ervan uitgaan dat alle cijfers evenveel meetellen bij het berekenen van het gemiddelde. Hoe kun je dan eenvoudig het cijfer berekenen dat de gebruiker nodig heeft om een 8 te staan? De som van alle vier cijfers moet samen minimaal 8 * 4 = 32 zijn. Het benodigde cijfer is dus gelijk aan 32 minus de som van de al behaalde cijfers. Stel je hebt al een 9 en twee keer een 7 gehaald. Dat levert in totaal 9+7+7 = 23 op. Je moet dan een 32 - 23 = 9 halen voor je volgende toets.

opgave 5.4 Implementeer de berekening die je zojuist gelezen hebt en zet het antwoord met set lblToets4Cijfer.Text in de lblToets4Cijfer component. Alle blokken die je nodig hebt vind je in de Math categorie bij de Built-in blokken.

- 28 -

Dit werkt al heel aardig, al zijn er nog wel wat tekortkomingen. Als je bijvoorbeeld maar 2 of al 4 cijfers hebt, dan werkt je app niet. Daar ga je nu iets aan doen.

het cijfer voor de vijfde toets Je gaat je app nu aanpassen zodat je 4 cijfers in kunt voeren en berekent wat het cijfer voor je vijfde toets moet zijn.

opgave 5.5 Zorg ervoor dat de gebruiker 4 cijfers in kan voeren en bereken wat het cijfer voor het vijfde toets moet zijn. BELANGRIJK: Kijk goed en noteer op welke plaatsen je een aanpassing hebt moeten maken. Dit gaat je helpen bij de volgende opgaven.

een willekeurig aantal cijfers Als het goed is weet je nu precies welke wijzigingen je moet maken om een nieuwe toets te voegen. Zoals gezegd weet je eigenlijk niet hoeveel cijfers de gebruiker van je app al heeft gehad. Zou je je app zo kunnen maken dat de gebruiker zelf kan bepalen hoeveel cijfers hij/zij gaat invoeren? Uiteraard is dit mogelijk! De makkelijkste oplossing zou zijn om de gebruiker nieuwe velden te laten toe voegen in de gebruikersinterface, maar dat kan helaas niet met App Inventor 2. Om het probleem toch te kunnen oplossen kun je gebruik maken van zogenaamde lijsten. Een lijst is niets anders dan een rijtje bij elkaar horende dingen. Een boodschappenlijst is een goed voorbeeld. Hierop staan onder of achter elkaar alle dingen die je mee moet nemen uit de winkel. Door een lijst te gebruiken, kun je het probleem oplossen. Je gaat dan één textbox gebruiken waarin de gebruiker achtereenvolgens alle cijfers invoert. Door na ieder cijfer op een knop te drukken worden de cijfers aan de lijst toegevoegd. Deze lijst kun laten zien en ook gebruiken om je berekening mee te doen. Dit ga je nu implementeren.

- 29 -

opgave 5.6 Je gaat beginnen met het aanpassen van de gebruikersinterface. Maak de interface na zoals je ziet in Figuur 25. In dit figuur zie je twee labels waarvan je later de tekst gaat aanpassen vanuit de "Blocks editor".

Figuur 25: de nieuwe gebruikersinterface

Denk ook nu aan een duidelijke naamgeving van de componenten.

Nu is het tijd om te gaan programmeren. Het werken met lijsten kan soms een uitdaging zijn. Probeer dus echt te snappen wat je doet.

opgave 5.7 Als je naar de code kijkt die er nog staat van eerder opgaves dan zie je dat er enkele blokken verdwenen zijn. Ook zou je nu een blok moeten hebben dat when btnToevoegen.Click heet. Voorheen heette dat blok when btnBereken.Click. Je ziet dus dat de omgeving naamsverandering automatisch doorvoert in alle delen van je app. Gooi alle code die in when btnToevoegen.Click staat weg, maar laat when btnToevoegen.Click zelf staan. Vervolgens ga je een lege lijst maken. De gebruiker heeft immers nog geen cijfers ingevoerd als de app start. De blokken voor lijsten vind je in de Lists categorie bij de Built-in blokken. Het blok dat je nodig hebt is create empty list.

- 30 -

Hopelijk snap je, dat je het create empty list blok niet zo op zichzelf kunt gebruiken. De linkerkant moet immers ergens in klikken. Dat is ook logisch, want je moet de lege lijst ergens in bewaren. Je hebt dus een variabele nodig. Je weet intussen hoe je variabelen moet maken, dus maak een variabele aan die cijfers heet en stop daar de lege lijst in. Vervolgens moet je een cijfer aan de lijst toevoegen elke keer dat er op de toevoegen knop wordt gedrukt. Dat regel je in het when btnToevoegen.Click blok. Probeer dit zelf te doen. Uiteindelijk zou je het volgende in de "Blocks Editor" moeten zien.

Als we dit hebben gedaan, dan moeten we de tekst van het label waarin we de cijfers tonen updaten. Hiervoor gebruik je de instructie die je ziet in de volgende afbeelding.

Dit is een mooi moment om je app uit te proberen. Schrijf op wat je opvalt bij het uitproberen.

Heb je geprobeerd op de knop te drukken als er niks in de textbox staat? Dat zijn dingen die je gebruiker per ongeluk zou kunnen doen. Wat gebeurt er dan met de lijst? Laten we er voorlopig vanuit gaan dat de gebruiker nooit iets fout doet en eerst de app volledig functioneel maken.

- 31 -

weer rekenen Laten we ons nog even niet bekommeren om de opmaak van onze app. We gaan eerst uitrekenen welk cijfer we voor de volgende toets moeten halen. De vorige methode om het te behalen cijfer uit te rekenen werkt nu natuurlijk niet meer. Je moet daarom een nieuwe methode bedenken. Omdat alle cijfers in een lijst staan, heb je een lus (loop) nodig om alle cijfers te bekijken en te gebruiken. De makkelijkste lus om hier te gebruiken is de for each item in list lus. Deze lus gaat alle items in de opgegeven lijst langs en voert voor elk van deze items een actie uit. In dit geval ga je dit gebruiken om alle cijfers in de lijst bij elkaar op te tellen. Natuurlijk moet je het resultaat van de optelling van alle cijfers ergens opslaan. Als het goed is weet je wat je daarvoor nodig hebt.

opgave 5.8 Zorg dat je in het when btnToevoegen.Click blok alle cijfers bij elkaar optelt en het resultaat bewaart. Denk eraan dat je voor de lus de juist initialisaties (variabelen een begin waarde geven) moet doen. Je moet ook weten hoeveel cijfers er in de lijst staan om te bepalen hoeveel punten je in totaal moet halen om een 8 gemiddeld te blijven staan. Hiervoor bestaat een handig blok genaamd length of list. Tot slot moet je de som van de ingevulde cijfers nog afhalen van het aantal punten dat je moet behalen en daar het resultaat weer van laten zien. Probeer het bovenstaande eerst zelf voor elkaar te krijgen. Als het niet lukt, kijk dan in Figuur 26 om te zien wat er in de "Blocks Editor" zou moeten staan.

- 32 -

Figuur 26: resultaat van opgave 5.8 in de "Blocks Editor"

globale versus lokale variabelen In de oplossing in Figuur 26 zie je dat er twee verschillende soorten variabelen zijn gebruikt. De variabele cijfers is een zogenaamde globale variabele. Dat wil zeggen dat de naam van de variabele overal in dit scherm van je app bekend is, maar niet in de hele app. Dus in het ene scherm kun je niet bij globale variabelen van een ander scherm. De variabele somVanCijfers is een zogenaamde lokale variabele. Deze kun je alleen gebruiken binnen het initialize local blok. Het is belangrijk om zoveel mogelijk met lokale variabelen te werken. Dit maakt je code overzichtelijker en voorkomt fouten als je variabelen met dezelfde naam in hetzelfde scherm wilt gebruiken.

handiger en mooier maken Je merkt dat je steeds de emulator moet resetten om opnieuw te testen. Dat ga je eerst fixen, want dat scheelt tijd bij het testen.

opgave 5.9 Voeg onderaan een knop toe in je "Designer" scherm. Als de gebruiker op deze knop drukt, dan moet alles zo ingesteld worden alsof de app net opgestart is. Je moet dus onder andere de lijst weer leegmaken, maar je moet nog meer doen.

- 33 -

Niet alleen de gebruikersinterface kan beter en mooier, maar ook de code zelf. Het is namelijk netter om het berekenen van het te behalen cijfer in een aparte procedure te zetten.

opgave 5.10 Zet de code voor het berekenen van het te behalen cijfer in een aparte procedure.

De inhoud van de textbox waarin steeds een cijfer ingevoerd wordt, houdt zijn waarde. Dat is onhandig en dat ga je dus repareren.

opgave 5.11 Zorg dat de inhoud van de textbox steeds gewist wordt als de gebruiker op de knop toevoegen drukt.

Als de gebruiker een fout maakt met invoeren dan werkt onze app niet meer. De gebruiker kan bijvoorbeeld per ongeluk twee keer op de toevoegen knop drukken, een letter in plaats van een cijfer invoeren of een komma gebruiken in plaats van een punt om decimalen te scheiden in het cijfer. Het is netjes om dat af te vangen, oftewel te zorgen dat we fouten van de gebruiker netjes afhandelen. Dat ga je nu doen.

opgave 5.12 Zorg dat je fouten van de gebruiker netjes afvangt. Hiervoor is het handig om het is a number? blok te gebruiken dat je helemaal onderaan vindt in de Math categorie bij de Built-in blokken. Zorg ook dat je in de gebruikersinterface iets toevoegt om fouten weer te geven en dat je de code voor de wis alles knop aanpast.

- 34 -

bonus opgaven Je hebt intussen al redelijk wat uitbreidingen gedaan op deze app en je hebt ook al redelijk wat ervaring met App Inventor 2. Hieronder staan nog een aantal extra opgaven die je kunt doen om meer te oefenen met de ontwikkelomgeving.

bonus opgave 5.1 De app ziet er op dit moment best saai uit, zorg ervoor dat de app er aantrekkelijker uit gaat zien.

bonus opgave 5.2 Je hebt er al voor gezorgd dat de gebruiker alleen getallen in mag voeren. Toch kan de gebruiker dat nog steeds fout doen. Het laagst mogelijke cijfer is namelijk een 1 en het hoogst mogelijke een 10. Toch kan de gebruiker best -3 of 12 invullen. Zorg ervoor dat dit niet meer kan.

bonus opgave 5.3 Een 8 gemiddeld is leuk, maar waarom geen 9? Laat de gebruiker zelf kiezen welk cijfer hij/zij gemiddeld wil staan.

bonus opgave 5.4 Niet alle toetsen tellen even zwaar, zorg ervoor dat de gebruiker het gewicht van een toets kan bepalen.

- 35 -

Nu komen er een tweetal moeilijkere opgaven. Voor deze opgaven heb je een file (een bestand) of een database nodig. Deze vind je in de Storage categorie van het palette in het "Designer" scherm.

bonus opgave 5.5 Elke keer als je de app opnieuw opstart ben je je cijfers kwijt. Zou het niet mooi zijn als de cijfers bewaard blijven? Zorg ervoor dat de cijfers worden bewaard bij het opnieuw opstarten van de app.

bonus opgave 5.6 Je kunt nu slechts voor één vak cijfers invoeren. Maak de app geschikt voor meerdere vakken.

- 36 -

6. Meteoor In dit hoofdstuk ga je zelf een eenvoudig spel maken met behulp van de Oriëntatie Sensor van je Android apparaat. Je hebt nu dus een fysiek apparaat nodig, anders kun je de programma's uit dit hoofdstuk niet testen. We helpen je in dit hoofdstuk om het spel stap voor stap op te bouwen. Je zult echter wel merken dat je in dit hoofdstuk minder gedetailleerde aanwijzingen krijgt en dus meer zelfstandig moet doen. Kom je ergens niet uit, blader dan terug naar één van de voorgaande hoofdstukken of ga eens zoeken op internet. Als je er echt niet uitkomt vraag dan hulp aan je leraar. De Oriëntatie Sensor geeft aan of het apparaat gekanteld wordt of niet. Allereerst ga je uitzoeken hoe deze sensor werkt. Je gaat experimenteren door het aansturen van een ImageSprite (zoals de mol in het "Mollen Meppen" spel). In dit spel is de ImageSprite een raket. Je bestuurt de raket door je telefoon naar links of rechts te kantelen. Als je door hebt hoe de Oriëntatie Sensor werkt ga je meteoren over het scherm laten bewegen. Vervolgens ga je detecteren of de raket geraakt wordt door een meteoor om te bepalen wanneer je af bent.

de oriëntatie sensor

opgave 6.1 Maak een nieuw project in App Inventor 2 en noem het "Meteoor".

Nadat je een project hebt aangemaakt ga je zichtbaar maken wat de toestand van de Oriëntatie Sensor is. Daarvoor gebruik je labels in het "Designer" scherm. In het Sensors palette vind je de OrientationSensor component. Net als de Clock component bij "Mollen Meppen" komt de OrientationSensor component ook bij de "Non-visible components" te staan. Tijdens het uitvoeren van het programma is deze sensor namelijk niet zichtbaar.

- 37 -

opgave 6.2 Sleep drie labels in het scherm. Zoals je intussen weet, moet je componenten meteen een duidelijke naam te geven. Noem je labels achtereenvolgens lblAzimuth, lblPitch en lblRoll. Sleep ook een OrientationSensor component in het scherm. Deze mag best

OrientationSensor1 blijven heten, omdat we toch maar één zo'n sensor nodig hebben.

Je "Designer" scherm zou er dan als volgt uit moeten zien.

Vervolgens ga je programmeren in de "Blocks Editor". De blokken van de Oriëntatie Sensor zou je intussen zelf moeten kunnen vinden. Het blok dat je gaat gebruiken heet when OrientationSensor1.OrientationChanged. Dit is een event (een gebeurtenis net als de timer die je bij "Mollen Meppen" hebt gebruikt) dat optreedt als je je Android apparaat kantelt. Als dit event optreedt, dan wordt de code die je in het when OrientationSensor1.OrientationChanged blok zet uitgevoerd.

- 38 -

opgave 6.3 Laat de waarde van de azimuth, pitch en roll van de Oriëntatie Sensor zien door in het when OrientationSensor1.OrientationChanged blok de juiste code te zetten. Het when OrientationSensor1.OrientationChanged blok heeft drie parameters waarmee je de juiste waardes uit kunt lezen. Deze waardes moet je in het juiste label zetten. Als het gelukt is, zet de app dan op je Android apparaat en kijk hoe de Oriëntatie Sensor reageert als je je apparaat beweegt. Hint: Je hebt stiekem al eerder gewerkt met een parameter bij "Mollen Meppen" toen je de touchedSprite van het when CanvasVeld.Touched blok gebruikte.

parameters en argumenten Een parameter is een speciale variabele van een procedure die je gebruikt om informatie door te geven aan die procedure. Parameters staan links bovenaan in het blok onder de naam van het blok. Een procedure kan meer dan één parameter hebben. In Figuur 27 zie je drie parameters, te weten azimuth, pitch en roll.

Figuur 27: voorbeeld van een blok met parameters

Een argument is een waarde die je meegeeft aan een parameter van een procedure als je die procedure aanroept. Procedures zijn uitgelegd bij "Mollen Meppen".

- 39 -

de raket Met wat fantasie kun je de app die je nu hebt al gebruiken als een soort waterpas, maar dat was niet de bedoeling. Je wilt een raket besturen en dat ga je nu doen met behulp van de Oriëntatie Sensor via de roll parameter. In het resources ZIP bestand vind je een aantal plaatjes van een raket. In de Drawing and Animation categorie van het palette in het "Designer" scherm vind je de ImageSprite component. Deze ga je gebruiken om de raket te maken. Een sprite moet in een canvas geplaatst worden om deze zichtbaar te maken en te kunnen besturen. De Canvas component vind je ook in de Drawing and Animation categorie van het palette in het "Designer" scherm.

opgave 6.4 Gooi de labels lblAzimuth en lblPitch in het "Designer" scherm weg, die heb je niet nodig bij het spel. Upload een plaatje van een raket via Media. Zet een canvas met een sprite daarin in je scherm en koppel het plaatje van de raket aan de sprite. Noem het canvas CanvasVeld en de sprite sprRaket. Zorg vervolgens dat het canvas een fatsoenlijke afmeting heeft in je scherm. Je kunt bij de "Width" en "Height" properties van het canvas een waarde in pixels instellen, maar dat is minder handig. Het is handiger om de waarde Fill parent te gebruiken. Bij de hoogte werkt dit alleen als het scherm niet kan scrollen. Dit is een property van de Screen1 component. Zet de sprite ongeveer in het midden neer. Eventueel kun je ook nog een achtergrondkleur voor je canvas kiezen.

wiskundig intermezzo Je kunt het spel ook maken zonder de wiskunde achter de werking van de Oriëntatie Sensor precies te snappen. Maar als je geïnteresseerd bent in de wiskunde bekijk deze paragraaf dan goed. Deze paragraaf mag je overslaan als je wilt.

- 40 -

Laten we zeggen dat als je de telefoon 45 graden naar links helt (roll = -45) de raket links op het scherm (de x-coördinaat is dan 0) moet komen te staan. Bij 45 graden naar rechts (roll = 45) moet de raket helemaal rechts op het scherm komen te staan. Rechts op het scherm wil zeggen dat de x-coördinaat bijna gelijk is aan de breedte van het Canvas. Deze breedte kun je opvragen via het CanvasVeld.Width blok. Je moet daar echter de breedte van de raket nog vanaf halen. Deze breedte kun je opvragen via het sprRaket.Width blok. Dit hebben we bij "Mollen Meppen" ook gebruikt om te zorgen dat de mol niet buiten het canvas springt. Ofwel, de maximale x-coördinaat voor de raket is gelijk aan: 𝐶𝑎𝑛𝑣𝑎𝑠𝑉𝑒𝑙𝑑. 𝑊𝑖𝑑𝑡ℎ − 𝑠𝑝𝑟𝑅𝑎𝑘𝑒𝑡. 𝑊𝑖𝑑𝑡ℎ De waardes van de minimale en maximale x-coördinaat noemen we raketmin en

raketmax. Hierbij is raketmin dus gelijk aan 0. Wat we willen is dat de raket vloeiend van de ene kant naar de andere kant kan bewegen en weer terug. Dit kan door de raket lineair te laten bewegen en daarvoor hebben we een lineaire functie nodig. Bij wiskunde heb je geleerd wat een lineaire functie is. De algemene schrijfwijze van een lineaire functie is: 𝑦 = 𝑎𝑥 + 𝑏 In ons geval nemen we voor x de waarde van de roll en voor y de positie van de raket op het scherm. Om een lineaire functie exact te bepalen heb je twee punten (x, y) nodig en gelukkig hebben we deze punten. Dit zijn namelijk (45, 0) en (-45,

raketmax). Je kunt nu de technieken die je bij wiskunde geleerd hebt gebruiken om de exacte lineaire functie te bepalen. Er zijn diverse methodes. We laten er hier één zien. De waardes -45 en 45 voor x liggen even ver van de waarde 0. Aangezien we met een lineaire functie bezig zijn weten we dan dat als we voor de waarde van y het gemiddelde van 0 en raketmax mogen nemen, oftewel raketmax/2. Daaruit mogen we concluderen dat geldt: 𝑏=

𝑟𝑎𝑘𝑒𝑡𝑚𝑎𝑥 2

Dat kunnen we invullen in onze algemene lineaire functie en dan krijgen we: 𝑦 = 𝑎𝑥 +

𝑟𝑎𝑘𝑒𝑡𝑚𝑎𝑥 2

- 41 -

Dit kunnen we omschrijven naar: 𝑎𝑥 = 𝑦 −

𝑟𝑎𝑘𝑒𝑡𝑚𝑎𝑥 2

Als onze y waarde gelijk is aan nul dan is onze x waarde gelijk aan 45. Ook dat kunnen we weer invullen en dan krijgen we: −45𝑎 = −

𝑟𝑎𝑘𝑒𝑡𝑚𝑎𝑥 2

En dat kunnen we vereenvoudigen tot: 𝑎=

𝑟𝑎𝑘𝑒𝑡𝑚𝑎𝑥 90

Onze exacte lineaire functie wordt dan: 𝑦=

𝑟𝑎𝑘𝑒𝑡𝑚𝑎𝑥 𝑟𝑎𝑘𝑒𝑡𝑚𝑎𝑥 𝑥+ 90 2

Dan kunnen we raketmax nog isoleren en krijgen: 𝑥 1 𝑦 = ( + ) × 𝑟𝑎𝑘𝑒𝑡𝑚𝑎𝑥 90 2 Oftewel de x-coördinaat van de raket is gelijk aan: (roll/90 + 0.5) x raketmax.

besturing Alle voorbereidingen zijn klaar. Nu ga je bepalen wat er moet gebeuren als je mobiel wordt gekanteld; dus als het when OrientationSensor1.OrientationChanged event optreedt. Hiervoor ga je de waarde van de roll parameter gebruiken. Door je mobiel te kantelen ga je de x-coördinaat van de raket beïnvloeden via de volgende formule: 𝑟𝑜𝑙𝑙 𝑥=( + 0.5) × 𝑟𝑎𝑘𝑒𝑡𝑚𝑎𝑥 90 Hierbij geld voor raketmax de volgende formule: 𝑟𝑎𝑘𝑒𝑡𝑚𝑎𝑥 = 𝐶𝑎𝑛𝑣𝑎𝑠𝑉𝑒𝑙𝑑. 𝑊𝑖𝑑𝑡ℎ − 𝑠𝑝𝑟𝑅𝑎𝑘𝑒𝑡. 𝑊𝑖𝑑𝑡ℎ

- 42 -

Deze formule hebben we in de vorige paragraaf afgeleid.

opgave 6.5 Voeg in het when OrientationSensor1.OrientationChanged blok de code toe om de raket te laten bewegen. Hiervoor moet je de uitkomst van de hiervoor gegeven functies in de "x" property van sprRaket zetten. Hint: Schrijf de formule op papier en zet haakjes zodat je goed ziet hoe je de berekening op moet bouwen. Het eerste blok dat je moet plaatsen is het x blok

obstakels Je hebt nu een raket gemaakt die je kunt besturen, je komt echter nog geen obstakels tegen op jouw weg door het heelal. Daar ga je nu verandering in brengen. Het is dan echter handiger als je raket onder in het canvas staat zodat je meer tijd hebt om te reageren. Om obstakels te maken gaan we een standaard component van App Inventor 2 gebruiken en wel de Ball component. Deze vind je in de Drawing and Animation categorie van het palette in het "Designer" scherm. De Ball component lijkt wat mogelijkheden betreft veel op een ImageSprite component. Je kunt het plaatje echter niet zelf uitkiezen.

tip Als je precies wilt weten wat het verschil is tussen een ImageSprite en een Ball component, dan kun je in het palette achter de component naam op het vraagteken klikken. Voor blokken in de "Blocks Editor" kun je help tekst krijgen als je met je muiswijzer op het blok blijft staan.

- 43 -

opgave 6.6 Zet een Ball component ergens bovenaan in het canvas. Geef deze component de naam bllMeteoor. Zet vervolgens de "Speed" property van bllMeteoor op 25 en kijk wat er gebeurt.

De Ball component heeft naast de "Speed" property nog twee interessante properties, namelijk "Interval" en "Heading". De "Interval" property staat waarschijnlijk op 100. Dat betekent dat elke 100 milliseconde (dus elke tiende seconde) bllMeteoor met de "Speed" wordt verplaatst. Als de beweging schokkerig overkomt kun je de waarde van de "Interval" property kleiner maken. Als het spel traag wordt dan kun je dit soms verhelpen door de "Interval" property van een de Ball componenten groter te maken.

opgave 6.7 Zet vervolgens de "Interval" property van bllMeteoor op 2000 en kijk wat er gebeurt.

De beweging is nu schokkerig en traag. Welke kant beweegt de meteoor op? Met behulp van de "Heading" property kun je aangeven welke kant de bal in moet bewegen. De "Heading" property is de hoek in graden. Zoek met behulp van de help uit wat je bij de "Heading" property in moet vullen om de bal naar beneden te laten bewegen in de richting van de raket.

opgave 6.8 Zet de "Heading" property van bllMeteoor op de juiste waarde. Maak de meteoor ook wat groter en zet de "Interval" property terug op 100.

meerdere meteoren Als de meteoor beneden is aangekomen blijft hij liggen. Je wilt eigenlijk dat de meteoor dan weer van boven het scherm binnenkomt. Misschien zelfs wel met een andere grootte of in een andere kleur. Ook hier heeft App Inventor 2 blokken voor. Het blok heet when bllMeteoor.EdgeReached. Dit event treedt op als de bal de on- 44 -

derkant van het scherm raakt. Je vindt het when bllMeteoor.EdgeReached bij de blokken van de bllMeteoor component. Als de meteoor beneden tegen de rand aan vliegt wil je dat de y-coördinaat weer 0 wordt, zodat de bal weer bovenaan begint. Het when bllMeteoor.EdgeReached blok heeft een parameter die edge heet. Hiermee kun je kijken tegen welke kant de meteoor gevlogen is. Aangezien de meteoor omlaag vliegt hoef je hier niet naar te kijken, je weet immers al dat hij tegen de onderkant botst.

opgave 6.9 Implementeer when bllMeteoor.EdgeReached zodanig dat de bal weer bovenaan het scherm begint nadat deze de onderkant heeft geraakt.

Het ziet er al bijna uit als een spel. Eén van de problemen is dat de meteoor steeds op dezelfde plek naar beneden komt. Dit kun je verhelpen door de x-coördinaat van de meteoor op een willekeurige waarde te zetten met het random integer blok.

opgave 6.10 Implementeer when bllMeteoor.EdgeReached zodanig dat de bal bovenaan het scherm op een willekeurige x-coördinaat begint. Let op: Zorg dat de meteoor niet buiten het scherm wordt gezet. Hint: De Ball component heeft geen width maar een radius.

botsing Nog een probleem is dat de meteoor niet met de raket botst. Dit kun je oplossen via het when bllMeteoor.CollidedWith blok. Dit event treedt op als de meteoor tegen een ander object botst. In de parameter other kun je zien met welk object de meteoor is gebotst. Aangezien je al weet dat het de raket is hoef je dit niet te controleren. Zodra het event optreedt weet je dat de meteoor op de raket gebotst is.

- 45 -

opgave 6.11 Implementeer when bllMeteoor.CollidedWith zodanig dat de bal op een willekeurige x-coördinaat bovenaan het scherm begint nadat deze op de raket gebotst is.

levens bijhouden Als de raket geraakt wordt door een meteoor moet er iets meer gebeuren dan alleen de meteoor opnieuw bovenin het scherm laten beginnen. Daarom ga je nu levens in het spel inbouwen.

opgave 6.12 Zorg dat boven het canvas, naast het label waarin je de roll waarde van je Android apparaat laat zien, drie harten komen te staan die levens voorstellen. Je vindt een plaatje van een hart in de resources bij deze module. Gebruik een horizontal arrangement om alles netjes naast elkaar te zetten. Zorg vervolgens dat er een leven verdwijnt als de raket door een meteoor geraakt wordt. Als het laatste leven verdwijnt moet het spel stoppen. Hint: Gebruik drie Image componenten. Deze kun je zichtbaar en onzichtbaar maken.

bonus opgaven Hieronder staan nog een aantal extra opgaven die je kunt doen om het spel leuker te maken.

bonus opgave 5.1 Hoewel in de ruimte geen geluid te horen is, wordt het spel wel leuker als je het geluid van een botsing toevoegt als de raket tegen een meteoor botst. Pas de code aan zodat het ook een geluid laat horen.

- 46 -

bonus opgave 5.2 Zorg dat als de meteoor opnieuw bovenin begint je de grootte van de meteoor op een willekeurige waarde tussen de 10 en 20 zet.

bonus opgave 5.3 Zorg dat als de meteoor opnieuw bovenin begint je de snelheid van de meteoor op een willekeurige waarde tussen de 20 en 40 zet.

bonus opgave 5.4 Zorg dat als de meteoor opnieuw bovenin begint je de kleur van de meteoor op een willekeurige kleur zet.

bonus opgave 5.5 Zorg dat de speler ook levens kan verdienen door het spel te spelen.

bonus opgave 5.6 Zorg dat het spel moeilijker wordt naarmate de speler het spel langer speelt.

- 47 -

7. Appendix A: projecten samenvoegen Vooraf: Zorg dat je van tevoren bepaalt wat je hoofdproject wordt. Laten we zeggen dat we werken met projecten MyProject1 en MyProject2. We nemen MyProject1 als hoofdproject. In MyProject1 zorg je, dat je je hoofdscherm hebt. Het is prima als het hoofdscherm de naam Screen1 heeft. MyProject1 is waar je straks de schermen en assets uit MyProject2 naar toe kopieert. Zorg dat je in MyProject2 het scherm Screen1 leeg laat of gebruikt om te testen, maar let daar niet op de opmaak, dat is zonde van de tijd. Zorg dat je van tevoren afspraken maakt over de namen van schermen (anders dan de hoofdschermen Screen1), je wilt geen dubbele namen in MyProject1 en MyProject2. Projecten samenvoegen is niet moeilijk, maar wel enigszins bewerkelijk. Allereerst moet je de projecten exporteren. Dat doe je als volgt. Ga naar het "My Projects" scherm, daar zie je een overzicht van je projecten. Selecteer het eerste project dat je gaat exporteren, laten we zeggen dat dit project MyProject1 is, aangezien dit het hoofdproject is. Kies "Export selected project (.aia) to my computer" onder de Projects menuoptie, zie volgende afbeelding.

Als het goed is heb je nu een bestand genaamd MyProject1.aia. Exporteer ook het tweede project waarin je gewerkt hebt, dus MyProject2. Als het goed is heb je nu ook een bestand genaamd MyProject2.aia.

- 48 -

Bestanden met extensie .aia zijn feitelijk ZIP bestanden. Je kunt hun bestandsextensie veranderen in .zip en vervolgens de inhoud van de bestanden bekijken. Nu kun je gaan samenvoegen. Pak het bestand van het hoofdproject, dus MyProject1.zip, uit naar een map. Dit ziet er als volgt uit (bij ai_vonk_f zal iets anders staan, namelijk je eigen login naam voor App Inventor 2).

Kopieer vervolgens, uit het MyProject2.zip bestand, de schermbestanden en assets die je wilt overzetten. Kopieer deze naar de overeenkomstige plaatsen in de folder waarin je het hoofdproject hebt uitgepakt. De structuur ziet er weer als volgt uit.

De schermbestanden staan in de MyProjects2 map en de assets staan in de assets map. Ieder scherm heeft 3 bestanden (.bky, .scm en .yail), zie de volgende afbeelding. Deze moet je alledrie kopiëren voor alle schermen, die je wilt overzetten naar je hoofdproject. Ook moet je alle assets kopiëren, die je wilt overzetten.

- 49 -

Tot slot moet je de inhoud van de map, waarin je het hoofdproject hebt uitgepakt, weer inpakken. Hernoem eerst je oude MyProject1.zip naar MyProject1.oud.aia. Pak de inhoud vervolgens in naar MyProject1.zip en hernoem dit bestand daarna naar MyProject1.aia. Tot slot moet je in het "My Projects" scherm je oude MyProject1 project verwijderen en de nieuwe MyProject1.aia importeren zoals je eerder met MollenMeppen.aia hebt gedaan. Als je verstandig bent, maak je eerst een kopie van het oude MyProject1 project. Dit kan via "Save project as ..." onder de Projects menuoptie.

- 50 -