Blog

Easier to develop online configurators with TypeScript and DynaMaker

We are constantly working to improve the DynaMaker cloud service and lately we have been focusing extra hard on usability for developers.

Therefore we now have released a big update simplifying many of the development patterns that you encounter when building your online CAD-configurators. Most of the changes are in the actual structure of the TypeScript/JavaScript templates for the different stages of development.

Changes

The most important changes are listed in the docs under Changes 2020-10-20 and can be summarized as:

Upgrading old projects

Since old projects need the possibility to always carry on there is no automatic upgrade performed on your projects. You need to reach out to support@dynamaker.com if you want the latest features and we will assist you with the upgrade!

Industry gate configurator template

Are you working with doors, gates or other forms of openings in buildings? We have a nice template to get you started with DynaMaker!

When enabling parametric configuration on your homepage you can let the user do the measurements themselves. With rules restricting and validating the input, you can control what sizes and resolutions are allowed, limiting mistakes and errors.

You can allow direct download of a quotation drawing (PDF/DXF) that is auto-generated with the exact measurements and easily integrate your configurators with your e-commerce with the help of our plugins and integrations.

If this looks useful for you, please reach out to sales@dynamaker.com and let us show you how we can help guide your clients and automate your quotation process.

CAD configurator for 3D-printed motor brackets

Try out the configurator

A DynaMaker template project that generates a motor bracket that fits the NEMA standard for stepper motors. With very few inputs the user can modify the installation size and picking the right standard without having to know anything about the NEMA specifications.

You can navigate the model with the middle and right mouse buttons.

Does this template look useful to you? Contact us at sales@dynamaker.com and we can get you started with this!

Greenhouse configurator template

This is one of many template projects available for a quick start with customization in DynaMaker. It’s a simple one-step configurator that enables parametric customization of a greenhouse with automated CAD exports. See the video below for an example of how it could work for your e-commerce!

Integrations with SendGrid and Auth0

Most online applications work together with other systems and solutions to help users design and customize products online. Therefore they almost always have to be connected to a homepage, e-commerce, ERP, customer portals and similar to do their intended work.

As a fast and standardize way of connecting the applications your create with DynaMaker to these type of platforms we have now released plugins in the developer dashboard!

Plugins popup in a project.

First out is the two plugins SendGrid and Auth0, providing e-mail service and authentication for your project.

These two provide a quick way of handling user interaction when you only have a homepage and dont yet have a full fledged e-commerce platform or customer portal taking care of things like theese.

How to use SendGrid plugin in a DynaMaker project

  1. Open your project in DynaMaker
  2. Edit UI in your DynaMaker project and create a checkout button in your project that should trigger an email to sales
  3. Create an account at SendGrid and create an API key there
  4. Create an e-mail template at SendGrid of how you e-mail should look and
  5. Go back to DynaMaker and activate the SendGrid plugin in your project dashboard.
  6. Add your api key to the plugin input field.
  7. Open Edit UI in the DynaMaker project and go back to your checkout button
  8. Import PLUGINS module under the “edit imports”
  9. Access the SendGrid plugin api with PLUGINS.SENDGRID.sendMail( … ) with the proper templateId and content matching what you setup in SendGrid
  10. Pres SAVE & UPDATE and test the checkout button in the editor

How to use Auth0 plugin in a DynaMaker project

  1. Create an account on Auth0
  2. Create a new Authentication setup for “Regular Web Application” and copy the details
  3. Create a first user in Auth0
  4. Open your project in DynaMaker and activate the Auth0 plugin in your project dashboard.
  5. Fill in the same details in the plugin fields as you used for the authentication setup.
  6. Deploy new version of your application and copy the url
  7. Go back to Auth0 to fill in some final information from the deploy url
  8. You will now get an login prompt when accessing the application url

If you have questions or feedback, dont hesitate to contact support@dynamaker.com and we will help you!

We also gladly receive your wishes of new plugins to your favorite systems!

