Doing IT the App Engine Way

Using Google's App Engine, you can develop Web applications in Python or Java and deploy them on Google's infrastructure for free—until you hit five million page views per month.
Defining Your Views

The first template is rendered when no URL or the default URL is matched during the routing process. It's rendered by IndexHandler, is stored in your templates directory, is called index.html and looks like this:


Either <a href="/comment">leave a comment</a>
or check out what
<a href="/comments">other people are saying</a>
about this webapp.

As you may notice, the index.html template is plain HTML. It displays a welcome page that offers your site's users the option to leave a new message or see all the messages already submitted (Figure 1). Granted, this HTML is trivial, but critically, it is stored separately from your code, which maintains the goal of the MVC pattern.

Figure 1. The Index Request Handler Page

When users click the leave a comment link, a request routes to LeaveCommentHandler's get method, which renders another template called comment.html, which, again, resides in the templates directory. Here's this template's HTML:

<head><title>Leave a Comment</title></head>

<form action="/comment" method="POST">
<p>Enter your e-mail address:
<input type="text" name="c_email"></p>

<p>Enter your message (be nice):
<textarea name="c_message" rows="5" cols="50"></textarea></p>

<p><input type="Submit" value="Submit your comment"></p>

Again, this is standard HTML. A form is rendered to the screen (Figure 2), and the form solicits an e-mail address and message from the user. Note the names assigned to each interface element in the HTML. Also, note that the form's action tag is directed back to the /comment URL. When users submit the form, the data is posted to App Engine, which results in the post method executing within your LeaveCommentHandler request handler. This code creates a new row of data from the submitted data (note how the names match) and saves it to the datastore. The code then redirects to the /comments URL.

Figure 2. The Leave a Comment Form

When App Engine sees the /comments request URL, it invokes the DisplayCommentsHandler request handler's get method, which fetches 1,000 rows of data from the datastore and then sends the data to the comments.html template for rendering. This final template looks a bit more like a “real” template:

<head><title>Here are the User Comments</title></head>

<p>Here are the comments.</p>

{% for c in comments %}
    <p><b>{{ c.cust_email }}</b> said:
    <i>"{{ c.cust_message }}"</i></p>
{% endfor %}


This is the final template that contains templating instructions, which are included to process the data that the request handler sent to the template engine when the template was invoked in your controller code. Anything enclosed within {% and %} and within {{ and }} is template code; everything else is standard HTML. App Engine's templating technology is based on Django's, which is a popular Python-based Web application framework. Code found within {% and %} is executed, whereas code found within {{ and }} is a value substitution. This template takes the comment query results passed to the template and displays each row within some custom HTML. The rendered results are shown in Figure 3.

Figure 3. The Displayed List of Comments

Testing Your webapp

Testing your application locally is complicated (only slightly) by having to ensure that you use the correct version of Python, namely the 2.5 release. If you have been following along, you should have App Engine installed in its own directory in your HOME directory, as well as your webapp code in a directory called myapp. To start your webapp from your HOME directory, open a shell and use this command:

python2.5 google_appengine/ myapp/

A bunch of status messages will appear in the shell, and if all is well, the development server will inform you that your webapp is up and running on http://localhost:8080. Fire up your favorite browser, surf to your webapp and give it a spin. You should see behaviors similar to those shown in Figures 1, 2 and 3.



Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Great intro tutorial!

techkilljoy's picture

This has to be one of the two best intro-level tutorials on appengine. Thanks so much for writing it and putting the time into the explanations. It all works, makes sense, and your efforts are very much appreciated!