Turn a responsive web app into an iOS & Android app

This tutorial is aimed at web developers who are dipping their toes into apps for the first time.

Recently I developed a responsive web app for a project. This was a fairly simple single page app written in PHP and jQuery, optimised for tablets and phones using conditional CSS, but running in the device’s web browser, not as a standalone app. PHP obviously can’t be packaged into a standalone app, so rather than rewriting the whole thing in JavaScript, I realised that I could save development time and expense by packaging the app I already had within iOS and Android apps. The project needed to get to market quickly, so I decided that this was the best approach, but there is one big con – the app might load up a blank page if the device is not connected to the internet, and if the device loses the connection before the user finished with the app, it could just lock up. So you need to provide prompts to tell the user what’s happening – if they were using your app in the phone’s browser, they’d expect web connection to impact it, but as a standalone app this might not be obvious.

A big advantage of this approach is that you’ll still be hosting most of the app on your servers, so you can make instant changes to the functionality and content. An app written the normal way would have all its functionality, and possibly its content, compiled into a package which is hosted by Google or Apple, and changes take considerably more time and effort once the package has been uploaded.

But if you’re aware of the cons and this approach still fits the bill, read on.

1) Development Environment

I develop on a Mac. This means I can keep all my app files for Android and iOS in the same folder on the same computer. There are other ways of doing things, but I find that less complicated. First you’ll need to download Eclipse (for Android) and Xcode (for iOS). Additionally, you’ll need the Android Developer Tools Bundle.

Cordova (also confusingly called PhoneGap) is a perfect app development framework for web coders coming to apps for the first time. It lets you write apps in web languages (HTML, CSS, JavaScript). But that’s not exactly the approach I took. Download it here, and the documentation is here. Once you’ve installed Cordova, you can create your app project from the command line. Open up a Terminal window (Applications->Utilities->Terminal), and change to the directory you want your app project to turn up in. For instance, if you want to store your apps in a folder called ‘apps’ within your user folder, type this in your Terminal window:

cd ~

mkdir apps

cd ~/apps

Now tell phonegap to create your project. It’ll make a subfolder in ‘apps’ with the name of your app. When using ‘sudo’, you’ll be prompted to enter your password:

sudo phonegap create yourapp com.yourdomain.yourapp YourApp

Phonegap?? I thought this was Cordova. This confuses me too.

Once the yourapp folder’s been created by Cordova, you need to add the platforms you’ll be working with:

cd test

sudo phonegap build ios

sudo phonegap build android

To give useful feedback to users if the app loses the network connection, you need to install the cordova network information plugin.

sudo phonegap local plugin add org.apache.cordova.network-information

Next, we’ll open the app up in Eclipse and Xcode.

In Eclipse, go to File->New->Project… and a window titled ‘Select a wizard’ pops up. There should be a folder called ‘Android’. Expand it and choose ‘Android Project from Existing Code’. Select that and click Next. Then click ‘Browse’ and navigate to ~/apps/{your app folder}/platforms/android/, and hit ‘Open’. Your project should appear under ‘Project to import’. Hit ‘Finish’.

In Xcode, go to File->Open… and navigate to ~/apps/{your app folder}/platforms/ios/YourAppName.xcodeproj . Click ‘Open’. simple!

2) Wrapper code

Cordova/Phonegap projects are built around an index.html file, just like a website. My solution to wrap up my PHP-based web app was to use this index file to run some javascript to determine if the device has a network connection, and if so, to load up the web app. In the meantime, I showed the app logo centre screen, and a spinner whilst the web app loaded from my server.

You’ll need to edit two copies of index.html, one for each platform. They’re stored at {your app folder}/platforms/android/assets/www/index.html and {your app folder}/platforms/ios/www/index.html. In this case, the files can be identical. You can download the whole thing - index.html - and replace a few things with stuff relating to your app:

Replace

<title>{Your App Name}</title>

with your app name,

load_url_full(‘{your web app url}’);

with your web app url, and

background: url({your app icon}) no-repeat top left;

with your app icon. I used a 1024×1024 pixel icon so the CSS can resize it based on whatever screensize it’s viewed on. Next find yourself a nice spinner gif and replace

background: url({your loading spinner}) no-repeat top left;

with the filename. Once you’ve done that, save index.html to the two www folders I listed, along with copies of your app icon and the spinner gif.

Nearly time to test-run the app. But first you’ll need to allow your app to access the internet. In Eclipse, expand {Your App Name}/assets/www/ and CNTL-click on config.xml. Select Open With->Text Editor, and change

<access origin=”http://127.0.0.1*” />

(which allows only local access) to

<access origin=”*” />

which allows your app access to any domain. You can enter only your own domain here if you want. In Xcode, you’ll need to edit two config.xml files in exactly the same way. One is at the root of your project,  {Your App Name}/config.xml and one is at {Your App Name}/www/config.xml.

That’s it! Test your project in the Xcode iOS and Android simulators or on your mobile devices, and it should pull your web app through from your server. You could improve on this bare-bones project by building Javascript to detect connection difficulties, and warn the user, into your web app itself. This would be a good feature to include in a normal browser-based web app, so if you’re a thorough sort of person maybe you’ve already coded that.

To finish off the app, you’ll need to replace the Phonegap default app icons and splash screens with your own. I wrote a post on a fairly painless way to do that.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>