# 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
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:
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 firstname.lastname@example.org: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 ;-)