READ, WRITE, UPDATE, DELETE Data | Cloud Firestore v9.1 | JavaScript

what's up youtube welcome to our video so this video is about uh cloud firestore database version 9.0 and this video is requested so many times so finally it is here we will learn how to read write update and delete data in our firestore database so we will start from the basics and search firebase then go to firebase console and you have to be logged in into your google account you can add a project name your project we don't need the analytics continue now add a web app and name it uh anything like my fire data register app continue to console now let's ready our page so i will write some code for the labels and the inputs name and input i will call it name box and for this last one let's go with the select so the roll box the sack box and the gen box now i will declare some style and i will make their displays as inline block for the purpose that i want to declare their heights so 80 80 pixels i also need four buttons so before that a horizontal line and now we need the firebase configuration so go to the project settings and now get inside the cdn and copy all of these paste it here and this is our imports and configuration section now for some important points this type module is necessary for this import statement to work and this import will have a scope of this entire script so outside of the script these import statement won't work so i need to import some more functions for that i will again use the import keyword and then the name of the functions which are get firestore dock and this will come from store library and a constraint db equals to get firestore so this variable will store uh the reference to our specific database so till here our configuration is complete and this should be gender and some things are left here so let me complete them now coming to the part where we get all of all of our references for the text boxes and the buttons now to get those references let name box equals to document get element by id name box then we also need the buttons now we can start creating functions for adding documents to our firestore if you don't know about the concepts of documents and collections i have a video for this which explains all of the basic concepts of firebase to add a document to the firestore we create a async function we say war ref equals to collection this is a this is a function that we imported and let's give the reference of our db and then the name of the collection that we want to create so i want to create the students list then i have to create a constraint doc ref which would be equals to await add doc this is also a function that we imported i will give it the reference and an object carrying all the information so name of student std and then name box dot value so whatever is written in the name box then so these are the name of our fields that we will gonna save on the firestore and uh these are the name of our boxes then we will also say if it is successful then we create an error function saying that alert and if there is some error then catch catch it and show it to the user now let us test this out but before that i have to create a firestore database so either click on here or here create database test mode choose the location which is appropriate for you or just leave it to us central oh and i also have to define the click event for the button so insert button dot add event listener this is the best way to assign events to an html element like the button so when it is clicked it will add or add document with an auto id so now we can run this let's add a student a random student tech we insert so data edit successfully refresh so sometimes we have to refresh the firebase to get the latest data so our document is added with an auto id which is generated by firestore itself so now we can also create a function to add document with a custom id for that we have to make some changes so this time we will use the doc function and it takes up to three argument so the third argument would be the name of the document which will be our role number roll box dot value so we would save our documents with the role number of the students because it would be unique and we have to change this add dock to set dock function everything else will remain the same now we can try adding the document with the custom id so let's add amazing codewords so successful now you can see that the document is added with with the custom id that we have specified now let's create a function to get a document from the firestore an asynchronous function to get a document war ref would be equals to the same document function for getting the reference and then we would need the document snapshot await get dock and here we will pass the reference then we will say that if the dog snap exist so if the document exists then the name box value set the name box value to the data that we have gotten from the database so this should be exactly the same as the fields field names that we set so i'm not setting the uh roll box because we are getting the document on the basis of the roll box else it will say no such document so this is it now we can assign a function to the select button and give it the function of get a document now get the document that we just added so it's retrieving the data now let us create some function for updating the data now to create an async function now just copy the function that we created for our custom id and change the set dock to update dock and we don't need the we don't need this document reference we don't need it over here also we need the document reference for the of when we add the auto id we can come over here and so in case we if we want to retrieve the auto id generated by the firestore we can use this dockref dot id otherwise we don't need the dock reference so we don't need it in custom id and also in the update document and we would not update the roll number because we have based our document on the basis of the roll number so this is the final update fields in a document function now update button update fields in a document data updated successfully refresh let me get the data of roll number 15 and then change its section to b and gender to mail update updated successfully and you can see that both of the things are updated now for deleting the data i would create i would again create an async function for deleting a document so delete document and first i will check that if the document exists so if the document does not exist give an statement that docu document does not exist and return so end the function otherwise delete the current document so await delete dock give it the reference and dot then create this arrow function so this same stuff deleted successfully delete document and the delete button so now i can add more records so i have all these records in my database now i want to delete this what i need is i only need the roll number and here is this record i will press delete this record would be deleted and successful so this is all for the video if you like it give it a thumbs up and do subscribe to the channel see you next time

Channel: TACV - The Amazing Code-Verse

Views: 4,048

Keywords: firestore javascript tutorial latest v9, google cloud firestore v9.1 database, how to create firestore database v9.1 javascript, store and retrieve data firestore javascript, how to use firestore in javascript, add data to firestore, CRUD cloud firestore javascript v9, firestore v9 tutorial video, cloud firestore 9, add document firestore javascript, get document from firestore using javascirpt, firestore v9 js, cloud firestore modular version 9, modular firestore using javascript

Id: z-pyxOx3i1s

Length: 15min 42sec (942 seconds)

Published: Mon Oct 04 2021