PhoneGap Configurations: setting up the system environment

Are you brand new to PhoneGap? Where do you start? What about PhoneGap Build? There are a ton of resources out there and I’ve pulled it all together to help you get started, get some tips, and figure out where to get help.

Setting up Development components

node_js_logo

Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

Once you complete the installation set up the following environment paths:

  • New Variable: NODE_SDK = C:\Program Files\nodejs
  • Append Variable: Path = %NODE_SDK%

Execute the following command to install phonegap module:

C:\> npm install -g phonegap

Using the same command prompt use the command to install the cordova module:

C:\> npm install -g cordova

Download and install both Java and ANT application components:

1612441The JDK includes tools useful for developing and testing programs written in the Java programming language and running on the Java platform
group-logoApache Ant is a Java library and command-line tool whose mission is to drive processes described in build files as targets and extension points dependent upon each other. The main known usage of Ant is the build of Java applications. Ant supplies a number of built-in tasks allowing to compile, assemble, test and run Java applications. Ant can also be used effectively to build non Java applications, for instance C or C++ applications. More generally, Ant can be used to pilot any type of process which can be described in terms of targets and tasks.
Once you complete the installation set up the following environment paths:
  • New Variable: ANT_HOME = path to the extracted directory to the ANT collection
  • New Variable: JAVA_HOME = path to the installed directory of the Java instance [ie: C:\Program Files\Java\jdk]
  • Append Variable: Path = %ANT_HOME%;%JAVA_HOME%

Setting Up Different mobile Environments

dac_logo

The Android SDK provides you the API libraries and developer tools necessary to build, test, and debug apps for Android.

Click on the icon, download the contents and extract the data in to your working directory.  For Cordova command-line tools to work, you need to include the SDK’s tools and platform-tools directories in your PATH environment. To achieve this update your environment variables to the following settings:

  • New Variable: ANDROID_SDK_HOME = path to the Android SDK on your local computer [ie: C:\mobile\androidSDK\sdk]
  • Append Variable: Path = %ANDROID_SDK_HOME%\platform-tools;%ANDROID_SDK_HOME%\tools;

 Creating a New Project

Go to the directory where you maintain your source code, and run a command such as the following:

$ cordova create HelloWorld com.techsplice.hello "Hello World"

The first argument specifies a HelloWorld directory to be generated for your project. Its www subdirectory houses your application’s home page, along with various resources under css, js, and img, which follow common web development file-naming conventions. The config.xml file contains important metadata needed to generate and distribute the application.

The other two arguments are optional: the com.example.hello argument provides your project with a reverse domain-style identifier, and the “Hello World!” provides the application’s display text. You can edit both of these values later in the config.xml file.

Add Platforms

All subsequent commands need to be run within the project’s directory, or any subdirectories within its scope:

$ cd HelloWorld

Once there run any of the following commands based on the configurations that you’ve configured above [for associated mobile platforms]:

$ cordova platform add ios
$ cordova platform add android
$ cordova platform add blackberry

Run this to check your current set of platforms:

$ cordova platforms ls

Links

PhoneGap Platform Guides
PhoneGap Android Platform Guide
The Command-line Interface

Leave a Reply

*

captcha *