Automating Content Workflows with App Builder

Transcript

Thank you so much for joining us for this App Builder session. We’re going to talk about App Builder and what it can do for you. I’m going to give you a little bit of an overview. And then Mark has a demo where he kind of expands on a little bit of what we showed this morning in the keynote, and goes through some examples and actually shows you how the product works. So that will be good. Let me get my slides going here. That is great. It worked. I wasn’t exactly sure that was going to work as well as it did. So fantastic. Actually, this is not a deep dive on use cases. But let’s see, make sure I’ve got the right deck loaded up here. Slides. Yeah, that’s it. OK. So enterprises are challenged to deliver on the customer experience agenda. So when you’re building an experience, as you’ve seen this today, extensibility and being able to tie together multiple systems to help you to create that experience is critical. I’m just going to throw this eye chart up here. I hope that doesn’t freak anybody out. But this is just showing the massive amount of MarTech solutions that are in the market today that you could potentially be using. And that’s actually a really painful slide. So I just have to go away from it. But integration is really key to make sure that content and data are connecting to those customer touchpoints. When you have experiences that you’re building that require potentially data brought in from other systems, maybe from even outside the Adobe ecosystem or within the Adobe ecosystem. Either way, some of the pathways within the Adobe ecosystem are not fully fleshed out in terms of potentially what you might want to do. So this is where App Builder can come in and provide that kind of glue into there. So when I think about extending Adobe Experience Cloud, I think about three paths. And there’s actually more than three, but we’re going to cover just the three today. So we’ve got out of the box connectors that come with the product, right? So this is a screenshot of Adobe Experience Cloud. On Cloud service, you get a number of things out of the box that you can connect with. We have Adobe Exchange, if you wanted to connect with something or find some integration, maybe from a third party vendor, an independent software vendor, Adobe Exchange is your place to do that. And if none of those things are what you’re looking for, if you’re looking to do something bespoke, or something in maybe a different way than the way that other folks are offering it, you have the opportunity to use App Builder to build either a custom integration or a full-fledged single page application that can be accessed from the Adobe, sorry, Experience Cloud homepage. And we’ll show you what that looks like in a second. So I mentioned this morning, App Builder is a developer framework for extending Adobe solutions, right? So you have all the tools that you need to create a project within the Adobe Developer Console. And if you are a developer of pretty much any Adobe product, you’re probably already familiar with the Developer Console. We have our own CLI, where that’s where you would configure the project, create the essentially define what template you’re going to use, and then you would fire up your favorite code editor, VS code, for instance, and pour that content in. And then you would publish that application either as a microservice, so a headless application that has no front end UI or a full-fledged single page application. App Builder is multifunctional. I like to think of it as a Swiss Army knife. It can do any kind of transformation of content and data. So if you have JSON, you want XML, if you have XML and you want JSON, if you have one content format, you want another image format or whatnot, App Builder will absolutely do that. It is fully integrated with the Adobe ecosystem, so it allows you to get up and running quickly and serverless, right? So you don’t have to worry about servers spinning up your own infrastructure. So let me break down a little bit around components and what you get out of the box in terms of kind of the big buckets of functionality, if you will. So we offer React-based, sorry, Spectrum UI framework, which is the exact same framework that Adobe uses to build our solutions. So your whatever, I guess, application that you’re building, and I’ll show some examples before we get to Mark’s video as well, where it will look, you know, very at home and similar to your users. Maybe you’ve got a marketing team that wants a custom application that does some integration with the third-party tool that you’re using. And then you want to bring it in kind of closer into the workstream and workflows that you’re used to with the Adobe Experience Cloud. As I mentioned, CLI and SDKs, runtime, that serverless compute framework, and then custom events is really powerful and super interesting. So events, you get out of the box in terms of, you know, AEM comes with events out of the box. You can, you know, figure out or you can get an event when somebody checks in an asset, changes an asset, or, you know, does a build in Cloud Manager, that kind of thing. That comes with your product, your investment in those Adobe products. But a custom event allows you whatever integration that you’re building, you can create an event producer. So similar to those products that are emitting events, you can emit events back to those other solutions or a third-party tool that allow you to send messages, right? So it really offers the ability to create much more mature and complex solutions having custom events. And then a range of services around storage, etc. So when we were building App Builder, we thought about, you know, what are the types of things that we believe in that we want to empower developers to really make their lives easier? So simplicity was probably first on our list. We wanted to make it easy for folks to get in, create something, and push it live, and, you know, test and iterate very quickly. So rapid development was key. Familiar and Adobe-flavored. Developers have tools that they like, and we didn’t want to come in with, hey, you have to use our version of this tool. So by all means, we built it on Node, GitHub, VS Code, React, and we’ve integrated it with our Adobe services, right? So if you’re already familiar with front-end development and you’re used to using Node, GitHub, etc., then you will be right at home with the tools that we’re providing. But if you don’t like the tools that we’ve provided, you are more than welcome. And, you know, we understand one size isn’t going to fit all. So the batteries are included, but they’re removable. So if you don’t like the way we’re doing CI-CD, you can do CI-CD differently. There’s no restrictions on you adapting the framework that we have into your workflow. Easy to change up, if you will. Cloud Native and ZeroOps, again, it’s that there’s no infrastructure. You don’t have to worry about the infrastructure. That’s all on us. So scales to zero when it’s not being used. So, yeah. Open source developer first, if you’d like to contribute anything, if there’s something where you’re like, yeah, you know, I wish it did this, you are more than welcome to contribute to the projects that we have built this on top of. And I guess last thing, designed to work across Experience Cloud. We didn’t want this to be something where you just worked with Experience Manager or just works with, you know, another product. It is universal across, works with AJO, works with Campaign, Target, Commerce, obviously, and, yeah, Experience Platform solutions. So what can you build? You’ve heard me kind of mention this before, but I’ll just highlight single page applications. And microservices are really the two things. And one of them, the development process, you’ll see it’s very similar between the two. One essentially is going to have a UI, and you’re going to push that UI into the CDN, and then the other one is not, or you’re not going to have a UI that you’re going to actually access. So a little bit about runtime. If you are familiar with any other serverless framework from other vendors, it is very similar, except for the fact that, again, it is integrated with Adobe’s ecosystem, so that we believe it is easier for you to do whatever it is that you want to do to make your application or integration. And as I mentioned, events, earlier, when I was talking about custom events, building event-driven applications is really what it’s all about, right? You normally, when you’re building an integration, you’re waiting for some activity, and then you’re taking action based on that event being triggered, and then you’re doing some action and then sending the output or whatever to some system. So event-driven applications really at the core of, I guess it’s that trilogy, right? So events, APIs, and actions. This is a list of what events exist today. We actually just, I had a session in App Builder Live, which is a livestream that I do. I had a session, I think, last month on eventing inside of AEM. So events today with AEM sites, anyways, are still, they’re not cloud native yet. We just released the first batch of cloud native events for AEM sites. So if you’re interested in that, maybe while playing the video, I’ll put the link into the chat. But anyways, so this is all the events that you could be connecting to. And then the App Builder CLI, super easy. You can install this yourself on the command line, internal, not command line, terminal, npm install at Adobe forward slash AO dash CLI, and that will get you the latest version. And I think we support node 14 through 16 at the moment. So as I mentioned, if you’ve got an application that has a front end, you would access it through the App Builder catalog, which you’ll find in your, what is it, your experience cloud homepage. And then when you click on that, you’ll have all of the applications that have been, I guess, submitted or published really, to that organization, right? The security and the, I guess, authorization and authentication model is around experience cloud. So if your users log into experience cloud, and they’re working in that IMS org, and all of your other products are there, all the other solutions, then your App Builder catalog can be, you know, right next to all those other solutions, if you’re building an application for some sort of a marketing workflow. Real quickly, let me let’s, I’ll dive into a little bit of the application architecture. So single page application, again, web client, CDN included, if you have a front end, if you don’t, then the back end is all microservices and orchestration on node JS, our serverless runtime infrastructure. And then that ties into public API’s, sorry, Adobe public API’s, third party API’s, data storage, file storage, and custom events are those services that you get out of the box. Jamstack, not for breakfast anymore, JavaScript API’s and markup. So essentially, client writing and essentially communicating with CDN and those services that I mentioned. So let me jump into a little bit of use cases. Before we dive into the video that Mark put together, which I’m gonna have to figure out how to play, but I’m sure it’ll be fine. Okay, so when we think about like, what are the types of things that App Builder can solve, and you saw a number of those if you saw the keynote, if you didn’t, middle, just to kind of bucket these out, middleware extensibility, where connecting systems between, and I’ve mentioned this a number of times between Adobe solutions and third party tools, core services extensibility, so workflow customization and extensions, and then user experience extensibility, I think we saw, and we will see shortly, some solutions around where you can use UI extensibility inside of like the new surfaces, the new authoring surfaces that Adobe Experience Manager provides, like the content fragment editor, and the admin tool as well as coming soon. I don’t think it’s available yet. But it is working on it, universal editor. So being able to modify those to whatever your team has the need for adding buttons and such. So here’s an example of how Adobe is using this technology ourselves. We use App Builder and UX extensibility framework to bring custom logic into Adobe Experience Manager to speed up authoring flows. So this, the nice thing was that it didn’t require a lot of downtime. In terms of the way I guess I didn’t mention this earlier, we think of like, App Builder is being out of process extensibility, as opposed to in process extensibility. So in process extensibility, you’re probably very familiar if you are a long term AEM developer, who maybe started with AEM on prem, and you’re used to going into Java, and opening up the application and customizing it to you know what your company or team needed. With the cloud service version of AEM, App Builder allows this out of process extensibility, which allows you to create these hooks into into the product without impacting the development lifecycle of AEM itself, right? So you’re not impacting your AEM development lifecycle. And the App Builder piece can go on without, yeah, without any problem. So super, super useful. So here was, this was actually the the Adobe.com story, they want to efficiently publish content fragments and their language copies. And that it required initiating the publishing workflow several times. So what you know, it’s one of those cases where the product had the capability, but it just didn’t meet the needs of the team that was using it. So this allowed them to create a button, a custom button on the in the UI, that when it’s pressed, opens up a dialog box and allows that team to do work the way that they’re most efficient at it. Another example for a use case is around providing notifications, or I guess it’s like streamlined data between multiple systems, right? So they wanted to integrate campaign and AEM with a third party notification system and ESP service to send room ready emails. So you’ve got this room notification, system ties into App Builder, and then App Builder then pushes that information out to a campaign, which pulls templates out of Experience Manager to take that data of, you know, the the information of what, what room is ready and who the customer is, ties it together with that template sends it off to another micro service that makes it readable for the mail service and then sends it out. Okay, I mentioned this this morning, but I’m I’ll mention it again. And wait, give me one second. Okay, I was getting a little scraggly there. App Builders now included out of the box. And when we have a trial program, so if you are not an AEM cloud service sites customer, then you could try the the trial if you want to check it out. But if you are a AEM cloud service sites customer, you are entitled to one free unit of App Builder. And the one unit that you can use is the one that you can use to create a And the one unit gives you all of those elements down below, right? So six million gigabyte seconds a year. And then you can use the one unit that you can use to create a cloud service site. So if you are a cloud service site customer, you can use the one unit that you can use to create a cloud service site. So if you are a cloud service site customer, you can use the one unit that you can use to create a cloud service site. So if you are a cloud service site customer, you can use the one unit that you can use to create a cloud service site. So if you are a cloud service site customer, you can use the one unit that you can use to create a cloud service site. So if you are a cloud service site customer, you can use the one unit that you can use to create a cloud service site. So if you are a cloud service site customer, you can use the one unit that you can use to create a cloud service site. So if you are a cloud service site customer, you can use the one unit that you can use to create a cloud service site customer. So the next thing that I want to talk about is with AEM assets. And AEM assets has the ability to create custom workers. If you want custom renditions, maybe you have some special way that you want to process images that isn’t out of the box. You can use App Builder for that. So that one free unit probably would cover off any UI extensibility stuff that you would want to do and then you’d have plenty of, hopefully plenty of resources to use. So there’s plenty of space left over to do something around AEM assets, custom workflows. Okay, let me jump into trying to present. So this example here where I make some simple changes to a content fragment, I’m going to add some exclamation marks and hit save. In the background, we’re firing an event that happens every time a content fragment is modified. And if I bring up Slack here, you’ll see that we’ve actually just brought in that content fragment and notified someone in a Slack channel. So the way this is built is if I hop into the developer console, and I’m going to go to the developer console, and I’m going to go to the developer console, and I’m going to go to the developer console, and I’m going to go to the developer console, and I’m going to go to the developer console, and I’m going to go to the developer console, and I’m going to go to the developer console, and I’m going to go to the developer console, and I’m going to go to the developer console, and I’m going to go to the developer console, and I’m going to go to the developer console, and I’m going to go to the developer console, and I’m going to go to the developer console, and I’m going to go to the developer console, and I’m going to go to the developer console, and I’m going to go to the developer console, and I’m going to go to the developer console, and then I can either call an external web hook if you’ve built something somewhere else, or this is where I’ve got the action that you saw me build in JavaScript that I’m firing there. So you can build these and deploy them and get them up and running in an afternoon very quickly to start optimizing and speeding up these workflows. So that’s one quick example. Now if I go back to Slack for a second, you remember that I’ve got a little preview link here, and this is another example of showing how we can preview content and give the content authors a great look at how these different experiences look in different layouts, etc., with different languages and so on. So again, the way this is built, this is using App Builder. In fact, if you go into Experience Cloud right on the home screen, you can go and put in links to App Builder content, which you can see here, and so now you can actually put custom apps deployed into where everyone else can see them. And here’s my content fragment preview here, and you can build all types of things in here. But again, if I go back to the IDE and switch to this project, the whole idea is that this is a React application using the spectrum UI. And all I’m really doing here is going out and pulling in the content fragment details from the AEM API, and then passing them through to different snippets of code that represent each of the different banners. So nothing really clever about this apart from matching up the design so the content authors can see that quite quickly. So they’re just two examples of how you might want to wire things up. But I want to start from a brand new project and just show you how quickly we can get something up and running. So if I go back into projects here, you’ll notice I created one called Dev Live. It takes like two clicks to go and create that, and I get a stage and a prod environment. And in here, I can go ahead and select what other services etc. I want to start working with. But back in my IDE, once I create a folder as I’ve done, I can just simply say, AIO app create and start to bootstrap this application. You’ll see that immediately it would have authenticated for the first time. I’ve already done that. It’s asking me which organization. It’s then asking me which of those projects that I have to find I want to deploy against. So you’ll see the Dev Live project come up. So I’ll select that. And then now I can start to choose the templates. Now, to point out what templates are is like fast tracking the application creation process. And there are various extensions that you can put your code into the Adobe product without recompiling the product, you’re able to extend it and run out of process. So in this case, what I want to do is I’ll just kick this off and then I’ll switch over and show you what I want to build is I’m going to go down and select the admin console. And I want to extend that. So I’m using the extensibility template. There is templates for the content fragment editor. There’s new ones coming out for the universal editor. The content fragment preview app I showed was going right into the experience cloud home. So you’ve got a lot of options as far as what you want to deploy. And what you can see here is it’s actually bootstrapping the application. Now, while it’s happening in the background, let’s actually switch over here and have a look at the content fragment editor. Now, maybe up from an extension perspective, if I select some of these content fragments, you’ll see that there’s various options to manage tags and publish, etc. But I might want to do something else. I might want to start a workflow. I might want to send this for approval. I might want to call some other services that rely on this. So, again, rather than you trying to work out how to decompile and add to this or extend it in a way, we’ve done that work for you. So I’m going to add a button in here that can call a modal to start that conversation. And I have a choice in this case between something that’s on an action when I select something or just in the header up here so I can generally link to it. So let’s go back to our IDE and you can see it’s got two points where it’s saying, what do you want to name your application or your extension? I’m not feeling creative today. So let me just call it DevLive. Give it a short description. It’s a demo version. And now this is the important thing. So add a custom button to the action bar. Yes, we want to do that. We’ll call it Mark’s action. I told you I’m not feeling creative today. That’s looking good. Let’s show a modal when you click on that and then let’s add one to the header bar as well. And let’s just call this Mark’s header. There we go. And yeah, let’s show a modal for that as well. All right. We can add a server side handle if we want. We want to call something like the Slack process you saw before. But let’s leave it like that and say I’m done. So what it’s doing now, it’s actually describing the within here. It’s starting to put in things like the configuration, the extensions of what is extended where. So here is the action bar buttons. So if I want to come back and change that later on, I can. But that is deploying. Sorry, that is bootstrapping. Now we’ll give this a second and then we’ll show you how we can run it. The nice thing is you can run and test and change the application while it’s running side by side with your production environment. So you don’t have to spin off a separate environment. It’s like an overlay. So now that it’s good to go, let me actually go and deploy this. So AIO app run and we’ll actually get that deployed so you can see it’s saying here I can run on the local host or experience. Adobe.com. Great if you want to deploy within the shell if you need to test out like authentication pass through etc. But I’m just going to click on this link and you’ll see that it’ll load up and it’s saying it needs to be within an iframe. So because this is an extension, if we go back to this preview here, remember I want to have these buttons show up here. Now the one thing I’ve done if you look closely in the URL is I’ve put in dev mode is true and the extension point is my local environment. So if I refresh this screen, now it’s drawing on my local test harness and I’ve got that header button here which has got the modal. And then if I select something, we’ll get the marks action. And again, I get the modal there. So now I’m good to go to start with my code. So there you have it. This is how easy you can start to get to a point where you can insert all your creativity as far as how you want to extend the workflows by using the extensibility framework that App Builder provides sitting on top of Adobe Experience Manager. All right. Thank you very much for that. I’m going to throw you up on stage, Mark. Do you want me to? There you go. Sure. So we don’t have any time because we’re a little bit over, but I just wanted to say thank you, Mark, for putting that together. And yeah. I’ll just one thing I’ll point out is all the code, all the examples are up on GitHub. So and I’ll drop that into the chat. So if you want to steal or contribute your choice, feel free. All right. Thank you very much. Now on to the next session.