How to use the Bubble API Connector – ratio.dev

In this video, I want to show you how to integrate your bubble application with external APIs using the bubble API connector. I want to welcome you to the most magical place in the bubble builder. And it is just incredibly useful for all bubble developers.

So why is this API connector, this little line over here in your bubble builder, in the plugin section, so amazing? It's because it opens the door to allowing your bubble application, which has its core functionality, which has all its workflows, everything you're building for your users, and you can open the door to bringing in data and taking actions from other applications and into other applications. So basically, you become a good player in your ecosphere. And this is really powerful. So you want to update your CRM. You can do it. Do you want to get the latest stock price of Apple? It's done. Maybe you want to launch some sophisticated AI robot that goes out on the Internet and does a whole bunch of work for you. This is where it's going to happen. So bubble is just freakingly good at connecting with other applications, but you do need to learn how to make all this happen. And for me, the bubble API connector is just a remarkable place and it's just one of the most fun places to be inside your bubble application. So it's the API connector. And.

Because powerful integrations take your application to the next level, they offer your users something that goes beyond that core functionality that you've built for them. In truth, they set your application apart from the rest. This is a real business survival skill. This is something that ups your game. So let's jump in and see how it all works. The process is going to be that we're going to need to create a new API. Then we're going to need to create a new call to a specific function of that API. We're going to initialize that call so that it Bubble actually does the first transaction and makes sure that it understands everything it gets back. And then you can just take off and use this in your application as often as you want. So here we are in the API connector of the bubble builder and I've got a bunch of these created. I'm just going to jump into one. For example, at Yahoo Finance, this is going to be able to get stock prices or market information from the stock markets. And so I'm going to expand this out so you can see. And all of these are created in the same structure. You create a common.

Section for the entire API, any of the function calls that you're going to make, and then you make a Specific call for each function that you want to interact with. So sometimes it's just one, and sometimes it's a bunch of them. Here we are. Here's where you're going to set up some header information. We'll talk a little bit about that. I'm not supposed to show you my API keys there, but this is where the information goes that is common to all of the API calls. And then here we have one that is going to use Market News. And I'm going to expand this out and we can see the actual details of what this API call does. First, we create the API. And in this case, I've given it some authentication parameters up here at the top. And then I come in and I'm going to say, okay, I'm going to create a name. I've got to give it a name. So this is. I've called it Market News. I can either use each API call as a data call or as an action. Okay, so the difference here is in when you use it as a data call, that means you can incorporate it into a dynamic formula in your bubble application. So you can say that this element on your page, this is its data source, and you can use this as a data source for any group or any element on your page. An action is when you want to be able to call this from inside a step of one of your workflows. So that's what you. And you can use the same API call for both. You just need to create two separate calls. So you would have Market News Data and Market News Action. If you want, I'm going to tell it the type of information that I'm sending into this, into this API call. In this case, it's a JSON, which is a structure. It's a way of putting together data so that it meets a format that the API is looking for. Then you're always going to need a URL. So that URL is where I'm going to call this API call. So in this case, I'm calling Yahoo Finance and I'm calling down here, it's called News. And I've stuck in here the first parameter. I put in a parameter in the URL, which I put into square brackets, and that means that I give it a name. I called it Ticker. So this is the market symbol. And so what I can do is now pass a variable into this API call. And for my bubble application, I could take any ticker symbol, put it in there, and it will give me back the response. It's a very simple Example of a very simple get API call. Gets are basically just calling a web page. This is the most entry level part here. But Bubble can do much more. It can also do posts, it can do puts, it can do patches, it can do deletes. It can be pretty complex. But the normal ones you're going to use are get and post. And we're going to. This one is a get. And so once I've done that, all I need to do is click initialize the call and what it's going to do in this case is it's going to call this API and boom, it's called and it's brought back the information for me. So now I can see all of what I'm getting back from this API call. So I'm getting the ticker back, I'm getting A. The time the status is showing me that it was at 200, which means it worked fine. And then I've got a list of information in here which are descriptions and links of news related to Apple. And so I just saved this and now I can use this data call anywhere in my Bubble application. This is a very simple get where I'm just pulling in some information and I want to be able to use it in my Bubble application. Let's look at a different one which is maybe a bit more complex, where we're actually going to try and do something in an external application. In this case, I'm going to call Dyna Pictures. I have my API key up in here. I have some common headers, which is just a way of telling Bubble that these are the parameters that I want you to put into the header section of every API call that I make in this API. And then I'm going to come down here and I've got some templates that I've used. I'm going to expand one of these. And you can see now I'm doing this as an action because I want this to occur in a workflow. So I'm going to be able to call this from a Bubble workflow. I've given it a name, says A and I'm calling this URL with a post type. And that means that I'm going to send this JSON to Dyna Pictures. It's going to do whatever it needs to do and it's going to give me back a response. But in this case I'm going to be able to pass it more information. And here we're going to see this structure. It starts here, it has, and all jsons are pretty similar they have curly brackets and they have some square brackets, if it's a list. And then you have, you know, they're, they're key pairs. So they. You have the name format and jpeg, and these are in quotes because they're strings. And if it was a number, then it would be without quotes. And yes, there's some formatting stuff here that you're going to have to get just right before it works. But it's mostly just trial and error and make sure that you'll get back errors saying it's not a valid response or the body wasn't valid. And you have to look until you figure out exactly that syntax that where you might have made a mistake. But anyway, here I'm going to pass it. You can see that for some of these, I've put in inside these special less than and greater than brackets, variables that I'm including into my JSON. So these are the variables that I can use in my bubble application so that when I send off this API request, I'm able to personalize exactly what I want Dyna Pictures to do and what data I want to give it. And these, once you put them into the JSON in this format with these little brackets, they will appear down. The parameters will appear down here. So now you can put in. This is just dummy text I'm going to use to initialize the call, but I can change it here. If you don't want the actual parameter to be changeable in the API, when you call it from the bubble workflow, you just always want it to be the same. Then you would click it off as private. If it's okay to send it in blank, then you can mark it as Allow blank. And then once you do this again, you're just going to. You're going to call, initialize the API call, and it's going to give you back some response. The response in this case, it's a bit different. It gave me a job ID and it gave me the URL for the image that it created and I just saved that. Now. Some things I do want you to know about and be careful with, one are your header parameters. So you'll have to look at the documentation for the API that you're using. It'll usually tell you, or there'll be examples so you can make sure that you have the right header parameters. Authorization headaches okay, so this is where it gets a little bit technical, a little bit tricky. Every API can have its own sort of way of authorizing your. These API calls. It's a security mechanism and there could be different ways of doing it. A lot of times it's just going to be using a token that you're going to create in the application that you're connecting with, and then you're going to use that to in the header of that specific call, or of the entire or in the header of the whole API. Okay, Setting up your dynamic parameters Be careful with page breaks inside your jsons when you're creating them in your bubble application. That can cause havoc on it. So just try to not have any page breaks in there will make your life easier. Like I mentioned earlier, it can be tricky to get your jsons perfectly formatted correctly. Be a bit patient. Don't think that there's always going to happen in five minutes, although sometimes it will. But this is Once you've overcome this learning curve, you have opened the door. You can make your bubble application do incredible things. So do you really want to give your application superpowers? If so, feel free. Reach out to us@ratio.dev we're more than happy to help you out and get you over at that hump that hurdle, or to help you troubleshoot some API problem that you're having in your application. And thanks a million for watching this video and I hope to see you in the next one.