Overview
In this blog I'm going to recreate Slack using Firebase, HTML, CSS and Javascript.
In the first part of this tutorial, we looked at the basics of HTML, CSS and Javascript. In this section, I want to dig a little deeper into Firebase's data structure, and how you can create you own functionalities.
Similar to the first section, I have created short videos that you can follow along to, as well as diverge from to make something unique!
Structure of this Post
Under each video, if there were any sites that I used, I will attach a link. Or if there was any code that I created that was not explained in detail I will paste it below.
1) Revisiting the Data in Firebase
2) Saving Users Data
- a) Creating the Users Node
b) Check if the User is New
NOTE: Please note that I am still learning as well and sometimes I do silly things. Especially if something works, it becomes a habit and some would say borderline superstition. Throughout these videos I tell you to restart your sever again and again and again every time you make a change. This is not necessary. Only when you change things in your backend do you need to restart the server. Please ignore this in this tutorial, and I will update the content in the future.
Revisiting the Data in Firebase
For more information on the getAuth() Function.
Saving Users Data
Creating a Users Node
Check if the User is New
This video is also a little rough to watch but hopefully I explain why we are using the exists function and how we can check for new users. If you have any questions, please leave me a comment!
For more information on the exists() Function.
Retrieving the User Data
So that covers the basic calls to our Database, you should play around with your chat application a bit more, create new functionality such as channels, and switching rooms, sounds when someone sends or recieves a message, ability to have private conversations, and favourite certain users etc.
If you are interested in learning more about Firebase, I strongly recommend checking out Code4Startup's Task Rabbit Tutorial which looks at Angular, Firebase and Bootstrap!
comments powered by Disqus