ÃÛ¶¹ÊÓÆµ

ÃÛ¶¹ÊÓÆµ Developer App Builder

In this webinar, ÃÛ¶¹ÊÓÆµ Customer Technical Advisor, Dharmendra Kothe, shares everything you need to know about how to use App Builder to integrate ÃÛ¶¹ÊÓÆµ Commerce with any other eCommerce application. App Builder provides a unified third-party extensibility framework for integrating and creating custom applications that extends ÃÛ¶¹ÊÓÆµ Commerce-native functionality and integrates with third-party solutions. We cover everything from gaining access to this tool to building frameworks that minimize complications while transferring data between ÃÛ¶¹ÊÓÆµ Commerce and other systems. Dharmendra also provides a high-level demonstration on configuring third-party applications with App Builder. As always, we conclude with a live Q&A session answering your questions.

video poster

Transcript

Then thanks for joining us today. So welcome to Behind the Brew. Today we have myself and Dharmendra who’s going to be, presenting everything about App builder in ÃÛ¶¹ÊÓÆµ Commerce. We do design our webinars to be interactive, and we encourage you to ask questions in the questions box throughout the presentation. Type them in there. And we’ve set aside the last ten minutes or so for Q&A. And we’re going to do our best to answer as many of those as we can. So I want to quickly mention a couple housekeeping items. Before OOP looks like. I’m going to go on off.

Looks like my video does not want to work. So apologies there. We’re having, some big technical issues today.

But I want to quickly mention a couple of housekeeping keeping items before we get started. So as mentioned, we are presenting in ÃÛ¶¹ÊÓÆµ Connect today, and we are live. This session is being recorded. So you will get a copy of today’s recording and an email from us, tomorrow afternoon. So this is going you can share this out with your teammates at a later time. I would also like to point out that at the top of the screen, there’s a black bar with an icon of a hands on it. And from there you can drop down and find different actions that you can utilize throughout the presentation. If you like what you see, you can like, feel free to applaud, laugh, or so on. We would love to see your engagement throughout the event, so encourage you to utilize that feature. I’d also like to mention that on the next screen there a handout available for download.

We put together a bunch of resources for you to be able to download and and grab that and use it as needed.

So. As we’re closing out today’s webinar, there’s going to be a couple of survey questions that are going to be at the bottom of your screen if you could take an extra moment. So that out, we would greatly appreciate it. So with that, I’d like to introduce myself. My name is Alana Cohen. I’m not sure if you can see me on video or not, but if if not, I’m a senior Digital event manager for our Customer Success Strategy team here at ÃÛ¶¹ÊÓÆµ. I’ve been with ÃÛ¶¹ÊÓÆµ for actually almost six years now, and spent the majority of those years organizing and hosting these events for our customers. So prior to my time on this team, I spent about two years working with ÃÛ¶¹ÊÓÆµâ€™s Advertising Cloud customers. And then before coming to ÃÛ¶¹ÊÓÆµ, I spent many years at different advertising media agencies around New York, but I’m excited to be here now hosting events like this for you guys, our customers. So if you have any questions or comments about today’s event, please don’t hesitate to reach out. So with that, I’d like to hand it over to Dharmendra to introduce himself. Thank you. Alana. Hello, everyone. Good morning. Good afternoon, good evening. I’m Dharmendra. Dharmendra caught him up. I am here to, like, provide you details about the app builder. So before going to start with the, I just wanted to briefly introduce myself. I’m a Dharmendra Koti. I have approx. 13 years of experience in the ÃÛ¶¹ÊÓÆµ Commerce and, 12 years of, you know, it’ll be commerce development. I work with the organizations, other profession. Kenza. As my data, I hold my bachelor degree in computer science and engineering. I am certified in the business practitioner of CSM safe and Cspl. I live with my wife. I’m, two daughter.

I love cooking, I love cooking, watching cricket movies and spending time with my family. So that’s all about myself. Awesome. Thanks for sharing. All right, let’s go ahead and kick it right into the deck. So I’m going to hand it right over to Dharmendra to get us started.

Thank you.

My mom and. Yeah. All right. So today’s agenda is to discuss the below point traditional approaches and challenges in ÃÛ¶¹ÊÓÆµ commerce, in which we are going to discuss the steps involved and the challenges faced before the introduction of a builder. Next sections. We are covering the steps, for adopting the AR builder architecture. So it is very important, like how the builder will be, will associate with their, with the app builder and their workflow that we are going to see in this architecture. Flow. I will present three specific use case to illustrate how the app builder can be applied. And finally, is the transition to a builder where I can showcase the real time demonstration.

To to conclude with the live demonstrations of app builder in the action. So, free flow to, you know, note not down. Any questions you have throughout the presentations. We will we will address them in in during the Q&A session.

