App compilation and testing

In this chapter we are going to test and debug our first Hello World app from the previous chapter. This can be done in three ways:

• In the Chrome browser
• In an emulator/simulator
• On a real device with at least Android 5.1.

Debugging in Chrome

Chrome is the easiest and fastest way to test an app. In the Chrome Developer tools (F12), you can debug your code, validate the layout, etc.
Of course, a browser has its limitations. You can't simulate all the hardware you find on a real Android device.
You can simulate:

• The camera
• Geolocation
• Orientation
• Accelerometer

Open the terminal in the folder LesCordova/hello and execute the following command:

$ phonegap serve

(Don't mind the warning - the app works perfectly.)

• Open the app in Chrome http://localhost:3000.
  

If all goes well, the text DEVICE IS READY will appear on the screen and in the console Running cordova-browser@x.x.x. You may also see many error messages in the console. Don't worry about this yet. We will deal with them later. You can stop the server with Ctrl+c.

Note that we are using phonegap serve (without the r at the end!) and not cordova serve.

• phonegap serve works on port 3000 and has liveReload.
  As soon as you change the code on the page, the changes are visible in the browser.
• Cordova serve does almost the same (port 8000) but has no liveReload.

Debugging in an emulator/simulator

You can emulate an app in an Android Virtual Device or AVD (part of the Android SDK installation). The disadvantage of ADV is that it is very slow to start up. A slightly faster emulator is Genymotion. This one has the disadvantage that it crashes regularly...
These emulators have the same limitations as Chrome. Therefore, we will not be using them in this course.

Debugging on a real Android device

NOTICE

• If your device does not appear in Chrome, first try to reinstall the Google USB driver from the Android SDK Manager.
• If this has no effect, run the following command from the terminal:

$ adb usb

This is of course the best method of testing. But before you can do this, you have to put your device in debug mode. How you do this depends on the Android version on your device. On this website there is a nice overview.
For Android 4.2.x or higher these are the steps:

• Open Settings.
• Click on Device Info and then on Software Info or Software Data (the title varies from device to device).
• Click seven times on Building number.
• Return to Settings. A new menu Developer Options has been added.
• Click on Developer Options and check USB Debugging (USB-foutopsporing).
• Now connect your smartphone via USB to your computer and run the following command:

$ cordova run android

The application will open on your smartphone. You can even debug the app from your smartphone in Chrome.

HUAWEI SMARTPHONE?

For Huawai you have to tick, besides USB debugging, an extra option:

• Unable to turn on the USB debugging switch?
• How to Enable USB Debugging Mode on Huawei

• Open a new tab in Chrome.
• Enter chrome://inspect as the URL.
• You can use the DevTools to debug the app on the device.

IMPORTANT

Some apps, such as a banking app and Payconiq, often do not work as long as USB debugging is activated.

Vysor

• With Vysor you can view and control your Android on your computer.
• The (free) version of Vysor is especially useful for showing how your app works during a presentation.
  

Automation (optional)

This tip has nothing to do with Cordova, but makes testing a lot easier.
You can save npm commands in package.json and execute them via double-click.

• Open package.json.
• Replace the test scripts with:

  {
   ...
    "scripts": {
      "browser": "phonegap serve",
      "android": "cordova run android",
      "icon": "cordova-res android --type icon"
    },
    ...
  }
  

  (Line 6 will be covered later, in custom icon).
• Open the npm tab at the bottom left and double-click on one of the scripts to execute it.