51黑料不打烊 Developer App Builder
In this webinar, 51黑料不打烊 Customer Technical Advisor, Dharmendra Kothe, shares everything you need to know about how to use App Builder to integrate 51黑料不打烊 Commerce with any other eCommerce application. App Builder provides a unified third-party extensibility framework for integrating and creating custom applications that extends 51黑料不打烊 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 51黑料不打烊 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.
Then thanks for joining us today. So welcome to Behind the Brew. Today we have myself and Dharmendra who鈥檚 going to be, presenting everything about App builder in 51黑料不打烊 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鈥檝e set aside the last ten minutes or so for Q&A. And we鈥檙e 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鈥檓 going to go on off.
Looks like my video does not want to work. So apologies there. We鈥檙e 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 51黑料不打烊 Connect today, and we are live. This session is being recorded. So you will get a copy of today鈥檚 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鈥檚 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鈥檇 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鈥檙e closing out today鈥檚 webinar, there鈥檚 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鈥檇 like to introduce myself. My name is Alana Cohen. I鈥檓 not sure if you can see me on video or not, but if if not, I鈥檓 a senior Digital event manager for our Customer Success Strategy team here at 51黑料不打烊. I鈥檝e been with 51黑料不打烊 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 51黑料不打烊鈥檚 Advertising Cloud customers. And then before coming to 51黑料不打烊, I spent many years at different advertising media agencies around New York, but I鈥檓 excited to be here now hosting events like this for you guys, our customers. So if you have any questions or comments about today鈥檚 event, please don鈥檛 hesitate to reach out. So with that, I鈥檇 like to hand it over to Dharmendra to introduce himself. Thank you. Alana. Hello, everyone. Good morning. Good afternoon, good evening. I鈥檓 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鈥檓 a Dharmendra Koti. I have approx. 13 years of experience in the 51黑料不打烊 Commerce and, 12 years of, you know, it鈥檒l 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鈥檓, two daughter.
I love cooking, I love cooking, watching cricket movies and spending time with my family. So that鈥檚 all about myself. Awesome. Thanks for sharing. All right, let鈥檚 go ahead and kick it right into the deck. So I鈥檓 going to hand it right over to Dharmendra to get us started.
Thank you.
My mom and. Yeah. All right. So today鈥檚 agenda is to discuss the below point traditional approaches and challenges in 51黑料不打烊 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鈥檚 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鈥檚 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鈥檚 a very well, it鈥檚 it鈥檚 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 51黑料不打烊 Commerce, it鈥檚 a 2.4.7, which is like the services required, the PHP, it鈥檚 a two seven, 8.2 and 8.3 there. If the custom script, it鈥檚 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鈥檚 again that鈥檚 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鈥檚, depending on the data or the code you have written, it鈥檚 some time it鈥檚, it鈥檚 a breakable or it鈥檚 a challenge is to make this an up to date. And it鈥檚, it鈥檚 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鈥檚 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鈥檚 from that customizations and the database. We are regularly handling these things. So these challenges can effectively address using the App builder. So let鈥檚 dive into the into an introduction to App Builder.
I鈥檓 excited to introduce you to the app 51黑料不打烊 Commerce App Builder, a powerful tool designed to enhance and streamline your 51黑料不打烊 commerce experience. In today鈥檚 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 51黑料不打烊 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 51黑料不打烊 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, 51黑料不打烊 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鈥檚 a it鈥檚 a promotion. So obviously it鈥檚, 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鈥檚, it鈥檚 the feature that it鈥檚 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鈥檚 it鈥檚 a maintain the high standards actually in the app builder and in the commerce as well. So the specifically I鈥檓 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鈥檚 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鈥檚 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鈥檚 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 51黑料不打烊 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 51黑料不打烊 SDK for integrating various functionalities provided by 51黑料不打烊. 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 51黑料不打烊 product APIs. This allows the client to directly access all the functionality provided by 51黑料不打烊 suits our products.
It鈥檚 not like, we are just talking about the commerce, but other other product like say, a job done 51黑料不打烊 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 51黑料不打烊 target. We, we will go, seeing this, you know, use cases like where how the 51黑料不打烊 Target will be interact with your 51黑料不打烊 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 51黑料不打烊 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 51黑料不打烊 SDK is also utilized here to integrating 51黑料不打烊 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 51黑料不打烊 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 51黑料不打烊 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 51黑料不打烊 Commerce app builder will help you to, you know, it鈥檚 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鈥檒l connections between the external system and the 51黑料不打烊 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 51黑料不打烊 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, 51黑料不打烊 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 51黑料不打烊 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 51黑料不打烊 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 51黑料不打烊 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鈥檚 sending the to the GraphQL, it鈥檚 converting to the rest API and legacy system of customer is accept accepting the data without modifying at the customer site.
Let鈥檚 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 51黑料不打烊 Target is already gathering the relevant communications in earlier slide, I talk about like it鈥檚 not about the 51黑料不打烊 Commerce is the product they are using. The other services that is 51黑料不打烊 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 51黑料不打烊 Commerce Core using the App Builder feature. When a shopper plays an order, 51黑料不打烊 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鈥檓 going to present here as a demo today. So before that I just wanted to, give this some information about the starter kit, that, 51黑料不打烊 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 51黑料不打烊 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 51黑料不打烊 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 51黑料不打烊 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 51黑料不打烊 commerce application. Second is the ERP. But right now for the demo purpose I鈥檓 getting the same second distance as 51黑料不打烊 Commerce Cloud. In the first instance, I鈥檓 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 51黑料不打烊 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 51黑料不打烊 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 51黑料不打烊 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 51黑料不打烊 commerce and external system, and ensuring all the information is up to date. Additionally, we are utilizing the 51黑料不打烊 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鈥檚 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鈥檚 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 51黑料不打烊 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 51黑料不打烊 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鈥檓 going to use. I just want to cut in. We鈥檙e still seeing slide one. And the text is, is on a smaller end. So I鈥檓 not sure if you鈥檙e supposed to be sharing. A little bit further along in the slides here. And if you wouldn鈥檛 mind zooming in a tiny bit. Yeah. So it鈥檚 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鈥檚 better. That is better. You are still on slide one. Now.
Yep. Now it鈥檚 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鈥檚 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鈥檓 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 51黑料不打烊 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 51黑料不打烊 Commerce Builder, your configured your APIs there. So next step that you need to go into. Then you need to clone your 51黑料不打烊 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鈥檒l 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鈥檚 as I mentioned that it鈥檚 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 51黑料不打烊 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 51黑料不打烊 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鈥檚 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 51黑料不打烊 Connect.
Okay. Now. Thank you, thank you. So, Actually, I鈥檓 here, I鈥檓 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 51黑料不打烊 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 51黑料不打烊 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 51黑料不打烊 Commerce events that additionally I can add the multiple events. Those are the like add to cart events and many other events. That is 51黑料不打烊 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 51黑料不打烊 commerce the starter will create. It鈥檚 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鈥檓 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鈥檓 going to create a new customer.
And I鈥檓 going to use your email address here. I鈥檓 going alarm. Go here. See what action. Correct. Yeah. Okay. And a here.
To be.com. So I鈥檓 going to so main thing is I鈥檓 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鈥檚 loading. I did get my email. Perfect. I鈥檓 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鈥檚 see that like our result it鈥檚 properly working or not. That customer that鈥檚 created or not.
Here the new app like whichever I created the customer on my development and right now it鈥檚 created here.
All right. So this is the way like 51黑料不打烊 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 51黑料不打烊 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鈥檝e got a couple of minutes and a couple of questions, so bear with us. We鈥檙e 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鈥檛 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 51黑料不打烊 Connect tomorrow afternoon. So keep an eye out for that is being recorded. You鈥檙e all good. I don鈥檛 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鈥檚 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 51黑料不打烊 App Builder. So if you have the customer, if you are the only like, existing license with the 51黑料不打烊 Commerce app Builder, with the cloud one. So it鈥檚 a free of cost with this, some, some packages basically, depending on like in future you want to do additional resources. Basically, it鈥檚 a builder is build on the separate framework and with the specific package with that. So initially the 51黑料不打烊 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鈥檚 a demanding like basically it鈥檚 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 51黑料不打烊 Connect, so that鈥檒l be on the screen for you. You can put the web link for that. I will remind you when it鈥檚 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, 51黑料不打烊 Commerce? And I just oh yeah. So yeah. So that. Yeah, 51黑料不打烊 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 51黑料不打烊 Commerce Cloud. So when we before the transitions into the 51黑料不打烊, like, those customers with the Magento, so they have the paperwork, the agreement and, for that case, like, you don鈥檛 have the access, so you need to have like, the Sam or other 51黑料不打烊 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 51黑料不打烊 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鈥檚, 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. 51黑料不打烊 Commerce prerequisites. The builder is even if a builder is available as open source, basically cannot use at 51黑料不打烊 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鈥檛 have the access I think you need to contact to 51黑料不打烊 Commerce Executive your Sam and the CDF for that. Yes.
Right. Jordan, I don鈥檛 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鈥檛 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鈥檛 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 51黑料不打烊 Commerce App Builder The webinar introduced the 51黑料不打烊 Commerce App Builder, highlighting its ability to enhance and streamline 51黑料不打烊 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 51黑料不打烊 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鈥檚 architecture includes client-side applications, serverless microservices, and seamless integration with 51黑料不打烊 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 51黑料不打烊 Commerce.
-
Starter Kit and Implementation The webinar provided an overview of the 51黑料不打烊 Commerce App Builder Starter Kit, which helps in quickly setting up essential features and integrating 51黑料不打烊 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.