How To Build A WhatsApp Clone With No-Code Using Bubble

over on my homepage here i can see i have a list of chats with all my contacts and i can also see that there is a count of how many unread messages i have within each chat if i was to then select to open up that chat i can see that all of my own messages are displayed on the right hand side of my page and all of the other contacts messages are displayed on the left then if i was to send a new message it would add that entry into our chat and continually display it on the right hand side of our page [Music] hello my name is lachlan kirkwood and today i'll be teaching you how to build a messaging application like whatsapp entirely out of no code using bubble if you're not familiar with bubble it's by far one of my favorite no code tools as it allows you to build completely custom applications without writing a single line of code i love that it gives you complete control over your own custom database the design to create your own interface the workflows to stitch your application together and also the ability to integrate with third-party tools and services for those of you who don't know me i'd spent the past year working with the bubble team to write their how to build blog series this series took a list of the top products out there on the market like airbnb uber and instagram and explain the step-by-step process to rebuilding these with bubbles tool while this series helped thousands of no-coders across the world build their application i wanted to create my own video series and explain each of the steps in more specific details of course i would just like to note that this series has no affiliation with bubble at all and something that i'm doing within my own time within today's tutorial though i'm going to be walking you through the process of creating a whatsapp clone this will include features like registering user accounts creating new contacts and chats within our application displaying a list of user chats on a home page screen allowing users to send and receive messages within our application followed by a feature that will display notifications for any unread messages within a chat and then finally a feature that will allow us to create a navigation menu between each page in our application there's plenty i want to cover throughout this build so grab your bubble editor and let's get started the first feature i wanted to cover within our tutorial today isn't actually a core feature that users will interact with throughout our whatsapp application instead i just wanted to take the time to run us through the process of setting up and configuring our own custom database in bubble which of course will be used to power the rest of our application now throughout this tutorial today i'm going to be keeping a list of everything that i'm working on within a notion dock here and i'll be sure to make a link to this template accessible but within this dock i like to just keep a list of all of the different data types and fields i'll need to add as well as all of the features i'd like to cover and what i love about notion is that it just allows me to keep a active checklist of everything that i'm working on and i can of course check these items off as i finish adding them into my bubble application it just helps me keep a good track of where i am throughout my build one thing i would just like to note though is that at any point throughout this tutorial today if you find yourself getting lost or if you're a little confused at times i'd strongly recommend that you pause the tutorial and re-watch any steps before moving forward as it's always detrimental to try and understand the content that i'm trying to walk us through so before we jump into bubble to create the custom database i just wanted to give you an overview of the data types and fields that i have here this database in comparison to some of my other builds is actually quite small and straightforward to build in this case there's only three different data types there's the user so people who are registering accounts there is a chat and then within that chat we're going to have messages that are sent and associated with the chat between two users and now of course i'll be walking us through all of the necessary data fields within each data type as i add them into my database so if we open up bubble and head to our data tab here on the left hand side the first thing you'll notice is that by default bubble actually has a user data type pre-registered for you you won't need to create this separately and by default this data type will have an email and password field registered within it so you won't need to create a data field to store those values one thing i did just want to point out though is that you will also notice that bubble has also added a set of privacy rules by default to the user data type and if we were to click on those it'll open up our privacy tab and just explain it the rules that it has created and so what this essentially means is that users who create anything within our database will only be allowed to see the content that they have created not the content that others have created and because we're creating an external facing messaging application we obviously want users to create and send messages to each other that they can view so in this case i won't want this privacy rule to be applied to my user data type so i'm going to delete this from our database and you'll need to make sure that you follow this process as well because if you don't manage this privacy setting what you'll find is when you preview the application you'll quickly see the content created from accounts that you aren't logged into won't actually display for you and then it's quickly to jump to a conclusion and just assume the bubble is broken or there's a bug within your editor whereas that's not the case what you need to do is just properly manage this privacy rule here and once we've managed the privacy rule there is one last thing i'd like to show you and that is that you'll need to uncheck this box here to add privacy rules to any additional data types you create within your database because if this box is checked what you'll find is that you'll have the similar privacy rule attached to any other data type meaning that not all users will be able to see the content that has been sent to them but from here what we can do is start to build out the data types and fields within our database and of course if you've had any experience building in bubble before you'll know that you'll need to add the different data types in first so that way when you're creating the data fields you can easily reference any other data types to create a relational database but again i'll be explaining that in full detail as i walk us through this process so if we jump into our notion doc here as i mentioned before i have three different data types there's the user the chat and the message i'll need to add each of those into my editor here so i'm going to add in the chat and then finally i'll add in the message and now from here we can start adding in the data fields within our user data type so if i jump into notion i'll just highlight all of the data fields we'll need to add in so i'll start by adding in the name of the user so whenever a user registers an account i'd like to store a name within them that we can reference at any time and this field type will just be a text field it's pretty straightforward so we'll just create that i'd also like to register a phone number for a user which is very similar to the real world whatsapp application so i'm just going to type in the word phone number and this field will actually be a text field type not a number and i'll be explaining why we're doing that later on throughout our build but i'll just create that for now and then for our users i'd also like to store a profile photo so this field type will just be an image i will create that and while we're here i'd also like to register an about field about this user so this could be something like a tagline or a bio so this will just be a text field again and then finally i'll need to register a list of contacts that this user has so these are the people that the user can message throughout our application and so when i create this field i'll be calling this contacts and this field type will be a user only this time i'm going to be selecting this option here to make this a list with multiple entries which just means that a user who's logged in will have a list of contacts which will be a list of other users so i will choose to create that and then i can jump into notion and just check off that i finished adding in all of the data fields for our user data type next we can move down to our chat data type and this again is a pretty straightforward data type to create if i open up bubble here i'll select our chat data type the first field i'd like to register is the users who are associated with this chat so of course there'll be two users who can send messages to each other so i'll be calling this field chat users and similar to before this will be a user field type and of course there's going to be more than one user in this chat so this will need to be a list with multiple entries i will create that and then the last field i'll need to register for the chat data type is just a timestamp which allows us to recognize when a user has last opened the chat and throughout our build today we'll be using that to create chat notifications so that way we can store a list of how many messages have been sent within a chat since a user has last viewed it so i'm going to create a new field and i'll be calling this last viewed by user and this field type will be a date because i would like to create a date and time stamp for this field so i'll choose to create that and that's all we'll need to add into our chat data type so we can jump back into notion we can check those off and then finally the last data type is just the message here so i'm going to open up our database again select the message data type and the first field that i'd like to register is the chat that this message will belong to so every time a message is created within our database i'd like to store that with a particular chat between two users so that way later on in our build we can display a list of all of the messages that belong to every single unique chat so i'm going to create a field here and i'll be calling this chat and then i would like this to link to the chat data type and this is where you can start to see that we can create a truly relational database within bubble because now we're referencing the separate data type which is also a chat and i'll be explaining that once again in more detail when we get to the process of creating a message in our build but for now i'm just going to create this data field and then finally the last data field within our message is just the content of the message itself so this is the text that someone will add to a message that's then sent to another user so i'll be creating a separate field and i'll be calling this message content and this will just of course be a text field type i'll create that and that's all we'll actually need to create within our database so if i jump back into notion i can check off the data fields for our message data type as i mentioned before this database is actually pretty straightforward in comparison to some of the other builds that i've created of course if you would like to store any additional data let's say within the user's account i'd recommend pausing the tutorial now and taking the time to just add in any additional fields you might like but for now i'm happy with adding in just the three data types and you'll start to see soon throughout our build how we'll be referencing these whenever we create a new feature after we're finished configuring our database we can move on to the list of features that i have laid out for us today and you'll see that the first one isn't actually a core feature that users will need to send or receive messages but instead it's just going to take the time to build out some of the underlying features we need to actually power our application and the first one we'll need is the ability to register new user accounts within our platform thankfully this is a fairly straightforward process so let's jump over into our bubble editor and i'll show you how we can get started over in my new editor here i'm going to select to create a brand new page within this application so i'm going to select from the page drop down menu in the top left hand corner here and i'll be choosing to add a new page i'll be calling this page register and i'll choose to create that and then the first thing i'll be doing on this page is just reducing the dimensions of it so i'd like the width of this page to roughly resemble a mobile device and then i could also just extend the height down a little bit as well and like i do within all of my tutorials i'd also just like to update the background color temporarily just to a light shade of gray just so when i'm adding any input elements onto this page i can see where they sit within the dimensions of the whole page itself and now once i finish adding in the page dimensions and the background color i'm going to add in our first element and in this case it's just going to be a static text element at the top of our page and i'll update the text displayed within this element to display the word create account and then i also need to update the style of this to be a h2 style heading i'm not too concerned about the actual overall design of an application today instead i want to take the time to focus on the workflows you'll need to actually power your application but if you would like to create your own custom styles i'd recommend just pausing the tutorial here and adding in your own custom heading style i'm just going to use the default h2 heading style here to save us some time throughout this build but once i've finished selecting the style of this heading i'm just going to reduce the width of this text element and then center this horizontally in our page and then what i'd like to do is just copy this heading and then drag this down to the left hand side of our page because i'll also need to update the text within this heading to display the word name and then below this i'll be adding in an input field on the page where a user can add the details of their name that they'd like to register for this account so i'll be heading over to our visual elements here and select from an input field i'll drag this out across our page and i'll be updating the name of this input field to be called input name and the content format for this input field will just need to be the default text option as we'll be storing a text value within it the only thing i would like to do is just quickly edit the default style of this input field and just update the roundness of this to be 20 and you'll see that that just makes a small minor tweak on the input where it looks a little bit more clean but that's one of the few design changes i'll be making throughout the build today and once i've added the input field in i can just move our static text heading across the page just so it sits flush with the round border of our input and then from here what i'm going to do is copy both the heading and the input field i might just quickly move that heading up to pixels and then i'll just copy that i'll drag this down and in this instance i'd like to now register the user's phone number so i'll be updating the static text here to display the words phone number and then i'll need to select the input field here and i'll be updating the name of this to also be phone number now although we're registering a phone number i still want this content format to be a text field type because that's how we have stored that within our database and now that we've added in the phone number field i'd like to copy both the heading and the input once again i'll drag these down and in this instance i'll need to now register a user's email address this is a requirement if you are creating user accounts within bubble so i'm going to update the static text here to display the word email and i will update the name of this input field to also be email and the one thing i'd like to note at this point is that we'll also need to update the content format to not just be a text format but in this case it will need to be an email option and what that will do is allow bubble to verify that the email address they've added in is valid and it won't allow a user to proceed throughout this page until they have added in a valid email address and then finally i'm going to need to add in one last field and that's going to be the password of this user's account so i'm going to copy both the heading and the input field again i'll drag this down i'll update the static text here to display the word password and then for our input field i'm going to update the name to be called password and similar to before when we updated the content format i'm going to select the next option which will be the password content type and what this will essentially do is just hide the characters that are displayed within this field and that's all of the input forms i'm going to need to add onto this page there's not a whole lot that i need to register immediately when a user creates an account as i'll be showing you in a later module throughout our tutorial though we can create a dedicated settings page that will allow a user to add additional information to their profile like a bio or a profile photo as well as update all of the existing data that they've added when they created an account the last thing i would like to do to this page though is just scroll on up to our visual elements and add in a button element into the middle of the page here and i'm going to update the text that this button displays to display the word register and i am just going to quickly make a few minor tweaks to the style of this button i'm going to choose to edit the style i'll be pasting in a green color code which is similar to the whatsapp color if you'd like that color code it's 25d 366 and then i'm also going to just update the roundness once again of this button to be 20 just so it has some curved borders i'll then jump back into my design tab i might just expand the width of this button choose to center that horizontally and just move that upper tab on our page and now what i can do is create our first workflow within our build today so when a user has finished adding in all of the details into our input fields they'll select this button and in that instance we'd like to run a workflow that registers their account within our database so i'm going to select to create edit a workflow when our registration button is selected and within this workflow i'm going to select from the account option here and i'll be choosing from the next first option beside this which is the event to sign a user up and what you'll see now is that bubble will require an email and password to be registered when this account is created so i'll need to match the data that's stored within our input fields on the page with the relevant fields within our workflow editor here so i'll be selecting that the email field will need to be the same value as the input email field that we added on our page and then i'll be doing the same for our password so the password that we'll be storing in our database for this user's account is the same value that is in the input password field on our page now what i also love about this step within the bubble workflow is that you can change any other additional fields that you'd like to store for this user's account so you can choose to change another field within your database for this user and we can select from any other field that we have stored within our database for our user data type so in this case i'd like to register the name of the user and this of course will be the same value as the input name field on our page and then finally i'd like to register the user's phone number so i'll be selecting that the phone number in our database we'll need to equal the same value as the input phone number field on our registration page and now before we jump ahead and preview what this experience looks like within our bubble development environment there's one last feature i'd like to add to this page so as i'd mentioned we'd only currently registered for fields within our users account right now and to allow a user to add any additional information to their profile what i'd like to do is create a dedicated settings page within an application and i'd like to actually send a user through to that settings page after they've registered an account just to prompt them to update any additional fields within their account that they'd like to store so i'm going to first of all start by creating a new page within our application so i'll be heading to the drop down menu in the top left hand corner and i'll choose to add a new page and i'll just be calling this the settings page i'll create this and then at this point in our tutorial i won't need to make any changes to this settings page right now i'll be showing you how to do that later but what i would like to do is just jump back over to our registration page open up our workflow editor select the workflow that we had just created where we were signing a user up and what i'd like to do now is add an additional step in this workflow that now sends the user through to our settings page to allow them to update any other additional information they'd like to store within their account so i'll be selecting from the navigation option here and i'll choose the go to page event and in this case i'll just need to set the destination page to be the settings page within our application and i won't need to actually send through any data at this point there will be instances later on throughout our tutorial where we're opening up chats and messages where we will need to send data but i'll be explaining that in as much detail as i can when we reach that point for now though i'm happy with how this process has been set up and configured so let's jump over into our development environment and preview what this whole experience looks like so over in my bubble preview here i have my registration page with all of the input fields that i just added so i'm going to create a new account i'll add in my name lock on kirkwood i'll add in a random phone number i'll also need to add in an email address and you'll see that bubble will verify that email address and then finally i'll need to add in a password and once i've added in all of my details i'm going to select the registration button here that workflow will run and now you can see we've been redirected through to the settings page within our application back in my notion checklist here i'm going to check off that we've finished creating our first feature of our build today which was the ability to register user accounts and throughout that experience i not only explained how we could register a user's email and password but also how we could register a user's phone number which if you're familiar with whatsapp you'll know is a pretty detrimental feature that we'll be using later on and then finally i also explained how we could create a redirect through to a settings page once a user has registered an account the next core component in our build is finally going to focus on a core feature that users will interact with when creating a new chat within our whatsapp application and throughout this process i want to highlight how you can not only create a new chat between two users but first of all explain how users can also add contacts between each other's account on our platform there's a little bit involved throughout this specific process so be sure to watch as i walk you through in as much detail as possible but i would just like to reiterate that if you find yourself getting lost at any point take the time to pause the tutorial and re-watch any parts until they make sense but from here let's jump into our bubble editor and i'll start walking us through the process over in my bubble editor i'm going to need to create a new page of our application and this will actually be the home page where we're displaying a list of all the chats that a user is involved with so i'm going to select from our page drop down menu in the top left hand corner of our editor and i'll choose to create a new page and this page will just be called home i'll create that and the first thing i'll be doing on this page is of course just reducing the width of the page just to resemble a mobile device i can also expand the height of it as well and i'll also update the background color just to be a light shade of gray so when i'm adding any white elements onto the page for now i can just see where they lie in comparison to the page dimensions i might also just expand the width out a tad there and now the first thing i'll be doing is just adding a static text element into the center of our page at the top and this will just display the word chats i'll update this to be a h2 style heading i will reduce the width of that element and then center that horizontally in our page and as i mentioned right now we're going to focus on building out a feature to create a chat before we then focus on displaying a list of all those chats on our home page here that a user can click through to so in order to start the process of creating a new chat i'm going to add an icon onto the top right hand corner of my page here and i'll be updating the icon to be a pencil icon so if i just type in the word pen you'll see here there is a pencil icon which just resembles the create button within whatsapp and then while i'm here i'm also just going to remove the standard style for this icon just so i can update the color with a blue color code which is similar to the color code that's used within whatsapp if you'd like that code it's 3741fa and now when this icon is clicked what i'd like to do is display a pop-up element on our page that would showcase a list of all of a user's contacts in which they can then choose to create a new chat with and on that list i'd like to display only those users who are contacts that don't currently have an existing chat with the current user who's logged in and the reason i'd like to do that is because on our homepage here i'm going to be displaying a list of all of those existing chats so i don't want someone to be able to create two chats with the exact same person i'd like to keep those centralized within one single chat and i know that might sound confusing right now but it'll make a lot more sense as i walk us through the process so from here what i'm going to do is just first of all move my icon over to the right hand side of our page and then i'll be selecting from our containers menu here and i'll choose to add a pop-up element onto our page and if you're not familiar with pop-ups they're just a great way to display any static or dynamic information without having to redirect a user through to a separate page so this is currently being displayed over our home page and if a user clicks away it will simply just hide that pop-up and at any point that we'd like to display that pop-up we can reference it within a workflow which we'll be doing later so when this icon is clicked it will display that pop-up and now because pop-ups aren't displayed on the page by default we'll need to scroll up to our elements tree menu here and when it's closed we'll need to select the eye icon which will then display this pop-up and on this pop-up i'll need to give it a name i'm going to be calling this pop-up create chat and similar to our home page the first thing i'll be doing is adding just a text element at the top just so the user knows what exactly they can do on this pop-up and this static text will just display the words create chat i'll update the style of this to be a h2 style heading i'll reduce the height and width of that element and center that horizontally in my pop-up and now below this heading what i'd like to do is display a list of all of the contacts that a user has stored in their profile and as i mentioned when they click on a particular user's name it will create a chat with that person if one doesn't yet exist but before we get to that point we're going to need to also create a way to add a new contact to this user's profile because at this point they don't have any registered contacts that they could get in touch with and so in order to create an experience like that i'm going to add an icon element onto my page i will drag this out and i'm going to search for the word plus and i'm going to select this plus icon here i'd like to once again also remove this style of this icon so i can paste in my custom color code which is the same blue as the previous pencil icon and then beside this i'd like to just add some text that will trigger a workflow when it is clicked so i'm going to copy our text heading here drag this next to our plus icon make it relatively centered in comparison to it as well and then i'll update this to display the words new contact and i'll need to expand the width of that element out and from here what we'll need to do is create a workflow when this text element is clicked and i'll actually be referencing another pop-up element which will allow a user to search for a phone number and add that to their contact list but just to help first of all illustrate the experience i'm going to create so it makes a bit more sense i'm going to first just add a list of all of the users who are a contact of the person who's currently logged in so i'm going to scroll on down to our repeating group element here and i'll be adding this in and if you're not familiar with repeating groups they're a great way to display a list of dynamic data that you have stored within your database so a user will have a list of contacts that they have stored within their account and that is a list of users so what a repeating group can allow us to do is actually display each single entry of every single user on that list and the way a repeating group works is that it can reference the data you have stored within your database you'll first just need to configure what particular data you'd like it to display so i'm going to select the type of content i'd like to display within this repeating group to be a user and then what i'd like to do is display the current user their contacts which if you remember in our database is saved as a list of users so now all of those contacts will be displayed in every single row of our repeating group i can then also update the layout style of our repeating group to be extended vertical scrolling meaning it will extend or retract based on how many entries are stored within our database and i'll update the number of rows for now to be three and now within our repeating group what i can also do is choose to dynamically display any elements which can reference the list of users who are the current person's contacts so i could display their profile photo and their name and in order to do that i'm going to start by adding in an image element into our first repeating group cell here and what i love about repeating groups is that once you've added the dynamic element into the first row it will automatically replicate that across every other row and i'll show you what i mean so i'll insert dynamic data here and i'd like to display the current cells user so this particular contact i'd like to display their profile photo and you can see right now that it has replicated this data across every other row within our repeating group what i'd also like to do while i'm here is just make sure this image is square so i'm going to set the dimensions to be 50 by 50 and then i'd also like to update the roundness of this to be 100 so that way it is a perfect circle again and then i can move that up into the top left hand corner of our repeating group row and now beside this what i'd like to do is just add the name of this current user so i'll add in a text element i'll insert dynamic data i'll just be selecting the current cells user their name and like any other text element i can choose to open up our rich text editor and if i'd like i can highlight this text and choose to bold that so now the name will be in bold formatting i can then also just close off the height of that text element and move that in line with the center of my profile photo there and then while i'm here i'll also just move those across a tad so they're in line with my new contact button here and i will just close off the remaining height at the bottom of our repeating group cell just so there's not any empty space between each entry and so if i was to backtrack to the icon and the new contact text that i've added what i'd like to do from here is create a way to add a new contact when these elements are clicked and then when that contact is added to this user's account it will automatically display within this repeating group here meaning that the current user would then have an option to create a chat with this person and the way i'll be creating a new contact is by leveraging yet another pop-up element so when this text is clicked i'd like to close this existing pop-up that we're working on and then display another pop-up element which will contain a search field that we can just search for users by their registered phone number so what i'm going to do right now is just close this current pop-up and i would like to add another pop-up onto my page this one's only going to be a relatively small pop-up in comparison to the previous one and i'm going to name this pop-up new contact and like before the first thing i'll be doing on this pop-up is just adding in a static text element just to give a point of reference to what the user will be doing on this element and this text element will just display the word new contact i'll update this to be the default h2 heading style like before i'm just going to reduce the height and width and center that within my pop-up here and now from here i'll be copying this heading i'll drag this down and i'll update this static text to display the word contact number because below this i'll be adding in a search field where we can search for phone numbers i would just like to update the styling of this text though from the h2 style to now be the body style and i'll just open up our rich text editor and choose to bold that text and from here i can just reduce the total height of it i just don't want it to be too big in comparison to our main heading there and as i mentioned below this i'll be now adding in a search field that will allow a user to search for other users on our platform based on their registered phone number so i'm going to scroll on down to our input fields and instead of just selecting the regular input field i'm going to choose to add in a search box and the main difference between a regular input field and a search box is that a search box can dynamically pull and reference data stored within your database so in this case today i'm going to be searching through a list of all of the registered users on our platform based on their phone number that we have stored so i'm going to be updating the name of this search box to be called search box user contact and i will leave the choices style here to be a list of dynamic choices because as i mentioned i'll be searching dynamically through the data stored in our database but what i'll need to do is to find a list of options that i'll need to search for so of course as i mentioned i'd like to search for all of the users in our platform and once we've identified that we're searching for a list of users i'll need to configure which particular field in our user data type will be searching for and in this case today it's going to be their phone number meaning that whenever we type a phone number within this field our application will recognize that value and match it with any other phone number that's currently stored within our database and then of course we can reference the user at any time that that phone number belongs to while i'm here though i'm just going to quickly edit the style of this search box just so the roundness of its borders is 20 just meaning it'll have the curved edges once again i can then just move that up slightly across maybe drag that out a tad and just move my heading above that so it's in line before the curved border and that's the only input field we'll need to add on to this pop-up what i will now need to do though is choose to add in a button element so we can actually save this new contact within the user's account so i'll just drag a button element out here and i'll just choose to add the text save i will then center that horizontally in my pop-up and just close off some of the empty space at the bottom of my pop-up and now what i'll need to do is create a workflow when this save button is clicked that will save the contact who's currently stored in this field to not only the current user's list of contacts but i'll also need to save the person who's logged in adding this user to the list of that user's contacts as well so i'm going to start edit a workflow when the save button is clicked and what i'd like to do is choose from our data tab here and i'll select to make changes to a thing in our database the thing i'd like to change is the current user so the person who's logged in currently adding a new contact and what i'd like to do is change the contacts field that they have stored in our database so if you remember that's a list of users and what i'll need to do is choose to add something to that list and that something will be the value of our search box so if you remember our search box was storing the value of a user so we'll just be adding whatever user is stored within the search box at the time based on their phone number to the list of the total user's contacts what i'll also need to do though back in my workflow editor is make changes to the person who currently is being indexed within the search box because i'd like to also add the current user to their list of contacts so i'm going to add an additional step within my workflow here i'll once again be choosing from the data tab and the make changes to a thing option and the thing i'd like to change is the person who is currently being featured within our search box so it's value which of course is a user and i'd like to change their list of contacts now only this time i'll be adding to it the current user so the person who's logged in making this contact and now after both of these users have been added to each other's contact lists we'll need to display the previous pop-up that we had created which will allow a user to finally create a chat so in my workflow editor i'm going to select to add another step in our workflow here and in this case what i'd like to do is hide this pop-up that we're currently viewing so the new contact pop-up and then display the previous pop-up where we were creating a new chat so i'm going to first select from the element actions option and what i'd like to do is choose the hide option and i'd like to hide the new contact pop-up which is the pop-up we're currently working on and once that pop-up is hidden i can choose to show the previous pop-up so from my element actions option here i'll choose the show option and in this case i'll be showing the create chat pop-up which was the pop-up we had previously referenced so if i jump back into my design tab now i can close this pop-up while we're also in the process of showing and hiding pop-ups i can create a workflow when our pencil icon is clicked here that displays our first create chat pop-up because at the moment there's nothing referencing that this should be displayed so i'm going to select our pencil icon here i'll start edit a workflow and i'll recognize that when this icon is clicked i would like to show an element and that element will be our create chat pop-up and then back in my design tab again i'm going to need to open up our create chat pop-up here because i'll also need to create a workflow when this title here is clicked and within that workflow i'll be hiding our current pop-up here and then i'll be displaying the create contact pop-up so i'll open up the chat pop-up i'll select the title here i'll choose to start edit a workflow and what i'd like to do first of all is hide the current pop-up so under our element actions option i'll choose to hide an element the element will be the create chat pop-up which is currently what we're viewing and then from here i'll need to show another element and that will be our new contact pop-up so i know the process of showing and hiding those pop-ups can seem a little tedious but it's essential in order to just create a smooth and seamless user experience for our users in the case that they are not only creating a new chat but also adding a new contact to their account now what i'd like to focus on next if i open up my design tab is building out the process where we can actually create a new chat whenever the name of a contact is clicked within our chat creation pop-up so i'm going to select on the name of the contact that'll be displayed within our repeating group here and what i'd like to do is start edit a workflow and within this workflow it's a pretty straightforward process to create a new chat what i'll need to do is head to our data tab and this will be the first instance where we use the create a new thing option because at this point in time this chat doesn't yet exist in our database and so the type of thing i'd like to create is a chat and within this chat i'm just going to need to register both of the users who will be adding to it so i'll be selecting that the chat users which if you remember in our database was a list of users we'll need to add to it first of all the current user so the person who is creating this chat and then i'll also need to add the contact of the person who they're selecting which will be the second user within this chat so i'll select the chat users once again i'll be adding to that list we'll now need to also include the current sales user of our repeating group and now once a chat has been created what i'll need to do is create a navigation event that sends this user through to a dedicated page where we can host the messages within that chat so i was like to add another step within our workflow here are we choosing from the navigation option i will use the go to page option and the destination page at this point doesn't yet exist so i can choose to create a new page i'll be calling this page the chat page because this is where we'll be hosting the messages within a chat and now before we select the chat page as our destination page there's one change i would like to make to that so if we jumped over to our page drop down menu here we can open up that new chat page we had just created and now at this point there should be nothing on this page right now it should be blank the only change i'd like to make is updating the type of content that we'll be displaying on this page so because i'm going to be displaying messages within a chat i would like to recognize that we will need to store a chat on this page at any given time which means that back in our workflow when we had created a new chat on our home page here i'll just open up my workflow editor and if i open up the workflow we were just in i can select that the destination page will be our chat page and now you'll see the bubble will require me to send through some data of a chat to that page and that data of course will be the result of step one in our workflow which was the new chat that we've just created and after we've created a chat i can open up my design tab again and i just like to reference at this point that on our pop-up where we are creating a new chat we have a list of all of the users who are contacts of the person who's currently logged in and of course when a user decides to create a chat with this contact they'll click on their name and it'll create that within our database but what we'll be doing in a later module is also display a list of all of those active chats on our home page here within a repeating group which means that once a chat has been created with a contact i would like to remove that contact from this list as they will now be featured on our main home page under a separate list of all of the active chats and now this is one of those small details which is quite crucial within your build just to create the same experience to the whatsapp application so i just wanted to make sure i take the time to run through this in good detail and in order to create this experience we'll need to open up our create chat pop-up select into the repeating group here and update the data source that we're displaying so if you remember at this point in time this repeating group is just displaying a list of all of the current users contacts and what i'll need to do is actually remove any of these contacts from this list that already have an existing chat with the current user so once a chat has been created i'd no longer like that user to be displayed within this list of potential users that a user could create a chat with and the way i'll be doing this is just by selecting from the more option on our data source so after we've searched for all of the current users contacts i would like to remove from it the users who currently have a chat with the current user so i'll be typing in the word minus and i'd like to select the minus list option because in this case i'll be removing a list of users from our existing list of contacts and the contacts i would like to remove from this list are those who already have a chat with the current user so in order to recognize that i'm going to do a search through our database and search for all of the chats where the chat users contains the current user and then i would like to select to remove from it all of the users within those chats so that just essentially means that if anyone has an active chat with the current person who's logged in they're no longer going to be displayed within this repeating group and now by this point now module that pretty much summarizes the experience of creating a new chat as well as being able to add a new contact within a user's profile but there's one last minor feature i'd like to add to the current pop-up that we're viewing here and that is a search functionality that allows a user to search for a particular contact and then create a chat with them or view their existing chat and the reason i want to do this is because let's say a user has a few hundred different contacts it might just be hard to manually scroll through and find the right contact to create a chat with so as an alternative we can just use another search box and create a feature that allows them to search through a list of all of their contacts and i'll be adding the search feature right below our first initial heading there so i'm going to select all of our elements on our page and just move these down a tad and then i'll be scrolling down into our input forms and i'll be once again adding in a search box onto our pop-up and i'll be calling this search box contact and similar to before i'm going to leave the choice of style of this search box to be the dynamic choices because i'll be searching through a list of all the users within our database i will just need to define which particular users i'll need to search for so i'll select the type of thing to search for as users and then i'll be adding a constraint onto this search to only search and display these users who are a current contact of the current user so i'll be adding a constraint and i'll only display those users who within their list of contacts contains the current user so the person who's logged in and this just means that those two users are already acquainted across our platform which means of course they can then create a new chat so i'll close that search and in this instance i'd like the field that was searching to be the name because by this point we no longer need to search for their phone number as we've already added these users through that field but i'm just going to quickly move this search field down and from here i'd like to create a workflow that recognizes when a user has been searched within the search box and then i'd like to either create a new chat with this user if a chat doesn't already exist between the two users in our application and if the instance that that chat already does exist i'd like to just send the user through to that chat page without having to create a duplicate chat in our database and so the way we can create this workflow is by jumping over into our workflow editor we can select to add in a new workflow and for the trigger we're going to select from our element actions here and we'll identify it when an input value is changed and the input of course will be our search box contact which is just the new search box we've added and the first workflow i'd like to build is the ability to create a new chat if one doesn't yet exist so i'm going to select from our data tab and similar to before i'll create a new thing the thing i'll be creating is a chat and i'll need to add to this chat the list of both users so i'll select that the chat users i'll add to it the current user so the person who's logged in searching for their friend or contact and then i'll also add another user so the chat users i'll be adding to that list and in this case it will be the value of this search box so the user who is currently being searched and displayed then once this chat has been created i'm going to send this user through to that chat page so i'll select the go to page option the destination page will be our chat page and the data i'll be sending through to it is the result of step one which is of course where we've just created a new chat but as i had mentioned before we're going to need to create a condition onto this workflow that only allows this to run when a chat between these two users doesn't yet exist because i'd hate to create a duplicate of the same chat that is already happening in our application so i'm going to select the workflow trigger here and i'm going to add a condition and i'll only allow this condition to run when a chat between these two users doesn't yet exist so i'll be searching through our database for all of the chats where the chat users contains the current user and when the chat users also contains the person who's been displayed within the search box and if the first item in our database so by the first item what i mean is that because we're searching for all the charts with these two users there's only going to be one instance of that within our database so i can recognize that by selecting the first item and if in our database we perform this search and the value is empty i would like this workflow to continue running which would create a chat and then send the user through to that chat page and now what i can also do while i'm here is just update the event color to be green so that way i know that in this case we are actually creating a new chat because what i'll also need to do now is create another version of this workflow that recognizes when this chat already does exist so when this particular chat here will be not empty meaning this chat will exist i'd like to delete this step in our workflow where we're creating a new chat and instead i'd like to just send the user through to that chat page so i'm going to select to copy this workflow here i'll paste this in and because the chat already exists at this point i'm just going to update the event color to be red and as i mentioned before we're going to still be searching for the chat between these two users in our database only this time we'll recognize when that value is not empty meaning there is a chat between these two users in our database so what i'd like to do is just remove the step in our workflow where we're creating a new chat and instead i'll be sending the users through to this chat page which means that i'll just need to update the data of the particular chat we'll be sending through to our chat page so i'm just going to remove the value that was currently sitting there and similar to the condition on our workflow i'm going to need to search through our database for all of the chats where the chat users contains the current user and then when the chat its chat users also contains the search boxes value i'm going to send through the value of the first item in our database where this chat exists between these two users which of course there will only be one item in our database where this chat does exist between these two users and that is the very last workflow we'll need to create within this step of our tutorial right now what we can do is jump on over into our development environment and start to preview what this whole experience looks like over in my development environment here i'm currently logged in as the user i created before so locking kirkwood if i was to select our pencil icon here to create a new chat i'd see that our first pop-up would display and because there's currently no contacts saved in my account i don't have a list of users to contact yet so what i'll need to do is select to add a new contact you'll see that first pop-up will hide a second pop-up will display and i've just taken the time before to register another account with our application so i'm just going to type in the phone number of that account you'll see it'll register this phone number and associate it with a user i can select on this user here and i'll choose to save that person as a contact and now you'll see that this user has been added to my contact list and from here i can select on the user's name and that of course will create a new chat so that workflow will run and it will now redirect us through to our chat page and what you'll notice in the url string here is that it's sent through the dynamic value of this specific chat that's just been created but what i also want to show you is that if i jump back onto our home page now and if i was to create another chat you'll see that that contact no longer exists within our repeating group because by this point a chat has been created with them so within the next module in this tutorial what i'd like to do is just explain how we can now display a list of all of the existing chats on our home page here back in my notion doc i'm just going to check off that i finished creating the feature to create a new chat within our whatsapp application this of course was quite an extensive module within the series just because it covered so much of the critical framework we'll need to rely on once we actually display chats in our application so i'm going to just check off all of the individual features here that i ran you through throughout the process after taking the time to build out the feature where we can create a new chat within our whatsapp clone today the next feature i'd like to touch base on is just building out a way to display a list of all of the existing chats on a user's home page so these will be a list of all the chats that the current user is a member of and this is actually a fairly straightforward process to build out so let's just jump over into our home page and i can show you how we can get started on my home page here the first thing i'll be doing is just adding a repeating group element onto our page so similar to the process where we were displaying a list of contacts on the pop-up before i'm going to be displaying a list of users within a repeating group only this time i'll be displaying a list of users within a chat so for our repeating group on this home page i'll be displaying a list of all the chats which means i'll need to update the type of content to also be a chat and then i'll need to search for all of the chats within our database so i'll choose the do a search for option i'll select to search through all of the chats and i just like to display only those charts where the chat users contains the current user meaning that at least one of the members in any chat needs to be the current user who's logged in viewing their home page i'll then update the layout style of this repeating group to be extended vertical scrolling and select that the number of rows should be three and now the elements i'd like to add within our repeating group is actually information about the second person in our chat who isn't the current user so this will essentially be the details of the person who's the receiver of the current user's messages and so before i do that i'm just going to move my repeating group across the page just expand it out a tad and i'd first like to add in the profile photo of the person that this user is messaging so i'm going to select to add in an image element into our repeating group here and when i'm adding a dynamic data source for this image i'm going to need to display the current cells chat the chat users and now one thing i'd just like to point out is that our chat users is a list of users so we're currently displaying both the person who's receiving these messages as well as the current user who's logged in sending those messages and what i'd like to do of course is only display the image of the person who isn't the current user so that way no matter who's logged in they're not going to see their profile photo but instead they'll see the profile photo of the person that they're messaging so what i'll need to do is subtract the current user from this list of users so i'll type in the word minus and i'll be selecting to minus an item and the item i'd like to minus is the current user and that of course will just leave us with one user left which is the user who isn't the current user and i'd like to display their profile photo from here i can also just update the styling so this is 45 by 45 i'm happy with that i'll just update the roundness to be 100 so this image is a perfect circle and then i can move that up into the top left hand corner of that repeating group then beside this profile photo what i'd like to do is display the name of the person that this current user is messaging so i'm going to add in a text element i'll once again insert data mcdata and the data source will be much the same as the profile photo there i'm going to select to display the current sales chart the list of chat users of course i'll just be selecting to minus an item and the item i'll be minusing is the current user and then i'd like to display the only person who's left in that list their name i can also if i'd like open up our rich text editor and select to bold that text and while i'm here i am just going to actually update the size of this image here i'll make it 55 by 55 just so it's a tad bigger and then i'll just make sure the text isn't overlapping with the photo and i'll move that up so it's in line with the top of our profile photo here and now after i've added in this heading below this i'm going to add another text element which will just be a short preview of the last message sent within this chat so i'm going to grab another text element here i'll drag this out into my repeating group and then within this what i'd like to do is perform a search through our database for all of the messages where the chat that that message belongs to equals the same value as the current sales chart so the chat within the current repeating group and i'd like to display the last item within that so the very last message sent within that chat it's message content which of course is the actual text of the message itself and then what i'd like to do is just search for the word truncate because i'd like to truncate this text to 100 characters meaning that it will just cut that message off at 100 characters so that way if the message is quite long it's not going to take up too much space on our home page here and then i'm just going to make sure that this text is in line with our existing heading there of the user's name and then finally there's one last dynamic field i'd like to add into this repeating group cell and that is just the date of the last message that was sent within this chat so i'm just going to copy this heading here what i'm going to do is remove the truncated to option and also the message content so i'm going to be searching for all of the messages that belong to this chat within our database i'll then display the last message that was sent and i would like to type in the word create because i'll then be displaying the creation date of that and i would just like to format this as the shortened abbreviation of that date i can then just reduce the size of this element because it's not going to be a large field i might also just need to expand my repeating group out of tad as well as my page there and i can just move that across and i'm happy with how that's going to be formatted there and the last thing i'll need to do from here is just reduce the empty space at the bottom of our repeating group there just so there's not so much blank space below each chat and finally from here i'll just need to create a workflow when this chat is selected because i'd like to redirect a user through to the chat page and send through with them the data of this current sales chat so i'll be selecting the user's name within our chat here i'll choose to start edit a workflow and within this what i'd like to do is choose from a navigation event select the go to page option and the destination page will need to be our chat page and the data i'll be sending with it is the current sales chat and that is all i'll need to create for our home page here let's jump on over into our bubble development environment and now preview what this experience looks like so over on my home page here i'm logged in as my lachlan kirkwood user and you can see that i have my previous chat that i had created before with my test user 2 here because we currently haven't exchanged any messages there's no dynamic text here displaying the last previous message as well as the date of that last message i'll be sure to show a more detailed example of this experience once we do have some message content stored within this chat but for now i just wanted to show you how we can send the user through to the chat page as well as the dynamic value of the chat between this user and myself who is the current user logged in so i'm going to select on the user's name here that workflow will run and it sent me through to the chat page as well as the dynamic value of the chat that i had with this particular user back in notion i'm going to check off that i finished building out the home page which allowed us to display a list of all the existing chats and throughout this i explained how you could display the details of the opposing user within the chat so that was just essentially making sure we were displaying the correct profile photo and the name of the person who wasn't the current user and then finally i also explained how we could create that workflow to redirect users through to our dedicated chat page and that is all i have time for in this tutorial today if you are interested in checking out the rest of the course i'd recommend clicking the link in the description to purchase the full course within the complete course i'll be walking you through the step-by-step instructions to complete the rest of our build you can also get access to a suite of bubble tutorials where you'll learn how to build other popular products if you'd like to get started building some other popular products for free i'll be sure to include some suggested links at the end of this video thanks again for taking the time to watch and be sure to hit that subscribe button if you'd like to see any other useful tutorials to help you on your bubble journey [Music]

Channel: Building With Bubble

Views: 2,085

Keywords: Bubble, bubble.io, no-code, no code, no-code development, visual programming, buildcamp, coaching no-code apps, makerpad, adalo, webflow, zapier, no-code tools, app development, minimum viable product, MVP, Bubble no-code, software development, whatsapp clone

Id: g8_SMihPhxc

Length: 68min 18sec (4098 seconds)

Published: Thu Sep 16 2021