Create a Simple IOS App with PhoneGap (Cordova)

On August 6, 2015, in iPhone iPad Object-C, by James Liu

As the project requirement, I will start to use PhoneGap to create a IOS app from scratch. This is my first time to use PhoneGap. Here is my understand about PhoneGap. First, PhoneGap is officially renamed as Apache Cordova. It is a framework to help you create IOS app, Android app, or even Windows Phone app from HTML5 and Javascript. For people who knows HTML5 and Javascript, this is a great tool to help to create native apps from HTML and JS. In this article, I will tell you how to create an IOS app by PhoneGap (Cordova) from beginning.

Install Node.js on Your Mac for PhoneGap/Cordova

Cordova (phone gap) has a complete manual page about how to install the Cordova CLI on Mac. But if you follow the official instruction, you will get lots of errors, and Cordova doesn’t provide the solution for those errors.

To install the Cordova on your Mac, you need to install the Node.js first. When I am writing this article, the latest Node.js version is v0.12.7. But if we install this version, we will get an error when we install the Cordova 4.0?

npm WARN engine cordova-js@4.0.0: wanted: {“node”:”~0.10.x”} (current: {“node”:”0.12.7”,”npm”:”2.11.3”})

When you are installing Cordova, you may get this message with different version number. This warning message tells us that Cordova 4.0.0 needs node.js 0.10.x; So we need to install the Node.js 0.10.x. Install Node.js is quite easy. After successfully installing Node.js, we can use install the git client from Git Client Official website.

Now we can install the Cordova with following command line:

sudo npm install -g cordova

Create First Cordova (PhoneGap) Project in Command Line

After we install the Cordova cli successfully, we can use following command line to create our first Cordova/PhoneGap project.

cordova create hello com.jmsliu.helloworld HelloWorld

Above command line will help us create a Cordova/PhoneGap project named HelloWorld. The project folder is hello. The package name is com.jmsliu.hellowworld.

Add IOS Platform into Cordova/PhoneGap Project

We already have a simple Cordova (PhoneGap) project. Now we can configure this project to target a certain platform or several platforms. The following command will help us set the project to target IOS platform.

cd hello
cordova platform add ios

To debug and run the project app in iOS simulator, we need to install the Xcode. We can download and install the latest Xcode from App Store. If we have Xcode in Mac, we can run the Cordova project in iOS simulator:

cordova emulate ios

In this step, we may meet this error:

iOS-sim was not found. Please download, build and install version 3.0.0 or greater from into your path. Or ‘npm install -g iso-sim’ using node.js

As the error message says, we need to use following command line to install the iOS-sim module for Cordova (PhoneGap):

npm install -g iso-sim

Now, please run the emulate iOS command again and we will see our first Cordova project running in the iOS simulator.

cordova project on ios simulator

Permission Denied When We Are Running Cordova/PhoneGap Project

Sometimes, when we using SVN to manage our project version, we may face this permission denied error when we are running the Cordova (PhoneGap) project in the simulator. The error message may look like:

platforms/ios/cordova/build: Permission denied

To solve this problem, we have to change the whole project folder, its sub-folder and all files permission by following command line:

sudo chmod -R 777 project_folder/

Tagged with:  

Leave a Reply

WordPress Blog

Free WordPress Themes