English

Google App Engine

HOWTO: Create a Facebook App with Google App Engine and Best Buy Remix

This article was written and submitted by an external contributor. The Google App Engine team thanks Omar Abdelwahed for his time and expertise.

Omar Abdelwahed
January 17, 2009

Introduction

Creating a Facebook application can be an exercise in gleaning arcane knowledge from multiple online sources. In particular, it is often hard to find an example of what should be a common practice: hosting a Facebook app on Google AppEngine. This article will attempt to turn the "arcane" into everyday knowledge and provide a useful example by integrating Best Buy's Remix API and iLike's Music API to search for music products that users of our application can listen to and then purchase.

What You Need...

We won't cover all the basics of setting up individual platforms and API's for use but rather concentration on the integration points. If you are new to any of the following, be sure the read the corresponding startup guides:

  1. Google AppEngine "Getting Started": http://code.google.com/appengine/docs/python/gettingstarted/
  2. Facebook "Creating your first application": http://wiki.developers.facebook.com/index.php/Creating_your_first_application
  3. Best Buy Remix "Getting started is easy": http://remix.bestbuy.com
  4. iLike Developer Signup: http://www.ilike.com/developer/signup

For each of the above, you'll need to register and utilize the corresponding API keys where required.

Note:This article assumes the developer is working locally on Windows (and sitting comfortably at his or her favorite café), however this is not required (the café is however). Most of what is covered will easily translate to your development environment of choice. Windows-specific items will be noted where possible.

Sample Code...

Download the source code for our example application here:

http://code.google.com/p/shelftalkers/

Place the project in a location of your choice. We'll refer to this code throughout the article.

Host on Google AppEngine...

Assuming you've downloaded AppEngine (if not, before sure to read the guide above), go to your project source directory and open shelftalkers.py in your favorite IDE or text editor. (Python's IDLE was installed as part of your development environment in Google's "Getting Started" guide.) At the top of shelftalkers.py are four API keys that you need to fill out.

  • _FbApiKey: This is the API key provided by Facebook when you create a new app. More on this below.
  • _FbSecret: This is your FB app's secret key. Never share this outside your server hosted code. This is also provided by Facebook for each app you create.
  • _BestBuyRemixKey: This is API key to access Best Buy's full product catalog and store information. Amongst the many features, it lets you find products in stores near you and online at BestBuy.com. This key is provided to you when you register as a developer for Best Buy Remix. You can use either "development" or "production" keys here. Of course, use production keys when you release your app to the public.
  • _iLikeDevKey: Like Remix, this is the API key to access iLike's streaming music API. You receive this key when you register as a developer.

Take a look at the top declarations of shelftalker.py. Most of the imported libraries are explained in Google's "Getting Started" guide. The others are described here:

  • import xml.etree.cElementTree: We use this library to parse returned XML data from API calls to Remix.
  • import facebook: This is the Python wrapper for calls to the Facebook API. You can find this wrapper inside the facebook.py source file.

Save your code changes.

On Windows, open a command line to launch AppEngine locally. AppEngine starts using the installed dev_appserver.py server. Enter this command substituting the paths for both your local AppEngine install and ShelfTalker's source code:

google_appengine/dev_appserver.py shelftalkers/

You should now have a local copy of AppEngine running on http://127.0.0.1:8080. Don't try to browse this just yet. We need to create your app on Facebook next!

Create Your Facebook App...

In order to create applications on Facebook, you have to install Facebook's Developer Application. The Developer Application is the hub where your applications are defined and developers can commune with one another. (Again, you can read all about this in the above guide.)

Click the "Set Up New Application" button at the top of the Developer Application page.


Facebook: Set Up New Application

You can now define the properties of your application: its name and integration points into users' profiles, for example. Two things we'll concern ourselves with now are the "Callback URL" and "Render Method" (under Canvas Settings). The Callback URL will eventually point to your code hosted on Google AppEngine. For our example (and likely most of the applications you create like this), we'll set the Render Method to "IFrame" which allows us more freedom in our app implementation.

