Angular.js app powered by Google Docs

We all know and probably have used Google Docs. Its a very useful tool to write documents and have them sync across devices and platforms or cooperate with a colleague real-time on a document. On the other hand, Angular.js helps us create a full featured application or website that can function on its own, needing only a server to read and save data. What if we use Google Docs as our server to read and write our data?

The need

A client had many documents on Google Drive and wanted to present them to his clients with an enhanced User Experience. It would be very cumbersome to copy and paste those documents into the editor of another CMS, having to update 2 documents (in the CMS and in Google Drive) every time there is a change.

The connection

Google Docs is an online word processor according to Wikipedia. In other words, it is a very powerful WYSIWYG editor. To create a basic blog, you need a login page that takes you to an administration panel that allows you to write your blog posts. That’s exactly what Google Docs offers. You login with your Google Account and create documents.

Fortunately, Google provides a full featured API for most of its products, and Google Docs is not an exception. Being a part of the Google Drive family of products, we can access everything through the Drive API and we are able to create something way more powerful than a simple blog!

Angular Communications Architecture

Using Angular.js for almost two years now, we have a standard architecture that we use for most of our projects. Angular provides Views, Controllers and Services to structure your application. To communicate with a server, we also have a standardized way. We create Angular Services that are injected into a Controller and perform the request.Those services have a very simple set of methods that allow specific actions. When we communicate with a server built by us, those Services are created based on Restangular. When we need to communicate with the Google Drive API, we make sure that those Services are being called exactly the same way, even if internally they are very different and not based on Restangular.

API Authentication

This an example of the GDAuth.js Service that we use to Authenticate with the Google Drive API.

App.service('GDAuth', function($q) {
  return {
    authorize: function(options) {
      var deferred = $q.defer();

      gapi.auth.authorize(options,
        function(result) {
          if (result && !result.error) {
            // Access token has been successfully retrieved, requests can be sent to the API
            gapi.client.load('drive', 'v2', function() {
              deferred.resolve();
            });
          } else {
            // No access token could be retrieved
            deferred.reject();
          }
        }
      );

      return deferred.promise;
    }
  };
});

The GDAuth Service provides only a single method, the authorize, that we can call in our Controller to authenticate and be able to perform the rest of the actions that the API allows. It needs a single parameter, with the options as expected by the Google Drive API. We don’t want to create a new API on top of the original when its not necessary.

File retrieval and display

Retrieving the contents of a specific file, is very easy.

gapi.client.drive.files.get({
  'fileId': gdriveId
});

The code above returns a file object, provided the file id. This object contains the complete document, including all the necessary styles and images (hosted on Google Drive) to display it exactly like you previously created it on Google Docs. Because we want to display the document inside an Angular application, we use regular expressions to find the document styles and content and add the styles in the appropriate place, that’s inside the html head tag and the content on its respective place.

Maybe you should add a brief paragraph naming most of the features drive can handle this way here, this way you will captivate the developers/geek’s mind.

Final Thoughts

The final application can read Google Documents, images stored in folders on Google Drive and on the fly create galleries to accompany the document topics. We also used the document description to add metadata about the categories that those documents belong to. Future developments for the same project with feature Google Spreadsheets that will be used to create Graph Charts using JavaScript in the application with filtering and live updates.

Leave a Reply

Your email address will not be published. Required fields are marked *