Creating a website in HTML/JS that stores data in Firebase!

hello everyone welcome to the latest video from our development today we're gonna be talking about adding firebase to your web based app using HTML and JavaScript so this is just the basics for firebase we're gonna be posting some later videos on more complex stuff but today we're just gonna be learning how to save and pull down data so if you follow the link in the bio and create a Google account you'll want to create a new project today we're just gonna call it tutorial and accept the Terms so once it creates our project for us we can set up our web platform suite so click on the get started button for web which is this one right here and we're just gonna copy this code this is our API key and our URL to access our database so all the semantics that we need to call this API are here for us so let's create a new HTML file completely blank if you haven't created HTML file before I read up on how to do that before proceeding in this video so in the body of our code we're gonna paste the starter code that we just copied from firebase and let's indent it to make it look nice alright so now that we have our code inside the script tag we can start writing some JavaScript so first things first before we do that we're gonna want to create some body elements in HTML so we can input some data so let's title our website user database and then let's add some text fields so these are input tags the type is text in the placeholder we can say the name of our user and the ID we'll just call it name fields that off let's create another input the type is equal to text again the placeholder is H the ID H fields so the last thing we need is a button so we could submit our input and so I'll just call it submit and we're gonna need a on click function so if we type on click equals quotes we're gonna need to put in some function there in JavaScript that we want our button to do so that function is going to be a firebase integrated function that's going to write our data to the database so let's call this function write data and in button on click we can now type write data so in order to write data we are going to want to create an object that we can store to the database so an object has a key and a value so we're gonna want to say firebase database dot rest creates a database reference for a certain key let's call it the user and inside the user we're gonna set an object so inside the parameter for the set function let's create an object that has a name and which gonna be something and then an age which is gonna be something so the name as we know from JavaScript we can say you can access our HTML and say document get element by ID and we named our name text field name field and that has a value with some text inside which is gonna be the name we want to store so down here for age we're gonna want to say document dot get element by ID filled dot value so let's try this out first things first what we want to do is you want to go to our database and we want to create database start it in test mode just because we're not in deployment yet so here we are a blank database if we go to our if we go to our new web app we have we can type in a name Noah in age 19 click submit and look at that we have a user with an age 19 and a name Noah sweet so it worked we have data stored into our database if I want to change it to Google age 55 it changes in real time which is awesome there are ways that you can make multiple users with different keys so right now we're just gonna work with one data object just to keep things simple so how do we get this data down from your database and display it on to our website so let's create a another piece of text and let's make it say nothing but give it an ID called data so we're going to need to put some text into that P tag with the ID data and that's going to be our name and our age so let's write another function called get data we're going to want to say firebase database dot ref this time we're not accessing users we're accessing everything because everything we currently have is in user and instead of saying set we're gonna say once so we're gonna look for at one time we're not gonna listen for changes we're just gonna say once value function snapshot so this is getting a snapshot or passing through a dictionary of the of the data that's stored in our database so in this function we're gonna want to say snapshot dot for each so this would hypothetically return a list of all the user objects that we had or all the objects in general that we had not just users if we wanted to say ref slash user then it would just return all the user objects when we'd say for each function child snapshot so now we're getting the child we're gonna want to say bar child key is equal to child snapshot key we don't really need that but we're just gonna get it anyways and var child data is the child snapshot down fat which is the value of our data and once we get those we can say document dot get element by ID data which is the thing we just created down here dot inner HTML which is its text is equal to child data for name which is what we created in write data plus a comma child data age semicolon so now we're gonna get the data back that we wanted so now let's call this function right after we write our data so every time we press submit our page updates you're going to need open closed parenthesis after database let's just fix we fixed our database watch for bad bracketing that I had oh my goodness I'm so silly you need a parentheses here and a parenthesis here Oh make sure to add a plus sign here as well all right let's try it again to me 26 and to me 26 gets pulled down from the database and if we go into the database and we change it - Timmy 27 - me 27 and we call get data just outside of write data refreshing the page gives us to me 27 which is super cool change it to timmy 37 fresh the page to me 37 so clearly you know we can store and retrieve data I will post the source code for this in the description but thank you guys for watching and I hope you learned a little bit about firebase

Channel: Alright Development

Views: 100,982

Keywords: iMovie, firebase, google, web, app, storing files, html, css, js, javascript, coding, programming, making, good, amazing, tutorial, diy, date, store, easy

Id: -UOkri_WNWQ

Length: 10min 11sec (611 seconds)

Published: Wed Dec 19 2018