Making better chat apps with the "Any Component" blocks

Thanks to @eoinparkinson who suggested this as an idea for a tutorial

User Interface.

The UI for this app is very simple. The OutputColumn is initially empty, with vertical alignment set to flex end. This is eventually where all the chat bubble will go.

Under that is the inputRow which is used to place the test input and the send button side-by-side.

Finally, outside all of this, are two labels; RightLabel and LeftLabel. Although I’ve shown them in the screenshot below, their visibility is set to false. It’s this fact that allows new messages to “appear” in the chat as it progresses.

Who’s taking?

Because this is a demo with just a single user, we’ll use a variable called isMe to mimic who is talking and when.

02_isMe

To expand this example and share it with others would would need to manually keep track of who is talking.

If I’m talking…

The first condition we what to handle is if we are talking. Using the if block we check if the isMe variable is true. If it is true then we can clone the right label, using the clone block. Using the as last in option will add the new message to the bottom of the chat, which is how most messengers work.

If it’s not me talking …

If we’re not the person talking then it must be someone else. Click on the blue gear icon (the mutator) to add an else condition to the bottom of our block.

Doing the opposite.

Finally, if someone else is talking then we display the left label instead.

Flipping the isMe variable and clearing out the TextInput tidies things up for the next message.

Remix this app

If you want to remix this project for yourself, please do by clicking on this link:
https://x.thunkable.com/copy/5d8c344852036835f22c3eb484d444b8

Thanks!

2 Likes

Let’s make real-time chat

Ok, now that we’ve got a proof of concept, let’s make a version where it’s not just you talking to yourself! :joy:

Create a cloud variable

To do this all we need is a cloud variable. You can call it anything your like, but since we’re using to to store the text of each message this gets sent, I’ve opted for messageText in this example.
02_create_cloud_variable

When the message changes

When you create your first cloud variable in your app a new event handler, when cloud variable initializes or changes is added to the variables blocks drawer

This event handler actually handles two events. First off, we check if the cloud variable is “undefined” (which is the case only when we initialise it for the very first time). If this is the case we do nothing, since we don’t want everyone seeing the text “undefined” mysteriously on every screen.

Next we check if the cloud variable matched the text that we’ve just typed. If this is the case then we use the RightLabel and we we didn’t type the most recent message then we use the LeftLabel

Remix

Here’s the remix link if you want to have a closer look:
https://x.thunkable.com/copy/402a65883fc246bdfa29d9cc67520dd8

5 Likes

That’s my most favorite! Oh my god! 5 star rating. !

2 Likes

Great job! :100:

2 Likes

Thunkable just got way more powerful with this update. Great tutorial, definitely going to remix this :stuck_out_tongue:

2 Likes