Misschien had je verwacht aan het einde van deze DevTutorial al een aardig functionerende app te kunnen maken. Dat dit niet het geval is heeft te maken met het doel dat ik met deze DevTutorials heb: Toen ik op mijn 13e begon met Java en mijn eerste game maakte (een platformer) was het voor mij erg veel zoekwerk om allerlei verschillende benodigde tutorials bij elkaar te zoeken en ze in het Engels te begrijpen. Ik dacht er niet echt aan om boeken te kopen, daar had ik immers het geld niet voor over. Dingen die ik probeerde werkte bij de eerste poging vaak niet en ik was vervolgens lang aan het debuggen (fouten opsporen) en op het internet aan het zoeken om mijn code werkend te krijgen. Verder gingen veel tutorials ervan uitdat de lezer al programmeer ervaring had wat een soort drempel opwierp. Ik vond dat uitzoeken leuk om te doen en heb daarvan veel geleerd, al kon dit veel sneller: Ik schrijf deze DevTutorials zoals ik hem graag was tegengekomen wanneer ik net zou zijn begonnen met programmeren. Dit heb ik steeds in mijn achterhoofd gehouden toen ik de DevTutorials aan het schrijven was. Dit heeft er voor gezorgd dat ik af en toe na heb nagedacht over wat voor beginnersfouten er gemaakt kunnen worden en de lezer (jij dus:)) hier over waarschuw of hem vraag iets desnoods meerdere keren te lezen. Soms lees je namelijk vrij gemakkelijk over belangrijke zinnen heen en kan je de rest van de tekst dan minder goed begrijpen. Verder heb ik, als ik dacht dat er een ingewikkeld onderwerp wordt behandeld voor de beginner, de tijd genomen om dit uit te leggen, vaak op meerdere manieren (want anders is nog steeds veel voor je onduidelijk). Ook gebruik ik hierdoor een schrijftaal die op meer ervaren programmeurs (van andere talen/frameworks) een beetje betuttelend kan overkomen. Wanneer ik nieuwe concepten uitgelegd moeten worden heb ik het vaak expres simpel gehouden waardoor ik niet alle kanten ervan belicht (bijvoorbeeld in DevTutorial 2: een method is een verzameling van instructies met een naam, in plaats van een routine relatief ten opzichte van de parameters en de staat van een object die wordt bijgehouden in zijn properties...etcetera). Hopelijk storen jullie je hier niet teveel aan, en vanaf ongeveer DevTutorial 4 is dit steeds minder aanwezig.
 | Let op: Door deze DevTutorials hoop ik dat je snel en nuttig leert in Android te programmeren. Wat je verwachtingen betreft: verkijk je er niet op, ook mét deze DevTutorials staat er je na deze DevTutorials (en soms tijdens) nog veel uitzoek werk voor je klaar waar je geduld voor nodig hebt en je zeker niet moet onderschatten. Laat dit je er niet van weerhouden hier met plezier mee bezig te gaan:) Als je ergens tegen aanloopt kan je voor deze DevTutorial op deze plek in het forum terecht: http://www.androidworld.nl/forum/android-development/22936-devtutorial-1-helpthread-ontwikkelen-voor-android-benodigde-tools.html. |
