Tutorial

This post is prepared by Nina Gorbunova, Teamlab Office Marketing Manager

About Teamlab Personal
Teamlab Personal is a suite of online document editors free for individual use. Weve recently implemented two way integration with Google Drive and would like to share our experience.

Why Google Drive integration
Many of our users connect Google Drive to Teamlab, and we wanted to reach more by being in the Chrome Web Store. The availability of Google Drive SDK and Google Drive API helped us fit it all together. We thought: if a user can connect a Google Drive account to Teamlab Personal, why not build a return path? In the eyes of users, it is an enhancement of their Drive accounts. They get an opportunity to process documents using high formatting quality in browser and to make one more step away from desktop apps.

Integration goals
From the technical side, here is what we wanted to do:

• Integrate Teamlab editors and viewers with Google Drive.
• Provide co-editing opportunities.
• Enable file conversion and creating new files in the common Office Open XML format.
• Enable users to login with Google to use Teamlab Personal.

Five steps to achieve two-way integration

1. We registered with Google’s developer console, added our project and connected the Drive API and Drive SDK to the app.
2. Then we needed to decide what scopes our app needed to access the Google Drive API. We chose the minimal set, ample for us to access the files to edit without trespassing the user’s privacy (most users are not likely to provide full access to 3rd party apps)
   
   
3. Because we work with traditional office apps, we chose docx, xlsx and pptx formats as default file extensions for our app. We also added secondary formats: ppt, pps, odp, doc, odt, rtf, txt, xls, csv, ods, mht, html, htm, fb2, epub, pdf, djvu.
4. The current listing for the pre-existing app, we modified the code and added the following to the manifest: "container" : "GOOGLE_DRIVE","api_console_project_id" : "YOUR_APP_ID". Once a user installs Teamlab Personal app from Chrome Web Store, it automatically connects to their Google Drive account.
5. Finally, Teamlab Personal uses OAuth 2.0 for authorization and file access. The application processes requests for creating and opening files.

How it works
As soon as youve installed Teamlab Personal from the Chrome Web Store, the integration automatically activates. Now, you can choose the Teamlab icon when creating new and editing the existing documents.


If the user selects the Teamlab editor as the default, .docx, .xlsx and .pptx files are opened in Teamlab automatically. For other documents, we create a copy in Office Open XML format which will be saved on Drive alongside the original.

Requests processing at personal.teamlab.com

When a file is opened or created on Google Drive using the Teamlab Personal application, the handler gets the request with the following parameters: "ids" ("folderId" if case of file creation), "action", "userId" and "code". The "code" parameter is used to get the authentication token via OAuth 2.0 protocol (with the help of the request to https://accounts.google.com/o/oauth2/token with the "client_id", "client_secret", "redirect_ur parameters", and the additional "grant_type=authorization_code" parameter from the developer console). The received token is used in the subsequent requests. The "ids" parameter is the file to be opened identifier which is sent to the https://www.googleapis.com/drive/v2/files/ address in JSON format. The returned "mimeType" and "downloadUrl" are used to get the file content. Thats all what is needed to open the document file in Office Open XML format (.docx, .xlsx or .pptx) in Teamlab.

Files in other formats are converted to the corresponding Office Open XML format and a copy is saved to the Drive folder prior to opening. In this case the "downloadUrl" is used to get the original file. The file is saved with the help of the POST request to the https://www.googleapis.com/upload/drive/v2/files address. In this request the "ContentType" is set as "multipart/related; boundary=boundary" and the request body contains the file information placed before the main request content.

Request code:

string CreateFile(Stream content, string fileName, string mimeType, string folderId, string accessToken){
    var bytes = Encoding.UTF8.GetBytes(
        "

--boundary

Content-Type: application/json; charset=UTF-8



{"title":""
        + fileName + "","parents":[{"id":"" + folderId + ""}]}"
        + "

--boundary

Content-Type: " + mimeType + "



");

    var tmpStream = new MemoryStream();
    tmpStream.Write(bytes, 0, bytes.Length);
    content.CopyTo(tmpStream);

    bytes = Encoding.UTF8.GetBytes("

--boundary--

");
    tmpStream.Write(bytes, 0, bytes.Length);

    var request = WebRequest.Create("https://www.googleapis.com/upload/drive/v2/files?uploadType=multipart");
    request.Method = "POST";
    request.Headers.Add("Authorization", "Bearer " + accessToken);
    request.ContentType = "multipart/related; boundary=boundary";
    request.ContentLength = tmpStream.Length;

    var buffer = new byte[2048];
    int readed;
    tmpStream.Seek(0, SeekOrigin.Begin);
    while ((readed = tmpStream.Read(buffer, 0, 2048)) > 0) {
        request.GetRequestStream().Write(buffer, 0, readed);
    }
    return request.GetResponse().GetResponseStream();
}

Conclusion
The "Works with Google Drive" label does its magic indeed. We strongly recommend other developers build a Chrome Web Store app, as the results are clear and valuable. We had a high jump in installs (see the graph below) after we completed our integration. Teamlab Personal website traffic doubled and we received more than enough of users’ feedback – great impact for further development.


About the author
Nina started her career at Teamlab in 2011 as an intern. She is now a Senior Marketing Manager at Teamlab Office.

Step1: click the "gear" button on the upper right portion of facebook and click on the Account Settings

Step2: click on the Apps in the menu at the right side
Step3: edit the FarmVille2 app and modify the Visibility of app and posts and select custom

Step4: modify the "These people or lists" under the "Share this with" and select "Specific People or Lists" and add your buddies names on the text box below. These people will be the only ones who will receive all your farmville2 post. Click the Save Changes button.
** WARNING ** dont forget to add to this list all your new farmville2 friends so they may also receive your posts regarding FarmVille2!! Enjoy!