Search

Dark theme | Light theme

August 6, 2009

A simple Groovlet to read and display JSON data on Google App Engine with Gaelyk

It's time to use our Yahoo! Pipe to display the JSON results on a Groovy generated page running on Google App Engine. Why? Because we can! In this blog post we learn how easy it is to deploy a simple Groovlet to the Google Appengine and how easy it is to parse JSON results.

We start with Gaelyk, the lightweight Groovy toolkit for Google App Engine. With Gaelyk we can build Groovlets and use the Google App Engine SDK APIs in our Groovy code. To get started with Gaelyk we download the template project which contains almost everything we need. After downloading the ZIP file we must expand it to a directory on our computer. Next we open the file war/WEB-INF/appengine-web.xml. In the application element we fill in our own Google App Engine application identifier. Our project is now configured for Google App Engine, that is all we need to do!

Next we create a new Groovlet at war/WEB-INF/groovy/pipes.groovy:

import java.net.URL
import net.sf.json.groovy.JsonSlurper

def pipeURL = 'http://pipes.yahoo.com/pipes/pipe.run?_id=UtVVPkx83hGZ2wKUKX1_0w&_render=json'
def pipeResult = urlFetchService.fetch(new URL(pipeURL))
def json = new JsonSlurper().parseText(new String(pipeResult.content))

html.html {
 head {
   style("""
     .item {
       border-bottom: 1px solid #eee;
       padding: 5px;
     }
     .date {
       font-style: italic;
     }
     #activities {
       border-top: 1px solid #eee;
     }
   """)
 }
 body {
  div(id: 'activities') {
   json.value.items.each { item -> 
    div(class: 'item') {
     a(href: item.link, item.title)
     br()
     span(class: 'date', item.pubDate)
    }
   }
  }
 }
}

In this Groovlet we use the URLFetchService from the Google App Engine SDK API. With this service we invoke our Yahoo! Pipe and get the results using Google's infrastructure. The service is automatically injected by the Gaelyk toolkit so we can use the service immediately. At line 4 we see the call to get the Yahoo! Pipe results.

The result of the pipe is then parsed by the JsonSlurper from the JSON-lib library (line 5). The JsonSlurper is modeled after the XmlSlurper to read in JSON data instead of XML data.

At line 7 we start with building the HTML output. A Groovlet has the implicit variable html, which is actually a MarkupBuilder connected to the servlet output. The HTML is straight forward. In the head section we define some CSS styles, in the body we have a div block with id activities. At line 24 we use the each closure to walk throught the Yahoo! Pipe results and create a new div element with information from the Pipe. We use the item's link and title field to create an HTML anchor and at a new line we print the item's pubDate field enclosed by a span element.

We need to copy the JSON-lib JAR files (including dependencies) to the war/WEB-INF/lib directory, so the Groovlet can use the JsonSlurper class.

To test the Groovlet we run the Google App Engine development server from the command-line:

$ dev_appserver war

In our browser we open http://localhost:8080/pipes.groovy and we get an HTML formatted list of the Yahoo! Pipe JSON output. To deploy the application to the Google App Engine we only have to execute one command:

$ appcfg update war

Well that is it! A simple Groovlet using the Google App Engine SKD API to read a JSON source and display the results as HTML. In a next blog post we will learn how to pretty print the date (using PrettyTime) and how we can use a separate view to display the results. Further we will optimize the Yahoo! Pipe request by using the MemCache service from Google App Engine SDK API.