Adobe I/O Runtime Action and AEM Events

Learn how to receive AEM Events using Adobe I/O Runtime Action and review the event details such as payload, headers, and metadata.

Transcript
Let’s explore how to receive AM events using Adobe IO runtime actions. Adobe IO Runtime, a serverless computing platform, facilitates code execution in response to Adobe IO events. The high-level steps are create project in Adobe Developer Console using the App Builder template, initialize project for local development, configure project in Adobe Developer Console, and finally trigger and verify the AM event. Let’s get started. To create a project, first navigate to developer.adobe.com and click on the console button. Then click Create Project from Template button and select App Builder option. In the setup model, update the project title, add a workspace if needed, and save your changes. Next, we need to initialize this project for local development. To do that, we need Adobe IO Command Line Interface or AIO CLI for short. Make sure it’s installed locally. In the terminal window, run AIO app init, then select the correct org and newly created project. For the templates prompt, select all templates, and from options, select Extensibility template generator AIO app. Once project initialization is complete, open the project in your favorite editor. The selected template provides a generic runtime action. We will be using it to receive AM events. But before that, let’s make a few code changes to keep it bare minimum. Also, initialize this project as a git repository and perform initial commit. Next, let’s deploy the project on Adobe IO runtime using AIO app deploy command. This will make the generic action available for receiving AM events. So, let’s head back to the developer console project and select stage workspace wherein we deployed the code. As you can see, we have generic action available. Next, let’s add IOManagement API and AM sites to this workspace. Click the Add service button, then select API, then IOManagement API from Adobe services, and choose OAuth server to server as the authentication type. Save config changes. Likewise, add event, then select AM sites from experience cloud and click next. In the Configure event registration dialog, select the AM environments from which you won’t receive events. In the next step, choose specific event types. Select OAuth server to server auth type and provide a valid name for this event registration. Note that within a single project, you can have multiple event registration, receiving events from different AM environments and of different event types. A good naming convention is critical. Finally, for how to receive events, expand the runtime action option and select the generic action from the dropdown. Save your configurations. The event registration details page provides a summary of the AM site’s event registration. Let’s open the Debug tracing tab. You should see the challenge probe request and response. This is done to validate the action. It’s time to verify and receive an AM event. Let’s update a content fragment in the AM author environment and verify the received event details. The request header and payload object contains various details like where, when, who and what. Using this data, Adobe IO runtime action can perform tasks to develop a content ecosystem. In the next example, we will enhance this action to process AM events, call back AM author service to get content details, store details in Adobe IO storage and display them in a single page application. In summary, now you know how to use Adobe IO runtime action to receive AM events.

The Adobe I/O Runtime is a serverless platform that allows code execution in response to Adobe I/O Events. Thus helping you to build event-driven applications without worrying about infrastructure.

In this example, you create an Adobe I/O Runtime Action that receives AEM Events and logs the event details.
https://developer.adobe.com/runtime/docs/guides/overview/what_is_runtime/

The high-level steps are:

  • Create project in Adobe Developer Console
  • Initialize project for local development
  • Configure project in Adobe Developer Console
  • Trigger AEM Event and verify action execution

Prerequisites

To complete this tutorial, you need:

Create project in Adobe Developer Console

To create a project in Adobe Developer Console, follow these steps:

  • Navigate to Adobe Developer Console and click Console button.

  • In the Quick Start section, click Create project from template. Then, in the Browse templates dialog, select App Builder template.

  • Update the Project title, App name, and Add workspace if needed. Then, click Save.

    Create project in Adobe Developer Console

Initialize project for local development

To add Adobe I/O Runtime Action to the project, you must initialize the project for local development. On local machine open terminal, navigate to where you want to initialize your project and follow these steps:

  • Initialize project by running

    code language-bash
    aio app init
    
  • Select the Organization, the Project you created in the previous step, and the workspace. In What templates do you want to search for? step, select All Templates option.

    Org-Project-Selection - Initialize project

  • From the templates list, select @adobe/generator-app-excshell option.

    Extensibility template - Initialize project

  • Open project in your favorite IDE, for example VSCode.

  • The selected Extensibility template (@adobe/generator-app-excshell) provides a generic runtime action, the code is in src/dx-excshell-1/actions/generic/index.js file. Let’s update it to keep it simple, log the event details and return a success response. However in the next example, it is enhanced to process the received AEM Events.

    code language-javascript
    const fetch = require("node-fetch");
    const { Core } = require("@adobe/aio-sdk");
    const {
    errorResponse,
    getBearerToken,
    stringParameters,
    checkMissingRequestInputs,
    } = require("../utils");
    
    // main function that will be executed by Adobe I/O Runtime
    async function main(params) {
    // create a Logger
    const logger = Core.Logger("main", { level: params.LOG_LEVEL || "info" });
    
    try {
        // 'info' is the default level if not set
        logger.info("Calling the main action");
    
        // log parameters, only if params.LOG_LEVEL === 'debug'
        logger.debug(stringParameters(params));
    
        const response = {
        statusCode: 200,
        body: {
            message: "Received AEM Event, it will be processed in next example",
        },
        };
    
        // log the response status code
        logger.info(`${response.statusCode}: successful request`);
        return response;
    } catch (error) {
        // log any server errors
        logger.error(error);
        // return with 500
        return errorResponse(500, "server error", logger);
    }
    }
    
    exports.main = main;
    
  • Finally, deploy the updated action on Adobe I/O Runtime by running.

    code language-bash
    aio app deploy
    

Configure project in Adobe Developer Console

To receive AEM Events and execute the Adobe I/O Runtime Action created in the previous step, configure the project in Adobe Developer Console.

  • In Adobe Developer Console, navigate to the project created in the previous step and click to open it. Select the Stage workspace, this is where action got deployed.

  • Click Add Service button and select API option. In the Add an API modal, select Adobe Services > I/O Management API and click Next, follow additional configuration steps and click Save configured API.

    Add Service - Configure project

  • Likewise, click Add Service button and select Event option. In the Add Events dialog, select Experience Cloud > AEM Sites, and click Next. Follow additional configuration steps, select AEMCS instance, event types, and other details.

  • Finally, in the How to receive events step, expand Runtime action option and select the generic action created in the previous step. Click Save configured events.

    Runtime Action - Configure project

  • Review the Event Registration details, also the Debug Tracing tab and verify the Challenge Probe request and response.

    Event Registration Details

Trigger AEM events

To trigger AEM events from your AEM as a Cloud Service environment that has been registered in the above Adobe Developer Console project follow these steps:

  • Access and login to your AEM as a Cloud Service author environment via Cloud Manager.

  • Depending on your Subscribed Events, create, update, delete, publish or unpublish a Content Fragment.

Review event details

After completing the above steps, you should see the AEM Events being delivered to the generic action.

You can review the event details in the Debug Tracing tab of the Event Registration details.

AEM Event Details

Next steps

In next example let’s enhance this action to process AEM Events, call back AEM author service to get content details, store details in Adobe I/O Runtime storage, and display them via Single Page Application (SPA).

recommendation-more-help
4859a77c-7971-4ac9-8f5c-4260823c6f69