search

Autodesk-Forge / forge-digital-catalog

A responsive web application demonstrating how to build a product catalog with interactive instructions using the Autodesk Forge and Fusion platforms
https://forge-digital-catalog.herokuapp.com
MIT License
13 stars 2 forks source link

readme

Forge Digital Catalog App

Platforms Node.js License

Viewer Data-Management OSS Model-Derivative

koa2 vue2 vuetify oauth

Intermediate

Table of Contents

Description

The digital catalog project is a Forge-powered responsive web application that enables companies to publish key models (Inventor, Fusion360) from Fusion Team or BIM360 Docs to their proprietary catalog. Companies can create the catalog structure they need as well as retire products, which have reached end-of-life, from the catalog.

External users can search the catalog and view a 3D representation of each catalog item using the Forge Viewer.

This digital catalog solution also delivers interactive instructions workflow (assembly / disassembly instructions) by supporting animations authored in Fusion 360 in the Forge Viewer.

This web application can act as a foundation for more advanced workflows, such as digital twin initiatives.

Site

Landing Page

Landing Page

Administration Console

Admin Page

Publisher Console

Publisher Page

Interactive Instructions

Animation Page

AR/VR Toolkit

The AR/VR Toolkit feature enables translation of SVF to glTF file format.

ARVR Page

To learn how to author augmented reality machine instructions, please go to: Augmented Virtual Reality

Live Demo

Digital Catalog

Prerequisites

Getting Started

This section will guide you through getting the code up and running on your own system.

  1. Installation process

    git clone https://github.com/Autodesk-Forge/forge-digital-catalog digital-catalog\ cd digital-catalog \ npm install

  2. Software dependencies

    Please check dependencies in package.json.

Build and Test

Because our frontend app (./src/client) is developed separately from our backend (./src/server) - i.e. our backend exposes an API for our frontend to talk to, then our frontend is essentially a purely static app. We can deploy the built content in the www directory to any static file server, but we need to make sure to set the correct publicPath.

You can review how the frontend app will be built by reading the configuration in the ./vue.config.js file.

To build the frontend app: npm run build

This will create a new directory ./www with the static files.

Development build

  1. Set environment variables

    FORGE_CALLBACK_URL=http://localhost:3000/api/forge/callback/oauth \ FORGE_CLIENT_ID=<Your Forge Client ID> \ FORGE_CLIENT_SECRET=<Your Forge Client Secret> \ MONGODB_URI=<Your MongoDB Uri> \ NODE_ENV=development \ USE_LOAD_BALANCER=false

  2. Compile TypeScript

    npm run tsbuild

  3. Start Vue.js front-end app

    npm run serve

  4. Start Koa.js back-end app

    On first run (only once): \ npm run init\ npm run setadmin init

    Any time you start the server: \ npm run dev (on mac) \ npm run windev (on windows)

If you run into an error connecting to MongoDB, make sure you specify the database name in your connection string. mongoose.connect('mongodb://username:password@host:port/database?options...', {useNewUrlParser: true});

To learn how to configure the WebHooks locally, please follow this link: Local WebHooks Instructions

Test build

  1. Set environment variables

    FORGE_CALLBACK_URL=http://localhost:3000/api/forge/callback/oauth \ FORGE_CLIENT_ID=<Your Forge Client ID> \ FORGE_CLIENT_SECRET=<Your Forge Client Secret> \ MONGODB_URI=<Your MongoDB Uri> \ NODE_ENV=test \ USE_LOAD_BALANCER=false

  2. Compile TypeScript

    npm run tsbuild

  3. Run the tests

    On first run (only once): \ npm run init \ npm run setadmin add <email> \ npm run tsbuild:test

    Any time you run the tests: \ npm test (on mac) \ npm run wintest (on windows)

Production build

  1. Set environment variables

    FORGE_CALLBACK_URL=https://<Your Web Server>/api/forge/callback/oauth \ FORGE_CLIENT_ID=<Your Forge Client ID> \ FORGE_CLIENT_SECRET=<Your Forge Client Secret> \ MONGODB_URI=<Your MongoDB Uri> \ NODE_ENV=production \ USE_LOAD_BALANCER=false \ VUE_APP_KOA_HOST=<Your Web Server> \ VUE_HOST=<Your Web Server>

  2. Compile TypeScript

    npm run tsbuild

  3. Build Vue.js front-end app

    npm run build

  4. Start Koa.js back-end app

    On first run (only once): \ npm run init\ npm run setadmin add <email>

    Any time you start the server: \ npm start (on mac) \ npm start (on windows)

Deployment

To learn how to deploy this Forge application, please follow this link: Deployment Instructions

Documentation

The online help for this application can be served through docsify.

To install docsify, please navigate to https://docsify.js.org/#/quickstart

The documentation markup files for this application are located under the ./docs folder.

To preview the online help, simply run the command docsify serve ./docs to start the local server. You can then preview your online help site in your browser on http://localhost:3000.

Sample Data

The models used in the live demo can be obtained from \ https://knowledge.autodesk.com/support/inventor/troubleshooting/caas/downloads/content/inventor-sample-files.html

License

You can check out the full license here

This project is licensed under the terms of the MIT license.

Written By

Bastien Mazeran (@BastienMazeran), Tony Mandatori, Autodesk Customer Success Org