Howto: Grails, REST, Google App Engine and JQuery

Web Squared: Collecting data and turning it into information >>

June 26, 2009

Howto: Grails, REST, Google App Engine and JQuery

Here’s a quick example how you can build a RESTfull Grails application and deploy it to Google App Engine. For this example you need Grails 1.1.1 and GAE SDK for Java version 1.2.1.

I’m going to create a small service which will return a wind forecast. The forecast data is hardcoded as this is just some sample data.

First create the grails application, remove the hibernate plugin, and install the app-engine plugin:

grails create-app windapp
cd windapp
grails uninstall-plugin hibernate
grails install-plugin app-engine

Make sure you’ve got your APPENGINE_HOME environment variable configured correctly. It should be something like:

export APPENGINE_HOME=/home/akoelewijn/programs/appengine-java-sdk-1.2.1

Next, I’ll create a controller which will implement a function to return the windforecast in JSON format:

grails create-controller Forecast

Edit the controller, and implement the method. The method just puts some dummy data into an array, which is returned as a JSON datastructure:

import grails.converters.*
class ForecastController {
    def show = { 
        def forecast = []
        forecast << [ windspeed: 5, winddirection: 200 ]
        render forecast as JSON
    }
}

Next, we need to edit the url mappings, calling the path /forecast will execute the method implemented above:

class UrlMappings {
    static mappings = {
        "/forecast"(controller:"forecast"){
            action = [GET:"show"]
        }
      "/"(view:"/index")
      "500"(view:'/error')
    }
}

We have now implemented the service, which you can test, for example with curl. Test the application locally as follows:

grails app-engine run
curl http://localhost:8080/forecast

To test it on the google app engine, we first need to create an application. Log into Google app engine and create an application here: http://appengine.google.com/. For convenience, i’ve given it the same name as my grails application: windapp.

Now i can deploy the application:

grails set-version 1
grails app-engine package
$APPENGINE_HOME/bin/appcfg.sh update ./target/war

You should now have a running service. Again, we use curl to test it:

curl http://windapp.appspot.com/forecast

Now, using JQuery, i’ll create a simple html page to test the service. Create the webpage: web-app/index.html. To keep it simple, i’m using a google hosted version of jQuery, and i’m including all the javascript code in the page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Forecast service test</title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("jquery", "1");
        google.setOnLoadCallback(function(){
            $("#getForecast").click(getForecast);
        });
        function getForecast(){
            $.ajax({
                type:"GET", 
                url:"/forecast",
                success:function(json){
                    $("#forecastResults").text("Wind speed: " + json[0]["windspeed"] + 
                                        ", direction: " + json[0]["winddirection"]);
                },
                dataType: "json",
                contentType: "text/json"              
            });
        }
    </script>
  </head>
  <body>
    <h1>Forecast tester</h1>
    <button id="getForecast">Get Forecast</button>
    <div id="forecastResults"></div>
  </body>
</html>

Redeploy the application to app engine:

grails app-engine deploy

Here’s the resulting page: windapp. Just push the button to call the REST service.

Andrej Koelewijn

Howto: Grails, REST, Google App Engine and JQuery

Related