So let us start with the traditional approach and challenges. First we are in the screen. You are saying the custom models and extension. So to implement the specific functionality rely we need to rely on a local models or third party extension. It can create the dependency on the core file. If we modify this file or update them, it maybe result in a conflict. Additionally, third party extensions often come with varying levels of supports and quality control, which can complicated, complicated maintenance reliability. So I just wanted to give an example here. If the customers on the 2.4.6 and you are on the wanted plan with this 2.4.7 and build some custom model or extension if you are using the, using in the application. So there are many prerequisites that we need to cover like before the upgrade upgrade part. Like if the custom model, whichever you have written for that, it’s compatible with PHP 8.2 or 8.3. The extension third party extension, if you are, using that, it is compatible for the 8.2 or 8.3. So these are the prerequisites. Basically, we are having the having a traditional one whenever we have to do the custom custom model and the extension, if you are using the.

Two API like to integrate the third party services, the the applications and it to enables the exchange while extending the functionality. We primarily rely on the rest API, soap API, and GraphQL API integrations as a as a challenge in this approach is the performance and the resource management. Purely optimize API queries can lead to the performance issues, and it requires a developer with substantial expertise to avoid overfitting and under fetching data, which can further impact the system efficiency. Front end customization. It supports a custom front end functionality. It’s often becomes unnecessary to implement the complex custom code. This approach can pose a challenges in terms of the scalability, flexibility, and resource management. The complexity of this custom code. It can be. It can. In the code, it may be harder to scale the application efficiently and adapt the challenges requirement.

Also it managing the resource and maintaining the optimal performance can become more challenging as code base grows and evolves. Performance. When we. When we talk about the performance, it is a key for the customer and we have to make sure that the customer can phrase and the code we have developed. It’s a very well, it’s it’s performed very well because ultimately the performance is the is the main goal for the customer. The end customers can come in to that and they can do the shopping and as soon as possible, they can access the site as soon as possible. Here. Custom script and Cronjob. As a, as, developer, like we last 13 years, we, we like play with the custom script and many more cron jobs be written for managing this kind of in a migration re indexing and sending this, you know, emails, emails, video script and the cron jobs are very much required to automated this process there. Okay. So these solutions can be liability because of we written any custom code any custom script. It is a depending on the like say PHP versions. Recently the ÃÛ¶¹ÊÓÆµ Commerce, it’s a 2.4.7, which is like the services required, the PHP, it’s a two seven, 8.2 and 8.3 there. If the custom script, it’s not supported. The function, the core functions we have written there, it is not supported with that. So again it is elaborated to maintain on the regular basis maintain we have to update on the regular basis. This is the script like it’s again that’s a challenge. There whenever we are writing the custom script and cron job as a service, it evolves and data requirements shift. These custom solutions can become breakable and challenging to managing and increasing the risk of error and downtimes there because of what are the custom customer frequency and the the challenge are in which the basically the custom script, you are executing the time frame and it’s, depending on the data or the code you have written, it’s some time it’s, it’s a breakable or it’s a challenge is to make this an up to date. And it’s, it’s an error and maybe it caused this site is down there. So this is where we are going to, see, like how the arbiter will overcome this.

Lastly is about the data mesh customizations. Everybody, every kind of technical member they are aware about, like we have connected with the database, we are executed. Some of the queries that select query, update, query, delete, query be run there. But some of the informations we update directly on the data sites. It’s again risk that we are and stability issues during the upgrades. So it modifying the database schema or data directly can lead to the inconsistent delayed future updates and complicate maintenance it causing the system instability and unexpected behavior there.

So these are the challenges basically like and many more like challenges. But we are as a, as a core developer, we understand the custom script API’s from that customizations and the database. We are regularly handling these things. So these challenges can effectively address using the App builder. So let’s dive into the into an introduction to App Builder.

I’m excited to introduce you to the app ÃÛ¶¹ÊÓÆµ Commerce App Builder, a powerful tool designed to enhance and streamline your ÃÛ¶¹ÊÓÆµ commerce experience. In today’s fast paced digital landscape, business need to be agile and adaptable. This is where the app builder comes into the play. It offers a robust platform and enables a developer to create, customize and develop applications and extension with the tailored specifically to their needs. Whether you are looking to build a new feature, integrate with the third party service, or enhance your existing functionality, the app build that provides the flexibility and scalability unit. Here. A closer look at what makes the ÃÛ¶¹ÊÓÆµ Commerce App Builder a game changer here. So first of all, we will look into the custom app application development.

The App Builder empowers you to develop custom applications that align perfectly with your business objective. You can extend that to be commerce, core functionality and craft unique solutions that address your specific requirement. Seamless integrations it supports a seamless integrations with the third party services and APIs. The App Builder simplifies the process of connecting to the external system, such as payment gateway, analytical tools, or marketing platform. IT ensuring the like a smooth data exchange and enhance the functionality, scalability and performance. As your business grow. So do you need to, you know, to make the system scalability and scalable and the performance? The App Builder supports the scalability architecture that enables your applications to manage increased traffic and demands while maintaining the optimal, performance.

So here I wanted to give an example that, many customers are looking to, to do the marketing in the site. So they are, they are planning to, run this in a flash sale or any kind of promotions on your site, on their site.

