Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed HTML5 Mobile Web Applications!
You have completed HTML5 Mobile Web Applications!
Preview
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.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[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.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up