Offline Virtual Tours for iOS using Adobe PhoneGap Build, Part 2b

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

Part 2a: Apple Certificates

  • Setting up the Certificate
  • Generating the Certificate Signing Request (CSR) file
  • Creating the iOS Development Certificate

Part 2b: Apple Certificates

  • 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

figure #25:  Toggle arrow

 


2. Right or Control click on the 'key' and select 'Export "your certificate name"... (figure #26)

 
 figure #26: Export certificate

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

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

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!
 
PhoneGap-Part2-28.jpg
 

6. Once you have entered your password, select 'OK' (figure #30)

 
 figure #30: Enter and select OK

figure #30: Enter and select OK

 

7. Select 'Allow' (figure #31)

 
PhoneGap-Part2-30.jpg
 

8. The .p12 certificate has been added to your folder along with the other certificates (figure #30)

 
Part2b-7.jpg
 
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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

figure #46: Register the device

12. And now the device is registered you can click on 'Done' (figure #47)

 figure #47: Registration complete

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

figure #48: New Development Provisioning Profile

2. Choose iOS App Development and click the 'Continue' button (figure #49)

 figure #49: iOS App Development profile

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

figure #50: Select App ID

4. Go ahead and select 'All' and click on the 'Continue' button (figure #51)

 figure #51: Select Certificates

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

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

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

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

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

figure #56: Done

This concludes Part 2b, continue to Part 3: Project and Required Files

   

Tony Redhead

93 Maud Street, Unley, SA, 5061, Australia