For now, do the following:

  1. Enter http://127.0.0.1:8080 for the Callback URL. This will allow you to test your code on your local copy of AppEngine before uploading to production.
  2. Choose "IFrame" for the Render Method.
  3. Add an application name, canvas URL and any other properties you wish to define. You can always come back and change these settings later.
  4. Save your changes. Facebook will note where there is any missing information for the basic application to run. Make changes where indicated.
  5. Copy and paste the new API key and Secret key provided by Facebook into the locations described above in shelftalkers.py. Save your changes. AppEngine will automatically detect the changes and serve them.

Now, for the moment of truth. Facebook applications are addressed by their canvas URL. For example: http://apps.facebook.com/shelftalkers/ where "shelftalkers" is replaced by what you provided in your FB app's settings. Be sure you are logged into Facebook, and enter your app's canvas URL into your browser. If all goes well, you'll see your app running locally!

Of course, not everything goes as plan. Some basic trouble-shooting tips:

  • If you get a "404" error or "page is missing" or "unavailable", check that AppEngine is running locally and that you provided http://127.0.0.1:8080 as the Callback URL in your app settings.
  • If you get code errors, you can view these in your browser or in the command shell running AppEngine. Codes errors should be limited to incorrect API keys.
  • If something more is afoot, check your startup guides for help. They detail everything we need to run our application.

The Application: ShelfTalkers...

So we have a running application on Facebook and Google AppEngine. What does it do? Glad you asked... "ShelfTalkers" has a basic premise. Users enjoy entertainment like music and they wish to start conversations around what they love. A simple text box lets people talk about their favorite music artist and attach sample music to their comments. This is posted to their Facebook pages for others to read, listen and continue the discussion.

Our basic application uses the Best Buy Remix API to search for the products first, so that later we can provide locations for users to make purchases. The returned search list feeds the iLike API to return associated music streams for the artists found. In the end, a sample Facebook post, including cover art, music sample and comment is shown for the user to choose to post to his or her page.

Note that our basic application is not feature complete. It is meant as a start primarily to teach how to create and host a Facebook application on Google AppEngine and provide a simple example of the Best Buy Remix API and iLike API. What is missing?

  • Mini-feed postings of the actual comments. This is a fairly advanced topic and covered in a number of locations on Facebook. See the "Where To Go From Here" links below.
  • Buy links! iLike provides a few online choices, but it would be nice to locate a Best Buy store near users for that immediate purchase. Remix provides an interface to query product availability by store location by a user's zip code. You can see examples of how to do this on the Remix documentation page: http://remix.bestbuy.com/docs

Production Hosting: Google AppEngine...

Now that your app works locally, we need to share it with the world! Uploading your app to Google AppEngine is well described in the "Getting Started" guide here: http://code.google.com/appengine/docs/python/gettingstarted/uploading.html.

The one thing to note is what you call your app on AppEngine. Open the app.yaml file in your source directory. The first line marked "application" is the name of your app. You must change this to correspond to the name you define on AppEngine at https://appengine.google.com. AppEngine will provide you with an URL to call your application. It will be of the following form (substitute your_app_id):

http://your_app_id.appspot.com/

Follow the directions to upload your app. Go back to your Facebook application settings and replace the Callback URL with this new URL on AppEngine. Save your changes and you are now serving your Facebook application on Google AppEngine.

Where To Go From Here...

Here are some sources for more advanced development.

Searching with the Best Buy Remix API:
http://remix.bestbuy.com/docs

Facebook Feeds and Posting Stories:
http://wiki.developers.facebook.com/index.php/Feed

jQuery and AJAX:
http://docs.jquery.com/Ajax

PyFacebook -- Python Wrapper:
http://wiki.developers.facebook.com/index.php/PythonPyFacebookTutorial
http://code.google.com/p/pyfacebook/

About the Author...

Omar Abdelwahed

Omar Abdelwahed is a Producer at Ubisoft Entertainment. His work focuses on producing games for social networks and connecting devices that are proliferating today's world. (In short, he gets paid to play with Facebook on his iPhone.) While at Best Buy, Omar led the development of the Remix Open API (http://remix.bestbuy.com/) that allows mashup developers access to Best Buy's product catalog and store information.

Omar can be contacted at the following sites...

Twitter: appleweed
Facebook: Omar Abdelwahed

Web: