Getting Started with HTML5 Local Storage

Posted: September 30th, 2011Author:

HTML5’s local storage is undoubtedly one of the most interesting and most talked about features in the HTML5 technology stack. Local storage is part of Web Storage specification and is supported by all modern browsers (destkop and mobile). Although local storage (or Web Storage) sounds rather sophisticated, the functionality is very easy to use. You basically get a map as storage inside the browser (available to all browser windows). You can insert, delete or read key/value pairs. That’s it. Data stored in local storage (localStorage) will be there when you close and open the browser. There is also session storage (sessionStorage). As the name implies, it will be only available as long as the browser window is open, and will be cleared when browser window is closed.

The only other thing to know is that data saved by a page is only available for a pages from the same domain. In other words, a page loaded from, doesn’t have access to data saved by page from domain

We are going to going to build an app that looks like the screen shot below. In fact, you can try the app (scan the QR code). Try it on your mobile device as well.

To build the app, I used Mobile Apps Builder. If you are wondering why Well, because it’s incredibly simple and fast to create a project and build app. If you don’t have an account yet, quickly sign up here.

First build the UI by dragging and dropping jQuery Mobile components from the palette on to the phone. At any point, you can click Test to try the app in browser, or mobile browser.

You can use to build real mobile apps without writing any JavaScript. But, for more advanced cases (like ours), you can easily write any custom JavaScript. You can even import 3rd party JavaScript libraries. In our case, we are going to create a new JavaScript file (called asset) with the following content:

There are three functions, one for saving a new item (save()), one for getting the current storage (storage()) and one for clearing the content (clear()). Local storage API is very simple. For example, to save an item:

then, to get a value from storage:

This is how the complete file looks inside JavaScript editor:

The last step is to invoke JavaScript when the buttons are clicked. We also want to load storage content when the screen is loaded for the first time. Let’s work on the buttons first. To invoke JavaScript on button click, we first add click HTML event to the button:

Then we add Run Custom JavaScript action by clicking the + button:

Click on the action to enter JavaScript code. The code for Save to Local Storage button looks like this:

We first find the input component using jQuery (it’s going to simpler to do that, once we introduce JavaScript API, work in progress). Save the value from the input element, reload storage content so we can display it inside the textarea.

Clear Local Storage button looks like this:

Lastly, we also add load event to the screen itself so that we can show storage content when the screen loads for the first time:

Try it yourself (it’s easy and fun!). Review in DevProConnections

Posted: September 28th, 2011Author:

Using and PhoneGap to Build Native Apps

Posted: September 25th, 2011Author:

If you don’t know what is, is a Web-based mobile apps builder or a mobile RAD (Rapid Application Development) tool. It enables developers to build mobile Web and native apps very quickly. comes with a visual editor and jQuery Mobile components. You simply drag and drop components into the phone area.

This makes it very easy to prototype and build the UI. Once you have developed the UI (which you can share and test in browser or mobile device), you define and connect to REST services. Once the service is defined, it is mapped to the UI. A service usually has inputs and outputs. Mapping means taking input from UI (such as input component) and using it as input for the service. On the other side, taking service output and mapping it back to the UI, for displaying the result. One last step is usually adding an event to invoke the service. For example, on a button click the service can be invoked. What I just described is a very easy and fast way to build mobile Web apps. There is nothing to setup or configure, just launch the visual editor and start building.

Now, how do you get a native app? That’s where PhoneGap comes in. PhoneGap is an open source framework, it wraps your mobile Web app and gives you access to native device API. To use native features, PhoneGap provides very clean and elegant API. For example, to sound a notification beep twice, you need to call the following:

Simple, right?

To get device information, the following code is used:

Any native mobile project in comes configured with PhoneGap version 1.0. How do you invoke this API when building a mobile app in It’s very simple. comes with Run Custom JavaScript action which can be invoked on any HTML event. Let’s take a button. When a button is clicked (click event), you add an action (Run Custom JavaScript) to invoke. That’s it. Inside the Run Custom JavaScript, you can run any custom JavaScript.

You start with a button, we will use the Vibrate button:

Add click HTML event to the button:

Add Run Custom JavaScript action:

and finally add PhoneGap JavaScript call:

Another option is to create a JavaScript file (Project > JavaScript), write all the custom code there in functions and then invoke any function via Run Custom JavaScript action.

JavaScript file:

Invoking a function from the custom JavaScript file:

Once you use native API, testing in Web browser is no longer possible. To make it super easy to test your native app, you can use Mobile Tester. It’s a native app (Android, iOS) which lists all your mobile projects created in You simply tap any app and launch the native app. The app looks like this:

Like what you see? Try Mobile Apps Builder yourself!

Thanks to Paul Beusterien for the example idea. Prototypes Builder Trials for Beta Users Ending on Sept. 22

Posted: September 22nd, 2011Author:

Early adopters of (reg­is­tered be­fore June 15, 2011) re­ceived a com­pli­men­tary 3-​​month sub­scrip­tion to the Prototypes Builder Professional Plan. On September 22, 2011, this trial pe­riod will end. Starting on September 22, these users will have the fol­lowing op­tions when they log in to

  1. Continue using the Professional Plan with un­lim­ited projects and un­lim­ited screens by pro­viding billing in­for­ma­tion and paying $15/​month/​user going forward.
  2. Downgrade to the Free Plan with ac­cess to your last edited project and 5 screens in the project.
  3. Deactivate your Prototypes Builder ac­count (ac­count data will still be kept for 30 days).

