I’ve made note of my fondness of Google sites before.

This project originated from the need to consolidate our JSDocs into a single search able source with all our other data. As that data is all in Google Sites at the moment, integration with Google Sites seemed the sensible choice.

Last thing I want to mention is that I don’t claim to be super knowledgable on this topic, I’m only going to talk about what I’ve experienced in developing this prototype.

High Level

Google provides REST API’s for a lot of its services as well several different client libraries to interact with said REST API’s without having to worry to much about xml, namespaces and such.

I used the gdata-javascript-client in this example as its more my specialty.

In the js client, for getting the content feed (which is the listing of your sites information) you’ll want to login, instantiate a GoogleService, and make a getFeed call using the GoogleService instance. Lets get to the prototype to see how we do that.

Prototype

In my prototype, I have 3 buttons that allow you to login, get your content feed, and then update one of the pages with new HTML.

Here’s a link to the Prototype. Be aware, you’ll need to to change the URL’s to a google site you control (probably), otherwise you won’t be able interact with its API. (At least not the update, the get should work)

Here’s the full text of that prototype.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html>
  4. <head>
  5. <title>Sample using the Google data JavaScript client library</title>
  6. <link rel="stylesheet" type="text/css" href="http://code.google.com/css/dev_docs.css">
  7. <style>
  8.     blockquote { margin: 2px 6px; padding: 0; border: 1px solid silver; }
  9.     span { display: block; font: 11px Arial; color: #999; }
  10.     input { border: 1px solid #333; margin: 3px 0 12px 0; width: 600px; }
  11.     textarea { width: 600px; height: 300px; }
  12.     h3 { display: block; margin: 0; padding: 0; height: 25px;}
  13.     #out { margin: 10px 0 0 0; border: 2px solid #F00; }
  14. </style>
  15. <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  16. <script type="text/javascript">
  17.  
  18. /* Loads the Google data JavaScript client library */
  19. google.load("gdata", "2.x");
  20.  
  21. function init() {}
  22.  
  23. function logMeIn() {
  24.     var nameOfMyGoogleServiceThatIsTotallyMadeUp = "test-app";
  25.     var scope = "http://sites.google.com/feeds/";
  26.     var token = google.accounts.user.login(scope);
  27.    
  28.     service = new google.gdata.client.GoogleService("jotspot", nameOfMyGoogleServiceThatIsTotallyMadeUp);
  29. }
  30.  
  31. function get() {
  32.     var feed = document.getElementById("siteUrl").value;
  33.     logMeIn();
  34.     // Call the content feed, pass the result to the output function
  35.     service.getFeed(feed, output);
  36. }
  37.  
  38. function update() {
  39.     var pageId = document.getElementById("pageId").value;
  40.     logMeIn();
  41.     // Get an entry object for the page
  42.     service.getEntry(pageId, function(entryRoot) {
  43.    
  44.         // $t indicates the text of the content node.
  45.         // We are setting it to whats in the textarea.
  46.         entryRoot.entry.content.$t = txt();
  47.         service.updateEntry(pageId, entryRoot.entry, output, output);
  48.     });
  49. }
  50.  
  51. function output(obj) {
  52.     if(!obj) { out('Watch was passed nothing');}
  53.     out((function(o) {
  54.         var s = [];
  55.         for(var i in o) {
  56.             s.push([i, '=', o[i]].join(''));
  57.             if(!o[i]) {
  58.                 continue;
  59.             } else if(o[i].constructor == Object) {
  60.                 s.push('<blockquote>' + arguments.callee(o[i]) + '</blockquote>');
  61.             } else if(o[i].constructor == Array) {
  62.                 for(var c=0;c<o&#91;i&#93;.length;c++) {
  63.                     s.push('<blockquote>' + arguments.callee(o[i][c]) + '</blockquote>');
  64.                 }
  65.             }
  66.         }
  67.         return s.join('<br/>');
  68.     })(obj));
  69. }
  70.  
  71. function out(str){ document.getElementById("out").innerHTML = str; }
  72. function txt() { return document.getElementById("updateText").value; }
  73.  
  74. google.setOnLoadCallback(init);
  75.  
  76. </script>
  77. </head>
  78. <body>
  79.     <button onclick="logMeIn()">Login</button>
  80.     <button onclick="get()">Get Content of Site</button>
  81.     <button onclick="update()">Update</button>
  82.     <br/>
  83.     <h3>Site Id</h3>
  84.     <input type="text" id="siteUrl" value="http://sites.google.com/feeds/content/site/justisetest"/>
  85.     <br/>
  86.     <h3>Page Id</h3>
  87.     <span>Obviously you should get this programmatically, but its a prototype so yea...</span>
  88.     <input type="text" id="pageId" value="http://sites.google.com/feeds/content/site/justisetest/8416968326017325843"/>
  89.     <br/>
  90.     <textarea id="updateText"><h1>updated!</h1></textarea>
  91.     <div id="out">
  92.    
  93.     </div>
  94.     <img src="bullet.jpg" border="0"/>
  95.    
  96. </body>
  97. </html>

Login and instantiate a service

  1. var scope = "http://sites.google.com/feeds/";
  2.     var token = google.accounts.user.login(scope);
  3.    
  4.     service = new google.gdata.client.GoogleService("jotspot", nameOfMyGoogleServiceThatIsTotallyMadeUp);

Here we are logging into the google service using oAuth, then we create a new GoogleService object, passing the type of service we want to interact with. (Which is jotspot) Then we supply just some name for our application.

Getting the content

  1. var feed = document.getElementById("siteUrl").value;
  2.     logMeIn();
  3.     // Call the content feed, pass the result to the output function
  4.     service.getFeed(feed, output);

The feed URL for my little public site is http://sites.google.com/feeds/content/site/justisetest

So thats what I plug into our service’s get feed. (It gets declared as a global variable in the logMeIn() call)

Its an async call, so it doesn’t return anything, it passes the result to an onSuccess function.

My onSuccess function is just a method that takes something and outputs it to a div, so its basically a kind of a little watch window.

Updating content

  1. var pageId = document.getElementById("pageId").value;
  2.     logMeIn();
  3.     // Get an entry object for the page
  4.     service.getEntry(pageId, function(entryRoot) {
  5.    
  6.         // $t indicates the text of the content node.
  7.         // We are setting it to whats in the textarea.
  8.         entryRoot.entry.content.$t = txt();
  9.         service.updateEntry(pageId, entryRoot.entry, output, output);
  10.     });

The Page id I just stole from the content field, which I’m basically hard-coding.

Ensure I’m logged in, and then I make a call to the service to request the entry object.

Once my onSuccess function is called, I update the entry’s page text, and then use the service to update the entry again.

Those two output calls are the onSuccess and onError functions, which right now just output the result.

Thats it

Obviously a lot left to figure out, but I think once you’ve got to this point, you can actually start exploring the features of the API without having to figure out how to the most basic of operations.

No comments

Leave a Reply