Modifying the Chow-Down Application, part 1: Adding media from YouTube and Picasa

Recently I was given the task of modifying the Chow Down sample application (originally written to demonstrate how to implement the Google FriendConnect API on Google AppEngine) to include videos, pictures and search results in the restaurant detail pages. This task resulted in the creation of Chow Down Gdata (full source code) which uses the YouTube Data API, the Picasa Web Albums API and the AJAX Search APIs.

Since everything was written in Python, using our Python client library was a no brainer. The first step was to add the necessary files and import statements. The application follows a standard MVC layout, so the next step was to create a new view called JsonRestaurantInfoView in views.py, which I then connected both to the ajax_restaurant_info.htmltemplate and also to the restaurants_info method in providers/restaurants.py.

The bulk of the modifications happen inside restaurants_info:

# Create client and query to execute a YouTube search:
gdata_youtube_client = gdata.youtube.service.YouTubeService();
query = gdata.youtube.service.YouTubeVideoQuery()
query.vq = "%s %s" % (restaurant.name, restaurant.city)
video_feed = gdata_youtube_client.YouTubeQuery(query)

# Grab the URL to the embeddable Flash player SWF (if embeddable)
swf_url = video_entry.GetSwfUrl()

if swf_url:
 restaurant.player = """<object width="425" height="350">
        <param name="movie" value="%s"></param>
        <embed src="%s" type="application/x-shockwave-flash"
         width="425" height="350"></embed></object>""" %
         (swf_url, swf_url)

But wait! We are not done yet. Let's also look for pictures for this restaurant in Picasa:

gdata_picasawebalbums_client = gdata.photos.service.PhotosService()
query_parameters = map(urllib.quote, [restaurant.name, restaurant.city]);

# Fetch a feed of 10 thumbnails, 32x32 pixels in size and cropped to a square
photo_feed = gdata_picasawebalbums_client.GetFeed(
 "/data/feed/api/all?q=%s%%20%s&max-results=10&thumbsize=32c" %
 (query_parameters[0], query_parameters[1]))

We store all the new metadata in the restaurant object that ends up being passed to the template. To direct users there from the search page, I added a simple show_restaurant_info function which is triggered when a user clicks on the restaurant title in the search listing. While I was in the templates/index.html file, I also added the ajax_api_restaurant_info function which fetches blog, web, news and book search information about the restaurant.

Check out the full source code to get the full picture including information about how this data was also cached.

In the next article, Jeff Fisher is going to talk about how to optimize the performance for this application by using JavaScript.