iOS Development for PhoneGap Windows Developers using PhoneGap Build

PhoneGap (Apache Cordova) is great. If you’re already familiar with web technologies (HTML, CSS and JavaScript) you can easily start coding web apps that will be embeded on a mobile native app that can be installed in a mobile device (iOS, android, windows phone, blackberry, etc).

But one thing that is a little confusing at first is deploying for iOS devices when you’re a windows developer. In the following tutorial we’re going to follow a series of steps to deploy our app to a iOS device using PhoneGap Build.

Note: this tutorial is targeted for PhoneGap developers using windows or linux, testing primarily in Android. But this tuturial should work for PhoneGap developers using mac too, actually for this tutorial we’re going to need a mac to borrow at least.

Requirements

[ ] a Mac to borrow (should be e an Intel-based Mac)
[ ] an iOS Device for testing (could be an iPod Touch, iPad or iPhone)
[ ] an Apple ID
[ ] Subscription to the App Developer program
[ ] A mac software called “Keychain Access” if the mac that you took borrowed don’t have it, you can install “XCode” and it will install it automatically.
[ ] A phonegap App running in windows with android, to make the initial set-up you can follow Charles Chen post: Step by Step Android Development with Cordova and IntelliJ, I highly recommend you this tutorial, it’s easy to follow, and it does not have a lot of text like this one.
[ ] A phonegap account (to have access to the remote build app).

Get an Apple ID

Create an apple ID (this is free, and you need one to enroll to the iOS Developer program):
You can get one at: https://appleid.apple.com/cgi-bin/WebObjects/MyAppleId.woa/wa/createAppleId

Get an Apple Developer program account (iOS Dev Enrollment)

You are going to be asked to enroll as an individual or as a company, choose whatever accommodate to you:

https://developer.apple.com/programs/start/standard/

Activate your Apple Developer Program

Once you have both your apple ID and iOS Dev Enrollment, you have to activate your apple developer account, bellow are summarized the necessary steps:

  1. Once you have both your apple ID and iOS Dev Enrollment, you will need to sign in for Apple IOS Dev program enrollment.
  2. You will need to fill a form (divided in five steps) to Activate your program.
  3. Submit your billing information
  4. Select a program
  5. Review
  6. You must agree to the TOS License.
  7. And finally you can activate your Developer program.

Download & Install XCode in the Mac

There are some options to install xCode, the easiest way to install it is by downloading it from the app store.

Alternatively you can download it from:
https://developer.apple.com/downloads/index.action

Building the iOS Package on PhoneGap Build

PhoneGap build is very easy to use, once you have the code for your app, you just need to zip your “www” folder, and upload it to PhoneGap, then the app will build the app for all the selected devices, it’s really straightforward, except for iOS; In order to build an iOS package, phonegap needs a “phonegap iOS key” (I can’t find an official name for this key).

What is a PhoneGap iOS key?
Is a key that PhoneGap Build need to create a package for an iOS device (apk file).

Creating a PhoneGap iOS key

To create this key, phonegap needs two things:
a) an iOS Developer certificate (p12) file
b) an iOS Device Provisioning Profile

a) Getting the iOS Developer certificate (p12) file:
1- Login into the iOS Developer Center
Go to https://daw.apple.com/cgi-bin/WebObjects/DSAuthWeb.woa/wa/login?&appIdKey=891bd3417a7776362562d2197f89480a8547b108fd934911bcbea0110d07f757&path=%2F%2Fdevcenter%2Fios%2Findex.action

the login should look like this:
iOS dev program login

2- Go to the “Certificates, Identifiers & Profiles Section”
The link for this section is bellow the upper right corner of the iOS Dev Center Home page.

Screen Shot 2013-12-13 at 12.55.32 PM

3- Click the “Certificates”Folder:
Screen Shot 2013-12-13 at 12.57.09 PM

4- Click on the “+” (plus) sign button bellow the righ top corner:
Screen Shot 2013-12-13 at 12.58.40 PM

5- Set your certificate as “iOS App Development”under the Development Section and click on the continue button at the bottom

Screen Shot 2013-12-13 at 5.22.11 PM

6- Create a CSR file

  1. Open the “Keychain Access” program (for not mac users, you can open almost any mac programs by writing the program name in spotlight, to open spotlight just press the “command” key and the spacebar).
  2. Request a Certificate from a Certificate Authority, Within the Keychain Access drop down menu, select Keychain Access > Certificate Assistant > Request a Certificate from a Certificate Authority, (be sure to select “Request a…”);  It should prompt the following screen:

Screen Shot 2013-12-13 at 5.23.34 PM

You should set your Email, a common name for your certificate, left the “CA Email Addresss”and set the      “Request is” field as “Saved to disk”, and press the “Continue” button.

Now back to the Apple Dev Center press the continue button:

7- Upload the CSR file (the certificate) that we created in step 6, and press Generate

Screen Shot 2013-12-13 at 5.27.39 PM

You should see an screen like the following, click on the “Download your Certificate”, and press “Done”

Screen Shot 2013-12-17 at 11.24.27 PM

Then locate your certificate (it should be in the Downloads folder by default), the name of my file for this tutorial is “ios_development-2.cer”, double click that file and you will open the “Keychain Access” program again;

