5 quick steps to create an offline iOS/Android app prototype using Cordova and Hotspot

During the application development process there is usually a stage in the development where we need to show off how the application will look and feel, and how it will work, before we have written a line of code. This means people can start to understand what their software app will feel like to use and, importantly, how it will work in terms of the sequences of operations. Simply looking at visuals often doesn’t give you the necessary level of information you need in order to interact and feel the process and process-flow to achieve the desired results.

This could be simple wireframes or high fidelity, fully skinned photoshop mockups. We generally call this the applications architecture; it’s really the first iteration of development.

The Dilemma

Recently we were presented with the opportunity to show off an application architecture prototype to a group of people. We were faced with the following problem:

How can we demo a web based iPad application that has not been built yet, quickly and efficiently to a group of people, in a room with no access to the internet?

The difficulty is that the application was targeted to iPads, and the room in which we were demonstrating did not have easy access to internet.

I will delay no further. On with our 5 step solution!

Step 1: Create your prototype

Initially we used our own home grown mockup tool called Hotspot. This simply allows you to upload the visuals and link them together by creating hotspots on the screen; thus allowing people to interact and discover the flow and usability of the application. If there is one thing that kills an application it is usability and complex concepts that don’t make sense from the customers perspective. It’s also quite mind blowing what you discover by asking questions like “where do I go when I click this?”. Without this phase you often see an application resemble the database instead of the application best representing what you are trying to get done, or information you are trying to control.

Even though this solves the interactive demonstration part of our puzzle nicely, the problem is that fundamentally Hotspot generates a clickable web page of your app designs (or wireframes). When you load the prototype experience in Hotspot you effectively download the raw HTML and javascript, and other web assets from the internet.  This also works on an iPad and there are some tricks to save it to the home screen and remove the standard browser bar so it feels like an app experience. However, it is still accessing a webpage when it starts and with no internet connection, it is not going to work.

We need to somehow convert these files into a fully fledged iPad application and save all the files locally on the device.

Wouldn’t it be nice if there was a tool that could take HTML, CSS and Javascript files and HTML5 based apps and convert them into applications across multiple devices like iOS, Android, Windows etc?

Oh, wait, there is! Introducing Cordova!

Step 2: Install Cordova

I always think its a good sign when things are easy to start with. Cordova have clearly used the power of node.js and its very useful package manager; since we use node.js internally at Newicon this is very easy.

If you don’t already have it you will have to install node.js, but assuming you do, you just have to run the simple command in your terminal app to install Cordova globally:

sudo npm install cordova -g

Step 3: Create your project

cordova create mydemo

This creates a new folder called “mydemo”. Inside this folder there is a “www” folder. What we must do now is simply copy our Hotspot web files into here.

What Hotspot web files? I hear you cry.

Using Hotspot you can easily create an offline version of the website and download all of the HTML, CSS, Javascript and images you need for it to work as a self contained web page, with no internet access. There is an easy way to accomplish this on the desktop. Simply select “File” – “Save Page As…” from your web browsers file menu.  This saves a complete local version of the hotspot prototype experience.

We probably need to delete everything in the “www” folder generated by Cordova first, then rename the main Hotspot web HTML file to index.html.

Now double clicking (or launching) the index.html file within the www directory created by Cordova we should see the “offline” Hotspot experience load up in a web browser.

Now thats done we simply add the platforms we want this to work on.

Step 4: Add your desired platforms

Now we just have to instruct Cordova which platforms we would like our web app to run on.

As the app we were demonstrating was targeted for use on an iPad we run the following line:

cordova platform add ios

If we wanted to support Android too, we simply have to run:

cordova platform add android

And I am sure you can guess roughly what you have to do to support more platforms. There is more information in the Cordova documentation here

Now Cordova knows the platforms it has to build for, we run the… errr… “build” command.
This transforms the web app into an iOS Xcode project (and it’s suitable counter parts for other supported platforms).

cordova build

Step 5: InstaLl, Test and Relax

That’s it. After completing step 4 under the project directory there will now be a directory called platforms with an ios directory under it. Inside this there is an Xcode project that can be loaded straight on to an iPad using the standard Xcode process you would have for any other iPad application.

You now have a totally offline web-app demonstrator app, with no hassles relating to connecting to wifi. There is also no time waiting for things to download, as everything is already installed on the device; giving you the added bonus of it being speedy too! As ever once installed, click the app icon to launch the application on the iPad.  Now you have the Xcode project you can add additional nice touches like app icons and loading screens.

Summary: Simple But Effective

This shows the capability of Cordova making it much easier to manage applications targeted to many different devices without maintaining individual code bases. This is probably a topic for another blog post, but it illustrates the growing capability of HTML5 and javascript based technology.  Cordova supports an impressive list of platforms:

• amazon-fireos
• android
• blackberry10
• Firefox OS
• ios
• Ubuntu
• wp8 (windows phone 8)
• win8 (Window 8)
• tizen

With more traditional approaches you would be forced to manage 9 code bases with at least 3 completely different programming languages (Java, Objective C, .Net).

This is a simple but effective approach for building apps that behave in the same way as native app’s would do. We can create the same experience, and at this early stage of development we want to emulate the final app experience as much as possible, as quickly as possible so we can test our assumptions and make sure the app we build will be a blinding success.