How App Builder helps drive business agility for your commerce platform

Businesses are striving to build immersive, easy-to-use ecommerce experiences for their customers. To meet their customers’ heightened expectations, businesses need to build shopping experiences composed of a growing number of services, and often extend the native capabilities provided by these services.

Adobe Commerce has always been one of the most flexible commerce platforms available. With a modular and open architecture, developers have control over every aspect of the application and can customize it to meet their needs. However, as customizations increase, so does the code and number of dependencies that developers need to maintain over time, which can increase the cost of ownership.

As businesses adopt a microservices approach — often with services from multiple vendors — developers must build custom integrations to bring together APIs and data from multiple sources. These integrations are complex to build and maintain, diverting valuable resources from building features and capabilities shoppers need.

Adobe Developer App Builder is a unified extensibility framework for Adobe solutions. App Builder for Adobe Commerce simplifies how developers extend native commerce capabilities. In addition, App Builder makes it easier to integrate with third-party services to build composable shopping experiences.

What does App Builder include?

• Cloud-native, serverless development environment — Build scalable apps in a cloud-native environment. Adobe takes care of provisioning storage, compute, and CDN. You build the apps, while Adobe hosts, scales, and runs them for you.
• API orchestration out of the box — Easily configure Adobe and third-party API sources into a unified graph using the included API Mesh. Add, remove, or upgrade services as needed while minimizing the impact to your commerce application. Extend APIs easily and edge cache API responses to deliver rich, performant experiences.
• Fast custom app development — Build custom apps that interact with core Adobe services and automate processes with event-based integrations. Access authentication services, end-user access controls, the ability to publish and consume custom events, data storage, and CI/CD pipelines. User interface design is made easy with Adobe’s React Spectrum components that match the look and feel of other Adobe products.
• Secure and compliant — Build secure apps in a Payment Card Industry (PCI) compliant environment with API authorization and user access control included. Admins can view, test, and approve apps before they are published for use.

Benefits of App Builder with Commerce

App Builder is designed to increase the speed of building and deploying new features, while reducing the cost to maintain them. Adobe Commerce has full coverage of its functionality by a variety of APIs. And with the most recent release, Adobe has added support for over 500 events through Adobe I/O events. App Builder allows developers to write microservices that will extend native functionality — using APIs and events — without customizing the Adobe Commerce core code.

Some of the benefits of using Adobe App Builder with Commerce are:

• App Builder manages the orchestration of Adobe and third-party APIs. Developers can build composable shopping experiences without dealing with the complexity of the back-end services.
• Events from Adobe Commerce are available to App Builder apps. Developers can subscribe to events to easily determine the right data to be synchronized with other microservices.
• Apps are hosted and run in a cloud-native environment that is automatically scaled for you. This means your Adobe Commerce resources are not used for operations that are executed inside of App Builder.
• Since all interactions with Adobe Commerce are through a stable API layer, platform upgrades are greatly simplified.
• Apps can have their own release cycle since your code is not dependent on the Adobe Commerce technology stack.
• App Builder applications are Node.js applications, so you don’t need specialized Adobe Commerce developers to build and maintain apps.
• App Builder minimizes security risks by providing security and access controls as well as a PCI compliant environment.

In addition, App Builder includes access to all APIs and services provided by Adobe I/O Runtime — including an event pipeline, developer tools and SDK (software development kits), user interface components, and CI/CD that accelerate development.

Creating and managing a new application

Creating a new application is a very simple process. App Builder can be accessed through the Adobe Developer Console. If you do not have access to App Builder, you can reach out to your account team for access, or you can request trialaccess.

Create application

1. Create new project from template

2. Choose “App Builder”

3. Configure new application

Here you can define a new project title and application name.

You can create multiple workspaces for your development process. You can also add additional workspaces later.

Please also select “Include Runtime with each workspace”.

That’s it! Easy, isn’t it?

Project dashboard

After creating a new project, you can access its dashboard and retrieve all required project information. By clicking on workspaces, you will get workspace specific settings and configuration.

Inside of each workspace you can:

• Add new services and APIs to your integration.
• See and configure connected APIs and manage their settings individually.
• See insights about your workspace — APIs used, events, calls, response time, and more.
• Get workspace credentials or JSON configuration

Initialize project

Now you’re ready to start developing. For that you first need to install aio-cli tool:

https://github.com/adobe/aio-cli

Next run the following command:

This will lead you through the guided journey of App Builder initialization.

Once completed, you can run.

That will start your application. You are all set. Your first application is up and running!

Summary

While building new microservices with App Builder is easy, it’s important to think through architectural decisions when determining the correct solution for your needs. Consider the pros and cons of creating and maintaining new services. Consider how each service interacts with and shares data with the rest of your application, and any additional complexity that could be introduced into your system.

App Builder gives developers flexibility in extending Adobe Commerce, and agility to integrate with third-party microservices, or even build new microservices. App Builder takes care of hosting, scaling, securing, and running your apps so you can focus on building what matters — great customer experiences.

If you weren’t able to attend Adobe Summit, you can learn more about App Builder through the on-demand recordings of the sessions and labs.

Oleksandr Lyzun presented an innovative App Builder service he and his team built for Adobe Commerce at Adobe Commerce Rockstar.

Surya Lamech and Nishant Kapoor hosted a session on App Builder and Composable Commerce.

Oleksandr Lyzun is the commerce technical team lead at Comwrap Reply. In the last 14 years of working with Adobe Commerce he developed, led, and deployed numerous projects. As Magento Community Maintainer and Magento Master, he works with passion and love on various Magento Community projects. His passion is to work on complex Adobe projects and provide tailored solutions to the digital challenges of e-commerce customers.

Surya Lamech also contributed to this article. Surya Lamech is a product marketing manager at Adobe

with a focus on platform, scale, and extensibility for Adobe Commerce. Prior to his current role, he was a principal solution architect helping clients design and deploy engaging customer experiences built on Adobe solutions. When he is not in the office, he's either on the soccer field with his boys or out riding his motorcycle.