Well done!

You have completed HTML5 Mobile Web Applications!

Preview

HTML5 Mobile UI: Requirements: Part 1

5:40 with Jim Hoskins

In this video we take a look at the requirements for building our Offline Mobile Application.

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.

[Requirements] 0:00

[?music?] 0:03

[Jim Hoskins] So the requirements for our application: 0:06

first, it's mobile, so we want it to at least work on the iPhone, 0:09

Android, and hopefully any other devices that are advanced enough 0:13

for our other requirements. 0:17

Second, we want it to be an offline application 0:20

and that will require us to store our data on the device 0:23

as well as have some facility for the device to be able to store the application 0:26

in a cache, and that is something that HTML5 will allow us to do. 0:31

Finally, we want it to be location aware, 0:36

so we need some way to get geolocation data from the device. 0:39

Again, the HTML5 geolocation API provides just that, 0:43

but we also need to make sure that any device we plan on supporting 0:47

support HTML5 geolocation. 0:50

Fortunately, the support for geolocation is even stronger on mobile devices 0:53

than it is on desktop browsers 0:57

because obviously, mobile devices would have more of a need for geolocation 1:00

as the devices move around more. 1:03

Now, if we take these requirements and we start looking at how they break down 1:06

into technical requirements that will inform how we develop our application, 1:10

we see that since we want it to be offline, we're going to basically have to make this 1:14

all in JavaScript. 1:18

We can't communicate with a server, for instance, having a different HTML page 1:20

for each Note or having the data stored in a remote server. 1:24

Everything's going to have to happen locally on a single page 1:28

in the browser using JavaScript. 1:32

So basically we're going to be using one HTML page for our entire application. 1:34

That means we're going to need to do some magic 1:40

in order to make it look like it's on multiple pages on a web application. 1:42

The next thing is we're going to have to store all of our data locally. 1:46

We can't use a remote server with a database 1:50

in order to store our information and to recall it later. 1:53

Now, this has some benefits, as it's obviously faster 1:57

since all the data will be stored locally, 2:00

but it has some down sides since by default, our data will not be stored 2:02

anywhere but the device, so if somebody wants to access their data on another device, 2:06

that's going to require some extra code in order to synchronize 2:10

between different local storage devices. 2:14

Now, there are a few ways we could store data. 2:17

One of the classic ways is to use cookies, which have been around in the web forever, 2:20

and that would allow us to store small bits of information locally on the device. 2:25

However, HTML5 brings us the localStorage API, 2:31

which provides a key value store that will us to easily store data locally on the device. 2:35

The main benefits of this is there's going to be a much larger capacity 2:41

compared to cookies. 2:45

In a cookie you really wouldn't want to store 2:47

more than a few kilobytes of information. 2:49

Cookies are not a great place to store data because all of that cookie data 2:52

will be uploaded for every request to a server, 2:56

basically so the server can read that data, too, 3:00

and that will slow everything down. 3:03

In our application, that's not much of a concern 3:05

because we won't be making any server requests, 3:08

but it's always a good consideration when storing data locally 3:10

to consider how cookies send the information to the server. 3:13

Now, localStorage also has a much easier API for storing data. 3:18

It looks a lot like an object and we simply need to assign keys and values 3:21

and the browser will store that data for us. 3:25

We don't need to worry about encoding it like we do when we store data into cookies. 3:28

Since all of our information is on a single page 3:33

and we're doing a lot of manipulation--for instance, creating New Notes 3:36

or editing existing Notes--we need a way to handle those data changes 3:40

on our page. 3:45

For instance, a single Note might be represented on its showing page 3:46

where the actual details of the Note exist, 3:51

and a Note's information may also appear on several lists 3:53

as well as in things like Edit forms. 3:56

So anytime there's a change, we're going to need to update those changes 3:59

everywhere that the information is represented on the page. 4:03

Since everything's being handled on one page 4:07

but our interface makes it flow like there's several separate pages, 4:10

we need a way to manage our page 4:14

and make it appear like it's a multi-page application. 4:16

Now, finally, if we want our application to be really offline, 4:20

we need a way to cache all of the resources 4:24

including the HTML, JavaScript, CSS, and images, 4:27

so we're going to need a way for the browser to store all of that information 4:32

on the device itself. 4:37

The HTML5 Application Cache offers us a great way to do that 4:39

in that it will store all of our resources, including HTML, JavaScript, 4:43

images, and other resources on the device as we specify it. 4:47

That way, the user only needs to visit our website once 4:52

to cache the application. 4:55

Then, the next time they launch it, if they're unable to reach our website again, 4:58

the device will serve the last version that was cached on the device, 5:01

so it's truly offline. 5:06

So looking at these requirements, there's a few different strategies 5:08

we could use to develop this application. 5:11

We could develop all of this from scratch, 5:13

including ways to create transitions between pages, 5:15

serialize the data into the HTML5 localStorage, 5:19

manage changes to the data every time we update things, 5:23

or we could use libraries to handle a lot of these problems for us 5:27

and see if we can integrate them together to save us a lot of time in development. 5:31

So let's take a look at what these technologies are and if they'll fit our application. 5:35

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