Cordova PhoneGap

Cordova PhoneGap

This guide shows how to set up your SDK environment to deploy Cordova apps for Android devices, and how to optionally use Android-centered command-line tools in your development workflow.

Overview, what you need

Skip the parts below if you already have installed / configured them.

Download the ADT Plugin

To add the ADT plugin to Eclipse:

  1. Start Eclipse, then select Help > Install New Software.
  2. Click Add, in the top-right corner.
  3. In the Add Repository dialog that appears, enter "ADT Plugin" for the Name and the following URL for the Location:
    https://dl-ssl.google.com/android/eclipse/

    [su_box title=”N O T E” style=”soft” box_color=”#f7aa16″]The Android Developer Tools update site requires a secure connection. Make sure the update site URL you enter starts with HTTPS.[/su_box]

  4. Click OK.
  5. In the Available Software dialog, select the checkbox next to Developer Tools and click Next.
  6. In the next window, you’ll see a list of the tools to be downloaded. Click Next.
  7. Read and accept the license agreements, then click Finish.

    If you get a security warning saying that the authenticity or validity of the software can’t be established, click OK.

  8. When the installation completes, restart Eclipse.

PATH environment

To modify the PATH environment on Windows 7:

  1. Click on the Start menu in the lower-left corner of the desktop, right-click on Computer, then select Properties.

  2. Select Advanced System Settings in the column on the left.

  3. In the resulting dialog box, press Environment Variables.

  4. Select the PATH variable and press Edit.

  5. Append the following to the PATH based on where you installed the SDK, for example:

[code]C:\Development\adt-bundle\sdk\platform-tools;C:\Development\adt-bundle\sdk\tools[/code]

Apache Ant

Download the file and extract it to (in this case): "C:\Development\apache-ant"
Make sure that you make you have the following set in your advanced system properties, environment variables.
System variables:
  • ANT_HOME: C:\Development\apache-ant
  • Path: %ANT_HOME%\bin
    • Add the line above at the end of the rest of the paths and make sure it precedes with an ;

Node.js

Download the installer from the link above and install it the standard way (next, next…. finish).
It will automatically add it self to the path variables. For reference they are mentioned below here anyway.
User variables:
  • Path: C:\Users\Walid\AppData\Roaming\npm
    • Where as Walid is my username and should be yours.
System variables:
  • Path: C:\Program Files\nodejs\

Cordova PhoneGap

Open Command Prompt (cmd), and type the the following command to install Cordova CLI::

npm install -g cordova

If you already have Cordova installed on your computer, make sure you upgrade to the latest version:

npm update -g cordova

Create your first App

Create project

  1. In Command Prompt (cmd) go to the folder in which you maintain your source code and type the command below. This will create a Workshop app (change the name if needed).
  2. [code]cordova create workshop com.yourname.workshop Workshop[/code]

  3. Navigate to the project directory:
  4. cd workshop
      Add support for the Android platform
    • On the command line, make sure you are in the workshop directory and type:
    cordova platforms add android
  5. Make sure you are in the workshop directory, and add basic plugins to your projects:
    cordova plugin add org.apache.cordova.device
    cordova plugin add org.apache.cordova.console
  6. Examine the directory structure under workshop.
    • The www folder is where you will code your HTML / JavaScript application. Open the index.html file in a browser to see the default application created by the Cordova CLI.
    • The platforms folder is where Cordova will build your application for different platforms (iOS, Android, etc). The contents of this folder will be automatically generated by the Cordova CLI, and you should never edit code in that directory.
    • Plugins are installed in the plugins directory.
    • Application parameters (name, author, etc) are stored in config.xml.

Building your project for Android

To build the project in the workshop/platforms/android folder and run it on an Android device connected to your computer using a USB cable, type:

[code]cordova run android[/code]

To build the project in the workshop/platforms/android folder and run it in the Android emulator, type:

cordova emulate android