Create an App Builder project

Transcript

In this video, we’ll walk through creating an App Builder project to provide a destination for your events sent from Adobe Commerce. To follow along with this demonstration, you will need access to the Adobe Developer Console and you will need to have installed the AIO CLI.

This is the Adobe Developer Console. As a developer, this is where I start my workflow. Adobe Developer Console gives me access to the APIs, SDKs, and tooling to integrate and extend Adobe products. Once you’ve logged into the Adobe Developer Console, make sure that your desired organization has been selected from the dropdown menu in the top right corner. Next, click the Create New Project button and select Project from Template. Then select the App Builder template.

Before creating the project, you can adjust the project title or app name. Project title is used to identify your project, so using a descriptive name is recommended. Also, note that app name is a unique identifier and cannot be changed after setup is complete. You can then add any additional workspaces you may want your project to have. Projects come with production and stage workspaces by default, and you can add up to three more as needed. It’s good practice to use these workspaces to provide isolated working environments and build, test, and deploy safely. Connected services can differ between workspaces and credentials are not shared across workspaces. Once you’re set up here, click Save.

You’ll then see your created App Builder project.

After selecting a workspace to begin working with, you’ll need to add some APIs before you can start receiving commerce events. To add an API, click the Add Service pop-up menu and select API. First, select IELM Management API.

You will then be prompted to create a service account credential. You can continue with generating a key pair by clicking the Generate Key Pair button.

A config zip file will download automatically, and when it is unzipped, you’ll find a private key file. You will need this file later to configure your commerce instance to send events to your App Builder project.

Click the Add Service pop-up menu again and again select API. Now, select Adobe IELM Events for Adobe Commerce.

You can then click Save Configured API.

A workspace configuration file will also be needed to configure your commerce instance to send events to your App Builder project. To download a file containing your workspace configuration, click Workspace Overview and then click the Download All button in the top right corner.

We will now walk through how to initialize your App Builder project using the AIO CLI so you can begin developing your app. The template that we will use to initialize the app will create a basic Adobe IO runtime action that you can use to respond to your events. First, create a directory for the project and change to that directory.

You’ll then need to run the AIO login command and sign in with your Adobe ID at the indicated URL.

Next, run AIO app init and select your organization and your project.

Select all templates.

Then select the Generator App EXC shell template to initialize a default UI and create a default Adobe IO runtime action. Looking at the contents of the project directory, you can see that some files for the app have been generated. You can then run the AIO app run command to run the app and enable the runtime action.

You can view the generated UI for your application at the provided URLs. If you navigate back to your project in the Adobe Developer Console and click Runtime, you can see the default Adobe IO runtime action that was created.