Project: Basic Web Application List with Real-time Updating (Part 1)

Introduction

In the past week, I've been experimenting with the Google App Engine (GAE) Channel API. The GAE Channel API allows a client web application to open a persistent connection to allow the server to push information to the client. This allows the real-time updating of the client information without the use of polling, which is very inefficient. The Channel API is very similar to html5 websockets.

To learn about the Channel API, I have decided to make a simple web application that displays a list of messages posted by its users. All of the users sees the same listing of messages. The difference with this simple web application is that the listing of messages is updated, almost instantly or with minimal delay, every time a message is added.  This sort of real-time updating is to be accomplished with the use of the Channel API.

This functionality can also be accomplished by configuring the client to periodically check the server for new messages or polling the server. However, this mechanism would entail a significant overhead and is quite inefficient.

Web Application Stack

To implement this simple web application, the following libraries/technologies were chosen.

• Google App Engine (Python)
• Jquery
• Jquery UI
• Evently
• Mustache Templates (Javascript)

A surprising addition to the technologies above is Evently. Evently is a Jquery plug-in which makes the writing of event-based Javascript in a more structured, declarative manner. I learned Evently when I worked on the PEPBrowser Couchapp application. I really think that its paradigm is very sound and would make the Javascript part of the web application more structured and a lot cleaner.

Set-up the GAE Python SDK and the Boiler-Plate App

In this set-up, I am assuming that you are using a Unix-based operating system such as Linux or OS X and that you already have atleast Python 2.5 installed, which is usually the default case in current versions of Linux and OS X.

First download the 'Linux/other platforms' version of the Python SDK from this page. Even if you are using OS X, I still suggest that you use the 'Linux/other platforms' version. After downloading the SDK, unzip the downloaded file into a directory.

$ unzip google_appengine_1.5.2.zip

This will create the 'google_appengine' directory in the current working directory.

$ cd google_appengine

$ cp -r new_project_template/ basicrtlist

Then go into the 'google_appengine' directory and copy the 'new_project_template' folder into a new folder 'basicrtlist'. The 'basicrtlist' folder is now our web application project. It already contains some boiler-plate code which we need to modify.

The boiler-plate web application project contains only three files.

• app.yaml - the application configuration file
• index.yaml - the datastore index configuration file
• main.py - the main Python source file

To complete the boiler-plate web application, we need to make some modifications in app.yaml. We need to change the application name from 'new-project-template' to 'basicrtlist'.

application: basicrtlist

version: 1

runtime: python

api_version: 1

handlers:

- url: .*

  script: main.py

After making the changes, we could try running our barebones web application.

$ ./dev_appserver.py basicrtlist/

We could access the output of the web application by accessing, http://localhost:8080, using a web browser.

Next Post

In the next post, I would extend the basic boiler-plate application and integrate all the tools we would be using. The code for this application could be downloaded from here.