Join Chris Converse for an in-depth discussion in this video Create and download your native app with PhoneGap Build, part of Creating an iPad App with HTML5 and PhoneGap Build.
Now we have a few options for how we upload our application to the PhoneGap Builder website. The option that I'm going to pick is going to be to compress all of our files into a zip archive. So in the Macintosh platform I can come in here and select all of these files. Right click. Come down and chose Compress Items. This will create a ZIP archive of all of the selected items. If you're on the Windows platform, you can Right click and create a ZIP folder, and then put all of the assets inside of the ZIP folder, or you could use a third party ZIP archive utility. Next I'm going to come up here and just rename this myapp.zip, and then when your ZIP file is ready, we're going to go to build.phonegap.com.
And now from the homepage, I'm going to come up here and click sign in. And I'm going to choose to sign in using my Adobe ID and then hit Return. Now, once we log in, we'll get some navigation at the top. Let's first click on Docs. Inside of the documentation, down here under Configuring your App. You can see a link here that says Configuring your App with config.xml. I'm going to select this and in this first paragraph there's a link to the phone gap start application. I'm going to open this in a new tab. Click over to the new tab. And here you can see a full version of the config file which encompasses all of the different platforms that PhoneGap can compile a native application for.
So I'm going to close this. Let's come back. Let's go to the Apps section. Inside of here we have two ways that we can upload an application. Under Open Source we can paste in a get hub repo. Under Private we can use a private repo or we can come over here and choose the uploaded zip file. I'm going to opt for this, so let's click Upload a zip. From the desktop I'm going to go into the previous web application project that I started from. And then I'm going to select the myapp.zip archive. Then click Choose. What's happening now is the web browser's uploading that zip archive to the PhoneGap Build website.
And once it's been uploaded, the website will extract all of the contents, and then give us a verification screen. So if everything inside of the zip archive is okay, we'll get this button over here that says, ready to build. So let's come over here and click this. What this is going to do is take all the components from this zip archive and then compile this into all of the different various mobile platforms. Once a particular platform is ready, we'll see the icon changes blue and we get a blue underline. Notice over here that the iOS platform is red. Let's move over here and select this. Now when we expand the builds open, we can see all of the information about each of the different platforms.
We can also define collaborators. We're going to Settings. Settings, by the way, if you scroll down here, you'll see this yellow indication here that tells us that we're using the config.XML file to setup the settings. If we were not using a config.XML, we could come in here and use the website to set some of the properties. Let's go back up here under Builds. Next to IOS, we have an error. And the error is because we don't have the key selected. So let's come in here and select this drop down menu. Let's come down and choose Add a Key. Down here for the name.
I'm going to name mine Tea for Two. Next we need to choose our certificate. Our dot P12 file. That's over here on the desktop. Mine's called four Linda dot P 12, click Choose. Next, we need to select our provisioning profile. Let's click Choose File. On the desktop, mine's called demo for Linda.mobileprovision then click Choose. Once those are in place, let's come down, hit Submit. Now what's happening is the PhoneGap build site is uploading the certificate and the mobile provision file and adding that to the archive.
It also notices that the certificate has a password. Let's click on the Lock. Let's enter the password that you entered from the key chain access when you created the certificate. And then click Submit Key. Now with the lock on, let's come over here and choose Rebuild. Now once the PhoneGap build website has successfully recompiled our application, complete with our certificate and mobile provision, we'll have the option over here to download the ipa file. Let's come over here and click Download, and now on the desktop you'll see the downloaded file called tea for two.ipa, which is the native application file type for the iOS platform.
Now, we have two ways that we can get this application over to our iPad. One, is we can drag it into iTunes and just perform a synchronization. The second option is, we can scroll up to the top of the webpage and use a QR scanner application to scan this directly to our device. Now, I'm going to demonstrate the second option here, so I'm going to bring up my iPad. I'm going to run a QR reading application. I'm going to click on the scan button and then I'm going to hold my iPad up so it's pointing right at the QR code on my screen. Once the iPad sees the the destination of this QR code, which is an IPA file that's being hosted on it's PhoneGap build, it's going to prompt me to install this and I can install this from the PhoneGap build website, directly to my iPad.
Notice that the application now takes over the full screen. I don't have the status bar across the top. And embedded media such as video, I don't need to have an internet connection to play some of this content. We can go over to the gallery, and the user experience has been optimized for touch events, so as quickly as I can tap the gallery, we'll see the individual items show up. On the Contact Us page, we have our Google map, which is also touch enabled. We have support for rotation, and then I'll click back through the individual screens in a portrait mode and you can see how all of the art work changes place.