No Code Video Conferencing App with WHEREBY - Part 4

Welcome back to our Bubble tutorial miniseries

Welcome back to our Bubble tutorial miniseries where we're looking at how to build a video conferencing app with no code. And we're combining the awesome power of the Bubble no code web app development platform with the Whereby Embedded API, whereby providing the video conferencing and Bubble being our website web app builder. Yeah, you get the picture.

Making the app more usable for users

So this video is going to be about basically making this app more usable for users. We've got the essential features in terms of video conferencing in but we're still missing many key features if you actually wanted to roll this out and make it useful for other people and not just useful but secure. So first thing I'm going to focus on is security.

Exclusive Bubble tutorial videos

But before I do that, if you are learning Bubble and you like videos like this and you want to find more videos, then click the link in the description. Because we've got hundreds of Bubble tutorial videos exclusive to our members over on our website planetnocode.com. Let's dive into this one then.

Setting up registration and login

So let's set up registration and login first of all. So at the moment my index page is a list of meetings that the user has created. But I actually want to make that say a dashboard page and so I need to swap my index page. So I'm going to create a new page and just call it home. And what that allows me to do is go edit make this the new index page. And then the old index page here I'm gonna rename that to dashboard.

Renaming pages and setting up the layout

Okay, so by renaming it there I'm changing the slug, the part of the URL that identifies the page and it renames in my page this two pages here so now my index page, let's change this to align to parent. And let's set it up. I do like a f2 contrast. I'm gonna add in a group. I'm gonna have one of those nice neat minimalist login registration forms in the center of my page.

Styling the registration form

So let's put this in the center. Let's give it a max width of say 5500. In width just get that down to zero then background white give it a nice say 8 pixel radius on the border and then 24 padding tends to look good with something like this. Let's add in a header. I'm just using the preset so you can obviously make a Bubble out look really much however you like, but let's start with registration.

Adding input fields for registration

And so what I need to register well, I need to have a series of inputs. So I'm only going to do the essentials here. I mean you can register your user and have them fill in a lot more details about themselves. But essentially you just need email address and password so we'll make this one your email. Again notice how Bubble automatically renames the element for you. The type of content is going to be email, that way Bubble can check to see whether someone has indeed typed in an email address.

Creating the registration workflow

I'm going to copy and paste that change this to password then say this is password. And then lastly I need a button. Let's put that down the bottom and then so this is a little bit more tidy that applies a perpixel gap between them. Okay, I'm also just going to rename this group register. Because I'm going to use this page for both my registration and my login form. And I'm going to use URL parameters to swap between them because that means that if I wanted to link to a specific form I can do that. Let me demonstrate but first of all, I'm going to add in the workflow. So when this button is clicked we account sign the user up match up the fields.

Renaming fields and setting up login form

And then I'm actually going to rename these manually now as soon as I rename these manually Bubble won't change it if I updates the placeholder and I'm renaming it manually. I'm putting an R in there because this page is going to have two sets of email fields. It's got a registration. It's got a login email. Okay after registration. Now at the moment this will register a user fine. But I want to go to a page and I want to then send the user to a dashboard. Okay simple as that. Let's now build the login form. So I'm just gonna copy this and paste hide the register one.

Setting up URL parameters for form switching

Cool this login and then update the field so we'll say login. This is now L of the login. Say login. Let's update the workflow. So this time we log the user in. And I select the input field for login email and I select the input field for a login password. And then same thing I want to send them to the dashboard, okay. So that's gonna work. But what's if the user arrives in this page and I'm showing the registration form but actually I want to log the user wants to log in.

Implementing visibility conditions

So I'm gonna say the default is registration. So in layout is this element visible on page load? Yes, I'm gonna say collapse when hidden. I don't think that makes any difference with a line to pair of but I'm gonna do that anyway. And then I'm gonna say that when get data from page URL parameter login is true I'm going to hide this element. And I copy that on login I'm gonna do the opposite. So say this is not visible on page load collapse when hidden. But it is going to be visible when login equals true in the page URL.

Adding navigation between login and registration

Let me really spell out exactly what difference this is gonna make. So if I add in a text label on login and it will say need to register. So what will happen well when something needs to register I need to go back to this page and I need to clear out any parameters in the URL. I'm gonna really show you what I mean in a moment with that. But so I could just go back to this page effectively link to itself. But I need something slightly different for register. So I'm copying my text going on to register. Pasting it in and so this will say need to log in.

Implementing privacy rules

And this time when I say go to page I'm saying index but I'm passing in my parameter of login equals true. That's my preview that's replaced it with the new index page. So if we were going to go and look in the URL, we would now see that the parameter login equals true has been added and then by clicking need to register it removes it so this is a really good tip. It's slightly better than using custom states in this instance because it means that you can directly link to a specific. This is specific visual on your page so that's registration and login sorted. Let's just have a really quick chat about privacy rules.

Setting up user privacy rules

So in data privacy let's start with user as I think it's perhaps the most simple which is you probably don't want at least for this app any fields checked down here because that effectively means that that data is public. And yeah, there's not many instances where you would want a user's name or particularly that email address to be public. That in Bubble is not just good enough to think are not putting that data on any pages. You need to ensure that the data is sufficiently locked down. It does not leave the server unless a privacy rule applies to it.

Configuring meeting privacy rules

So for example here this user is current user is saying that if you if this user is current user then view view your own email address for your own name if you've got a name field etc. Now in an app like this you're going to want to think about what you do with meetings. So we when I created the meeting I had this box here checked. So that means that I've got this basic privacy rule in place and then nothing is public. Now what that would mean is that if anyone tried to if you shared the link to the meeting page with anyone, they wouldn't actually be able to access it because they wouldn't be able to access any fields on that meeting such as the meeting URL.

Considering security options for meetings

And so there but that means whereby is embedded iframe is not going to work. So you could branch off in a few different directions here. You could think about this. Oh, well, I only want meetings to be accessible in the app if individuals invite each other. I mean that that's kind of a separate feature sets to think about but you would still leave everything else empty unchecked like this. Or you might consider that actually I would like my users to be able to just send the link to anyone. And as long as they arrive on the right URL there's no additional security just the URL. Then you want to provide the basic details so you could decide to check URL I think that would be the only essential one there. Maybe you want to show the label.

Importance of testing privacy rules

But privacy rules, please please don't skip over them. Please make sure please test please test with different users. If you've got different roles in your app. On that if you want to test as different users. We haven't actually registered any users. But once you register users remembering this is your development database, which is separate to your live database. You'll get users listed here and there will be a button in one one of the columns here that says run as and that can save you a whole heap of time because it means when you start adding in test users you can quickly swap between them and preview your app from that from the perspective of different users.

Wrapping up and future directions

So yeah, there you go. This is probably where I wrap things up if you want to see me go in any other directions with an app like this. I feel like we've covered the basics, but we read every single comment that is posted. So yeah, please let us know what else you'd like to see us do with the whereby API and building apps with Bubble.