Create a Messaging App

Part 3: How-to Create Messaging App in Bubble.is

Add Threads to Your Messaging Web App

In this third and final part of the series on creating a Messaging app using Bubble.is, you’ll learn how to create the actual messaging functionality of the app.  Between the three videos in this series, you’ll learn how to create your own Messaging App using Bubble in less than an hour, start-to-finish.

In this third and final video in the series, I’ll show you how to create a new Thread (including adding Users to the thread), display your list of Threads and show how to message Users in each Thread.  The three areas I’ll cover are:

1) Create Threads

In this part of the video, you’ll learn how to create the data structure in Bubble needed to support Messaging.  There’s the Message data type which is for the actual message and the Message Thread data type which is used as a “container” for all the Messages in a Thread (or List of Messages).  You’ll also see how to add Users using a Multi-dropdown input.  This ability is made possible because of the Contacts created in the second video.

2) Display Message Threads

In the second part of the video, you’ll learn how to create a Repeating Group which shows all of the different Message Threads you belong to.  You’ll also learn how to create a Custom State which will be used to show (or hide) the Message Thread Repeating Group as well as the actual Messages in a thread (the third part).

3) Display and Submit Messages

In the last part of the video, you’ll learn how to Submit Messages to the Thread.  This part of the design uses a Repeating Group to show the Messages.  It also uses a multi-line input for submitting the messages to the Messages Repeating Group.  At the end of the video, you’ll also see a demo of two Users creating and sending messages and to each other.

In case you missed them, you can see the first and second blog posts or the YouTube playlist on this Messaging App series.

Submit the form below and I’ll give you FREE ACCESS to this and many other designs in Bubble.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s