Part 2b, Generating your Apple Certificates
This, step by step, tutorial describes how to use Adobe PhoneGap to create an app that you can install on your iOS device to play Pano2VR or Krpano projects offline. It can also be used to distribute apps to clients for use on their specified iOS devices.
The tutorial is presented in four parts, this is Part 2b.
Note: This tutorial is designed for users on Apple Computers and iOS devices iPhone and iPad. In order to create a PhoneGap build containing your VR project you will need to have an Adobe ID, an Apple ID and an Apple Developer Account. If you have all of these then continue with this tutorial. If not please follow the step by step instructions in Part 1: ID's, Apple Developer and PhoneGap Build Accounts
Part 1: Adobe ID, Apple ID, Apple Developer Account
- Creating your Adobe ID
- Creating your Apple ID
- Signing up for an Apple Developer Account
- Setting up the Certificate
- Generating the Certificate Signing Request (CSR) file
- Creating the iOS Development Certificate
- Creating the .p12 Certificate
- Creating the App ID
- Register Devices
- Provisioning Profile
Part 3: Project and Required Files
- Assets
- Config.xml
Part 4: Preparation, Required Files, App Build and Deployment
- PhoneGap App Build
- Deploying to iOS
Creating the .p12 Certificate
The PKCS#12 format is a binary format for storing the server certificate, any intermediate certificates, and the private key into a single encryptable file. The .p12 file contains the certificates Apple needs in order to build and publish apps.
1. Toggle open the certificate by clicking on the 'arrow' to the left of the certificate (figure #25)
figure #25: Toggle arrow
2. Right or Control click on the 'key' and select 'Export "your certificate name"... (figure #26)
figure #26: Export certificate
3. This opens a Save File dialog box and we are going to save this as a .p12 file (figure #27)
figure #27: Save Certificate dialog box
4. I like to rename the file, in this example I'm going to rename it PhoneGapTutorial.p12. Select the PhoneGap Tutorial Assets folder where your other certificates are saved and click on the 'Save' button (figure #28)
figure #28: Rename and Save
5. You are now going to be asked for a Password (figure #29)
Note: It's very important that you remember this Password. There is no way to recover it!
6. Once you have entered your password, select 'OK' (figure #30)
figure #30: Enter and select OK
7. Select 'Allow' (figure #31)
8. The .p12 certificate has been added to your folder along with the other certificates (figure #30)
Note: With the generation of this certificate we can now go back to Safari and the Apple Developer site.
Creating the App ID
Now we are back in the Apple Developer site we need to create an 'App ID'
Note: An App ID is a unique value that will be used by the system to make sure that each app is uniquely identifiable.
1. Click on the 'App IDs' under the Identifiers and click the '+' button in the upper right (figure #33)
figure #33: App IDs
Note: As you can see, I already have several App IDs. Your list should be empty. But since I have been developing iOS applications, these apply to some of the apps I've built in the past.
2. In the App ID Description I'm going to name it 'PhoneGap Tutorial' (figure #34)
figure #35: Adding the App ID Name
3. Scroll down the page until you get to the App ID Suffix section and the Wildcard App ID.
Note: We are going to generate a wildcard App ID. The format of this Apple ID follows the standard reverse domain notation. com.domainname.*
The advantage of creating a wildcard App ID is that it rather than creating a whole new ID every time we want to create a new app, we simply append a new name the app id in the config.xml file
4. Go ahead and enter your wildcard ID in this field. I'm going to enter 'com.phonegaptutorial' and then the '*' asterisk/star (figure #35)
Note: You need to have all the other app services unselected at this time.
figure #35: Wildcard App ID
5. Scroll down to the bottom of the page and click on the 'Continue' button (figure #36)
figure #36: Continue
6. The Confirm your App ID page with a summary of the App is displayed. Scroll down to the bottom of the page and click on the 'Register' button (figure #37)
figure #37: Confirm your App ID
7. With that the Registration is complete. Scroll down to the bottom of the page and click on the 'Done' button (figure #38)
figure #38: Registration Complete
8. In the iOS App IDs we can see the ID we just built called Red360 PhoneGap Build. We have finished with the 'App IDs' (figure #39)
figure #39: iOS App IDs
Register Devices
The next step in enabling development on an iOS device is to obtain each devices's unique identifier, or UUID.
Note: We are allowed up to 100 devices per account for testing and development.
1. To register a new device select 'All' under Devices then click on the '+' button in the top right of the page (figure #40)
figure #40: Add a new device
2. I want to add my iPad Air so under Register Device in the 'Name:' field I will add Tony iPad Air (figure #41)
figure #41: Name of new device
3. Now we need to locate the UDID of the iPad Air. To do that, we're actually going to open iTunes. So minimize Safari
Note: don't close Safari as we will be returning to this page shortly.The UDID is a 40-character string that is specific to each device. To locate it we need to do the following;
4. Open iTunes on the desktop, not iTunes on your iPhone/iPad (figure #41)
figure #41: iTunes
5. Plug your device into your computer and it will be recognized by iTunes. Click on the small device icon to show the Summary information (figure #42)
Note: Click on 'Summary' if it's not already selected
figure #42: Device summary
7. Click on the Serial Number until the display changes to show the UDID number of the device (figure #43)
figure #43: UDID number
9. Right click on the number and select 'copy' from the popup (figure #44)
Note: you cannot select and copy the number
figure #44: Copy the UDID number
10. Return to Safari and paste the number into the 'UDID field'. Click on the 'Continue' button (figure #45)
figure #45: Paste in the UDID and Continue
11. Review that the information you have added is correct and click on the 'Register' button (figure #46)
figure #46: Register the device
12. And now the device is registered you can click on 'Done' (figure #47)
figure #47: Registration complete
Provisioning Profile
Our next step is to generate our Provisioning Profile to install our app on our iOS device. A Provisioning Profile enables your app to run by identifying you through your developer's certificate and your device as listed by UDID.
1. In the developer portal scroll down to the Provisioning Profile section and click on 'Development' and generate a new profile by clicking on the '+' button in the upper right (figure #48)
figure #48: New Development Provisioning Profile
2. Choose iOS App Development and click the 'Continue' button (figure #49)
figure #49: iOS App Development profile
3. Select the App ID we generated in 'Step 2. Creating the App ID' which in my case was PhoneGap Tutorial from the dropdown menu and click the 'Continue' button (figure #50)
figure #50: Select App ID
4. Go ahead and select 'All' and click on the 'Continue' button (figure #51)
figure #51: Select Certificates
5. I'll select 'All' again to let it run on all these devices and click the 'Continue' button (figure #52)
figure #52: Select Devices
6. Provide a name for the Profile and click on the 'Continue' button (figure #53)
figure #53: Name the Profile and generate the certificate
7. The Provisioning Profile has been generated so click on the 'Download' button and save the profile to the folder of assets (figure #54)
figure #54: Download and Save
8. Move the Provisioning profile from the Download folder to has been saved to our folder of assets (figure #55)
figure #55: Provisioning profile saved with our other Assets
9. Click on 'Done' and we are have finished creating all our certificates
figure #56: Done
This concludes Part 2b, continue to Part 3: Project and Required Files
