1 00:00:00,000 --> 00:00:03,000 [Development Tools] 2 00:00:03,000 --> 00:00:05,000 [?music?] 3 00:00:05,000 --> 00:00:08,000 [Jim Hoskins] So now that we've decided what libraries we want to use 4 00:00:08,000 --> 00:00:11,000 in our application--or at least try to use in our application -- 5 00:00:11,000 --> 00:00:14,000 let's start getting our development environment set up. 6 00:00:14,000 --> 00:00:17,000 The first thing we want to set up is a local web server. 7 00:00:17,000 --> 00:00:21,000 Now, this is outside of the scope of this particular application, 8 00:00:21,000 --> 00:00:24,000 and we could technically develop all of this just using the file system, 9 00:00:24,000 --> 00:00:28,000 but for our cases, we simply want to be able to open our web server of choice 10 00:00:28,000 --> 00:00:32,000 whether it's Apache or some sort of package, and be able to go to localhost 11 00:00:32,000 --> 00:00:35,000 and maybe even a subdirectory within it 12 00:00:35,000 --> 00:00:37,000 and be served our application. 13 00:00:37,000 --> 00:00:40,000 Now, since the entire application is using the front end, JavaScript, 14 00:00:41,000 --> 00:00:43,000 there's no back end necessary. 15 00:00:43,000 --> 00:00:46,000 We don't need anything like PHP, Python, or Ruby 16 00:00:46,000 --> 00:00:49,000 in order to handle our application. 17 00:00:49,000 --> 00:00:52,000 It's all static files, so we just need a simple web server 18 00:00:52,000 --> 00:00:54,000 to host those files. 19 00:00:54,000 --> 00:00:56,000 The second we obviously need is a browser. 20 00:00:56,000 --> 00:00:59,000 Now, you'll notice I'm using Chrome right now google.com/chrome 21 00:00:59,000 --> 00:01:01,000 and besides being my normal development kit, 22 00:01:01,000 --> 00:01:04,000 it also makes for being one of the best development kits 23 00:01:04,000 --> 00:01:07,000 to work with jQuery Mobile. jquerymobile.com 24 00:01:07,000 --> 00:01:10,000 That's because jQuery Mobile it optomized for webkit browsers 25 00:01:10,000 --> 00:01:13,000 and Chrome is a webkit-based browser. 26 00:01:13,000 --> 00:01:15,000 You can also use Safari, apple.com/safari 27 00:01:15,000 --> 00:01:18,000 but Chrome, I find, has better development tools and is a lot faster. 28 00:01:18,000 --> 00:01:22,000 So we're actually going to be using Chrome more than anything to test our application. 29 00:01:22,000 --> 00:01:27,000 We could test everything in the iPhone Simulator, which we'll see in a moment, 30 00:01:27,000 --> 00:01:30,000 but it's faster to refresh something in Chrome 31 00:01:30,000 --> 00:01:35,000 as well as we'll have the development tools at our fingertips, like so, 32 00:01:35,000 --> 00:01:39,000 to debug any problems that we run into. 33 00:01:39,000 --> 00:01:43,000 Now, while the browser will give us a great idea of what our application looks like 34 00:01:43,000 --> 00:01:47,000 and behaves, the next thing we want to use is a Simulator 35 00:01:47,000 --> 00:01:52,000 to actually test what it would be like in the actual mobile browser. 36 00:01:52,000 --> 00:01:55,000 The easiest one for us to set up is the iOS Simulator, 37 00:01:55,000 --> 00:01:58,000 but of course, this is only going to work on the Mac. 38 00:01:58,000 --> 00:02:02,000 Now, we've seen the iOS Simulator before and it looks a lot like this. 39 00:02:02,000 --> 00:02:05,000 We can open up our Safari browser 40 00:02:05,000 --> 00:02:09,000 and simply visit localhost like we would in any other browser. 41 00:02:09,000 --> 00:02:15,000 So to get this installed, we actually need to download the iPhone SDK from Apple. 42 00:02:15,000 --> 00:02:19,000 Now, this is the full application developer or software developing kit 43 00:02:19,000 --> 00:02:22,000 from Apple, so it's actually a very large download. 44 00:02:22,000 --> 00:02:25,000 To get it, we're going to go to the Apple iOS Development Center 45 00:02:25,000 --> 00:02:28,000 developer.apple.com/devcenter/ios/index.action 46 00:02:28,000 --> 00:02:30,000 and we want to download the iPhone SDK. 47 00:02:30,000 --> 00:02:33,000 Now, you do need to register as an iOS Developer, which is free. 48 00:02:33,000 --> 00:02:36,000 It will cost you money if you want the license in order to be able to 49 00:02:36,000 --> 00:02:41,000 submit your apps to the App Store, but for simply obtaining the iOS Simulator, 50 00:02:41,000 --> 00:02:43,000 you do not need to pay a fee. 51 00:02:43,000 --> 00:02:47,000 So if you don't have an Apple ID already, simply click Register 52 00:02:47,000 --> 00:02:48,000 and we'll log in. 53 00:02:48,000 --> 00:02:57,000 Now, I'm going to log in. 54 00:02:57,000 --> 00:02:59,000 And once you sign in, you'll be taken to this page. 55 00:02:59,000 --> 00:03:03,000 We can click on Downloads or simply scroll down to this Downloads section here 56 00:03:03,000 --> 00:03:06,000 and you want to Download the latest X Code Version 57 00:03:06,000 --> 00:03:11,000 with the iOS SDK, and right now that Version is X Code 3.2.6 58 00:03:11,000 --> 00:03:16,000 and the iOS SKD for iOS Version 4.3. 59 00:03:16,000 --> 00:03:19,000 Now, this is going to be several gigabytes--usually around 5 gigabytes-- 60 00:03:19,000 --> 00:03:23,000 so it's something you want to be doing before you actually need it 61 00:03:23,000 --> 00:03:26,000 and I have already obviously set it up. 62 00:03:26,000 --> 00:03:29,000 Once you download it, simply run the installer. 63 00:03:29,000 --> 00:03:35,000 From your Macintosh hard drive, you're going to want to open the Developer folder, 64 00:03:35,000 --> 00:03:40,000 the Platforms folder, the iPhone Simulator.platform, 65 00:03:40,000 --> 00:03:47,000 Developer, Applications, and the iOS Simulator. 66 00:03:47,000 --> 00:03:50,000 You may want to create a shortcut for this on your desktop 67 00:03:50,000 --> 00:03:54,000 or Dock, or you can simply open it by typing iOS Simulator 68 00:03:54,000 --> 00:03:57,000 into the Spotlight Search on the Mac 69 00:03:57,000 --> 00:04:00,000 and it'll bring it up very quickly. 70 00:04:00,000 --> 00:04:02,000 Doing so will open up the iOS Simulator, 71 00:04:02,000 --> 00:04:06,000 and you can simply open up Safari and navigate to whatever you want. 72 00:04:06,000 --> 00:04:10,000 Now, while simulators are nice, nothing beats having an actual phone. 73 00:04:10,000 --> 00:04:14,000 If you have an iPhone or an Android phone, use it while developing your application. 74 00:04:14,000 --> 00:04:17,000 If you have a friend or colleague who has another kind of phone, 75 00:04:17,000 --> 00:04:20,000 maybe ask if you can borrow it. 76 00:04:20,000 --> 00:04:24,000 Besides just eliminating the differences between the simulator and the real phone, 77 00:04:24,000 --> 00:04:27,000 testing on an actual device really gives you a feel for how the application works, 78 00:04:27,000 --> 00:04:31,000 so whenever you have the chance, always try to develop on a real device.