04 - Develop Your First Phonegap iOS Application

Introduction

We have already created our first Android mobile app using PhoneGap and next we are going to develop our first iOS app. The process of building an iOS mobile app using PhoneGap is very similar to creating an Android mobile app using PhoneGap.

Note: You need to have a real Mac system or a virtual Mac system setup in order to develop iOS apps. As already mentioned, iOS apps can be built only on Mac systems.

Create an iOS App

Open your terminal window and navigate to the location where you have the PhoneGap folder downloaded and extracted. Move to the subfolder lib/ios/bin within the PhoneGap folder.

cd /Users/apple/Documents/MobileAppDevelopment/phonegap-2.9.0/lib/ios/bin (Make sure that you enter the correct path based on where you have the PhoneGap folder).

Next we have to use the ./create command to create an application. The format of the create command is exactly the same as that of Android app.

     ./create <project_path><package_name><project_name>

So, enter the following command in the terminal window.

     ./create /Users/apple/Desktop/iOSHelloWorld com.learn.iOSHelloWorld iOSHelloWorld

This will create a folder named iOSHelloWorld on your Desktop. Open the iOSHelloWorld folder to see the folder structure.

folders.png

You could see a iOSHelloWorld.xcodeproj and some other folders including www. If you open the www folder, you could find that its structure is almost the same as that of the www folder we had in our Android project. The www folder contains folders like css, img, js and so on and files like index.html. For iOS apps as well, index.html is the main file that needs to be modified to alter our app.

Double click the xcodeproj icon (the fourth item in the list) which will open our project in the XCode environment. To customize our app, open the index.html file within the www folder using your favourite text editor. As we have done while creating the Android app, clean up your index.html file by removing the long comment, moving the script that connects to the cordova.js file to the <head> section and removing everything else within the <body> section. Now add the following lines of code within the <body> section of the index.html file.

<h1>Hello World!!!</h1>
<h2>My First iOS app</h2>
Your index.html file will look like this:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <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>
        <script type="text/javascript" src="cordova.js"></script>
    </head>
    <body>
        <h1>Hello World!!!</h1>
        <h2>My First iOS App</h2>
    </body>
</html>

Next we have to run the application. For this, select a simulator from the list like this:

 

simulator.png

 

You could see three different simulators and choose any one of them. Of course, there will be difference in the size of the screen based on the one you choose. You might have noticed that the virtual device of Android phones is referred to as emulator whereas the virtual device of iOS phones is being referred to as simulator.

Now click the run button (just like the play button). In a few minutes, you will see the output like this:

 

output.png

 

Summary

Now we have created two simple mobile apps, one for Android platform and one for iOS devices using PhoneGap. You might have now noticed that the index.html files of both the Android project and the iOS project contains the same kind of code. The only difference is that both the projects are opened in different platforms, Android project in Android Development Toolkit (Eclipse) and iOS project in XCode environment.

As we proceed, we will learn how to develop more complex and useful apps using PhoneGap.

Like us on Facebook

Wideskills