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.
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.
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.
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!
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!
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.
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:
And that’s the Aloha Forum app! Remix it here, add your own Spreadsheet details, and try it for yourself.
thanks.