Learn about Adobe App Builder, Adobe IO, Webhooks and Admin UI SDK

I’m Surya Lamek, Product Marketing Manager for Adobe Commerce. I have a couple of slides that I will go through to explain our approach to extensibility before getting into a hands-on demo. I hope the demo gods are good to me today, because it is a developer demo, but hopefully all of you will be able to follow along. Let’s start. If you’ve been following our updates for this year, you may have noticed that at the start of this year, we completely reimagined how developers work with Adobe Commerce and extend our solutions. So we introduced API Mesh, which is our API orchestration layer, and that allows you to extend our APIs, to transform our APIs, to consume third-party APIs, stitch them together with us, and essentially bring together a number of different sources, make their management easier, and power storefronts or other integrations that you might need. We introduced App Builder or Adobe Developer App Builder for Commerce, which allows you to extend our native capabilities and all within a Cloud-native environment. I’ll talk a little bit more about App Builder in a moment. Then we introduced event-driven integrations, which essentially lets you take anything that happens within your Commerce system, which is over 700 events, and build near real-time integrations with third-party systems, or even your own custom apps that need to react to events happening within Adobe Commerce. Mid-year, we introduced the Admin UI SDK, which allows you to build single-page apps in App Builder, and then inject those into Adobe Commerce to extend or create new capabilities within the merchant experience and all without customizing Adobe Commerce. Most recently, that is last month, we introduced Webhooks that allows you to customize Commerce processes in real-time. So things like checkout processes or customers creating events and so on, you can basically intercept those processes and inject a call to a third-party system, bring back data from that, add that into the process, and then go forward. Great for things like payments, validations, and so on. I know Nishant is going to go over Admin UI SDK and Webhooks in more detail in a moment, so I won’t steal his thunder here. At the heart of all of this is Adobe Developer App Builder for Commerce. App Builder is a Cloud-native serverless platform, and it includes a number of different things. It helps you to integrate third-party services with Commerce, and integrate it in such a way that those integrations are easy to maintain, to upgrade, or even replace those integrations with different services if you choose to, with minimal development and less technical debt. You can extend our native capabilities all within this Cloud-native environment. We give you the tools and UI components to build apps and services that you might need, and you can run all of this within App Builder, and we take care of provisioning, and scaling, and distributing the storage, the compute, CDN, and everything else that you need to run those apps. Now, as we go through this, if you take nothing else away from this session, two points that I want to make sure you understand over here. Our number one, all of our extensibility that we talk about here can be done without customizing anything in the core Commerce application. For all of you, especially those of you who have been with us for years on Adobe Commerce and Magento, that means much more frictionless or simpler upgrades because you’re not customizing the core application. The second is a really good developer experience because you’re getting the same set of tools to be able to, whether you’re consuming IAPI, extending IAPI, building custom apps, or building integrations, it’s the same set of tools and infrastructure that you will be using to do that, and it’s not just limited to Adobe Commerce. These same tools and App Builder are available for other Adobe solutions like AEM or AAP, which means as a developer, you can use these same skills and these same tools and techniques to extend multiple Adobe applications. Now, my focus for today’s session is going to be specifically on events, and events essentially are anything that happens within Adobe Commerce, and there are over 700 events. They cover things like product catalog, auto status changes, customer account updates. We can take those events, put them into a pipeline, and then from there, you can consume those events in multiple different ways depending on what your use case is. So, for example, if a product catalog, something changes in your product catalog, maybe you want to send a call out to your search engine to refresh its index, or if an order gets created in Adobe Commerce, maybe you want to send that order over your fulfillment or your ERP system for it to do something with it. Now, you can consume those events in multiple ways. I will be showing you the first way, which is using App Builder, and that means building a custom action or an application to do something with that event. The second is WebHooks, and that is a method in which you can take that event as is and forward it to some other endpoint in a third-party solution. So, assuming you don’t have to do anything with that event, you can just push it to a third-party solution and have that application do something with the data that gets pushed across. The third is journaling, which is more of a pull mechanism, which means that we write all those events into a journal, and you can have your applications reach into that journal and fetch the latest updates or the latest events from there to do something with them. And most recently, and this is in beta right now, but if you’re interested, please do drop a note in the chat, is that events from Adobe Commerce can be pushed directly into Amazon EventBridge, which is their event management pipeline. And from there, you can integrate those events into services that AWS provides. So, there are multiple services running there or that you make use of, or even third-party applications that make use of Amazon EventBridge. You can build out those events and integrations in a local manner. One thing I want to mention is that while there are 700 events, you choose and configure the events that you actually want sent. So, in our case, in the demo I show you, there’s only going to be three events available. So, if you’re wondering where’s the rest of the 697 events, we just exposed three of them because those are the only ones we need, and not just the event, but also the payload of the event. So, for example, if a product gets updated and the product has 50 different attributes, maybe the event only requires three of the attributes or seven of those attributes. So, you choose what data accompanies the event that goes through with it. So, with that, let’s get into the actual demo part of this. So, let me start at the home screen over here. So, I am within the Adobe Developer Console over here. There are a number of different projects that are already available to me over here, or I could create a new project from a template. I’m not actually going to create a new project right now because I have the shell of a project created, but if I did, I can choose to create an App Builder project here. Now, as part of that project that I have created, and it’s called Slack Integration, when I click into it, I’ll see a couple of things over here. I see that I have two workspaces. So, I have a production workspace and a stage workspace, but I’m not limited to these two. These are the two default workspaces that come with any App Builder project. You can add any number of workspaces that you need over here. When you have a workspace, you can go and add services to it. So, you can add APIs to this project, or you can add events to this project. If I were to choose API, you will see a number of different sources of API over here that includes Adobe Experience Platform. I think there might be AEM, or maybe it’s not configured over here, but you see that we can also work with API from across multiple different solutions, including our creative and document cloud solutions over here, all right? The second option I have is to add an event. So, I can add an event registration over here that configures which event I want to listen to and what I want to do with that event. Now, as I mentioned, in my case, I’m going to create an App Builder app and deploy that to do something with the event. Now, I’ve already written the code for that app because I don’t think you want to watch me writing a bunch of code on VS Code over here. So, what I’ll do is I’m going to start a little backwards in terms of the flow of what you might be seeing, but I’m going to go ahead and deploy the app, and while it’s deploying, come back and show you what actually makes up that app. Now, this app is written in JavaScript, so I’m going to go to my command line over here and use AIO, which is the Adobe IO command line interface, and I’m just going to say where. So, this tells me where within Adobe IO I am currently. So, it tells me I’m logged in, and I might, as a partner, especially, this is important to you, you might have access to multiple organizations of all of the different customers you work with. So, it tells me which organization I’m logged into, which project I’m logged into, and which workspace I’m logged into. And this is all correct, but if I wanted to change something, I could always switch the org or the stage or workspace that I want to be in. I’m at the root of my app right now, so I’m going to just go ahead and say AIO app deploy, which is going to push this app into App Engine. If you’re wondering what this app is, give me a moment when we are waiting for some stuff to happen. At that point, I’ll go back and show you the code, but right now it’s building the application over here for me, and it’s going to go ahead and deploy. It should take about 10 seconds, and then we’ll go back over here to start. In fact, let’s go ahead and start registering my event as we wait for this to get completed. So, I’ll go over here to my stage workspace and say add an event. Now, when I choose an event, it shows me all the different event providers that are configured for this organization. And this shows all Adobe event providers, but you cannot register a third party custom provider as well. I’m going to choose commerce events over here, and say next. Now, when I do that, I’m looking at the screen a little bigger. It shows me the different commerce instances I have associated with this organization. I have only one right now, which is Nishant’s instance, so I’m going to select that. But if you had additional commerce instances, you would see all of them over there. I’ll go ahead and say next, and it shows me all of the events that have been exposed from that commerce instance. So, I have one for product updates, one for customer updates, and one for auto updates. I’m going to go ahead and choose the product update event over here, and say next. Then it asks me what kind of authentication I want to use. OAuth is actually the only, OAuth 2.0 is the only authentication currently configured over here. Now, before I go to the next step, let me make sure this app was deployed, and it does say successful deployment in my command line, so I’m good to go ahead and complete the configuration of this app. So, I’ll say next over here. It asks me for a name, so I will say product update action. It’s just called product update action, and then go ahead and say next. Now, it gives me the option of either, by default, it’s going to go into a journal, so you can pull those events whenever you want, but I can either configure a webhook over here, or I can create, I can suggest a runtime action, which is essentially a serverless function, and that is the option I’m going to choose over here. When I drop down, it’ll show me all the actions available to me within my project, and the Slack events one is the one that I have deployed currently, so I’m going to choose that action, say save configured events, and that should complete the configuration over here. So now, it shows me that this is the action, it gives you all the details of what I’ve done. If you choose to use our journaling mechanism, which is more of a pull versus a push, this is the endpoint you would hit to pull all the events available over there. But in the meantime, before I go into all of this, let’s go ahead and make a change to a particular product that I have in my commerce instance. Hopefully, I’m still logged in, so I’ll go ahead and just refresh it. Looks like I am logged in, so I’ll click on catalog. And go to my products. I’ll pick one of these products, so let’s pick the second one, which is simple product 13. And I’m going to make a small change over here. So the price right now says $5, let me go ahead and say it’s $9.95 instead. And then I’ll go ahead and click save. Now, when I do this, now one thing to note is events are asynchronous, so when I do this, it can take between a few seconds to maybe up to a minute for that event to actually go through the pipeline and then trigger the action that I put in over there. Let’s go back to my project over here for a minute. And you can see all the details of the event that I just registered, and all of the APIs that I have added to this project as well. While we wait for that event to flow through, I’m going to show you what that action looks like. So I have the action, essentially each action needs at least one index file over here. And this particular one, that’s all it has actually, there’s nothing else other than some configurations for packaging the app. So I won’t go into the app packaging in this demo, but I will show you what this looks like. So all I’m telling it is when it receives, I’m giving it a Slack endpoint, so that event is going to flow through to Slack, and I probably should have mentioned what I’m working on over here earlier on, but any event that comes in, I’m going to forward it to a Slack channel. So I’ve given it the URL to my Slack webhook over here. And the only thing I’m sending to it is taking the entire event payload and converting it into a string and sending it across to this endpoint. So that’s all there is to this code. It’s very, very simple, but of course, in your case, you might, if you’re creating an action, you might want to do something more with it, like maybe go ahead and transform that data or change it before you actually send it across the endpoint. So let’s go back to my project over here. I’ll click on the event browser. So this is actually using journaling. It shows me all the events that have come through on this project. We just created this project, so I don’t expect more than one event to show up over here. And when I click on go to the start of my journal, it shows me, here’s the event that came in, and I can see that it showed me this product 13, and it’s showing me a price of 9.95, which is what I had entered to it. Now I’m going to go to Slack and click on life to a particular sandbox I have over here, and I’m not sure what your time zone is, but I’m in Eastern time, so it shows me 12 or 9 p.m., which is, and it’s currently 12.10. So this is when that particular product came through, and you can see all the data has been sent over here, including the price change that was part of that event. Now this integration is Slack. Of course, you can use your imagination. You can use these events to send them to anything, like I mentioned, an ERP system, a CRM system, or any other application that you might be integrating with that requires event-driven applications. And that’s the end of my demo, so I’m going to stop and pass it across to Nishant. Thank you, Surya. I’ll take over the screen share. Yeah, I have canceled out. Can you all see my screen? Yes. Yes, looks good. Just a desktop, though. Okay, now we see it, and now we see GitHub. Okay, all right. So we have about, I have 15 minutes, and I really want to show you a couple of things, and I have slides. Skip the slides in the interest of time, and really jump into the two additional use cases. First one is webhooks, and if we have time, we’ll do admin UI SDK as well. So as Surya mentioned, we have recently released webhooks functionality, and I’m sure you’re all fairly technical and have a good web of experience working with webhooks. So webhooks will allow you to implement real-time use cases, like reaching out to an external system during the checkout for inventory checks or payment gateway authorization, or real-time pricing from ERP, and while asynchronous events are good to do data synchronization with third-party applications, like an ERP or PIM, where you just want to send data to an external system or receive data from an external system, webhooks are essentially interrupts where an end user is waiting for a response, and these webhook functionality does come in really handy, especially during the checkout cases, where you can just implement a webhook with an inventory system, and that may actually allow you to not build a backend integration where you are importing inventory at a sequence, at a schedule into Adobe commerce. So it does have a lot of good benefits. And then this has been one of the most asked features for as long as I’ve been working with Adobe commerce. So I’ll show you how easy it is to actually get started and install webhooks functionality and configure webhook. I’ll show you and give you some sample code as well that you should be able to replicate in your account in no time. So let’s take a look at how you actually enable webhook. Pretty simple, if you are familiar with Composer install, just need to make sure you install commerce webhooks meta package and just run the Composer update. And once you do that, your Composer file should look something like this. So if you can see my screen, this shows all the meta packages. And let me just increase the size of the screen. If you can see, so this is my local composer.json, and you can see I have, once I do the installation, the composer.json will look something similar to this. In addition, you have to go to your app.etc.config.php and make sure you have webhooks enabled in there as well. There’s one more place where you need to make sure your configuration is set up is your ENV YAML file. Make sure you have both eventing as well as webhooks enabled. So assuming you will do all of these, and then this is actually available. All of this is available on developer.adobe.com slash commerce. If you go there, all the steps that you are seeing in this demo and in this call, everything is documented with sample code already available at this end point. In coming days, we are also going to share a public repo where we will post all the sample code and all the sample apps that we have so that you can just clone the repo and then start building your use cases in your account. So now let’s take a look at the webhooks use case. So this is the installation piece. The next step you need to do is take a look at how you configure webhooks. So once you install webhooks, you will need to create webhooks.xml in your app etc folder and webhook folder. And this is how you actually register a webhook. So here a very simple example I have is I am creating a webhook for gift card validation. And in this example, let me actually make this full screen. I have the method defined as plugin gift card account API and I’m using the before plugin you could use after, depending on your use case. And I was configuring the URL that I want to call to validate my gift card. But we also allow you to set up timeouts. So we do have soft timeout and real timeout so that you can ensure that there’s no impact to the end user because this will be a blocking call. And once you hit a soft timeout, we start logging that into whatever logging system you’re using. So you can actually see or set up alerts based on that. And the final timeout is something where we just skip the call and continue with the execution. So it does give you a lot of flexibility to make sure you are building a robust integration with third party applications. We are also working on providing you caching capability so that you can catch the webhook response in commerce so that you don’t have to call this endpoint on every transaction. So again, from a performance standpoint, that’ll go a long way. So this is a simple webhook, which is essentially, this is a runtime action, which is Adobe Tom for a Lambda function. Essentially, this webhook is invoking the webhook is invoking this runtime function. And this runtime function is taking the gift card ID and validating it. And I’ll show you what the function is doing. A very, very basic function just for demo purposes. And all it’s doing is testing if the gift card or just the code that I enter has the term test, it’s just going to return an error. And the error should look something like app builder webhook response gift card code is not valid. So since I have all of this deployed on my local machine, I will not go through the deployment because it does take a few minutes. So it’s not ideal to actually do it on a real time training session, but I will show you how the user experience is going to look like. So I will go to my commerce storefront and try to replicate this. All right, so here I’ll go and add a product to cart. It’s a configurable product. I will option one add to cart. Proceed to checkout. Proceed to checkout. Next. So here I now have a gift card and I will try to apply that test. And now you can see it says app builder webhook response gift card code is not valid. I’ll just run it again. Gift card code test is not valid. And if I show you the code, it just shows you that the webhook was able to invoke this function, pass the code from the UI, and it hit this code block and it returned that error. So this is to demonstrate, I mean, this is a very simple use case. This could be an inventory check. This could be a payment gateway validation, could be a real time pricing call to an ERP. The use cases in commerce are enormous. And span a huge variety of use cases from ERP to auto management system to PIMS. So again, I think, so if what you looked at in this demo is nowhere actually I wrote any PHP code. It’s all XML files and configuration files. And you just have to go through the installation process. And then if you are using 247, the latest version of Adobe commerce, all of these packages actually come pre-installed already. So you just need to go in there and enable those, these modules and start building your use cases. So this is the demonstration of webhooks. I please go to this URL developer.adobe.com.

