Part 4: PhoneGap App Build and Deployment to iPad
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.Finishing up
The tutorial is presented in four different parts, this is Part 3.
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
Before we start:
Glad we got to the end of all that certificate stuff. It gets much easier from here on in. In this part we will take a standard Pano2VR V5.2.3 project and prepare it for PhoneGap. All we need to do is add in a congif.xml file and some icons and splash screens for the iPad. I've provided a link to download sample files in an Assets Folder in the Part 3: Asset Folder section.
If you want to follow my naming conventions as you go through this process you can go back after you have finished the tutorial completely and re-create a new set of certificates using your own names.
Assets Folder
1. Download the PhoneGap_Assets.zip
2. Unzip to your desktop
3. The "PhoneGap_Assets" project folder contains;
Sample Pano2VR V5.2.3 project "myapp_p2vr" consisting of;
- index.html
- pano.xml
- pano2vr_player.js
- pano2vrgyro.js
- skin.js
- images (folder)
Sample Krpano project "myapp_krpano", built using MAKE VRTOUR (NORMAL), consisting of;
- index.html (rename tour.html)
- tour.xml
- tour.js
- panos (folder)
- plugins (folder)
- skin (folder)
in addition each project has two identical assets required by iOS and PhoneGap;
- config.xml (modified for iPad)
- res (folder), containing icon/ios (folder of iOS icons) and screen/ios (folder of iOS splash screens)
Note: I'm not going to discuss or show how to create the project, as I assume you are already up-to-speed with Pano2VR or Krpano. I will take a quick look at the config.xml file and the modifications you will need to make as well as discuss a great icon builder you can use to create your own icons and splash screens.
Feel free to use either the Pano2VR or Krpano version in Step 4.
Config.xml
Note: This is a very important file in Phonegap as all applications built are configured using the config.xml file.
1. Open the 'config.xml' file in the myapp project folder in a text editor. I use TextWrangler but you can use whatever text editor you like. (figure #1)
figure #1: Config.xml file
2. For the purposes of this tutorial we are going to use the config.xml almost as it is. If you want to you can modify the author entry tag with your own details (figure #2)
figure #2: Update Author tag
3. Resave the file overwriting the old one
Note: in the config.xml you will see a section platform name = "ios". This section contains links to the Apple icons and splashscreens. For this tutorial I've just made a number of simple generic graphics using the PhoneGap logo
You can find these images in myapp_(pano2vr|krpano)/res/icons/ios in the project folder.
If you wish to generate some graphics of you own I'd recommend the online PhoneGap Resource Generator it's the application I used to generate the graphics in the tutorial project (figure #3)
figure #3: PhoneGap Tutorial App iOS splash screens
This concludes Part 3, the fourth and final part is next Part 4: Preparation, Required Files, App Build and Deployment
