No Code Video Conferencing App with WHEREBY - Part 2

Introduction to Whereby API and Bubble Integration

Welcome back to part two of our miniseries where we are taking a deep dive into using the Whereby embedded API with Bubble to create a no-code video conferencing app and we're probably going to end up having created this whole app in less than an hour. So sit tight let's dive into part two where we are going to be getting into using the Whereby API and how we connect that with Bubble because that's how we'll have our Bubble users creating a new meeting, getting the details back of that meeting and embedding that meeting into our Bubble app.

Setting Up Whereby API Access

Once you've signed up for the Whereby embedded API access you can do so through their website you'll be greeted at a screen that looks like this and you'll also want to open up the API documentation as that will be the other screen that I'm referring to because we've got to find that way of having our Bubble app communicate with the Whereby API.

Adding the API Connector Plugin

So let's go right back into our Bubble app and we've got this very simple layout for displaying and creating meetings and now go into plugins and add a new plugin and I go for the API connector which is by Bubble and the API connector as you can see it's almost got a million apps using it. The API connector is immensely powerful because it will allow you to in most cases connect your Bubble app to any web service out there with some limitations but you can do so many things with it. You can web scrape, you can, well you just got to go check out our other videos for all the things that you can do with the API connector.

Creating the Whereby API Connection

So let's add in an API and this is going to be called Whereby embedded and now if I go to the Whereby API documentation I want to read about how I authenticate. So it says that I have to use the API key and bearer so I need an API key. If I go into my Whereby account I believe that this is under configuration API key generate an API key. Now API keys you want to keep these secure I will be deleting this one as soon as I've recorded these videos because this is like a password to your account. If someone were to get hold of this key they could effectively, they're using your account as if they're you, if you are paying for something they've got access to that thing you paid for so you'll want to limit that.

Setting Up Authentication

Let's just name this PNC test and click save and then copy it, close, go back into Bubble and I think I need to authenticate it like this. So we have authorization bearer, I'll do it lowercase just in case that's important and then I paste in the API key. Now we're going to find out in a minute or so whether that works if it doesn't I'll work out live on this video.

Creating API Calls

Right we now have a number of API calls that we can make and in fact they're all listed down here so we can do things with recordings, we can get insights on rooms but we want to do the most basic thing first which is we want to create a meeting. So I'm going to copy this end point here and paste it. Now it's a post type of request because if I go back to documentation you can see it says post there generally if you're creating something or you're passing data it's post and then we can see that the body needs to look like this.

Configuring the API Request

Now there are some fields here that are required and some fields that are not you can dive into that by going into schema and then object and it's going to tell you which ones are required and actually the only one that is required is the end date so I'm going to keep it really simple copy this, go into Bubble and paste all of that code here. Now yes this is a no code video I'm going to make sure that everything is explained but technically this is JSON if you want to know what type of code is it's JSON and I only want to keep the end date so I'm actually going to delete everything in here.

Setting Up Dynamic End Date

So I've deleted there's no comma after it and I've made sure that the curly brackets, curly braces are in place and then the end date I want to make this dynamic because I want to be able to insert data into it depending on when the user creates it. For example if a user creates a meeting I can set an end date to be an hour after the start of that meeting. Now looking at, I've only just learned this but looking at the documentation here, start date is depreciated meaning that it's no longer a valid or recognized value. Basically when you create a meeting your meeting will be accessible from the moment you create it to the end date but you have to supply an end date.

Testing the API Call

So let's go back in here and I'm going to copy this end date here to my clipboard and I'm going to put in triangle brackets end date and close triangle brackets and I'm using triangle brackets because Bubble guides me here that if I want to insert dynamic data into the code I use triangle brackets. I'm then going to paste it in there because I still want to run this test so that is actually depending on the time zone in the future. Basically it's today's date so I want to make sure that I've got something workable so I'm going to say tomorrow and then let's initialize the call and initializing the call is our way of testing everything that I've built so far. So we'll either get an error or we'll get a success message with some data about the meeting. So let's try it.

Troubleshooting API Authentication

Okay authorization required. Okay I've had to do a little bit of digging around and I've worked out what I had done wrong which is that it should be private key in header authorization and bearer does need to be capitalized. There we go very easy mistake to make. So let me show you how that works now. So everything should now authenticate and I'm going to initialize the call and there we go we get a success message back and we get data about the room such as the room name and the room URL and meeting id end time start time.

Configuring the API Call for Workflow Use

Okay this is also teaching Bubble what data is returned so I'm actually going to correct this and say that this is a date and the rest is text fine. Click save now my call is ready but I'm going to make a few updates here before we put it into a workflow which is I'm going to rename it to create meeting and I'm going to change the use as to action. This means that it can be used as a workflow action which is exactly what I want to do with it.

Integrating the API Call into a Workflow

So let's go back into design and we can add this in to our create workflow. That's the save workflow here we go so when the save button is clicked at the moment we don't make any communications to Whereby but we need to do that so I'm going to add in the create meeting. I'm going to put this right at the start and then the end date now I've done some digging into this and it says the different formats basically there is not much there are some pretty consistent ways that date so express over apis but particularly with dates it's worth looking in the documentation to find how does that service want to receive the date so it says uses UTC if end date lacks time zone it will be interpreted as a UTC date okay bear all of that in mind and it wants us to print them basically like that okay we can we can work that I might have to flick backwards and forwards with it so the end date is going to be my date picker value plus an hour and now I've got a format in the way that it expects does it actually accept UNIX let's go back I don't think it does no so UNIX is a way of expressing a date as either seconds or milliseconds from I think a date in 1970 which is quite a standardized way of doing it but I basically have to format it like this so it's going to be year month day space hour minute let's just go with that so let's go back into here and I say formatted as now Bubble gives you all these presets but Bubble doesn't combine is it simplified extended ISO I think it might be yeah there we go let's try that let's see how well that works we'll get an error if it doesn't work and we'll come back to it if it doesn't work so this will create the meeting at step one that's when the data gets sent to be Whereby API and the magic happens on their end but we need to be able to retrieve some data from that in order for our users to be able to join the meeting so we need to save some of what is returned from step one so we've got we've got at least URL so I go results of step ones room URL I'm also going to save the room name and the meeting ID as well so add in a field room name again results step one this is why I put the create meeting action before I that's confusing this is why I put the Whereby API requests before my Bubble database create meeting action because I want to save what comes out of step one into step two so we say room name and then what was the last bit meeting ID so I'm not sure exactly which bits I need but that will all become apparent meeting ID ID okay perfect um let's go back into here and go onto rooms because now we should see yeah these are the ones that I've created in the course of testing um so let's go back into Bubble and I'll demonstrate how we can create a meeting and it will appear here so we should end up with three let's go back into our app and we'll create a meeting and I'll call this one um uh amazing Bubble.io fans uh and let's put this in to march selected time save okay now that only took a fraction longer but that's because we're waiting to send data to Whereby and to get data back uh so first thing I'm going to do is check in my Bubble app that we now have got yeah these bits of data so this is the one that I just created and you can see that it's got the meeting ID um there's something really bugging going on with Bubble tables when I click on it ignore that but I won't click on it so we've got the URL we've got the room name we've got the meeting ID that's all saved perfect but has it appeared in Whereby well it should have let's go back to here and refresh there we go that is one of our meetings I'm going to wrap things up here if you're learning Bubble you can learn so much about Bubble by going to our website planetnocode.com uh and then join me in part 3 where I'll be showing how you can actually join a video conferencing meeting in your Bubble app using the Whereby embedded API