Get Started with App Engine

The following tutorial will walk you through the steps to create a new Entourage-powered web application for Google App Engine.

Prerequisites

Before you get started, you will need to download and install Python, the Python Image Library (PIL), and Google App Engine. The best resources for help installing these items can be found at the Google App Engine project website.

Create a new project

Download the Entourage Service Broker implementation for Google App Engine and unzip it in the directory in which you would like to develop your application. Edit app.yaml to configure your application's name (more on configuring your app can be found here). Once your application's name has been configured, navigate to your project directory and execute the command dev_appserver.py . - this will start the local development app server that emulated the runtime sandbox environment.

Hello World

Let’s start by creating a simple user interface that will test remote messaging. Lets create [project root]/public/hello_world.html and replace the body contents with the following:

<html>
<head>
  <title>Appcelerator Entourage&trade; Hello World</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <script src="/javascripts/entourage.js" type="text/javascript"></script>
</head>
<body style="visibility:hidden" on="l:app.compiled then visible">
 
  <!-- generate request -->
  <textarea id="your_message" fieldset="hello_world">type something</textarea>
  <div>
    <input type="button" value="click me" fieldset="hello_world"
       on="click then r:hello.request"/> 
  </div>
 
  <!-- display response -->
  <div>
    You typed: 
    <span on="r:hello.world.response then value[message]"
        style="color:blue">
      nothing yet
    </span>  
  </div>
 
  <!-- mock service -->
  <script type="text/javascript">
    $MQL("r:hello.world.request", function(message) {
      $MQ({
        name: "r:hello.response",
        payload: {
          message: message.payload.your_message
        }
      });
    });
  </script>
 
</body>
</html>

Test out your new application by accessing it at the following url: http://localhost:8080/hello_world.html

User Interface Explanation

There are several basic concepts covered in this example. First, we use the fieldset attribute to link the TEXTAREA with the INPUT button. When a click event is generated by an element with a fieldset, Appcelerator will look for other input elements with the same fieldset value, and it will include their values in the message generated by the click event. This feature is very useful when creating forms.

Second, we show how an element can subscribe to a message and set its value based on an attribute in the message payload - in this case the message attribute.

Finally, we show an example of how to create a mock service. A mock service is a SCRIPT widget that subscribes to a remote request and responds with a remote response. This is a powerful capability because it enables you to create fully functional user interfaces (UI) without writing a single line of service code. These UIs are also 100% reusable. Once you finish your UI, you can remove your mock services as you create the remote service implementations. We call this Interactive Use Case development. You can learn more about Interactive Use Cases in the Best Practices section of this documentation.

Service

Now we’re ready to implement the service for our Hello World example. First, remove (or comment out) the mock service that you created above. Next, open [project root]/app/services/hello_service.py and create a new service method like the one below:

@Service(request='hello.request', response='hello.response')
def hello(params, session, msgtype):
    message = params.get('message', 'World')
    return {'message': message, 'success': 'true'}

You should now be able to open your example HTML page and run the code against our new service method.