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

How to Design a Good Realtime Data Model in your own Collabrative App

Use Case Requirement of my Mobile App: Let us consider the following use case of my mobile app to design a good realtime data model. Use case: Reconcile chat messages in multiple devices. I need to show up history data generated by one device in another device in real time when user login in two different devices using same account details. To implement this we need a central storage server and a synchronization service. Solution: Google Drive can be used as a file storage server and also I need to look for a javascript library or we should implement Operational Transformations (OT) that would allow us to synchronize history data in realtime between multiple devices. And Operational Transformations seems to fit my need for realtime sync. Google Drive Realtime API provides synchronization service for files in Google Drive via the use of Operational Transforms. This API is a JavaScript library hosted by google that provides collaborative objects, events, and method

How to place Chitika or Adsense Ad codes between blog post title and post content

Placing ad unit below your blog post title is one of the best spot to maximize revenue. The following are the steps to place your chitika/adsense ad code below your post title. Steps: Go to blogger Dashboard -> Template  Click Edit HTML button. CTRL+F , Search for data:post.body  as shown in the below diagram. Just before  data:post.body  place your converted ad code as shown in the below diagram. Save your template.  That's all you are done. Go and check your post's, you can find ad units below post title as shown in the figure.