{"id":17075,"date":"2018-01-19T20:14:46","date_gmt":"2018-01-19T20:14:46","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/premier_developer\/?p=17075"},"modified":"2019-03-01T12:56:44","modified_gmt":"2019-03-01T19:56:44","slug":"firebase-101-nosql-database-management","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/premier-developer\/firebase-101-nosql-database-management\/","title":{"rendered":"Firebase 101: NoSql Database Management"},"content":{"rendered":"<p>In this post, Premier Developer Consultant, Kunal Sinha outlines steps to integrate Firebase Database into custom web applications as a NoSql alternative for quick POC demos.<\/p>\n<hr \/>\n<p>I was recently working on building out a Node JS web application POC for one of my projects and wanted to try out a new database service. As this was just a POC, I wasn\u2019t looking for anything full-blown like Azure Data Storage, but rather something simple for demo purposes. Firebase is a cloud-hosted NoSql DB that lets you store and sync data between your users in realtime. As I was building out a POC, I wanted to use something that was quick to setup and was easy to demo CRUD functionality for my application.<\/p>\n<p>To get started, navigate to <a href=\"https:\/\/firebase.google.com\/products\/realtime-database\/\">Firebase<\/a> and login with your Google account. Visit Console and create a new project:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-35644\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2018\/01\/fire1.jpg\" alt=\"\" width=\"421\" height=\"173\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2018\/01\/fire1.jpg 421w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2018\/01\/fire1-300x123.jpg 300w\" sizes=\"(max-width: 421px) 100vw, 421px\" \/><\/p>\n<p>Once your project is created, you\u2019ll have to add Firebase to your web app. To do this, navigate to <a href=\"https:\/\/console.firebase.google.com\/project\/fir-5e4be\/overview\">Get Started<\/a> and select Add Firebase to your web app.<\/p>\n<p>Follow this snippet of code and add to the bottom of your HTML page within <b>script<\/b> tags:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-35645\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2018\/01\/fire2.jpg\" alt=\"\" width=\"478\" height=\"268\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2018\/01\/fire2.jpg 478w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2018\/01\/fire2-300x168.jpg 300w\" sizes=\"(max-width: 478px) 100vw, 478px\" \/><\/p>\n<p>Now you\u2019re ready to use Firebase!<\/p>\n<h4>Read and Write Data on the Web<\/h4>\n<p>Working with data on Firebase is very simple. The first thing to remember is to always grab a reference to the database service to\/from where you want to either read or write data.<\/p>\n<pre class=\"lang:default decode:true \">\/\/ Get a reference to the database service\r\nvar users_ref = firebase.database.ref('users');<\/pre>\n<h5>Basic write operations<\/h5>\n<p>Once we have a reference to where we want to write data to (in this case, a users path), you can write to the database in two ways:<\/p>\n<p>1. Using .push()<\/p>\n<p>.push() creates a unique key for the object being written at the specific path. For example:<\/p>\n<pre>function addNewUser(uid, name, picture, number) {\r\n\u00a0\u00a0 \/\/ A user entry.\r\n\u00a0\u00a0 var postData = {\r\n\u00a0\u00a0\u00a0\u00a0 username: name,\r\n\u00a0\u00a0\u00a0\u00a0 uid: uid,\r\n\u00a0\u00a0\u00a0\u00a0 user_pic: picture,\r\n\u00a0\u00a0\u00a0\u00a0 phone: number\r\n\u00a0\u00a0 };\r\n\r\n\u00a0\u00a0 \/\/ Push object to specified reference.\r\n\u00a0\u00a0 firebase.database().ref('users').push(postData);\r\n\r\n<\/pre>\n<p>2. Using .set()<\/p>\n<p>.set() saves data to a specified reference, replacing any existing data at that location, including any child nodes. For example:<\/p>\n<pre>\/\/ Updates data at the current reference with new values\r\nfunction updateUserData(uid, name, number, picture) {\r\n\u00a0\u00a0 firebase.database().ref('users\/' + userId).set({\r\n\u00a0\u00a0\u00a0\u00a0 username: name,\r\n\u00a0\u00a0\u00a0\u00a0 uid: uid\r\n\u00a0\u00a0\u00a0\u00a0 user_pic: picture\r\n\u00a0\u00a0\u00a0\u00a0 phone: number,\r\n\u00a0\u00a0 });\r\n}<\/pre>\n<p>Current state of DB after pushing user data:<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/31\/2019\/04\/clip_image00611.jpg\"><img decoding=\"async\" title=\"clip_image006\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/31\/2019\/04\/clip_image006_thumb11.jpg\" alt=\"clip_image006\" width=\"438\" height=\"183\" border=\"0\" \/><\/a><\/p>\n<h5>Basic read operations<\/h5>\n<p>To read data at a path and listen for changes, use the on() or once() method of firebase.database.Reference to observe events.<\/p>\n<p>You can use the value event to read a snapshot of the contents at a given path, as they existed at the time of the event. The event callback is passed a snapshot containing all data at that location, including child data. If there is no data, the snapshot returned is null.<\/p>\n<p>1. Using .on()<\/p>\n<pre>var user_ref = firebase.database().ref('users');\r\nuser_ref.on('value', function(snapshot) {\r\n\u00a0\u00a0 handleUserData(snapshot.val());\r\n});<\/pre>\n<p>In the above example, we are referencing the users path which will contain multiple user objects. The listener receives a snapshot that contains this data at the time of the event. We can pull the data from snapshot using the val() method.<\/p>\n<p>2. Using.once()<\/p>\n<p>Sometimes we want to get a snapshot of our data without listening for changes and we don\u2019t expect our UI element to change with new values. In this situation, the once() method simplifies getting data as it triggers only once.<\/p>\n<pre>var userId = firebase.auth().currentUser.uid;\r\nreturn firebase.database().ref('\/users\/' + userId).once('value').then(function(snapshot) {\r\n\u00a0\u00a0 var username = snapshot.val().username);\r\n\u00a0\u00a0 \/\/ ...\r\n});<\/pre>\n<p>In the above example, we get the current users UID and navigate to the users\/uid path in our DB, where we pull the specific information regarding that user in our snapshot. We can then save the values the same way using snapshot.val().\u2019Attribute_Name\u2019<\/p>\n<h5>Delete Data<\/h5>\n<p>The last of the CRUD functionality is Deleting data and the simplest way to delete data with firebase is to call .remove() on a specified reference to the location of the data we want to delete.<\/p>\n<p>You can all use .set() to update data to Null at a specific reference point.<\/p>\n<pre>\/\/ To delete a user from our Database\r\nvar userId = firebase.auth().currentUser.uid;\r\nreturn firebase.database().ref('\/users\/' + userId).remove();<\/pre>\n<p>Firebase is a simple tool that comes in handy when building small projects or proof of concepts. If you\u2019re looking for something more robust, scalable and appropriate for production environment, Azure Storage provides all of that functionality and more. If you are interested in some similarities and differences between Firebase and Azure Storage, be on the lookout for my next blog where I\u2019ll be comparing the two.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this post, Premier Developer Consultant, Kunal Sinha outlines steps to integrate Firebase Database into custom web applications as a NoSql alternative for quick POC demos. I was recently working on building out a Node JS web application POC for one of my projects and wanted to try out a new database service. As this [&hellip;]<\/p>\n","protected":false},"author":583,"featured_media":37840,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-17075","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-permierdev"],"acf":[],"blog_post_summary":"<p>In this post, Premier Developer Consultant, Kunal Sinha outlines steps to integrate Firebase Database into custom web applications as a NoSql alternative for quick POC demos. I was recently working on building out a Node JS web application POC for one of my projects and wanted to try out a new database service. As this [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts\/17075","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/users\/583"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/comments?post=17075"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts\/17075\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/media\/37840"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/media?parent=17075"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/categories?post=17075"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/tags?post=17075"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}