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:
- Once you have both your apple ID and iOS Dev Enrollment, you will need to sign in for Apple IOS Dev program enrollment.
- You will need to fill a form (divided in five steps) to Activate your program.
- Submit your billing information
- Select a program
- Review
- You must agree to the TOS License.
- 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:
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.
3- Click the “Certificates”Folder:
4- Click on the “+” (plus) sign button bellow the righ top corner:
5- Set your certificate as “iOS App Development”under the Development Section and click on the continue button at the bottom
6- Create a CSR file
- 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).
- 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:
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
You should see an screen like the following, click on the “Download your Certificate”, and press “Done”
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
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)
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
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:
Copy that UDID and set it into the Device Registration Form, name your device and click continue, and then click “Register”
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)
Set the device as an “iOS App Development” Profile and press continue
In the next screen select an Apple ID (the one that we created in the last step)
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)
In the following screen, name the profile and click on “Generate”
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
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.
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.
Add the PhoneGap Build iOS Key
Under the iOS build section, open the Dropdownlist and select the “add a key” option.
Set a title for this specific Build Key, choose the previously generated Key and Provisioning Profile and click the “submit key” button.
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.
Submit the password (remember that once a month you will need to resubmit this password),
Rebuild the app and you will have your “ipa” file ready to install in the selected device for the Submitted Provisioning Profile.
Install the “ipa” build in the iOS device
- Download the “ipa” file from the phonegap build
- 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.
- Connect the Development Provisioned iOS Device
- On iTunes navigate to your device, it should appear below the search input in the right corner as a button.
- 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”
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
- Step by Step Android Development with Cordova and IntelliJ, by Charles Chen, last retrieved on Dec 18, 2013
- Getting everything for building iOS apps with build.phonegap.com, by Martin of Centralway, last retrieved Dec 13, 2013
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)
rob.alarcon 