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.
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.
We need to somehow convert these files into a fully fledged iPad application and save all the files locally on the device.
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.
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.
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).
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
- Firefox OS
- wp8 (windows phone 8)
- win8 (Window 8)
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.
If you’re interested in working with Newicon on your next digital project, get in touch now.