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
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:
- 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
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.
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