Advanced Use of the Untappd Beer Application

     curl -u USERNAME:MD5-PASSHASH http://api.untappd.com/v2/user_feed?key=YOUR-API-KEY

Let’s look at this closely. The ‘-u’ parameter specifies that we need Basic HTTP Authentication.
Untappd wants the username followed by an MD5 hash of the password. Then you just put the URL and your API key.
What you retrieve looks a bit like this:

     {“http_code”:200,”returned_results”:25,”next_query”:”http:\/\/api.untappd.com\/v2\/user_feed….

Now this format is not good for analysing but we will leave out this step here.
Next is to retrieve this data in some form. There are 2 main ways:

1. By hand and save the JSON to serve it as any other webpage
2. Use a different source (i.e. Google App Engine, Perlscript,…)

In this example we will use the 2nd method, by running a Google App Engine App.

First lets look at the jQuery AJAX call, we will be using to retrieve the data from App Engine before we look at the App Engine part:

                                           $.ajax({
                                             url: “http://192.168.0.100:8080/” + localStorage.username,
                                            dataType: “jsonp”,
                                            success: function(data) {
                                            if (data.ERROR){
                                               alert(“Wrong username!!”);
                                               jQT.goTo(‘#settings’)
                                            } else {
                                               $.each(data.results, beerdata.addCheckin);
                                             }
                                           },
                                         });

The reason we use JSONP here is, because of the cross-domain-scripting policy in browsers.
So what this JSONP call does is a quite cool idea, it injects a script
tag (which aren’t affected by the cross-domain-scripting policy) into the HTML and
then executes the ‘success’ function using the JSON we retrieve as the first function
parameter passed. In this case the parameter ‘data’. After that we check if there
is any sort of error, if there isn’t we proceed to a function that sorts the data
into a Javascript Object.(If there is we just error something)
At this stage we do not care about authentication.

Next let’s look at the App Engine part.
The most important part of the code is this:

     self.response.out.write(“%s(%s)” %(callback, json))

This bit of code displays the JSON, but not only that but it padds it with a callback that is
given in the jQuery AJAX call from above. The called URL looks somewhat like this:

     http://192.168.0.100:8080/testuser?callback=jsonp1234567

And the displayed data to that URL would be:

     jsonp1234567({“http_code”:200,”returned_results”:25,”next_query”:”http:…….)

The next step would be to sort the data, but I will jump ahead to displaying.
JQuery has a very nice and easy way of doing this. Again I will first show you the code and then explain it:

                function showData(e, info){
                   if (info.direction == ‘out’) return;
                  var $page = $(this);
                   if ($page.data(“loaded”)) return;
                  var $li = $(‘#data ul li:first’).clone();
                  $(‘#data ul’).html($li)
                   for (beer in beerdata.beers){
                       var $li = $(‘#contest ul li:first’).clone();
                      $li.html(beerdata.beers[beer].name + “<small class=’counter’>” +