Building a no-code chat

What a chat is, and why an app needs one

A chat is just an exchange of messages between two or more people over the internet. We use the same word for the feature inside an app that lets people hold that conversation. Almost every app people return to has one, because talking is how a group agrees on anything.

You do not need a plugin or any code to add chat to Adalo. A message is only a small piece of data with an author and a time, so a chat is really a list of those pieces of data, shown newest at the bottom, with a box to add one more. Once you see it that way, you can build it with the same three ideas you already know: a collection to store the data, a list to show it, and an action to add to it.

The case we are building: chat about a trip

There are a few ways to add chat, and the simplest and most useful one is chat about something that already exists in your app. In the Trips app that has run through this course, that something is a trip. Everyone going on the same trip wants one place to sort out the details, so the chat belongs to the trip.

Picture the app so far. The home screen shows a list of trips the user has created. Tapping a trip opens its details screen, where you can see the trip and the people in the travel party. What is missing is a way for those people to talk to each other, so that is what we add.

Build it: the Messages collection and the chat screen

The whole feature rests on one new collection. A message needs to know three things: what was said, who said it, and which trip it belongs to. Those become three properties.

1. Open the trip details screen and drag an action button onto it. This is the button people will tap to open the chat.
2. Set the button's action to link to a new screen, and name that screen Trip Chat.
3. When Adalo asks which template to use, open the Miscellaneous category and choose the Chat template. It already has a message list and an input box laid out for you, so you are editing a starting point rather than a blank screen.
4. Select the list on the new screen. Adalo asks what this is a list of. Choose to create a new collection and name it Messages.
5. In the Messages collection, rename the first property to Message Text. This holds the words of the message.
6. Add a second property of type Relationship, pointing at the Users collection. This records who sent the message, so name the relationship Sender.
7. Add a third property, also a Relationship, pointing at the Trips collection. This ties every message to the trip it was written in.

Now the chat screen shows a list of messages, but it would show every message in the whole app. You only want the messages for the trip the user just opened.

8. Select the message list and add a filter: Trip is equal to Current Trip. The screen was opened from a specific trip, so Adalo can pass that trip through and the list narrows to just its messages.

Sending a message and showing it well

The deck stops at the list, but a chat that only reads is half a chat. The other half is sending, and it uses the same action you have used all course. On the Trip Chat screen the template gives you a text input and a send button near the bottom.

1. Select the send button and add the action Create, targeting the Messages collection. This makes one new record each time it is tapped.
2. For Message Text, choose the value in the text input above. That is the word the user just typed.
3. For Sender, choose Logged In User. Adalo knows who is signed in, so the message is stamped with its author automatically.
4. For Trip, choose Current Trip, the same trip the screen was opened from. Now the new message carries all three properties the list filters on.
5. Add a second action to the same button that empties the text input, so the box is clear and ready for the next message.

For the display, each row in the list should show the message text and, in smaller print, the sender's name and the time, so a reader can follow who said what. Bind the big text to Message Text, bind a small label to Sender's Name, and sort the list by the created date so the newest message sits at the bottom, the way people expect a conversation to read.

That is a complete chat: a collection holding the messages, a filtered list showing the right ones, and a button that creates a new record and clears the box. No code, only the pieces you already know arranged for a new job.

Make it feel like a real chat

The chat works now, but two small touches make it feel finished, and both reuse tools from earlier lessons.

First, show your own messages apart from everyone else's. You met conditional visibility in the user-input lesson: on the message row, take a component and set it to be visible only sometimes, with the condition Sender is equal to Logged In User. Style that version aligned to the right and the plain version to the left, and the conversation suddenly reads like a real chat with two sides.

Second, handle the empty case. A brand new trip has no messages, and an empty list looks broken rather than new. Add a text label that says something like "No messages yet, start the conversation" and set it visible only when the message count is zero.

Prefer to see it explained? Here is the recorded Code for Albania lecture on this topic.

Check yourself

1. A message in this chat carries three properties. What are they, and why does each one matter?
2. Without the filter in step 8, what would the chat screen show, and why is that wrong for a per-trip conversation?
3. When the send button creates a message, where does each of its three values come from?