Getting Going with PhoneGap

PhoneGap is Adobe’s free cross-platform hybrid mobile app framework. It allows you to use the web technologies that you know and love to build mobile apps. Like many open source projects PhoneGap can be a bit of a pain to get started since it also relies on other open source frameworks. If you only want to play with Ionic in the browser and you are not interested in deploying to a device, only install the mandatory components. If you would like to deploy to either Android, iOS or both, then install the listed optional components. Here is what you will need to install:

  1. Mandatory Components
    1. Git
    2. Node (includes npm)
    3. PhoneGap (npm module)
  2. Optional Android Components
    1. Java SDK 7
    2. Android Studio + the latest SDK
    3. VirtualBox 
    4. Genymotion Android Emulator
  3. Optional iOS Components
    1. XCode
Most of PhoneGap will work perfectly fine from a web browser. If that browser is Google’s Chrome, you can use its built-in mobile emulator and be able to play around with PhoneGap without having to install all of the device components.

PhoneGap is delivered as an NPM module. NPM is the Node Package Manager, which is installed with Node. NPM has become a very popular way to deliver cross-platform open-source tools. This is why we need to have Node installed. None of these is difficult to install, but you will need a few hours if you plan to install everything. 
Prerequisites

You should have around 10 GB of hard disk free. Quite a bit of space will be eaten up by the Android SDK components. You should also have Google Chrome installed. Chrome is by far the best browser for mobile development. It supports remote debugging which is essential when debugging Cordova apps.


Installation Instructions


Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. The Cordova CLI uses git internally to download assets.


Install Git
  1. Download the installation package
  2. Launch it
  3. Follow on screen instructions
  4. Complete the installation


NodeJS


Install NodeJS
  1. Download the installation program
  2. Launch the installation program
  3. Follow on screen instructions
  4. Restart machine so changes will be activated
  5. Verify that Node JS is installed: node -v
  6. (should respond with the version number)



Install Cordova
  1. Instal PhoneGap globally with the following command: npm install -g phonegap

    You may need to use the sudo command to give their root password at this point. This is expected since you are need to permit an application to be installed globally.
  2. Verify installation of PhoneGap from the command line: phonegap -v

At this point you can play with PhoneGap in your browser. If you wish to deploy apps to devices please continue with the instructions below.
Android uses Oracle’s Java as its programming language and to run many of its tools. As of Android 5.0, the official version of Java used is Java 7. Be careful, lots of installation instructions will mention to only use Java 6, this is no longer true. And even though Java 8 is the current version, don’t use it either, Google’s instructions call for JDK 7. Also be careful not to download the Java Runtime Environment or JRE. We need the JDK, which includes the JRE. Don’t bother to download the sample apps or demos, they aren’t necessary.


Install JDK 7
  1. Download the installation package
  2. Launch it
  3. Follow on screen instructions
  4. Add JAVA_HOME
  5. Add Java to path


Android Studio is the official IDE for Android application development, based on IntelliJ IDEA. It has been in beta release since 2013’s Google I/O. The 1.0 version was released early December 2014 and with that Google is no longer supporting the former IDE, Eclipse.


Install Android Studio
  1. Download the installation package
  2. Launch it


In addition to an IDE, Android development requires a set of tools, known as the Android Developer Tools or ADT and a software development kit or SDK. A new SDK comes out every few months. As of April 2015, the current SDK is Android 22, which supports Android devices up to version 5.1, aka Lollipop. Android 22 is installed automatically by the installation program. Currently Cordova requires Android 19 so it must be install in addition to Android 22. If you are prompted, be sure to check the box to install it. Otherwise install Android 19 after Android Studio completes its installation. Don’t skip this step.

Install Android 19
  1. Launch Android Studio
  2. Click Configure
  3. Click SDK Manager
  4. Once the Android SDK Manager installs, scroll down until you see the “Android 4.4.2 (API 19)”
  5. Check the following:
    1. SDK Platform
    2. ARM EABI v7a System Image
  6. Click the install packages button
  7. Accept the license agreement
  8. Click Install


Be patient, it can take an hour or so to install the SDKs.


Genymotion Emulator
https://www.genymotion.com

Genymotion is an Android emulator which comprises a complete set of sensors and features in order to interact with a virtual Android environment. It is significantly faster than the included Android emulator. It is built on top of Oracle’s VirtualBox, so you can’t run it from a virtual machine. If you decided to use it, you will need to install the VirtualBox first.

VirtualBox is a powerful x86 and AMD64/Intel64 virtualization product for enterprise as well as home use. Genymotion is built on top of VirtualBox and its devices are emulated x86 Android machines.
Xcode
https://itunes.apple.com/us/app/xcode/id497799835?ls=1&mt=12

Xcode is available for free from the Mac App Store. It is the Apple tool for building iOS, Safari, and Mac apps.

Install Xcode
  1. Download the installation package
  2. Launch it
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s