No Code Video Conferencing App with WHEREBY - Part 1

Creating a Video Conferencing Web App with Bubble.io and Whereby

What if there was a way for you to create your very own video conferencing web app even if you're not a coder? My name is Matt, I'm a no-code and Bubble educator. I've created hundreds of Bubble tutorial videos and this is going to be one of them because I'm going to be showing you how you can combine the power of the Whereby embeddable API with Bubble which is an amazing no-code web app development platform and in this miniseries I'm going to take you through every step needed in order to add in video conferencing or even create your own no-code video conferencing app by combining together these two services.

Setting Up Your Bubble.io App

We're going to be looking at the Whereby REST API. Now don't worry if this looks very daunting I'm going to take you through every step of the way but to start with you need to sign up for a Bubble.io account and then create a new app and you will arrive at a screen like this. So I'm simply going to say skip application assistant and then I'm here and again don't be daunted by this I'm going to take you through every step of the way this is a great tutorial for beginners all the way through to advanced because I'm going to explain every bit of Bubble along the way. So let's dive into it.

Creating a Meeting Data Type

I would say the first thing we need to add into our app is a way to create a meeting. So I'm going to go into data and add in a data type and the data type is going to be called meeting and I'm going to tick this box they make this data private by default. In a later part of this miniseries I'll be explaining exactly what we need in order to secure our app and ensure that things remain private that should be private but for now we'll just set it as default because that's going to help us out later and then let's just give the meeting a label and why not also give it a date or we'll just say starts at and then we pick a date field.

Designing the User Interface

Okay so let's go back to design and something that people find a little bit uncomfortable about Bubble is that you start with a blank canvas but what that means is it gives you real freedom about what you can do so I'm not restricted by the type of UI design that other no-code web application builders have. I basically can make this look pretty much exactly how I like so I'm going to go to layout and change this into a column and I'm going to go back to the page and let's add a background color to the page so we have a bit of contrast.

Adding UI Elements

I'm now going to add in a group and groups in Bubble are a way of well grouping together elements it's think of it like a div block if you've got any background in in more traditional web design web development so let me set this also to a row and width I'm gonna say 100% because I'm going to build in a way that I intend for this app to be responsive so even though Bubble is designed as a web app no-code creation platform it can be responsive so you can build progressive web apps with this you can build apps that work really well in the mobile browser and in fact later on this year 2024 Bubble have said that they will be bringing in an editor that allows you to build native apps for iOS and Android so that'd be really exciting when it happens but for now let's stick with the basics I'm going to just add in a bit of white there right now let's add in the body of our page here I'm going to say this is also a column and I'm going to say that this has a max width or let's say just say 900 for now get rid of the min width and then I'm going to center it on the page so you can see that it places it in the middle of the page I'm then going to add in some padding.

Creating a Meeting Creation Workflow

Okay and then let's add in a title and I'll just I'm not going to pay too much attention to UI design I'm going to use a lot of the stars that Bubble comes you know pre loads for you with when you create an app so let's just say meetings perfect. Now I'm going to add in a button and I'll say create and I want my button and my meetings label to appear on the same row so I've highlighted both of them by holding shift and clicking on each and turn and then I'll right click on one and I say group in elements in container row and then I'm just gonna swap these around so I say make that one last place it in the middle and then the container layout for my row there we go it's space between right so what happens when someone clicks create well let's use a pop-up because I'm gonna as I link in with the web I API I'm going to be adding in a few additional you know tools features so and fields that's mainly what I mean so that's then the pop-up and I also set this to column nice bit of say pop-up let's go 24 padding all the way around let's add in a label we'll say create new meeting and let's make that with 100% as well so it all goes onto one line perfect so what do we need for our meeting well we needs a couple of inputs I'm going to take in a regular text input and also set this to width hundred percent I'm doing with 100% so that it will be responsive and then we also need a date time picker let's place that in there change the input type to date and time then on the pop-up I'm gonna go into layout and add a gap between elements that just helps me achieve a really nice uniform design that's too much let's just go for four and then add in my button say save and let's tidy this up min height if I put in zero it's going to collapse the size of the parent down to just what is needed to hold the children.