So generally, what happens with the ÃÛ¶¹ÊÓÆµ commerce, with the traditional, and a cloud one? I just wanted to give the example on the cloud where we need to, raise a support ticket to upsize the system. Like, we have to tell these, you know, ÃÛ¶¹ÊÓÆµ Commerce support team. Here we are. We are doing this, you know, promotions, activity, from this days to, this date. So during that, they will be upsize your system and, the, you know, right now, your system is capable to handle this, you know, 100 or 200 customers concurrently. But during the promotions, we are expecting more than that. It’s a it’s a promotion. So obviously it’s, the end user will, will come in to that. And so, and get this, you know, benefits from the side. But in the app builder like this, depending on the customers and depending on the traffic, like it’s, it’s the feature that it’s autoscale there and make the architecture based on the. What are the requests coming on this? To access this and to make this, changes and make this, you know, the API is called. So it is auto scale there. So that level of infrastructure is built in using the App Builder flexibility and modern technologies. It simply supports a modern, front end frameworks and technologies. The app builder headless approach allows you to utilize the latest tools to create a dynamic and responsive user interface.

Streamlined deployment. It supports the rapid deployment and development, new feature and updates with the minimal frictions, the able, the inbuilt environment, speed up both the the deployment and the development, helping you to stay agile and responsive to the market security and compliance. It is very important. Like, whenever we talk about the security, it’s it’s a maintain the high standards actually in the app builder and in the commerce as well. So the specifically I’m talking about the app better like, what are this? If you are as a customer and as a implementation partner. So whether we are trying to adopt or we are trying to, like, use this any service. So, so many questions come in the mind like, hey, what are the security and compliance? It is, that the services gets handled, that feature gets handled. So it is like a it’s maintained the high standard of security and compliance with built in feature that safeguard your data and follow industry best practices.

In this way, the app builder help us to overcome the challenges associated with the traditional approach. Let’s move on the next slide. Explore the detailed architecture of App Builder.

So if you are, seeing this architecture flow, this come this built with the many component and what are the services? It’s a client side. There are the product APIs and other stuff. So we are going to discuss this. What exactly the and how the architecture flow, are using in the ÃÛ¶¹ÊÓÆµ Commerce App Builder. So if you talk about the client side, on the client side we have a single page. Applications are progressive web applications. So how the content delivery network, the client side uses the spectrum for building a user interface, and the ÃÛ¶¹ÊÓÆµ SDK for integrating various functionalities provided by ÃÛ¶¹ÊÓÆµ. This setup ensures a responsive and dynamic user experience.

The first interactions in our flow is a direct API call the customer to the product API. This facilitate through the API to the product API gateway, which manages the API request and directs them to the appropriate ÃÛ¶¹ÊÓÆµ product APIs. This allows the client to directly access all the functionality provided by ÃÛ¶¹ÊÓÆµ suits our products.

It’s not like, we are just talking about the commerce, but other other product like say, a job done ÃÛ¶¹ÊÓÆµ Target you are utilizing. So all the APIs you can solve through the App Builder and you can exchange the data, whichever required. Just there is one example about the ÃÛ¶¹ÊÓÆµ target. We, we will go, seeing this, you know, use cases like where how the ÃÛ¶¹ÊÓÆµ Target will be interact with your ÃÛ¶¹ÊÓÆµ Commerce. And that will be useful for the customer to maintain that, information.

Server serverless microservice API call. Next we have the options for the client to call a serverless microservice. This call goes to the ÃÛ¶¹ÊÓÆµ IO runtime, which handles the serverless actions. Using the serverless architecture allow us to run functions and response to events without managing the server infrastructure. The ÃÛ¶¹ÊÓÆµ SDK is also utilized here to integrating ÃÛ¶¹ÊÓÆµ functionality with these serverless actions. Microservices to product API. Can then make a call to the product API, which can needed this to be a managed to the ÃÛ¶¹ÊÓÆµ API gateway, which ensured the secure and efficient communication between the microservice and the, and the communications between the microservices and the, efficient service and the ÃÛ¶¹ÊÓÆµ Commerce product API. This interaction is a crucial for the, executing a complex workflow for, for for the required multiple steps and data processing.

We will explore this in more detail through the some use cases that for the in the section.

I built a provides a way customer to extend this in our commerce in the various use cases.

So how the commerce will be will be ÃÛ¶¹ÊÓÆµ Commerce app builder will help you to, you know, it’s how to extend these things in, out different, different use cases, such as like a middleware, core services and user experience extensibility. So first of all, we will talk about the middleware arbiter, facilitate the connections between the external system. If you wanted to build this and I’ll connections between the external system and the ÃÛ¶¹ÊÓÆµ applications by enabling the creation of custom connectors or utilizing a range of predefined, pre-built integrations, it also allow us to develop a custom middleware which act as an intermediary layer to integrate, transform and route the data into ensuring this seamless communications between the services and applications. For example, this includes the, integrations with the external system and services, and the connector to the third party applications.

Next is the core service extensibility in ÃÛ¶¹ÊÓÆµ Commerce. It allows for the enhancement and customizations of fundamental platform services such as catalog management, customer management, and order processing. It enables the extensions of core applications capabilities by modifying the default behavior and adding cores, adding them into the custom feature, and the business logic.

