Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

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

In this Bubble tutorial we explain how to build a chat app with Bubble between your Bubble app users. This third video in a 3 part series completes this mini series demonstrating how to build your own chat app by showing the workflows required to send messages between users in Bubble.

Watch part 1 of this series: https://www.planetnocode.com/tutorial/design/how-to-build-a-chat-app-with-bubble-io-part-1/

Watch part 2 of this series: https://www.planetnocode.com/tutorial/design/how-to-build-a-chat-app-with-bubble-io-part-2/

Welcome to part 3 of this miniseries (part 1 & part 2), looking at how to create a chat app with Bubble. This video is only going to make sense if you check out the last two videos, each less than ten minutes. That's where I show how to structure the database, the importance of working privacy rules, and getting this really simple UI with both a conversation and a messages column.

So we finished the last video looking at the workflow required. Let's just check back in with that. To create a new message where I give it content participants. That's important for privacy and conversation, that's important for grouping them together. I think we need to test it and then work through the elements that don't work quite so well in it.

Creating a new conversation between users with a Search box

So I'm going to just run as one of my demo users and I'm going to get a mainly blank page. The first thing I need to do is a way of creating a new conversation between two users. So let's have a button at the top of my conversation panel, new a little bit padding beneath it. Then I need a Popup and I'm going to make this a search box. And the search is going to search for users, who to create a new chat with. Then this needs a button.

Okay, so do a search for dynamic choices and define the options as User. And then I want to search by first name. If we have a look at my database, I'm going to be trying to search for Nigel and creating a new conversation with Nigel.

So then I don't want it to be empty. Cool, that's good. Let's check my Privacy Settings for users because I want to be able to search for Nigel. So I need to say that everyone can do a search for users by first name. I think that will work.

Working with privacy rules

Okay, start conversation. So first up, we need to create a new conversation and the participants are going to be I need to add both myself and Nigel. So I'm not working with a list. So I think I'll just have to do it in two steps with the workflow. So participants add Search box A's, values.

That will be the Nigel value. And I don't have another field for conversation. Okay, so then let's add another step. Just because I don't have a list ready, I'm making a list on the fly so it's not create a new thing. It is 'Make changes to a thing' step two. And then participants add myself Current User. So I added the other user. I added myself. And then I need to hide my pop up. I need to show my pop up.

Let's test it. So I'm signed in as Matt, myself. Everything's empty. Create new Nigel. Okay, start conversation.

Okay, there is my conversation with Nigel. Let's create a message and it comes through. I'm just going to give all of these things some borders because otherwise, it is not very easy to see what's going on, my conversations and my message to Nigel. Let's create another test user.

Let's go with Charlotte because then we can check to see whether my workflows around changing conversations work. So let's create a new conversation with Charlotte.

And if I click on Charlotte, it goes empty and I can say, Hi, Charlotte. And then there's my message. And if I click on Nigel, it goes back to Nigel's conversation.

Testing multiple users

So let's test this also as another user. This time I'm going to sign in Charlotte. Now, Charlotte should see that Matt has initiated the conversation and that the message is 'Hi, Charlotte'. So I will send one back saying, 'Hi Matt', and then if I sign in as my Matt demo and then go on to Charlotte, I get my next message, hi, Matt.

Sorting Conversations by date & time

So there's something that I want to improve here, which is that Charlotte's conversation has received the message most recently, but it's appearing below Nigel. So what can I do about that? So I could use database triggers, but in order to use database triggers, I need to be on a paid plan.

So the database trigger would mean that when a new message is created, I update a field in conversation. I need to make that field regardless, so this can be Last Updated. Okay, but I'm not going to use database triggers because this demo app is on a free plan and I don't get access to database triggers with a free plan. So what I can do instead is that when I create a message, I'm going to add in another workflow step of data, make changes to thing parent group's conversation date last updated Current time and date. And then if I go back to the conversation here, I can say order by last updated descending order.

None of my messages so far, I prompted that field to be created. So let's just run it again.

So let's go. Hi, Charlotte. Okay. And you'll see Charlotte has gone to the top there. Let's try again with Nigel. What's the weather like? Very British. And Nigel goes to the top.

Wrap up & other things to consider when building a chat app with Bubble

So there we have it. This is very simple, actually, I could continue this series, which I might well do in the future of other things to cover when it comes to a chat app. For example, what's going to happen when these chat Bubble app all the way to the bottom? I want to be able to scroll.

There's also a common frustration in the Bubble community of chat apps; you want the repeating group to be reversed because you want the bottom to load first and then to be able to scroll up into past post. Those are all topics for other videos, another one being group messages. But this is the bedrock, the foundation for building a chat app in Bubble.

And in the future, I may well come back to this and add to it in order to flesh out and make it work a lot better with some of those features I just mentioned.

 

Latest videos

lockmenu