Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/autodesk-forge/forge-view.googledrive.models

View models from Google Drive: Sample Viewer application that displays files of supported formats from Google Drive, and generates them in the Viewer
https://github.com/autodesk-forge/forge-view.googledrive.models

autodesk-model-derivative autodesk-viewer google-api google-drive nodejs

Last synced: about 4 hours ago
JSON representation

View models from Google Drive: Sample Viewer application that displays files of supported formats from Google Drive, and generates them in the Viewer

Host: GitHub
URL: https://github.com/autodesk-forge/forge-view.googledrive.models
Owner: Autodesk-Forge
License: mit
Created: 2016-11-11T17:17:44.000Z (about 8 years ago)
Default Branch: master
Last Pushed: 2022-12-11T00:03:29.000Z (almost 2 years ago)
Last Synced: 2024-04-09T21:50:09.871Z (7 months ago)
Topics: autodesk-model-derivative, autodesk-viewer, google-api, google-drive, nodejs
Language: JavaScript
Homepage: http://googledriveviewer.autodesk.io
Size: 391 KB
Stars: 23
Watchers: 13
Forks: 23
Open Issues: 9
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # View Google Drive files

[![Node.js](https://img.shields.io/badge/Node.js-4.4.3-blue.svg)](https://nodejs.org/)

[![npm](https://img.shields.io/badge/npm-2.15.1-blue.svg)](https://www.npmjs.com/)

![Platforms](https://img.shields.io/badge/platform-windows%20%7C%20osx%20%7C%20linux-lightgray.svg)

[![License](http://img.shields.io/:license-mit-blue.svg)](http://opensource.org/licenses/MIT)

[![oAuth2](https://img.shields.io/badge/oAuth2-v1-green.svg)](http://developer.autodesk.com/)

[![OSS](https://img.shields.io/badge/OSS-v2-green.svg)](http://developer.autodesk.com/)

[![Model-Derivative](https://img.shields.io/badge/Model%20Derivative-v2-green.svg)](http://developer.autodesk.com/)

[![Viewer](https://img.shields.io/badge/Viewer-v7-green.svg)](http://developer.autodesk.com/)

# Description

This sample use [Model Derivative API](https://developer.autodesk.com/en/docs/model-derivative/v2/overview/) to translate [Google Drive](https://drive.google.com) files into [Viewer](https://developer.autodesk.com/en/docs/viewer/v2/overview/). The front-end will look like:

![thumbnail](/thumbnail.png)

## Technologies overview

   1. Languages: JavaScript,

   2. Forge: Viewer, Buckets-Api, Objects-Api, model-derivative

   3. Technologies/frameworks: Express.js, jQuery, jstree.js, request.js, moment.js, nodemon

   4. Other APIs: oAuth2, googleapis

## Live version

See it live at [forgegoogledriveviewer.herokuapp.com](http://forgegoogledriveviewer.herokuapp.com/).

## Industry background

As the data can be anywhere, and a very common scenario is to use generic data storage, like Google Drive, to store personal or business files, share between employees and manage versions. With Forge you can view these files implementing a transparent viewing approach, as demonstrated in this sample. On specific cases, the Box connection can be replaced with other or with a company local storage.

### Prerequisites

Working on this application touch both server and client sides.  

For Basic use for presentation purposes, you will need knowledge about: Node.js, REST Api, on back-end and HTML, jQuery, Ajax on front-end.  

For develop more complex application you certainly need knowledge about: Forge-SDK (Forsge-Api), Forge Derivatives-Api, JS Promises, Oauth Authentication, Google-API

# Setup

For using this sample, you need an Autodesk developer credentials. Visit the [Forge Developer Portal](https://developer.autodesk.com), sign up for an account, then [create an app](https://developer.autodesk.com/myapps/create). For this new app, use http://localhost:3000/api/forge/callback/oauth as Callback URL. Finally take note of the Client ID and Client Secret.

You also need a Google Developer credentials:

1. Visit the [Google APIs Console](https://console.developers.google.com)

2. Log in or Sign up

3. Choose OAuth client ID in Create Credentials menu

4. Select 'Web application' (default option)

5. Apply http://localhost:3000/api/google/callback/oauth to Authorised redirect URIs field (development option)

6. Make sure you activate **Google Drive** & **Google People** APIs, this sample uses both scopes. Finally, take note of the    client_id and client_secret.

### Run locally

Install [NodeJS](https://nodejs.org).

Clone this project or download it. It's recommended to install [GitHub desktop](https://desktop.github.com/). To clone it via command line, use the following (Terminal on MacOSX/Linux, Git Shell on Windows):

    git clone https://github.com/autodesk-forge/model.derivative-nodejs-google.drive.viewer

#### Enviroment variables

To run it, after installation of required packages, you sould set the enviroment variables with your client ID & secret and finally start it. Via command line, navigate to the folder where this repository was cloned and use the following:

Mac OSX/Linux (Terminal)

    npm install

    export FORGE_CLIENT_ID=<>

    export FORGE_CLIENT_SECRET=<>

    export GOOGLE_CLIENT_ID=<>

    export GOOGLE_CLIENT_SECRET=<>

    export GOOGLE_CALLBACK_URL=<>

    npm run dev

Windows (use Node.js command line from Start menu)

    npm install

    set FORGE_CLIENT_ID=<>

    set FORGE_CLIENT_SECRET=<>

    set GOOGLE_CLIENT_ID=<>

    set GOOGLE_CLIENT_SECRET=<>

    set GOOGLE_CALLBACK_URL=<>

    npm run dev

Open the browser: [http://localhost:3000](http://localhost:3000).

Important: do not use npm start locally, this is intended for PRODUCTION only with HTTPS (SSL) secure cookies.

### Deploy on Heroku

To deploy this application to Heroku, the Callback URL & redirect_uri must use your .herokuapp.com address. After clicking on the button below, at the Heroku Create New App page, set your Client ID & Secret and the correct callback URL.

[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy)

Watch [this video](https://www.youtube.com/watch?v=Oqa9O20Gj0c) on how deploy this sample to Heroku.

## Packages used

All Autodesk Forge NPM packages are included by default, see complete list of what's available at [NPM website](https://www.npmjs.com/browse/keyword/autodesk). OAuth, Model Derivative and OSS are used. [Google Drive](https://developers.google.com/drive/v3/web/quickstart/nodejs) for NodeJS is [googleapis](https://www.npmjs.com/package/googleapis). Some other non-Autodesk packaged are used, including [express](https://www.npmjs.com/package/express) and its session/cookie middlewares ([express-session](https://www.npmjs.com/package/express-session) and [cookie-parser](https://www.npmjs.com/package/cookie-parser)) for user session handling. The front-end uses [bootsrap](https://www.npmjs.com/package/bootstrap) and [jquery](https://www.npmjs.com/package/jquery).

# Tips & tricks

For local development/testing, consider use [nodemon](https://www.npmjs.com/package/nodemon) package, which auto restart your node application after any modification on your code. To install it, use:

    sudo npm install -g nodemon

Then, instead of npm run dev, use the following:

    npm run nodemon

Which executes nodemon server.js --ignore www/, where the --ignore parameter indicates that the app should not restart if files under www folder are modified.

## Troubleshooting

After installing Github desktop for Windows, on the Git Shell, if you see a *error setting certificate verify locations* error, use the following:

    git config --global http.sslverify "false"

# License

This sample is licensed under the terms of the [MIT License](http://opensource.org/licenses/MIT).

Please see the [LICENSE](LICENSE) file for full details.

## Written by

Augusto Goncalves, Vadym Kuzin  (Forge Partner Development)


http://forge.autodesk.com