├── .gitattributes ├── LICENSE ├── README.md ├── demo.json ├── img ├── image1.PNG ├── image2.PNG ├── image3.PNG ├── import.PNG └── live.gif ├── index.html └── script.js /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 JSneak 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Get Started With Firebase in 5-10 Minutes 2 | 3 | **Table of Contents** 4 | 5 | - [What is Firebase?](#what-is-firebase) 6 | - [Adding Firebase to your website](#adding-firebase-to-your-website) 7 | - [Setting up Realtime Database](#setting-up-realtime-database) 8 | - [Pulling data from the Realtime Database](#pulling-data-from-the-realtime-database) 9 | - [Updating data in the Realtime Database](#updating-data-in-the-realtime-database) 10 | - [Dealing with Firebase Generated Unique Ids](#dealing-with-firebase-generated-unique-ids) 11 | - [Conclusion](#conclusion) 12 | 13 | The goal of this article is to expose you to the basics of Firebase and provide simple, working examples. If you want to go more in depth, check out Firebase's [documentation](https://firebase.google.com/docs/reference/js/firebase.database) 14 | 15 | ---- 16 | 17 | ### What is Firebase? 18 | Firebase is a platform that allows you to build websites without server side code. It has a ton of cool features but we are going to be focused on it's Realtime database. 19 | 20 | Now lets get started. 21 | 22 | --- 23 | 24 | ### Adding Firebase to your website. 25 | 26 | - Step 1: Go to console.firebase.google.com 27 | - Step 2: Add a project 28 | - Step 3: Press "Add Firebase to your web app" 29 | - Step 4: Copy that code into your HTML page 30 | 31 | ### Setting up the Realtime Database 32 | 33 | - Step 1: Go into your Database 34 | - Step 2: Click the rules tab 35 | - Step 3: Change your rules to the code snippet below. Normally you shouldn't do this due to security reasons, but for testing purposes it will be fine. Read more about it [here](https://firebase.google.com/docs/database/security/securing-data) 36 | ```javascript 37 | { 38 | "rules": { 39 | ".read": "true", 40 | ".write": "true" 41 | } 42 | } 43 | ``` 44 | - Step 4: Download the demo.json from [here](https://raw.githubusercontent.com/JSneak/jsneak.github.io/master/blog/firebase-tutorial/demo.json). Right click and Save as on the page to download it. Don't forget to name is **demo.json**, not **demo.json.txt**. 45 | - Step 5: Import demo.json to firebase 46 | 47 | ![](img/import.PNG) 48 | 49 | ### Pulling data from the Realtime Database 50 | 51 | First add the following code to your script tag. 52 | ```javascript 53 | var database = firebase.database(); 54 | ``` 55 | There are two main ways to get data from the database, but for now we are going to focus on **.once**. Use this if you want to pull from the database just one time. 56 | ```javascript 57 | database.ref('/').once('value', function(snapshot){ 58 | console.log(snapshot.val()); 59 | }); 60 | ``` 61 | The database will listen at the root directory, which is done with **.ref('/')**. Below is another way to declare the **.ref**. 62 | ```javascript 63 | var rootRef = database.ref('/'); 64 | rootRef.once('value', function(snapshot){ 65 | console.log(snapshot.val()); 66 | }); 67 | ``` 68 | When you make a call to the Firebase Database, it will return a **snapshot**, which is data at the reference point you gave it. To access this data, we use **.val()**. 69 | 70 | Now, lets say that our data was in a different child location, as it is in the image below. 71 | 72 | ![](img/image1.PNG) 73 | 74 | Getting that data is still easy. Instead of **database.ref('/')**, we would do **database.ref('/username')** to get the data. 75 | 76 | Now, what if you want to continue to listen for updates past the first one? In that case, you would use **.on()** 77 | 78 | What **.on()** does is that it will listen for a certain event at a specific child. The different types of events are shown below. 79 | 80 | ![](img/image3.PNG) 81 | 82 | We are going to be focusing on 2 of the events, **child_added** and **child_changed** events. 83 | 84 | #### child_added event 85 | 86 | This will run when the user loads the page, and can be used in place of a **.once()**. This will return the values that are pushed/set. 87 | 88 | ```javascript 89 | pushDataRef = database.ref("/pushData"); 90 | pushDataRef.on("child_added", function(snapshot){ 91 | console.log("Below is the data from child_added"); 92 | console.log(snapshot.val()); 93 | }); 94 | ``` 95 | 96 | #### child_changed event 97 | 98 | This will return the values that are changed. 99 | 100 | ```javascript 101 | setDataRef = database.ref("/setData"); 102 | setDataRef.on('child_changed', function(snapshot) { 103 | console.log("Below is the data from child_changed"); 104 | console.log(snapshot.val()); 105 | }); 106 | ``` 107 | 108 | If you aren't sure if you are updating or adding, then just have the Firebase Database on your screen as it will flash different colors based on what event is going on. 109 | 110 | ![](img/live.gif) 111 | 112 | ### Updating data in the Realtime Database 113 | 114 | Lets add a button and text box on our page for this example. 115 | ```html 116 | 117 | 118 | ``` 119 | The two ways I update/create values in the database is with **.push()** and **.set()**. 120 | 121 | You use **.push()** if you want to create a new child location with a new generated id. You can then use **.set()** to update a key:value pair. 122 | 123 | Below is an example of using **.push()** and **.set()** 124 | ```javascript 125 | function pushData(){ 126 | var data = document.getElementById("dataValue").value; 127 | var dataRef = database.ref('/').push();//Generates a new child location with a randomly generated id. 128 | dataRef.set({ 129 | value: data 130 | }); 131 | } 132 | ``` 133 | Another example, except this time it is only using **.set**. 134 | ```javascript 135 | function setData(){ 136 | var data = document.getElementById("dataValue").value; 137 | var dataRef = database.ref('/newData'); 138 | console.log(data) 139 | dataRef.set({ 140 | value: data 141 | }); 142 | } 143 | ``` 144 | If you want to make a new parent and child without having to use **.push()**, you would do this if you don't want to use a firebase generated UID, then do the example below. 145 | ```javascript 146 | function setData(){ 147 | var data = document.getElementById("dataValue").value; 148 | var dataRef = database.ref('/newData/' + "nameOfNewParent"); 149 | console.log(data) 150 | dataRef.set({ 151 | value: data 152 | }); 153 | } 154 | ``` 155 | 156 | ### Dealing with Firebase Generated Unique Ids 157 | Now, you might have noticed that Firebase creates a crazy string of characters and numbers when you use **.push()**. 158 | 159 | ![](img/image2.PNG) 160 | 161 | This is the UID, unique ID, that Firebase generates when we use **.push()**. We can get the UID of a child by using either **Object.keys()** or **.key()** as demonstrated below. 162 | 163 | #### Object.keys() 164 | This will return an array of keys. 165 | ```javascript 166 | database.ref('/pushData').once('value', function(snapshot){ 167 | console.log(Object.keys(snapshot.val())); 168 | }) 169 | ``` 170 | #### .key 171 | This will return the key of 1 object. 172 | ```javascript 173 | database.ref('/pushData').once('value', function(snapshot){ 174 | snapshot.forEach(function(data){ 175 | console.log(data.key); 176 | }); 177 | }) 178 | ``` 179 | 180 | ### Conclusion 181 | 182 | Hope this helps with getting you started with Firebase. If you have any issues or questions, create an issue [here](https://github.com/JSneak/jsneak.github.io/issues). 183 | -------------------------------------------------------------------------------- /demo.json: -------------------------------------------------------------------------------- 1 | { 2 | "pushData" : { 3 | "-KoSihRoSxROg5OnjIvI" : { 4 | "value" : "Zac" 5 | }, 6 | "-KoSiihs02wl5U5LcA96" : { 7 | "value" : "Xerath" 8 | }, 9 | "-KoSilfSQxSI7Mq3OgKO" : { 10 | "value" : "Quinn" 11 | } 12 | }, 13 | "setData" : { 14 | "value" : "Sean" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /img/image1.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JSneak/firebase-tutorial/35c2ae9bb975670050bbb9a72b504d9c38d000a0/img/image1.PNG -------------------------------------------------------------------------------- /img/image2.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JSneak/firebase-tutorial/35c2ae9bb975670050bbb9a72b504d9c38d000a0/img/image2.PNG -------------------------------------------------------------------------------- /img/image3.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JSneak/firebase-tutorial/35c2ae9bb975670050bbb9a72b504d9c38d000a0/img/image3.PNG -------------------------------------------------------------------------------- /img/import.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JSneak/firebase-tutorial/35c2ae9bb975670050bbb9a72b504d9c38d000a0/img/import.PNG -------------------------------------------------------------------------------- /img/live.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JSneak/firebase-tutorial/35c2ae9bb975670050bbb9a72b504d9c38d000a0/img/live.gif -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | // Initialize Firebase 2 | var config = { 3 | apiKey: "AIzaSyBICyFq4GPWKBhCNe46-1MCsDNbfoymkU0", 4 | authDomain: "amazing-project-95629.firebaseapp.com", 5 | databaseURL: "https://amazing-project-95629.firebaseio.com", 6 | projectId: "amazing-project-95629", 7 | storageBucket: "amazing-project-95629.appspot.com", 8 | messagingSenderId: "42388728204" 9 | }; 10 | firebase.initializeApp(config); 11 | 12 | var database = firebase.database(); 13 | 14 | database.ref('/').once('value', function(snapshot){ 15 | console.log(snapshot.val()); 16 | }); 17 | 18 | var rootRef = database.ref('/'); 19 | 20 | rootRef.once('value', function(snapshot){ 21 | console.log(snapshot.val()); 22 | }); 23 | 24 | function pushData(){ 25 | var data = document.getElementById("dataValue").value; 26 | var dataRef = database.ref('/pushData').push(); 27 | dataRef.set({ 28 | value: data 29 | }); 30 | } 31 | 32 | function setData(){ 33 | var data = document.getElementById("dataValue").value; 34 | var dataRef = database.ref('/setData'); 35 | console.log(data) 36 | dataRef.set({ 37 | value: data 38 | }); 39 | } 40 | 41 | setDataRef = database.ref("/setData"); 42 | setDataRef.on('child_changed', function(snapshot) { 43 | console.log("Below is the data from child_changed"); 44 | console.log(snapshot.val()); 45 | }); 46 | 47 | pushDataRef = database.ref("/pushData"); 48 | pushDataRef.on("child_added", function(snapshot){ 49 | console.log("Below is the data from child_added"); 50 | console.log(snapshot.val()); 51 | }); 52 | 53 | database.ref('/pushData').once('value', function(snapshot){ 54 | snapshot.forEach(function(data){ 55 | console.log("Below are the child keys of the values in 'pushData'") 56 | console.log(data.key); 57 | }); 58 | console.log(Object.keys(snapshot.val())); 59 | }); --------------------------------------------------------------------------------