Build a CHAT APP in VUE and FIREBASE using Vue's Composition API

what is up everybody my name is tyler potts and in today's video we're going to be working on a few js and firebase chat application now as you can see here we have a simple login screen now this doesn't do proper authentication um it just does um you put in a username and you can chat so let's go to keefe so you can see i'm logging this different name so you can log in with any name you want it doesn't actually matter but you can see here there's been a conversation between myself and keith so let's say in here i say how are you question mark you'll see it pops over from the right side saying how are you but if we go to keefe you'll see it's on the left side saying tyler said how are you then we can say good thanks how are you send and you can see it's now added it here um and kiefer said it he said good thanks how are you um and then we can respond again so if we go back to here you can see it's actually here but if we go over to our firebase chat you can see these new ones we've just entered already in here and now if we're quick and i type in saying let's say just literally anything can i hit send you can see that one has been added immediately because it's highlighted greens it's literally just been added it's super fast and it works perfectly so without further ado guys let's log out and get started okay everyone so the first thing we're going to do is we're going to create a new view application to do that you need to have the fuse cli installed or you can install few however you like to do it but personally i've preferred a few cli um if you don't know how to do that head over to the few js.org website and have a look there should be some documentation there to be able to tell you how to install a few so what we're going to do here is i'm going to go around view create and i'm going to give it a name so i'm just going to say fire chat view uh hit enter and this is going to basically ask us what we want so we're going to select some manual features here so i'm going to select manual features i'm going to select not for ux css pre-processes and that's the only one i just want to be able to use sas because it's a bit easier to use so i'm just going to enter i'm going to click free point x because i want to use the composition api and then i'm also going to use sas with node sas and not dart sas i'm just going to hit enter through the rest of them but i also want it to be in the package.json file so i'm going to hit enter on package.json and i'm just going to see that and now this is going to stall our boilerplate application and i'll see you once that is ready okay guys as you can see it's now installed now we can cd into fire chat view and we need to actually install firebase into our application so to do that we're gonna run npm i and we're gonna run firebase now obviously you need node installed for this um and obviously if you installed a few cli you'd already have installed so please go check out how you do that if you haven't already um so let's hit enter and now there's gonna install firebase so i'll see you again once that is done okay that's installed that was quite a quick one um so let's just clear that and now what we can do is open this up in whatever text editor you want i'm going to open it up in vs code as you can see here uh i'm going to close this and i'm just going to click back on here quickly we're then going to run npm to run surf now this is going to run a development surfer using node.js oh node.js and obviously it's dusted behind the scenes but fuse setting this up so we're using npm run serve here and it's going to start a development server for us um so let's actually move this into position next to our chrome um i'm just going to string that i'm going to move this across and while we're here let's go into package.json scroll all the way down to where you see rules in es link config and there's a piece of lint i'm just gonna copy and paste this over here actually says no used fast off because we're going to be doing a lot of getting stuff ready before we actually um obviously use it so it's going to this will stop it from erroring for us so that's done let's go into source and let's delete the components all the assets the components go into app.view and delete the import delete the components and the name we don't need for flows and delete the uh style here what's going to delete the import and that and what's good with h1 which says hello world so let's leave that there then we need to obviously give setup which is a composition api uh new element and we're just going to return nothing for now there we go hit save and that should now be working so if we go over to our app and over on fire chat refresh this page you can see we now just get hello world is exactly what we wanted so we're going to start setting up our database so if we go over to source right click and click new file i'm going to create a file called database.js now inside of here i'm going to import firebase from and we're going to say firebase but we're not going to directly pull everything out firebase we're only going to pull specific things and we need to pull the app the app is what initial allows us to initialize our firebase database and connect to our database we then need to import the firebase real-time database which is just firebase database we don't need to give it a name or give it some sort of variable name because it will actually be hooked into here it kind of just hooks it on top um that's not a technical term i'm not 100 sure how that works but that's how i believe it works um so if you do know then let people know in the comments um down here let's say const config so we're gonna need a config it's gonna be an empty array and we'll need some api keys here right so we need to go grab those in a minute from firebase we're gonna say const database is equal to firebase dot initialize app and then we're going to pass through our config we then want to export default and then database now reasonable exporting this is defaults we're going to import this inside of our main app component to be able to connect directly to our database so let's go get these api keys so over in your browser open a new tab and search for console.firebase.google.com now you'll need to sign into a google account for this but the actual firebase it's free for testing and stuff like that you get a i think it's called the blaze package which is a free version so you can see this the old um one i've done we're gonna create a new project we're gonna give it a name so i'm just gonna call this song different maybe fire few chat just muddle the words up it always works i'm going to click continue i'm not going to use google analytics it adds a bunch of extra stuff we don't actually need for this project but if you do want to add it feel free to go through with that but i'm not going to show you how you set that up let's hit create project and now this is going to create our project it should only take a few seconds but i'm going to skip until that's done okay everybody that's now done and as you can see we can just hit continue so that's going to open up our app here so to get our api keys we need to select one of the three options obviously we're not making an ios or an android app here we'll creating something for the web so let's hit web we're going to give it a name i'm just going to say fire future again and i'm just going to call register app now this is going to start to register application with firebase and it's going to create us as you can see here some keys now i'm going to highlight all these keys i'm going to copy them and we're going to head over to our config here and we're going to paste them in like that and that's all we need to do for our keys but there's a few of the things we need to set up inside of firebase to start with we need to actually set up our real-time database so as you can see here we've got our real-time database let's hit create database now we need to select united states i tried selecting this one which is the closest to me and i had a lot of errors so i'm going to stick with just the united states for now and i'll figure out the afore layer date let's click next and because we're just doing a test we're going to use it in test mode we're not actually creating a productive app but if you do want to then obviously fit um we can do a tutorial on how you actually secure your firebase database in the future so let's hit enable so this is just going to set up normally it doesn't take this long there we go and here we go now we've got our empty real-time database and now we have to do nothing else unlike my my sql or any of the others you don't actually need to set up a database to actually get it working it will just be here ready so let's head back over to our database here well actually we don't even need this file anymore so we can hit close we can now come in here under script say import db from dot slash db and that's gonna give us access to all of our database firebase functions which is great so i'm actually gonna now paste in all the styling we need for our application the reason being is because i don't want to have to write this all out there's a lot of css here and i'm going to put this in a git repo you can actually go and get and download um any of the circumstances i'd normally go for the css but for this one i think it's very basic and we don't actually need too much css but if you were here for the css then just have a look down it now um and you can copy this out and paste it in obviously i know some of you might want to change up and stuff but that's already part of learning so take it to pieces figure out and do what you want to do with it so i'm just going to scroll down all the way to the bottom here and we should be at the bottom now there you go but this also inside of uh git repo which will be in the description of this video so let's start with our markup now so we've created our um first part we need to create two components here we're not actually going to create components for this but you get what i mean you could create two components we'll create something called a few now i run it because we're using few um and in this view we're going to call this one login so this could be our login view but we also want to create a view which is called chat which will be once you've logged in the chat you can actually see so let's just split these apart so there's a bit of a noticeable difference and inside of login we're gonna need something called a we need a form which has the login form and we don't want an action because we'll be running a submit event through this um and in here we're going to say h1 and we're going to say login to fire chat we're going to give it a label we just go before the username which will say username we're then going to have an input field of type text we're going to hit enter we don't need a name or the id so we're just going to remove those and in here we're going to give it a placeholder that says please enter your username dot dot save well then i'm going to go down here and say input we'll create one last input let's close this sidebar so you can see everybody and let's zoom in just one um so we'll say input type submit and the value we're going to put in is login so that's all we need for this actual view login section if we go back to our application over here we have an error db is defined but never used no used fast now before i told you to add in to your package.json this i forgot to mention that you will need to restart your application to get to work so if we now restart it by re-running npm run surf it should now actually work and ignore this error so there's the error i was on about it's actually probably a good thing it did happen and as you can see it's now working again so now you can see we've got our login view let's just close the sidebar again um and there you go i mean the styling hasn't really pulled through here i've probably named something wrong so we've got our form which is login form and in here we're missing a login no a form inner element there we go so that's the styling that should now fix it there you go now it looks pretty it wasn't looking so pretty a minute ago there we go so now it's all working fine so that's great we've got our login but now we can't actually log in let's also put sync in here let's just put h1 which says chat for you just so when we come to check this out if it works it should work so you can see here we can scroll down and we see chat view but that's not what we want so we need to actually come up with an if statement um that says if we're logged in only show uh the chat for you else showy login for you so we're going to set that up now but first we need to sort some other things inside of our script here so let's import a few few that's a tongue twister a few few i'm blowing my own mind with this a few few composition stuff first one is going to be reactive because we're going to need to be able to have a state which i prefer using reactive we then need the life cycle method called on mounted and finally we need a reference now if you don't know what any of these are that's okay i'll explain them when we get to them um all you need to know is reactive and ref are used to store variables which are reactive to the state of the um app so if any data changes the template here will also update with the following information so let's go into our setup here so inside of setup we're going to say const and we're going to say input username is equal to a reference of nothing so the reason we're using a reference is ever reactive is because the reactive is going to hold our valuable data state whereas the reference is just going to be a variable we need to reference or remodel it's normally used on input forms and stuff like that and hence while we're using an input username here now what we're going to do is we're going to pass through input username to our return which is going to allow us to use it inside of our template here so you can see where we've got this input here we actually want to add fee model to this and sell it equal to input username now let's break this down tab it onto different uh lines because i think it looks a bit neater that way for forms so there you go now you can see we're using fee model input username that's going to bind this value so whatever we type in this text box to this variable which is going to be obviously useful for when we log in so let's create a login method now so we'll say login is equal to an arrow function which is basically going to check if our inputs.username.value so when we're inside of the script um this reference needs a dot value because we're not actually if you wish to set this equal to something it wouldn't work you need to actually just say dot value and then set that equal to something but in this case we're just going to check if it's not equal to empty strings or if input username dot value is not equal to null now this just basically saying we've got our input value we're checking if it's not empty or it's not equal to null if they if those two basically if it has something inside of it we're going to say state which is going to be our next thing we create so let's create a const state and let's say it's equal to reactive so as i said earlier this is going to hold a couple of things it's going to hold our username which is our state username now our input username they are different this means we're logged in this one is just our for our form um and this could be empty equal to an empty string we're also then going to say messages and this is going to be our messages where we hold all the messages up and send and which are currently stored on our local state so in here we're going to say state dot username is equal to input username dot value so it's going to set our state name to this which in turn going to log us in we don't want to say input username dot value is equal to a empty string again because we've logged in and if anything goes wrong we want to make sure it's reset back to nothing so as you can see here that's logging us in we now need to pass login with our return so let's pass it through there so now anybody now we can use this inside of our login form here so you see where we've got form we're going to use something called fee on which is a directive which in few it's basically a director for sync you can do you can hook it on it's like an attribute that does sync a fee on says you can do fee on click for example and this will give us a click event we can also replace theon with at click instead and we could say when we click on the form we could log in but that's not what we want to do we want it to check for when we submit a form so we could say fee on submit and then we could pass through here login i'm going to replace this though with the ad symbol because it's shorthand something else we need to do as well is also use prevent so just like in javascript when you do e dot prevent default this is what this does here it basically stops the page from refreshing it stops the default action from happening on the form super handy it's called a modifier directive modifier and it's really useful so we're gonna log in so this is actually gonna logs in it's gonna take the information from here and attempt to log in but we need to do something else obviously this is great this working but we need to actually run a check here we need to say and we're going to use another directive called fee if and this is just a conditional statement like an if statement in javascript well we can say we can pass through a condition so we say username so there's the state username we actually need to pass our state through our return here so anything we want to take from our data area or our setup we need to pass it through return to be able to use it inside of our template so you can see we've got state.username it's equal to an empty string or if it's state.username is equal to null so if it's equal to null or if it's empty we're going to show the login form else we can go fee else which will then in turn basically say this will show so it's like an if statement but built in few really cool in the actual html so if we go back here you can see if i scroll now you can no longer see the view the chat view instead you only see login to firebase but if we if we hit enter so let's say we've got nank and then we entered nothing happens but if we type our name and hit enter you can see we log into the chat view which is perfect that's what we wanted so now we can log in but let's actually get started on the actual messaging system so inside of our chat view we want to create a header inside the header we just want a button with the class of log out and we're going to say log out now we're going to have another modifier on here but we're not going to add it in yet it's going to be our logout function on click we're going to say h1 we're going to say welcome and we're actually going to say we'll use these template strings like how handlebars works and we're going to say state dot username and it's going to grab our username and display it on the screen so whatever your name is on here it will show we then going to create a section dot chat box which is going to be where we obviously have our messages so i'm just going to put messages we're then going to have a footer which is going to have our form in which allows us to send messages so we'll just say form we're going to have no action right now but actually that's a lie we are going to have sync we're going to do another at submit dot prevent but with nothing in it so what this could do is it's just going to make sure when we click this form it's going to do nothing so it doesn't reefs when we submit this form it's not going to restart the whole or refresh the whole page because we don't want that happening right now so we'll create an input of type text obviously remove the name and the id and we're going to pass in obviously we're going to do another feed model but for now i'll just say placeholder write a message dot dot dot and then underneath this we're going to create another input sorry let me scroll up so input type image that's new input type submit and inside there we're going to say send there you go so let's go back and as you can see you can see where it now says welcome we've got our log out and our messages are down here and obviously it's got a little comment in there that says messages so that is now all set up so our view and all our html markup is set up we're just going to need to save obviously a little bit more for displaying the messages later on but let's go down here and let's actually start submitting messages we sent so let's go down here underneath login and let's create a new functional method which we're going to call send message so let's say const send message is equal to an arrow function uh which is going to take in a message messages reference which is going to be our database reference and we're going to say db dot database dot reference is equal to messages so what's happening here is this is obviously connecting to our what we've imported from our database so our firebase instance we're then getting the database which is the real-time database for firebase and then we're getting the reference which is going to be the name of our collection we create inside of firebase if we go over here and then here you can see we have this it will be basically nested inside this called messages which will store all our messages in and i'll show you how that one works when we actually send a message we're going to check if input message which is going to be a reference so we see we've got input username let's create another one called input message and let's see see it down here we'll say check if the value so we're actually just going to steal this and paste it in here and replace username with message but i'm going to pass this down here too and we're just going to check if it's equal to no if it is then we're just going to return so here i've checked if it if it isn't equal we need to check if it is equal because if it is we'd want to return we're then going to get the actual message we want to send which is going to be our username this is what we're going to store in the actual database so we're going to say we're going to get our current username whoever's logged in and we're actually going to get the content which is going to be the input message lot value now under here we just want to say messages breath dot push and this is how we push it to the live database and we're just going to pass through message we're then going to set the input message dot value back to nothing so it clears the form for us and that is all we need we just need to pass through our send message in our return here scroll back up and as you can see here we've got this so inside of our submit we just want to say send message so that should now send the message if everything is working correctly so let's head back over to app go to here and let's log back in so let's say tyler now let's write a message let's say hello hit enter nothing seems to have happened we have no errors and no anchors appeared there so saying else is wrong so we've submitted we've got an at submit dot prevent send message which is down here messages ref is equal to database.database.ref messages ah so the issue is we forgot to bind this with the model with our input message which we pass through so like we did with the submit form or the login form we need to do that again so let's break this down again just so it looks a bit neater hit save come back here refresh let's log back in and let me just say hello hit enter and it's actually sent this time inside our database as you can see it's called messages which was our reference then we get this sort of funky id name this is just the key for the any message we get through they get sent a random id and now if we click into that you can see it says content hello username tyler which we pass through which is perfect so i think it's working but now we need to display the messages so we actually need to create an unmounted event let's just remove our console logs now below our send message we're going to create a unmounted event so we say on mounted now to use this you obviously have to import it from the view library uh here which just a livestream on mount it gets called i believe every single time changes in your component or when the component is mounted to the page so we're going to do an arrow function inside of here and we're just going to say we're actually going to copy our database reference here and paste it down next it's going to be the same reference we want to get the messages from the messages array we don't want to say messagesref dot on value and what this does it checks if anything changes so if anything changes so for example a new message is added it will update this and actually send through a snapshot back to us from the database and in the snapshot we can actually get some data so let's say data is equal to snapshot dot value so this is going to pass back the value which is going to be equal to all the data inside of our messages array here so we've got the that data would or we're going to create a temporary messages array which we're going to be using to store some temporary uh messages in we're going to say object dot keys and we're going to look through all the keys of data and we're going to get each one and we're going to get the key we could do an arrow function and we're just going to say messages dot push and we're going to pass through an object which can have an id which could be equal to the key the key is going to be this here because there's the keys we're grabbing we're looping through those keys so we're getting these messages which is this data and then we're getting all the keys which is everything inside of here so each one of these which is submitted and then we're going to pass it all through we're then going to get the username which is going to be uh data we're going to get the key and we're going to say username we're then going to get the content which is going to be data key dot content and now it's going to push up to our messages and then underneath this we can say state.messages so our actual state is equal to the messages we've pulled from our database and that's going to store them here which can update our dom so let's go have we passed through state we have passed through state of course so let's now go back up here so nothing's happening just yet you can't actually see anything changing on the app so if we go back here and go to messages we can now start writing out how we're going to display our messages so in here we're just going to create a diff which can have no class well it's going to have class but we're going to send dynamically so a diff which has a fee for now there's another directive this directive loops through an array and it will create this element how many times in the array there is and we can obviously pass through the data so we'll say for message in state dot messages so we're pulling out each individual message and calling states.messages where we can then get a key and sell it equal to message.key we can then get the class and we're going to bind this so what i'm doing here is it's called binding so there's like fee bind but we can just use the semicolon or the colon um and in here we're going to say the second one is going to be class so let's break these down again because like again i think they look a bit cleaner when they're broken down they're easier to read so we're going to get the class and we're just going to sell it we're going to do an internally operator so inside of here we're going to say message dot username is equal to the state dot username so if the message would seeing on screen is one which we sent we're going to pass through message as a class and also current user else we're just going to pass through message so inside of here we can then write message inner which is another diff which will then have a class a diff with the class of username which we can pass through our username would be message dot username and we can copy this paste this and replace username for content save and that is going to do everything we need it to do so i had an access there let's break this down just so it looks a bit neater um so we're looping through all our messages we've pulled from the database into a message um and we're going to create a diff with an inner diff with the content inside of it so let's go back to our app and as you can see the one message we sent earlier is now appearing we can't actually log out we'll do that at the end but for now let's try and hit a mess enough so let's say how oh how are you question mark hit enter you can see it says how are you let's open another tab inside this other tab let's do that let's bring it down because obviously this designed to be mobile sites and let's call chief so keith's now coming in so we've got one which says hello to how are you keith's gonna say hello tyler i'm good how are you question mark hit send and as you can see keeps messages come through and keeps messages come through here too so you can see it's come through nicely and it's looking good uh now we just need to add a new log out i've somehow zoomed in i'm just going to close that tab we're going to pretend that never happened so let's create a logout function and now this one is the hardest function we're going to create in this whole thing we'll call it const logou is equal to an array an arrow function which is just going to say state dot username is equal to nothing that is all the logout is going to do let's pass the log out through our return method so we can actually get it inside of here and let's add a click fence so we can do fee on or at and we're going to say click is equal to log out so let's go back let's log in i'm the wrong tyler so let's log out and log in with the real tiler there you go you can see it works perfectly so if we log out again we come in as lucy you can see now none of them are highlighted but lucy can say hey people and there you go lucy's now logged in we can log out we can become tyler for the moment and as you can see we can see tyler's messages highlighted and the same with keith there you go so that is everything we're doing for today's video i hope you've learned something uh substantial and you can actually use this to create your own chat obviously you'll need to create a better login system and a few other things a bit more uh safety authentication and maybe you can even use google here this insane we'll go cover it in this video but in a future video i'm going to be creating a lot more advanced view stuff including authentication so if that's something you're interested in please let me know in the comments below and i will create it but for now guys i hope you enjoyed this video if you did don't forget to leave a thumbs up smash that subscribe button share the video to all your friends and i will see you in the next video guys so thanks for watching and peace out [Music] you

Channel: Tyler Potts

Views: 13,775

Rating: 4.9555554 out of 5

Keywords: webdev, javascript, javascript wizard, wizard, css, sass, scss, js, vuejs, vue, reactjs, website development, website design, app dev, app, app design, app development, mobile app, native, web developer, app developer, developer, programmer

Id: 72Fk9i9HcZM

Length: 33min 27sec (2007 seconds)

Published: Fri Dec 04 2020

Reddit Comments

[u/KimJongIlLover]

I don't really know firebase all that well but in this example the user supplies the username for the message, meaning anybody could write in anybodys name.

Is a proper implementation of this (ie a message is created using an auth token or a session or whatever) doable with firebase out of the box or do you need to use serverless functions for that?