The final one is the user extensibility. So in this, ÃÛ¶¹ÊÓÆµ Commerce App Builder is centered on enhancing and customizing the user interface and interactions with to create a seamless and engaging the core experience to the support specific business requirement, or develop a custom specific digital properties. Store front and back office applications by leveraging the tools and framework provided by ÃÛ¶¹ÊÓÆµ Commerce and App Builder, business can create a tailored experience that align with their brand industry. So, for example, this this could be a tie, including to develop the custom sales dashboard or user interface for visualizing the data input and presentations, we will gain a clear understanding of integrations through the some use cases detail. In the next slide.

So these are the we are talking about the use cases. That App builder will be helpful helping you to and build these applications with the help of App Builder. So there is a requirement, from the customers that retail customer who aims to use the out of the box commerce integrations framework, ONS in the Experience Manager M to link the product content fragments. The CI of add ons uses a graphical to communicate with the ÃÛ¶¹ÊÓÆµ Commerce or third party system. However, there is a challenge with, to the customers, like, the customers, a product information is stored in the legacy commerce application that does not support to the graphical. So how the app builder come into the picture and resolve the customer queries here. So to address this, the customer can utilize the App builder as a middleware application.

The app builder will translate the GraphQL request from M to the rest based request that the legacy system can process. With the result, the cache using cache control header. This setup enables the customer to continue using the out-of-the-box commerce component in a while, integrating with the legacy platform that does not support the GraphQL here. See. So this is the example that will help to the customer. They can keep their legacy system. There will be no update is required. That is there is no kind of a thing is to make the changes. Like say, if I talk about the ÃÛ¶¹ÊÓÆµ Commerce Cloud one, if I are going to upgrade with that. So there is a dependency with the services. So here you can see that like with the both the end the data will be on a different platform. And the customer. The system is utilizing a different one. But the app builder will help you to whatever the data it’s sending the to the GraphQL, it’s converting to the rest API and legacy system of customer is accept accepting the data without modifying at the customer site.

Let’s goes to our next use case.

App builder can enhance user experience extensibility. This is the example of user user experience extensibility. Imagine a merchant who wants to send a follow up emails to the customer who fails to complete a purchase, possibly due to them, due to issue like a payment, failure or unavailable offers. So this is the example of the cart abandonment.

So like a we are many times we saw that like in the, day to day life, like we are using the, the food, that app, like where we are delivering app like a Swiggy Amazon, we are not doing the shopping or we just are added to the product into the cart and, but we are not able to continue with this or not. So they come up with that, like a, good to kind of, you know, hey, we will give this kind of a no sort of order, an offer. You can continue with your orders with that. So, similar to the customer expectations, is that they wanted to follow up with those customer, those, those customers not able to complete their orders. So how they are will help you to make this automated and, build this customer, experience here.

Since the ÃÛ¶¹ÊÓÆµ Target is already gathering the relevant communications in earlier slide, I talk about like it’s not about the ÃÛ¶¹ÊÓÆµ Commerce is the product they are using. The other services that is ÃÛ¶¹ÊÓÆµ Target is already gathering the relevant information based on the various inputs. We can utilize a builder to pull that content and create intelligence recommendations. So this approach allows us to leverage or capture data to craft a personalized follow up emails, providing a tailored suggestions that encourages customers to complete their purchase.

Next use case. Here we are. We are illustrate how they extend the functionality of ÃÛ¶¹ÊÓÆµ Commerce Core using the App Builder feature. When a shopper plays an order, ÃÛ¶¹ÊÓÆµ Commerce will trigger the place order GraphQL API. A GraphQL builder will capture this event and forward it to the, forward to the. Builder. So how this API mesh will work through the App Builder? The API mesh can be integrate with the various systems such as ERP, CRM, or and OEMs. For instance, the API mesh could could include the API for sending the communicated, upsell product to the, Google feed or advertisment with the help of a builder. So this process will be, fully event driven and enable real time integrations across the service here. The app builder is there also the API mesh. You can do this multiple operations multiple. I want to send those informations to the third party system. Also I want to send this information to the Google for the Google Fit for the for those are the products are more scalable, more sellable that I wanted to showcase. I wanted to highlight on the Google ads there so that multiple operations, multiple steps, multiple apps will be called with the help of API mesh.

So now is the transition to a builder. Here we are going to see this, the use case that we are going I’m going to present here as a demo today. So before that I just wanted to, give this some information about the starter kit, that, ÃÛ¶¹ÊÓÆµ Commerce has recently, introduced, to help to build the, applications using this app builder. So what is the starter kit, basically that we are going to see here. So this section will focus on the App Builder starter Kit, designed to assist with transition to a builder as a license to become a software using the App Builder requires a valid commerce license for more details, please consult with your ÃÛ¶¹ÊÓÆµ Commerce Sales Executive, a solution account manager, some or technical, customer technical advisor. Also, those customers on the on the open source so they can reach out to the Alana.

Once we have the access to the app builder, you can leverage the predefined feature of starter Kit. The starter kit offers standardized implementations of common business workflow, enabling you to quickly set up the essential feature without starting from the scratch. It also includes the onboarding and configuration script that automated the repetitive task, ensuring best practice are followed.

