1 00:00:00,000 --> 00:00:03,000 [Jim Hoskins] In this Master Class series, we'll be creating an HMTL5 2 00:00:03,000 --> 00:00:06,000 mobile web application. 3 00:00:06,000 --> 00:00:09,000 The application will allow you to take notes, add your location to the notes, 4 00:00:09,000 --> 00:00:12,000 and it'll keep all of the data stored locally. 5 00:00:12,000 --> 00:00:14,000 In this first Master Class of the series, 6 00:00:14,000 --> 00:00:17,000 we'll be setting up the user interface for our application. 7 00:00:17,000 --> 00:00:20,000 In upcoming Master Classes, we'll add the data management logic, 8 00:00:20,000 --> 00:00:23,000 geolocation, and the offline capabilities. 9 00:00:23,000 --> 00:00:36,000 [?music?] 10 00:00:36,000 --> 00:00:43,000 [HTML5 Mobile Development with Jim Hoskins] 11 00:00:43,000 --> 00:00:49,000 So let's take a little look at the application as it will appear at the end of the project. 12 00:00:49,000 --> 00:00:52,000 I'm going to be viewing it in the iPhone Simulator 13 00:00:52,000 --> 00:00:56,000 which we'll go over how to install when we start getting our tools together. 14 00:00:56,000 --> 00:01:00,000 So I'm going to just open up Safari--this is being done for the first time-- 15 00:01:00,000 --> 00:01:07,000 and to load up my application, all I need to do is load up localhost 16 00:01:07,000 --> 00:01:10,000 and we have our application showing up. 17 00:01:10,000 --> 00:01:12,000 So this is our home screen. 18 00:01:12,000 --> 00:01:15,000 It's basically just a button with New Note. 19 00:01:15,000 --> 00:01:20,000 We actually have two buttons right now; we're probably going to remove one of them, 20 00:01:20,000 --> 00:01:25,000 and two list items: a listing of our Most Recent Notes and our Nearest Notes. 21 00:01:25,000 --> 00:01:28,000 We'll just simply open up the New Note 22 00:01:28,000 --> 00:01:31,000 and we can add a note with a title, 23 00:01:31,000 --> 00:01:34,000 so we'll say First Note 24 00:01:34,000 --> 00:01:42,000 and This is our first note's body. 25 00:01:42,000 --> 00:01:46,000 And we have an option to tag it with location, so I'll just turn that to Yes 26 00:01:46,000 --> 00:01:49,000 and we'll click Save. 27 00:01:49,000 --> 00:01:53,000 Now, something that's just popped up for me, since it's our first time doing it, 28 00:01:53,000 --> 00:01:56,000 Mobile Safari would like to use our current location and that's because the device 29 00:01:56,000 --> 00:02:01,000 is actually asking for our GPS location. 30 00:02:01,000 --> 00:02:05,000 So I'm going to allow it, and this is just to allow the actual Simulator 31 00:02:05,000 --> 00:02:08,000 to access the location data of my computer, 32 00:02:08,000 --> 00:02:10,000 so I'll click OK. 33 00:02:10,000 --> 00:02:14,000 And then, the actual iPhone OS in our Simulator 34 00:02:14,000 --> 00:02:17,000 will actually pop up the same confirmation box 35 00:02:17,000 --> 00:02:23,000 saying that the phone is now allowed to share its location with our web app, 36 00:02:23,000 --> 00:02:27,000 which we do want to do, so we'll click OK. 37 00:02:27,000 --> 00:02:29,000 And now, it's created a Note. 38 00:02:29,000 --> 00:02:31,000 We can go into our Most Recent Notes here 39 00:02:31,000 --> 00:02:34,000 and see our First Note has been created. 40 00:02:34,000 --> 00:02:38,000 We can click into that, so we can see all of our information about our Note 41 00:02:38,000 --> 00:02:41,000 that we've created and this is our First Note. 42 00:02:41,000 --> 00:02:43,000 We can see the body of our First Note here, 43 00:02:43,000 --> 00:02:47,000 and since we added Location data, we can see the latitude and longitude 44 00:02:47,000 --> 00:02:53,000 as well as a rendered map with a marker on the point where the Note was created, 45 00:02:53,000 --> 00:02:58,000 in our case, our downtown Orlando office where we're producing these videos. 46 00:02:58,000 --> 00:03:01,000 So we can also go Back, 47 00:03:01,000 --> 00:03:05,000 go back to our list, we can see the Nearest Notes, obviously. 48 00:03:05,000 --> 00:03:09,000 We have a single note. 49 00:03:09,000 --> 00:03:12,000 We can update our location so it can resort it, 50 00:03:12,000 --> 00:03:16,000 and we can do things like actually editing a note by clicking this button up here. 51 00:03:16,000 --> 00:03:22,000 A form will be filled out and we can update it like so 52 00:03:22,000 --> 00:03:25,000 and save it out. 53 00:03:25,000 --> 00:03:30,000 And so now we can see that the Note has been updated with our new punctuation 54 00:03:30,000 --> 00:03:34,000 in multiple places in our application, for instance, here 55 00:03:34,000 --> 00:03:39,000 and on other lists 56 00:03:39,000 --> 00:03:42,000 and on the actual page for our Note. 57 00:03:42,000 --> 00:03:46,000 Now, all of this is happening on a single HTML page. 58 00:03:46,000 --> 00:03:50,000 and all of this can be cached by the browser so you don't even need 59 00:03:50,000 --> 00:03:54,000 to be able to connect to the Internet after the first time you've used the application. 60 00:03:54,000 --> 00:03:59,000 In addition, all of the data is actually being stored on the device itself, 61 00:03:59,000 --> 00:04:02,000 so it's not communicating with any server to store the information. 62 00:04:02,000 --> 00:04:07,000 So again, this can be used completely offline. 63 00:04:07,000 --> 00:04:09,000 So now that we've seen our application, 64 00:04:09,000 --> 00:04:15,000 let's take a look at the planning process for creating our mobile offline web application. 65 00:04:15,000 --> 00:04:18,000 So now we've seen the application that we're going to build. 66 00:04:18,000 --> 00:04:21,000 In the next video, we'll begin the planning process for our HTML5 mobile app.