Runtah

Recently we launched add-ons for Google Docs and Sheets. Now developers can easily package Apps Script applications as add-ons and distribute these scripts via the add-on store. The add-on store gives developers wider distribution, automatic updates, versioning and is vastly superior to the restrictive script gallery that it was designed to replace.

Starting today, we are deprecating the option for developers to publish to the script gallery. No new gallery submissions will be accepted or approved, but scripts already present in the gallery will remain accessible (via the old version of Sheets).

If you rely on distributing or consuming your script from the script gallery, then please convert your script into an add-on and follow the add-on publication instructions.

Posted by Saurabh Gupta, Google Apps Script Team. As the product manager for Google Apps Script, Saurabh is responsible for Apps Script’s overall vision and direction.

JavaScript has long been the de facto choice for client-side web development, but lately its been catching on server-side as well. While we like to think that Apps Script has contributed to the trend, projects such as Mozillas Rhino and Node.js have also done a great deal to popularize the concept. As a result, developers have created a wealth of new open-source JavaScript libraries, and in this post well talk about how you can leverage them in your Apps Script projects.

Underscore
One library I wanted to use in my scripts was Underscore, which describes itself as "a utility-belt library for JavaScript." It provides a wealth of helper functions that make coding in JavaScript cleaner and more enjoyable. Take, for example, the simple situation where you want to log each value in a range.

// Using plain JavaScript.
for (var i = 0; i < values.length; i++) {
  for (var j = 0; j < values[i].length; j++) {
    Logger.log(values[i][j]);
  }
}

Although writing for loops like this is a common pattern, its a fair amount of typing and you need to keep track of counter variables that serve little purpose. Underscore provides an each() method that makes the process much simpler.

// Using Underscore.
_.each(values, function(row) {
  _.each(row, function(cell) {
    Logger.log(cell);
  });
});

Passing anonymous functions as parameters takes a little getting used to, but if youve worked with jQuery, the pattern feels familiar.

Underscore also has some great extensions, and Underscore.string provides some useful string manipulation features. My favorite is the ability to use sprintf() notation in JavaScript, which can simplify the process of building complex strings.

// Using plain JavaScript.
var message = "Hello, " + firstName + " " + lastName + ". Your wait time is " + wait + " minutes.";

// Using Underscore.string.
var message = _.sprintf("Hello, %s %s. Your wait time is %d minutes.", firstName, lastName, wait);

Integrating with Apps Script
The simplest way to include the Underscore library in a project would be to paste its source code directly into your script, but this would lead to a lot of duplication if you end up using it in multiple projects. Earlier this year, we released a feature in Apps Script called libraries that allows you to share scripts and include them in other projects. Packaging a JavaScript library like Underscore as an Apps Script library is possible, but requires some helper functions to work correctly.

When Underscore loads, it creates a global variable named "_" that you use to access its functionality. Apps Script specifically prevents the global scope of a library from interfering with the global scope of the script that includes it, so I built a helper function into the library to pass the variable around.

// In the library.
function load() {
  return _;
}

In my script that includes the library, I simply make a call to that function and use the result to set up my own "_" variable.

// In the script that includes the library.
var _ = Underscore.load();

To try my copy of the Underscore library in your own project, use the project key "MGwgKN2Th03tJ5OdmlzB8KPxhMjh3Sh48" and the code snippet above. You can browse the full source code here.

Using it with the HtmlService
Using the code above, I could easily include the library in my server-side Apps Script code, but I also wanted to use these functions client-side in my web app served by the HtmlService. To accomplish this, I created a copy of the Underscore source code, wrapped it in <script> tags, and stored them in Html files (instead of Script files). These snippet files could then be included in my web apps HtmlTemplates using the helper function below.

// In the library.
var FILES = [Underscore.js, Underscore.string.js, Init.js];
function include(output) {
  for (var i = 0; i < FILES.length; i++) {
    var file = FILES[i];
    output.append(
        HtmlService.createHtmlOutputFromFile(file).getContent());
  }
}

This function was called in the web apps HtmlTemplate using the simple code below.

<!-- In the web app that includes the library. -->
<html>
  <head>
    <? Underscore.include(output) ?>
  </head>
  ...

Other libraries
Integrating with Underscore was fairly easy, but trying the same approach with other open-source libraries may be a bit more complicated. Some libraries wont run correctly in the Apps Script environment if they rely on certain capabilities within the browser or Node.js runtime. Additionally, to be served by the HtmlService, the code must pass the Caja engines strict validation, which many popular libraries dont meet. In some cases, you may be able to manually patch the library to work around these issue, but this usually requires a deep understanding of how the library works.

We hope youre inspired to use Underscore and other open-source libraries in your own work. If you find a library that works great with Apps Script, share it with me on Google+ and Ill help get the word out.

Eric Koleda profile Eric is a Developer Programs Engineer based in NYC on the Google Apps Script team. Hes previously worked with the AdWords API and enterprise content management software.

Editors note:Navin Kumar is CTO and co-founder of Socialwok, a feed-based group collaboration application for enterprises that integrates with Google Apps. With Socialwok, Google Apps users can create their own private social network to share Google Docs, Calendars and Spreadsheets with their coworkers. Navin and his team built Socialwok on Google App Engine for Java, Google Web Toolkit and Google GData APIs. Socialwok will be at the Google IO sandbox May 19 - 20, 2010.

At Socialwok (http://www.socialwok.com/tour), we work extensively with a wide variety of Google technologies (Google App Engine, Google Web Toolkit), OpenID, OAuth, and Google Data APIs (Google Docs, Google Calendar, Google Spreadsheets, etc...) while building our product.

Sharing and Previewing Google Docs in feeds

Most enterprise microblogging or collaboration solutions exist in their separate walled garden. Users have to use separate logins and post status updates independently of their existing workflow. From the start, we designed Socialwok to be integrated with the workflow of businesses who use Google Apps. Users can use their existing Google Apps or Gmail accounts to login into Socialwok. They can access all features of Socialwok from right inside Gmail. They can also create and share their existing Google Docs (Documents, Presentations, Spreadsheets) and Google Calendars with other coworkers who are following them in a feed.

In the below example, I upload a Microsoft Powerpoint (ppt) to Google Docs for sharing in a feed.

Uploading a Microsoft Powerpoint file for sharing using Google Docs
Google Docs automatically converts the Microsoft Powerpoint to a Google Presentation that can be previewed from right inside Socialwok. By clicking the preview option, we preview the Google Presentation in a new tab.

Successful posting of the Google Presentation shared in a feed
Previewing the Google Presentation from the Socialwok web using the Google Data API

Using Google Docs viewer to preview Google Docs, PDF, PPT, XLS in Socialwok Desktop and Mobile Web

Another really cool feature introduced in our recent release is the ability to preview Google Docs, PDF, PPT, or XLS files directly in the Socialwok web interface with no download required. Using the Google Documents Viewer, our users can preview any Google Document, pdf, ppt or XLS directly from their desktop web browser or their HTML5-capable WebKit mobile browser (iPhone and Android).

Preview of a shared pdf document from Socialwoks desktop web application using the Google Docs Viewer
The same applies to other common file formats like Adode Portable File (pdf), Microsoft Excel (xls) and other Google Docs supported formats. Socialwok provides businesses with cloud based access to their office documents from both the web and the mobile (HTML 5).

Preview of a shared pdf document using Google Docs viewer from Socialwoks HTML 5 mobile web page

Sharing Google Docs using the Google Data APIs

We use the Google GData APIs to upload the document, and then proceed to attach it to a new Socialwok status update. The latest version of the Google GData Java APIs work great on Google App Engine Java, with almost no configuration. Now, before accessing and manipulating Google Docs or Calendar from the GData APIs, we must make sure that we have authentication credentials for the current user. Our application stores the existing user in the session. Heres how we do that using the low-level Java datastore APIs.

Entity currentUser = (Entity) httpRequest.getSession()
    .getAttribute("userObject");

Each Google Apps or Google Accounts user actually logs in to Socialwok using their own Google authentication credentials. We accomplish this using the Hybrid Step2 OpenID/OAuth authentication flow. You can learn more about this flow here. From this flow, we gain the users credentials via OAuth, and store the OAuth token and token secret in another child object of our user:

Query query = new Query("GoogleAccount", currentUser.getKey());
Entity googleAccount = dataService.prepare(query).asSingleEntity();
GoogleOAuthParameters oauthParameters = new GoogleOAuthParameters();
oauthParameters.setOAuthConsumerKey(
    oauthProps.getProperty("google.consumerKey"));
oauthParameters.setOAuthConsumerSecret(
    oauthProps.getProperty("google.consumerSecret"));
oauthParameters.setOAuthToken(
    (String) googleAccount.getProperty("oauthToken"));
oauthParameters.setOAuthTokenSecret(
    (String) googleAccount.getProperty("oauthSecret"));

We now use the Google Docs GData APIs to upload the document. Google GData APIs use Atom Feeds to retrieve and upload new information into existing Google Services like Google Docs. For Google Docs, this involves using the MediaStreamSource API.

DocsService service = new DocsService("Socialwok-v1");
service.setOAuthCredentials(oauthParameters,signer);

MediaStreamSource streamSource = new MediaStreamSource(fileInputStream,
    contentType);
streamSource.setName(filename);
DocumentListEntry inserted = service.insert( new URL(
    "http://docs.google.com/feeds/default/private/full/?convert="+
    doConvert), DocumentListEntry.class, streamSource);

Notice the URL used for uploading the Google Doc. This is a universal URL for uploading new files to Google Docs. The convert parameter is actually very important; it determines whether the file will be converted to a new Google Doc (Document, Presentation, Spreadsheet), or will be uploaded as an arbitrary file without any conversion.

Previewing Google Docs using the Google Data APIs

After uploading the presentation to Google Docs, sometimes another user who is following you would like to preview that presentation quickly without having to fully open Google Docs in order to see the file. To do this, we examine how the actual Google Docs interface previews documents. Each of the 3 different types of Google Docs has its own specific viewer or previewing mode url to simply view the files.

For documents, when you are in the editor, if you click "View," and then click "Webpage preview." You will then get your Google Doc displayed as a webpage. The URL of this "viewer" is:

https://docs.google.com/a/socialwok.com/View?docid=0Adnk...dkZmNoOTIyNQ

For reference, the editor link for this document is:

https://docs.google.com/a/socialwok.com/Doc?docid=0Adnk...dkZmNoOTIyNQ

As you can see the transformation between these 2 URLs is quite simple. Therefore we can perform the following to actually bring up a viewable Google Doc in Socialwok.

1. Get the Google Docs entry from the datastore.
   

   Entity fileAttachment = datastoreService.get(attachmentKey);
   String entryId = fileAttachment.getProperty("fileId");

2. Get the Google Docs entry from the Google Docs GData Service.
   

   URL entryUrl = new URL(entryId);
   DocumentListEntry docEntry = service.getEntry(entryUrl,
       DocumentListEntry.class);

3. Get the document link from the Google Docs Entry
   

   String docLink = docEntry.getDocumentLink().getHref();

4. Convert the link to the viewer.
   

   if (docEntry instanceof DocumentEntry) {
       docLink = docLink.replace("/Doc","/View");
   }

Its important to note that since Socialwok uses your Google Apps or Gmail account to login through OpenID, you are already logged into Google services. In Socialwok, you can click the Mail, Calendar, or Docs links to access each of those Google products. Because of this authentication, its very easy for us to place this link into an <iframe> tag and embed this in our Socialwok interface. Heres the GWT code to do just that:

import com.google.gwt.user.client.ui.Frame;
...
Frame viewerFrame = new Frame();
viewerFrame.setUrl(docLink);
viewerFrame.setHeight("500px");
viewerFrame.setWidth("600px");
containerWidget.add(viewerFrame);

Heres are the different Google Docs editor to viewer mappings, with the changes highlighted:

Document Type	Action	URL
Document	Edit	https://docs.google.com/a/<domain>/Doc?docid=...
Dcument	View	https://docs.google.com/a/<domain>/View?docid=...
Presentation	Edit	https://docs.google.com/a/<domain>/present/edit?id=...
Presentation	View	https://docs.google.com/a/<domain>/present/view?id=...
Spreadsheet	Edit	https://spreadsheets.google.com/a/<domain>/ccc?key=...
Spreadsheet	View	https://spreadsheets.google.com/a/<domain>/lv?key=...

Previewing PDF, PPT, and XLS files using the Google Document Viewer

Google Docs has a fantastic feature that lets users preview any PDF,PPT, XLS, or TIFF file via a HTTP link. You can try the viewer out at http://docs.google.com/viewer. If you look at the bottom of this page, there is information on how to construct your own URLs so that you can either link or embed the viewer in your own web sites. Heres the rundown on the parameters:


We will use the embedded parameter to display the viewer in our own interface. To construct the URL to the embedded viewer with the example given by Google, we get the following:
http://docs.google.com/viewer?url=http%3A%2F%2Flabs.google.com%2Fpapers%2Fbigtable-osdi06.pdf&embedded=true
We can then place this URL in an <IFRAME> element to embed the viewer in our application.
<iframe src="">http://docs.google.com/viewer?url=http%3A%2F%2Flabs.google.com%2Fpapers%2Fbigtable-osdi06.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>
Heres how to create the same using the GWT Frame widget in Java.

import com.google.gwt.user.client.ui.Frame;
...
Frame viewerFrame = new Frame();
viewerFrame.setUrl("http://docs.google.com/viewer?url=http%3A%2F%2Flabs.google.com%2Fpapers%2Fbigtable-osdi06.pdf&embedded=true");
viewerFrame.setHeight("500px");
viewerFrame.setWidth("600px");
containerWidget.add(viewerFrame);

As you can see, its really quite easy to use the embedded Google Document Viewer. You can check out more information on the Google Document Viewer on the Google Docs blog.

Extending Socialwok using our APIs. Meet Socialwok at Google IO

The above example of sharing and previewing Google Docs using the Google Docs viewer is the result of developers pushing the envelope using Google App Engine with the ever expanding suite of Google APIs. Here at Socialwok, we continue to challenge ourselves in creating innovative web services that leverage on all that cloud computing has to offer. We will continue to have more features and integrations in the future, and we will be opening up Socialwoks APIs for developers in the next few months. You can follow all these developments at our official blog http://blog.socialwok.com.

We would love to hear from fellow developers who would like to create applications to extend Socialwok; please email us at info@socialwok.com.

Socialwok will be at Google I/O in the Developer Sandbox in May where we will be giving demos of a new major add-on service to Socialwok. If you would like a demo, email us at info@socialwok.com and drop by the Socialwok demo station at Google I/O.

By Navin Kumar, Socialwok

At 6:00 pm PST this evening, we will be live streaming an important announcement at Google Campfire One about our latest developer efforts on the Google Developers YouTube channel. Dont miss it!

Posted by Ryan Boyd, Developer Advocate

I ran into Kevin Brennan tonight at #agile2011. I was glad for the chance to talk to him because Ive received quite a few questions from BAs in Winnipeg about how their role will change when they work on agile projects and Kevin has been doing a lot of work with the agile extension to IIBAs BABOK.

Here are is a summary of our conversation:

• How many BAs can articulate the goals and objectives of their company, team, or project? Start here if you cannot.
• Even if you are able to articulate the goals and objectives - can your team? Without understanding the project goals and objectives the team doesnt have enough information to help them make decisions about scope and priorities and often makes decisions based on Is this helping somebody? which can increase the scope of the project.
• BAs can help facilitate the alignment of priorities and goals - enabling the business to speak to the development team with one voice.
• Facilitate requirements and a common understanding of the proposed system through inclusive modeling techniques (eg. user story maps, silent brainstorming, product box - see more here)
• Facilitate the acceptance of change (rather than the restriction of it).
• BAs dont do any less analysis, but they will end up doing less documentation. This reminds me of this tweet:
  

  “Documents we write communicate our good thinking. You can write one without thinking. You can communicate good ideas without a document.” – Jeff Patton (Jan. 19, 2011 - twitter)

• As a BA, if you need to create a document, it will more likely be after the story is complete rather than before creating the story. Some additional guidelines for documentation on agile projects can be found here.

Plus, here are a few more that I thought of after our conversation:

• Collaborate with testers who share many of the same concerns about priorities, goals, scope, and requirements.
• One thing that doesnt change is the need to work with the business as any software produced by the team may change the business processes. Even with iterative delivery, there will be adjustments to be made.

If you have others to add or even disagree with some above - please comment or find Kevin or myself during the conference and well chat.

Its Tuesday again!  For a while, the poll was acting screwy, but the votes were all restored just in time!  The winner was "How to Make a Simple Frame in PowerPoint!"



For next weeks poll, Im going to add how to add an easy border to your pictures... like I did with the pictures on the post about my pumpkin bulletin board!

Web 2.0 Tools in Education: A Quick Guide by Mohamed Amin Embi

The best quick guide (230 pages) for Web 2.0 Tools in Education that I have come across (Ever!). 230 pages sounds a lot, but when you are covering 20 learning tools with screenshots, it is pretty quick and lovingly light!

Useful? I certainly think so!

Read more »