Tag Archives: phonegap

How to Build your Phonegap Android App on a Windows PC and Test it on your connected Android Device or Emulator

If you want to test your Phonegap (Cordova) App on Android devices during design and development you can follow this guide in order to set up the build and deployment process for your app. You will be able to access the app either through an emulator on your PC or directly on your smartphone or Android device.

Why? We are currently working on deploying a classic web application (the campsite portal camping.info) as an Android App using Phonegap. We need to make sure everything looks nice and is usable.

Note: I am running this installation process on a PC running Windows 8.1 64-bit. It should run with most Windows installations, though. I test my App by connecting my Samsung Galaxy S4 mini via standard usb cable.

Step 1: Installing Android Studio SDK

  1. Download Android Studio SDK for Windows:
    1. download from here (bundle with tools and IDE): http://developer.android.com/sdk/index.html#download
    2. install it to a folder of your choice (remember it)
  2. Install additional Android 4.4.2 – API 19 Package (needed build your app – 5.x is currently not fully supported by Cordova) :
    1. after installing Android Studio open it android studio - running Android Phonegap App on PC and connected Android device
    2. on the ‘Welcome’ screen click on ‘Configure’ – the configure menu opens
    3. click on ‘SDK Manager’ – the SDK Manager opens in new window
    4. scroll down to Android 4.4.2 – API 19 and install all packages in the folder
  3. Set paths to Android SDK folders in system variables so that you access it from anywhere:
    1. open ‘edit system environment variables’ (in windows system properties -> advanced tab)
    2. click on ‘environment variables’ (bottom right)edit system variables for running Android Phonegap App on PC and connected Android device
    3. in either User or System variables click on ‘edit’ (with variable ‘Path’ selected)
    4. add 2 paths pointing to your installation path like so: c:my-android-sdk-installation-folderadt-bundlesdkplatform-tools; c:my-android-sdk-installation-folderadt-bundlesdktools (make sure to add a semicolon ‘;’ between all paths specified)
    5. in either User or System variables create a new variable with variable name ‘ANDROID_HOME’ and variable value of your Android SDK installation folder like so: ‘c:my-android-sdk-installation-folder’
    6. click ok and close system properties

Step 2: Install Node.js and Node Package Manager

  1. in order to quickly and easily install Phonegap download and install node.js (which includes npm, the node package manager) from here:  http://nodejs.org/download/installing node.js for running Android Phonegap App on PC and connected Android device
  2. alternatively update: update npm by running ‘npm update npm -g’ from the command line

Step 3: Install Apache Ant

  1. Phonegap needs Apache Ant to run properly
  2. Follow the instructions to Ant installation here: http://ant.apache.org/manual/install.html   (download Ant from here: http://ant.apache.org/bindownload.cgi)
  3. Check your Ant installation by running ‘ant -version‘ from the command line – it should return something like: ‘Apache Ant(TM) version 1.9.4 compiled on April 29 2014’

Step 4: Install Phonegap

  1. install Phonegap using npm (node package manager): open command prompt and execute ‘npm install -g phonegap’ – this will install the current version of Phonegap globally to run with any project
  2. or alternatively update to the current Phonegap version by entering ‘npm update -g phonegap’

Step 5: Prepare your Device for Testing

  1. on your Android device: make sure ‘developer options’ are turned on in your android device -> guide here: http://www.greenbot.com/article/2457986/how-to-enable-developer-options-on-your-android-phone-or-tablet.html
    1. on my Samsung Galaxy 4 mini it meant:
      1. go to settings -> more -> about device
      2. tap the build number 7 times
  2. on your device: go to settings -> more -> developer options and allow ‘usb debugging’
  3. Connect android device to pc via usb cable:
    1. check to see if device is recognized:
    2. open command prompt in your app folder and ‘adb devices’ and press enter
    3. your device should be listed
    4. if not, open a command prompt and:
      1. type ‘adb kill-server’ and press enter
      2. then type ‘adb start-server’ and press enter
      3. then try again ‘adb devices’ and press enter

Step 6: Build and Run your Phonegap Android App

  1. open command window in your app folder
  2. enter ‘phonegap run android’ and press enter (alternatively enter ‘phonegap build android’)
  3. after a couple of seconds your App should open on your connected phone
  4. if no phone is connected it will open in an emulator on your PC

Well, you are all done and can test your Android app on your device or using the emulator. After changing the app make sure to deploy it again to your phone using step 6. You can access the app on your phone after disconnecting from your PC at any time – you can find it with all other apps in your apps folder.

If you have any suggestions or improvements to this how-to-guide, feel free to share them in comments.