Wednesday, January 2, 2013

Fun Week 2012 - Carte Mobile (Part 2)



This is the second part of my Funweek 2012 project.  My original goal during the week was to create a mobile application for Carte but I could not muster up the desire to do this with the current state of Carte servlets/XML output.  I basically did not care much for writing XML parsing code in JavaScript during Funweek when I know how great life can be if we had JSON.  So..  part one of my Funweek, which is already documented (LINK), was to add Jerser/REST (JAX-RS) to Carte.


Since I used, and enjoyed, Sencha Touch 2 for Pentaho Mobile and I only had 2 days left to write Carte Mobile I had to go with something I already knew.  I also had the confidence that I could use Sencha Touch to get the job done in the limited time without any major hurdles or snags.  I created a Sencha Touch application, eg:

Ext.application({
name: 'CarteMobile',

models: [
'Job', 'Transformation'
],

stores: [
'Jobs', 'Transformations'
],
launch: function() {
..
}
});

In the launch we add the code to login and then launch the primary UI of the application which is tabset showing status, jobs, transformations and config.



We use Sencha Touch's built-in List (Ext.List) widget and back it with a DataStore.  We have two different DataStores - jobs & transformations.  These stores are backed by the REST services.  Essentially, it is as simple as making an AJAX request to one of the jobs or transformation services, parsing the JSON and setting the JSON as the data for the DataStore.  For example:

Ext.Ajax.request({
url: 'http://' + localStorage.carteURL + '/api/carte/jobs/detailed',
success: function(response) {
var data = JSON.parse(response.responseText);
var store = Ext.getStore('Jobs');
store.setData(data);
}
});

The Ext.List widget supports Pull-to-Refresh if you enable it with the appropriate plugin, so I put this in as well.  Here's a code snippet showing how this was accomplished:

var list = Ext.create('Ext.List', {
plugins: [{
xclass: 'Ext.plugin.PullRefresh',
refreshFn: function(plugin) {
loadData(loadDataCallback);
}
}],
});

Once the application was written, it can be served by Carte itself.  More interesting is that if the resources (html, js, css, etc) are bundled up in a ZIP file (plus config file) they can be built using PhoneGap to provide mobile OS versions for publishing to the Apple App Store or Android Play Store.  The only thing I do in the mobile version different than the Carte served version is detect if we are running in PhoneGap to know if we have to prompt for the server name for Carte (we already know this information in the other case).  PhoneGap provides a cloud-specific build for most of the mobile platforms.  In this case, I was interested in the Android (APK) distribution.  See http://build.phonegap.com

Once I had the Android APK I uploaded it to the Android Play Store, where it can be downloaded and enjoyed today.  Here are a few screenshots from the mobile application on an Android phone.





Fun Week 2012 - Carte conversion to REST (Part 1)


During Pentaho Fun Week 2012 I converted Carte to using REST.
Carte fires up a Jetty server in WebServer.java.  This is the class we modify to mount all REST
endpoints under "/api".  To do this I used Jersey's PackagesResourceConfig with a Jersey ServletHolder.
The details of this code are as follows:

// setup jersey (REST)
ServletHolder jerseyServletHolder = new ServletHolder(ServletContainer.class);
jerseyServletHolder.setInitParameter("com.sun.jersey.config.property.resourceConfigClass", "com.sun.jersey.api.core.PackagesResourceConfig");
jerseyServletHolder.setInitParameter("com.sun.jersey.config.property.packages", "org.pentaho.di.www.jaxrs");
// mount all jersey REST under /api
root.addServlet(jerseyServletHolder, "/api/*");

The package "org.pentaho.di.www.jaxrs" is where all classes are scanned for JAX-RS annotations for example CarteResource.java.  This is a
general REST endpoint mounted to "/api/carte" and provides methods for getting system info, config details and a list of jobs or
transformations.  This file is really quite simple to understand and it replaces (or makes obsolete) several Carte servlets.  For example,
to get a list of transformations that are in Carte, you would invoke the url "http://carteserver:port/api/carte/transformations" with a
GET request (which means you can do this easily in a browser to preview the response).  The output is in JSON making it very easy for
JavaScript consumers to rehydrate.  XML can also be provided if so desired by putting this in the request header.  The code for Carte
REST to return a list of transformations is:

@GET
@Path("/transformations")
@Produces({ MediaType.APPLICATION_JSON, MediaType.APPLICATION_XML })
public List<CarteObjectEntry> getTransformations() {
List<CarteObjectEntry> transEntries = CarteSingleton.getInstance().getTransformationMap().getTransformationObjects();
return transEntries;
}

The @GET annotation specifies the HTTP method we use and the @Path annototation is the "add-on" to the service mount (The class itself
is mounted as "/carte"), so the combined path is "/carte/transformations" - the full path, since all resources in the "org.pentaho.di.www.jaxrs"
package or mounted in Jetty under "api" would be "/api/carte/transformations".  The @Produces annotation is a list of output types/formats
that can be provided by this service.  Jersey will handle the serialization from our List<CarteObjectEntry> to JSON/XML.

To keep things really simple, yet as complete as reasonable during a fun week timeframe, I created two additional REST endpoints which handle
job and transformation specifics.  JobResource.java and TransformationResource.java are the classes which provide the ability to add, remove,
pause, start, stop, get logs, and get status for jobs/transformations.  For example, to get the status of a job, you would invoke the url
"http://carteserver:port/api/carte/job/status/id" where id is the GUID for the Carte object (which can be obtained by listing from the
CarteResource.

There's still work to be done, I have not converted all of the CarteServlets to REST, for example, I don't have anything in the way of
slave server support or anything to list data services or server sockets.  This is not because it was difficult, in fact, it's probably
quite easy to do, I just didn't need it for the purposes of my funweek project.  Another thing that would be nice is to add the ability for
plugins to add REST services just as they can add Jetty servlets today.  I don't think this will be difficult either, I just did not have
time as I wanted to take what I had already written and write a mobile friendly UI for Carte.