Well done!

You have completed HTML5 Mobile Web Applications!

Preview

HTML5 Mobile UI: Development Tools

In this video, we take a look at the development tools that we'll be using while developing the application. These tools include Google Chrome and the iOS Simulator. Links: Google Chrome iOS Developer

This video doesn't have any notes.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

[Development Tools] 0:00

[?music?] 0:03

[Jim Hoskins] So now that we've decided what libraries we want to use 0:05

in our application--or at least try to use in our application -- 0:08

let's start getting our development environment set up. 0:11

The first thing we want to set up is a local web server. 0:14

Now, this is outside of the scope of this particular application, 0:17

and we could technically develop all of this just using the file system, 0:21

but for our cases, we simply want to be able to open our web server of choice 0:24

whether it's Apache or some sort of package, and be able to go to localhost 0:28

and maybe even a subdirectory within it 0:32

and be served our application. 0:35

Now, since the entire application is using the front end, JavaScript, 0:37

there's no back end necessary. 0:41

We don't need anything like PHP, Python, or Ruby 0:43

in order to handle our application. 0:46

It's all static files, so we just need a simple web server 0:49

to host those files. 0:52

The second we obviously need is a browser. 0:54

Now, you'll notice I'm using Chrome right now google.com/chrome 0:56

and besides being my normal development kit, 0:59

it also makes for being one of the best development kits 1:01

to work with jQuery Mobile. jquerymobile.com 1:04

That's because jQuery Mobile it optomized for webkit browsers 1:07

and Chrome is a webkit-based browser. 1:10

You can also use Safari, apple.com/safari 1:13

but Chrome, I find, has better development tools and is a lot faster. 1:15

So we're actually going to be using Chrome more than anything to test our application. 1:18

We could test everything in the iPhone Simulator, which we'll see in a moment, 1:22

but it's faster to refresh something in Chrome 1:27

as well as we'll have the development tools at our fingertips, like so, 1:30

to debug any problems that we run into. 1:35

Now, while the browser will give us a great idea of what our application looks like 1:39

and behaves, the next thing we want to use is a Simulator 1:43

to actually test what it would be like in the actual mobile browser. 1:47

The easiest one for us to set up is the iOS Simulator, 1:52

but of course, this is only going to work on the Mac. 1:55

Now, we've seen the iOS Simulator before and it looks a lot like this. 1:58

We can open up our Safari browser 2:02

and simply visit localhost like we would in any other browser. 2:05

So to get this installed, we actually need to download the iPhone SDK from Apple. 2:09

Now, this is the full application developer or software developing kit 2:15

from Apple, so it's actually a very large download. 2:19

To get it, we're going to go to the Apple iOS Development Center 2:22

developer.apple.com/devcenter/ios/index.action 2:25

and we want to download the iPhone SDK. 2:28

Now, you do need to register as an iOS Developer, which is free. 2:30

It will cost you money if you want the license in order to be able to 2:33

submit your apps to the App Store, but for simply obtaining the iOS Simulator, 2:36

you do not need to pay a fee. 2:41

So if you don't have an Apple ID already, simply click Register 2:43

and we'll log in. 2:47

Now, I'm going to log in. 2:48

And once you sign in, you'll be taken to this page. 2:57

We can click on Downloads or simply scroll down to this Downloads section here 2:59

and you want to Download the latest X Code Version 3:03

with the iOS SDK, and right now that Version is X Code 3.2.6 3:06

and the iOS SKD for iOS Version 4.3. 3:11

Now, this is going to be several gigabytes--usually around 5 gigabytes-- 3:16

so it's something you want to be doing before you actually need it 3:19

and I have already obviously set it up. 3:23

Once you download it, simply run the installer. 3:26

From your Macintosh hard drive, you're going to want to open the Developer folder, 3:29

the Platforms folder, the iPhone Simulator.platform, 3:35

Developer, Applications, and the iOS Simulator. 3:40

You may want to create a shortcut for this on your desktop 3:47

or Dock, or you can simply open it by typing iOS Simulator 3:50

into the Spotlight Search on the Mac 3:54

and it'll bring it up very quickly. 3:57

Doing so will open up the iOS Simulator, 4:00

and you can simply open up Safari and navigate to whatever you want. 4:02

Now, while simulators are nice, nothing beats having an actual phone. 4:06

If you have an iPhone or an Android phone, use it while developing your application. 4:10

If you have a friend or colleague who has another kind of phone, 4:14

maybe ask if you can borrow it. 4:17

Besides just eliminating the differences between the simulator and the real phone, 4:20

testing on an actual device really gives you a feel for how the application works, 4:24

so whenever you have the chance, always try to develop on a real device. 4:27

You need to sign up for Treehouse in order to download course files.

You need to sign up for Treehouse in order to set up Workspace