Adobe Offer Decisioning Engine Previewer

Welcome to ODE Previewer an Adobe I/O Application to view Offer representations for a selected unified profile. Easily view and test the experiences delivered to your customers via Adobe Experience Platform.

Installation

Prerequisites

To deploy and use this app you will need to provision Project Firefly on your Adobe Account. Follow the link for details on How to Get Access to Project Firefly

Before you get started please ensure that you have all prerequisites on my workstation. Follow the link for details on how to Setting up Your Environment

Create Product Profile

Access to all project Firefly apps is managed through Adobe Admin Console. The recommended approach to managing access to the app using User Groups that have privileged Product Profiles. Follow the instructions below to set this up:

Create a user group with an appropriate name and description. Click Save when ready.
Create Adobe Experience Platform Product Profiles to manage privileges for the app workspaces. group with an appropriate name and description.
- Go to Adobe Experience Platform Product in Admin console and click New Profile.
- Give the Profile an appropriate name and description and click Next when ready.
- Make sure to enable Offer Decisioning service and click Done when ready.
- The app at least needs the following roles:
  - View Sandboxes
  - View Profiles
  - Execute Decisioning Activities
- Once all roles have been selected click Save when ready.

Creating a new Project in Adobe Developer Console

Adobe Developer Console gives you access to APIs, SDKs, and developer tools to build on, integrate, and extend Adobe products. This app needs access to Adobe I/O Runtime credentials and access to Adobe Experience Platform APIs. Follow the instructions to set up your project:

Navigate to Adobe Developer Console.
Use the Org Switcher on the upper right corner to ensure or to select the Org you want to use.
Once you are in the correct organization, Under Quick Start, click on the option to Create project from template. Note that if you don't this option, it might be because your request to access Project Firefly has not yet been approved.
Select Project Firefly from the list of templates.
Enter Project Title and App Name for your templated project.
- Project Title Give a descriptive title to e.e "ODE Previewer <<company name>>"
- App Name Please enter "ODEPreviewerApp". This should match the project name in package.json
- Click Save when ready.
You should see a new project has 2 default Workspaces. It is recommended to create workspaces for individual developers working on a project.
- Create a new workspace by clicking the + Add workspace button. Give the workspace an appropriate name and description.
- Click Save when ready.
Within each of the workspace you will need to add the service needed for the app.
- Click the + Add service button and select API
- Click on Adobe Experience Platform then select the Experience Platform API tile, click Next when ready.
- Select Generate a new key pair or upload a key pair you have already, click Next when ready.
- Select the product profile created for in preview sets and click Save configured API.

Install Project Locally

On your machine, navigate to the Terminal and enter
```
$ aio login
```
This will open a browser window where you will need to enter your Adobe ID.

Clone the github repo

$ git clone https://github.com/PulkitXChadha/aep-offer-decisioning-previewer.git

Change directory
```
$ cd aep-offer-decisioning-previewer
```
Select the Organization, Project and workspace. the AIO CLI has helper commands to allow you to efficiently select the workspaces and have the app use the credentials associated with the workspace. The credentials include the .aio and .env files. You will need to run the following commands:
- List all organizations you have access to aio console org list
- Select the org you want to use aio console org select <<IMS ORG>>
- List all Projects in the org aio console project list
- Select the Project you want to use aio console project select <<Project ID>>
- List all workspaces in the project aio console workspace list
- Select the workspace you want to use aio console workspace select <<workspace ID>>
From within the project folder run the following command to downloads the relevant configuration files.
```
$ aio app use
```
This step will create .aio and .env files which include the credentials needed to run the app in the workspace. You could also manually populate the .env file in the project root, but using the aio cli is convenient and recommend.
Install all node dependency libraries.From within the project folder run the following command
```
$ npm install
```
Run locally (this step needs docker and docker images, see details in the above). Ensure that Docker is running on you machine and run the following command:
```
$ aio app:run --local
```
This step might that a few mins at first.

you might need to accept a self-signed certificate to use https://localhost:9080 When successful you should see the below message.
Copy and paste the URL https://experience.adobe.com/?devMode=true#/custom-apps/?localDevUrl=https://localhost:9080 in a browser and you should see the app screen.

Test & Coverage

The project has > 150 unit tests for each of the UI and runtime actions. You can run these test by running the following command from the project folder
```
$ npm run test
```
To Run a test coverage report run the following command from the project folder
```
$ npm run test-coverage
```

Deploy & Cleanup

aio app deploy to build and deploy all actions on Runtime and static files to CDN
aio app undeploy to undeploy the app

Continuous Integration and Continuous Delivery (CI/CD)

The repo uses GitHub Actions for CI/CD. The .github/workflows folder has all the workflows yml files used.

