browser-couch: tutorial.html annotate

annotate tutorial.html @ 78:17ce8b6be452

Added a 'now you try' section and a 'where to go from here' section to the tutorial.

author	Atul Varma <varmaa@toolness.com>
date	Mon, 20 Apr 2009 14:30:27 -0700
parents	4450be5d1b2f
children	042eb025bce5

rev	line source
70 36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	4 <head>
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	5 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	6 <link rel="stylesheet" type="text/css" media="all"
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	7 href="css/tutorial.css" />
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	8 <title>Blog Example</title>
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	9 </head>
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	10 <body>
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	11 <div id="content" class="documentation">
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	12 <h1>Using BrowserCouch</h1>
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	13
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	14 <p>Suppose we want to add offline support for a blog. To get a
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	15 database called <tt>blog-posts</tt> in BrowserCouch, you can use the
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	16 following function:</p>
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	17
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	18 <div class="example-code">
73 8f0b18026782 Changed around a few things in the tutorial. Atul Varma <varmaa@toolness.com> parents: 70 diff changeset	19 BrowserCouch.get('blog-posts', onRetrieveCb, new FakeStorage());
70 36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	20 </div>
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	21
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	22 <p>It's clear that the first parameter is the name of the database we
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	23 want; the second parameter is the callback that will be passed the
73 8f0b18026782 Changed around a few things in the tutorial. Atul Varma <varmaa@toolness.com> parents: 70 diff changeset	24 database once it's fetched. The third parameter specifies the engine
8f0b18026782 Changed around a few things in the tutorial. Atul Varma <varmaa@toolness.com> parents: 70 diff changeset	25 that will be used to persistently store our database across browsing
8f0b18026782 Changed around a few things in the tutorial. Atul Varma <varmaa@toolness.com> parents: 70 diff changeset	26 sessions. In this case we're using <tt>FakeStorage</tt>, which just
8f0b18026782 Changed around a few things in the tutorial. Atul Varma <varmaa@toolness.com> parents: 70 diff changeset	27 stores everything non-persistently in memory for the sake of
8f0b18026782 Changed around a few things in the tutorial. Atul Varma <varmaa@toolness.com> parents: 70 diff changeset	28 example. We could just as easily leave out the third parameter to have
8f0b18026782 Changed around a few things in the tutorial. Atul Varma <varmaa@toolness.com> parents: 70 diff changeset	29 BrowserCouch figure out the best storage backend based on our
8f0b18026782 Changed around a few things in the tutorial. Atul Varma <varmaa@toolness.com> parents: 70 diff changeset	30 browser's capabilities.</p>
70 36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	31
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	32 <p>If the database doesn't already exist, an empty one will be created
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	33 for us. Putting blog posts into the database can be done via
73 8f0b18026782 Changed around a few things in the tutorial. Atul Varma <varmaa@toolness.com> parents: 70 diff changeset	34 an <tt>onRetrieveCb()</tt> function like this:</p>
70 36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	35
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	36 <div class="example-code">
73 8f0b18026782 Changed around a few things in the tutorial. Atul Varma <varmaa@toolness.com> parents: 70 diff changeset	37 function onRetrieveCb(db) {
8f0b18026782 Changed around a few things in the tutorial. Atul Varma <varmaa@toolness.com> parents: 70 diff changeset	38 blogDb = db;
8f0b18026782 Changed around a few things in the tutorial. Atul Varma <varmaa@toolness.com> parents: 70 diff changeset	39 blogDb.put(
70 36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	40 [{id: 0, author: 'Myk', title: 'Burritos', content: 'Burritos are yum.'},
73 8f0b18026782 Changed around a few things in the tutorial. Atul Varma <varmaa@toolness.com> parents: 70 diff changeset	41 {id: 1, author: 'Thunder', title: 'Bacon', content: 'I like bacon.'},
8f0b18026782 Changed around a few things in the tutorial. Atul Varma <varmaa@toolness.com> parents: 70 diff changeset	42 {id: 2, author: 'Thunder', title: 'Beer', content: 'Beer is good too.'}],
8f0b18026782 Changed around a few things in the tutorial. Atul Varma <varmaa@toolness.com> parents: 70 diff changeset	43 onCommitCb
70 36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	44 );
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	45 };
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	46 </div>
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	47
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	48 <p>Every item we put into our database needs to have an <tt>id</tt>
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	49 attribute, but aside from that, the item can contain any
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	50 JSON-encodable data.</p>
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	51
73 8f0b18026782 Changed around a few things in the tutorial. Atul Varma <varmaa@toolness.com> parents: 70 diff changeset	52 <p>Now it's possible to make a view that organizes all the post titles
8f0b18026782 Changed around a few things in the tutorial. Atul Varma <varmaa@toolness.com> parents: 70 diff changeset	53 by author:</p>
70 36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	54
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	55 <div class="example-code">
73 8f0b18026782 Changed around a few things in the tutorial. Atul Varma <varmaa@toolness.com> parents: 70 diff changeset	56 function onCommitCb() {
8f0b18026782 Changed around a few things in the tutorial. Atul Varma <varmaa@toolness.com> parents: 70 diff changeset	57 blogDb.view({
70 36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	58 map: function(doc, emit) {
73 8f0b18026782 Changed around a few things in the tutorial. Atul Varma <varmaa@toolness.com> parents: 70 diff changeset	59 emit(doc.author, doc.title);
70 36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	60 },
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	61 finished: function(result) {
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	62 displayInElement(result, 'author-keyed-view');
74 4450be5d1b2f Added reduce() example to the tutorial. Atul Varma <varmaa@toolness.com> parents: 73 diff changeset	63 tryAnotherView();
70 36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	64 }
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	65 });
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	66 }
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	67 </div>
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	68
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	69 <p>The output placed in the <tt>author-keyed-view</tt> element is:</p>
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	70
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	71 <div class="example-output" id="author-keyed-view">
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	72 </div>
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	73
74 4450be5d1b2f Added reduce() example to the tutorial. Atul Varma <varmaa@toolness.com> parents: 73 diff changeset	74 <p>We could also try creating another view that adds a
4450be5d1b2f Added reduce() example to the tutorial. Atul Varma <varmaa@toolness.com> parents: 73 diff changeset	75 <tt>reduce()</tt> function to group together the blog post titles with
4450be5d1b2f Added reduce() example to the tutorial. Atul Varma <varmaa@toolness.com> parents: 73 diff changeset	76 the authors:</p>
4450be5d1b2f Added reduce() example to the tutorial. Atul Varma <varmaa@toolness.com> parents: 73 diff changeset	77
4450be5d1b2f Added reduce() example to the tutorial. Atul Varma <varmaa@toolness.com> parents: 73 diff changeset	78 <div class="example-code">
4450be5d1b2f Added reduce() example to the tutorial. Atul Varma <varmaa@toolness.com> parents: 73 diff changeset	79 function tryAnotherView() {
4450be5d1b2f Added reduce() example to the tutorial. Atul Varma <varmaa@toolness.com> parents: 73 diff changeset	80 blogDb.view({
4450be5d1b2f Added reduce() example to the tutorial. Atul Varma <varmaa@toolness.com> parents: 73 diff changeset	81 map: function(doc, emit) {
4450be5d1b2f Added reduce() example to the tutorial. Atul Varma <varmaa@toolness.com> parents: 73 diff changeset	82 emit(doc.author, doc.title);
4450be5d1b2f Added reduce() example to the tutorial. Atul Varma <varmaa@toolness.com> parents: 73 diff changeset	83 },
4450be5d1b2f Added reduce() example to the tutorial. Atul Varma <varmaa@toolness.com> parents: 73 diff changeset	84 reduce: function(keys, values) {
4450be5d1b2f Added reduce() example to the tutorial. Atul Varma <varmaa@toolness.com> parents: 73 diff changeset	85 return values;
4450be5d1b2f Added reduce() example to the tutorial. Atul Varma <varmaa@toolness.com> parents: 73 diff changeset	86 },
4450be5d1b2f Added reduce() example to the tutorial. Atul Varma <varmaa@toolness.com> parents: 73 diff changeset	87 finished: function(result) {
4450be5d1b2f Added reduce() example to the tutorial. Atul Varma <varmaa@toolness.com> parents: 73 diff changeset	88 displayInElement(result, 'author-titles-view');
78 17ce8b6be452 Added a 'now you try' section and a 'where to go from here' section to the tutorial. Atul Varma <varmaa@toolness.com> parents: 74 diff changeset	89 tryMyView();
74 4450be5d1b2f Added reduce() example to the tutorial. Atul Varma <varmaa@toolness.com> parents: 73 diff changeset	90 }
4450be5d1b2f Added reduce() example to the tutorial. Atul Varma <varmaa@toolness.com> parents: 73 diff changeset	91 });
4450be5d1b2f Added reduce() example to the tutorial. Atul Varma <varmaa@toolness.com> parents: 73 diff changeset	92 }
4450be5d1b2f Added reduce() example to the tutorial. Atul Varma <varmaa@toolness.com> parents: 73 diff changeset	93 </div>
4450be5d1b2f Added reduce() example to the tutorial. Atul Varma <varmaa@toolness.com> parents: 73 diff changeset	94
4450be5d1b2f Added reduce() example to the tutorial. Atul Varma <varmaa@toolness.com> parents: 73 diff changeset	95 <p>The output is as follows:</p>
4450be5d1b2f Added reduce() example to the tutorial. Atul Varma <varmaa@toolness.com> parents: 73 diff changeset	96
4450be5d1b2f Added reduce() example to the tutorial. Atul Varma <varmaa@toolness.com> parents: 73 diff changeset	97 <div class="example-output" id="author-titles-view">
4450be5d1b2f Added reduce() example to the tutorial. Atul Varma <varmaa@toolness.com> parents: 73 diff changeset	98 </div>
4450be5d1b2f Added reduce() example to the tutorial. Atul Varma <varmaa@toolness.com> parents: 73 diff changeset	99
78 17ce8b6be452 Added a 'now you try' section and a 'where to go from here' section to the tutorial. Atul Varma <varmaa@toolness.com> parents: 74 diff changeset	100 <h1>Now You Try!</h1>
17ce8b6be452 Added a 'now you try' section and a 'where to go from here' section to the tutorial. Atul Varma <varmaa@toolness.com> parents: 74 diff changeset	101
17ce8b6be452 Added a 'now you try' section and a 'where to go from here' section to the tutorial. Atul Varma <varmaa@toolness.com> parents: 74 diff changeset	102 <p>To get a better feel for how MapReduce works, you can use the text
17ce8b6be452 Added a 'now you try' section and a 'where to go from here' section to the tutorial. Atul Varma <varmaa@toolness.com> parents: 74 diff changeset	103 field below to try making your own view. Just press the tab key when
17ce8b6be452 Added a 'now you try' section and a 'where to go from here' section to the tutorial. Atul Varma <varmaa@toolness.com> parents: 74 diff changeset	104 you're done making changes to recompute the view.</p>
17ce8b6be452 Added a 'now you try' section and a 'where to go from here' section to the tutorial. Atul Varma <varmaa@toolness.com> parents: 74 diff changeset	105
17ce8b6be452 Added a 'now you try' section and a 'where to go from here' section to the tutorial. Atul Varma <varmaa@toolness.com> parents: 74 diff changeset	106 <textarea class="example-code try-code">
17ce8b6be452 Added a 'now you try' section and a 'where to go from here' section to the tutorial. Atul Varma <varmaa@toolness.com> parents: 74 diff changeset	107 function tryMyView() {
17ce8b6be452 Added a 'now you try' section and a 'where to go from here' section to the tutorial. Atul Varma <varmaa@toolness.com> parents: 74 diff changeset	108 blogDb.view({
17ce8b6be452 Added a 'now you try' section and a 'where to go from here' section to the tutorial. Atul Varma <varmaa@toolness.com> parents: 74 diff changeset	109 map: function(doc, emit) {
17ce8b6be452 Added a 'now you try' section and a 'where to go from here' section to the tutorial. Atul Varma <varmaa@toolness.com> parents: 74 diff changeset	110 emit(doc.author, doc.title);
17ce8b6be452 Added a 'now you try' section and a 'where to go from here' section to the tutorial. Atul Varma <varmaa@toolness.com> parents: 74 diff changeset	111 },
17ce8b6be452 Added a 'now you try' section and a 'where to go from here' section to the tutorial. Atul Varma <varmaa@toolness.com> parents: 74 diff changeset	112 reduce: function(keys, values) {
17ce8b6be452 Added a 'now you try' section and a 'where to go from here' section to the tutorial. Atul Varma <varmaa@toolness.com> parents: 74 diff changeset	113 return values;
17ce8b6be452 Added a 'now you try' section and a 'where to go from here' section to the tutorial. Atul Varma <varmaa@toolness.com> parents: 74 diff changeset	114 },
17ce8b6be452 Added a 'now you try' section and a 'where to go from here' section to the tutorial. Atul Varma <varmaa@toolness.com> parents: 74 diff changeset	115 finished: function(result) {
17ce8b6be452 Added a 'now you try' section and a 'where to go from here' section to the tutorial. Atul Varma <varmaa@toolness.com> parents: 74 diff changeset	116 displayInElement(result, 'try-my-view');
17ce8b6be452 Added a 'now you try' section and a 'where to go from here' section to the tutorial. Atul Varma <varmaa@toolness.com> parents: 74 diff changeset	117 }
17ce8b6be452 Added a 'now you try' section and a 'where to go from here' section to the tutorial. Atul Varma <varmaa@toolness.com> parents: 74 diff changeset	118 });
17ce8b6be452 Added a 'now you try' section and a 'where to go from here' section to the tutorial. Atul Varma <varmaa@toolness.com> parents: 74 diff changeset	119 }
17ce8b6be452 Added a 'now you try' section and a 'where to go from here' section to the tutorial. Atul Varma <varmaa@toolness.com> parents: 74 diff changeset	120 </textarea>
17ce8b6be452 Added a 'now you try' section and a 'where to go from here' section to the tutorial. Atul Varma <varmaa@toolness.com> parents: 74 diff changeset	121
17ce8b6be452 Added a 'now you try' section and a 'where to go from here' section to the tutorial. Atul Varma <varmaa@toolness.com> parents: 74 diff changeset	122 <p>Here's the output to the above view:</p>
17ce8b6be452 Added a 'now you try' section and a 'where to go from here' section to the tutorial. Atul Varma <varmaa@toolness.com> parents: 74 diff changeset	123
17ce8b6be452 Added a 'now you try' section and a 'where to go from here' section to the tutorial. Atul Varma <varmaa@toolness.com> parents: 74 diff changeset	124 <div class="example-output" id="try-my-view"></div>
17ce8b6be452 Added a 'now you try' section and a 'where to go from here' section to the tutorial. Atul Varma <varmaa@toolness.com> parents: 74 diff changeset	125
17ce8b6be452 Added a 'now you try' section and a 'where to go from here' section to the tutorial. Atul Varma <varmaa@toolness.com> parents: 74 diff changeset	126 <h1>Where To Go From Here</h1>
17ce8b6be452 Added a 'now you try' section and a 'where to go from here' section to the tutorial. Atul Varma <varmaa@toolness.com> parents: 74 diff changeset	127
17ce8b6be452 Added a 'now you try' section and a 'where to go from here' section to the tutorial. Atul Varma <varmaa@toolness.com> parents: 74 diff changeset	128 <p>There's features in the API that aren't covered here, so check out
17ce8b6be452 Added a 'now you try' section and a 'where to go from here' section to the tutorial. Atul Varma <varmaa@toolness.com> parents: 74 diff changeset	129 the check out the <a class="intra-wiki"
17ce8b6be452 Added a 'now you try' section and a 'where to go from here' section to the tutorial. Atul Varma <varmaa@toolness.com> parents: 74 diff changeset	130 href="index.html#js/tests.js">annotated source code for the test
17ce8b6be452 Added a 'now you try' section and a 'where to go from here' section to the tutorial. Atul Varma <varmaa@toolness.com> parents: 74 diff changeset	131 suite</a> for more sample code.</p>
17ce8b6be452 Added a 'now you try' section and a 'where to go from here' section to the tutorial. Atul Varma <varmaa@toolness.com> parents: 74 diff changeset	132
70 36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	133 <script src="js/ext/jquery.js"></script>
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	134 <script src="js/browser-couch.js"></script>
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	135 <script src="js/tutorial.js"></script>
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	136 </body>
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself. Atul Varma <varmaa@toolness.com> parents: diff changeset	137 </html>

Mercurial > browser-couch

annotate tutorial.html @ 78:17ce8b6be452