Hi, this is Jonathan Stark and I want to show you how to take a web app written with HTML, CSS and JavaScript and save it as a native app for an iPhone using PhoneGap. First thing we need is PhoneGap. You can download that at PhoneGap.com slash download. I'm going to grab a zip of the latest stable version and unzip it on my desktop. And here it is. As you can see, PhoneGap supports a number of different mobile platforms. I'm worried about the iPhone. I want to do an iPhone app, so I'm in the iPhone folder. And the first thing to do is go into the dub, dub folder and get rid of these through those in the trash. And I want to throw my web app in there. So let's see what the web app looks like in a browser first. Here we have the web app. And this is just like I said, simple HTML, CSS and JavaScript. Nothing too crazy. I'm using JQTouch for the styling and animation. So you can see how this works. All right, so that's the web app. We want that saved as a native app. So I'm going to just take all of the files copy them and paste them in here. All right, so now they're in there. And let's just see how that looks. I'm going to double click the PhoneGap Xcode project to launch Xcode. And I want to change this to my target. I'm going to do this on the simulator so you can see it, of course. So I just switch that and click Build and Run. It's going to watch the simulator. Takes a second the first time. All right, so now here's my app running natively on the iPhone. This is not running in a browser. It's not running in Safari. This is a native application on the iPhone. It still has all the same behavior. It still slides around. All right, but there's some problems. First of all, there's a 40 pixel gap down here, like that. There is a phone gap icon on the desktop at the front, the home screen of the phone. It says PhoneGap, that's not good either. And when you launch it, it shows the phone gap starts. So I want to change all of those things. So let's go back here. And the first thing I'll change is the name underneath the icon. So that's, it doesn't say PhoneGap right there. Now that's controlled back here in the info.plist. And this is as simple as just changing a bundle display name to, if you like, in this case. I'm going to clean, just in case. And then building around. So you might not have seen it was kind of quick before it launched, but it did change the name to Kilo now. So next, let's change this icon to my custom icon. Let's see, we're going to go to the actual folder. And my web app already had an icon file that I was using as the web clip icon. You may or may not know if you save a, if you save a website to your home screen, and it has a web clip icon show up as the icon on your iPhone home screen. It's kind of cool. So I'm just going to use that exact same file. And I just move it up into the main area, into the iPhone folder directly, and it overrides the PhoneGap one. So I can now clean and build and run. So if you watch the desktop real quick, it should change. Won't just change to the donut. So now we've got that taken care of. So next, let's do the PhoneGap screen, the Startup screen. And I also have a Startup screen previously made for my web app, because you can watch a web app in full screen mode from the home screen. So now I'm just going to move this up into the iPhone folder, overwrite the PhoneGap one. Go through the routine again, build and run. It comes a simulator, and there's the new screen. Great. Let's do that again and watch. At the bottom you'll see there's a little gap at the bottom of the Startup screen that flashes white, and I like that. So let's make the image a little taller. That needs to be 480 pixels tall. Right now it is 460. This is no big deal. Just resize the canvas. 480. Inbang boom. Save, close. Clean. Building run. So hopefully we won't see that white flash down at the bottom. There we go. No white flash. Now I want to get back this 40 pixels that we've lost here. JQ Touch does expand when it's running in full screen mode, but since we're not in Safari, we're not running in full screen mode. So it doesn't realize that we need to be taller. So I'm going to tell it we need to be taller. It's very easy. I just go into the WWW folder. Open up the JQ Touch folder and go to the CSS. Scroll down to the Body section and find this 420 pixels. Just change to 460. Save, clean. Building run. So now we've got the whole screen real estate available to us. So that's pretty cool. Alright. So that's all I've got for you at the moment. I do want to point out that if you were going to actually install this on an iPod Touch or an iPhone, you do have to worry about having your bundle identifier set up appropriately. That's a whole separate topic. But for the time being, this should get you started. Hope you like it. If you have any questions, please put them in the comments.