After a rather long hiatus and public demand here’s another Phonegap article. My last one was about building a native mobile app with PhoneGap and jQuery Mobile 1.4, most important part talked about creating the PhoneGap project from a command line. I’ve covered only Windows point of view, and an article grew too large to include MacOS, so I’m writing this article to rectify this problem. I will try not to stray too far from the main point, if you need a better understatement read my previous article.
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

Preparations

 
 
Download the listed software:
 
  • XCode
  • XCode Command Line Tool
  • Apache Cordova
 
Install XCode
 
Download from this sources:
 
 
This is rather a large installation (2,09 GB as you can see from the picture) so take some time before the installation completes.
 
ANT PATH
 
Install XCode Command Line Tool
 
Open your XCode and go to this location:  Xcode Preferences  ->  Downloads  ->  Command Line Tools . This will download and install copies of the core command line tools and system headers into system folders on your computer.
 
ANT HOME
 
Download and extract Apache Cordova
 
This next step requires us to download and extract Apache Cordova; it doesn’t need to be the latest version, use any version that you are comfortable with. Download it from here. Click on the Download icon and select  cordova-X.Y.Z-src.zip  to download to your machine. The X, Y, and Z represent the version number of Cordova, for an example 2.5.0. The download includes the code for all of the Apache Cordova supported platforms. 

 
Navigate to the folder where you downloaded the code. Find the  cordova-X.Y.Z-src.zip  file. 
Double click file to extract. This will create a directory named, cordova-X.Y.Z. 
Expand this folder and locate the cordova-ios.zip file and double click to extract it. 
The code for iOS is within the  cordova-ios  directory structure. That structure looks like this:
 
CORDOVA PATH
 
Project creation
 
Thank God for MacOS, unlike my previous tutorial we don’t need Java and Ant here. But this part is still tricky. First we need to open a terminal app. Just click on Spotlight and type Terminal.
 
TERMINAL
 
The terminal app should be listed there, just double click it, and it should open. It should look something like this:
 
TERMINAL
 
Now highlight the bin directory and drag this directory to the open Terminal. This will open up a default terminal window with the path set to the bin directory. There’s another way, just  right click bin folder  ->  click Services  ->  click New Terminal at Folder . This will also open terminal windows at this specific directory point.
 
Now we will need to run the create command to build a new project. Before we do that few warnings. Project directory should not exist, create command will create it automatically. Command line execution should look like this:
 
 ./create  
 
 ./create ~/Documents/CordovaXY/HelloWorld org.apache.cordova.HelloWorld HelloWorld 
 
Where  ~/Documents/CordovaXY/HelloWorld  is our non existent directory, package name  org.apache.cordova.HelloWorld  should always be a unique and project name  HelloWorld  is your arbitrary name.
 
Create command execution should look like this: ANT PATH
 
A new project should/will be created, check that project was really created. To be sure go to your project directory  ~/Documents/CordovaXY/HelloWorld , if it exist and if there’s a content inside you are fine.
 
Open the Project
 
Navigate to the location where you created the project. This guide uses  ~/Documents/CordovaXY/HelloWorld . Double click the  HelloWorld.xcodeproj  file to open the project in Xcode. In the upper left-hand corner of Xcode, click on the Scheme drop down and select the project name, HelloWorld, as the target. 
Click the Device section and select an iOS Simulator such as iPhone 6.0 Simulator. 
Click the Run button in your project window’s toolbar to build, deploy and run the application in the simulator. 

 
Your screen should look similar to: ANT PATH
 

Conclusion

 
More then the tutorial this article was meant to show us how last jQuery Mobile version runs and feels wrapped inside the iOS PhoneGap app. From what I can see it behaves much better than previous jQuery Mobile versions, CSS reductions really helped to make it more fluid and native-like. Page transitions finally feel native-like, unfortunately scrolling still don’t feel fluid, still it is a big improvement over previous versions. Not to mention that iOS version works much better then Android counterpart. In the end, this is a big step for jQuery Mobile, it is finally catching with his commercial brothers Kendo UI and PhoneJs. Thumbs up.
 
 

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.

Blogs worth reading

If you're here looking for information related to the Ionic Framework, you will also like these blogs: