Sharing and previewing Google Docs in Socialwok: Google Data APIs

Sharing and previewing Google Docs in Socialwok: Google Data APIs

Friday, April 9, 2010 | 12:23 PM

Labels: Google Data Protocol, Google Docs API, Guest Post, Marketplace, Marketplace ISV Guest

Editor's 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 Socialwok's 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 Socialwok's 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. Here's 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");
    }

It's 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, it's very easy for us to place this link into an <iframe> tag and embed this in our Socialwok interface. Here's 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);

Here's 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. Here's the rundown on the parameters:

Technical Documentation - Instructions for building your own URLs
All viewer URLs should use the path http://docs.google.com/viewer . This path accepts two parameters:
url : The URL of the document to view. This should be URL-encoded.
embedded : If set to true , the viewer will use an embedded mode interface.

For example, if you wanted to view the PDF at
http://labs.google.com/papers/bigtable-osdi06.pdf,
you would use the URL:
http://docs.google.com/viewer?url=http%3A%2F%2Flabs.google.com%2Fpapers%2Fbigtable-osdi06.pdf

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>
Here's 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, it's 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 Socialwok's 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