Mobile App Development: Building iPhone & Android apps with PhoneGap

PHONEGAP

You have probably heard about PhoneGap development as an cross-platform tool to create mobile apps for different OSs, but what is really PhoneGap?

Well, it is an open source framework for building cross platform mobile applications. It is easy to write mobile applications using HTML,CSS and JavaScript. Now you don't have to worry about Objective C, java and other native languages to build Mobile Applications. PhoneGap is a very user friendly tool to build mobile applications. It is built on Apache Cordova and it has support for JS frameworks like: Sencha, backbone.js, Jquery Mobile and many others.

If what you're aiming for is a functionality-drive mobile app and you don't mind to rely a lot on internet connectivity then give PhoneGap a try and stop worrying about Objective C, Java and all other native programming languages for mobile app development.

PhoneGap support 

PhoneGap provides support for using web standards to create native applications that runs on various different mobile platforms: iPhone, Android, Blackberry, Windows Phone. 

PhoneGap provides many plugins used to interact with the hardware's device like:

  • Geolocation
  • Accelerometer
  • Compass
  • Camera

Also it provides third party plugins which are ready use. You can create your know plugin also in native language to extend functionality.

Here is the list of plugins available.

How is PhoneGap different from other Cross-Platform app develompent tools (Like Appcelerator Titanium)?

PhoneGap wraps a web view with a native code. It is a web based solution while Appcelerator's Titanium is a JavaScript driven approach for native code creation. Web view used by PhoneGap is same as native web view for a respective platform. Said in other words, PhoneGap provides an easy way to create simple mobile apps that don't rely heavily on complex animations and other UX elements and mostly serve the purpose of being functional and do constant queries through the web. Titanium can provide with a much richer and native user experience, however the approach is quite different from one another.

For example: for iOS, it's Objective C UIWebView class

PG architecture resized 600

Installation of PhoneGap:

First of all you can download PhoneGap SDK from their webpage.

Unzip it and you can see different platform specific folders inside.

PhoneGap IPhone App Development Guidelines

I will start with an iOS app because it takes fewer steps to get it ready

You will need the next tools: 

  • iPhone SDK
  • Xcode
  • Cordova library for iPhone

Get details on compatibility versions for xcode vs. PhoneGap library.

Example:

1) Create directory for new project

2) Run the following command to create new Application:

a) To create project:

$  ./path/to/cordova-ios/bin/create /path/to/new_project  packageName ProjectName

 

Example:

$  ./path/to/cordova-ios/bin/create /path/to/new_project  com.test.helloWorld “HelloWorld”

b) To build project:

$ /path/to/new_project/cordova/build

c) Run App on an Emulator

$ /path/to/new_project/cordova/run

You can also run application -using xcode-

Just enter into project directory. Open xcode project (.xcodeproj)

Now here we have the project structure:

PG 1 project structure resized 600

test

Explanation:

Project structure contains following folders--

  • www: Cordova.js file . It’s a phonegap Library
  • css: Style sheets go here
  • img: Images for entire application goes here
  • js: Add your .js files here
  • Plugins: Add custom plugins or third party plugins here
  • Resources/helloWorld-info.plist: This file contains project information like Bundle ID, name ,OS Type,Orientations support.

PG 2 folder structure

  • config.xml-contains configuration settings related project. You can see all Hardware support APIs for PhoneGap.

PG 3 APIs for Phonegap resized 600

Run Application:

PG 4 iOS simulator resized 600

Android Phonegap App Development Guidelines

If you want to make an Androiod app the set up is somehow different than it is for iOS, but no worries, there's an easy way to do it.

You will need the next tools:

  • Android SDK
  • Android NDK
  • Eclipse IDE
  • ADT Plugin for Eclipse

Example:

Steps to create Android Phonegap App:

1) Check if you have the Android SDK’s tools and platform-tools folders in your PATH!

IF not, edit /.bash_profile

ADD:

export PATH=”/Users/developeri/android-sdk-macosx/tools/”:$PATHto your ~/.bash_profile

2) Create a project using following command:

$ /path/to/cordova-android/bin/create /path/to/new_project packageName ProjectName

Example:

$ ./path/to/cordova-android/bin/create /path/to/new_project  com.test.helloWorld “HelloWorld”

3) To build project:

$ /path/to/new_project/cordova/build

4) Run App on an Emulator:

$ /path/to/new_project/cordova/run

— You can also run application using Eclipse—

Open eclipse -> Import project –> Android –> Existing Android Code Into Workspace.

Once the project has been imported, Run application from eclipse.

PG 6 Android simulator resized 600

There is another way also to create application instead of using command line (using eclipse)

Follow this link to see how.

Sometimes its complicated to create a new Android App project and manually add everything. Don't worry; here we have solution for it.

AppLaud – It's the Eclipse plugin to create PhoneGap application.

How to add AppLaud plugin in eclipse?

Go to Help -> Install New Software –> enter download site "http://svn.codespot.com/a/eclipselabs.org/mobile-web-development-with-phonegap/tags/r1.2/download"

Click enter and follow the prompt window.

After installation finishes, you can see PhoneGap icon on the top:

PG 8 Phonegap icon

Click on PhoneGap Icon to create new Android PhoneGap Application.

You can use built-in phonegap or specify already installed phonegap library as shown below:

PG 9 for Android project resized 600

Click 'Next' and follow the prompt.

Once the project is created, run Application. For more information on Applaud, click here.

There are different setups for different platforms. Here is the link for all platforms Guide.

Some Know Issues and Fixes

There's always some issues that depends on the version of SDK, plugins, etc. For this example in specific we have the next know issues. If you get ERROR:

  1. ios-sim was not found.

Please download, build and install version 1.5 or latest from here into your path. Or 'brew install ios-sim' using homebrew.

SOLUTION : Install ios-sim using following command— sudo npm install ios-sim –g

  1. File/Users/developeri/Library/Developer/Xcode/DerivedData/Sample-dttybcpvzkoehigfwudpzokudoof/Build/Products/Debug-iphonesimulator/libCordova.a depends on itself.

SOLUTION:This target might include its own product.

Reference:

TutsPlus

PhoneGap

About the Author

Jyoti G. has a bachelor's degree in Information Technology From Chandigarh , India, with 3 years of working experience on Web and Mobile with additional experience on .NET. Now she specializes in Mobile Development (cross platform technologies), like phoneGap, Appcelerator Titanium.

Oscar Salas

Written by Oscar Salas

Oscar Salas is a B2B Digital Marketing Specialist with 5 years of experience, who has helped organizations to grow and expand through strategic brand development and marketing programs. Analytical thinker, cat lover, he enjoys to play the piano and listening to Led Zeppelin He's currently leading the iTexico Demand Gen strategies.

Explore iTexico, The Nearshore + Company 

Explore The Nearshore Services

Read More

Mobile Competency Center

Recent Posts