Back to Website
Show / Hide Table of Contents

Back-End Architecture

  • 4 minutes to read

Customer's Canvas is not a single monolithic application. It consists of several services and each of them has its own purpose.

This diagram illustrates what services it is comprised of and how they are related to each other.

graph TB; sa(Storefront API)-->bo(BackOffice) bo(BackOffice)-->ap(AssetProcessor); ap-->as(AssetStorage); bo-->as; de(Design Editor)-->as de-->daa(Design Atoms API) daa-->as

Let's take a look at each of them in more detail.

Asset Storage

This service could be considered the "heart" of the entire system. It is used to access all entities that Customer's Canvas works with. We call them assets. Some examples of assets are designs, images, and fonts. Assets are explained a bit more in detail below.

The Asset Storage service exposes all CRUD operations for each of the assets, including batch operations. Additionally, all assets can be organized into folders just like in a file system.

As you may learn from the IT infrastructure overview, we don't store anything in a file system - the information regarding assets is stored in MongoDB and the files are kept either in Azure Blob Storage or also in MongoDB. However, the "file system service" would be a great metaphor to describe this service.

Asset Processor

While the Asset Storage service is used to store assets, it does not know anything about their content. A set of controllers that should know how to process our assets is called Asset Processor.

This service allows for:

  • Creating preview images for all assets where it is reasonable - images, fonts, designs.
  • Extracting and saving metadata about assets - dimensions, postscript name, and others.
  • Importing assets to the storage.

You may wonder why we have added a separate import operation to the Processor when we have the create operations in Storage. There are two motivations behind this solution:

  • When you import files, you can automatically read the metadata and create a preview. Otherwise, you would have to make several calls to the API to get an asset ready for further work.
  • Sometimes, the input file type is not the same as the output file. A great example is an IDML file. You cannot push an IDML file as a design - you have to convert it to our own design format first.

As a result, you almost never want to upload files directly to Storage. Instead, you need to import them with the Processor.

BackOffice

This is the UI to manage assets stored in Asset Storage and for carrying out other management operations. From the API perspective, it includes one very important service - the Identity Server. You need to use it to obtain a token used for authorization in all services.

Storefront API

When you are implementing scenario involving online store integration, you should use the Storefront API. This API is responsible for establishing connections between online store products and Customer's Canvas own product specifications by creation special product references. It also allows for managing projects - Customer's Canvas interpretation of the orders from your online store.

Design Editor

The classic online editor application allows the end-users to create a personalized version of a design. In fact, this application has its own back-end based on a file system, however, it can be connected to Asset Storage so that it can consume all the assets from there. Before the release of Customer's Canvas 6, the Design Editor was synonymous with Customer's Canvas itself.

This component has its own developer guide. In this documentation, we will mention Design Editor only in terms of integrating it with Asset Storage, BackOffice, and other components.

Design Atoms API

Design Editor is not the only way to expose the end-user to the personalization interface. An alternative method is to create your own editor or a design generation service with the help of Design Atoms SDK.

The Design Atoms API service is a bridge between such a custom editor and Asset Storage. For example, you can fetch a design from Storage, serialize it to the Design Atoms object, and send it to the front-end application. Of course, you can do the opposite as well.

Additionally, it contains some helper methods to convert colors between RGB and CMYK, import image items, and carry out other operations that are necessary to build a web-to-print editor.

Tip

If you don't build a custom editor and work only with the Design Editor, then you will most likely never use this service.


In the next section, we will learn more about the asset types Customer's Canvas works with.

Was this page helpful?
Thanks for your feedback!
Back to top Copyright © 2001–2022 Aurigma, Inc. All rights reserved.
Loading...
    Thank for your vote
    Your opinion is important to us. To provide details, send feedback.
    Send feedback