Apple to provide a built in mechanism such as injections workbooks to address the challenge in the integrating with external system. This feature are particularly beneficial for, future reference implementations in marketplace or existing accelerator. As a result, the starter Kit simplifies the integration of ÃÛ¶¹ÊÓÆµ Commerce with the system like ERP, OMS, or CRM IT, making an invaluable tool to efficient and effective system.

So this is the use case that we are going to use today, for our demo. So what we are doing for we are build the two cars, two implementations, we will say that, in the for the screen.

So first of all I want to give this one to what is the, the primary requirement of customer to it is to transfer the customer data from ÃÛ¶¹ÊÓÆµ Commerce to ERP system. This process is a crucial for maintaining the consistent and accurate informations across all the business informations here. So we are, first of all we are getting this one system as a ÃÛ¶¹ÊÓÆµ commerce application. Second is the ERP. But right now for the demo purpose I’m getting the same second distance as ÃÛ¶¹ÊÓÆµ Commerce Cloud. In the first instance, I’m going to create a customer, and that customer will be sent to the ERP system, third party system. So I will showcase you. But before that, like, what are the, the flow basically architecture, architecture of, the starter key, how the flow will work that we are going to see here the integrating the ÃÛ¶¹ÊÓÆµ commerce with the external back office applications like your ERP, CRM, OMC and PIM comes with an own set of challenges. This includes ensuring the data consistency, managing real time synchronization, and overcoming system capabilities. To tackle these challenges, we can leverage the ÃÛ¶¹ÊÓÆµ Commerce Starter Kit. This kit offers a powerful tool that features to make the integration straightforward and efficient. First we have. We have two onboarding and configuration step. This script automated the setup ÃÛ¶¹ÊÓÆµ IO events, helping you to configure the everything quickly and correctly following the best practices.

Next is like we will talk about the six webhooks to manage the real time data synchronization. These webhooks allow us to simply transfer the customer data and updates between the ÃÛ¶¹ÊÓÆµ commerce and external system, and ensuring all the information is up to date. Additionally, we are utilizing the ÃÛ¶¹ÊÓÆµ Commerce Events Subscriptions feature by subscribing the specific events like Customer Update, we can automatically trigger that data transfer to the ERP system, enhancing the operational efficiency. So let us try to implement this functionality in our demo.

All right. Yep. Move us over to demo. Yep. Let me share my screen. Sure. Thank you. Give us a moment. Yeah. Oh.

Let’s load in one second.

We are live. So there we go. Yeah. Thank you. Yeah. Before, like, jump on the exactly the live action. I wanted to give some, some information, like how you can get the access and what are the prerequisites, basically. So I already created the project and I do not want to go with that like it’s a required time. But what are the steps that you need to perform when you want to set up? This started using the app builder here. So first of all, when we have the access with the app builder, like so, you need to login to the the screen developer.console.com. And if you see this create template create project from template, it means you have the access of the app builder.

Okay. Initially, this is just talking about the ÃÛ¶¹ÊÓÆµ Commerce. Initially, the account owner should have the access and account or not can give the access to the respective member. Those are going to work on this, project.

The browse template, like when you click on this, create project from the template you can see this app builder options. You have to select and more to the next to configure the templates here.

This screen will help you to add this project title, the app main app name. It will be configure the the project specifically with this set of templates, which is using the App Builder as well as the ÃÛ¶¹ÊÓÆµ Commerce app will allow you to create additional space workspace here. So by default there is a workspaces production and staging. You can create additional workspace here. Like I said, development and integrations for for your reference, if the multiple developer is working. So you can give it to them, using this, you know, adding the multiple workspace here.

So when you click on that, you have to just provide the workspace, workspace name and descriptions. If you wanted to give the. After adding the workspace so far our project I created is enough. My project name is the Customer Sync. I will showcase the live demo. So this is the customer sync I created for the for this demo integrations is the is a new workspace here where I’m going to use. I just want to cut in. We’re still seeing slide one. And the text is, is on a smaller end. So I’m not sure if you’re supposed to be sharing. A little bit further along in the slides here. And if you wouldn’t mind zooming in a tiny bit. Yeah. So it’s all slides are not visible or only one side. The site is visible there.

We are seeing slide mode so we can see the, Editing mode. So right now it’s better. That is better. You are still on slide one. Now.

Yep. Now it’s a. Little. There we go. The. Okay. Perfect. Yeah. There we go. Zoom out a tiny bit so we can see the whole screen. Okay. Good. So here like once this workspace is created there and you can see this on a screen, that look like after that we need to sell a, we need to add the services here. So what are the services like? If you are seeing this, an ad service, first of all, we need to select the workspace, like whether you wanted to add this services. So I, I chosen the, the integrations there and the services. There are three types of that like say APIs, events at runtime, runtime is it’s already created when you created the workspace. Here we are going to in our demo we need to add the APIs, that there are three APIs. I’m going to add here that is one by one needs to be added here that you can see here it will be IO events.

