Technical overview for App Builder

Hello, and welcome to the Adobe Commerce Amazon Sales Channel Extension technical overview. Today we will be looking into the implementation of Amazon Sales Channel Extension in Adobe App Builder. Before looking into the code, let’s share a side by side comparison between the PHP and the app builder based extensions. PHP and app builder have a different aspect on skill sets, continuous integration, continuous deployment processes, testing, knowledge base and dependencies. PHP based extensions require strong knowledge of both PHP and JavaScript. Meanwhile, app builder based extensions require a strong knowledge of React and JavaScript. The CI-CD process for PHP is challenging, whereas the app builder based extensions excel in their modernity and ease of use. They can fit into any CI-CD pipeline, such as GitHub Actions. PHP based extensions are recommended to use the Magento functional testing framework in order to run end-to-end testing, whereas the app builder extensions can use any modern JavaScript, such as Jest. PHP extensions require a strong knowledge of Adobe Commerce, whereas in app builder extensions it is optional. And finally, PHP extensions have a hard dependency with Commerce, whereas app builder extensions do not have such a hard dependency and they can be deployed and upgraded without Commerce. Now let’s have a quick walkthrough of the codebase. Beneath you can see the URL for the GitHub repository and there you can access and clone the repo. So now that we have the repository cloned locally, let’s go through the code structure. First here on the left hand side, we have the action source folder, which contains all of our Adobe IO runtime actions. Second, we have the web source folder, which contains our React application with many individual components. Then we have the test folders. We have both end-to-end and test folder, which specifically contains the unit tests for both actions and web source. And finally, we have the types folder, which contains common types for the Amazon sales channel project. Let’s move on to actions. If you’re familiar with Adobe IO runtime or app builder, then you would have thought of actions before. If we open up the ext config yaml, we can see all the actions within the project. In Amazon sales channel, in app builder, we use commerce events such as the catalogue after save event. Whenever the catalogue after save event is fired, we have a single event listener that handles the event and we will be calling the action to patch the product in Amazon. We have a number of other actions that either listeners schedule jobs or basic actions that serve as API endpoints for interacting from the front end, such as managing your Amazon account or returning sales reports. This action here for the catalogue product save after listener is the update product action. Since we have a code base that is written in TypeScript, you can find this file by searching update product and the extension dot TS. In each action, we must export a single main function, which will be then used by the Adobe IO runtime action to pass the parameters for the request. This is the end of our technical overview. Thank you for taking the time to view this video.