You may need to modify and/or delete some of these workflow files.

For more information CI/CD for Project Firefly Applications

Publishing your Firefly App

For instructions on how to publish and approve your app go to Publishing a Project Firefly Applications

Project Folder Structure

├── actions  #this folder is intended for backend source code for all serverless actions
│   ├── misc
│   │   ├── get-aio-state.js # wrapper runtime action to get a state value from aio-lib-state
│   │   ├── update-aio-state.js # wrapper runtime action to set a state value from aio-lib-state
│   ├── ODE
│   │   ├── get-activities.js # action to get a list of all ODE activities in the AEP instance
│   │   ├── get-container.js # action to get the ODE container ID for the sandbox selected.
│   │   ├── get-decision-rules.js # action to get the details of Decision Rule.
│   │   ├── get-fallback-offer-details.js # action to get fallback offer meta data.
│   │   ├── get-offer-details.js # action to get offer meta data details.
│   │   ├── get-offer-metrics.js # action to get capping metrics for the offer.
│   │   ├── get-offer-representation.js # action to get the ODE container ID for the sandbox selected.
│   │   ├── get-placements.js # action to get the ODE container ID for the sandbox selected.
│   ├── PALM
│   │   ├── get-sandboxes.js # action to get a list of all sandboxes in the AEP instance
│   ├── UPS
│   │   ├── get-identity-namespaces.js # action to get list of all Identity Namespaces.
│   │   ├── get-identity-preview-report.js # action to get list of all populated Identity Namespaces.
│   │   ├── get-profile-experience-events.js # action to get experience events for the profile.
│   │   ├── get-profile.js # action to get Unified Profile based on an entity value lookup.
│   ├── utils.js
├── web-src   #this folder is intended for frontend source code such as html templates, react components, JS, CSS
│   ├── index.html
│   ├── src
│   │    ├── components
│   │    │    ├── About.js
│   │    │    ├── ActivityList.js  # React Component for Activity Picker.
│   │    │    ├── App.js
│   │    │    ├── EligibilityRuleDetails.js # React Component for displaying Eligibility Rule details.
│   │    │    ├── ExperienceEventsView.js # React Component for displaying Experience Event Data.
│   │    │    ├── FallbackOfferDetails.js # React Component for Fallback offer details.
│   │    │    ├── Home.js
│   │    │    ├── NamespaceList.js # React Component for Identity Namespace drop down.
│   │    │    ├── OfferDetails.js # React Component for displaying offer meta data details.
│   │    │    ├── OfferPropositionMetricView.js # React Component for displaying Capping metric bar.
│   │    │    ├── OfferRender.js   # React Component to Render Offer Content.
│   │    │    ├── PlacementList.js  # React Component for Placement drop down.
│   │    │    ├── Previewer.js  # React Component for the Previewer Page.
│   │    │    ├── ProfileView.js  # React Component for displaying Experience Event Data.
│   │    │    ├── PropositionHistoryView.js  # React Component to display Proposition History.
│   │    │    ├── SandboxPicker.js  # React Component for Sandbox Picker Ribbon.
│   │    │    ├── SideBar.js  # React Component for Side Bar.
│   │    ├── context
│   │    │    ├── ProfileViewContext.js # React Context for profile attributes in decision rules.
│   │    │    ├── UserSettingsContext.js # React Context for user settings for the app.
│   │    ├── hooks
│   │    │    ├── useActionWebInvoke.js # React Custom Hook for caching runtime action responses.
│   │    ├── exc-runtime.js
│   │    ├── index.css
│   │    ├── index.js
│   │    ├── utils.js
├── e2e  #this folder is intended for end-to-end tests
├── test  #this folder is intended for back-end action unit tests and integration tests
│   ├── actions # contains all unit tests for runtime actions.
│   ├── web-src # contains all unit tests for UI components.
├── manifest.yml #this file describes the backend actions you would like to deploy or to redeploy
├── README.md
├── package.json #this file describes project definition and various metadata relevant to the project.
└── .gitignore

Config Files

`.env`

# This file must not be committed to source control

## please provide your Adobe I/O Runtime credentials
AIO_runtime_auth=
AIO_runtime_namespace=
AIO_runtime_apihost=
## Adobe I/O Console service account credentials (JWT) Api Key
SERVICE_API_KEY=

`manifest.yml`

List your backend actions under the actions field within the __APP_PACKAGE__ package placeholder. We will take care of replacing the package name placeholder with your project name and version.
For each action, use the function field to indicate the path to the action code.
More documentation for supported action fields can be found here.

Additional Resources

Adobe I/O

Adobe Experience Platform - Unified Profile