Ik hoop dat doordat ik het op deze manier aanpak je aan het einde een aardige basis hebt om apps te maken die een klein stapje verder zijn dan de basic apps. Door iets geavanceerdere apps te behandelen in de laatste DevTutorials hoop ik dat wanneer je deze allemaal hebt doorgewerkt je aardig je weg kan vinden in Android Development. Er staan namelijk nog zeeën aan Android Programmeerwerk klaar voor ons developers:).
Over Wouter Vegter
Moop.Me heeft apps ontwikkeld voor onder andere Paypal, Rode Kruis, ProRail, Intermediair, Vebego, Booking.com en GVB Amsterdam. Twee producten van Moop.Me hebben in 2010 een spin award nominatie gekregen en verder hebben ze in 2009 de tweede plaats behaald in de Google Developers Challenge met de app iNap.
Wat gaan we doen
Oke, we kunnen nu beginnen. In deze DevTutorial leer je de volgende dingen:
Wat heb je nodig
| De benodige software wordt in dit deel kort beschreven. Daarna wordt per besturingssysteem (Windows, Ubuntu en Max OS X) stap voor stap beschreven hoe je deze moet installeren (naar welke links je moet gaan, waar je moet klikken, etcetera). Let erop dat je eerst de JDK installeert, daarna pas Eclipse, daarna pas de Android SDK en daarna pas de ADT. |
Om in Android te kunnen programmeren heb je de volgende software nodig: JDK 5 of 6: Java Development Kit versie 5 of 6. Bevat bestanden en kleine programmaatjes (tools) die je nodig hebt om Java-code te schrijven, te verwerken en uit te voeren. Dit zijn onder andere programma's om java-broncode (platte tekst zonder opmaak, denk bijvoorbeeld aan tekst zoals je die invoert in kladblok of notepad) om te zetten naar Java-bytecode (enen en nullen) en deze beide soorten bestanden te bewerken. Dit is meer omvattend dan de JRE, wat staat voor Java Runtime Environment: dit is de software die je nodig hebt om enkel Java-programma's uit te kunnen voeren. JRE wordt geleverd bij de JDK. Het installeren van alleen de JRE is niet voldoende. Eclipse IDE: Eclipse Integrated Development Environment. Dit is het programma dat je gebruikt om de verschillende bestanden die horen bij een Java-programma te organiseren en aan te passen. Android SDK: Android Software Development Kit. Je kan Android het beste zien als een op zichzelf staande variant van Java (overigens kan je erg veel bestaande Java-code gebruiken in je Android-apps, de technische details hiervoor bewaren we voor een andere tutorial). Om voor Android te programmeren heb je een pakket van bestanden nodig die het scherm, de processor, geluid en andere hardware van een Androidapparaat (bijvoorbeeld smartphone of tablet) aan kunnen sturen via Java. De manier hoe die bepaalde bestanden aangesproken worden - via hoofdzakelijk Java-broncode en XML die de programmeur intypt - wordt programmeren voor Android genoemd. Deze Androidspecifieke bestanden zitten in de de Android SDK. Verder bevat de Android SDK tools die je het programmeren voor Android vergemakkelijken zoals een emulator en ADB (Android Debug Bridge): een tool die je computer met een Androidapparaat verbindt tijdens onder andere het testen van apps. ADT: Android Development Tools. Een plugin voor Eclipse die de bestanden en tools van de Android SDK verwerkt in de schermen, knoppen en menu's in Eclipse.
| De handleiding is geschreven om stap voor stap gevolgd te worden. Voordat je een opdracht uitvoert, wil ik van je vragen de opdracht die erna komt al even door te lezen. Anders start je onbedoeld schermen of programma's op en daarmee pas je instellingen aan die niet passen in deze handleiding. Het is niet de bedoeling dat als je bijvoorbeeld een zip-bestand uitpakt je al vanuit jezelf het programma opstart wat er net is uitgepakt. Ik weet dat dit misschien een beetje betuttelend overkomt, maar met het installeren van deze programma's is het belangrijk dat je alle instellingen precies op elkaar afstemt: dat gaat het beste als je de stappen die hieronder precies volgt en bij elke opdracht al een opdracht "vooruit" leest. Verder kom je in deze (en de volgende) DevTutorial(s) een aantal mini-screenshots tegen. Als je hier op klikt, kun je meer uitleg over het desbetreffende onderwerp lezen. |
| In de stappen hieronder moet je een map kiezen waarin je Eclipse en de Android SDK gaat installeren. Er zit een fout in de Android SDK die ervoor zorgt dat je de SDK niet mag uitpakken/installeren in een map met spaties, of waarvan de namen van de hoger gelegen mappen een spatie bevatten. Stel dat je bijvoorbeeld de Android SDK naar de volgende map uitpakt: C:\Android programmeren\android-sdk-windows\ dan krijg je een fout omdat de naam van de map "Android programmeren" een spatie bevat. Zorg er dus voor dat er geen spaties in een van de mapnamen zit. |
Installatie in Windows
Deze handleiding voor Windows gaat uit van Windows 7, maar werkt in de meeste gevallen ook voor Windows Vista en Windows XP.
Installatie JDK
Installatie Eclipse
Installatie Android SDK
| Onthoud de locatie waarnaar je de bestanden uitpakt(!), deze heb je nodig bij het installeren van ADT. |
Wanneer je Eclipse en de Android SDK in C:\Android\ hebt uitgepakt, dan ziet deze map er als volgt uit: 
. De beide .zip bestanden kan je trouwens nu verwijderen, je hebt ze niet meer nodig.
Installatie ADT
Installatie in Ubuntu
Deze handleiding gaat uit van Ubuntu 10.10 maar werkt ook op de meeste andere Ubuntu versies.
| Wanneer je de handleiding voor Ubuntu vergelijkt met die voor Windows, valt je op dat er meer screenshots bij Windows staan. Omdat de handleidingen op veel plekken erg op elkaar lijken heb ik minder screenshots bij de Ubuntu handleiding neergezet. Als je toch extra hints wil tijdens de installatie in Ubuntu raad ik je aan ook de handleiding voor Windows te lezen. |
Installatie JDK
Installatie Eclipse
Installatie Android SDK
| Onthoud de locatie waarnaar je de bestanden uitpakt(!), deze heb je nodig bij het installeren van ADT. |
Wanneer je Eclipse en de Android SDK in "/home/je-gebruikersnaam/android" hebt uitgepakt, dan kan deze map er als volgt uit zien: 
Installatie ADT
De installatie van de ADT in Ubuntu gaat op dezelfde manier als in Windows. Scroll dus s.v.p. omhoog en gebruik de Installatiehandleiding van ADT voor Windows om ADT te installeren op Ubuntu. Een klein verschil is de directory die je in moet vullen bij stap 10 ("Nu moet je de locatie van de map gebr...."). Als je, net zoals ik, alles hebt uitgepakt naar de directory "/home/je-gebruikersnaam/android" dan moet je deze locatie invullen: "/home/woutervegter/android/android-sdk-linux_86". Hetzelfde geldt voor het kiezen van een locatie voor je workspace, ik raad je aan deze te zetten op "/home/woutervegter/android/workspace" (Vergeet uiteraard niet mijn gebruikersnaam te vervangen door de jouwe.)
Installatie in Mac OS X
Deze handleiding gaat ervan uit dat je Max OS X versie 10.5 gebruikt. Is dit niet het geval, doe dan een update van je besturingssysteem.
| Wanneer je de handleiding voor Mac OS X vergelijkt met die voor Windows en Ubuntu, valt je op dat er geen screenshots staan bij de handleiding voor Max OS X. Omdat de handleidingen op veel plekken erg op elkaar lijken heb ik geen screenshots neergezet bij de Mac OS X handleiding. Als je toch extra hints wil tijdens de installatie in Mac OS X raad ik je aan ook de handleiding voor Windows en Ubuntu te lezen. |
Installatie JDK
Bij Mac OS X versie 10.5 is de JDK al voorgeïnstalleerd
Installatie Eclipse
Installatie Android SDK
| Onthoud de locatie waarnaar je de bestanden uitpakt(!), deze heb je nodig bij het installeren van ADT. |
Installatie ADT
De installatie van de ADT in Max OS X gaat op dezelfde manier als in Windows. Scroll dus s.v.p. omhoog en gebruik de Installatie handleiding van ADT voor Windows om ADT te installeren op Mac OS X. Een klein verschil is de directory die je in moet vullen bij stap 10 ("Nu moet je de locatie van de map gebr...."). Als je, net zoals ik, alles hebt uitgepakt naar de directory "/Users/je-gebruikersnaam/android" dan moet je deze lokatie invullen: "/Users/woutervegter/android/android-sdk-linux_86". Hetzelfde geldt voor het kiezen van een lokatie voor je workspace, ik raad je aan deze te zetten op "/Users/woutervegter/android/workspace" (Vergeet uiteraard niet mijn gebruikersnaam te vervangen door de jouwe.)
Eclipse + Android SDK + ADT: introductie in je ontwikkelomgeving
Je hebt zojuist je hele ontwikkelomgeving geïnstalleerd. Nu je heb een grote verzameling van allerlei programmaatjes, schermpjes, knoppen en menu's die je helpen om Android-apps te kunnen ontwikkelen. Om bekend te worden met je ontwikkelomgeving, gaan we een hele simpele app maken en vervolgens al die tools langslopen die je helpen een app te ontwikkelen. We zullen beginnen met het aanmaken van een emulator, dat is een Androidtelefoon die draait op je eigen computer. Daarna hebben we het over de 'Package Explorer' die je helpt verschillende bestanden te openen en te ordenen, vervolgens kijken we naar het editor-scherm waarin je bestanden aan kan passen, ook met behulp van de 'Editor Tabs'. We kijken ook naar het 'problems window' en het 'console window'. Om schermen (knoppen,tekst, vlakken, etcetera) aan te passen kijken we als laatste naar de 'Layout Editor' en hoe je daarvan de eigenschappen kunt aanpassen met behulp van het 'Properties Window'. Hiermee passen we de standaard Android-app een beetje aan zodat je een hele simpele app maakt. Ter afsluiting wordt uitgelegd hoe je deze app kan laden en opstarten in je emulator.
Emulator: aanmaken en opstarten
Om je apps te kunnen testen heb je een Emulator of een Fysieke Androidtelefoon nodig. In het begin is het het handigst om een Emulator te gebruiken: dat is een programma op je computer dat een Androidtelefoon precies nadoet of anders gezegd: simuleert. Je kan verschillende emulators aanmaken, en bij elke emulator kan je kiezen welke versie van het Android OS hij moet hebben (bijvoorbeeld 1.6, 2.1 of 2.3). Hierdoor kan je gemakkelijk je apps testen op de verschillende Androidversies. We gaan nu een Emulator maken met de Android 2.1 versie. Dit is een veelgebruikte versie en hij is uitgebreid genoeg om je eerste apps op uit te testen.
Androidproject aanmaken
Als je een app downloadt uit de Android Market wordt er op de achtergrond een bestandje gedownload dtat als bestandsnaam eindigt op de letters .apk. Deze app wordt vervolgens gebruikt door je Android telefoon om de app te installeren. Zo'n bestandje waar de app in staat kan je genereren met Eclipse. In Eclipse geef je aan wat voor programeer- bestanden er bij de app horen, wat voor plaatjes je in de app wilt tonen, wat voor geluidjes je af wilt spelen en wat voor taalbestanden je wilt gebruiken als een telefoon bijvoorbeeld op Nederlands staat of wanneer de telefoon op Engels staat. Zo zijn er nog meer verschillende soorten bestanden die bij een complete app horen. Het handige van Eclipse is dat het al die verschillende bestanden op een overzichtelijke manier bij elkaar kan houden. Wanneer je die verschillende bestanden bij elkaar hebt zodat je ze kan aanpassen en uitbreiden dan heet die verzameling bestanden een Androidproject. Bij elke app die je uiteindelijk wilt maken hoort dus één Androidproject waar verschillende bestanden in staan die als voer dienen om het app-bestandje te genereren. Wanneer je dus een app wilt maken, zul je als eerste een nieuw Androidproject willen maken. We gaan nu een hele simpele app maken zodat we de belangrijkste schermen van Eclipse kunnen verkennen:
Er wordt nu een Android project voor je gegenereerd, zodat uiteindelijk je Eclipse-scherm er alsvolgt uit ziet: 
.
| Een verschil met het screenshot en jouw scherm kan zijn dat er bij jouw scherm minder opties zijn in het gedeelte waar je "Build Target" moet kiezen. Dit komt omdat, wanneer je de DevTutorial stipt hebt gevolgd, je alleen programmeerbestanden hebt gedownload voor Android 2.1 terwijl ik ze voor bijna allemaal heb. Dit verschil maakt verder weinig uit, het gaat er om dat je "Android 2.1-update1" kiest bij build target. |
De windows van Eclipse en de Editor Tabs van het Editor Window
Doe eerst even dit: kijk in de linkerkant van je Eclipse-scherm onder Package Explorer naar het mapje 'src'. Vouw dat mapje uit, inclusief het mapje moop.me.simpleapp en dubbelklik vervolgens op MainActivity.java zodat in het midden van je Eclipse scherm het bestand MainActivity.java geladen wordt. Ga ook nog even naar de menubalk bovenin Eclipse en klik op op Window-->Preferences (Eclipse--> Preferences bij een Mac) en ga naar het volgende scherm en zet een vinkje bij Show line numbers: 
. Nu heb je Eclipse voor je open zoals je hem vaak zult zien: 
. Zoals je kan zien is het scherm ingedeeld in verschillende vlakken, hier zijn ze aangegeven met paarse vierkanten: 
. In elk paars vlak zitten meerdere windows die je tevoorschijn kan halen door op de tabs te klikken. De tabs zijn in het vorige plaatje aangegeven met rode vierkanten. Je kan een window groter maken door te dubbelklikken op de tab. Je kan het window weer kleiner maken door er opnieuw op te dubbelklikken. Je kan een window sluiten door te klikken op het kruisje dat in de tab staat. Alle windows (die in de tabs zitten) hebben op een of ander manier te maken met het Androidproject waar je op dit moment mee bezig bent:
Dit zijn alle Windows die belangrijk zijn om nu te kennen. Als je ooit per ongeluk een Editor Window afsluit dan kan je hem weer tevoorschijn halen door bovenin de menubalk van Eclipse te gaan naar Window --> Show View--> Other... en dan te zoeken naar de Window die je wilt hebben. Als je wilt, kun je de windows in Eclipse ook verplaatsen naar een andere plek in het scherm van Eclipse. Ik vind het handig om het Properties Window naast mijn Package Explorer window te hebben:
App opstarten
Toen je zojuist een Androidproject aanmaakte, heb je een simpele app gegenereerd. Net hebben we via de Layout Editor tab van main.xml, via het Outline Window, via het Properties Window de tekst aangepast van je hoofdscherm. Nu gaan we deze app opstarten. Je hoeft hiervoor niet apart de emulator op te starten als je hem al gesloten had: hij wordt automatisch opgestart.
| Kom je wel in het home screen van de emulator, maar wordt de app niet opgestart, druk dan na 2-3 minuten wachten nog een keer op de play-knop bovenin het scherm van eclipse terwijl je de emulator aan laat staan (dit zorgt ervoor dat de app opnieuw wordt opgestart in de emulator). Je kan ook proberen de app op te zoeken in het opstartmenu van je emulator/Androidtelefoon. |
Succes ermee! Mocht er iets niet werken in deze DevTutorial: kijk dan eerst zelf goed of je niet iets verkeerd hebt overgenomen. Kom je er nog steeds niet uit? Stel dan pas een vraag op het forum op deze plek waar we elkaar kunnen helpen. We helpen je graag hoor :-), maar het is belangrijk dat je zelf eerst ook even moeite doet om je vraag op te lossen: dan krijgen wij niet duizenden vragen en leer je zelf ook fouten op te sporen. Ik hoop dat je dit leuk vond om te doen en zie je graag terug op het forum of in de volgende DevTutorial. In de volgende DevTutorial leer je onder andere de volgende belangrijke begrippen: Source, Syntax, Block, Activity, Method, Views, Button en if block. Hiermee gaan we een simpele reken app maken.
