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

Creating a New Conversation

Welcome to part three of this miniseries 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 lesson 10 minutes, but 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.

Testing the Workflow

So we finished the last video looking at the workflow required. Let's just check back in with that. So 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 Chat

So I'm going to just run as one of my demo users. I'm going to get a mainly blank page. So 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. I'll label that new. I'm getting a little bit padding beneath it. Okay and then I need a pop-up and I'm going to make this a search box.

Setting Up the Search Function

Okay and the search is going to search for users who to create a new chat with and 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.

Configuring Privacy Settings

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.

Creating the Conversation Workflow

Okay start conversation. So first up let's we need to create a new conversation and the participants are going to be... okay 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 of the workflow. So participants add search box values. That would be the Nigel value and I don't have another field for conversation.

Adding Participants to the Conversation

Okay so then I just... let's add another step just because I don't have a list ready. I am 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 add in the other user I add in myself and then I need to hide my pop-up. I need to show my pop-up.

Testing the Chat Functionality

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. Okay 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. Okay my conversations and my message to Nigel.

Adding Another Test User

Let's create another test user. Let's go with Charlotte. Okay because then we can check to see whether my workflows around changing conversations works. So let's create a new conversation with Charlotte. Okay and if I click on Charlotte it goes empty and I can say hi Charlotte. Okay and then there's my message and if I click on Nigel it goes back to Nigel's conversation.

Testing with Multiple Users

So let's test this also as another user. So this time I'm going to sign in as 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.

Improving Conversation Ordering

Okay 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 behind 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.

Adding a Last Updated Field

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 and it could be a date. 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.

Updating the Last Updated Field

So what I can do instead is that when I create a message I'm going to add in another thing, another workflow step of data make changes to thing. Parent groups conversation, date, last updated, current time of date and then if I go back to the conversation here I can say order by last updated descending order.

Testing the Updated Ordering

Okay none of my messages so far I've got a 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 and give it Nigel. What's the weather like? Very British and Nigel goes to the top.

Future Improvements

So there we have it this is very simple there are actually I could continue this series which I might well do in the future of other things to cover with when it comes to a chat app. For example what's going to happen when these chat bubbles reach 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 posts.

Conclusion

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 might well come 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.