Messaging apps seem like a code-heavy program. And they are! But with Bubble, you can easily develop your own Viber-like messaging app without having to code at all!
Once you’ve built your workflows, create new user accounts, and established your homepage, it’s time to move forward with creating new contacts.
New Contacts
On the chat creation page we built, we’re going to optimize another repeating group to preview a list of the user’s present contacts. Much like what you would see on WhatsApp.
Here, we’ll also have to develop a function that lets users add new contacts to their contact list. This is possible by resorting to a popup element. These come in extra handy when you need to create events without leading a user to another page or when you simply need to display information.
In the messaging app we’re building, a popup will involve a button and a search bar element. This particular bar will be utilized to look for contact numbers in our database.
When going about this element, choose dynamic choices as the choices style. You’ll then configure “users” as the list of items, and users’ contact numbers as the “field to search.”
This should index every contact number in your system and even provide suggestions as a user is typing.
When a user chooses the contact number they want to add, we’ll then have to build another workflow from our add users button. This automatically adds that number to the existing list of contacts.
This workflow will then be a basis to make changes to a thing.
In this scenario, we’ll add the search box’s value, automatically changing the current users’ contact.
Furthermore, we’ll have to add the current user into their list of contacts by making changes to the receiving user.
When this workflow becomes functional, the new contact will be added automatically to the repeating group for both users on the contact page.
When a new contact is added, we’ll have to build a different workflow to establish a new chat when, on the contact page, a new profile is selected. Just like our homepage, this workflow is triggered by an event when an element among the top grid is selected.
In this workflow, we’ll, again, have to create a new thing.
This new thing, as expected, is a new chat. In this event, we’ll also add the current cells users and the current user as the participants for the chat.
Lastly, we’ll lead the user to the chat portal page that simultaneously sends data from the recently created new chat.
Sending and showing messages
The last feature we’ll have to develop for our MVP messaging app is the function to not only send messages between users but also display these messages in a chat.
You can do this by configuring the page type to be a chat on the chat portal page. This allows Bubble to register this content type on the page. As you progress, another repeating group should be added to preview the list of messages found in the current pages chat.
Once you’ve established which content to show in every grid, we’ll then have to establish the workflow to send messages here
To do this, begin by developing a workflow when a user clicks on the send button.
Begin this workflow by creating a new thing, this thing being a message. When developing this, match the message content field in your database with the multiline input element.
When a new message is built, we’ll also have to create supplemental steps that include this message to the “current chat.” This is done by making changes to a thing, with the thing being the current pages chat.
In this scenario, the “add the message” we created, in the beginning, should also be added to the “current pages” chat to make it work.
And there you have it!
A functional messaging app you can build without having to code at all! Are you interested in developing a program like this? We’re the agency to partner with!
If you have questions about how to use Bubble or have apps you want to build, check our courses to learn more about building your app.
(Source and screenshots from: https://bubble.io/blog/build-whatsapp-clone-no-code/)
