This is a simple way to create a prototype mobile application from any website mobile version.

These kind of apps are called “hybrids” because they are made using a native browser container that load web mobile pages inside.

The main content is built using web technologies, and then wrapped in a platform-specific container that allows it to be installed like a native application. Thus it can be downloaded from the device’s app store/market.

I think this method could be useful to make a rapid alpha mobile app to test users reactions before making a final mobile app.

home from mobile subzin app

 

Native page transitions

To improve the user experience, instead of using the jquery mobile’s navigation model, a native progress dialog is showed between pages transitions.

home loading from mobile subzin appMovies found page from mobile subzin app

This is the piece of Java code that show the native dialog:

private class SubzinClient extends WebViewClient {

    public void onPageFinished(WebView view, String url){

        mProgressDialog.cancel();

    }

    public void onPageStarted(WebView view, String url, Bitmap favicon){

        mProgressDialog.show();

    }

}

What you need to make the app

  1. The url of your site mobile version, in my case I have used the mobile version from  www.subzin.com (made with jquerymobile framework).
  2. Android sdk (I’ve used Eclipse as IDE)
  3. An android device to test the application (And android simulator is valid too)

The main advantage of these kind of applications (besides the developing time saved)  is that any web improvement developed will be in the app without install any update.

Besides it’s possible to insert html files into the application project to get an initial loading faster.

On the other hand, the main disavantage is that the look and feel is not as good as native applications, althought the render performance of the web browsers is improving in every new release.

We can use the same procedure to make a similar app for Iphone/Ipad using Xcode and IOS sdk instead of Eclipse and Android sdk.

There are specifical frameworks like PhoneGap that allow you to take a web app and turn it into a native app for iOS, Android, BlackBerry , etc. These frameworks typically have APIs as well to access the device’s hardware and features that are locked out from the browser.

Here is the complete eclipse project that you can modify to make your own application: subzin_mobile_project.zip