Intro to Commercetools custom apps — Part 2

A quick look at how customizable the world’s leading digital commerce platform is

In the first part of this article we created a custom Commercetools app from scratch, now we are going to evolve that starting point to achieve an application with a real objective.

Goal

Our goal is to create a custom app that reflects visually the states workflow defined in Commercetools.

Building a Custom App for handling states

Once we have our first hello world custom app we need to make some adjustments to reach our next goal: A custom app to fetch and make a diagram of the states.

We will divide the process into several steps:

• Create an action to fetch the states

First we need to fetch the states from Commercetools, for that we will add an action in /src/actions/states/index.js

You can refer to the docs about accessing commercetools API through actions here

• Bind the action to our visual component (/src/components/view-one/view-one.js).

We have to bind the action creator to the React component using plain old redux.

• Install react-flow

We need a package to render the states, we will install react-flow for that.

npm install react-flow-renderer

Official site

• Implement a select component to show a list of entities.

We need to add a component from the commercetools UI Kit to select an entity and then filter the states.

npm install @commercetools-uikit/select-input

After that we will add the component to our view-one component

• Filter the state’s data based on the selected entity

Once an entity is selected we filter the state list obtained before with our action.

• Build the node structure and show it using React Flow

Now we build the node structure and render it with React Flow

• Run the app

Finally we run our app

npm start

Here we select an entity

Finally we have our state diagram rendered

Conclusions

As we saw in this article, developing commercetools custom apps has several advantages:

• Easy to implement
• Uses commercetools Auth flow
• Access to services through commercetools Custom Apps proxy
• We can render commercetools data (states in this case) using tools like ReactFlow and show it in a user friendly way.

Source Code

https://github.com/marcelogsoria/commercetools-customapp/