WorkDrive Sync App

Introduction

This tutorial will help you build a web application that can synchronize actions between the Catalyst File Store and Zoho WorkDrive. WorkDrive is a cloud-based file management tool that enables you to create a shared space to store, organize, and manage files with your organization.

This tutorial enables synchronization between two folders in your project’s File Store and in your WorkDrive, respectively. You can upload the files through the client application that you will build in this tutorial. The file will be uploaded in the File Store folder, then made available in WorkDrive automatically. This synchronization is automated through an Event Listener.

The client application also allows you to download or delete the files that were uploaded. The delete action will remove the file from both the File Store and WorkDrive.

This connection between Catalyst and WorkDrive is established using OAuth 2.0 authentication protocol. We will configure a client in the Zoho API console, and generate generate the necessary OAuth tokens to authenticate the access to WorkDrive.

The client application will look like this:

You can access a working application and test its functioning here: WorkDrive Sync App.

You can upload a file in this app and verify if it is uploaded to the public WorkDrive folder configured with this app, by accessing the WorkDrive folder here: WorkDrive folder.

The WorkDrive Sync application uses the following Catalyst features:

• Catalyst Authentication: Implements authentication in the client app. We will add a Zoho sign-in option in the login page, in addition to the standard login option.
• File Store: We will create a folder in the File Store and upload files into it through the client application.
• Event Listener: Listens for the file upload event in the File Store and triggers the associated Event function upon its occurrence. It will then pass the event data to the function, which then enables it to synchronize the data with WorkDrive.
• Data Store: Stores the metadata of the files that are uploaded through the client, such as the file name, size, and WorkDrive sync status. These details are fetched and displayed in the client app.
• ZCQL: To fetch, update, and delete data from the Data Store table through querying

The WorkDrive Sync application contains the following fundamental Catalyst components:

• Event Function: The Event function can be coded either in the Java or Node.js platform. This function is triggered by the event listener each time a file upload takes place in the File Store. It fetches the event data and the uploaded file, and posts the file to WorkDrive through an API.
• Advanced I/O Function: The Advanced I/O Function can be coded either in the Java or Node.js platform. This function defines the internal APIs that handle the operations of fetching and deleting files in the client app. The file is deleted in WorkDrive through an API.
• Web Client: This is the front end of the application that is hosted on Catalyst through web client hosting.

We will use the Catalyst web console and the Catalyst Command Line Interface (CLI) to build this application.

You will be given the code for the files to be included in the function and client components in this tutorial. You will just have to copy the code provided here and paste it into the appropriate files as directed.

Application Architecture

The WorkDrive Sync app’s functioning for each of its operations can be depicted as shown below:

Uploading a File

When a user uploads a file in the client application, the following events occur in the specified order:

Deleting a File

When a user deletes a file from the client application, the following events occur in the specified order:

Downloading a File

Clicking on the download link of a file initiates the file download from the File Store.

We will explain the function and client code in detail in the Configure Client section, after you configure those components.