Write an iOS App in PhoneGap


What is PhoneGap

PhoneGap is a mobile development framework produced by Nitobi, purchased by Adobe Systems in 2011. It enables software programmers to build applications for mobile devices using JavaScript, HTML5, and CSS3, instead of relying on platform-specific APIs like those in iOS or Android.



Why PhoneGap over Native

Managing a single code base: If we went native we would have to manage two code bases, iOS and Android. That means every bug fix, every feature added, every change would have to be done twice.

Costs: Compare trying to hire a new Objective-C developer vs hiring a JS developer.



How to setup a PhoneGap

Summery of Steps:

  1. Install or update PhoneGap
  2. Create a new PhoneGap project
  3. Build your iOS/android app
  4. Write HTML5 view and plug into app
  5. Done


Steps in Detail:

1. Download and install PhoneGap
If you don’t already have PhoneGap installed on your computer PhoneGap has a very simple tutorial you can follow:  http://phonegap.com/install/

*Update existing PhoneGap installation:

$ sudo npm update -g phonegap

2. Create a new project.

# Create a new project 
# phonegap create [folder-name] [namespace] [project-name]
$ phonegap create hello com.javabrown.hello HelloWorld

# Change dir to com.javabrown.hello/
# Add platforms you want to develop for
#(You must already have the environment for this platform setup.)
$ cordova platform add ios

3. Build your iOS/android app

Build your app in your choice of platform. In my example iOS is being used.

$ phonegap build ios

Now look into the generated directory \platforms\ios for your built app, open it into XCode:
Generated HelloWorld App in XCode:



4. Write HTML5 Mobile Page in XCode
Here is a sample hello-word.html, save it into www/ directory:

        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport"
        content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <title>Hello World</title>
            <h4>Hello World</h4>

Plug the hello-world.html view into newly generated HelloWorld/config.xml.

5. Done!! Launch and Test the App.