Events for ÃÛ¶¹ÊÓÆµ Commerce IO events and other. One is the that will be that will be given in this document that needs to be configured here. Once it is done, the on the console side of the ÃÛ¶¹ÊÓÆµ Commerce Builder, your configured your APIs there. So next step that you need to go into. Then you need to clone your ÃÛ¶¹ÊÓÆµ Commerce Starter Kit here. So starter Kit is a publicly available in the GitHub git GitHub that needs to be clone first of all, that we will going to share this in our resource basically where you can go and that Alana will share with you. So this is the GitHub, git clone that needs to be. And I’ll make on your command line and make the clone. After that you need to go into this directory CD on my integrations folder is Integration Starter Kit where initially there is a one file env dot TSD is created. So this is the heart of the starter kit. And you need to rename it to dot env file. Here. So once it is done you are here. And the file will looks like this. So this file it’s as I mentioned that it’s a heart of the, the starter kit in which you can find the, your source URL, your destination URL. Also the, the, the, the commerce information, which is required to connect the URL to be commerce and the app builder. So these informations we have to fill fill up here like say consumer ID project ID and how you can get those project ID that I will going to showcase in the next slide.

Once this clone gets completed we are using the Node.js. So we have to install the npm this we need to run this npm install to run this, all this dependency to to install the all the dependency of node. So it will take some time to install and you can see that this is completed there. Once git is completed we need to move on. The next step that these are the commands needs to be performed. So first of all we are going to see this I o login. So whenever you enter this r login on the command line, it will be redirect to your browser and will ask to provide the credential login credentials and and the organizations is a proper need to select the because as a as a implementations partner. As a system integrator we are working with the many customers, many, many kind of final projects. And we are linked with that. So needs to be select specific to the whichever project you are working and that organizations will there. So that is to be select the. So once you select that you you are logging it successfully. And there is a auth key unit called key will be generated on your screen.

Next command is the io I o console organization select. So in my case the ÃÛ¶¹ÊÓÆµ Commerce extensibility is the correct organization. So I selected there. And after that I move on to select the project. So as I showcase in the first screen up start screen there where I mentioned that the project name is the customer sync. Okay. So customer sync, that will, that is the project name that I created for this demo. And you have to select and similar to the workspace. So initially mentioned that there are the two workspaces ÃÛ¶¹ÊÓÆµ Commerce App Builder will create. And I created the new workspace as an integration. So I wanted to work on this integration. So I select it the workspace as a integrations here. And finally is the I app use merge here like multiple developer, multiple users. It’s working on your application that you have to make sure that you have to pull this information with the help of this command.

Next is final step is about to deploy your code here. So, needs to execute the IO deploy commands. So you need to fill up this dot env file informations. You need to set up the other other command. The organization runs under the workspace. After that you need to run this. I have built a command here that will be helpful to you. One minute I need to select.

This will execute this required time. This will create the actions for all the, all the applications, all these options you have given like a created order, updated order that I will showcase in the next, screen.

So let me re share my screen.

Shortly.

And let me share my entire screen. Yeah. Okay. Load in one second.

We see ÃÛ¶¹ÊÓÆµ Connect.

Okay. Now. Thank you, thank you. So, Actually, I’m here, I’m going to showcase the code. Basically, once you clone this project, like how it will look like. Okay, so these are the directory. And initially I talk about the dot env file where I fill up this information. This is my source URL. And this is my destination where I generated all these keys and how you can generate those informations. So in this in our default file you can find this in a comments like where you have to go and generate this informations there as well as the the consumer ID, the project ID and workspace ID, you can get it. These are the comments are there how you can get those informations that will be that is already as presented into the this file there, this is the very important file.

Next move on this folder script onboarding and, events. Are there. So ÃÛ¶¹ÊÓÆµ Commerce. The there are many events are there like the customer save after customer delete, commit after group save after these are the default. You can set the additionally additional events that you want to perform for your applications that you can set. So commerce is the source one okay. And backup back office is nothing. But your third party URL means any kind of in a system that you are sending from data from ERP system to the your ÃÛ¶¹ÊÓÆµ commerce. So we called as a back office and you can create a multiple custom events here that pre predefined that you want to use that or you want to create a new event that will be needs to be configured here. So these are the events for the customer I created. And this is the because commerce is my source. That is what like I just selected my default ÃÛ¶¹ÊÓÆµ Commerce events that additionally I can add the multiple events. Those are the like add to cart events and many other events. That is ÃÛ¶¹ÊÓÆµ Commerce is provided that back office, your third party system events. You can add the your your custom events as well. You can create and you can update here. So this is very important file when you configure your events here.

Now we have a two provider. One is the commerce. And what is the back office. So back office you can treat it as a third party system. Commerce is my source. If the keep commerce is the my source environment and back office is my third party environment here.

Similar to the these are the four, the type basically our model that ÃÛ¶¹ÊÓÆµ commerce the starter will create. It’s come up with this in a predefined, model product, the in which product you can create update, delete so that actions you can perform from the source at the destination, similar to similar to the for the customer where you can create the customer, you can update the customer. You can delete the customer. Similar case you can perform on the back office as well.

