Skip to main content

How to Build Realtime Collaborative Apps using Google Drive Realtime API

Google Drive lets users create Docs, Sheets, and Slides, collaborate on them in realtime. The Google Drive Realtime API provides collaboration as service for files in Google Drive via the use of Operational Transforms. Using Google Drive Realtime API, you can now easily build your own collaborative apps. Realtime API is based on the same collaboration technology used by Google Docs.

Realtime Collaboration System:











What Google Drive Realtime API does for you ? And what you have to do ?

Realtime API handles everything for you like network communication, storage, conflict resolution, and other collaborative details:
  • Functions to load and work with Realtime documents.
  • Built-in collaborative objects (Strings, Lists and Maps)
  • Also you can create your own custom collaborative objects.
  • Events for detecting changes to the collaborative data model.
  • A text binder to bind your collaborative objects to the DOM.
Google Drive Realtime API provides all the tools you need to create your own great collaborative application without running your own server.

The only thing you have to do is to focus on the following two things:
  • Designing a good data model (shared data model)
  • Focus on building great apps.
Once you design your collaborative/shared data model for your app. It works just like local in-memory data model objects. You write code to manipulate maps, lists etc., When some user make changes in the shared data model, the data model automatically changes for all the users on the Realtime document/ Collaborative document. So what you need to do is attach listeners to the collaborative document, so that UI will get updated with the changes to reflect any remote changes thats been made. That's it.

Note: The Google Drive Realtime API is a web-only API and not currently supported for use with server frameworks such as Node.js.

Lifecycle of a Realtime/Collaborative App:
  • Enable the Drive API
  • Load the Realtime library
  • Authorize requests.
  • Open/create a Realtime Document file.
  • Load a Realtime Document and initialize the Shared data model.
  • Make changes/ Listen for changes on the collaborative/shared data model.
Seccrets of Realtime Collaboration:
  • Every change to the data model is a mutation.
  • Stores the entire mutation history.
  • Local mutations are applied immediately.
  • Google Drive Realtime API is based on OT (Operational Transformation).

Comments

Popular posts from this blog

Know Where to Place Chitika or Adsense Ads for Maximum Revenue

After you open your Adsense or Chitika account, don't simply copy and paste the ad code where you want in the website.Because there are many things that you need to consider while placing your ads in your website in order to effectively increase your revenue with Adsense or Chitika. The following are the main/basic mantra's to maximize your revenue. Choosing the Best Spots for your Ad Placement: The following picture shows you the best spots for placing ad units on your website. Place the ad directly below your blog post’s title and then followed by post content. Place the ad within the content of  your blog post. Place the ad directly below the post content and before the comments section. Customize your Ad: Login to your publisher account ,  Choose the appropriate ad format based on the spot for placing your ad unit. Select the color scheme which suits your blog content color scheme Get the Ad code and place in your website. Displaying...

How to make Chrome Packaged App that's trying to load realtime data model

A packaged app (Chrome App) cannot have less restrictive CSP (Content Security Policy) than the default CSP value. And it looks like the Google Drive Realtime API cannot be used in the Packaged app's without any hacks. Because the default packaged app Content Security Policy (CSP) value disallows the use of eval() or new Function(). However, a variety of library uses eval() and eval-like constructs such as new Fucntions() for performance optimization and for ease of expression. It will result in following error: "EvalError when trying to load realtime data model" Steps to resolve this issue: Load GAPI using a webview tag. Load Webview inside standalone localhost. Use a chrome socket. Handle your own OAuth flow and supply the token to the gapi auth client. This way you can make your Chrome Packaged App to work with Google Drive Realtime API.