To locate the certificate after open the “Keychain Access”: filter by “login”under “keychain”and, “My Certificates” under “Categories”, you should see your certificate with the alert “this certificate is not yet valid”.

We are going to export this certificate right clicking the certificate and selecting the “Export: ‘iPhone Developer’  ” option

Screen Shot 2013-12-13 at 6.17.36 PM

It will prompt for credentials for this key (be sure to save this password, because phonegap will ask for it once a month if you want to build)

Screen Shot 2013-12-13 at 5.31.04 PM

Then the app will prompt for the Mac User Password, set the password, and then go to your File System to locate the generated Personal Information Exchange File (.p12)

Register the Development Device to the Apple Dev Center

Under the Devices Section, click on the “+” (add) button bellow the right top corner

Screen Shot 2013-12-17 at 11.37.48 PM

To register a Dev Device you will need to named and the Device UDID:

To get the Device UDID you can connect the device into the computer, open iTunes, go to the iOS Device properties and copy the UDID from there:

image003

Copy that UDID and set it into the Device Registration Form, name your device and click continue, and then click “Register”

Screen Shot 2013-12-13 at 5.33.38 PM

Create an App ID

You are going to need you App ID in order to create a Provisioning Profile, you can add this App ID under the “Identifiers” Section, you have to set the “App ID Description”, and then set the “App ID Suffix”, set this suffix as an “Explicit App ID” If you have a plan to incorporate your app with services like In-App Purchase, Data Protection, etc, or want a provisioning profile unique to a single app, you must register an explicit App ID for your app, or you can select a Wildcard App ID, this allows you to use a single App ID to match multiple apps, and then click continue, As a last step for the App ID Generation, just confirm your values.

Getting the The Provisioning profile

The next step is getting the Provisioning profile, go to the “Provisioning Profiles” section, and then click the “+” button at the right top corner (almost the same procedure as the last steps)

Screen Shot 2013-12-17 at 11.48.09 PM

Set the device as an “iOS App Development” Profile and press continue

Screen Shot 2013-12-13 at 5.36.18 PM

In the next screen select an Apple ID (the one that we created in the last step)

Screen Shot 2013-12-17 at 11.49.20 PM

In the next screen select your Certificate and press continue (the one that we created before)

In the Next step you have to select the device for the current Provisioning Profile and then Click on the “Continue” button (the one that we add in the devices section)

Screen Shot 2013-12-17 at 11.50.14 PM

In the following screen, name the profile and click on “Generate”

Screen Shot 2013-12-17 at 11.51.06 PM

In the following screen you can Download the Profile and then click “Done”

Happy note: take a 5 minutes break, the boring part is done, next steps would be more enjoyable

Remote Build  with PhoneGap Build

Login into PhoneGap Build, the first thing that you’re going to see is the following image, press the “upload a zip file” button

Screen Shot 2013-12-13 at 6.01.31 PM

Then select and upload the zip file that contains your “www” folder, usually you’re going to submit a file named “www.zip”.

Once the app is uploaded press the “Ready to Build” button.

Screen Shot 2013-12-13 at 6.06.20 PM

You’ll noticie something unusual, all the platforms performed the build correctly except for iOS, the reason why is because PhoneGap Build needs the iOS key, we’re going to create that key with the provisioning profile and certificate that we previously created.

Screen Shot 2013-12-13 at 6.07.31 PM

Add the PhoneGap Build iOS Key

Under the iOS build section, open the Dropdownlist and select the “add a key” option.

Screen Shot 2013-12-13 at 6.10.23 PM

Set a title for this specific Build Key, choose the previously generated Key and Provisioning Profile and click the “submit key” button.

Screen Shot 2013-12-13 at 6.45.20 PM

Phonegap will try to generate a new build automatically, but it will fail, that’s because the key is locked by default, you have to press the yellow button with a lock, and insert the CERTIFICATE password.

Screen Shot 2013-12-13 at 6.45.50 PM

Submit the password (remember that once a month you will need to resubmit this password),

Screen Shot 2013-12-13 at 6.46.13 PM

Rebuild the app and you will have your “ipa” file ready to install in the selected device for the Submitted Provisioning Profile.

Screen Shot 2013-12-13 at 6.59.44 PM

Install the “ipa” build in the iOS device

  1. Download the “ipa” file from the phonegap build
  2. Double Click the “ipa” file, itunes should open this file and it will add the app to your itunes, or it will ask to replace the app if it is a new build.
  3. Connect the Development Provisioned iOS Device
  4. On iTunes navigate to your device, it should appear below the search input in the right corner as a button.
  5. Under the device options go to the “Apps” tab, your app should appear there under the “Apps” List, click the “install” button for the selected app to install in this device, and the “install” button should change to “will isntall”

Screen Shot 2013-12-17 at 11.54.26 PM

The last step is to just press the “Apply” button in the right bottom corner, and your application will be installed in your development device ready to be tested.

Resources

wow, that was a really long and boring post, the good stuff in PhoneGap is programming, so this time the boring stuff was on me : ), this post was a little difficult, so if you’re following this step by step guide and something fails, please be free to contact me, and I’ll try to edit the post (probably I forgot to add an step)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s