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 https://github.com/phonegap/ios-sim 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.
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/