Build A Messaging App w/NoCode and Supabase

in today's video we're going to be building something that many of you have requested for quite a while and that is a real time group chat app we're going to be using a no code tool and we're going to be using no code with a super bass back-end for this now before we get started as always all the apps and all the resources that I demonstrate on this channel will be available to view and or clone from my patreon page and you can learn more about our amazing patreon Community via the link in the description below the video now what's nice about this project is that many of the apps out there today have some kind of chat functionality so we're not just talking about a specifically a chat app like WhatsApp or telegram all kinds of apps out there even if they perform something completely different from merely chatting do require some kind of a chat functionality so that the users can exchange change some sort of information with each other and so you can view this whole project as a feature for your future or existing app because you can simply leverage what I'm about to teach you in your specific apps and provide a lot more value to your users now before we get started it's very very important to build an overall architecture of the app so we're going to be building a real-time group chat up we are going to be using no code and Super Bass as our backend the no code tool that we're going to be using is going to be flutter flow which is my favorite no code tool now here's the basic flow of the app so the user is going to load up the app and they're going to see a list of chats okay now they can click on some button and they're gonna get a display a list of users and they can select the user and start a new chat with this user now once they do that they're gonna have a new chat being displayed here here and if they click on this new chat they're gonna go to another screen where they're gonna see messages between themselves and other people now this could be one other person or this could be multiple other people because remember we are building a group Chata now let's say while you're chatting with someone you or the other person wants to invite another person into the chat well that's also very very simple you can simply click on a button and you're going to be shown a list of users that you can add to an existing chat and once you do that the other person whom you've added will be able to see that they're part of this new chat now the next thing that I want to discuss is the database schema now this is very very important because you want to get this right because the whole app is going to be built of this okay very very important to get it right now remember we are using super base for this and so keeping that in mind that's how we are going to be building our database schema let's start off with this user info table so Superbass has a built-in users table and that table has a bunch of fields it has a user ID has a bunch of information but if you're interested in storing additional information about the user then it's not really recommended to go out and try to modify the original table what you want to do is you want to create a new table and then link this table here to the original users table and so I have this table called user info and this table is going to contain additional information about each of the users so things like maybe nickname or some of the other information that we deem valuable in this app next I want to talk about these three tables here that really make up the app right here okay the first table we have is a chats table and this table is going to represent present the individual chats because each chat can have multiple users we need to create another table this is going to be the chat users table and so the idea here these are just the chats chat users is going to link each of these chats to multiple users regardless whether it's just another person or multiple other people that I may be chatting with last but not least we have the chat messages table and this table is going to contain the individual messages and so what you should be noticing here is that we are forming relationships we have a one-to-many relationship from chats to chat users and we have a one-to-many relationship from chats to chat messages and that is because you can have multiple users as part of the chat and you're all obviously going to have multiple messages as part of that chat as well and Super Bass is a relational database is based on postgres SQL and so as a result you always need to be thinking about relationships now this right here forms the core of our database system but when you are going to be displaying different screens as part of your UI you may need to pull out the data in certain ways and the way you do it in Super Bass is you need to create individual views so that you're pulling in the data from multiple of these tables and formatting it in the way that you can display it in your views and for that you need to set up your views in Super Bass and that is why I have this one view called the chats View and this view is going to be for this list of chats here now of course as we start building the app we might be adding more views here but right now I see a definite need for this chats view right here all right so now that we looked at the apps our architecture and we also looked at the app's data schema let's go ahead and log into Super Bass and start creating our tables in there all right so here I am logged into Super Bass and I'm going to be using one of my existing projects for the app that we are building so I'm going to click here and I'm gonna go to my table view here and I'm going to start to create various tables the first table that I want to create is this user info which is going to contain additional user information that we might need to store on each user record so we're gonna come back here create a new table and I'm going to call this a user's info and I'm going to be prefixing all the tables and all the views that I'm going to be creating for this app with an a underscore okay so this is our first table right here let's go ahead and create the field now the first field that you want to create is a link to the original original user that's stored in Super Bass this is a built-in table called auth users and before you can do that you want to select the type the type is going to be uuid and I'm gonna call this a user ID and we're gonna click here and what you want to do is you want to choose all and then you want to select users here this is a built-in table provided by Super Bass that contains a list of users okay so we're going to click say and now we have a link to the original users table next you want to create the actual Fields where you're going to be storing additional information for the user now for the purpose of this tutorial I'm only going to store a nickname for now so let's say instead of displaying the user's email or something else in the chat I'm just gonna have a user's nickname okay so we're gonna going to set this as text right here and for now this should suffice later on we can add another column and store some other piece of data on a use is a record so we're gonna click save here okay so that's gonna go ahead and create this brand new table for us all right so this table has been created the next table that I want to create is this chats table so we're going to come by here we're gonna click on new table I'm going to call this chats now this table is going to be fairly simple because if you recall it's going to be these tables that are going to be linked to disabled disabled by itself is not going to be linked to anything and really the only thing that I want to store on this table here is the last message okay so I want to display that last message uh on that main chat list view so I'm going to say last message right here and I'm gonna say this is going to be text okay we're gonna click on save all right and we have this new table created next I want to create this table right here which is going to be responsible for storing the actual users that belong to a particular chat so we're gonna come back here Newt say table chart users and this particular table needs a couple of columns now this particular table is going to be storing the chat and the user that's linked to the chat so the first field we need is the chat ID and we're going to give it a type and eight we're going to link it to the table that we've just created which is this a chats and the next column we need is a user ID okay now this user ID is not going to be linked to the original auth user table that's provided by Super Bass this is going to be linked to that intermediate table that we've just created so you want to say this is going to be int 8 right here and you're going to link it to that a user's info table all right so now we have two columns here and the idea is if we add a user to the chat we are going to create another record with that specific chat ID and the user ID and that way we can add multiple users and these are just going to be multiple records there okay we're gonna click save here finally we're gonna create this chat messages table so we're gonna come here new table a chat messages now for the columns here what we need to store is we need to store the chat we need to store the user and we need to store the actual message that that particular user had sent so we're going to add a column chat ID this is going to be int 8 we are going to link it to a chats this one right here save next is the user ID and eight we're gonna link it to a users a user info right here and last but not least the actual message that the user typed and this is going to be just text alright so now we have the following tables created we have the a user info which is going to contain additional user information next we have the a chats which is the base chat table and this is going to be the table that's going to be linked to other tables via this ID next we have the a chat users which is going to store the individual users for specific chats and last but not least we have the a chat messages which is going to store the individual messages that the user is sending uh to a specific chat now when I create these Stables the next thing that I'd like to do is I'd like to populate these Sables with sample data and once I have the data I can start building the actual app and I can start to test the app to see if with the given data the app is displaying it the way I wanted to display it this is kind of how I build apps and it allows me to build my data schema and then to start to build the actual UI and quickly reconcile any of the issues that might arise with the data are not properly being synced up or displayed in the UI so let's go ahead and add a record to this a user info I'm going to create a row these are going to be filled in automatically now when I click on select record here I have a list of users and these are users that I created manually and so if you're starting with a fresh project you can simply create these users manual and so I'm going to select James here as the user that we're going to be adding additional info not say the nickname I'm just going to put J no code you know 0 0 or something like this hit save and now we have a record in this table that's linked to the actual user in the built-in super based table I'm gonna do the exact same thing for the rest of disable so in this chats table I'm gonna insert a row and the last message is let's say it's hey which is going to be updated by the system automatically chat you users let's go ahead and add a chat user record insert a row let's select the chat we've just created it and let's select the user this is this J no code and so now this chat has one user now you want to make sure that it has at least two users so what I'm gonna do is I'm gonna come back to user info and I'm going to insert another record here for another user so I'm going to select another user let's say Rob and the nickname is Rob awesome okay now I'm gonna go back to chat users and add another user for the chat chat ID is this chat right here and the user ID is Rob awesome and let's go into chat messages and add a record here so the chat ID is gonna be this chat right here the user ID is going to be J no code and let's say I sent a message called Hey and let's say Rob replied so I'm gonna add another row right here shot ID is still the same game chat the user ID is Rob awesome and he replied doing good and you and so at this point we have the initial data for a chat so we have all of these tables with some sample records and we can potentially build our app now and we can start to actually display that first chat the user can click on it and see some of the messages and that's exactly what I want to do because if this works here then you know everything is going to work because this is kind of how I wanted to design the app and this is why it's important to make sure that you know the way that you're designing it the architecture you know the stuff that we talked about in the beginning of the video means that you can translate all of this into a workable app and you want to make sure you test this Theory as soon as possible and so now let's jump into flutter flow and start building our initial screens and see if the data is going to be showing up in the right places so here I am flutter flow I'm going to create a brand new chat we're gonna call this RT group chat for real-time group chat create blank here not using Super Bass this time and here we have a blank app waiting for us to start coding so the first thing that you want to do is you want to connect your app to Super Bass you can click on settings and Integrations here click down to Super Bass and you want to enable soup base and add the fields here and for that you can simply go to your project here project settings API and you want to copy URL paste it in here and you also want to copy a non-public paste it in here get schema once you do that it's going to pull up all your tables as well as the views now I have lots of tables and lots of views but therefore different projects you can just ignore them the only tables and Views you should be focusing on are the ones that start with a underscore so it's these Sables here and then we're also going going to be adding views a little bit later next you want to enable authentication because we need to know who is actually logged in so that we can figure out who's actually sending the messages for that you can click on authentication enable authentication authentication type is super bass entry page is going to be a login page which we don't have yet logged in page is going to be the home page so it needs an entry page and so you can come back to the UI Builder add a page here new page and you can click on auth right here scroll down this is the page I like to use you can use anyone that you want I'm going to call it login click on create page so this is our main page right here and as you can see we have some errors and one of the reasons is because we have this third party auth systems here so we're going to delete that so that we can just focus on just username and password here and we're going to delete it off the login page as well delete this right here just keep it very very simple in the start okay it looks good we still have a couple of issues confirm password and entry page that we can specify so the confirm password is if you select this right here we are missing this confirm password field and that is because we don't have this field so this create account you want to select password duplicate it and then you want to click here call this password to and then you can select this error right here and select password to here and now and now you have this green check box and we still have one error and that's because we did not specify an entry page login and now we should have no errors right here okay looks good okay so this is our login page right here now for the home page we want to display a list of existing chats and there's actually a couple of really nice templates that we can use if you click on new page and you click on list there's some really really cool samples that we can use so for instance this is a good one right here select this and call it chat create page and we we have a beginning of a page that we can use for the existing chats now because the actual messages screen we're going to be building ourselves I'm going to rename this to messages chat messages right here next I want to create a page that's going to display existing users so that when you want to start a new chat you can select the user of there and for that if you click on new page there's some really good templates that we can use I really like this one user select select this right here I'm just going to say user select okay create this now this template right here is going to act like a pop-up it's not going to act like a full-blown page and in order to have a pop-up you need to convert this page here at least a part of this page into a component and so what I'm going to select is user select select this stack right here and I'm going to right click and I'm going to say convert to component and I'm going to call this a user select.com okay create component okay so now I have this component element right here I'm going to delete this user invites right here now later on we're gonna clean it up further but right now it gives us something that we can display to the user and have the user pick the actual person that they want to chat with and add them to the chat and so at this point I can delete this user select because we have the component here anyway all right so at this point we have all the pages that I foresee needing for this app I mean we can still add another page or two later on but at least now we can actually build a fully functioning chat app with the pages that we already have now the next thing I want to do is I want to test out this app and when I run this app the first page that I should be seeing is this chats page here and so let's go ahead and get this page working right now with the right data so we're going to click here rename this chats and maybe delete this for now delete this just clean it up a little bit and we have a list of chat so we can select one of these chats and then enter a group chat with other people and so hypothetically we should be pulling data from the chats table and so if we go into our chats table here we can see that the only data that we really have is ID created at and the last message we do not have any data about the users and what I really want to do is I want to display the actual users in this chat because just like in any chat app you know the chat will be displaying the users that are you know in that chat right and because this is a group chat app we're going to be displaying possibly multiple users as well but we can't pull this data directly from chats because it's not here and so what do we need to do well we need to create a view that's going to pull multiple pieces of data for multiple tables that are linked to each other and in order to create our first view you want to click here to the SQL editor and here you can enter a c equal statement that can potentially pull multiple pieces of data from multiple tables and then give you all of this data in the exact format that you need or you can ask superbase AI to build that query for you so here's a sample prompt that I used in order to create our view for us so it says here create the view to show chat ID list of usernames in the chat list of user IDs and the last chat message and the SQL statement to create this view looks something like this so we can simply execute it to create our view and now if we go into our list of tables we can see that we have a new view created so this is our a chat summary view that gets us all the information that we need and in fact when we load up this view we can see the data that we are getting back so we're getting back one record we have the chat ID we have the nickname in the chat we have the user IDs in the chat and we have the last message that's going to be set independently and so this is very very powerful because now we have the nicknames that we can display in our chat but we also have the user IDs that we can filter again so that we are showing the chance where the user is a part of right you don't want to just show any chat and so we have user readable information that you know we can just display well you know you're chatting with Rob awesome or if Rob awesome logs in it's gonna say you're chatting with Jay no code 0 0 but we also have the user IDs for filtering this is a very very helpful to us and that's the power of Super Bass is that we can create these awesome views just to give us the information that's useful to us this is what I love about Super Bass so now that we have this view working let's go back to our app and let's click here let's reload the schema here get schema refresh the schema and we should have that view right here at the bottom this is this a chat summary and if we select it you can see the schema right here and this schema is what flutter flow is going to interact with and as you can see we have a list of strings for the nicknames as well as a list of string for the user IDs that we can easily filter against okay so now that we have this view working and displaying the data that we need we can go back to UI Builder and we can actually feed it uh into the view so that we can display the data all right so I'm going to click on this list view right here click here add a backend query Super Bass query and I'm gonna select a chat summary we should probably add view at the end so that it's going to be easier to differentiate views from tables and that is something I'm gonna do in just a second click on firm confirm now before we can actually test the route we need to make sure that we have the security policies set up correctly so if you click on this user's info we see that we have no active RLS policies and you want to make sure that you have your policies set up so let's go ahead and do that right now so I'm going to click on new policy and I'm going to say full customization and I'm going to just enable everything I'm going to say allow all and click here and here I'm going to say true review save policy okay now obviously when you finish building your app it goes into production you want to fine tune those policies but right now we are testing it is absolutely fine to make sure that everything works before we launch the app okay so we have this user's info right here with a policy let's go back and let's click on chats let's go ahead and add a policy for chats as well come all true and let's go ahead and do that for the rest of the tables and this last table right here all right so now all the tables have one active RLS policy okay you don't need to do it for the views because the views are going to be pulling the data from the tables all right so now that is done we can test out our app and see if it's getting the right data all right so here's our app so I'm going to go ahead and log in and now I'm seeing the chats screen and as you can see I'm also seeing one record from the chat which is the only record that we have so if we go back to our app we can see that and so if we go back to the database you will see that in our chats view which is this a chat summary which is this a chat summary we only have one record now what's cool about this is that I can actually filter these records to make sure that it's only displaying the chats where I am the member this uh database schema makes it really really easy to do that and so if I click on the list view edit back-end query here I can add a filter and so what I'm going to do is I'm going to say user IDs that's why we have these user IDs we can say list contains and we're going to say authenticated user user ID here confirm okay and so now if you reload the app we should still see that record there because I am a member in that group chat right there you see it so this is that one chat that's still being displayed even though we are filtering by the authenticated user as long as the authenticated user is a member in that list of users in that group chat so as you can see it's there now the next thing that I want to do is I want to display the users that are part of this chat excluding myself so that way I can see immediately what is the chat about and whether I want to engage in this chat right now and so if we go back to the app we can easily do that and so first I'm going to delete this email and here I want to display the other users that are in that group chat without displaying myself and so if you take a look at this view right here you see we have two nicknames and we have two user IDs now the elements in each of these lists correspond to each other so this J no call zero zero is this is this user ID here Rob awesome is this user ID here and so what we need to do is we need to take a look at the authenticated user and then we need to display the other users and so what we can do is we can put all the other users together and then separate them with a comma so in this case and so in this case let's say I'm logged in and this is my user ID and so what that means is that this is my nickname and so what I need to do is take all the other nicknames and join them together and then put a comma between them and then use that string to display it right here in this random name okay and we can achieve all that with a custom function okay so if you come over here we can simply create a custom function here create a new function and this function is going to be called get the other users get other users okay now this function is going to take a lot of parameters okay we need to pass a list of nicknames we need to pass a list of user IDs and we also need to pass the authenticated user right now so there are three arguments that this function needs okay so we have a string which is a list right here and this is going to be nicknames and you can do nicknames list another argument is this user ID list and the last argument is the current authenticated user so the function can compare uh you know who is the authenticated user and just list the other user ID so this is the auth user right here and this is going to be a string right here not a list okay so now we have this function and this function is going to return that concatenated that joint string now I use chat GPT to create this function so I can simply copy the body of this function come back here and put it right here here I want to make sure that the body of the function references the arguments so we're going to copy this right here replace it here and take this user list replace it here and then this target word is this auth user okay so now we have this function ready next you want to click save so that the function is saved and now you have this function here one thing that you may want to do is test it out real quickly just to make sure that things work as expected so you can click here test function and here you can give a bunch of nicknames and so let's say this is John Joe and here you can have a bunch of user IDs so let's say this is user id1 and this is user id2 and then you are passing in the you the user ID of the authenticated user so let's say the authenticated user is user id2 which means that this is this user which means this is Joe so we need to respond with John so let's go ahead and run it and let's see if it works and and it gives us John back now let's say we have a couple of more users here in user ID3 and so in this case we have we're passing in user id2 this is Joe should it should give us back John and Mike let's run this and see if it works and it's giving us John and Mike and this is perfect because this function is going to display all the other users that we have all right so now that we're sure this function works as expected we can pass in the various arguments okay so we're going to pass on the nicknames list here which is this nicknames here we're gonna pass in the user list user IDs and the auth user which is uh this one right here authenticated user user ID all right click confirm and now when we run this app we should get the list of other users excluding ourselves okay so let's go ahead and check this custom function for any issues okay no issues and let's go ahead and reload our apps so here's our app and right now is display playing Rob awesome okay and that's the other user remember this specific chat here only has two users right this is me because that's my uh authenticated user user ID right here and this is the other user and so if we were to create another chat which we can actually do right now let's say I create another record here I'm going to insert another row this is Shadow ID on the same chat ID chat id1 and let's say the user is going to be another user and for that we need to add the user first to our user info table remember this is that auxiliary table that we created let's go ahead and add another user and let's go ahead and add let's add Tom and nickname is TomTom and let's go ahead and save this now let's go back into chat users insert a row shot id1 and user this is TomTom alright so now we have a group chat with three users and when we run the app we should be seeing Rob awesome and Tom Tom let's go ahead and see what is happening and as you can see now is displaying Rob awesome TomTom so this logic works and this is kind of tricky to do but as you saw it's fairly simple to do with Super Bass and the only thing we may want to change is like chat with you know robots and TomTom which is very very simple to do you can simply click here text combine combine text and you can do something like chat with and here you can put in that function there put in the arguments again nicknames user IDs and the auth user ID as well confirm confirm let's go ahead and reload this it's a slight you know cosmetic change rubber some Tom Tom okay so now we have the chat list there's still a couple of things that we need to do the next one that I want to work on is the actual chat messages screen where the user can click here and see all the messages from the users in here and then we also need to do a couple of flows so for instance this one where we create a new chat and we can select the user or users and another flow that we want to do is inside the chat messages you can also add a user into the chat as well so now let's go ahead and do the chat messages screen so we're going to come back here and we have this chat messages here it's an empty page but we're gonna work on it right now so the chat messages needs to get a chat ID right so that's the first thing we need to do is we need to grab the chat ID and that's going to be a parameter and so here you can add a parameter we're going to add a parameter and we are going to be passing a Super Bass row okay this is required and we are going to be passing the row from the previous page okay so this is going to be that view a chat summary here and I'm just gonna say chat row click confirm and now now from the chat screen we can have let's say they click on a row here and we can do an action where we are going to be navigating them to that next page the chat messages and we're going to pass that row okay so we're gonna pass this Super Bass row directly okay once we have that row we can get the chat ID we can get all kinds of interesting information there once the user is redirected to chat messages they're getting that row and this is the row they're getting right this is the scroll row and we have the chat ID so we can always get the chat ID and get the correct the data plus we have the other users we have a lot of interesting things and so let's go ahead and build out this page right here now this page here this is going to be a list to you that's going to pull up all the messages from the chat messages screen and if you go to our chat messages right here we can see disable we can see what kind of table that we're working with okay so this is going to be our chat messages and what kind of data do we need this is what you need to ask yourself every time you create a view well we need the messages uh we need the chat ID because we're going to be filtering by the chat ID but we also need the actual user nickname okay so we don't need just you know the user ID we need to create a new view that's going to grab the data pull the exact data that we need here okay so let's go ahead and create a new view so this is this a chat messages we're going to create a new view right here and I'm going to say create a view that displays chat messages info chat messages info so chat ID user ID user nickname and message we can also add chat messages created time user nickname and message okay let's go ahead and execute this let's see if it's able to get the right data alright so it came back with this let's go ahead and accept this change and this is the view and so what's happening here is this creating this new view right here and it's taken this chat messages and it's joining it with this user's info to get the nickname right so that way can display the nickname and so it's displaying the nickname from that user info table which is what we need and everything else is getting it from chat messages which is exactly what we need the only thing I want to do is I want to make sure that it's creating uh The View with the view um at the end right so we're putting a suffix view that's going to be easier to kind of find it so we have chat messages in full view chat ID okay looks good let's go ahead and run it success and let's go back and take a look at this view so if we come back here and this is our view right here and that actually it forgot to prepend it with a we're gonna do that in a second but this is our view this is what we're going to be pulling it looks good right we have chat ID we have the message created we have the nickname and we have the message the actual message so the only thing I want to do is I want to change the the I want to replace this so that it has the a prefix and so what I'm going to do is I'm going to drop this view first and I'm going to create a new view all right success let's go back here and now we see the view now we see all our tables and Views up on top so if you click here you can see that now we are viewing the view and this is so nice because immediately I see the view I see the data that I'm going to be dealing with I don't need to do any querying or anything like that I see the data this is so awesome all right so we have this chat messages uh in full view let's go back to our app but first let's go ahead and refresh the schema Super Bass get schema yes and we should see that new view right here this is the view and this is the view right here all right let's go ahead and use this View and the way that we want to structure it is well we are going to have a list view that's going to pull up all the rows from that view okay so we're gonna create a list view Here and Now inside the list view what we can do is we can and display alternate rows right so like for instance my messages are going to be on the right hand side and the other users messages are going to be on the left hand side okay but I also need a bottom kind of input for in order to send the message so let's do that first so we have a column I'm going to add let's go ahead and add another container and let's go ahead and format it so this list you I wanted to take the maximum space I wanted to be greedy right so that's why we press we we choose this expansion right here if you do this then it takes the only only the needed view but you know we want to take the maximum View and then this container right here let's go fix it up in fact we don't need the height the width because we're going to have a row right we're gonna have a roll right here and in fact what we can do is we can give it a height let's say a height of 50 something like this now inside this row we want to add an input field for the message and we also want a bot so something like this that looks good let's go fix up this input would feel I don't like this underline let's do none let's go ahead and create the button let's make it sense and right here and then you can kind of fix it up so let's go ahead this input field let's do a little bit of padding okay it looks kind of cool that looks pretty cool yeah it looks pretty nice we'll we'll fix it later but for now looks good maybe 10 is too much let's make it five okay so something like this so this is going to be our message let's make it input message here and so when the user types in the message we're simply going to save it into the uh the chat messages table next let's go ahead and create this UI here and so we have this list to here and what we're going to do is we're gonna display alternate rows so we're gonna have one row here and that row might have a container and that container is going to be displaying the actual text okay and then what we can do is we can wrap this widget inside of a stack and then duplicate the this row right here and now we have two rows inside of a stack that are going to be displayed in different positions so let's go ahead and make this Row the other users so that it's easier to refer to other users or other role something like this uh the row and this is my row okay this these are going to be this row is going to display my text here so we have other rows and what we want to do is we want to align it so the other row is going to be left aligned left Justified and my row is going to be right Justified something like this let's go fix up the containers right maybe 50 with um I don't know have it automatically expand height 50 something like this and now inside the container we can have a text all right and this one is also going to have a text and this text is going to display the actual um actual content depending on if it's my text or not my text okay first let's feed in the content for this list view click this list view click here and do a backend query super based query and whatever you want to do we want to do a chat messages no a chat messages info view that is what we want right hat messages info view okay that is what we want confirm confirm now for each of the rows we want to set a condition so if it's an authenticated user display um using this my row if it's not authenticated user then display it on the left hand side and so if we want to create the condition the condition that we're going to be using is going to be um user user ID but we only have nickname here and so what we need to do is we need to rebuild this view to make sure that we also have the user ID so I'm going to do just that right now and so here to this view we can easily add another field and the field that we want to add is this ID right here that we're going to join on the other table and here we've created the new view to also display the ID so if we go back to our tables and views we can can see that we should also have the ID in there okay so here's the original user ID that we can check if that's my message or someone else's now looking at this view to avoid any further confusion we need to change this ID to user ID so we're going to come by here open SQL editor and so we're gonna drop this View and create another one with another field and the way you can do that is where it says ID this is that user ID I'm just going to put as user ID and we get success no rows return go back to our views and now there should be no confusion what is the ID and what is the user and here we have the user IDs go back to our app and reload the schema and now we can actually do the conditions so we can come back here this other row we're gonna say well we want to make sure that the user ID is something else right so we have this user ID right now this is other row right so it should not be equal equal to the authenticated user okay this is the authenticated user ID let's do that let's copy this and this one this should be equal right here user ID is equal to this authenticated user confirm confirm all right so now hopefully we should see both messages in different places on the screen let's go ahead and compile our custom function all right so here's the app and if we click here we see this hello world and we do not see this other message even though if we come back here we have two messages and the reason we're not seeing them is because we haven't uh put a variable here so that it pulls the correct data so we're gonna go back to our UI and this text it needs to pull in the message right so this needs to get the message and this needs to get the message and here there's no text and that's why it's not being displayed and now we need to display the message alright so now we have the messages let's go ahead and reload this all right here's the app and this is the chat click here and now we are seeing the messages so it says yeah hey how are you doing good and you and if we go to our um super base here we see that we only have two messages and obviously if we had another message then it would also be displayed and in fact we can create another message by going into chat messages and let's say we also have Tom Tom is uh the Third Wheel we're gonna add a row chat ID is one user ID this is going to be Tom Tom and the messages hey I'm Tom okay say let's go ahead and reload this all right click here and hey how are you doing good and you hey I'm Tom the other thing that we want to add is the user that's actually sending the message is going to be a good idea to do that that's very very easy to do so inside these containers uh we want to have multiple um elements so you want to add a column inside of these containers so I'm gonna wrap a widget in a column and that way I can duplicate this so I want to duplicate it and I'm going to do the same thing and wrap widget in a column duplicate and so we have this message we have two messages and so let's say at the top this is going to be the user and at the bottom the message or the other way around so maybe the message first and then the user okay so message we're gonna come back here this is going to be nickname and here we also want a nickname on the bottom and so here we're gonna have a nickname nickname and here we also want the name okay so we know who is sending the message and let's give it a little bit of padding in fact this column can be nicely padded so something like with five you have a ten let's see okay so something maybe 10 is too much 5 is better we can fix that later five okay all right then let's give it some padding with the text some bottom padding five and this text five and let's make sure the container container doesn't need a height that it automatically expands containers automatically expand based on the stuff that's inside okay now the row I can give it a little bit of padding for each row so something like this okay so that's starting to look good let's go ahead and reload this and see how it looks alright chats click here there it says hey how are you Jay no code doing good at new so we can make maybe the user um smaller or maybe the text larger maybe put some italics here right it's it's up to you how far you want to take it the only thing that I want to do as well is I want to give this a rounded Corners so I'm going to go to this container and we can give it rounded corners for the container let's do that and we can come in here this border radius and we can do something like this let's go ahead and give this some padding for the row so that we can see the container let's give it 10 okay looks good and same thing for this row okay let's go ahead and reload this and see how it looks of course if you are a member of our patreon you will be able to easily View and or clone this app and modify it to your heart's desire you can do pretty much anything that you want to do and just simply plug it into your existing apps that you may be building and not need to actually code this whole thing up so we click here and here we see hey how are you etc etc okay so this flow works great the next thing I want to do is I want to do this uh send a new message flow alright so let's work on this flow where we are sending a new message and the first thing we want to take a look is the database so where are we going to be sending this message to well we have this a chat messages and the data that we need to send is we need the chat ID which we know we need the user ID which we don't know because this is from another table and we have the actual message that we do know and so what we need here is we need this user ID and this user ID is pulled up via a query from this user info table so we have this user ID we need this ID right here this is the authenticated user this is the ID and so the first thing we want to do is we want to do a query on this row level so that when we send this data we're going to have access to all of these variables we're going to have access to this input and we'll be able to send it uh into the database and so I'm going to add a backend query here and we want to query this um this table right here this is going to be this a user's info we're going to add a filter and the filter is we want to query the user ID I believe this user ID right here in fact this is the table and this is the user ID this is what we want to query so we're going to come by here and we want to say equal to authenticated use okay user ID and the query type we want a single row because we're only getting this one user okay so now we should get the whole user information we'll have that ID of the user and so now when the user clicks send we are going to have the whole um information the entire information at our disposal we're gonna come here add an action open this let's add an action and here we're gonna do insert row and what do we want to insert a row in is this a chat messages let's add all the fields we can remove these because they're automatically created for us chat ID is from that parameter right chat row and we get this shot ID okay next we have the user ID and this is what we are pulling from the user info row and here we have the user info on all we want is the ID so we get the ID and the message is the easiest part and this is this widget State input message the other thing I want to do is I want to clear I want to clear the text field okay so when they send the message we don't want that message to still be displaying there it should be cleared another thing that we want to do is we want to refresh the database so you can simply type refresh refresh database request and you can select this list view here this is what we want to refresh okay so now we have this flow here this label here let's go fix that we don't really need that kind of self-explanatory right this enter message something like this all right let's go ahead and run this let's do a Reload and let's see if it works all right there's the chat click here and we have the messages and now we can enter a new message and it should appear here hopefully I am doing awesome Okay click Send and there's our message perfect let's go back to Super Bass and let's take a look at our messages and this is our messages View and as you can see it's here and that is because it's obviously also in chat messages okay so if we come back here we should see this message here right and another thing that we can do and maybe we'll do that later is to display the sign when was that message percent because we have the Creator created a field on each record so it's going to be very very easy to display the time in fact let's do that right now while we still remember so let's go to this column let's go ahead and duplicate this and I'm going to get my created ads we're gonna format it is Data format and I want to do relative here and same thing here duplicate and I'm going to do created add and I'm going to say confirm and you can also make it a little bit smaller so maybe on size 12 come back here all right now let's go ahead and reload this and see how our newly improved chat messages screen looks like all right there's the app click here and there you see so that was you know a while ago this is recently and this is recently and obviously you can format it add some padding to it maybe it will do that I'll a little bit later I can send another another message hey is anyone here okay and there you see the message and let's also change this to maybe chat something like this and now we have a fully functioning chat screen here there are still two things that we need to do we need to have a flow where we create a new chat with a particular user and another flow where we are adding another user to our group chat okay so if we go to this chats here we already have a button and this button does not have a flow and so what we want to do is we want to display uh this user select component here and if the user selects a user they click on the user we're gonna add that user to our chat okay so let's go ahead and get this component working and for that what we need to do is we have this list view here all right so if you click on this list view you see this list you here and so what we want to do is we want to make sure it pull pulls up the right users and what kind of users do we want to pull up well the users that we want are going to come from this table this a user info okay so this table is this auxiliary table but it has all the data that we need plus the nicknames as well as maybe some additional information all you need to do is create another column and you can use this information it's it's that flexible so we're going to come back here we're gonna do a back-end query super base query and we want to do this a user info right here now here we want to make sure that we are not going to be listing ourselves so we're going to add a filter so that uh this user ID does not equal to authenticated user because there's no no point of you know working with ourselves adding ourselves etc etc that's kind of what we want and now we have a list view now let's go ahead and set this up so it has a checkbox list tile uh for the information so let's go ahead and configure this so this friend name maybe a nickname nickname um city state subtitle I don't know we can display something else or we can remove that all together and then this is an avatar we don't have an avatar you can add an avatar if you want but that is kind of what we have so far just a bunch of users and when they click on the user it's going to automatically add that user into our chat and so that user will see the chat that we've created so if I enter something in the chat it's going to be visible to both parties all right so now that we've configured this component here let's go ahead and put it into action so we're going to go to chats this icon button open this up add an action and select this bottom sheet show and we're going to select the component a user list component and let's go ahead and run the app and see if everything works let's go ahead and reload alright so if we click here we have this component pop up now of course there's some formatting issues but as you can see it is displaying the two other people it's not displaying us it is displaying the other people let's go ahead and fix some of the formatting here I'm not a big fan of just how it looks so if we come back here what I want to do is I want to make sure that this column is actually not taking up the whole Space it's only taking up the space that it needs and let's go ahead and reload this see how that looks all right click here and now it's a little bit smaller okay it's still um displaying all of this so we need to fix that let's go ahead and give it a background color we can do maybe white and let's go ahead and reload this let's see how it looks all right now it looks a little bit better it's uh it has a nice white background color let's go ahead and remove this clean it up a little bit let's come back here we don't need this progress bar or whatever that is we just have a column a user choose a contact we can delete this just gonna have one user for now all right let's go go ahead and reload this all right click here now we can select the user and that looks a lot better so the idea is we're gonna click on the user and it's going to create a new chat with that user now the way that we're going to be creating this new chat is going to be done in two steps the first thing that we need to do is create a new record in this a chats okay this is going to be this main record here and after that we are going to add this user into this ad chat users here once we have the chat because we need this chat ID here and we need the user ID as well okay let's go ahead and do that right now come back here and let's go ahead and create an action on this component here open the sub add an action and we are going to create the new chat so we're going to say insert row Sable is a chats let's get all the fields and in terms of the fields we're not going to be filling any of the fields here these are going to be just left on defaults and we just need this action output variable name a new chat row because it's going to be giving us back the row and next we're going to be doing another operation we're going to be doing an insert insert row table is going to be a chat users and here we're definitely going to be using some of these fields we can remove these ones on the chat ID we're going to take that action output new chat row ID confirm and for the user it's very very simple we already have the user record so all we need to do is get their ID from this a user's info and this is the ID right here all right so now we are creating a new chat and we are adding that user into our chat we do have an error here and let's take a look so it's telling us it needs to have at least one field okay so let's create this field here just put something like new chat okay so we have something there all right here's our app and if we click here we get get the list now if I click here it should create a new chat in the background so if we come back here we see we have a new chat here created and we also have new users placed into this chat right here the problem is it's not closing this thing right it needs to close it so that we can go back and start chatting with these people so let's go ahead and fix this right now so we're gonna go to our component open these actions and we need to make sure that it closes this Miss if you search for dismiss you have this dismiss right here and so this thing is going to close and then we also want to refresh this page the chats page so that we see this new channel so if we click here we can do a refresh refresh database request on this list view here all right so let's go ahead and reload the app see if this works all right there's the app there's our chat right here go back and let's create a new chat Let's uh talk to Tom right here now we've created the new chat but when this thing reloads we do not see this chat and the reason we don't see this chat is because we have a small box as you can see these are the chat this is the chat that has been created but we are not on this chat so we need to make sure that we add ourselves to the list of users on this chat it's not just about adding the other users it's always adding ourselves at the end as well so let's go ahead and fix this right now come back here click on the component right here and we want to select this container here open this up and as you can see we're creating the chat we're adding this other user but now we also need to add ourselves as well okay so I'm gonna do is I'm going to I'm going to copy this action here I'm going to paste it and then I'm going to add myself so I'm just going to say add myself so the chat ID is the same but the user ID is going to be us now I know my user ID is once I'm I'm just gonna put one for now okay just to make sure that it works we're gonna reload this and we're gonna create a new chat all right here's the app let's go ahead and add a new user let's say Rob and now we see the chat with Rob here now if you click here we are redirected to the chat messages screen but we're still seeing the other messages that belong to a different chat and that is because we're not filtering them correctly so let's go ahead and fix that right now come back to chat messages and here we need to make sure that we're filtering them correctly for this specific chat and so you want to select the list you and you want to add a filter in this a chat messages info view so we're going to add a filter we're going to say chat ID equal to and we're going to select our chat row and we have a chat ID right there so I'm going to say confirm confirm okay let's go ahead and reload this all right there's our app now if I click on this one I see the message just put this shot right here but if I click on this one I see no messages and I can certainly add a new message hey hey anyone there and there you see the message and so if Rob logs in he should be able to see the messages there as well and we are going to be testing as other users a little bit later in this tutorial now one last thing that I want to add is the ability to add other users into an existing chat so if I come to this chat right here uh there are three people in here but let's say I want to add another user and I want them to be able to chat here as well and let's do that right now now for the functionality where we're going to be adding a new user into this group chat the way that this is gonna work is we simply need to add another record into this a chat users okay so we simply take the existing chat ID and then add the new user ID here as a complete new record so the first thing that we can do is we can add a button to the app bar let's do that right now and let's add an icon button okay let's go ahead and align it correctly something like this and for this icon button we can't do something yeah this plus is nice and maybe remove the background color from the app bar clear this color something like this now when they click on this button we want to display the same dialog right that's gonna pop up from the bottom and they can click on the user and they're going to be added into this chat and so we're going to duplicate this component because it's gonna have slightly different functionality we're gonna say user ad okay and what we're gonna be doing is we we're going to be triggering this component right here this is going to be this we're going to select bottom sheet show and we're going to select this component user add to chat background let's make it white now when the user clicks on it this Co this second component is gonna pop up this user ad Channel they're going to be seeing this thing right here let's go ahead and test this out let's create a new session all right here's the app and let's say we're only chatting with Rob awesome and I want to add another person so I can simply click here and I have this choose a contact okay and now I can select a contact and that's going to be added right there and so now let's go ahead and create the logic for that so that it is correctly added okay we're going to come back here and this user chat we need to change the logic so if we click on the user right here and we go to the actions and here we're not going to be creating chats anymore okay we're going to be adding this user to chat users to an existing chat so we're going to delete this action right here and we also don't need to add ourselves to the chat because we are already there we just need to add the this other user so we're going to delete this and all we need to do is add the current user to the chat okay now here we need to know the current chat that we're dealing with we are going going to be sending it a parameter so this button right here if it opens up we want to set a parameter and the parameter that we're going to be sending is the same one the chat messages receive so it receives this a chat summary and that's exactly what we can send and that keeps things nicely uh organized so we're gonna go back here we're going to add a parameter it's going to be a Super Bass row and it's going to be a chat summary this one right here okay and this is required chat row okay current or you can do it current chat row something like this and now if we come over here we can actually send this parameter we're going to pass this parameter and we have this parameter right and that parameter is this parameter that's being passed to that chat messaging view so we can just confirm format and we can just pass it along okay all right so now this view here this add chat component has the Hat summary and so now it can do anything that it wants right so if we go back to the container open it up insert row we can just pull up the current chat ID from the parameter right we're going to take this current row get the chat ID and we have the chat idea so all we need to do is add the current user that we have that the component knows about and the chat ID that's being passed from the chats page um as a parameter here and that's the only thing that we need to do and so once the user selects a person they're going to be automatically added to the chat all right so let's go ahead and test this out all right so here are our chats and let's say we choose this chat right here and we add another user let's say Tom Tom this thing closes up and the user should have been added and we can simply go to our database is to take a look at what's happening so here we have a chat users and as you can see this is that last chat and in that chat we have three users there so all of these three users can see that chat and we are gonna test out in just a moment uh as another user just to make sure that we can see each other's chats another thing that would be nice to do would be to display some kind of a message that the user has been added so let's go do that right now come back here and let's go to chat messages click this open this and let's add a snack bar user has been added the next thing that I want to do is I want to be able to log in as another user just to make sure that they can also see the chats and for that I need to be able to log out and for that I need to create a separate profile page that's going to make it easier for me to log out and log back in so let's go ahead and create this very very simple page let's say it's a profile page still good idea to have in your uh but this is going to be part of a bigger app okay so we have a profile page and here I want to display maybe my email or something like this so here let's say I want to display my email authenticated user email and here I'm just going to be displaying the user ID for testing user ID okay and this button right here is going to be doing the log out so we're going to be doing Super Bass auth log out okay looks good and let's make sure we can get to this page and create the proper navbar for this page okay nav bar is off let's enable the nav bar now we have the nav bar we need at least two pages so let's do that for this um chats page okay so we have home uh home page and the profile page let's go ahead and reload our app and try logging in as other users to see if we can see the chats as well as communicate with the other people all right let's click here and as you can see I'm logged in as James james.com I'm going to click on log out and now we're back to the login screen alright so let's say we try to log in as one of the other users let's say this is Tom here's the information sign in and we are seeing the chats and as you can see Tom is not being displayed we simply see the other chat so we can click here and we can see this chat here and we can enter a message and on this chat everything is correct right we see the other users on the left hand side and this is Tom's message and we're logged in as Tom so we can display it hey okay and now this is the message right here and you can do the same thing with the other chats this is another chat okay and now you see the message here now one little tip that I want to give you and this is going to be applicable in this app is that you want to make sure that for instance if you click on this chat and you have all of these people here you don't want to enter you know the same person right you don't want to do that you want the system to not give you you the option to enter the same person and you can easily do that on the back end so if you take a look at one of these tables here so let's say this chat user stable this table has a list of chats and a list of users and we do not want to have a situation where we have a duplicate of this right so we do not want to have another record that also has let's say chat with id9 and user with a D2 because that should not happen and so you can enforce this on the back end so that you know even if you know your app allows it it's not going to be done on the back end and the way that you can do it is by creating a constraint on unique values let me show you how you can do that and so what you can do is you can go to SQL editor here and you can either ask Super Bass to build the query for you or you can build it yourself and so here's the query that you want to be using this creates a unique index on two values for this disable and this means that this combination will not appear ever again it can only appear once and this is how you do it and now all you need to do is execute this query and it's a success no rows return now if you go back to your table editor here and let's say you go to this chat users this is where this constraint is and you click on definition you're gonna see this constraint right here so you have this table definition but you also have this unique index constraint and so what this means is that if you for any reason your uh creates another record that has you know a combination of these two so nine two is not going to work nine one is not going to work nine three is not going to work because we already have it nine four is gonna work right so for instance let's say I try to do that right here I insert a row and chat ID is nine and user ID is one right this should not work because that specific chat has all of these three users so if I add one and I click save I should get an error and says here failed to run SQL query duplicate key value violates unique constraint and this is very very powerful because in some situations it's okay to have duplicates right many times it's okay to have duplicates but in some unique situations like here you do not want to have duplicates and so even if your app you know lets a user add duplicates well you're never gonna violate this Integrity this table Integrity of having you know duplicates because if you allow duplicates it means that you know you're gonna have a chat with like you know let's say six people and three of them could be duplicates of each other or you can have a chat with like five duplicates of somebody else right you never want to have that happen and this is a way that you can guarantee all right so this is our real-time group chat app that you can use either as a base for some kind of a messaging app or maybe as an add-on feature inside a more complex app it's really really up to and so if you're thinking about implementing this kind of chat functionality into one of the apps that you're building or maybe you've already built it then you will be able to do it very very easily using the app that I built here and the easiest way to implement this app is by joining our amazing patreon Community because when you join our amazing patreon Community not only will you be able to view and or clone this specific app which means you can take it you can modify it you can do anything that you want with it but you also get access to all the apps that I have on the channel that are all there on the patreon you can easily View and or clone them as questions engage with our amazing rapidly growing community over there on patreon plus you'll get access to some extra content q and A's live streams behind the scenes content and our Master Class Series where I do deep Dives on specific topics that the community votes on and beyond all that you're gonna be of course supporting this Channel and supporting my work and that is highly highly appreciated and so if you get values from these videos and these tutorials if they help you in any way shape or form then one way that you can reciprocate is by becoming a supporter and you can do just that using the link in the description and so I really really hope to see you as part of our rapidly growing amazing patreon community

Channel: James NoCode

Views: 12,031

Keywords: nocode chat app, build group chat, flutterflow chat app, supabase chat app

Id: ZB4C-h3GqHQ

Length: 73min 47sec (4427 seconds)

Published: Tue Oct 03 2023