Skip to content

Latest commit

 

History

History
90 lines (84 loc) · 7.2 KB

TECH_DOC.md

File metadata and controls

90 lines (84 loc) · 7.2 KB
Raw

CT Drive - Tech Doc

Getting Started :

  • For getting started to build an application like ct drive you need to have some knowledge regarding the google oauth web services.

  • This is the ct drive repository that has code for the existing application Link.

  • You can clone this repository and run it in your local.

  • For running this application you need to add the following credentials to the file .env.production

    • VITE_GOOGLE_CLIENT_ID
    • VITE_ROOT_ORG_FOLDER_ID

  • To add these credentials you can go through the following website link Using OAuth 2.0 for Web Server Applications | Authorization | Google for Developers

  • In this website you can find an option of create authorization credentials and once you click on the link you will landed to console.google.cloud.com page where you can create a project and from there you can get the VITE_GOOGLE_CLIENT_ID.

  • For the second credential you can add the id of the main folder that you wanted to open once you run the project.

  • To run the project you have to initially run 2 commands

    • yarn install - this will install all the dependencies required for the project to run.
    • yarn run dev - this will run the code

  • By default the project will be opened in Link

TechStack :

    • React :
    • React is a JavaScript library for building user interfaces, commonly used for creating single-page applications.
    • It allows developers to create reusable UI components that manage their own state, making it easier to build complex UIs.
    • For further reference : React
    • Typescript :
    • TypeScript is a superset of JavaScript that adds static typing to the language.
    • It helps catch errors early in the development process and improves code readability and maintainability.
    • For further reference : TypeScript
    • Ant Design :
    • Ant Design is a React UI library with a set of high-quality components and design principles.
    • It helps developers build beautiful and accessible user interfaces quickly and easily.
    • For further reference : Ant Design
    • Tailwind CSS :
    • Tailwind CSS is a utility-first CSS framework that allows you to build custom designs without having to write traditional CSS.
    • It provides a set of utility classes that you can use to style your components, resulting in a more maintainable and consistent codebase.
    • For further reference : Tailwind CSS
    • Vite :
    • Vite is a build tool for modern web development that focuses on speed and simplicity.
    • It leverages ES modules to provide fast, hot module replacement during development and optimized production builds.
    • For further reference : Vite
    • Google OAuth / Google Drive APIs :
    • Google OAuth allows you to authenticate users and access google APIs on their behalf successfully.
    • Google Drive API enables developers to interact with files and folders stored in google drive programmatically.

APIs Used :

    • GAPI :
    • GAPI is Google’s client library for browser-side JavaScript. It’s used in Google Sign-in, Google Drive, and thousands of internal and external web pages for easily connecting with Google APIs.
    • Initially define a script to create the gapi object in index.html file.
    • Load the client using api call - window.gapi.load
    • Once loaded initialize the google client using the api call - window.gapi.client.init which accepts the params client id(VITE_GOOGLE_CLIENT_ID), scope,discovery docs and plugin name.
    • Login :
    • For login we use the api call window?.gapi.auth2.getAuthInstance();
    • gapi.auth2.getAuthInstance() returns a Google Auth object. This object is used to call the sign-in method.
    • On success we will get the user details and display the information.
    • Get :
    • To get the details of any file/folder we will use the api call window.gapi.client.drive.files.get
    • We will pass the params folder Id and required fields for getting information.
    • List :
    • To get the list of files or folders present in a directory we use window.gapi.client.drive.files.list
    • This method returns all the files in a list which will be mapped to show
    • This method accepts different parameters like query,order by,fields,pageSize based on which it returns the list of files/folders
    • Create :
    • To create a new file/folder we will use window.gapi.client.drive.files.create
    • This method accepts params like mimeType,parentId,name,fields
    • This method creates a new file/folder based on the params given
    • Update :
    • To update the name or status of file/folder we use window.gapi.client.drive.files.update
    • This method updates the required field keeping all the other fields same
    • Delete :
    • To permanently delete a file/folder we use window.gapi.client.drive.files.delete
    • This method deletes the file/folder which cannot be restored later
    • Permissions :
    • To create/update permissions we use window.gapi.client.drive.permissions.create / window.gapi.client.drive.permissions.update
    • This method is majorly used to share the file/folder with people or update the permissions
    • People Search:
    • To search people for sharing the file we are using window.gapi.client?.people?.people?.searchDirectoryPeople, window?.gapi?.client?.people.otherContacts.search
    • This method accepts the params query,readMask,sources,pageSize
    • This method gives a list of contacts based on our params