Hello World app testen

In dit hoofdstuk gaan we onze eerste app uit voorgaand hoofdstuk testen en debuggen. Dit kan op drie manieren:

  1. In de Chrome browser
  2. In een emulator/simulator
  3. Op een echt device.

Debuggen in Chrome

Chrome is de makkelijkste en snelste manier om een app te testen. In de Chrome Developer tools (F12) kan je je code debuggen, de lay-out valideren, enz.
Een browser heeft natuurlijk zijn beperkingen. Niet alle hardware die je op een echt Androidtoestel terugvindt, kan je simuleren. Wat je wel kan simuleren is:

  1. De camera
  2. Geolocatie
  3. Oriëntatie
  4. Accelerometer

PS: vroeger werd vaak de Ripple-emulator voor Chrome gebruikt. Ondertussen zitten de meeste van deze mogelijkheden al standaard in de Chroom DevTools.

  1. Open de terminal op de map LesCordova/hello en voer volgend commando uit:
    $ phonegap serve
    phonegap serve
  2. Open de app in Chrome (http://localhost:3000).

Als het goed is, verschijnt op het scherm de tekst DEVICE IS READY en in de console Reciver Event: deviceready. Je zal in de console ook heel wat foutmeldingen ontdekken. Maak je hier nog geen zorgen over. Deze gaan we later wel oplossen.
Je kan de server stoppen met Ctrl+c.

Merk op dat we phonegap serve (zonder r achteraan!) gebruiken en niet cordova serve.

  1. Phonegap serve werkt op poort 3000 en heeft liveReload.
    Zodra je de code op de pagina wijzigt, zijn de aanpassingen dadelijk zichtbaar in de browser.
  2. Cordova serve doet bijna hetzelfde (poort 8000) maar heeft GEEN liveReload.

Debuggen in een emulator/simulator.

Je kan een app eventueel emuleren in een Android Virtual Device of AVD (onderdeel van de Android SDK installatie). Het nadeel van ADV is dat het ontzettend traag opstart. Een iets snellere emulator is Genymotion. Deze heeft dan weer als nadeel dat hij regelmatig crached…
Deze emulators hebben dezelfde beperkingen als Chrome. Daarom gaan we ze in de cursus niet gebruiken.

Debuggen op een echt Android device

Komt je toestel niet tevoorschijn in Chrome, probeer dan eerst vanuit de Android SDK manager de Google USB driver opnieuw te installeren. Heeft dit geen effect, voer dan vanuit de terminal volgend commando uit:

$ adb usb

Dit is natuurlijk de beste methode om te testen. Maar voor je hiermee aan de slag kan, moet je het toestel wel eerst in debug mode zetten. Hoe je dit doet, is afhankelijk van de Android versie op je toestel. Op deze website staat een mooi overzicht.
Voor Android 4.2.x of hoger zijn dit de opeenvolgende stappen:

  1. Open Instellingen.
  2. Klik op Toestel-info en vervolgens op Software-info.
  3. Klik zeven maal op Buildnummer.
  4. Keer terug naar Instellingen. Er is een nieuw menu Ontwikkelaaropties bij gekomen.
  5. Klik op Ontwikkelaaropties en vink USB-foutopsporing aan.

Verbind nu je smartphone via USB met je computer en voer volgend commando uit:

$ cordova run android

De applicatie opent dadelijk op je smartphone. Je kan de app vanaf je smartphone zelfs debuggen in Chome.

  1. Open een nieuw tabblad in Chrome
  2. Vul als URL chrome://inspect in.
    Met de DevTools kan je de versie op het toestel debuggen.
    Debug WebView in Chrome