Overview

Last update: 2023-06-28
  • Created for:
  • Beginner
    Intermediate
    Developer

This tutorial has the following prerequisites:

For more information on building your first App Builder application, you can view the following blog post to help with this initial setup and configuration How App Builder helps drive business agility for your commerce platform.

What to expect from reading this tutorial

When you are complete this tutorial, you should have a simple single-page application that communicates with Adobe Commerce to pull order history and products. These topics cover App Builder functionality with code samples and instructions. Hopefully, after watching these videos this saves you some development time and inspires other ideas and encourages the adoption of out-of-process development.

How should I follow this tutorial

This tutorial was designed for you to follow the order of pages in the left navigation. However, this is not a requirement. Each page can be viewed individually since they discuss the general concept of building an initial Adobe Developer App Builder app.

Who is this video for?

  • Developers new to Adobe Commerce with limited experience using Adobe App Builder.

Video content

  • Introduction to App Builder and the sample module
  • Prerequisites
  • Expectations for use of the sample module
  • Reusable parts of in the sample module
 Transcript

In this tutorial, we will have a first application that is built out of process within our Adobe Commerce.

This application is done using one of our Adobe solutions, the Adobe Developer App Builder, that provides a unified third party extensibility framework for integrating and creating custom experiences to extend Adobe solutions.

As a prerequisite, you will need to have an access to our Adobe Developer Console. You have to make sure that you are granted a full access or a trial access to App Builder.

You should create and configure your project and attach some workspaces to it. And finally, you must have the AIO CLI to execute comments.

In this tutorial, we will have a sample extension that will pull orders and products from an Adobe Commerce instance and display them in a web component.

The expectation for use of this sample extension is to have the best practices on how to code and how to put in place an application that is out of process. It’s a starting point for a new extension that you would like to develop.

The reusable parts are mainly the connection to Commerce instance using oAuth technology, and the generic REST GET action to target our Commerce with a get functionality.

CAUTION

When performing API calls, ensure that some sort of searchCriteria is used. You might also consider using pagination. If the result from Adobe Commerce is too large, the Adobe Developer App Builder capacity may be met and cause an unexpected end to the file. The result is a malformed response result as a 400 error.
For example, suppose There is a need to request all the current products from Adobe Commerce. The resulting URL would resemble {{base_url}}rest/V1/products?searchCriteria=all. Depending on the size of the catalog the returned, the json may be too large for App Builder to consume. Instead use pagination and make a few requests to avoid Response is not valid 'message/http'.

App Builder - Build your First App related pages

Previous page
Next page

On this page