Maak je eigen Apps Deel 1 (versie 1.5 NL 29-01-2012) door Serge de Beer Inleiding De opkomst van tablets, als de ipad, is razendsnel gegaan. Wie een tijdje zo n apparaat in handen heeft gehad, kan zich haast niet meer voorstellen ooit zonder geleefd te hebben. En inderdaad, een tablet geeft ongekende mogelijkheden voor presentatie en creatie. Daarnaast zijn er ook fysieke voordelen die er voor zorgen, dat het gebruik veel comfortabeler is dan dat van een vaste computer of laptop. Een enorme collectie van programma s, de zogenoemde Apps, zorgen er voor, dat voor vrijwel elke denkbare taak of interesse de gebruikers op hun wenken worden bediend. Maar de ene App is de andere niet en zeker voor minder algemene zaken zijn weinig Apps te vinden. En mochten deze er al zijn, dan is het zeldzaam dat deze in het Nederlands zijn ontwikkeld. In deze cursus leer je op een eenvoudige en snelle manier Apps ontwikkelen. Het programma, dat je hiervoor gaat gebruiken, heet GameSalad. Eigenlijk was dit programma ontwikkeld om games te maken (vandaar de naam), maar het is ook heel geschikt voor andere interactieve toepassingen. Het mooie van GameSalad is, dat je het ook kunt gebruiken zonder een uitgebreide programmeerkennis. In deze cursus leer je om een eenvoudige App te maken en deze beschikbaar te stellen voor eindgebruikers. Beperkingen van GameSalad Natuurlijk heeft de eenvoud van GameSalad ook een keerzijde. Dit programma is meer geschikt voor het maken van interactieve grafische Apps en minder voor administratieve Apps. Hierbij komt al snel "echt" programmeren kijken. Momenteel is er bijvoorbeeld nog geen ios-toetsenbord (het ingebouwde toetsenbord op de iphone of ipad) beschikbaar. Ook is het niet mogelijk om videofragmenten toe te voegen. Overigens is GameSalad volop in ontwikkeling. Er worden steeds meer opties toegevoegd. Hoe deze cursus werkt Het zal je opvallen dat ik in het lesmateriaal heel weinig theorie behandel. Dat doe ik bewust. Tijdens het werken met de verschillende onderdelen zul je merken, dat de theorie steeds in kleine porties wordt duidelijk gemaakt. Misschien is het even wennen, maar ik heb ervaren, dat dit het leren enorm versnelt en het meer plezier geeft om de cursus te volgen. 2012 - Serge de Beer 1 van 25 apps@learningtour.nl
Alle losse onderdelen in de cursus heb ik benoemd als zogenoemde LearningPoints. Deze vind je terug in de projecten in Personal Learning Program, die je krijgt bij elk deel van de cursus. Hiermee kun je goed bijhouden wat je al weet en wat je nog moet leren. Deel 1 behandelt de volgende LearningPoints: Installeren van GameSalad GameSalad instellen op het juiste formaat Je project opslaan Scènes toevoegen aan een App Instellen van de achtergrondkleur Een Actor toevoegen De kleur van een Actor veranderen Tekst in een Actor zetten Een Actor plaatsen in een scene De App previewen Een Actor vergroten en verkleinen Wisselen van scene Foto s toevoegen Een Actor (bijna) transparant maken Opdracht bij deel 1: de "foto met uitleg-app" Studiedruk Om goed te worden in het programmeren van Apps zul je het vooral heel veel moeten doen. Een relatief klein deel van de studietijd gaat op aan het bestuderen van het lesmateriaal. Over deel 1 zal je ongeveer één tot twee uur doen. Het maken van de grote opdracht bij elk deel zal je de meeste tijd kosten. Vooral als je de opdracht echt verzorgd wilt uitvoeren, zal dit op ongeveer 8 tot 12 uur uitkomen. Het idee is, dat je ongeveer op een studiedruk van 3 uur per week uitkomt. In totaal bestaat de cursus uit 6 delen. Elke maand ontvang je een nieuw deel. Elk deel bestaat uit ongeveer 20 tot 25 pagina's. De cursus duurt bewust een halfjaar. Hierdoor kun je jezelf goed ontwikkelen. Het geeft voldoende tijd om ook eigen projecten te bedenken en uit te voeren. We gaan aan de slag. Veel succes! 2012 - Serge de Beer 2 van 25 apps@learningtour.nl
LearningPoint 1.1 - Installeren van GameSalad GameSalad is uitsluitend geschikt voor Apple-computers. Beschik je niet over een imac of MacBook, dan kun je niet met dit programma werken. Maar omdat je je ongetwijfeld goed hebt voorbereid op deze cursus kan ik er vanuit gaan, dat je nu in de buurt bent van de juiste computer. We gaan aan de slag! 1. Ga naar www.gamesalad.com 2. Klik in de menu balk op 'Creator', vervolgens rechtsboven op 'Download' en kies 'Creator'. De download wordt nu gestart. 2012 - Serge de Beer 3 van 25 apps@learningtour.nl
3. De installatieprocedure start automatisch. Je ziet gelijk het scherm met vragen over het verdere proces. Klik op 'Agree'. 4. Sleep in het scherm, dat dan in beeld komt, het icoon van 'GameSalad' naar het icoon 'Applications' en laat de muisknop los. 5. In de map 'Programma s' (of 'Applications' als je de Engelse versie gebruikt) staat nu een icoon van GameSalad. 2012 - Serge de Beer 4 van 25 apps@learningtour.nl
Dit programma is nog niet actief. 'Dubbelklik' nu op het icoon. 6. Klik op de knop 'Open' om GameSalad te starten. GameSalad is nu geïnstalleerd en gestart. 2012 - Serge de Beer 5 van 25 apps@learningtour.nl
LearningPoint 1.2 - GameSalad instellen op het juiste formaat Het is zover; je gaat je eerste App maken. Verwacht er nog niet te veel van; we beginnen eenvoudig. Ik ga er vanuit, dat je GameSalad nog open hebt staan, zo niet: start deze dan eerst. Je ziet een aantal voorbeeldprojecten. 1. Dubbelklik op 'My Great Project'. Dit is een volledig leeg project. 2. Je ziet nu het eerste scherm van GameSalad. Ik vertel je nog niet, waar alle knoppen voor dienen; deze komen we vanzelf tegen gedurende cursus (mits ze van belang zijn). 2012 - Serge de Beer 6 van 25 apps@learningtour.nl
In dit voorbeeld maak je een App voor de ipad in landscape orientation. Dat wil zeggen, dat het scherm "liggend" is. Houd je de ipad rechtop, dan spreek je van portrait, ofwel de "portret-stand". Klik nu onder 'Platform' op de keuzelijst en kies 'ipad Landscape'. GameSalad vraagt dan of je zeker weet, dat je de resolutie wilt aanpassen. Omdat we nog niks hebben gemaakt, klik je op 'OK'. 3. Klik op de knop 'Scenes' en kies 'Intial scene' om in de eerste Scene van je App te komen. GameSalad maakt gebruik van scènes om de App op te bouwen, net als wordt gedaan in een speelfilm. Maar je kunt dit het best vergelijken met verschillende pagina's, zoals je die bijvoorbeeld gebruikt bij PowerPoint of een website. 2012 - Serge de Beer 7 van 25 apps@learningtour.nl
In de volgende onderdelen gaan we door met deze scene, laat GameSalad dus open staan. LearningPoint 1.3 - Een project opslaan Sommige mensen maken er een gewoonte van om eerst lange tijd te werken en dan pas hun bestand op te slaan. Ik denk, dat dat de meest gevaarlijke methode is om gegevens kwijt te raken. Je gaat nu eerst je project opslaan. 1. Klik in het menu op 'File, Save As'. 2. Kies een map waar je je projecten in wilt opslaan. Maak bij voorkeur per project een map, zodat je daar straks ook foto's en dergelijke kunt opslaan. 2012 - Serge de Beer 8 van 25 apps@learningtour.nl
3. Geef het bestand de naam "Mijn eerste App.gameproj" en druk op de knop 'Save'. Je project is nu opgeslagen. 2012 - Serge de Beer 9 van 25 apps@learningtour.nl
LearningPoint 1.4 - Een scene toevoegen Onze eerste App zal bestaan uit twee scènes. In plaats van scene kun je ook "schermen" of "Pagina's" zeggen. Je kunt een scene op elk gewenst moment toevoegen aan je App. 1. Klik linksonder op de 'knop met het plusteken'. Je ziet de scene nu direct in beeld verschijnen. Met behulp van de knop 'Scene' kun je wisselen tussen de verschillende scenes. 2012 - Serge de Beer 10 van 25 apps@learningtour.nl
LearningPoint 1.5 - De achtergrondkleur aanpassen Standaard heeft een scene een zwarte achtergrond. Deze achtergrond ga je aanpassen naar wit. 1. Dubbelklik op 'Initial scene'. Je komt nu in een ander scherm, waar je de gekozen scene kunt bewerken. 2. Klik op de knop 'Scene'. 3. Klik op het 'Zwarte vlakje' rechts naast 'Color'. Een menu klapt uit. 2012 - Serge de Beer 11 van 25 apps@learningtour.nl
4. Schuif de 'schuif' rechts naast de cirkel helemaal naar boven. 5. Sluit het venster 'Colors' weer met het 'knopje linksboven'. De achtergrond van de scene is nu wit. 2012 - Serge de Beer 12 van 25 apps@learningtour.nl
LearningPoint 1.6 - Een Actor toevoegen Een van de meest belangrijke vaardigheden die je nodig hebt om een App te kunnen maken, is het toevoegen van een Actor. Actors vormen samen de App. Een Actor kan van alles zijn. Een knop, een afbeelding of een tekst. 1. Klik bij het 'Inspector-scherm' op 'Actors'. 2. Klik op het '+' symbool. Je hebt nu een Actor toegevoegd aan het project. 2012 - Serge de Beer 13 van 25 apps@learningtour.nl
LearningPoint 1.7 - De kleur van een Actor veranderen Om een Actor een beetje te laten opvallen, gaan we eerst de kleur veranderen. 1. Dubbelklik op 'Actor 1'. 2. Klik op het 'witte vlakje', rechts naast 'Color'. 3. Schuif de 'middelste punt' in de cirkel naar lichtblauw. 4. Sluit het venster 'Colors' weer met het 'knopje linksboven'. De actor is nu lichtblauw geworden. 2012 - Serge de Beer 14 van 25 apps@learningtour.nl
LearningPoint 1.8 - Een tekst in een Actor plaatsen In veel educatieve Apps wil je teksten in beeld brengen om zaken te verduidelijken. Om dit te kunnen doen, moeten we aan de Actor Behaviors gaan toevoegen. Behaviors zijn gedragingen, die de Actor iets kunnen laten doen. Dit kun je in GameSalad op de volgende manier doen. Zorg, dat je nog in hetzelfde scherm staat, als waar je onder 1.6 bent gebleven! 1. Sleep de Behavior 'Display Text' naar het scherm rechts. 2. Verander de standaardtekst naar "Dit is een test.". 3. Klik op het vakje naast 'Color' en verander de tekstkleur naar 'zwart' (Color in GameSalad werkt op alle plekken hetzelfde). Bevestigen is niet nodig. De tekst wordt straks pas weergegeven. Je hebt nu een Behavior toegevoegd aan de 'Actor 1'. Deze Actor ga je plaatsen in de eerste scene. 2012 - Serge de Beer 15 van 25 apps@learningtour.nl
Uitleg: Waarom je de tekst nog niet kunt zien In GameSalad wordt een tekst pas weergegeven op het moment dat het programma wordt uitgevoerd. Dit in tegenstelling tot sommige andere visuele programmeeromgevingen. Hierdoor is het soms lastig om te beoordelen of een tekst zal passen. Wellicht wordt dit in een latere versie van GameSalad nog verbeterd. Onder het volgende LearningPoint ga je zien hoe de tekst kan worden weergegeven. De uiteindelijke omvang van de Actor kun je bepalen door te wisselen tussen de preview-modus en de ontwikkel-modus. LearningPoint 1.9 - Een Actor in een scene plaatsen Actors in GameSalad doen nog niks totdat je ze in een scene plaatst. Je kunt Actors in meerdere scènes gebruiken. 1. Zorg dat de 'Inspector' op 'Actors' staat (gebruik eventueel weer de knop 'Back'). 2. Sleep 'Actor 1' nu naar rechts op de 'Initial Scene' (de eerste scene van de App). De eerste Actor staat nu in de scene. 2012 - Serge de Beer 16 van 25 apps@learningtour.nl
LearningPoint 1.10 - Preview van de App Natuurlijk wil je ook graag zien hoe je App er straks uit gaat zien op het scherm. Dat is in GameSalad heel eenvoudig. 1. Zorg, dat je in de scene staat die je wilt previewen. 2. Klik op de knop 'Preview'. 3. Bekijk in het Preview scherm of de Actor goed is geplaatst. 4. Klik op de de knop 'Back' om weer terug te gaan naar het scherm, waar je kunt bewerken. Je ziet, dat de tekst buiten de Actor valt. Om dit te verbeteren, moet je eerst leren hoe je de Actor kunt vergroten en verkleinen. 2012 - Serge de Beer 17 van 25 apps@learningtour.nl
LearningPoint 1.11 - Een Actor vergroten en verkleinen Soms heb je een Actor nodig die beeldvullende of soms juist een stipje op het scherm vormen. Actors kunnen eenvoudig vergroot en verkleind worden. 1. Klik in de 'Initial scene' op de 'Actor', zodat er punten om heen komen te staan, die je met de muis kunt vastpakken. 2. Gebruik de muis om het rechter rondje in het midden op te pakken en maak de Actor breder. 3. Klik op de knop 'Preview' om te testen of de tekst past. 2012 - Serge de Beer 18 van 25 apps@learningtour.nl
LearningPoint 1.12 - Wisselen van scene Voor we verder gaan met de instructie eerst een oefening, waarbij je gebruik maakt van wat je in het voorafgaande hebt geleerd. Oefening 1 1. Plaats in de 'Initial scene' (de startscene) een Actor met als opschrift: "Naar het volgende scherm >". 2. Pas de kleur van de Actor naar eigen smaak aan. 3. Plaats op 'Scene 1' een Actor met het opschrift "< Terug". 4. Pas ook de kleur van deze Actor naar eigen smaak aan. De 'Initial scene' (in Preview-modus) ziet er dan ongeveer als volgt uit: En 'Scene 1' zo: Einde oefening 1 2012 - Serge de Beer 19 van 25 apps@learningtour.nl
Instructie: wisselen van scene 1. Ga naar de 'Initial scene'. 2. Dubbelklik op 'Actor 2'. 3. Klik op 'Create Rule'. Er komt nu een Rule in het scherm te staan. Rules maken het mogelijk om een Bahavior pas uit te voeren als er aan een bepaalde voorwaarde is voldaan. In dit geval de voorwaarde, dat er op wordt geklikt of getikt. 4. Verander in de voorwaarde 'Mouse button' in 'Touch'. 2012 - Serge de Beer 20 van 25 apps@learningtour.nl
5. Voeg de Behavior 'Change Scene' in door deze te slepen naar 'Drag your behaviors here'. 6. Zet de waarde bij 'Go to Scene:' op 'Scene 1'. Als je nu in de Preview-modus op 'Actor 2' klikt, kom je terug in 'Scene 1'. Oefening 2 1. Laat 'Actor 1' in 'Scene 1' verwijzen naar de 'Initial scene'. Einde oefening 2 2012 - Serge de Beer 21 van 25 apps@learningtour.nl
LearningPoint 1.13 - Foto's toevoegen aan een scene Zoals je hebt gezien, is het mogelijk om een rechthoek in te voegen in een scene. Het beeld van je App wordt echter veel interessanter, wanneer je foto's of andere afbeeldingen kunt toevoegen. 1. Klik bij 'Library' op de knop 'Images'. 2. Sleep vanuit de 'Finder' een afbeelding in het scherm onder 'Images'. 3. Sleep de afbeelding vanuit het scherm 'Images' naar 'Scene 1'. Als een afbeelding te groot is voor gebruik in GameSalad zal het programma zelf aanbieden om de afbeelding kleiner te maken. Een foto aanpassen aan de scene gaat net zo als het aanpassen van een Actor. 2012 - Serge de Beer 22 van 25 apps@learningtour.nl
LearningPoint 1.14 - Een Actor (bijna) transparant maken Om gebruikers te laten klikken op een bepaald onderdeel kan het handig zijn om een Actor transparant te maken. Dit gaan als volgt. 1. Plaats een nieuwe Actor in de 'Scene 1'. Linksonder op de foto. 2. Dubbelklik op deze 'Actor' en klik op de knop 'Create Rule'. 3. Verander de optie 'Mouse button' in 'Touch'. 4. Plaats de Behavior 'Change Scene' in de 'Rule'. (deze stap is alleen nodig om te testen of de transparante Actor werkt). 5. Vouw het menu 'Color' onder 'Attributes' uit. 2012 - Serge de Beer 23 van 25 apps@learningtour.nl
6. Verander de waarde achter 'Alpha' in "0". Als je nu op 'Preview' klikt en naar 'Scene 1' gaat, zul je zien dat, wanneer je linksonder op de foto klikt, je naar de 'Initial Scene' gaat. 2012 - Serge de Beer 24 van 25 apps@learningtour.nl
Opdracht bij deel 1 Foto met uitleg-app. Als afsluitende oefening voor Deel 1 moet je een App bouwen, die gebruik maakt van verschillende schermen. Omschrijving van de App: Wanneer de App wordt geopend, zie je een foto. Op de foto zijn vier verschillende elementen te zien (bijvoorbeeld gezichten, groenten of onderdelen van een apparaat). Wanneer op zo'n element wordt "getikt", kom je in een andere scene die uitleg geeft over dat element. Dit is het Programma van Eisen: 1. De App bevat vijf scene's (schermen). 2. Vanuit de "uitleg-schermen" moet je weer terug kunnen naar het hoofdscherm. 3. In het eerste scherm staat wat de bedoeling is. 4. In elk uitleg-scherm zijn teksten verwerkt. Je kunt deze opdracht (alleen het.gameproj bestand) insturen per e-mail naar: apps@learningtour.nl met als onderwerp: Cursus Maak je eigen Apps, Opdracht 1. Je krijgt dan een beoordeling van de opdracht. Copyright 2011, LearningTour, Serge de Beer Alle rechten voorbehouden. Niets uit deze uitgave mag worden verveelvoudigd, opgeslagen in een geautomatiseerd gegevensbestand of openbaar gemaakt, in enige vorm of op enige wijze, hetzij elektronisch, mechanisch, door fotokopieën, opnamen of op enige andere manier, zonder voorafgaande schriftelijke toestemming van de uitgever. 2012 - Serge de Beer 25 van 25 apps@learningtour.nl