Part 1: ID's, Apple Developer and PhoneGap Build Accounts
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 different parts, this is Part 1.
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 proceed to Part 2a: Apple Certificates. If not please start at Part 1: and follow the step by step instructions.
To build your PhoneGap App you will require an Apple Developer License ($99 USD)
Development for Android and Windows is free but not covered in this tutorial but I will be publishing an Android version shortly.
Update: The Android Tutorial is now available
- 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
- PhoneGap App Build
- Deploying to iOS
Before we start:
As you progress through this tutorial you may think to yourself, "this is a lot of work to get a 360˚ project onto an iPad", and you are right. The good thing is that once you have completed and installed your first app the next project you want to publish to your iPad takes only a couple of minutes to build and install.
For example, once the Adobe ID, Apple ID and Apple Developer Account are created and set up then all you need to do is login.
Once the Apple Certificates have been created, a not inconsiderable part of the tutorial, each subsequent project only requires an App ID and a provisioning profile.
Assets use in setting up the project like the configuration.xml and icons can be reused and the PhoneGap build process is quick and easy.
So hang in there through the complex stuff because when you load your first app onto your iPad it will be worth it.
If you don't already have an Adobe ID you can set one up within the Adobe PhoneGap Build application
1. Browse to the URL https://build.phonegap.com (figure #1) and select "Get Started"
2. As you don't already have an Adobe ID I will presume you don't have a Creative Cloud account. So in this step of the tutorial we are going to select the Free plan which allows you to create 1 app with a maximum app size of 50mb
Note: If you already have an Adobe ID and an Adobe Creative Cloud Membership you already have access to PhoneGap at the highest level
3. Select the "Completely Free" option (figure #2)
4. On the 'Sign in to continue" page select the link "Get an Adobe ID" (figure #3)
5. Fill in the Name, Email Address, Password and Location fields, check the Terms and Conditions and then select "Sign up" (figure #4)
6. The "Welcome to Adobe PhoneGap Build" page will be displayed (figure #5)
7. That's it for now with the Adobe ID and PhoneGap Build website
If you don't already have an Apple ID you can set one up on the Apple ID website
1. Browse to the Apple ID website https://appleid.apple.com/#!&page=signin (figure #5)
2.Scroll to the bottom of the page and select "Create your Apple ID>"
3. Fill out the form on the 'Create Your Apple ID' page, when you've filled out all the fields on this screen, click "Continue" (figure #6)
3. A form requesting you verify your email is displayed (figure #7)
Apple will send a verification email to the email address you entered in the form (figure #8)
Enter the 6-digit confirmation code from the email on the website and click "Continue" to create your Apple ID (figure #9)
4. Your account page is displayed (figure #10) and your Apple ID is confirmed
Apple iOS Developer Account:
Note: without an active, paid, Apple Developer Account you will not be able to build the PhoneGap App as the iOS app requires certain certificates to be applied to the app build.
1. Browse to the Apple Developer Program page https://developer.apple.com/programs/ and select the "Enroll" button at the top right of the page (figure #11)
2. An overview of the different types of Enrollment available for Apple Developers (figure #12). Scroll to the bottom of the page and select "Start your Enrollment
3. Enter your 'Apple ID' and password in the Developer Login Screen (figure #13) and select "Sign In"
4. On the 'Profile' page confirm that your email address, name, and Country location is correct, then select "Individual/Sole Proprietor/Single Person Business" from the Entity Type dropdown. (figure #14)
5. Select "Continue"
6. On the 'Your Information' page fill in the Contact Information for your iOS Developer Account (figure #15)
7. At the bottom of the screen, read the Apple Developer Program License Agreement, check the 'By checking this box I confirm that I have read and agree...’, box, then click "Continue"
8. On the 'Summary for Review' page confirm the Apple ID Information, Entity Type, and Contact Information are correct and select "Continue"
9. On the 'Purchase Details' page select "Purchase" to enroll and pay for your yearly iOS Developer Account (figure #17)
Note: If you would like automatic renewals select the auto-renewal box (this is option and not required),
10. Sign in with your Apple ID/Password and select "Sign In" (figure #18)
11. Select either 'Credit/Debit Card', Fill in your 'Billing Contact', 'Billing Address' and 'Payment Method' fields and select "Continue" (figure #19)
12. Fill in any remaining information on the following screens. Apple will send a confirmation email within 24 hours notifying you that your iOS Developer Account was successfully created! (figure #20)
This concludes Part 1, click here to proceed to Part 2a: Apple Certificates