From 87e90cc1e7ea60438eb629285058c0893becc36d Mon Sep 17 00:00:00 2001 From: Ian Gulliver Date: Sun, 8 Jun 2014 19:46:10 -0700 Subject: [PATCH] Update tutorial for new tutorial editor pages --- tutorial.html | 114 ++++++++++++++++++++------------------------------ 1 file changed, 46 insertions(+), 68 deletions(-) diff --git a/tutorial.html b/tutorial.html index 5bfa73a..ce80bbe 100644 --- a/tutorial.html +++ b/tutorial.html @@ -26,15 +26,54 @@

Cosmopolite Tutorial

-

AppEngine prerequisites

+

Test cosmopolite

+
    +
  1. Load the cosmopolite playground debug page. +
  2. Subscribe to a subject testsubject
    3. +
  3. Send a message to that subject; it should appear in the message list at right.
    4. +
+ +

Send a message to a subject

+
    +
  1. Load the debug page. +
  2. Subscribe to testsubject
    3. +
  3. Load tutorial page #1
    4. +
  4. Click Execute JavaScript, then click OK on the popup
    5. +
  5. The debug page should show the message from the tutorial page
    6. +
+ +

Subscribe to a subject

+
    +
  1. Load tutorial page #2
    2. +
  2. Click Execute JavaScript, then click OK on the popup
    3. +
  3. Use the debug page to send a message to testsubject
    4. +
  4. The tutorial page should generate an alert popup
    5. +
+ +

Key/value store

+
    +
  1. Cosmopolite can be used as a key/value store, with historical data and update notification
    2. +
  2. When subscribing to a subject, you can request the most recent message for that subject
    3. +
  3. Load tutorial page #3
    4. +
  4. Click Execute JavaScript, then click OK on the popup
    5. +
  5. The tutorial page should generate an alert popup showing the last message sent
    6. +
+ +

Pin a value

+
    +
  1. Pins publish a message temporarily, until the source conncetion disconnects. This can be used for presence information
    2. +
  2. Load the debug page. +
  3. Subscribe to testsubject
    4. +
  4. Load tutorial page #4
    5. +
  5. Click Execute JavaScript, then click OK on the popup
    6. +
  6. Watch the debug page; you should see the pin.
    7. +
  7. Close tutorial page #4; the pin disappears from the debug page.
    8. +
+ +

Set up a local instance for further testing

  1. Download and install the Python AppEngine SDK
    2. -
- -

Server-side setup

- -
  1. Create an application in your SDK client
  2. Download cosmopolite via the links at left. Unpack it into your local application directory and rename the newly-created subdirectory to "cosmopolite"
  3. Create an app.yaml file for your application.
    4. @@ -45,19 +84,6 @@ inbound_services: - channel_presence
  4. Start the application in your SDK client
    5. -
- -

Test cosmopolite

- -
    -
  1. Access your local cosmopolite debug page (replace port if necessary): http://localhost:8080/cosmopolite/static/debug.html
    2. -
  2. Subscribe to a subject testsubject
    3. -
  3. Send a message to that subject; it should appear in the message list below
    4. -
- -

Create a test page

- -
  1. Create a test.html page at the top level of your application: 
    <html>
   <head>
@@ -75,55 +101,7 @@ inbound_services:
   static_files: test.html
   upload: test.html
  2. Remove the mapping for main.app from app.yaml (if using the autogenerated file)
    3. -
  3. Edit test.html. Replace "// Subsequent script examples go here" with: -
    var cosmo = new Cosmopolite();
-cosmo.sendMessage('testsubject', 'test message');
    4. -
  4. Keep the debug page up and subscribed (to testsubject) in one browser tab
    5. -
  5. Load your test page
    6. -
  6. The debug page should show the message from the test page
    7. -
  7. You've written code that uses cosmopolite!
    8. -
- -

Subscribe to a subject

- -
    -
  1. Change test.html: -
    var callbacks = {
-  onMessage: function(msg) {
-    alert(msg['message']);
-  },
-};
-var cosmo = new Cosmopolite(callbacks);
-cosmo.subscribe('testsubject');
    2. -
  2. Load (or re-load) the test page
    3. -
  3. Use the debug interface to send a message to testsubject
    4. -
  4. Your test page should generate an alert popup
    5. -
- -

Key/value store

- -
    -
  1. Cosmopolite can be used as a key/value store, with historical data and update notification
    2. -
  2. When subscribing to a subject, you can request the most recent message for that subject
    3. -
  3. Change test.html: -
    var cosmo = new Cosmopolite();
-cosmo.subscribe('testsubject', 1).then(function() {
-  var msg = cosmo.getLastMessage('testsubject');
-  alert(msg['message']);
-});
    4. -
  4. Your test page should generate an alert popup showing the last message sent
    5. -
- -

Pin a value

- -
    -
  1. Pins publish a message temporarily, until the source conncetion disconnects. This can be used for presence information
    2. -
  2. Open the debug interface and subscribe to testsubject
    3. -
  3. Change test.html: -
    var cosmo = new Cosmopolite();
-cosmo.pin('testsubject', 'browser is alive!');
    4. -
  4. Load the test page and watch the debug page; you should see the pin.
    5. -
  5. Close the test page, and the pin disappears.
    6. +
  6. Retry the examples above using your new test page and your local debug page