Jamaica. Make a real time feedback into the behavior of your distributed systems and observing changes exceptions errors in real time allows you to not only experiment with confidence, but respond instantly to get things working again. Close hi everyone, thank you so much for watching my session at Conf 42 Javascript 2022 edition. Today I'm going to talk to you about how to create Slack apps with Boltjs. So my name is Alba Rivas, am a developer advocate at Salesforce and here you have my contact details in case that you want to ask me anything later. I need to include this slide because Salesforce is a publicly traded company and it just means that you should make purchasing decisions based on the functionality that is currently available. And with that, let's start by giving a quick introduction about Salesforce. What is Salesforce? Well, Salesforce is a company, of course, but the company has a CRM that helps you manage your relationship with your customers, with your partners and much more. Right? It includes applications for sales, service, marketing, commerce and more. And it's also an app development platform. So it happens that last year Salesforce acquired Slack. I'm sure that some of you are familiar with Slacks is an enterprise messaging platform in which you can strengthen your collaboration within your employees, with your customers, as well with your partners, and anyone involved in your ecosystem, in your company ecosystem. So Slack has a lot of great default features already implemented to strengthen collaboration. But third party vendors or solo developers can create custom applications over Slack to extend that native functionality. There are already great integrations out there. There are integrations for Google Drive, there are integrations for GitHub and many, many more. So today what I'm going to do is to explain to you how to create one of these integrations. Really. We are going to create a custom app and we are going to start by demoing the app. The app that we have created is called ready to fly. Ready to fly allows you to create, approve and reject travel approval requests that are stored in Salesforce right away from slacks on the screen, we can see slack on the left hand side and salesforce on the right hand side. In my case, for simplicity, I used Salesforce as the backend. But you can use any platform or database of your choice. So here on the right hand side I have some travel approval requests. Salesforce is where we store that information and we can see that those travel approval requests have an origin and start and end date. So our app is going to show those travel approval requests on slack. And the first thing that we need to do is to authorize with Salesforce because travel approval requests belong to a user. We need to map the Salesforce user to the slacks user somehow. This is something that is particular to my use case and that you can skip if you are working with a different platform. So now I've authorized correctly. And on the left hand side we can see the travel approval requests that belong to my user that were created by my user, Alba Rivas. So now what we are going to do is to take a look at our second tab in which we can see the travel request to review. It happens that I'm a manager of other users and I can approve or react the travel request that those users have created. Yeah, I successfully approved one of them. Okay, so from my travel request screen I can also create a new travel request. So what I'm going to do is to say that I want to go from Heiway to New Zealand. I am going to pick an arbitrary date, I'm going to indicate the estimated cost and I'm going to pick the approver. The approver is my manager and that approver list is being populated also from Salesforce. Great. So our travel request has been successfully created and I can take a look at it in Salesforce. Now let's try to start an interaction from Salesforce instead of from slacks. We can do that by changing the status of my newly created approval request. So let's imagine for a second that I am the manager and let's approve this request. And yeah, we receive a notification on Slack saying that my travel request has been approved. So with this app we've been able to reduce context switching and improve the productivity of the users that are working with approvals on Slack. Great. So now let's take a look at how Slack apps work behind the scenes. Normally everything starts with the interaction of a user. A user types something on Slack. A user responds to a message, something like that. So normally when you create Slack app, you define which events do you want slacks to publish. And those events are going to represent the interactions that the user does. So for instance, let's imagine that our user has written a message. That means that the Slack servers are going to publish the message. Events follow a JSON format and in an event you can find all the relevant information for that interaction. And the way in which you implement the business logic for your app is by creating a custom client app in which you listen to those events. So normally when you receive an event, you execute some business logic, right? And when our business logic finishes normally, you will want to go back to slack and inform the user somehow. That the business logic finished executing. We do that by using another app, which is the web API through which we can take action on slacks. We can post a message and we can do many more things. So in summary, there are two APIs that you need to interact with when you are working with Slack on your applications. One is the events API, which is subscription based and it's going to fire those events to which your app is subscribed. Some examples are the message event that we saw before, or the reaction added event, or the user join event that is fired when a user joins a Slack channel. And then we have the web API which allows you to take action on Slack. It allows you to post messaging, to add reactions to messaging, and also if you need to query some information you can do it through the web API. Here at the bottom I leave you the URL in which you can find the documentation for those APIs. So if you pay attention to the previous slide, you see that there is an icon on the right hand side block, the one that requests your client app, and that icon represents something called boltjs. Boltjs is a framework that you can use to interact with these two APIs more easily. Boltjs is written in JavaScript, Python and Java right, and it abstracts you from the implementation details of those APIs. It also follows a very intuitive and readable listener pattern that allows you to listen for those events and to respond to them when you need to. And also I have to share that it's maintained by the slack developer relation teams, which means that it always incorporates the latest features. So in our case what we did was to create a node JS application that uses the JavaScript version of the Boltjs framework, and I'm running that app on Heroku. Amazing. So something else to highlight is that when you interact with the web API normally, because you want to update this black application UI, to say to the customer, yeah, your operation was successful, or this is the data that you needed, something like that, right? You can use plain text, but also you can send more advanced surfaces and you create those surfaces using something called blockit. So blockit is a framework to create uis in slack and is a framework in which you can use JSON to define the different slacks that are part of a piece of UI. And there is something great that I love called blockkit builder. This is the URL app slack.com Slash blockkitbuilder that you can use to create your blockit code without having to remember every single block syntax. So for instance here on the left hand side there are different elements that you can drag and drop into this area here and the blocky code on the right hand side is going to be auto generated so you don't have to take care of that. I love these tools. These surfaces that you create with blockkit can be sent to slack through the web API and can be rendered on a mobile for instance, or in a message or also in your application home tab. And this is what we are using exactly in ready to fly. Fantastic. So now let's take a look at the code. This is the code for ready to fly. In this force app folder is where you are going to find all the code for the Salesforce part of the app. But I'm not going to focus on that. I'm going to focus rather on the Nodejs app, which is my purpose for today's talk. So if you want to take a look at that app code is on the app ready to fly folder. This is a regular node app in which the app js file is the entry point and in that app js file you can find the imports from the Slack boltjs module. Those are the classes and modules that we are going to use to start our app. And if you take a look at this specific file, I have a bunch of lines, but this is just because I'm integrating with Salesforce. If you want to use the bold JS framework without Salesforce, then you are going to have just a few lines. Let me highlight some of the lines that are relevant to you. So first of all, here we are initializing the app and this is something I imported from Boltjs. Next we are registering some listeners and then we start the app by running boldapp. Start in a port of your choice. So this is basically how the entry point for the application is written. Now you can see here that I have a group of folders. This is because I'm following a structure that was recommended by the slack developing relations team. It's an opinionated structure in which our code is divided into different folders depending on what it is used for. So for instance, we have the listeners folder in which I have the definition of all the listeners for the different interactions that the user may perform on the Slack app. I also have a user interface folder in which I have the definition of those surfaces that I'm posting to slack. Remember I do that thanks to blockkit. And well, I have other folders that are more specific to the interaction that we do with Salesforce. So let's take a look at one of the listeners. For instance, this app home open listener is the code that will execute when the user opens the home page of our app. Remember that when I'm on that home page, what happens is that my application brings my travel approval request from Salesforce, right? And this is exactly the logic that executes. So let's take a look at this callback, the code that executes when the user opens the homepage. And here what happens is that we are doing an authorization with Salesforce using some special code for that, and then we are querying for our travel request. As I told you, this is the way in which we query Salesforce, but you could do exactly the same with a postgres or any other kind of database. So once that we have queried those travel approval requests from Salesforce, we need to format them into a format that's understood by slacks. And that format is blockit. The way in which I first created that blockit code was mocking it through that blockkit builder web page that I referenced before. But once you do that, you have two options. You can hard code the blockkit code here directly, or if you are using nodejs, there is a very nice open source library called Slack block builder which is maintained by the slacks community with which you can create that blockkit code like in a more robust way using something similar to the Swift UI syntax. So once you have that created, look that here we convert to JSON because this is the format that we are really expecting to send to slacks. Then once we have done that, what we do is to use the web API to send that JSOn to slack and post it into the app homepage by using the web API. Remember, we use first the events API to listen to the app home opened event. And finally we respond updating that homepage UI by using the web API. And of course we only refresh the screen for the relevant slack user, the one that made the event fire. All the code for this app is available at this URL. Here on the readme you will find instructions on how to set it up. So I recommend you to go there, clone the app and try it out yourself. If you want to take a look at more apps, more sample code, you can go to this official Slack samples URL. And finally, I wanted to highlight that today everything that I shared was regarding the currently generally available platform and way of creating slack apps. But there is something else that Slack have been working on, which is like a new version, a new generation of the Slacks development platform. They have done that in collaboration with Dino. And if you want to take a look at that new Slack development platform which is currently in beta. You can do that at app slack.com slash future. Finally, I want to share some resources. I didn't build this app myself, I did it with some colleagues and they live streamed some avoiding of the app. So if you are the kind of person who likes live streaming, I recommend you to take a look at those chapters here on the first resource. Also, I created a series of blog posts explaining all the details of the app. That is what you can find on the second resource. And finally, we have a project on trailhead. Trailhead is our learning platform, is a gamified platform in which you have tutorials to learn everything about Salesforce development and also now Slack development. So I recommend you to go there and check it out. Finally, if you want to connect with Salesforce developers, you can do that in our website. You can follow us on Twitter and also Facebook, LinkedIn and YouTube. It. Thank you very much for watching my session and I hope that you enjoyed.