We hope they all choose op­tion #1! Mobile Apps Builder at GigaOM Mobilize

Posted: September 21st, 2011Author: Mobile Apps Builder is going to be at GigaOM Mobilize event next week, Sept. 26-27. Attend our workshop and you will learn quickly to build mobile apps in the cloud. A real mobile app will be built during the workshop. Attendees will be able to test/follow the app as it’s being built.

Building Mobile Apps in 5 Easy Steps [Cheat sheet]

Posted: September 21st, 2011Author: Mobile Apps Builder Upgrades with Brand New UI, New Export/Build for Android, iOS and Much More

Posted: September 18th, 2011Author: Mobile Apps Builder upgrades with brand-new UI and very cool new features.

Brand-new attractive UI Mobile Apps Builder got a new and very attractive UI. You can see how it looks below but the best way to experience it, is to log in or sign up. You will like it.

Upgraded export-and-build capability with support for Android, iOS, and mobile Web

That’s big one. From the screen shot you can see that it’s now super easy to get the source code and build for Android and get the source code for iOS.

Android binary release (.apk) settings editor

What’s really cool is that you get get an Android binary and immediately publish it to the Android Market. How can you do that? has a new Android .apk settings editor where you can enter all the information needed for the Android Market.

Upgraded test capability. Quickly test your app in a browser or on a mobile device

The Test screen has been upgraded. It’s now super easy to test the app in desktop Web browser, mobile Web browser, and on the actual device via Mobile Tester.

Support added for REST XML services and for using the POST method

REST services are no longer limited to just JSON response format, now supports XML. We have also improved ability to make POST requests.

New service “echo” mode makes it possible to test the app without connecting to the actual service

To make it even easier to work with remote services, we have introduced an “echo” or mock service. Basically, instead of making a call to the actual remote service each time during development, you can invoke a local “echo” or mock service which returns a sample of the real data.

Use custom external JavaScript libraries in your app

To make it simpler to customise and use custom JavaScript, we have added a feature where any custom JavaScript library can be loaded and included in the app.

New JavaScript framework to make it simpler to extend your apps with custom JavaScript

Check it out here.

Create and use custom JavaScript functions when mapping service data to the UI

When mapping UI when data source, you can now specify custom JavaScript to run when the mapping occurs

Improved support for HTML5 attributes and support for the HTML5 video tag

We have added HTML5 input types, attributes such as placeholder and HTML5 video tag.

New iPad screen layout

We added project template with iPad layout – to make it simple and faster build apps for the most popular tablet.

Sneak Peek of New UI and New Export Feature, Plus Slides

Posted: September 9th, 2011Author:

How to Test Native Android and iPhone Apps Quickly

Posted: September 7th, 2011Author:

(Reposted from Maxa Blog)

If you have have done native mobile app development on Android or iPhone (iOS) then you probably know that testing native apps is not that simple. On the other hand, testing traditional Web applications is pretty straightforward: Launch a Web browser, and you see exactly how the application works and how it looks. Read on and I will show how to test a native app in a similarly straightforward fashion after considering various alternatives.

Option 1: Installing the app on the mobile device

This option is great in that you can test the app on the actual device. However, getting the app on the device can be very time consuming. And, for each testing iteration, the app would have to be built, sent (or copied) to the phone, installed, and launched on the device. While you get to test on the actual device, the process is very slow. Just imagine if you need to make just a small change in the app.

Option 2: Using device emulators/simulators

Getting the app on a device emulator is simpler than getting the app on the actual device. However, now the app is not tested on the actual device, so you may not be getting exactly the same behavior or look-and-feel that you would get on the actual device. Now, this is more of an Android problem than an iOS problem. The Android emulator runs a bare-bones Android version. Most Android phones from HTC, Motorola, and Samsung have their own, slightly modified builds of Android (even the same browser can be slightly different on different devices). Another problems with emulators (mostly Android) is that they are usually much slower than the actual devices, for obvious reasons. While the iOS simulator is pretty fast, the Android emulator is notoriously slow.

The Best Option: Launching the app on the device without installing

I consider this final approach the fastest and most straightforward. It doesn’t require installing the app on the device each time, but you still get to test on the device. This approach uses the Mobile Tester app on the device while the mobile apps themselves are developed using Mobile Apps Builder.

This tester app only needs to be installed once. The Android version is here and the iOS version is available as an open source version. The app is rather simple. After signing in to your Mobile Apps Builder account, it will show a list of all mobile apps (native and Web) created in your account. Here is how it looks:

tester Mobile Tester


The most interesting part? Clicking (or tapping) on any project will launch the app. Make any changes to the app in Save the changes, and click the app in Mobile Tester. You now get the new version, with all the changes. With this approach we get the best of everything. We don’t need to install the app each time, the app is tested on the actual device and last but not least, it’s very fast.

Still not convinced? Then sign up for, create your first mobile app, install Mobile Tester (Android or iOS) and test the app.

Building A Mobile App In 5 Minutes [Video]

Posted: September 6th, 2011Author:

This video shows how to build a Twitter search mobile app in just 5 minutes using