Offline Virtual Tours for iOS using Adobe PhoneGap Build, Post #1

Post #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 three different posts, this is Post #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 Post #2: Apple Certificates. If not please follow the step by step instructions below.
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

Post #1: Adobe ID, Apple ID, Apple Developer Account

  • Creating your Adobe ID
  • Creating your Apple ID
  • Signing up for an Apple Developer Account
Note: Post #2 and #3 are currently in development

Post #2: Apple Certificates

  • Creating your Apple Certificates

Post #3: Preparation, Required Files, App Build and Deployment

  • Preparing your Project Files
  • Icons and Splash Screens
  • PhoneGap App Build
  • Deploying to iOS
Note: in order to create a PhoneGap build containing your Pano2VR 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 Post #2: Apple Certificates. If not please follow the step by step instructions below.

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

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

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

Tony Redhead

93 Maud Street, Unley, SA, 5061, Australia