Monday, November 14, 2011

Android enable your existing web app

Androidify Your Web App

Ever since android and the mobile app market has started becoming popular, managers have started demanding, android based user interfaces onto existing web applications. As developers it is necessry to understand the various choices and pros and cons of each one clearly.
Lets say you have an existing web application which is developed with one of more traditional web frameworks, then for making this web app available as an android app, following are the various choices you have:

  1. Existing web app most likely runs in a javascript compliant modern browser. Most modern smart phones already have mature javascript enabled web browsers. Validate the browser version of your intended device and check the browsers compliance with respect to standards like ECMA (javascript), HTML5 support etc. You should be able to display the entire web app, as-it-is onto the smart phones browser, but, but but...the UI will not at all be optimized to the mobile screen, for one, the UI was built with desktop browsers in mind and the mobile app is a completely different ball game. So though most of the traditional web app UI might display, you will have issues like UI widgets will not render correctly, users will have to strain their eyes to see the text, the default zoom levels will be horrible, horizontal and vertical scrolling to see entire app, will make it a very painful user experience to say the least.
  2. You can change (switchable) css in your existing web app, so that it is a lot more optimized for mobile viewing, this means most of the presentation logic stays as is but only the css will need to be modified. Also you can resort to html metadata elements like the view port tag to adjust the default zoom levels for the mobile browser display. Inspite of these optimizations, the amount of data on screen for a mobile device can degrade the user experience.
  3. The next option comes at a bit more cost but really provides ideal mobile user experience. The choice is of developing a native android UI and having that communicate using REST (json or xml over http), with REST controllers on the server side. The REST controllers will need to developed in addition to any existing controllers and can be thin wrappers/delegators over existing controllers or services. REST controllers will return back json / xml, which will be gotten by the android UI and displayed suitably. In android if you think writing a http client(REST client) is a might tedious you can use a third-party library like Spring-Android, which will ease REST client development and provide auto-binding to android/java objects from json or xml.

    Typical code for issuing a REST-client call is given below to give you idea of how clean and simple it is to write REST client from native android using spring-android.
 
private Parties getParties(){
 RestTemplate restTemplate = new RestTemplate();     

 HttpHeaders requestHeaders = new HttpHeaders();
 requestHeaders.setAccept(Collections.singletonList(new MediaType("application","json")));
 HttpEntity<?> requestEntity = new HttpEntity<Object>(requestHeaders);
 String url = "http://x.y.z.w:8081/jqueryrest/restful/party/listallEx";

 //invoke the url
 ResponseEntity<Parties> responseEntity = restTemplate.exchange(url, HttpMethod.GET, requestEntity, Parties.class);
 Parties retList = (Parties)responseEntity.getBody();
 return retList;
}

The url, refers to a REST controller endpoint which returns a list of party object.

Sample jersey REST controller
 
        @GET
 @Path("/listallEx")
 @Produces("application/json")
 public Parties getAllEx(){
  return new Parties(service.getAll());
 }

1 comment:

Ecommerce developer said...

Thanks for creating a awareness regarding android.Good sharing.Keep blogging.