Click on any phrase to play the video from that point.
[metallic humming]
[ADOBE DEVELOPER CONNECTION]
Hi. I'm Developer Evangelist Kevin Hoyt.
You want to get started with PhoneGap, and I want to help you.
In this session we're going to take a look at how to use PhoneGap for building iOS applications.
Before you go any further, you might as well just stop the video now
because you're going to need to download a few things.
The first thing you're going to need to download is Xcode, which is Apple's developer tool.
[Xcode - developer.apple.com/xcode]
The other thing you're going to need is the latest build of PhoneGap,
which you can get from phonegap.com [PhoneGap - phonegap.com]
Go out, download those 2, and once you have them, come on back, okay?
I'll be here waiting.
All right. Welcome back.
Now you've got Xcode installed and the latest build of PhoneGap available for you to use.
Let's take a closer look at the parts and pieces
included with the PhoneGap distribution.
I have already unpacked that latest build,
and you can see here a variety of different folders for different operating systems--
Android, Bada, iOS, BlackBerry, and so on.
We have all those different folders, and those folders include all the different parts
and pieces necessary for that workflow.
In this session we're going to be talking about iOS,
so I'm going to go into the iOS folder.
In the iOS folder you'll find a disk image.
When we attach that disk image and launch it,
what we will find is an extension for Xcode,
and so it will add PhoneGap functionality specifically into Xcode
for building PhoneGap applications.
I've already done that, so what I'm going to do is just go ahead and start Xcode.
We're going to bring up Xcode here.
When you launch Xcode, it's going to want to ask you, "What do you want to do?"
In this case we want to create a new project so we'll say,
hey, create a new Xcode project.
When I select that it's going to ask me what type of Xcode project do I want to do.
There's lots of different ways to use the tool,
but you'll notice that there's this PhoneGap-based Application already there for me,
and that's from the disk image installation that we did from the PhoneGap distribution
and added that extension into Xcode.
We'll go ahead and select that guy and we'll say Next.
The product name here, we'll call this GapDemo just for the purposes of testing.
And then the company identifier--in this case, obviously, I work for Adobe,
so com.adobe.khoyt, which is going to be a reverse domain way
of identifying the application.
We'll say Next. It's going to ask me where I want to put it.
I have an iOS folder already created for me, nice and clean.
We'll just go ahead and create it in there.
Xcode is going to go to work, it's going to create all the different assets it needs
for this particular project.
Once we have finished creating that, you can see on the main screen here
there's a summary that lets us see the name of the application,
the version of the application, whether or not it can be used in portrait or landscape,
or should the Home button always be on the left or the right,
and all the different ways we could possibly hold the device,
the icon for the application, the splash screen for the application.
Those can all be managed here,
and I encourage you to explore those options.
But what we're going to do is come up here to the top where you can see a Run button,
a Stop button, and a select box here that lets us choose the different versions of iOS
we want to be able to target.
In this case I want to drop down here to iPhone 4.3 Simulator,
and then I move over to the Run button and click Run.
Over here it'll bring up the iOS Simulator,
and we can see a nice big error message.
That's because we haven't done the rest of the configuration.
We'll go ahead and do the rest of the configuration.
Let's come back to Xcode and stop the running of the particular project
and then go ahead and take a closer look at some of the parts and pieces it built
when it built that particular project.
We go into that iOS folder.
Here is our GapDemo folder for our project.
Inside of there we can see the Xcode project and a www directory.
We're going to actually leverage that directory.
That's actually created by the PhoneGap extension that we plugged in to Xcode.
We're going to drag and drop that directory over here into Xcode
and go ahead and tell Xcode that when it builds this application
we are going to want to load up this directory,
include all the assets in that directory with our application.
That's going to be where all of our HTML, JavaScript, and CSS resides.
Now that we've got that plugged in, we go ahead and run this again,
and it comes up and says "Alert." Hey, "PhoneGap is working."
Okay, sounds good. And "Hey, it's PhoneGap. Here's how to get started."
So now we have our first PhoneGap application running on iOS in terms of the simulator.
Next step, let's get it kicked out to an actual device.
For this you're going to need a developer certificate,
and you need to go through the provisioning process at Apple.
Once you've got that accomplished, then you'll be able to actually produce this application
out to the device.
Let me go ahead and come back into Xcode.
I will stop that running of the application.
From this drop-down menu I'll actually go and select my iPod Touch that I have connected,
and then we'll go ahead and run it.
It's going to compile those assets, suck in all the PhoneGap assets
that we told it to watch for, it's going to kick it over to the device,
and you'll hear that guy open up there.
It goes "click" and then it launches. And, voila, we have our very first PhoneGap.
This is the splash screen.
It starts up. Hey, "Alert. PhoneGap is working." Okay, sounds good.
And now we're off to the races.
So that is setting up Xcode, getting the PhoneGap assets
and putting them into Xcode so that we can now build and publish
our PhoneGap applications.
At this point, really, there's nothing more left than HTML, JavaScript, CSS,
the PhoneGap APIs, which we'll learn about in the next session.
So stay tuned. Till next time, I'm Kevin Hoyt.
[ADOBE DEVELOPER CONNECTION]
[metallic humming]