developer.adobe.com. All of the steps from installation to use cases are documented here where you can see how to validate, discount code validation. We give you a sample webhook configuration. There is also a sample function, JavaScript function that you can just deploy in your app builder account and invoke that from webhook. You can also invoke an external webhook if you can figure out the request response. But if there is something that you need to do, you probably need to create a function that will transform the request and response to match the webhook configuration. So again, we have five more minutes. This was webhooks. The next thing I want to show you quickly is admin UI SDK. So there are always use cases where you need to go in the Adobe commerce admin and customize that, maybe add a new screen, maybe extend the product grid and additional columns to product grid or order grid. And populate that with data. So for that, you have to today write PHP code and you’re going in there and literally just forking the code and adding your customization in there. We have now released an SDK that will allow you to actually inject an external single page application or external JavaScript into Adobe commerce admin. And that will eliminate the need for you to actually write any PHP code. So you can just build your customization, UI customizations in app builder and then specify the extension points. And I’ll show you how that looks. The current extension points that we support are menu. So you can add any menu item and then reference it to any externally running application. It brings that app into Adobe commerce. You can extend order grid. You can add a new page in the back office application or you can extend product grid. So we are working on eight additional extension points and you can just use the configuration to extend these extension points and inject your JavaScript in there. And that will eliminate the need to actually write any PHP code to extend the back office admin. So here I will put a link to a sample application I already have. So just go to github.com slash magento app builder samples. This is the git and I will quickly show you how to do that. So I will just do a make directory demo. Demo and I will just clone this repo quickly and you should be able to do that as well. And you can see CD. Git clone here. CD, there’s sample, CD, sample extension. So here when I’m in the sample extension folder, all I need to do is do AIO app use and this will start building my application and I will just select the application and the workspace. So it’s already configured. Actually, I just need to log out. Anyways, I think we are running out of time here. So what you need to do is just clone and do AIO app use and it will just build your application. Next thing you command you need to run is AIO app. It will deploy your application and once you deploy your application, it will look something similar to this. So I already have this application running in my app builder account. Need to authenticate again. So I will go here and you can see this is the app that is running. So once I deploy this application, you will need to submit this for approval and you can approve any apps that are submitted for approval at exchange.adobe.com and you can see I have this app already approved. And if I show you the admin, this is how it is going to look like. So in my admin, it will create a new apps section and I can now reference my application directly from here. And you can see it just pulls orders and products and it’s actually also extending the order grid and adding these three columns. And none of this code is actually written in PHP. All of this is done using app builder and the code for this application, this is how you add the extension points. So here in my extension registration JS in my app builder application, I’m adding a new menu item under apps. So I’m calling it first app on app builder. I am also adding a page title first app on app builder. That’s what you saw here. Under apps, first app on app builder. And then what I am doing is, this is the extension of order grid where I’m adding three columns, first app column, second app column and third app column. And you can see these columns appear here. And to pull data for these columns, I just have to specify a mesh ID and API key and it’ll pull the data from that mesh ID. This could be any of your own APIs that you want to leverage to build and pull the data to populate those columns. So we are unfortunately out of time. I will give it back to Ed. And if we…