How to build a chat app with Bubble.io Part 1

Building a Chat App in Bubble

In this video, I'm going to be showing you how to make a chat app in Bubble. It's going to be part of the marketplace app that I'm building and I want to add in an ability for buyers and sellers to be able to send messages, chat messages to one another. So I have a page here that I've created called messages. I'm in the new responsive engine and so let's get going.

Setting Up the Chat App Container

I think I need to add in a group. This is going to be a container for my chat app. It's going to have two columns. One column is going to be conversations and the other column is going to be messages. So let's make this a column to give it a fixed width and then in here it's also going to be a column take up the rest of the space and this is going to be messages. Okay, conversations messages.

Creating the Data Structure

For conversations, I need to have a repeating group and then I'm using conversations as a way of grouping together my messages. That's helpful for a number of reasons. One, it's how I think most users would come to expect from a chat app, but also we have to think of a way of working with the privacy rules in Bubble. So data type, let's create a new one called conversation and then another one called message. And so conversation as let's go message. Message is going to have a field called conversation. That's how I'm going to group them together. And each message can only belong to one conversation.

Setting Up Repeating Groups

Now I can add my type of content conversation data source. Do a search for conversation and then let's just copy and paste this repeating group into the messages column. See their messages, this is going to be message. Do a search for messages and this needs to have a constraint.

Using Custom States for Message Display

I need a way of detecting the conversation that I'm looking at and the way I'm going to do that is with a custom state. Custom states are a brilliant way of temporarily storing information and the information I want to temporarily store is which conversation am I looking at. So in fact I'll just assign it to a custom state. Can be stored anywhere on your page, just store it somewhere that makes sense for you. Oh, that's meant to say content. So I'll call this conversation in the view.

Rethinking the Approach

Actually, I'm not going to use custom states. I'm trying to build this app basically with a Bubble app development try and be as lean as possible. You're cutting down on the number of database fields you need, the number of elements you need on the page, the number of workflows you need. So I can just have this box here, this group here messages, I can just turn that to type conversation. And then I can say here conversation equals parents group conversation.

Setting Up Privacy Rules

Let's just have a look now at privacy. So data privacy, a conversation I only want this to be viewable by the people who are part of it. When a user starts new conversation they become the creator but I need an additional field in order to hold two users. So if I go back on to data type conversation I shall call this participants. And so this is a type user and I'm going to build this chat part of my app in a way that with a loud group chat in the future even though right now let's just get one to one two person chat working.

Configuring Privacy Settings

Participants is multiple type user and then I need to see if I can get this to work in the privacy tab. So I'm just have a setting for user. I don't want the conversations to be public. So can I write a rule where this conversation participants contains current user? That works but will it work for messages? That should be user. Again I don't want the messages to be public. I want it to be something like this message conversation participants contains current user.

Adjusting the Privacy Approach

It's telling me here rules that use and messages XY current grant search access right now. So that's not going to work for me because I'm going to be using do a search for in order to show you the conversations in my repeating group here is do a search for conversations. So I need to approach this in a different way. Let's just see if I can rewrite the expression the current user is this messages. No, is it let me current user? No, that doesn't let me go to a group.

Final Privacy Configuration

So I need a different approach to this now. One way to do this would be in my messages. So messages also have to have a participants and user. Because then I can write the same expression I did for conversations. So this messages participants contains current user. Now that's not as lean as I'd like it to be because I have to, when I create a message, I'm over complicating in some ways the workflow because I kind of have to account for this participants field being filled for both conversation and the message. But it will work like this.

Conclusion

I've just seen the timer coming up in eight minutes that will conclude this video and I'm going to immediately record a follow-up video that will look at workflows.