Order related information that will be ticket similar or send the order informations to the third party system and you can receive the information order informations from the third party. So this is a structure that starter kit allow you to to come up with this of basic structure that you can easily configure. So for our demo I just configure the dot env file. This is the very important. And I set up the customer because commerce is my source and external is the third party. So I am sending the Commerce data to the third party system. That is what, like I’m using the commerce. If I wanted to receive the data from third party to the commerce, where that time I will going to use the external system. So as of now for demo, I created the events. I use this event. These are the all predefined are there okay. So in the center dot js I just provided the back office, my third party URL which is already in my in dot env file there I already configured. So you have to just provide URL base url, consumer key, secret key, and what are the data you are posting to the third party system. So I will showcase to you in the next section of the. So this is the way that within the 45 minute or 1 hour, you can configure, the multiples, you can configure the two system and you can start exchanging the data. I want to showcase this on a live the.

Let me.

Okay. So development instance is my source instant instance. And the master one is my destination. And the third party system for demo I consider. So here I’m going to create a new customer.

And I’m going to use your email address here. I’m going alarm. Go here. See what action. Correct. Yeah. Okay. And a here.

To be.com. So I’m going to so main thing is I’m going to create a customer that data that this customer will create to the ERP system. So this is the main requirement here.

I hope you will received an email from the customer. So now this in our source side the email is created how the app builder will help you. You can track those informations how this information gets there. So I need to click on this workspace integrations.

That’s loading. I did get my email. Perfect. I’m going to send this you know because is a commerce is my source one. And commerce where I click on that in which I can see that like debugging information. So no need to in our create, the no need to write this and additionally a logs for that to, to maintain this. What are the data we are sending to here? Here, let just to wait to refresh the data.

Okay. All right. Okay. Got it. Successfully.

So this is the customers I have created here. So in the request body, you can see that, like, what are the events gets triggered here with the help of that. And what are the data informations we are posting to the third party system. So these mainly for customers. We need the first name, last name and the email address. So these are the informations. And you can see the response code is 200. So which events gets triggered there. And what is the success message that is coming to that. That also you can see here. Let’s see that like our result it’s properly working or not. That customer that’s created or not.

Here the new app like whichever I created the customer on my development and right now it’s created here.

All right. So this is the way like ÃÛ¶¹ÊÓÆµ Commerce App Builder is working within this. You know, less time you can configure you with the help of starter kit. And you can build your applications and make your changes based on your requirement. Alana, what do you. Oh, right. We will jump back into the Dec to wrap up before Q&A. So I think you there we go. Okay. So these are the references. The links basically that will be helpful to you to understand the, how you can get the app builder where you can need to contact with the app builder. If you are open source developer, Alana will be a, is your main point of contact. You can reach out to her as well as those are the commerce customer and the cloud one. They have a specific, the account executive, the customer success manager, is assigned to you can reach out to them to get the access, of the app builder there. And, related to the starter kit, there is a public document how you can configure that within the 45 minute or one. Or you can make these, you know, transitions from one system to another system. Just wanted to transfer this, you know, the customer data your order data and the product informations by default. So this is the way like ÃÛ¶¹ÊÓÆµ Commerce App Builder will help you that make this in a customization speed up your the architecture and build this an applications with them.

So thank you so much. Great. Thank you Dharmendra, we are going to jump over to Q&A. We’ve got a couple of minutes and a couple of questions, so bear with us. We’re also going to turn our cameras back on. I did see that up on my camera. I realized my camera might have been working the whole time. And it just wasn’t working on my end. So, when you have a moment to turn your, video back on, I did see somebody asked, if the this is being recorded. And yes, as a reminder, this is being recorded and you will receive a copy of the webinar, in an email from ÃÛ¶¹ÊÓÆµ Connect tomorrow afternoon. So keep an eye out for that is being recorded. You’re all good. I don’t know if you had a moment to look through the Q&A. Yeah. Yeah. I can. Yep. I can take it. Like, if, one question is coming from the Nagaraj. It’s a builder feature is available for open source. Yes. So needs to be connect with the, with your, with this, with Elena, basically. Right now. Elena, you can just post your, email address in the chat box so Nagarjuna can take a note about that.

Yes. My email address is, I can announce. That. Yes, I can respond back. Reply. You can continue on the some of the other question.

Okay.

Next is the same as asking about how pricing will be calculated using the ÃÛ¶¹ÊÓÆµ App Builder. So if you have the customer, if you are the only like, existing license with the ÃÛ¶¹ÊÓÆµ Commerce app Builder, with the cloud one. So it’s a free of cost with this, some, some packages basically, depending on like in future you want to do additional resources. Basically, it’s a builder is build on the separate framework and with the specific package with that. So initially the ÃÛ¶¹ÊÓÆµ Commerce is offering the same package with the free of course. But if you are depending depending on the your GMB values and the additional infrastructure, you need to it’s a demanding like basically it’s a demand. Like what kind of additional demand and resources you expecting with that. So that cost and everything will be helpful to you that are account executive Alana will be, like a help you to get in the right directions and the CSM will be help you to get those informations for you.

