googlearchive / realtime-playground

Google Drive Realtime API Playground helps you to try out the features of the Realtime API

Google Drive Realtime API Playground

Overview

Google Drive Realtime API Playground, is a web app that helps you to try out the features of the Google Drive Realtime API.

The Playground will take you through the steps required to have the Realtime API working on your application and can be used as a reference implementation of a Google Drive Realtime API application.

You can try out the Google Drive Realtime API Playground on its live instance.

Installation and Configuration

The project can run on any static web server, but we also provide required configuration and boilerplate files to host it on App Engine.

If you wish to host it in your own App Engine instance make sure you set the name of your App Engine application in /app.yaml. To create an App Engine instance follow the instructions on appengine.google.com.

Create a Google APIs project and Activate the Drive API

First, you need to activate the Drive API for your app. You can do it by configuring your API project in the Google APIs Console.

• Create an API project in the Google APIs Console.
• Select the "Services" tab and enable the Drive API.
• Select the "API Access" tab in your API project, and click "Create an OAuth 2.0 client ID".
• In the Branding Information section, provide a name for your application (e.g. "CollabCube 3D"), and click Next. Providing a product logo is optional.
• In the Client ID Settings section, do the following:
  • Select Web application for the Application type
  • Click the more options link next to the heading, Your site or hostname.
  • List your hostname in the Authorized Redirect URIs and JavaScript Origins fields.
  • Click Create Client ID.
• In the API Access page, locate the section Client ID for Web applications and note the Client ID value.
• List your hostname in JavaScript origins in the Client ID settings.
• Go to the Drive SDK page and copy the App ID.

Setup your App information in the code

You should now have your Client ID and your App ID. In /components/elements/app-globals.html change the appId and the clientId properties in the utils hash.

Deploy, run that's it!

Contributing

Before creating a pull request, please fill out either the individual or corporate Contributor License Agreement.

• If you are an individual writing original source code and you're sure you own the intellectual property, then you'll need to sign an individual CLA.
• If you work for a company that wants to allow you to contribute your work to this client library, then you'll need to sign a corporate CLA.

Follow either of the two links above to access the appropriate CLA and instructions for how to sign and return it. Once we receive it, we'll add you to the official list of contributors and be able to accept your patches.

realtime-playground's Issues

Structure of Application

Hi, I love the Google Realtime API and had no problems getting the Quick Start app working. My next port of call was to try and host the playground app.

I downloaded the repository as a ZIP, unzipped it and uploaded it to my server and have a couple of issues.

First the structure didn't appear to be correct. In the root folder there are no HTML pages. After some digging I found the found the playground.html file in the 'templates' folder. When I navigated there in my browser I saw int eh console that none of the include files could be found.

I copied 'playground.html' to the root folder and tried again. This time everything did appear to load so I then ensured the correct Client and App id's were placed in the 'app-globals' element.

Tried to run it again. This time it authenticated and I could either create a new file or open an existing file from my drive.

I created a new file and checked my Google Drive. Sure enough it was there. I then started editing the template document (just like on the demo you host) and in the text field I got the following error:

Uncaught TypeError: Expected string for text, but was: undefined

The collaborative list and map seemed to work but the text is broken.

Is there something wrong what I did or are the files in the repository a little messed up?

Thanks

redirect.py contains google comment

@nicolasgarnier
Also check line 26 for the pylint comment.

If a document is opened and the access is revoke in Google account. It throw "Uncaught Error: Authentication error: No token set" endlessly if the Collaborative String is edited.

I have a similar case when developing an app. How could I catch this error?

Google Drive now passes 'state' via GET parameter

In rtclient.RealtimeLoader.prototype.load,
it access to rtclient.params['state'] for handle redirection from Drive UI.

Now Drive UI passes those values via GET parameter,
however, rtclient.getParams checks location.hash only.

I added following code into rtclient.getParams and it works

    var getParam = document.location.search;
    if(getParam){
        getParam = getParam.slice(1);
        getParam.split('&').forEach(function(paramStr){
            paramStr = paramStr.split('=');
            if(paramStr[0] == 'state'){
                params['state'] = decodeURIComponent(paramStr[1]);
            }
        });
    }

When authenticating, I get a 404 error when user_id is included in the gapi.auth.authorize call

When I run this myself, I'm getting a 404 response when authenticating with the Google APIs for Javascript call to gapi.auth.authorize call. This is in realtime-client-utils.js:

  // Try with no popups first.
  gapi.auth.authorize({
    client_id: clientId,
    scope: [
      rtclient.INSTALL_SCOPE,
      rtclient.FILE_SCOPE,
      rtclient.OPENID_SCOPE
    ],
    user_id: userId,
    immediate: true
  }, handleAuthResult);

Right after this call, there is a GET (after OAuth redirects) to:
https://accounts.google.com/o/oauth2/postmessage#state=362726323%7C0.3380328609&error=invalid_user&error_description=Invalid+email+address:+112056485114257598025/

That returns a 404, and app never opens the Google Drive file.

When I comment out the user_id field here, the authentication succeeds and the app seems to work fine. I tried to debug this, but the user_id field is not included in the developer documentation (https://developers.google.com/api-client-library/javascript/reference/referencedocs#gapiauthauthorize), so I have no idea what its really doing.

Does this field serve a purpose? Can it be removed safely to prevent this error?

Update auth to use <google-signin> element

IIRC the app isn't currently using the reusable GWC sign-in element. We should update auth to use that.

401 Token Refresh Error silently causes realtime connection to fail and edits are lost

If I open or create a realtime document, make changes, then leave the page open for about an hour I get the following errors on the console:

GET https://drive.google.com/otservice/bind?id=1foZRE7k3IRUxWnQaOHDrsN_OfSi3gjs…RID=rpc&SID=FFE129C546C61272&CI=0&AID=201&TYPE=xmlhttp&zx=f2rvegin3z1g&t=1 401 (Unauthorized) api:80
Drive Realtime API Error: token_refresh_required: The OAuth token must be refreshed. api:186

There is no error presented in the UI, or anywhere else. Then if I continue to make changes to the realtime data model they appear to be applied successfully (i.e. no errors and the changes show in the "Event Log" panel on the right). However, when I refresh the page and re-open the document, none of the changes I made after the previously mentioned error (401) occurred were actually saved.

This is a problem since data was silently lost without any indication in the UI. Can the app automatically re-authorize when a 401 occurs and still maintain the realtime connection to the data model? Is there an error/event which indicates when updates to the data model are not actually saved?

Polymer element

Could you make Polymer element for Realtime API?

See
GoogleWebComponents/google-drive#8

What is the point of this demo?

It seems to demonstrate the realtime updates fine. However, you say that to do the same, you must deploy a google app and create a client ID. What is that? In your demo you demonstrate how to exploit client's ID from plain client HTML/javascript. Why web app, why application client ID? Shouldn't you capture it from javascript google authorization popup without any server web application at all?

Improve overall accessibility

• Should be possible to keyboard tab to actions currently exposed via icons/icon buttons
• Should be possible to navigate through the realtime collab view using the keyboard

We can use <core-a11y-keys> for this.

Explore Service Worker support

We could add support for offline caching of the individual views and assets using SWs. Even better would be supporting offline edit, but I'm unsure just how well the realtime API handles that use case.