title
9.2: Firebase: Saving Data - Programming with Text

description
In this video, I demonstrate how to save data to the cloud using the database service Firebase. This video is part of the "Programming from A to Z" ITP class. Next video: https://youtu.be/NcewaPfFR6Y Link to the "Clicking Game" development: http://www.youtube.com/watch?v=nAQNmjyAUTY&t=32m35s Code: https://github.com/CodingTrain/website/tree/master/Courses/A2Z/session09 Course url: http://shiffman.net/a2z/firebase/ Support this channel on Patreon: https://patreon.com/codingtrain Send me your questions and coding challenges!: https://github.com/CodingTrain/Rainbow-Topics Contact: https://twitter.com/shiffman GitHub Repo with all the info for Programming from A to Z: https://github.com/shiffman/A2Z-F16 Links discussed in this video: Firebase: https://firebase.google.com/ https://firebase.google.com/docs/database/web/read-and-write Source Code for the all Video Lessons: https://github.com/CodingTrain/Rainbow-Code For More Programming from A to Z videos: https://www.youtube.com/user/shiffman/playlists?shelf_id=11&view=50&sort=dd For More Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH Help us caption & translate this video! http://amara.org/v/1JdB/ 📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

detail
{'title': '9.2: Firebase: Saving Data - Programming with Text', 'heatmap': [{'end': 212.419, 'start': 202.387, 'weight': 0.721}, {'end': 280.233, 'start': 247.38, 'weight': 0.872}, {'end': 647.325, 'start': 597.537, 'weight': 0.725}], 'summary': 'Tutorial covers using firebase to store high scores for a browser game with a simple example featuring a high score of 43, setting up firebase for a web app, including creating a new project, linking it to a google account, accessing the firebase console, adding firebase to a web app without authentication, and dynamically submitting scores and initials to store and retrieve high scores using javascript, firebase, and html.', 'chapters': [{'end': 72.675, 'segs': [{'end': 35.112, 'src': 'embed', 'start': 0.998, 'weight': 0, 'content': [{'end': 6.96, 'text': 'Hello, welcome to a video about how to use this thing called Firebase, which is a database as service.', 'start': 0.998, 'duration': 5.962}, {'end': 14.042, 'text': "I made a previous video introducing the idea of what database as service is and why that's a meaningful thing that you might want to use.", 'start': 7.36, 'duration': 6.682}, {'end': 15.382, 'text': "You can go back and watch that if you haven't.", 'start': 14.062, 'duration': 1.32}, {'end': 17.423, 'text': 'Or you could just be right here and get started.', 'start': 15.502, 'duration': 1.921}, {'end': 23.145, 'text': "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.", 'start': 17.443, 'duration': 5.702}, {'end': 30.69, 'text': 'client-side JavaScript only, no fancy node server-side program, but you want to have that game be able to save a high score.', 'start': 23.965, 'duration': 6.725}, {'end': 32.871, 'text': "And that's what I'm going to do in this particular video.", 'start': 30.97, 'duration': 1.901}, {'end': 33.812, 'text': 'So let me show you.', 'start': 33.111, 'duration': 0.701}, {'end': 35.112, 'text': 'This is Firebase, by the way.', 'start': 34.092, 'duration': 1.02}], 'summary': 'Tutorial on using firebase for browser-based game high score storage.', 'duration': 34.114, 'max_score': 0.998, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7lEU1UEw3YI/pics/7lEU1UEw3YI998.jpg'}, {'end': 83.081, 'src': 'embed', 'start': 54.325, 'weight': 2, 'content': [{'end': 56.426, 'text': 'And the more I click it, the higher my score.', 'start': 54.325, 'duration': 2.101}, {'end': 60.829, 'text': "So if you guys don't mind, I'm just going to click it till I get to like, I don't know, 4, 000 or 5, 000.", 'start': 56.827, 'duration': 4.002}, {'end': 61.929, 'text': 'No, just kidding.', 'start': 60.829, 'duration': 1.1}, {'end': 64.59, 'text': "OK, I'm going to stop and move on.", 'start': 61.989, 'duration': 2.601}, {'end': 65.811, 'text': '43 is my high score.', 'start': 64.851, 'duration': 0.96}, {'end': 66.772, 'text': 'See if you can beat it.', 'start': 66.091, 'duration': 0.681}, {'end': 72.675, 'text': 'And I know you fancy people on the internet will figure out all sorts of ways to auto-click that button to infinity or whatever,', 'start': 66.852, 'duration': 5.823}, {'end': 75.236, 'text': 'and break and win the whole universe, et cetera.', 'start': 72.675, 'duration': 2.561}, {'end': 76.357, 'text': "But I don't care about that.", 'start': 75.336, 'duration': 1.021}, {'end': 81.82, 'text': 'I need to be able to save that score with my name to the database.', 'start': 76.537, 'duration': 5.283}, {'end': 83.081, 'text': "So let's go to Firebase.", 'start': 82.06, 'duration': 1.021}], 'summary': 'High score is 43, aiming for 4,000 or 5,000.', 'duration': 28.756, 'max_score': 54.325, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7lEU1UEw3YI/pics/7lEU1UEw3YI54325.jpg'}], 'start': 0.998, 'title': 'Using firebase for browser game high scores', 'summary': 'Demonstrates utilizing firebase as a database service for a browser game to store high scores, featuring a simple game example with a high score of 43.', 'chapters': [{'end': 72.675, 'start': 0.998, 'title': 'Firebase for browser game high scores', 'summary': 'Demonstrates using firebase as a database service for a browser game to save high scores, with a simple game example and a high score of 43.', 'duration': 71.677, 'highlights': ['The demonstration focuses on using Firebase as a database service for a client-side JavaScript browser game to save high scores.', 'The game example is simple, with the goal of clicking a button as many times as possible to increase the score, demonstrated with a high score of 43.', 'Firebase is introduced as the database service for the demonstration.']}], 'duration': 71.677, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7lEU1UEw3YI/pics/7lEU1UEw3YI998.jpg', 'highlights': ['The demonstration focuses on using Firebase as a database service for a client-side JavaScript browser game to save high scores.', 'Firebase is introduced as the database service for the demonstration.', 'The game example is simple, with the goal of clicking a button as many times as possible to increase the score, demonstrated with a high score of 43.']}, {'end': 397.099, 'segs': [{'end': 144.344, 'src': 'embed', 'start': 95.209, 'weight': 0, 'content': [{'end': 103.575, 'text': "And now I'm ready to go to console, because the console is where I can manage my database on the Firebase website itself.", 'start': 95.209, 'duration': 8.366}, {'end': 109.564, 'text': 'So before I can start adding code to put stuff in the database, I need to go to this console.', 'start': 104.52, 'duration': 5.044}, {'end': 111.245, 'text': "So I'm going to click on Go to Console.", 'start': 109.584, 'duration': 1.661}, {'end': 113.367, 'text': 'And here I am.', 'start': 112.286, 'duration': 1.081}, {'end': 114.988, 'text': 'Welcome to Firebase.', 'start': 113.727, 'duration': 1.261}, {'end': 119.271, 'text': "I don't know how well you can see these, but the first thing I need to do is create a new project.", 'start': 115.008, 'duration': 4.263}, {'end': 120.572, 'text': "So I'm going to do that right now.", 'start': 119.452, 'duration': 1.12}, {'end': 122.294, 'text': 'Create a new project.', 'start': 121.273, 'duration': 1.021}, {'end': 125.238, 'text': 'Project name, my awesome project.', 'start': 123.356, 'duration': 1.882}, {'end': 126.62, 'text': 'Thanks Google for that suggestion.', 'start': 125.279, 'duration': 1.341}, {'end': 128.362, 'text': "I think it's really awesome too.", 'start': 126.7, 'duration': 1.662}, {'end': 134.611, 'text': "But I'm going to call it my not so, my not awesome project.", 'start': 128.663, 'duration': 5.948}, {'end': 138.077, 'text': "And then I'm going to say create project.", 'start': 136.315, 'duration': 1.762}, {'end': 140.88, 'text': "And I'm accepting all sorts of terms and conditions right now.", 'start': 138.097, 'duration': 2.783}, {'end': 144.344, 'text': "And I'm watching the thing spin.", 'start': 142.862, 'duration': 1.482}], 'summary': 'Creating a new project on firebase console to manage the database.', 'duration': 49.135, 'max_score': 95.209, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7lEU1UEw3YI/pics/7lEU1UEw3YI95209.jpg'}, {'end': 227.627, 'src': 'heatmap', 'start': 202.387, 'weight': 2, 'content': [{'end': 208.674, 'text': "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.", 'start': 202.387, 'duration': 6.287}, {'end': 212.419, 'text': "I'm currently just using p5.js, p5dom.js.", 'start': 208.695, 'duration': 3.724}, {'end': 214.962, 'text': "And my code that I'm writing is in sketch.js.", 'start': 212.679, 'duration': 2.283}, {'end': 216.063, 'text': "So I'm going to add.", 'start': 215.302, 'duration': 0.761}, {'end': 220.542, 'text': 'This script tag, which now links to the Firebase library.', 'start': 216.98, 'duration': 3.562}, {'end': 222.023, 'text': "It's a different version to Firebase.", 'start': 220.823, 'duration': 1.2}, {'end': 222.904, 'text': 'I guess the current one is 3.6.', 'start': 222.063, 'duration': 0.841}, {'end': 227.627, 'text': "3 And then I'm going to go back to here, and I'm going to grab this.", 'start': 222.904, 'duration': 4.723}], 'summary': 'Adding firebase library (version 3.6) to index.html.', 'duration': 25.24, 'max_score': 202.387, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7lEU1UEw3YI/pics/7lEU1UEw3YI202387.jpg'}, {'end': 280.233, 'src': 'heatmap', 'start': 247.38, 'weight': 0.872, 'content': [{'end': 252.722, 'text': "I'm going to just put this in setup.", 'start': 247.38, 'duration': 5.342}, {'end': 257.663, 'text': "P5.js is kind of like page loaded function, so that's the event where everything is ready.", 'start': 253.522, 'duration': 4.141}, {'end': 262.725, 'text': "If you're using jQuery or any other framework, you just want to do this stuff at the beginning once your page has loaded.", 'start': 257.683, 'duration': 5.042}, {'end': 266.106, 'text': "And then I'm just going to say console.log Firebase.", 'start': 263.125, 'duration': 2.981}, {'end': 268.867, 'text': "just to sort of see that I don't have any errors.", 'start': 266.866, 'duration': 2.001}, {'end': 271.228, 'text': "So I'm going to go back to my game.", 'start': 268.907, 'duration': 2.321}, {'end': 272.969, 'text': "And I'm going to hit Refresh.", 'start': 271.889, 'duration': 1.08}, {'end': 274.21, 'text': 'And this looks good.', 'start': 273.409, 'duration': 0.801}, {'end': 277.912, 'text': "Looks like there's all sorts of stuff there and no errors.", 'start': 274.49, 'duration': 3.422}, {'end': 280.233, 'text': 'So I am now connected to Firebase.', 'start': 278.092, 'duration': 2.141}], 'summary': 'Using p5.js setup function to connect to firebase without errors.', 'duration': 32.853, 'max_score': 247.38, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7lEU1UEw3YI/pics/7lEU1UEw3YI247380.jpg'}, {'end': 360.88, 'src': 'embed', 'start': 330.843, 'weight': 3, 'content': [{'end': 335.308, 'text': 'And these rules are now who is allowed to read and write to the database.', 'start': 330.843, 'duration': 4.465}, {'end': 337.369, 'text': 'Some people might be allowed to read.', 'start': 335.848, 'duration': 1.521}, {'end': 338.709, 'text': 'Some people might be allowed to write.', 'start': 337.449, 'duration': 1.26}, {'end': 341.371, 'text': "And I'm going to do something which is generally a bad idea.", 'start': 338.749, 'duration': 2.622}, {'end': 344.652, 'text': "But for the kind of quick and dirty experiments I'm doing, no big deal.", 'start': 341.571, 'duration': 3.081}, {'end': 350.515, 'text': "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.", 'start': 344.832, 'duration': 5.683}, {'end': 353.156, 'text': 'But I want to focus on just how Firebase works and get the code up and running.', 'start': 350.535, 'duration': 2.621}, {'end': 360.88, 'text': 'So, on my website, where I have a tutorial, I actually have the configuration, the JavaScript configuration, that I need,', 'start': 353.497, 'duration': 7.383}], 'summary': 'Rules for database access, authentication, and security in firebase will be discussed after focusing on code setup and functionality.', 'duration': 30.037, 'max_score': 330.843, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7lEU1UEw3YI/pics/7lEU1UEw3YI330843.jpg'}], 'start': 72.675, 'title': 'Firebase setup for web app', 'summary': 'Covers setting up a firebase database, including creating a new project, linking it to a google account, and accessing the firebase console, as well as adding firebase to a web app, obtaining the library, initializing the connection, and setting database security rules, with a focus on quick setup without authentication.', 'chapters': [{'end': 169.843, 'start': 72.675, 'title': 'Setting up firebase database', 'summary': 'Explains the process of setting up a firebase database, including creating a new project, linking it to a google account, and accessing the firebase console to manage the database.', 'duration': 97.168, 'highlights': ["The first step is to create a new project on Firebase by providing a project name, such as 'my awesome project' or 'my not awesome project'.", 'Accessing the Firebase console allows users to manage the database and add code to store data, requiring a Google account for access.', 'Firebase is a Google product, and users need to visit firebase.google.com and sign in with a Google account to start the process of setting up the database.']}, {'end': 397.099, 'start': 169.843, 'title': 'Adding firebase to web app', 'summary': 'Discusses adding firebase to a web app, including obtaining the firebase library, initializing the connection, and setting database security rules, with a focus on quick setup without authentication.', 'duration': 227.256, 'highlights': ['Obtaining and referencing the Firebase library by adding a script tag to the index.html file, and initializing the connection to Firebase. Firebase library version 3.6, adding script tag to index.html, initializing the connection to Firebase.', 'Setting database security rules to allow anyone in the world to read and write, highlighting the lack of authentication and security measures in the quick demonstration. Setting database security rules, lack of authentication and security measures in the quick demonstration.', 'Emphasizing the need for proper security and authentication for private data and discussing future considerations for adding authentication and security measures. Emphasizing the need for proper security and authentication, discussing future considerations for adding authentication and security measures.']}], 'duration': 324.424, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7lEU1UEw3YI/pics/7lEU1UEw3YI72675.jpg', 'highlights': ['Accessing the Firebase console allows users to manage the database and add code to store data, requiring a Google account for access.', "The first step is to create a new project on Firebase by providing a project name, such as 'my awesome project' or 'my not awesome project'.", 'Obtaining and referencing the Firebase library by adding a script tag to the index.html file, and initializing the connection to Firebase.', 'Setting database security rules to allow anyone in the world to read and write, highlighting the lack of authentication and security measures in the quick demonstration.', 'Emphasizing the need for proper security and authentication for private data and discussing future considerations for adding authentication and security measures.']}, {'end': 910.459, 'segs': [{'end': 470.18, 'src': 'embed', 'start': 445.074, 'weight': 1, 'content': [{'end': 451.335, 'text': 'And the way that you access that tree-like structure is with a reference, or REF for short.', 'start': 445.074, 'duration': 6.261}, {'end': 457.037, 'text': 'So basically, I have a very simple structure here where I want to have a scores reference.', 'start': 451.695, 'duration': 5.342}, {'end': 461.158, 'text': 'And in that score, I want to have multiple entries.', 'start': 457.617, 'duration': 3.541}, {'end': 466.739, 'text': 'Each entry, I want to have an ID, which is the kind of thing that databases often have.', 'start': 461.878, 'duration': 4.861}, {'end': 470.18, 'text': 'So each entry has a unique ID,', 'start': 467.239, 'duration': 2.941}], 'summary': 'Access tree-like structure with ref for scores and unique ids for entries.', 'duration': 25.106, 'max_score': 445.074, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7lEU1UEw3YI/pics/7lEU1UEw3YI445074.jpg'}, {'end': 533.09, 'src': 'embed', 'start': 504.552, 'weight': 2, 'content': [{'end': 509.435, 'text': 'So you could imagine a much more elaborate and complex way of structuring your data.', 'start': 504.552, 'duration': 4.883}, {'end': 513.917, 'text': "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.", 'start': 509.655, 'duration': 4.262}, {'end': 523.025, 'text': "So how do I access the reference and data as a path in Firebase? So the way that I do that, it's actually quite simple.", 'start': 514.197, 'duration': 8.828}, {'end': 527.475, 'text': 'I just say var.', 'start': 523.447, 'duration': 4.028}, {'end': 533.09, 'text': "I'm going to say ref equals database.ref Scores.", 'start': 527.475, 'duration': 5.615}], 'summary': 'Access data path in firebase by using database.ref method.', 'duration': 28.538, 'max_score': 504.552, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7lEU1UEw3YI/pics/7lEU1UEw3YI504552.jpg'}, {'end': 647.325, 'src': 'heatmap', 'start': 588.877, 'weight': 3, 'content': [{'end': 593.941, 'text': 'And then I can just say reference push data.', 'start': 588.877, 'duration': 5.064}, {'end': 597.097, 'text': "It's as simple as that.", 'start': 595.795, 'duration': 1.302}, {'end': 600.26, 'text': 'I need to authenticate to the database.', 'start': 597.537, 'duration': 2.723}, {'end': 602.422, 'text': 'I need to make a reference to the database.', 'start': 600.66, 'duration': 1.762}, {'end': 605.284, 'text': 'I need to get the database in a variable.', 'start': 602.462, 'duration': 2.822}, {'end': 609.708, 'text': 'I need to access a part of the database, like the scores node or the scores reference.', 'start': 605.304, 'duration': 4.404}, {'end': 612.571, 'text': 'I make a JavaScript object, and I can just push it in there.', 'start': 609.949, 'duration': 2.622}, {'end': 614.573, 'text': "So let's do that.", 'start': 612.811, 'duration': 1.762}, {'end': 618.637, 'text': "And let's run this code right over here.", 'start': 615.214, 'duration': 3.423}, {'end': 619.938, 'text': "I'm going to hit Refresh.", 'start': 618.657, 'duration': 1.281}, {'end': 626.271, 'text': "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.", 'start': 621.528, 'duration': 4.743}, {'end': 630.434, 'text': "I'm going to click over now under data in the Firebase console.", 'start': 627.192, 'duration': 3.242}, {'end': 631.435, 'text': 'I can look at my data.', 'start': 630.454, 'duration': 0.981}, {'end': 633.496, 'text': 'And I can say, look at that.', 'start': 632.715, 'duration': 0.781}, {'end': 636.418, 'text': 'This is the tree, my not awesome project.', 'start': 634.136, 'duration': 2.282}, {'end': 637.639, 'text': "There's a scores.", 'start': 636.678, 'duration': 0.961}, {'end': 641.921, 'text': "And there's this ID, which has in it name DTS score 43.", 'start': 638.019, 'duration': 3.902}, {'end': 642.402, 'text': 'There it is.', 'start': 641.921, 'duration': 0.481}, {'end': 647.325, 'text': 'Guess what would happen, by the way, if I run this program again one more time.', 'start': 642.662, 'duration': 4.663}], 'summary': 'Demonstrates pushing data to a database using javascript in firebase and accessing specific nodes to store and retrieve information.', 'duration': 48.762, 'max_score': 588.877, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7lEU1UEw3YI/pics/7lEU1UEw3YI588877.jpg'}, {'end': 805.855, 'src': 'embed', 'start': 744.282, 'weight': 6, 'content': [{'end': 752.133, 'text': 'the idea meaning that I can put DTS here and then I can click Submit and I can submit whatever my score is here.', 'start': 744.282, 'duration': 7.851}, {'end': 755.737, 'text': "So we're doing pretty well so far.", 'start': 753.414, 'duration': 2.323}, {'end': 757.099, 'text': "I'm looking at the chat.", 'start': 755.757, 'duration': 1.342}, {'end': 759.522, 'text': 'Now what I want to do is bind an event.', 'start': 757.199, 'duration': 2.323}, {'end': 762.934, 'text': 'When I click the button, submit score.', 'start': 760.953, 'duration': 1.981}, {'end': 769.058, 'text': 'So I need to write a function now that says submit score.', 'start': 763.715, 'duration': 5.343}, {'end': 773.88, 'text': 'So I need to now create that data, which is the initials.', 'start': 769.758, 'duration': 4.122}, {'end': 776.682, 'text': "I'm going to say, yeah, we'll do initials.", 'start': 774.661, 'duration': 2.021}, {'end': 778.403, 'text': "I didn't spell that right.", 'start': 776.702, 'duration': 1.701}, {'end': 783.606, 'text': 'Initials And then what did I call the input? Initial input.', 'start': 778.503, 'duration': 5.103}, {'end': 786.448, 'text': 'Initial input.value.', 'start': 785.327, 'duration': 1.121}, {'end': 789.871, 'text': 'and the score, which is just the actual score.', 'start': 787.33, 'duration': 2.541}, {'end': 794.772, 'text': "I'm going to take out this, and then I need to say, get all of this.", 'start': 790.211, 'duration': 4.561}, {'end': 805.855, 'text': "And I think it might be nice just to have the database thing be a global variable, so I don't have to keep remaking that.", 'start': 799.493, 'duration': 6.362}], 'summary': 'Creating a function to submit scores with initials and input values, maintaining a global database variable.', 'duration': 61.573, 'max_score': 744.282, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7lEU1UEw3YI/pics/7lEU1UEw3YI744282.jpg'}, {'end': 908.438, 'src': 'embed', 'start': 873.654, 'weight': 0, 'content': [{'end': 878.861, 'text': "So now what's going to happen here is I should be able to look back in Firebase.", 'start': 873.654, 'duration': 5.207}, {'end': 881.945, 'text': 'And I should be able to see, look at all these high scores there.', 'start': 879.883, 'duration': 2.062}, {'end': 883.808, 'text': "They're all submitted to the database.", 'start': 882.106, 'duration': 1.702}, {'end': 886.251, 'text': 'Wonderful So now we have a basic program.', 'start': 884.108, 'duration': 2.143}, {'end': 890.273, 'text': 'which allows you to send data to the database.', 'start': 886.852, 'duration': 3.421}, {'end': 897.875, 'text': "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.", 'start': 890.533, 'duration': 7.342}, {'end': 905.638, 'text': "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.", 'start': 898.175, 'duration': 7.463}, {'end': 908.438, 'text': "Firebase is just always going to ping me whenever there's new data.", 'start': 905.838, 'duration': 2.6}], 'summary': 'Program allows sending high scores to firebase database. next, retrieve data to display dynamically without reloading.', 'duration': 34.784, 'max_score': 873.654, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7lEU1UEw3YI/pics/7lEU1UEw3YI873654.jpg'}], 'start': 397.259, 'title': 'Firebase database and dynamic score submission', 'summary': 'Covers connecting to a firebase database, organizing data, accessing reference and data paths, pushing data using javascript, and dynamically submitting scores and initials to store and retrieve high scores using javascript, firebase, and html.', 'chapters': [{'end': 681.721, 'start': 397.259, 'title': 'Connecting to firebase database', 'summary': 'Discusses connecting to a firebase database, organizing data in a tree-like structure with unique ids, accessing reference and data paths in firebase, and pushing data to the database using javascript. it also demonstrates how to manage and manipulate data through the web interface.', 'duration': 284.462, 'highlights': ['Organizing data in Firebase is in a tree-like structure with unique IDs, allowing for a simple structure with a scores reference and multiple entries having unique keys and containing score and name pairs.', "Accessing the reference and data as a path in Firebase is achieved by creating a reference using 'var ref = database.ref('Scores')', and it enables traversing the tree and pointing directly to a specific point using slashes.", "Pushing data to the database is as simple as creating a JavaScript object and using 'reference.push(data)', demonstrating how to submit data and manage it through the web interface.", 'The demonstration of running the code, refreshing the page, and using the web interface to view and manipulate the data showcases the practical aspects of working with the Firebase database.']}, {'end': 910.459, 'start': 681.721, 'title': 'Dynamic score submission and database interaction', 'summary': 'Demonstrates how to dynamically submit scores and initials to a database using javascript, firebase, and html, achieving functionality to store and retrieve high scores.', 'duration': 228.738, 'highlights': ['The chapter explains how to dynamically submit scores and initials to a database using JavaScript and Firebase, enabling users to store and retrieve high scores in real-time.', 'The demonstration involves creating input fields for initials and a submit button for users to input their initials and scores, and submit them to the database.', 'The chapter provides a step-by-step explanation of binding events to the submit button and creating a JavaScript object to store and push the data to the Firebase database.', 'The video showcases the process of submitting multiple high scores to the database and emphasizes the functionality of dynamically regenerating the page without reloading or running set intervals.']}], 'duration': 513.2, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7lEU1UEw3YI/pics/7lEU1UEw3YI397259.jpg', 'highlights': ['Covers connecting to a firebase database, organizing data, accessing reference and data paths, pushing data using javascript, and dynamically submitting scores and initials to store and retrieve high scores using javascript, firebase, and html.', 'Organizing data in Firebase is in a tree-like structure with unique IDs, allowing for a simple structure with a scores reference and multiple entries having unique keys and containing score and name pairs.', "Accessing the reference and data as a path in Firebase is achieved by creating a reference using 'var ref = database.ref('Scores')', and it enables traversing the tree and pointing directly to a specific point using slashes.", "Pushing data to the database is as simple as creating a JavaScript object and using 'reference.push(data)', demonstrating how to submit data and manage it through the web interface.", 'The demonstration of running the code, refreshing the page, and using the web interface to view and manipulate the data showcases the practical aspects of working with the Firebase database.', 'The chapter explains how to dynamically submit scores and initials to a database using JavaScript and Firebase, enabling users to store and retrieve high scores in real-time.', 'The demonstration involves creating input fields for initials and a submit button for users to input their initials and scores, and submit them to the database.', 'The chapter provides a step-by-step explanation of binding events to the submit button and creating a JavaScript object to store and push the data to the Firebase database.', 'The video showcases the process of submitting multiple high scores to the database and emphasizes the functionality of dynamically regenerating the page without reloading or running set intervals.']}], 'highlights': ['The demonstration involves creating input fields for initials and a submit button for users to input their initials and scores, and submit them to the database.', 'The chapter explains how to dynamically submit scores and initials to a database using JavaScript and Firebase, enabling users to store and retrieve high scores in real-time.', 'The demonstration of running the code, refreshing the page, and using the web interface to view and manipulate the data showcases the practical aspects of working with the Firebase database.', 'Accessing the Firebase console allows users to manage the database and add code to store data, requiring a Google account for access.', "The first step is to create a new project on Firebase by providing a project name, such as 'my awesome project' or 'my not awesome project'.", 'The demonstration focuses on using Firebase as a database service for a client-side JavaScript browser game to save high scores.', 'Organizing data in Firebase is in a tree-like structure with unique IDs, allowing for a simple structure with a scores reference and multiple entries having unique keys and containing score and name pairs.', 'Setting database security rules to allow anyone in the world to read and write, highlighting the lack of authentication and security measures in the quick demonstration.', 'The game example is simple, with the goal of clicking a button as many times as possible to increase the score, demonstrated with a high score of 43.', 'Firebase is introduced as the database service for the demonstration.']}