Setting Up the Workflow

So let's set up our first workflow I'm gonna go back a step because first things first is we need to show that pop-up so I click on the create button and I'll click add workflow and then I'm just going to click in here and type in show if you're unsure where that appears from if I go all the way back it's going to be an element actions show so I can say show pop-up okay and then why don't we just go ahead and prove you that right away so I can prove to you this no-code thing is amazing so create and there we go all without writing a single line of code so when the pop-up is shown we want to say that these fields cannot be empty and we want to save a record of this meeting into our database now in the next video that's where I'm going to cover actually how we create that meeting in Whereby but right now I'm getting the basics of the UI design down for us so we're going to go data create a new thing and there's our meeting type that we created a few minutes ago and the label and now I just match up to my inputs so is input a is what I set up for the label but input a isn't very descriptive so I'm gonna go in and change place hold and I will say what is this meeting about.

Refining the Workflow

Now you'll notice that Bubble has updated the internal labeling of this label so if I go back into workflow we can see that it's now updated input what's this meeting okay really helps to use placeholders to relabel as you go along then starts that I just look for my date picker there we go right what I want to happen when I've created the meeting well I want to reset the relevant inputs so that when you open the pop-up again it's not gonna have the previous set of data in there and I want to hide the element let's preview that once more so let's click create what's this meeting about no code fans and then I'm gonna pick a day in the future I click save right now what's happened here we can't see anything but if we go into data now and then app data we can see that we now have a line in our table so you can think of data types and Bubble we like different sheets in Excel each sheet has got its own table and so here it is this is the start date we've selected and it's a little bit buggier Bubble but anyway you can see that the label works so now I just want a way of displaying this but I'm gonna make one bit of UI improvement which is that when the pop-up was shown I had to click inside that first input I'm lazy and I think many users are lazy so I'm gonna set focus on that element which means well let me show you what it does let's go back here and refresh now when I click create my I don't have to click in there my cursor is there.

Displaying Meetings with a Repeating Group

So let's finish this video by showing how you would list through meetings in your database so we need a repeating group element and the repeating group element allows us to list through elements I'm gonna add a little bit of margin to this bar at the top that's safe 30 and then back on our repeating group so what content do do we want to show in the repeating group we want to show meetings and how do we find meetings well we do a search for meetings and this will return all of the meetings in the database that this user has access to now again there'll be a further explanation in a later video about privacy rules but effectively this means that if a user based on what we've done so far if a user creates a meeting they can access it so oh and you might have also noticed that actually we are creating meetings but we aren't logged in again I'm going to cover that in a later video but as a sneak peek effectively Bubble uses a cookie to measure a session I can take actions as a logged out user non-registered and then if I were to register or I were to log in as a user then I kind of inherit any previous actions into that user but for what we're doing for testing here this is fine let's get rid of the row limit and make this into a row so in the row we're going to have our label so insert current serves meetings label I'm going to copy and paste this now because we're also going to have the start date I'm going to format that say like that okay then just so that we're ready to go with this later on I'm going to add in a button because what we want to do with meetings we want to join meetings going to get rid of the max height there layout make this 100% width I'm gonna group everything that I want on the left so it group into a row okay it pushes the button to the right so let's go ahead and preview that and hopefully we'll see that meeting that we created first of all brilliant there is no code fans February 29th.

Conclusion and Next Steps

So let's wrap up that video here in the next videos we are of course going to cover how we link in with the Whereby API and how we can create meetings and how we can join meetings all within our Bubble up and of course registering logging in users privacy rules that all to come if you're learning Bubble and you're still watching this then do subscribe do go to our website planet no code calm because we've got hundreds of Bubble tutorial videos just like this one so if you're learning Bubble there is no better way to do it than to dive into our vast database of Bubble tutorials.