Quick steps to create an offline iOS/Android app prototype

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.