misc/cosmopolite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update tutorial for new tutorial editor pages

Browse Source
This commit is contained in:
Ian Gulliver
2014-06-08 19:46:10 -07:00
parent 389f67c88b
commit 87e90cc1e7
1 changed files with 46 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
tutorial.html
View File

@@ -26,15 +26,54 @@
<h1>
<a name="cosmopolite" class="anchor" href="#cosmopolite"><span class="octicon octicon-link"></span></a>Cosmopolite Tutorial</h1>
<h3>AppEngine prerequisites</h3>
<h3>Test cosmopolite</h3>
<ol>
<li>Load the cosmopolite playground <a href="https://playground.cosmopolite.org/cosmopolite/static/debug.html" target="_blank">debug page</a>.
<li>Subscribe to a subject <i>testsubject</i></li>
<li>Send a message to that subject; it should appear in the message list at right.</li>
</ol>
<h3>Send a message to a subject</h3>
<ol>
<li>Load the <a href="https://playground.cosmopolite.org/cosmopolite/static/debug.html" target="_blank">debug page</a>.
<li>Subscribe to <i>testsubject</i></li>
<li>Load <a href="https://playground.cosmopolite.org/cosmopolite-tutorial/1.html" target="_blank">tutorial page #1</a></li>
<li>Click <b>Execute JavaScript</b>, then click OK on the popup</li>
<li>The debug page should show the message from the tutorial page</li>
</ol>
<h3>Subscribe to a subject</h3>
<ol>
<li>Load <a href="https://playground.cosmopolite.org/cosmopolite-tutorial/2.html" target="_blank">tutorial page #2</a></li>
<li>Click <b>Execute JavaScript</b>, then click OK on the popup</li>
<li>Use the <a href="https://playground.cosmopolite.org/cosmopolite/static/debug.html" target="_blank">debug page</a> to send a message to <i>testsubject</i></li>
<li>The tutorial page should generate an alert popup</li>
</ol>
<h3>Key/value store</h3>
<ol>
<li>Cosmopolite can be used as a key/value store, with historical data and update notification</li>
<li>When subscribing to a subject, you can request the most recent message for that subject</li>
<li>Load <a href="https://playground.cosmopolite.org/cosmopolite-tutorial/3.html" target="_blank">tutorial page #3</a></li>
<li>Click <b>Execute JavaScript</b>, then click OK on the popup</li>
<li>The tutorial page should generate an alert popup showing the last message sent</li>
</ol>
<h3>Pin a value</h3>
<ol>
<li>Pins publish a message temporarily, until the source conncetion disconnects. This can be used for presence information</li>
<li>Load the <a href="https://playground.cosmopolite.org/cosmopolite/static/debug.html" target="_blank">debug page</a>.
<li>Subscribe to <i>testsubject</i></li>
<li>Load <a href="https://playground.cosmopolite.org/cosmopolite-tutorial/4.html" target="_blank">tutorial page #4</a></li>
<li>Click <b>Execute JavaScript</b>, then click OK on the popup</li>
<li>Watch the debug page; you should see the pin.</li>
<li>Close tutorial page #4; the pin disappears from the debug page.</li>
</ol>
<h3>Set up a local instance for further testing</h3>
<ol>
<li>Download and install the <a href="https://developers.google.com/appengine/downloads">Python AppEngine SDK</a></li>
</ol>
<h3>Server-side setup</h3>
<ol>
<li>Create an application in your SDK client</li>
<li>Download cosmopolite via the links at left. Unpack it into your local application directory and rename the newly-created subdirectory to "cosmopolite"</li>
<li>Create an <a href="https://developers.google.com/appengine/docs/python/config/appconfig">app.yaml</a> file for your application.</li>
@@ -45,19 +84,6 @@
inbound_services:
- channel_presence</pre></li>
<li>Start the application in your SDK client</li>
</ol>
<h3>Test cosmopolite</h3>
<ol>
<li>Access your local cosmopolite debug page (replace port if necessary): <a href="http://localhost:8080/cosmopolite/static/debug.html" target="_blank">http://localhost:8080/cosmopolite/static/debug.html</a></li>
<li>Subscribe to a subject <i>testsubject</i></li>
<li>Send a message to that subject; it should appear in the message list below</li>
</ol>
<h3>Create a test page</h3>
<ol>
<li>Create a test.html page at the top level of your application:
<pre>&lt;html&gt;
&lt;head&gt;
@@ -75,55 +101,7 @@ inbound_services:
static_files: test.html
upload: test.html</pre></li>
<li>Remove the mapping for main.app from app.yaml (if using the autogenerated file)</li>
<li>Edit test.html. Replace "// Subsequent script examples go here" with:
<pre>var cosmo = new Cosmopolite();
cosmo.sendMessage('testsubject', 'test message');</pre></li>
<li>Keep the <a href="http://localhost:8080/cosmopolite/static/debug.html" target="_blank">debug page</a> up and subscribed (to <i>testsubject</i>) in one browser tab</li>
<li>Load <a href="http://localhost:8080/test.html" target="_blank">your test page</a></li>
<li>The debug page should show the message from the test page</li>
<li>You've written code that uses cosmopolite!</li>
</ol>
<h3>Subscribe to a subject</h3>
<ol>
<li>Change test.html:
<pre>var callbacks = {
onMessage: function(msg) {
alert(msg['message']);
},
};
var cosmo = new Cosmopolite(callbacks);
cosmo.subscribe('testsubject');</pre></li>
<li>Load (or re-load) the <a href="http://localhost:8080/test.html" target="_blank">test page</a></li>
<li>Use the debug interface to send a message to <i>testsubject</i></li>
<li>Your test page should generate an alert popup</li>
</ol>
<h3>Key/value store</h3>
<ol>
<li>Cosmopolite can be used as a key/value store, with historical data and update notification</li>
<li>When subscribing to a subject, you can request the most recent message for that subject</li>
<li>Change test.html:
<pre>var cosmo = new Cosmopolite();
cosmo.subscribe('testsubject', 1).then(function() {
var msg = cosmo.getLastMessage('testsubject');
alert(msg['message']);
});</pre></li>
<li>Your test page should generate an alert popup showing the last message sent</li>
</ol>
<h3>Pin a value</h3>
<ol>
<li>Pins publish a message temporarily, until the source conncetion disconnects. This can be used for presence information</li>
<li>Open the debug interface and subscribe to <i>testsubject</i></li>
<li>Change test.html:
<pre>var cosmo = new Cosmopolite();
cosmo.pin('testsubject', 'browser is alive!');</pre></li>
<li>Load the <a href="http://localhost:8080/test.html" target="_blank">test page</a> and watch the debug page; you should see the pin.</li>
<li>Close the test page, and the pin disappears.</li>
<li>Retry the examples above using your new test page and your local debug page</li>
</ol>
</section>