Setup

Apache Cordova : Getting Started : 1) Create a Project

AlexBLeave a comment

Installation

I will assume Apache Cordova is installed. Otherwise (based on your OS and installation, “sudo” could be mandatory or not).

To update Apache Cordova

 sudo npm update -g cordova

Creating a new project

To create a new Apache Cordova Project:

 cordova create tutorial com.yourname.tutorial Tutorial

The 1st parameter, mandatory, is the directory.
2nd parameter is optional : ID of the project
3rd parameter is optional : name of the project

At this point, you could also add other args to the cmd line. See cordova help on “create”:

 cordova help create
 Synopsis

    cordova create  [ID [NAME [CONFIG]]] [options] [PLATFORM...]

Create a Cordova project

    PATH ......................... Where to create the project
    ID ........................... reverse-domain-style package name - used in 
    NAME ......................... human readable field
    CONFIG ....................... json string whose key/values will be included in
                                    [PATH]/.cordova/config.json

    Options:
        --copy-from|src= ... use custom www assets instead of the stock Cordova hello-world
        --link-to= ......... symlink to custom www assets without creating a copy.

At this point, we will add some target to our project. Goto the project directory

 cd tutorial

Let’s add some “basic” plugins:

cordova plugin add org.apache.cordova.device
cordova plugin add org.apache.cordova.console

Let’s add android and ios targets

cordova platform add ios
cordova platform add android

We could also have the complete list of installed plateform targets:

cordova platform list
Installed platforms: android 3.7.1, ios 3.8.0
Available platforms: amazon-fireos, blackberry10, browser, firefoxos

Couple of notes:

  • To use iOS as a target, Xcode must be installed (meaning you’re using OSX somewhere)
  • To use Android as a target, the path must be defined in “ANDROID_HOME”. For example, on my Mac: 
    •  export ANDROID_HOME=/home/alex/android/sdk
  • And so on for every plateform…

Let’s have a look on directory structure:

  • config.xml  : App parameters such as name, author, …
  • hooks     
  • platforms : directory where Cordova builds targeted plateforms. Do not edit any piece of code in this dir
  • plugins   : installed plugins
  • www    : directory where you will code your html/javascript application

Building & Running/Deploying

To build a plateform target and runs it into emulator/simulator or real devices, it is quite easy:

  • Android
    • Build: 
       cordova build android
    • Run on an attached device or emulator (target_id / emulator_id are optionals) 
      cordova run android (target_id)
cordova emulate android (emulator_id)
  • iOS
    • Build 
       cordova build ios
    • Run in simulator on OSX 
       cordova emulate ios

… [TO BE CONTINUED] …

Setup Apache Cordova in OSX Yosemite for Android & iOS apps

AlexBLeave a comment

To use Apache Cordova on OSX Yosemite, the prerequisites are:

  • brew
  • npm

I assume both are available. In this quick blog, I will assume you’d like to compile, build and emulate your app for Android and iOs. Please remember that Cordova is also available for Window Phone 8, Firefox OS, … See Apache Cordova HomePage for details.

  1. Install ant using brew 
    sudo brew update
sudo brew install ant
  2. Check ant version: 
    ant -version
  3. Install Cordova using npm 
    sudo npm install -g cordova
  4. if you plan to compile cordova app for android, set ANDROID_HOME to point to Android SDK 
    export ANDROID_HOME=~/android/sdk/
  5. If you plan to compile cordova app for iOS, install XCode from Apple Store 
    https://itunes.apple.com/en/app/xcode/id497799835

    Then, you will need iOS Simulator from PhoneGap to test your app into iOS emulator:

    sudo npm install -g ios-sim

To make a small test project on OSX, please read Apache Cordova Starting Guide.

[To be continued]