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
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
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.
Tony
Adobe ID:
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"
figure #1: PhoneGap Build homepage
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)
figure #2: PhoneGap select your plan page
4. On the 'Sign in to continue" page select the link "Get an Adobe ID" (figure #3)
figure #3: PhoneGap Build Sign In
5. Fill in the Name, Email Address, Password and Location fields, check the Terms and Conditions and then select "Sign up" (figure #4)
figure #4: Sign Up
6. The "Welcome to Adobe PhoneGap Build" page will be displayed (figure #5)
figure #5: Welcome to Adobe PhoneGap Build page
7. That's it for now with the Adobe ID and PhoneGap Build website
Apple ID:
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>"
figure #5: Apple ID website
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)
figure #6: Apple ID application form
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)
figure #7: verification form
figure #8: verification code email
figure #9: click "Continue"
4. Your account page is displayed (figure #10) and your Apple ID is confirmed
figure #10: Apple ID account page
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)
figure #11: Apple Developer Program page
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
figure #12: Start Enrollment
3. Enter your 'Apple ID' and password in the Developer Login Screen (figure #13) and select "Sign In"
figure #13: Developer login screen
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"
figure #14: Profile
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"
figure #15: Your Information
8. On the 'Summary for Review' page confirm the Apple ID Information, Entity Type, and Contact Information are correct and select "Continue"
figure #16: Summary for Review
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),
figure #17: Purchase Details
10. Sign in with your Apple ID/Password and select "Sign In" (figure #18)
figure #18: Secure Sign In
11. Select either 'Credit/Debit Card', Fill in your 'Billing Contact', 'Billing Address' and 'Payment Method' fields and select "Continue" (figure #19)
figure #19: Payment Screen
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)
figure #20: Activation Code
This concludes Part 1, click here to proceed to Part 2a: Apple Certificates