Develop a CAD configurator for the web

When working with an all-in-one cloud service like DynaMaker you can pretty much follow these 10-steps to develop your first CAD configurator for web, e-commerce or CPQ. All the technical aspects can be found on docs.dynamaker.com or by a discussion with our support team. The hardest part is usually doing things in the right order.

Development process in 10 steps

A.1 – Sign up for a free account on DynaMaker and go through our docs & tutorials docs.dynamaker.com
A.2 – Request template projects from the support team (see examples on youtube.skymaker.se or start page)
A.3 – Explore the template projects and get inspired to the best approach for your product
A.4 – Draft a first prototype of the user interface in DynaMaker to find out what parameters should be configurable
A.6 – Draft a first prototype of the main assembly of components with the major parts (both upload static CAD files and create some parametric CAD components in DynaMaker)
A.7 – Show your prototype to your internal team and discuss the solution
A.8 – Keep developing until you have a Minimum Viable Product (MVP) that can start solving some of the user cases (don’t wait too long or add too much stuff)
A.9 – Introduce the MVP to the intended users to get early feedback and adoption of using a new tool started (it takes time..)
A.10 – Keep adding new features in parallel with ensuring that more users/customer uses the visual product configurator

Requirements for an online CAD configurator

When you look at a configurator that runs in the cloud you need the following parts to work together. DynaMaker will handle all those three in a single platform. But the principles stated here apply no matter what platform you choose.

  1. A client-side module with support for CAD that the users interacts with
  2. A server-side module that hosts the application and provides additional functionality like authentication, saving and loading, etc.
  3. A set of rules and formulas for the product configuration

Part 1 – Client-side module

Unless you want the users visiting your homepage to download and install tools the old fashion way you need to ensure you have a client-side module in your application. This is something that runs in the browser when visiting a homepage and is normally composed of HTML & JavaScript.

The client-side mainly focuses on:

  • How the interface should look (placement of buttons, toolbars)
  • What the user can interact with (buttons, rotation of model)
  • What steps are needed to configure a product
  • Visualization in 2D or 3D
  • Presentation of relevant data to the user (dimensions, values)

Part 2 – Server-side module

To make things available on the web you need some kind of server to host the files and provide protected functionality like user handling, security, saving and loading a configuration, connections with other software, and much more. This is only exposed to the client-side through an API and can be composed of pretty much any programming language available.

Developing the server-side is hard and requires an experienced developer to ensure that it’s secure, can handle the load and is possible to maintain over time. The server-side is handled automatically in the DynaMaker cloud service.

Part 3 – Product rules and formulas

Last but not least you need a set of rules for your product configurator to work. Maybe you already have them written down in the product catalog? Or expressed in an excel sheet somewhere. These need to be translated to web-compatible formulas and code (client-side or server-side).

The rules and formulas can be distributed either to the server-side module (secret formulas) or the client-side module (compiled but available), or both, depending on how the product configuration is set up.

If you want code examples on how this can be set up on DynaMaker you can check out the tutorials under docs.dynamaker.com

Online product picker for solar panels

Building a online tool for just switching predetermined sizes is easy. Add a few 3D-models with some nice textures and suddenly you have very visual way for the customers to test different sizes.

But from that simple product picker you can then allow export of 2D-drawings with dimensions, open up for patterns of multiple panels, and allow different downloads for adding to your own 3D-projects. Endless possibilities!

Send us some links with your preferred sizes and we will set you right up with a solar panel online configurator from one of our templates.

Extruded profile configurator

DynaMaker has lots of templates and projects to start from when setting up a 3D configurator on your homepage. One template is for configuring profiles and creating BOM lists with customized cutting lengths. Let the customer select and add their profiles and automatically create packages of 3D files (STL, STEP) and BOM lists.

Sounds interesting? Send us a set of DXF files of the profiles you want to configure to sales@dynamaker.com and we will set up your own version of this configurator and show you how to integrate it with your current homepage!