Upgrade our Login App to include a Real Time Chat

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments
Captions
hello everybody in this video we're going to get back again and open our login application and what i want to do is i want to add the cloud firestore so we can actually save data to firebase and then we can actually put the data in our application we're going to protect the data only for authenticated users and we're going to follow really simple rules in there we're going to go in deep in that section but at least we have that that in place but i want to show you that this is the alternative that without having a back-end server or node.js server or any other type of server for api you can use firebase in order to save data and retrieve that information through your app one of the cool things about firebase is that firebase have a really cool sdk and also it's already coconut explain this you have a real time listener that means when the data change on the database it automatically push it through our app we use the correct syntax for example you remember when we did the to-do api we will save something we need to retrieve we need to get everybody again in order to show all the to-do's well in this case is not going to be needed because we're going to have a listener that will be verified every time there is a change we can actually pull that data in and i will show you how to do it so let's get started as i said before in order not to create a project from zero we're going to use the view real author authorization project where we have the login and let me use get up from here there you go so we can actually go through our google login right and we have access to the secret page or we can go with the analytics i have as user fake dot com um something like this yes through email and password and those will allow us to have access to the secret page so what i want to do now is in this secret page is where i want to start creating our application itself but before we start that i want to proceed how to do the [Music] the firebase or the firestore enabled one of the things that we need to do we need to go to client firestore just click on that one of course you need to open your project this is not my main project but because in my membrane i already did this right but it's going to show how to do when you go to firestore database you click create that create starter in production mode and click next select uh a location like us central is the nearest from where i am so i will enable that and i will wait for a for a minute less actually for provision that fire firestore for me first sir what is a real time and document based database it's a nosql database that means that there is not a relation between the objects the relation needs to be identified through different ids so this is pretty much how it looks like that database the first thing that i want to do before starting my collection and show you a little what it what that does i want to go to the rules section and let me maximize this and here the rule we can see that we can actually have allow read and write as false by default so we need to change this in order to make it work we have we can play with the rules so we can do different things so we can go to the documentation we have right here and one of the things that i want to do because we started as a production database is i just want to go to step number four no actually there was step number five there's a basic security rules and in there to default one that is printable flock it and i want to do something really easy that all the authenticated user will have access to read and to write and for that i just need to copy this line this is already pointing to the other document so don't worry about that and as i say before we are not going to use any specific details but you can be a specific like one document is available to everybody but only the owner is able to write us and things like that right but for now we will say that everybody have so dedicated oops let's copy this and let's paste it right here we use publish and that's it we change it to when whoever do the requests the authorization authenticated is it not dull that means they surveyed a dedicated tools the platform and that's it so the way that it actually works is work through collections so we can have different collections like the type of element of the objects that we have so i want to have a chat oh we can have message actually right and in that collection i will have different documents by default i would like to specify the out auto id and i want to have my text as a string it will be my message let's do hello there i will have the author as a three i will call it me and i will have created that as a timestamp and i will select today and we're gonna specify a time but that should be enough right if i create that you will see that my collections have a document and my documents have three different fields look at this as a json file pretty much it's a little bit like that i can actually add another document out to id and led to the same fields text let's do hello again auto let's do me and this will create it at that is going to be a timestamp let's make that one to be the 28 for example right so i have two different documents one different values in there and look at this as a an array or message this particular ideas and this is the content of that particular ideas this is pretty much how it works and we're going to be using going to be reading that information in our application itself so i believe this should be more than enough just to stop here i will minimize this for a minute and let's proceed working through the wrap right now we are working with the let me minimize this the main application and the idea will be to actually use the secret page after your authenticated and i will create the chat in here and then we show how it's a real-time chat and pro and we'll open probably two different tabs and you will see that how we interact and is actually really really cool so the first thing that we need to do we need to start changing the text so let's get rid of all this paragraph perfect and this is a simpleish one and it's called this cool chat right let's make this a little bit appealing really big text okay let's do font thin and i'm tracking tighter there you go let's do the center and let's do margin top of 8 perfect now after that i want to have a div element and this if will be my chat window let's say like that right so in here we are going to have an ul whoa let's call it um hopefully this is right and after the ul there we have it probably with my input box that info box stack text let's do a placeholder let's do and not type a message there you go something like that and we need to start doing some kind of styling so the main div in general let's do a couple stuff let's do that my minimum height will be arbitrary value and of 100 pixels and i will make this to be with full margin top of eight so we have a separation then make it rounded large let's add a shadow oh we can see like a like a 3d window there you are and let's make the items to reflect as a column and let's go justify between so we can actually send the message to the top and this one at the bottom there you go and that should be enough for that one for the unordered list let's start adding some padding on up and down let's do background let's do a space y for four that means that every element will be separated right and i'm doing that because this list item in reality is going to be a b4 and let's do something really simple and in five for now it's going to repeat depending how many message that we have right so for this one to have n5 let's actually stylize this a little bit better an educative element and here this will two different spans that is going to be by outer name and it will be the message itself right does that mean that this class we need to this div we need to add a class and let's make it flex probably um let's use t5 between so we can send the outdoor at the end cool and that's actually should be for all of those i don't know why you did it for one refresh or i will need to authenticate and there you go so we deflect and justify between let's do a background i don't know right 200 and it could be let's have some padding by the nexus 4 but in y of 2 and let's make a rounded lg round it is so we have that little should be more than enough then we get our like it in so all of those photos control my message so here let me just change my um what can i say it is my input box to be just a little bit different so let's add it as with full let's zoom a padding or four while an extra rounded lg so we have the same rounding as the main table let's watch let's do whatever control focus whatever is focused i want to remove the outline so whenever i click it i don't want to see the little line that i had there but whenever it's focused let's do something silly probably just not the best one but let's do a yellow so whenever i click there you go it is just yellow ready to send my message and be added through here and that should be pretty much my look and feel through the application itself next step will be actually at firebase store through the app so let's before we continue let's add this and create um chat layout all right let me sync those okay it's working perfect so the next things that i need to do i need to go to my use firebase because now i need to initialize my database itself and for that we actually need to see the different element for the firestore so let me get back here um actually this message doesn't matter my real habits is what so let me start my collection chat and let's do text hello there outer is going to be me and create it at timestamp let's make it the 27 and let's create another document how to generate it let's do text hello again auto let's zoom here create it uh timestamp and let's do tomorrow just to have those eleven there so in order to make this to get started we need to actually go and click here until we'll go through the documentation and we try to use the firebase emulator that is the new bears [Music] course um how can i explain this the best next approach that we need to have in order to execute firebase without using firebase directly it's like a mini firebase inside your computer but we are not going using the emulator right now i don't want to go deep on that so i just want to open my fire store and just get started right going into using we are using the web version 9 the entire modular and here is accidents that we need to import get firestore from firestore itself and after we import that um we go down we now have the firebase config that we already have and then we just call the database from get firestore that's pretty much more than enough so here in the user file store we are going to copy this line paste right here um going to export our database from five store and that's it that's all the things that we need to use in or use firebase itself after essentially we'll say um i think it's pretty much the same yeah we're not touching that one so the only things that we're going to be using for now is going to create a new composable called reduce chat and here is where the magic starts all right so the first thing that we need to use we need to import our database right we need we need that one so how let's see how we need to read data and we need to perform this data the real time updates the way that this actually works let's go back to get all the elements multiple documents in a collection so we need to import a collection a query whatever type of logic for the query and the on the snapchat i will follow those a little bit so we need to have a collection then inside that collection need to be inside a query and that query that here is called qui you need to be inside your snapshot so that's pretty much a little bit the layout i don't want to confuse you that much but let me show you what i mentioned about this so let's juice chat let's import also my reference from view right and let's zoom um we need to import a couple of stuff for example we need to import also use out because we're going to we need to require the user and we need to do const all we can do here we need to get the user from use authorization right we know that we need to save the user somehow the other things that we need to do we need to create or message element message there will be pretty much a empty reference but it's an empty array and after that we just need to do use chat let's close it and let's go export default to chat right [Music] that will be a little bit the layout that we need to do so the first thing that we're checking here is that we need to have a collection and i want to separate this to be a little more understandable about that so in our chat let's let's actually import all this from fire restore and we need to remove the wire and we're going to be using the order by and then we'll show you that you can proceed through the computation to see all the elements that are there or the api section and you will see all the elements but this is pretty much the everything that you need right now so inside my chat i will create cons message collection equal collection from my database right and then the name of the collection so i call that one message right they go here i don't actually call it chat right so i need to open my collection and i'm pointing to my let's call this chat collection right to the collection that i saved called chat so i have that one perfect next steps i need to do a query the query need to be sending a collection and then the statements in this change i changed the word for the order by so this element i already had it so let me create a calls chat query right where i need to send the chat collection and then i need to send my order by um my computer is smart enough to understand this so you're the right and you'll see that my they feel created at that's why i create that field created at another descendant that means that the newer one should be on the top in this case hello again should be on the top then i need to create an unsubscribe constant there is promotion on the snapshot element where i send the query and i get a query snapshot and then i do something about that query snapchat so let us let's proceed and i will show you why we need to do unsubscribe because if we go back we need to detach a listener later and pretty much we just need to call that unsubscribe later somewhere in your code and as a way if not the listener will be on and then you could be charged for money in or you can actually you also do your whole uh firebase con transactions that your limit to yes right so for now let's actually just choose whatever the documentation is telling us it's telling us that we need to grade from the snapshot that's easy enough under the cons unsubscribe let's do the same logic and let's call it on a snapshot and it's called the way they called it query snapchat no snapchat right so the first things that we need to do because i already have a message outside here i will do my message that value is going to be an empty array and probably not the best one but this is the simple one that i found what to do let me make this a little bit smaller there you go then through my query snapshot i will edit for edge document pretty much all this i need to do something about it and i will do message actually it is really accurate dot value dot push because we're going to each document and we're going to push uh different objects that came from that document right when after that we just need to close this let me get if i can save the trade like that and probably need to do something like this too there you go so here when i want to push whenever there is a snapshot i just want to have my document id and that i get it through doc dot id i don't know we can see over here and the data itself is through the the variable data the function data so we can actually do something like this we can create an id a document id and then we spread out whatever we have the data for the rest of the message and that's it and then we can actually just use return and we're going to return our message or unsubscribe the cool thing about this is it will be executed wherever we actually use the use chat element so we can stop here for now we need to actually more than enough in order to read the message so let's get um to where let's go to our secret page right and let's do a simple setup right and that setup what i need to import i need to import a couple of things remember that i was telling you that we need to unsubscribe for the value that will happen in a live sequel called on on mount mounted so this is when the app is going to be removed a mountain from the dump so we can do something about it so we can actually use that one and we can actually use import just check choose chat from possible view chat right and then i can do a simple calls i need to get my [Music] message and my unsubscribe from use chat right and i just need to in my unmounted i just need to run my own subscribe that's it i just send out a function in myself and telling that you need to be unsubscribed whenever you submit it that's it [Music] other than that we should be more than enough so let's change this to message in message and let's make the key to be my message dot id remember that we're saving that and because it's actually already running let me go to my localhost let me log into the app i'm going to enter google go to secret and i can see two message because those are the two what i have in my database is just two different documents in the chat selection i'm not reading the content but at least enjoy that so that means that the message itself can be my message dot text and my author i can i can leave the buy i like that i can do my message dot out so i can have my hello again and my hello there both other by me because it's how i save it and the new one or the one that has the 28 is on the top so it's actually working let me show you the real time thing so let me try to detach this let me put it to the right let me add another document let's call text from firestorm outdoor let's call this the altar to be the admin because in this case um created ad then make that timestamp and let's make a newer date i don't know literally for example in order to make it to be always on top like it will be new with one of those two it should be on the top if i save this in my database my message would get pushed through my app without needed to call it because i'm read i'm reading while i'm listening those changes that happen on the database at the same time if something happened to a message let's say for example that i want to [Music] delete this delete this document in the one that you've created it just get deleted from my chat because i'm not using anymore so this is the real time element that i was telling talking you about how those messages are reading from the database and whatever is happening to a database my all applications react accordingly and we're able to see it just because we are authenticated through the app that's it we have that protection there so let's put this back oh something happened i don't know what happened there sorry okay so my computer glitch a little bit i don't know you were able to see that glitch but it happened to me okay so let's proceed so we have this we have pretty much almost all done already now we need to see how to add data through this one so i want to do i want to type this of course we can actually do it through here because we already imported build let's get the reference and before the unmounted let's do guns new message equal empty reference right and that input box this will be model of new message right so that means that whatever we have here it's going to be tied to our input box right pretty cool so the next element and that one actually we can just add everything and already read from firestore right so let's get back to the use chat and let's go back to our documentation so the next thing that we need to do is we need to add and manage the data and the simplest way to do it the server timestamp we can use something like server typestyle like this or or actually let's go to data itself let's add a document [Music] so set a document in something that's already created with the id that you want to specify but if you want to how to generate one we use the add document and we can actually just wait for that if we need to that should be something fun to do so this should be really really easy to do so what we need we need to import a document and we need to get it the collection itself and then the document itself that are going to be added right that's it the collection we already had it is our chat collection so the only things that we need to do is we need to import a document firestore after the unsubscribe let's do cons then message asynchronous and we need to send a specific message right and we need to do a wait and add document we need to form the chat collection and we need to send the message itself right but in order to make it a little bit better probably we can do something like this the two texts will be my message cells right the outdoor should be in my user dot value remember i'm already importing the user itself and created ad will be a new date or actually you let's use let's use the new date which is easy from for me that means that the data we have currently so that's going to be the message that we're going to be added a simple text with the message itself right pointing to our chat collection we can see it right here with the collection right and all this is the mess the document itself we have the same three fields that we are saving on the database cool and it's a synchronous and we need to wait for that yeah probably we need to close this and then we need to close this probably can i save it yeah and let me just export that send message return it remember and that should be it nothing fancy right really simple sometimes better that actions really so let's get back to here let's import that message and let's create call ascend element the premise we're going to be doing is called the send message itself with a new message value and set my new message value 20. that should be it so the only things that we need to add here is whenever my text will change where you need to send the message itself of course we can add and that the new message value is have a correct value and probably we need to do that but i will keep it simple so i'm not validating that this we have something here right but let's do it and let me just refresh just in case let me login message from the app and of course i have a typo if i click enter i can see that message from the app got post there now what is it what is in the middle because we put this class at 28 and today is 27 the date that i'm saving and created this app so that means that that's why this is it got um it goes on the top right but you can see that you just get by message from there it got corrected my router and that mean that i have it right here we can look for that and this is this one format message from the app and that works not only for um gmail users so let's use the email one this one one of the ones that i have there and it creates another message to buy user at fake right so pretty much this is working the way that it's supposed to we have pretty much all done in our application in less than an hour pretty cool right the only thing that bothers me a little bit is that because all the messes are gray i'm not able to identify my own message from authenticated user specific color probably something simple that we can use so one of the thing is we need to be able to see who we are so let's use authentication from the use out and let's get the user from there something like this should work so now we have the user and this message is to instead of being background gray always let's do a second class that is between dynamic right and here we can use a ternary operator we can use if user is exactly the same as um and and the best way to do it to save the ide and getting the user store somewhere else things like that right now i'm trying to keep things simple right so i know that my youtube will be exactly the same about message.outer if that's correct my background will be header let's zoom yellow oops it should be in single quote now background yellow i don't know 200 if not let's do oops the background rate 200 we close it and yellow is not complete here there you go perfect so now because i'm logging in as my user face i can see that my message is a different color let me open a new tab let me put it to the right localhost let me login to second one with with gmail i'm brother format now and here in this browser brother forum is the one that is yellow and this one because i'm logging in as user fake that's the one that is yellow so i can add hello my name is rodolfo and you'll see that got pushed through my app all of those are getting saved to the database i can do pop here hello i'm a fake user and that'll get pushes to here so now we have real-time database that is working through our application that should be it for now let me commit alt [Music] right and i will share the source code with you guys but for now i believe that's it for this assignment what i really want to do is i want you to get back to your login and i want you to add your chat so we can actually chat a little bit and see that is working the way that it's supposed to so and that should be so you need to go back to your view login you need to publish the new application though with the new updates of course you need to share the link with me and the github link and other than that that should be right now what happened is we needed to change something well this is not the case here but we can actually use the set data right we can actually get set the document um something like this where we said there you go we have a reference there is a document itself right so set document and document we can actually put the document from the database from the collections and the id we know the id because we are saving the id here on the key right through message id so you you can actually send that here to make a reference and then you can do set the document pointing to the reference and change something about it in this case they're changing the capital right if you add the merge through that mean that you're just going to merge it it's not you want to overwrite the whole document itself that's the only things and it's a couple of lines to do it other than that i should be more than enough for it for everybody to understand this so i really hope that you like it and we didn't have much time in order to go more deep in this kind of situation but i wanted to share with you how to consume a local api how to consume a firebase and that's the firestore so in your final project you can use one or the other or actually both at the same time whatever is the best for you so i really hope that you like it any question any doubt don't hesitate to reach me happy calling everybody
Info
Channel: Learning with Rodo
Views: 48
Rating: undefined out of 5
Keywords:
Id: 5yLh3A9tI8M
Channel Id: undefined
Length: 46min 29sec (2789 seconds)
Published: Sun Nov 28 2021
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.