The Difference Between Building with PhoneGap and PhoneGap Build

I’ve been [developing iOS applications on a windows machine][1] for about 3 years now, and have learned the ins and outs and all the little tricks you need to know to build and deploy iOS applications without a Mac and XCode. The most important tool you will need to use if you’re developing iOS applications without a Mac is [PhoneGap Build][2].

I remember a long time ago when I interviewed [Simon Shepherd][3] he said:

PhoneGap Build has come a long way since Simon has used it, and I’ve never really ran into any problems that made me frustrated with the service. But I totally agree, the use case for PhoneGap Build is if you don’t have a Mac – if you do it makes a lot more sense to use PhoneGap locally, mainly for the following reasons:

• Build times are quicker since they don’t require uploading to the PhoneGap Build server and then downloading the resulting .ipa (and .apk for Android) files
• You don’t need to use your data to download and upload the files and you won’t require an Internet connection
• You have access to a wider range of plugins
• You have more control over the application (you have direct access to the native wrapper, rather than just the web files)

So, the time finally came. I needed a new computer and figured it was time to bite the bullet and buy a Mac. It certainly takes a whole lot of getting used to being a Windows man my entire life, and one of the new things I had to learn was how to use the local command line version of PhoneGap instead of PhoneGap Build.

I could continue using PhoneGap Build as I was, it would certainly be easier in the (very) short term, but I’ll be much better off in the long run by switching to a locally installed version of PhoneGap.

As it is almost any time you try something new, I anticipated that I would run into a few challenges. I figured I would document the process for if you ever find yourself in the same position, or if you’re just curious as to how it all works.

1. Install XCode and the Android SDK

First you’ll need to get your environment set up properly. Unlike PhoneGap Build, building locally requires that you have the SDKs of the platforms you’re targeting installed on your computer.

• You can grab XCode for free [from the Mac App Store][4]
• You can follow [this tutorial for getting the Android SDK set up][5] on your machine

2. Install Cordova

You will also need to have Cordova (remember, for all intents and purposes [PhoneGap and Cordova mean basically the same thing][6]) installed.

NOTE: Since I'm using Ionic I'm going to run all the commands from now on the “Ionic way”. For example, typically with Cordova you might run a command like:

cordova platform add ios

but instead I'll be running:

ionic platform add ios

Just keep this in mind if you're not actually using Ionic.

To install the latest versions of Ionic and Cordova you can run the following command (assuming you have [Node.js][7] installed already, [read here][8] for a more thorough guide on getting Ionic set up):

npm install -g cordova ionic

3. Create a new project

Let’s create a basic app template to test Cordova on. To create a new Ionic application simply run:

ionic start PhoneGapTest tabs

This will create a new Ionic project based on the ‘tabs’ template.

4. Add the platforms you’re targeting

Now you’ll need to add the platforms you are targeting. For iOS and Android you can run the following commands:

ionic platform add ios

ionic platform add android

5. Adding plugins

If you’re used to using PhoneGap Build then you would have been adding plugins to your project by adding them to your config.xml file. When running a local version of PhoneGap you will have to run the following command instead:

<span style="line-height: 1.5;">cordova plugin add [plugin name]</span>

6. Create an iOS or Android build

To create a build for iOS or Android you can run:

ionic build ios

or

ionic build android

Alternatively you can run:

ionic emulate ios

To run your application through the iOS emulator, or:

ionic run ios

To run you application on your device.

6. Export a .ipa file for iOS with XCode

This is the part where I ran into some trouble. I’ve never used XCode before so this was new territory for me. I found a simple [guide to creating a .ipa file][9] by using Product > Archive in XCode, but I couldn’t seem to get it to work. I kept getting this error:

" You have a valid iOS Development certificate in the Member Center, but it is not installed locally. If your signing identity is installed on another Mac, you can export a developer profile on that Mac and import it on this Mac. You can also revoke your current certificate and request a new one. "

After a bit of research, it seems that if the certificate signing request you generated to create your development certificate was generated on a different computer (I did this [with my old Windows machine with OpenSSL][10]). I clicked the button to revoke my current certificate and request a new one. XCode seemed to handle this pretty well, I had a newly generated certificate and provisioning profile generated in the [iOS Member Center][11].

It was at this point I decided to give XCode the flick though and go back to the trusty command line. I found a [really helpful tutorial on testdroid.com][12] which provided a few commands which would archive the project and then export the .ipa file.

First, change into the directory containing the .xcodeproj file for your project:

cd platforms/ios/

Then run the following command to clean the project (I still really don’t get what this does yet, anyone want to fill me in?):

xcodebuild clean -project PROJECTNAME.xcodeproj -configuration Release -alltargets

Create an archive of your project with the following command:

xcodebuild archive -project PROJECTNAME.xcodeproj -scheme PROJECTNAME -archivePath PROJECTNAME.xcarchive

and finally create the .ipa file with the following command, supplying the name of your provisioning profile in the iOS Member Center:

xcodebuild -exportArchive PROJECTNAME -archivePath PROJECTNAME.xcarchive -exportPath PROJECTNAME -exportFormat ipa -exportProvisioningProfile "Name
of Provisioning Profile"```

### 7. Export a .apk file for Android

As always, things seem to be so much easier for Android. Simply run:

ionic build android

and then you can grab your .apk file from:

platforms/android/build/outputs/apk/android-debug.apk

Remember, for both iOS and Android, if you are creating a build ready for distribution you will need to supply a distribution provisioning profile (for iOS) and a keystore file (for Android).

Overall, the process was pretty painless and I'm already enjoying how much quicker it has made my development process, and it also saves [creating a grunt file for automated PhoneGap Build uploads][13] 🙂

 







 [1]: http://www.joshmorony.com/the-challenges-of-developing-ios-applications-on-a-pc/
 [2]: https://build.phonegap.com
 [3]: http://senchatouchdev.com/
 [4]: https://itunes.apple.com/au/app/xcode/id497799835?mt=12
 [5]: http://ionicframework.com/docs/ionic-cli-faq/#android-sdk
 [6]: http://phonegap.com/2012/03/19/phonegap-cordova-and-what%E2%80%99s-in-a-name/
 [7]: https://nodejs.org/
 [8]: http://www.joshmorony.com/getting-started-with-the-ionic-command-line-interface-cli/
 [9]: http://virteom.com/how-to-create-an-ipa-file-using-xcode
 [10]: http://www.joshmorony.com/how-to-create-an-ios-provisioning-profile-and-p12-with-windows/
 [11]: https://developer.apple.com/membercenter/
 [12]: http://testdroid.com/tech/tipstricks-how-to-archive-and-export-ipa-from-script
 [13]: http://www.joshmorony.com/how-to-minify-an-ionic-application-for-production/