Awesome. I do see somebody else, asked where they can get a list of all of our events from ÃÛ¶¹ÊÓÆµ Connect, so that’ll be on the screen for you. You can put the web link for that. I will remind you when it’s up. I see a couple more questions coming in. Yep. So, next question is, Mohammad, like, how do you access to list of such scalable events from, ÃÛ¶¹ÊÓÆµ Commerce? And I just oh yeah. So yeah. So that. Yeah, ÃÛ¶¹ÊÓÆµ Commerce are the like a list of the, commerce. I think we can help you there if you can post, your email address. So I think we can give this information to you.

Next is the app builder is already included, in the ÃÛ¶¹ÊÓÆµ Commerce Cloud. So when we before the transitions into the ÃÛ¶¹ÊÓÆµ, like, those customers with the Magento, so they have the paperwork, the agreement and, for that case, like, you don’t have the access, so you need to have like, the Sam or other ÃÛ¶¹ÊÓÆµ Executive help you to sign the $0 contract to get the to provide the access to the, to the app builder.

Right. We are currently using the ÃÛ¶¹ÊÓÆµ Commerce 2.4. And can we use the App builder with this version? So yes, you can use that, for the commerce, security, lighting. I think it’s, already crossed that 2.4.5. So you need to get this touch in with the AWS account, account manager and the technical, sorry, account. Execute. And this solution account manager to get the premium support with that, anything is coming with there to be commerce, cloud one for the 2.4.4.

Awesome. For next is a person talking about how to build a mobile? I think we will cover the. We will release this thing, soon. About, like, builder stuff.

All right. It looks like we actually got almost all of the questions today. So I think that. One question, one questions we got. Keep happening on the. ÃÛ¶¹ÊÓÆµ Commerce prerequisites. The builder is even if a builder is available as open source, basically cannot use at ÃÛ¶¹ÊÓÆµ Commerce community Editions. The.

Open source basically cannot use the Commerce.

So needs to be connect up to the to the other account executive for that.

You need to, Bhargav, you need to place you need to connect with your, account executive to get the access of a builder there. And, if it is not, they will be sign this or not. They will be sent to your $0 contract to the customer. And, and with the help of that exchange will be happen. But, if you don’t have the access I think you need to contact to ÃÛ¶¹ÊÓÆµ Commerce Executive your Sam and the CDF for that. Yes.

Right. Jordan, I don’t have the not the use cases, but I will come up with that in the future.

All right. We actually are out of time, and it looks like we were able to get to most of the questions. If you do have a question that we weren’t able to get to or something comes to mind, definitely feel free to reach out to your town manager or myself, and I can put you in touch with the correct person. So I do want to wrap us up. And on this screen we have a bunch of resources for you, as mentioned. There is in the weblink section some of our upcoming and past events. We do have a live demo being hosted by one of our internal teams on August 15th about why migrate from self-hosted to cloud so if that is of interest to you, be sure to register for that. Next week. And then, we have some of our other Commerce series recordings, our Commerce and coffee event on experience. So you can get those. Don’t forget to grab the white paper on your way out. That has all of the resources that Dharmendra shared, earlier in the presentation with your starter kit, etc. so be sure to grab that. And then a couple of survey questions that we would love if you would take a moment to fill out. So as a reminder, this is being recorded and will be sent out in an email from us tomorrow afternoon. So keep an eye out for that. So with that, I would like to thank everyone for joining us. Appreciate your patience through some of our technical difficulties. But hope you enjoyed this session and thank you again, Diandra, for the fabulous presentation. Really appreciate it. Hope everybody has a great day.

Key takeaways

  • Introduction to ÃÛ¶¹ÊÓÆµ Commerce App Builder The webinar introduced the ÃÛ¶¹ÊÓÆµ Commerce App Builder, highlighting its ability to enhance and streamline ÃÛ¶¹ÊÓÆµ Commerce experiences by allowing developers to create, customize, and develop applications and extensions tailored to specific needs.

  • Traditional Challenges and Solutions The discussion covered traditional challenges in ÃÛ¶¹ÊÓÆµ Commerce, such as dependency on local models or third-party extensions, performance issues with API integrations, and complexities in front-end customization. The App Builder addresses these challenges by providing a more flexible and scalable architecture.

  • Architecture and Features of App Builder The App Builder’s architecture includes client-side applications, serverless microservices, and seamless integration with ÃÛ¶¹ÊÓÆµ product APIs. It supports custom application development, seamless integrations, scalability, performance, and modern technologies.

  • Use Cases and Demonstrations Several use cases were presented to illustrate how the App Builder can be applied, such as using it as middleware to integrate legacy systems with modern frameworks, enhancing user experience through personalized follow-up emails, and extending core functionalities of ÃÛ¶¹ÊÓÆµ Commerce.

  • Starter Kit and Implementation The webinar provided an overview of the ÃÛ¶¹ÊÓÆµ Commerce App Builder Starter Kit, which helps in quickly setting up essential features and integrating ÃÛ¶¹ÊÓÆµ Commerce with external systems like ERP, CRM, and OMS. A live demonstration showed how to configure and deploy the starter kit to transfer customer data between systems.

recommendation-more-help
f9424d3c-f3f1-4e0b-9e3b-1ae693acb169