Aloha Forum - Chat App with Forums

Update: Since this tutorial was written, the excellent duplicate components feature was added to Thunkable X. Instead of continuing this as an open project, I will link to Domhnall’s tutorial for a chat app that uses this feature here. This tutorial can still be used to create a chat app with separate chat rooms, or forums.

The aim of this project is to create a forum app. We have seen requests in the Community and in messages from users asking for advice on creating a forum app. As the initial version of this app is based on the brilliant Aloha chat app, this project will be called the Aloha Forum.

In function, the biggest difference between the Aloha forum and the Aloha Chat App will be the option to view and send messages in one of a selection of topics. For the designer, the biggest difference will be that we are hosting the message history with a spreadsheet, not cloud variables. This will make it easier to switch between topics to display to the user.

Prerequisites

Note: You’ll have to create your own AirTable spreadsheet for this app. You can learn about creating a Spreadsheet here.

We’ll start with a basic spreadsheet. We have 5 rows to display at a time to begin with. As AirTable say, the primary field of a row is meant to be a “short, unique representation” of the row’s contents. We’ll identify the rows as ‘message1, message2, message3, message4, message5’. For version 1.0 of this app, we’ll only offer 2 topics, ‘Topic1’ and ‘Topic2’. I’ve typed a ‘.’ into each of these rows so that an empty cell will display “.” rather than “undefined” in the app.

Screen 1 - TopicScreen

The first screen will let users decide which topic they want to view. We will very simply have a List Viewer and a Button.

Now for the blocks. Start by defining a list ListOfTopics which is, of course, the list of topics that you made in your Spreadsheet. Make sure the text matches your AirTable column names exactly! We’ll also create a variable ‘topic’, which is blank for now.

Forumv1B11

When the user has just opened the Screen, they will not have made a decision about which topic to view yet. The ‘topic’ variable will be set to a blank string of text, the List Viewer will display all of the available topics, and we won’t make the View Topic Button visible yet because they won’t have selected a topic to view! We’re going to make this set of actions its own function because we will also use it if the user has selected a topic but then wants to go back and select something else.

Forumv1B12

We know that if the user is clicking on the List Viewer, they’re in one of two situations: they’re looking at a list of topics and want to select one, or they’ve selected a single topic and want to view the full list of topics again. We’ve already defined how to show them the full list with our ‘initialise’ function above. If they’re selecting a single item from a menu, we simply display their selection, set our ‘topic’ variable to be their selection, and display the ‘View Topic’ Button, allowing them to view their selected topic on the next Screen. (This List Viewer method of displaying options is Method 1 of my previous Drop Down Menu tutorial.)

Screen 2 - Forum

Our second Screen pretty much looks exactly like the Aloha chat app. You can get all the details by remixing it at the link above. However, we are using a Timer and a Spreadsheet with our Screen, unlike Aloha. We also have a Back Button so that users can navigate to different topics of the forum.

Let’s get the obvious out of the way: when the user clicks the Back Button, they’re going back to the Topic Selection Screen.

When the user opens the Forum Screen, they’ll want to see the previous messages (In our case, this will be the 5 most recent messages). We’ll do this with a function called ‘set app messages’.

When the user sends a message, they want to upload that message so that other users can see it, and see the message on their own Screen. We will upload the message with a function called ‘set cloud messages’, then use ‘set app messages’ to display the updated set of recent messages on the user’s Screen.

Forumv1B21

Let’s look at how to make these functions. In this app, the Button ‘txtminus1’ is the most recent message, and ‘txtminus5’ is the 5th most recent message. In my spreadsheet, the most recent message is stored in the first row and the 5th most recent message is stored in the 5th row.

To get the most recent message, we retrieve the most recent message from our Spreadsheet and display it as ‘txtminus1’. Note that the ‘topic’ variable that the user set by selecting a topic on the first Screen is the name of the Column we are retrieving a value from - this is why the list of Topics have to match the names of the Columns in your Spreadsheet exactly!

Forumv1B22

To display the 5 most recent messages, we do this 5 times. That’s the ‘set app messages’ function. Make sure that the ‘value’ block attached to each ‘from X set text to’ block came from the ‘get’ block it is nested inside!

Forumv1B23

When the user sends a message, we want to set that message to be the most recent message in the DB. As a domino effect, we want to set what was the most recent message to now be the 2nd most recent message, the 2nd most recent message to now be the 3rd most recent message, etc. However, we will do this in reverse order - otherwise we would be shuffling the same message through all of the message displays! As with Aloha, we will then clear the text of the Chat Input.

Forumv1B24b

The only thing we have left to do is set our app to display messages as they come in from other users. Unfortunately, the Spreadsheet component doesn’t have the ‘listening’ function that Cloud variables have. This is where our Timer comes in. Mine has been set to 1000ms, but you can make that shorter or longer as you like.

The simple version of using the timer is just updating the app messages when it fires:

Forumv1B25

And that’s the Aloha Forum app! Remix it here, add your own Spreadsheet details, and try it for yourself.

3 Likes

The history message should be button properly. Cannot label only. ?

Can the remix link set to be public please.

Hi there, the app has been made public. Sorry about that!

1 Like

Hi there,

The previous messages in a chat are displayed as Buttons, like in the original Aloha app. You can display them as Labels if you want.

Hi there! I have tested your work and it couldn’t work for me. The history button always displaying “undefined” even if I have typed message and clicked the send button. Thanks

Hi there,

Just to ask the obvious question, did you add your own Airtable API Key/Base ID/Table name?
I’ve noticed that Airtable can erase a cell’s contents if the contents are only a space, so i’ve changed mine to show ‘.’ characters before the cell has been given a value (this is reflected in the tutorial now).

But that shouldn’t affect what is displayed when you send a message, of course - try either of the following in your ‘set app messages’ function:
put a ‘wait 0.1 seconds’ block between the ‘Get Cell’ blocks
nest each of your ‘get cell’ blocks in the block above it, like so:
forumv1ba

Let me know if either of those help!

I’m so sorry I think I’m an idiot .would you mind record a tutorial for me. I don’t even understand what this app will do. I have tried to paste my Airtable API and base key .

Don’t apologise at all!
The app works for me, but if it doesn’t work on other users’ devices then I need to make sure these issues can be solved. :smile:
Did you make an AirTable spreadsheet like the one in the tutorial, and do you know how to get your API key and BaseID?
You’ll also want to enter the Table name ‘Table 1’ in the AirTable properties.

Feel free to private message me if you want me to check out your app!

1 Like

If I understood more. Is it?

Oh I get it finally! I worked. I need to built-up a new database and create the message 1-5 rows .:slight_smile: thanks.

2 Likes

Amazing! I’ll clarify that people need to make their own spreadsheets in the tutorial. Thanks for this feedback!

3 Likes

Thanks for Jane. This is good but not enough.
I want to improve this project.
I want to add more topic column with button.
Also i want to show Buttons - Button List for users… (I don’t want to use Listviewer)
Am i use Firebase or Spreadsheet for Thunkable also?

1 Like