Learn about the Salesforce Commerce cloud starter kit architecture

Transcript

Now that we have our SOCC instance configured and ready for synchronization with Commerge Optimizer, we can now deploy our App Builder Starter Kit. Let’s head back over to our ACO SOCC Starter Kit repo.

We’re going to follow the same process that is outlined in the Starter Kit repo’s readme file. So feel free to follow along with these instructions as well. To get started, let’s head over to Adobe Developer Console at developer.adobe.com slash console.

We’re going to create a new project from template. So we’ll click the button here. Select App Builder.

And we’ll give our project a name. I’m going to call it ACO SOCC Demo.

For the app name, we have a generated name here provided to us. We can rename this as we want as long as it’s unique. Now let’s click Save. Alright, you can see we have two workspaces created, a production and a stage. I’m going to click into the stage workspace. In order to access all the APIs we need for our App Builder project, I’m going to add a few services here by clicking this Add Service button and then clicking API. The first one you need is Adobe Commerce Optimizer Ingestion. This lets us synchronize catalog data into ACO. I will select that card and then click Next. The OAuth server-to-server authentication method is what I want, so I’ll click Next. For the product profile, I’m going to click the default one here and then click Save Configured API. Alright, I am going to add two more services, so I’ll repeat the same process. I’m going to scroll down and I’m going to add IOOvents. And then one more. IOO Management. Alright.

And as I add these APIs, it’s going to add them to our same credential. So this one credential for OAuth server-to-server is going to have access to all three of these APIs. Let’s click back to our workspace overview. And then click the Download All button in the top right. This is going to allow us to download our workspace JSON file with authentication and other critical information we need to connect our App Builder to our Dev Console project.

Next, we need to clone our starter kit. So let’s grab the GitHub URL and head over to our terminal. Let’s clone our repo using the git cli. Let’s navigate into that directory and then open it up in our IDE. Before we forget, let’s copy our workspace JSON file that we just downloaded into the scripts onboarding config directory. And I’m going to name it workspace.json. Alright. Now we’re going to take the env.dis file.

We’re going to copy it. Paste it. And rename to .env. We have a lot of information to fill out here. But let’s use the aio-cli to make our lives a little easier.

Opening up our terminal, let’s install the aio-cli.

NPM install dash g at adobe slash aio-cli.

Now we can use the aio-cli to link our local codebase with our Dev Console project that we just created. First, let’s type in aio-login. This will pop up a window in your browser allowing you to sign into your Adobe account.

And then now you can close this window and continue working back in the CLI.

Okay, next we’re going to run a few commands to link our Dev Console project with our local App Builder codebase. Let’s type in aio-console-org-select.

Here we’re going to pick the adobe-ims-org that our Dev Console project is associated with. For me, it’s adobe-commerce-optimizer-internal.

Next, aio-console-project-select.

And here we’re going to find the project that we just created.

aco-sscc-demo.

Next, aio-console-workspace-select.

Here we’re going to select the stage. Now that we have our project correctly linked, we can use the aio-app-use dash dash merge command. And we’ll use the org-product workspace we just configured. And now, if we go to our .env file, let’s go to the bottom. We can see these environment variables that the command has inserted for us into our .env file, which will help us with connectivity to Adobe APIs. Okay, let’s go over some of the information here that we need to put into our .env file. This top section is the ACO configuration. This will be your ACO tenant ID, your region, in our case it’s innate1, the environment type, its sandbox, and we can also add our storefront URL as well. The OAuth information can be found in your Dev Console project under the server-to-server credential that we just created.

The IOKonsumerID project ID and workspace ID can be obtained from the workspace.json. The comments here give us a hint of where we can find this information.

These will be the keys in the .json file that we need to find. Going to our workspace.json, you can see project ID, let’s copy that one. This is going to be the project ID field.

Next, let’s find project.org.ID, project.org.ID, and finally project.workspace.ID. Next, we need to configure our SFCC fields. These will be things like the API URL, your Realm instance ID, organization ID, the site ID, and which locales you want to sync. The site ID and locales the same fields are important because this is what the App Builder project will use to pull data from SFCC and then synchronize it to Commerce Optimizer.

So this is the site ID we want to synchronize, CarveloDemo. We can input one site ID here. In our locales to sync, we can enter a comma-separated list. So in this configuration, we are syncing the en-us and the fr-locales. Okay, great. Now we’re ready to deploy our application to our Dev Console project. Let’s ensure we have our dependencies installed by running ntn-installer. Next, let’s run the aio-app deploy command.

This will build and deploy our App Builder application and then deploy it to our Dev Console project. Alright, deployment was successful. We have one final onboarding step to run. We need to run our onboarding script to register our App Builder actions to our Dev Console project and set up our event handlers. We can do this by running ntn run-onboard. Great. We were able to register our actions in the event handler successfully.

Let’s hop back over to our Dev Console project and be sure everything was deployed correctly.

Let’s dive into our stage workspace. And here we can see we have our events deployed. We can see our backoffice, full, delta sync, metadata sync, product sync, and pricebook sync events.

If we click into runtime, we can see all of our actions as well. Great. This looks good. Now that we have our App Builder project correctly deployed to our Dev Console, we’re ready to go. In the next video, we’ll go through a full end-to-end demo. Thanks for watching.