Every time I play with a cool app on mobile devices I wish I have learned how to do cools things like that. Have you ever thought about it? Cool, huh?

So, after looking at some of them I realized that if it was possible to use HTML5 and JS to build Apps, we all could easily code many cool ideas.

Well, good news, buddy. It’s possible, and you’ll learn how to do it right now.

Here we’ll see how to build Apps with the tools you already have, HTML, CSS and JavaScript. And a few new things that we’ll be talking about

Our first app will be something simple but yet useful for me and many others freelancers and writers. We’ll build an app to automatically grab currencies and convert them so you’ll know exactly how much you’re earning and the best day to withdraw payments (higher currency). Also we’ll have a few other cool features, like tendency analysis, and withdraw rate (for services like paypal which keeps part of your payment).

Our goal here is also learn about:

• Development process
• Wireframes and Flowcharts
• Local Storage and Cache.Manifest
• jQuery Mobile
• CSS3

Since I’m from Brazil I’ll use BRL (Brazilian Real – R$) from now on, but don’t be scared it’s easy to change it on the app.

Ready? So, let’s rock!

What will we do?

Our goal here is to get all needed data to start doing our own mobile app. Despite of what you may be thinking (and doing in your own life) good software starts with concept and planning, code will be done just when we are sure about the other things (and maybe even tried out a few possibilities).

So, to achieve this we’ll have this tutorial broken into 2 parts:

1. App concept, introducing new ingredients (localstorage and cache.manifest), wireframes and workflow
2. Coding HTML, JS, CSS, testing, improving

Let’s think about our App idea a little bit, before start any coding. The main goal here is to solve the problem for people who deal with receiving money in different currencies and mostly are charged by this operation, right?

A little example, I receive in USD, but I pay my bills in BRL. So I have to use paypal to convert the money for me and they charge me by this service. So, even if I receive daily updates about currency exchange rates (and I do!) I don’t know how much exactly I’ll earn by the end of the month.

I need also stay tuned with historical data and market trends, since I can lose money by withdrawing it too early or too late.

Ingredients – Localstorage, Cache.Manifest & jQuery Mobile

Localstorage

Localstorage (one of the implementations of Webstorage) is one of the coolest additions of HTML5 “pack”.

Before it, the best way to store user’s data were cookies (or jQuery data, maybe). But since cookies are send to server and has a much limited space and flexibility Webstorage came to fill this gap.

With Webstorage you can store data only on user side, and this data will never will be sent to server. And you’ll have much more space to work, also. While each cookie gives you just 4KB of space, Webstorage gives you at least 5MB.

Long story short, main advantages:

• You’ll have much more space
• Data is never sent to server, so user settings can be saved by their own browser
• Will make things be much faster
• Allows you to do offline apps!

It’s really easy to work with. Here is basic functions:

//set item
localStorage.setItem( "key", "value" );

//get value of key
var item = localStorage.getItem( "key" );

//delete item
localStorage.removeItem( "key" );

//alternative syntax to set item
localStorage["key"] = "value"; //yeah, just like this

//alternative syntax to get item's value
var item = localStorage["key"]; // cool, huh?

Cache.Manifest

Cache.manifest is a simple way to tell browser “Hey, buddy, store those files for offline use, they are really important, ok?”.

Basically you give the browser a list of the files you want to be cached. The browser will save them for you and the next time user try to reach your App if there is no Internet connection it will just get saved files and serve the website.

Cool, huh? And it’s kinda easy to do. Here is a simple example how to do this:

You’ll have to say right in the <html> tag where the cache.manifest file is:

<!DOCTYPE  HTML>
<html manifest="main.appcache">
<head>
  <title>Main App page</title>
  <script src="main.js"></script>
  <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
  Page content!
</body>
</html>

And these are the rules for you file main.appcache:

CACHE MANIFEST
# the above is a required line
# this is a comment
# spaces are ignored
# blank lines are ignored
/stylesheet.css
/main.js
/logo.png

jQuery Mobile

jQuery Mobile is a kit done by the jQuery team. It’s pretty awesome I must admit.

It saves you from that huge headache called cross-browsing and cross-plataform. When it comes to mobile it is really bad to make things go well in such different devices and platforms that you would spend too much time adjusting things, and would lose a lot of time that you could be doing useful things like watching a movie or playing with your pet.

And it comes with a lot of preset components that make the development process much easier. You can actually have a working mobile app in a few minutes.

Recipe – Let’s draw a little bit!

Ok, since we’ve been introduced to our technologies, let’s start working.

Workflow

This is a simple tool meant to express how a system (in our case, the app) behave based on user’s actions, in a graphical step-by-step representation.

Workflows are so simple that they can be drawn in powerpoint or google docs, if you haven’t time to learn a new tool. So there’s no excuse to get started. This is what we’ve got:

Now we can actually imagine how user will come into the app and use its basic functions. This could be expanded including user inputs and more, but this is just the big picture for what comes next. The mockup.

Wireframe

Wireframe is a graphical representation of how display items on screen, and gives you a good idea on what should come first, what is more important and what eventually will be removed.

This is specially important for mobile design, since space is much expensive, every pixel, component, text should be put in the right place.

To get started, I recommend you downloading a simple UI kit. I’ve got a really good one with iPhone’s elements, and worked pretty well for me.

Then you job is try to translate you workflow into screens and components. Even things that aren’t before should be placed, like that Input button to convert any amount, that chart, and config fields.

So our home should display clearly the current currency exchange, and give user option to test any amount he wants to. Config screen will save crucial and customizable data for the app, like currencies symbols and source of data (more on this on the coding step!

Let’s see how it is looking like.

Home

Settings

But, and the design?

As we focused on the best development process, we won’t spend a single hour working on design per se. We’ll let jQuery mobile and theming options do the trick and maybe we’ll just add fancy colors on it.

This way we can spend much more time getting things out the gate and improving this app’s features, since it’s our focus here, right?

Are you ready for it?

Next time you’ll learn a lot about HTML5, JS, CSS3 with our coding part of this tutorial. And if you have any suggestion, just use the pretty box above!