Making better chat apps with the "Any Component" blocks

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/projectPage/5d2f15e9bab45f13621d3e8d

15 Likes