Configurator tutorial

This tutorial aims to be a simple copy&paste tutorial. It's not intended for production code (browser compatibility etc is not considered). This tutorial should just show you how the building blocks fit togehter and how you can use them. Adding complicated build pipes, writing very generic code, browser fallbacks etc will only discard the reader. So keep it simple and please adopt the code snippets to your real world needs.

To get a better big picture and overview about the Roomle ecosystem we advocate to read the getting started section. Nevertheless it's possible to only read the tutorial to implement your first app which uses the Roomle Web SDK.

Planning your app

At first it's important to get an idea where and how you want to use the parts of our SDK in your app. You can combine our SDK with every framework and project setup you want. So you are not limited to something specific. The only thing we recommend is the use of TypeScript but since our package is distributed as ES6 module it should also work with plain JavaScript. A small disclaimer here: we really believe in the benefits of TypeScript so we do not extensively test the JavaScript only variant.

In this tutorial we will create a web app which shows a furniture on the right side and on the left side we will see the parameters, addons and a button to show the part list including a perspective image of the current configuration. The mock up of the app we are going to build looks like:

Mockups

This is how the page could look like on initial load. The big image placeholder in the middle will be replaced by the canvas in which the 3D scene takes place

When the user clicks on checkout we want to give her or him an overview about the current configuration. For the sake of simplicity we just do this in a modal

Example repo

You can follow the progress of the tutorial in the example repo here (opens new window). To give you a working example we use some build tools. For simplicity we use Rollup.js (opens new window) with the rollup-plugin-typescript (opens new window) for transpiling our TypeScript code and rollup-plugin-node-resolve (opens new window) to include libraries from the node_modules folder. Also we need rollup-plugin-copy (opens new window) to copy the Roomle Assets into a place where they are accessible via browser (see assets). We do not use any tslint or transpiling magic because it's not the aim of the example repo to provide production code. We want to highlight the building blocks you need and not draw your attention to certain code quality tools. This does not mean you shouldn't use them in your production app. In contrast, we strongly recommend to include as quality assurance tools into your development workflow!

So let's get started with:

git clone git@github.com:Roomle/web-sdk-configurator-example.git roomle-web-sdk-configurator-example
cd roomle-web-sdk-configurator-example
git checkout chapters/create-your-first-app
npm install
# how to see results from chapter one see on the next page ;-)