9.2: Firebase: Saving Data - Programming with Text

hello welcome to a video about how to use this thing called Firebase which is a database as service I made a previous video sort of introducing the idea of what databases service is and why that's a meaningful thing that you might want to use you can go back and watch that if you haven't or you could just be right here and get started so this simple basic demonstration that I'm going to show you is let's say you've made a game that runs in the browser client side JavaScript only no fancy node server side program but you want to have that game be able to save high score and that's what I'm going to do in this particular video so let me show you this is Firebase by the way so I'll come back to this in a second firebase.com but this is my game so code to this game will be available as part of the video I'll also have a link to show you the the video the part of the video where I actually coded this game and but you'll show it's a very simple game the goal of the game is to click this button as many times as you possibly can and the more I click it the higher my score so if you guys don't mind I'm just going to click it till I get to like I don't know four 5,000 no just kidding okay I'm gonna stop and move on 43 is my high score see if you can beat it and I know you fancy people on the internet will figure out all sorts of ways to autoc click that button of to infinity or whatever and break and win the whole universe Etc but I don't care about that I need to add uh I need to be able to save that score with my name your to the database so let's go to Firebase so what you need to do is go to this URL firebase.com Firebase is a Google product so you also will need [Laughter] it's only getting more awkward what's happening internet ah okay so there we go ah okay so um uh I don't know if I clicked on something or I just got here but now I'm in my not my not awesome project and I'm looking at this and I have some options so Firebase has you can use it's just a generic service on the server where I can say hey save this and later if I ask for it please give it back to me and what I'm doing here is I want to add Firebase to my web app so this is a good place where I can click to get started of course if you're using iOS or Android you can do that as well and so the key thing that's happening here is that I am getting all this information about how to authenticate into Firebase so first what I need to do is make sure I have a reference to the Firebase Library itself so I'm going to copy this and I'm going to go back to my code and I'm going to go back to my index.html file where I have a reference to all the JavaScript libraries that I'm using I'm currently just using p5js p5.js and my code that I'm writing is in sketch. JS so I'm going to add this script tag which now links to the Firebase Library you know's different versions of Firebase I guess the current one is 3.6.3 um and then I'm going to go back to here and I'm going to grab this so this code if I zoom in on this this is the stuff that I actually want to put in my code itself config equals all this stuff my API key my off domain my database URL storage bucket my messaging center ID and then I want to say Firebase initialize so this makes that connection to Firebase itself so I'm going to take this I'm going to uh I'm going to just put this in setup um setup is my is p5js is kind of like page loaded function so that's the event where everything is ready if you're using jQuery or any other framework you just want to do this stuff at the beginning once your page has loaded and then I'm just going to say console.log Firebase just to sort of see that I don't have any errors so I'm going to go back to my uh game and I'm going to hit refresh and this looks good looks like you know there's all sorts of stuff there and no errors so I am now connected to Firebase excellent now I have to pause for a second because I got to do something a little bit more you might have noticed like oh look at that in my code is all of my like secret stuff like my API key and the URL and this messenger sender ID so there's a there's an issue here which is that what I'm doing has no security to it whatsoever so you have been a publish this to the web anybody could go to view Source could see this stuff and in fact I'm not I don't want to have to authenticate for this quick demonstration into Firebase I'm not going to add that sort of security code so I have to go back to uh Firebase and I the next thing I need to do is come over here to the left and click on database this is actually the main link that I'm going to need which is going to have all the information about my database click on that and I need to go over to two rules and these rules are now who is allowed to read and write to the database some people might be allowed to read some people might be allowed to write and I'm going to do something which is generally a bad idea but for the kind of quick and dirty experiments I'm doing no big deal and I'll talk about at the end of this video I'll talk about ways that you can add authentication and security to what you're doing but I want to focus on just how Firebase works and get the code up and running so on my uh website where I have a tutorial I actually have the uh the configuration the Java script configuration that I need which I just want true for read and true for write for anybody in the world I'm going to copy that and I'm going to go back to my Firebase console I'm going to paste that in here and I'm going to hit uh publish and now it's giving me this warning your security rules are defined as public anyone can read or write to your database again of course if you're if you if you're having people submit private data or you know there's some sort of anything that you know privacy or security is a concern you wouldn't want to do this but for a quick example of a high score list big deal I don't care if anybody all of you are welcome you're not please don't but you you'll very easily be able to hack this high score list anytime you want okay so um let me go back to now now uh where were we so what I want to do now that I've done that is I need to start actually um connecting to the database so I don't really remember this stuff off the top of my head so I'm going to go to my notes here um and the first thing I'm going to do is just grab this line of code and I I kind of remembered that and I'm going to say uh VAR database equals Firebase do database so this Firebase is the main object that is now connected to my online database on Firebase so now I have that database in a variable so how is data organized in Firebase so dat data in Firebase is organized in a tree likee structure just like a JavaScript object and the way that you access that tree like structure is with a reference or RF for short so basically what I'm I have a very simple structure here where I want to have a scores reference and in that score I want to have multiple entries each entry I want to have an ID which is the kind of thing that databases often have so each entry has a unique ID because you know I might have multiple scores that have the same value or multiple score high scores have the same name and the same value so if I really want to like have a unique key for every single entry in the database that's something that Firebase is going to generate for me and then each one of these is going to have an ID and as part of that ID each one will have a score and a name a score and a name so this is just like a j Json file or an XML file so sort of a tree of data the the root is scores scores has a bunch of children which is all these IDs an array of IDs and each ID has children which is a score and an name a score and an name so you could imagine a much more elaborate and complex way of structuring your data and I'm sure you'll enjoy doing that in your own thing that you do but I'm going to keep it simple with this so how do I access the the reference and and data as a path in Firebase so the way that I do that it's actually quite simple I just say um VAR uh I'm going to say ref equals database. ref scores so this is saying Hey I want to access the scores node in that tree of data and by the way if I had multiple games like I had a snake game I could say score SL snake and then I could have another node which is like you know scores SL Space Invaders or I could have a node that's snake SL scores and so I can use slashes to kind of like Auto Traverse that tree by and point directly to a specific point now what I want to do is I want to sore some data in there so if I just say VAR um um you know data equals name DTS which are my initials apparently my initial my initials autoc convert into database in adom editor comma uh oh that needs to be a string and uh score uh my my high score was 43 right and then I can just say reference push data that is it's as simple as that I just I need to authenticate to the database I need to make a reference to the datab I need to get the database in a variable I need to make a ref I need to access a part of the database like the scores node or the scores reference I make a JavaScript object and I can just push it in there so let's do that and uh let's run this code right over here and I'm going to hit refresh and we can see now if I go to the console and I hit oops I need to go oops I'm in the wrong place I'm going to click over now under data in the Firebase console I can look at my data and I can say look at that this is the tree my not awesome project there's a scores and there's this ID which has in it name DTS score 43 there it is guess what would happen by the way oops if I run this program again one more time look at this now it's in there twice and you know what's great about Firebase is I can actually manage and manipulate the data through this web interface as well so if I'm just testing out I'm like you know what those were just my tests so now I want to make sure I delete this stuff so I can just delete these entries as well and now if I refresh I don't think I need to refresh I think the page will probably refresh for me that data is gone so I can start over so of course I don't want to just submit the data um I don't want to just submit the score what am I saying um like hardcoded in the code I want to actually submit the score um dynamically based on the variables and things that that are happening in my program so let's look at how I would do that now so what I need to add to this program is I want to add a uh um um uh initial I'm gonna I'm GNA say initial initial input so I'm going to say uh initial input equals create input I could add this into the HTML file but uh but if I do that on my program will now see I have a place for you to put your initials I'm doing a terrible job of like formatting this and then uh I'm going to add another button which is going to be the uh submit button and I'm going to say uh submit button equals create button uh submit and now I have also this submit button the idea meaning that I can put DTS here and then I can click submit and I can submit whatever my score is here okay so we're doing pretty well so far I'm looking at the chat now what I want to do is bind an event when I click the button submit score so I need to write a function now uh that says submit score so I need to now create that data which is the initials I'm going to say yeah we'll do initials I didn't spell that right initials and then what did I call the input initial input uh initial input. value and the score which is just the actual score I'm going to take out this and then I need to say uh get all of this and you know I think it might be nice just to have the database thing be a global variable so I don't have to keep like reming that so I'm going to put that in setup right after I initialize it uh database equals Firebase database I don't need this console log anymore but I do want to do this console log data and then I don't need this anymore right so the idea is whenever it's time to submit the score I make a JavaScript object that has the data I want in it I access the reference in the database that I want and I push add the data to scores so let's do this now I refresh this program oops uh I got an error on line 31 initials oh I have a semicolon there that should be a comma JavaScript object syntax here we go so now I'm going to put my initials in DTS I'm gonna try to get my beat my high score of 43 come on I can't believe you're watching a video of me click this I'm just going to go to 44 okay I got to 45 now I'm going to hit submit looks like it submitted that I'm going to get a little bit higher and got a new high score and then I'm going to get get a little bit higher and I got a new high score all right high scores so now what's going to happen here is I should be able to look back in Firebase and I should be able to see look at all these high scores there they're all submitted to the database wonderful so now we have a basic program which allows you to send data to the database so in the next video what I'm going to do is show you how to retrieve the data from the database so I can display a list of high scores and whenever there's a new high score I can actually have the page dynamically regenerate without having to reload or have a set interval running Firebase is just always going to ping me whenever there's new data so that'll be exciting to see in the next [Music] video

Channel: The Coding Train

Views: 142,339

Keywords: JavaScript (Programming Language), live, programming, daniel shiffman, creative coding, p5.js, p5.js tutorial, p5js, javascript (programming language), tutorial, javascript, algorithms, programming from a to z, firebase, firebase google, firebase array, firebase database, firebase backend, firebase p5.js, firebase drawing app, real-time database, database as a service, database as service, DBaaS

Id: 7lEU1UEw3YI

Length: 15min 22sec (922 seconds)

Published: Fri Dec 09 2016