Communication has never been easier. With the ongoing pandemic shaping how survival looks today, you can only bet that digital solutions will remain relevant and warranted irreversibly.
That said, the next series of blog posts will talk about how you can create a messaging app on Bubble without having to code at all!
Let’s start!
If you’re replicating messaging apps like Telegram or Viber, for example, a few of the core pages you’ll want to build are the home page, where the list of existing messages are, the registration page, where users can sign up, a chat page, where the list of contacts can be shown, and of course, the chat portal, where users can send messages to other users.
One of the best features of Bubble is its capacity to send data between pages. As such, you can produce one generic page version then dynamically display appropriate content from your database when needed.
In this case, we’ll only have to build one page to accommodate chatting. We then proceed to write the necessary logic to show only which messages are needed within each chat.
Building your messaging app
Once you’ve arranged your messaging app’s display, you can focus on developing the appropriate data fields to ensure your app works. It’s critical to link each workflow for your product so we can rely on these fields.
Bubble optimizes a pre-built database, making it faster and smoother to fill out unique fields with data types.
When creating your MVP messaging app, the following data types and fields are what we’ll need:
Data type: User
Data fields:
- Name
- Photo
- Contact number
- Contacts – List of users. Note: Creating a field as a list based on a separate data type allows you to seamlessly integrate all of its relevant data fields without having to create additional fields
- Chats joined – List of chats
Data type: Message
Data fields:
- Message content
- Messages chat – Chat
Data type: Chat
Data fields:
- Messages – List of messages
- Users – List of users
(source: https://bubble.io/blog/build-whatsapp-clone-no-code/)
Establishing workflows
Now that we’ve established both the database and structure of your messaging app, it’s time to stitch each piece together so the app works!
On the platform, Bubble refers to these elements as workflows. According to Bubble’s online manual: “A workflow is an event that runs a series of actions when triggered. Workflows are the medium you can use to express what your application does. For instance, when a user clicks on the button ‘save’ (the event), ‘something’ should happen (the series of actions).”
Now that we’re familiar with what workflows are and how they work, let’s start developing our user accounts.
Building user accounts for your messaging app
Let’s begin by developing the workflow that lets a user create an account. When you’ve finalized a dedicated registration page, you can go back to your existing library and reuse elements from there.
In the page dropdown, choose the login/sign-up option.
You can quickly copy this option template from here and onto your account registration page.
When you use the given input fields, you can proceed to build a workflow that a user can trigger when they click on the sign-up button.
In your workflow editor, you can then choose the sign the user up option.
Once that’s done, you can map out the input fields with the necessary fields from the on-page elements to create a user profile.
When developing your messaging app, we’ll also need to include a few supplemental account fields for your users’ name, contact number, and display picture.
Once that’s done, you can also opt to send your users an automated confirmation email after they’ve successfully signed up.
Establishing a homepage for your chats
The next integral component we’ll have to establish is the messaging app’s homepage. The objective of this page is to display a complete list of every existing, unarchived chat for each user.
For this segment, let’s begin by optimizing a repeating group element to display the list of chats. To successfully update and display a list of chats, repeating groups have to be integrated with your database.
To do this, you’ll need to link a data type in your database with an element. In this scenario, you’ll categorize the dynamic content as chats.
Moving forward, the data source should also be set in your database as a list of chats.
Lastly, we’ll add a restriction to our data source, asking to fetch only the chats that involve the concerned user. This makes sure that the user can see only the relevant chats.
When this is done, you can proceed to map out the dynamic content that will appear in the grid. Structure the top column with the appropriate content you want to be displayed, then the element should automatically populate the succeeding columns based on the data you filled out earlier.
In the context of this repeating group, include the name of each user in the chat.
Furthermore, it’s also imperative that we show the most recent message in the chat.
In a repeating group, you can also opt to build workflows from each element found in every row.
This will be handy when a user opens an entire chat thread on the chat portal page when a user clicks on the text of a chat.
In your workflow, you’ll also need to develop a navigation event, leading a user to the chat portal page.
Here, the current cells data also needs to be sent. This makes it possible for the chat portal page to determine which messages to display.
Lastly, the final feature we’ll supplement to our homepage is a straightforward icon that leads users to create their own chat page with another user.
And just like that, we’ve now configured how users can sign up and chat with other users!
Easy right?
With Bubble’s visual app editor, anyone can now develop software without having to code!
Do you have app ideas you’d like to realize? Check our courses to learn more about building your app.
Give us a call, and we’ll help you out!
(Source and screenshots from https://bubble.io/blog/build-whatsapp-clone-no-code/ )
