This document discusses how to create a mobile app using Cordova (PhoneGap). It covers setting up the development environment, adding iOS and Android platforms, and deploying the app to emulators. Key steps include installing Node.js and Cordova, creating an app project, adding platforms, and running the app on emulators or a device. Platform guides provide additional documentation.

1. Mobile App with Cordova (PhoneGap)
by Candy Zhuang
2014-01-09

2. Content
● Introduction
● Set environment
o Install NodeJS (v0.10.24)
o Install Cordova by npm
o Create App with Cordova
● Add Platforms
o Add IOS
o Add Android
● Deploy to Emulator
o Emulator iOS
o Emulator Android

3. Introduction
PhoneGap
Easily create mobile apps (Android, iOS, Windows) using the web technologies you know:
HTML, CSS, and JavaScript
http://phonegap.com

4. Set Environment
● Install NodeJS
> nvm install 0.10.24
> nvm use 0.10.24
> nvm alias default 0.10.24
● Install Cordova by npm
> sudo npm install -g cordova
● Create the App (project directory)
> cordova create hello com.example.hello HelloWorld
● Run within the project’s directory
> cd hello

5. Add Platforms - iOS
● Add iOS Platform
> cordova platform add ios
● Build the App
> cordova prepare (or cordova build)
● Open it from within Xcode
Double-click to open the file
“hello/platforms/ios/hello.xcodeproj”

6. Add Platforms - Android
● Requirements and Support
o Android SDK & ADT Bundle (for Mac) : adt-bundle-mac-x86_64-20131030
o JDK7 : jdk-7u45-macosx-x64.dmg
o Ant : apache-ant-1.8.4 (must be v1.8.4)
● Include SDK’s tools and platform-tools directories in your PATH env. (Mac)
o Modify ~/.bash_profile
> vim ~/.bash_profile
export JAVA_HOME=$(/usr/libexec/java_home)
export ANT_HOME=~/Documents/and-source/apache-ant-1.8.4
export PATH=${PATH}:/Users/candychuang/Documents/and-source/adt-bundle-mac-x86_64-20131030/sdk/platform-tools:/
Users/candychuang/Documents/and-source/adt-bundle-mac-x86_64-20131030/sdk/tools:$ANT_HOME/bin
o This exposes SDK tools in newly opened terminal windows
> source ~/.bash_profile

7. Add Platforms - Android
● Add Android Platform
> cordova platform add android
● Build the App
> cordova build
● Launch the Eclipse application
o Select the New Project
o Choose Android Project from Existing Cdoe
o Navigate to hello -> Finish

8. Deploy to Emulator - iOS
● Emulator iOS
o Make sure the .xcodeproj file is selected in the left panel.
o Select the hello app in the panel immediately to the right.
o Select the intended device from the toolbar's Scheme menu, such as the iPhone 6.0 Simulator as
highlighted here:
● iOS Platform Guide
o http://docs.phonegap.com/en/3.3.0/guide_platforms_ios_index.md.html#iOS%20Plat
form%20Guide
RUN

9. Deploy to Emulator - Android
● Emulator Android
> cordova emulate android
● Deploy to Device
> cordova run android
● Android Platform Guide
o http://docs.phonegap.com/en/3.3.0/guide_platforms_android_index.md.html#Androi
d%20Platform%20Guide