Firebase Realtime Database For Web Tutorial - Client Side

hey welcome to my channel in this video we are going to make a deep dive into the firebase real-time database firebase real time database is a cloud hosted no SQL database that lets you store and sync data between your users in real time what does that mean is basically that users that are subscribed to a database get notified in a matter of milliseconds after it gets updated another thing is that data is stored in a form of JSON instead of tables and rows like in the SQL model that being said let's get started first off we need to create a project on the firebase console you as you can see I have already reached the limit of projects number so I'll use one of the projects that I have already created okay now we need to go to the database tab and hit create database you let's access the real-time database in the drop-down and here we go as you can see now we have a new empty database the rules represent the most important part of the security of your database therefore you have to be really careful typing the security roles and granting access to your apps users now go to project overview and create a new web app hit resister app and then continue you we will use these lines of code once project files [Music] [Music] [Music] [Music] [Music] [Music] okay now that we created the project files we need to copy the configuration code from the firebase console and paste it at the end of the index dot HTML file you another important thing is to add dn link to the firebase database is essential for firebase to work you let's add a click event to the add button you now to access the firebase functions we need to create an instance of firebase database you as I mentioned earlier data and firebase database is stored in JSON format and to access each part of it we use references a reference is basically the path to the giant trees nodes and keys separated by a slash each time we go deeper in the tree you to add new data to the database we need to use the set method set takes an object as parameter which represents the new data to add you it didn't work because I didn't have the permission to make changes to the database to fix this I need to make a change in the security rules so I can grant myself the access to write and read from the database you let's try another time work you and as you can see the new is instantly added we can split the paths into variables and then use the child method to merge them again for more organization and readability you as you can see I'm hard coding the users ID so it's easier for me to make changes to the data later usually you'd want the ID to be automatically generated and to do that you need to use the push method and the key property that enough would generate a unique key to each new object that you create you let's add the click event to the edit button now to update data on the database we should use the update method the update method takes an object as parameter this object contains the new data that we want to take place in a certain reference and the database you with the update method we can also write multiple values that the database advanced you so first we need an object with the new data then another one that contains the different references to where we want to write the new values you as you can see now I added an object with two as key to the users object and added the same object to a new reference which is the super users object you now let's prepare the delete button to remove a value from the database is pretty simple we just call their move method on the reference to that value you keep in mind that with this method we can remove a simple key in its value or a complete node you another thing to mention is that we can use promises to notify the user of the remove operation when correctly or not you to read data we need to attach listeners to a reference or multiple references in the database to do that we can use the on method then we can set different events to listen to you let's start with the child added event which will trigger the callback function whenever a note or a key in value are added to the reference you child removed with triggers the callback whenever our child gets removed from the reference you child changed with trigger the Colbeck fan whenever an update occurs to the reference you and finally value which will do the same of the all already mentioned events plus another event called child moved you the on method will keep listening to the event and trigger the callback function whenever it occurs however there is the once method which as its name suggests will listen to an event only one time and trigger the callback function you just to make sure that we can add listeners to just a part of the database not the whole database you snapshot which is the parameter of the call function stores information of the data added or modified so for instance if you want to get the newly added data's value you can use Vow you the queries in firebase real-time database are pretty much simple a query is composed of a reference an ordering function an aquarium function the first ordering function is order by key which will order the results by their keys you as you can see for now order by key is returning the same values in the same order let's use a query function now limit the first two will return an object that contains only the two first results of the ordering query you limit to last two will return an object that contains the two last results of the order inquiry the second ordering function is order by child which is the same as the word and select from query in SQL except that it sorts the result first based on the value of a certain key limit the first two will give us the two youngest users since it's honest India sort which means the first two results have the lowest values you limit to lust is the reverse of the previous query you equal to returns a result that is exactly the same as provided as parameter so it either returns a result if their first name is Michael in our case or just nothing you start at is another query which will return any object that its last name value starts with the letter Y you finally there is the order by value ordering function which works on the values of parameters of the same object you this should be enough to get you going with firebase real-time database make sure to take a look at the documentation for more advanced stuff link in the description that said don't forget to subscribe and hit the bell notification for more tutorials like this and see you in the next one

Channel: Wael Yasmina

Views: 60,355

Keywords: firebase realtime database, firebase database tutorial, firebase tutorial for beginners, firebase realtime database web, no sql database firebase

Id: 2CtQEXwOPXw

Length: 31min 19sec (1879 seconds)

Published: Fri Oct 18 2019