SDK Examples

SDK Examples

Prerequisites

Your development environment will need node.js and yarn installed.

See https://nodejs.org/en/ and https://classic.yarnpkg.com/en/docs/install for installation instructions specific to your environment.

To run these examples, you will need to generate a sandboxed sdk key for your Matterport account. See Matterport Developer Tools Pricing and Availability.

The password for the beta versions of bundle: gOJKDpxNiMCtdlnXs

Setup monorepo root

Run these two commands when you first download the repo.

> yarn install
> yarn install-bundle
yarn run v1.22.4
$ yarn fetch-bundle && yarn expand-bundle
$ curl https://static.matterport.com/showcase-sdk/bundle/3.1.38.10-15-g5a5323ef0/showcase-bundle.zip -o bundle.zip
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 3108k  100 3108k    0     0  7599k      0 --:--:-- --:--:-- --:--:-- 7599k
$ yarn decompress bundle.zip --out-dir=packages/bundle
$ ...

Setup packages

Call this to install or update the package dependencies. It also links local packages together.

> yarn bootstrap
yarn run v1.21.1
$ lerna bootstrap
lerna notice cli v3.3.2
lerna info Bootstrapping 4 packages
lerna info Installing external dependencies
lerna info Symlinking packages and binaries
lerna success Bootstrapped 4 packages
✨  Done in 20.58s.

Run the inspector app

> yarn inspector
yarn run v1.22.4
$ lerna run develop --scope=inspector --stream
lerna notice cli v3.3.2
lerna info filter [ 'inspector' ]
lerna info Executing command in 1 package: "yarn run develop"
inspector: warning package.json: "inspector" is also the name of a node core module
inspector: $ webpack-dev-server
inspector: ℹ ｢wds｣: Project is running at http://localhost:8000/
inspector: ℹ ｢wds｣: webpack output is served from /
inspector: ℹ ｢wds｣: Content not from webpack is served from /Users/bguillermo/projects/sdk_examples/packages/inspector

Run the virtual staging app

> yarn vs-app
yarn run v1.22.4
$ lerna run develop --scope=vs-app --stream
lerna notice cli v3.3.2
lerna info filter [ 'vs-app' ]
lerna info Executing command in 1 package: "yarn run develop"
vs-app: $ webpack-dev-server
vs-app: ℹ ｢wds｣: Project is running at http://localhost:8000/
vs-app: ℹ ｢wds｣: webpack output is served from /
vs-app: ℹ ｢wds｣: Content not from webpack is served from /Users/bguillermo/projects/sdk_examples/packages/vs-app

Run the magical bunny app

> yarn easter
yarn run v1.22.4
$ lerna run develop --scope=easter --stream
lerna notice cli v3.3.2
lerna info filter [ 'easter' ]
lerna info Executing command in 1 package: "yarn run develop"
easter: $ webpack-dev-server
easter: ℹ ｢wds｣: Project is running at http://localhost:8000/
easter: ℹ ｢wds｣: webpack output is served from /
easter: ℹ ｢wds｣: Content not from webpack is served from /Users/bguillermo/projects/sdk_examples/packages/easter

Run the remote control app

> yarn rc-app
yarn run v1.22.4
$ lerna run develop --scope=rc-app --stream
lerna notice cli v3.3.2
lerna info filter [ 'rc-app' ]
lerna info Executing command in 1 package: "yarn run develop"
rc-app: $ webpack-dev-server
rc-app: ℹ ｢wds｣: Project is running at http://localhost:8000/
rc-app: ℹ ｢wds｣: webpack output is served from /
rc-app: ℹ ｢wds｣: Content not from webpack is served from /Users/bguillermo/projects/sdk_examples/packages/rc-app

Run the embed sdk examples

> yarn embed-examples
yarn run v1.22.5
$ lerna run develop --scope=embed-examples --stream
lerna notice cli v3.22.1
lerna notice filter including "embed-examples"
lerna info filter [ 'embed-examples' ]
lerna info Executing command in 1 package: "yarn run develop"
embed-examples: warning package.json: No license field
embed-examples: $ webpack-dev-server
embed-examples: ℹ ｢wds｣: Project is running at http://localhost:8000/
embed-examples: ℹ ｢wds｣: webpack output is served from /
embed-examples: ℹ ｢wds｣: Content not from webpack is served from /Users/bguillermo/projects/sdk_examples/packages/embed-examples/dist

Clean packages

You will need to bootstrap after cleaning.

> yarn clean
yarn run v1.21.1
$ lerna clean --yes
lerna notice cli v3.3.2
lerna info clean removing /Users/bguillermo/projects/sdk_examples/packages/bundle/node_modules
lerna info clean removing /Users/bguillermo/projects/sdk_examples/packages/common/node_modules
lerna info clean removing /Users/bguillermo/projects/sdk_examples3/packages/core/node_modules
lerna info clean removing /Users/bguillermo/projects/sdk_examples3/packages/easter/node_modules
lerna info clean removing /Users/bguillermo/projects/sdk_examples2/packages/embed-examples/node_modules
lerna info clean removing /Users/bguillermo/projects/sdk_examples/packages/inspector/node_modules
lerna info clean removing /Users/bguillermo/projects/sdk_examples3/packages/rc-app/node_modules
lerna info clean removing /Users/bguillermo/projects/sdk_examples/packages/vs-app/node_modules
lerna success clean finished
✨  Done in 5.11s.

Make a prod build

> yarn build-all-prod
$ webpack --mode=production
Hash: 95bb160f191dc13eb410
Version: webpack 4.18.1
Time: 1029ms
...
lerna success run Ran npm script 'build-prod' in 5 packages:
lerna success - easter
lerna success - embed-examples
lerna success - inspector
lerna success - rc-app
lerna success - vs-app
✨  Done in 53.27s.

Packages

The repository is a Lerna monorepo. This means that the package.json dependencies at the root of the repository are shared with each of the individual packages. Please keep in mind that not all root-level dependencies are used by all examples. The packages include:

vs-app

frameworks: Reactjs + SDK Bundle

virtual staging
local webcam
canvas
security camera

rc-app

frameworks: Reactjs + Photon SDK + SDK Embed

an example that shows how to build a remote controlled showcase

inspector

frameworks: Reactjs + RxJS + SDK Bundle

object placement using sdk scene files

easter

frameworks: Reactjs + Phaser + SDK Bundle

minigame

common

reusable sdk bundle components

core

matterport observable library

bundle

showcase sdk bundle is created when running yarn install-bundle and used by the examples

License

See the MATTERPORT SAMPLE SDK CODE LICENSE AGREEMENT file for license rights and limitations for this repository.

GiovanniTurri/canova