 Hey, everybody, what's up? It's Rob Dodson. Welcome back to the show. So in the last episode, I was showing you how to set up Firebase authentication in your Polymer project. Today, I'm going to continue on from where we left off in the last episode and start working with Firebase's real-time database. And so what we're going to build today is going to be kind of like a simple note-taking app, or kind of like a to-do list sort of thing. So follow me over here in my laptop. I'm already signed into the Firebase console. And because I want to have each user have their own space in the database for their own unique notes, I'm going to need to set up some database rules about who can write to which parts of the database. So if I go to the Database section here, I click on the Database tab, if you just set up your project, you'll probably see like a note right here that says, like, default security rules require users to be authenticated. And then there's this Learn More button. And you can click on that. And actually, it'll open up a new tab. And it'll kind of explain how Firebase's database rules work. Firebase's database rules use sort of like a JSON-like syntax, which is very interesting. But the thing that's really handy here is the Sample Rules section. So like I said, I want to have every user have kind of their own unique space in the database. And that's such a common ask that there's already, if you click on this user tab here, there's already some example rules that will do that for you. And so I can kind of walk through how these work. So basically, we've got our rules object. And then we're going to define it so it matches the URLs that we'll use for our database calls. So we're going to start with a user's object kind of like right at the root of our database. And then within that, there's this sort of special syntax here for this like dollar sign UID thing. And that is kind of like a Firebase database variable of sorts. It's a dynamic rule. And what that will do is refer to whatever is the current user ID that we are working with. So it'll be slash users slash some user ID. And then we're saying whoever can read to that space, their UID or the UID space that we're trying to write to, that will need to match the authenticated user's UID. So that's for reading and for writing. So I'm just going to copy this bit of boilerplate here, go back to my console and click on the Rules tab. I can highlight all this, paste that in there, and then make sure to click Publish so that these rules become active. All right, cool. So we've said that only certain users can write to certain spots in the database. Basically, you can't read and write to other people's to-do list. So far, so good. Now follow me back over to my laptop and let's go ahead and start putting some data in the database. So I'm going to create a new element called MyNotes.html. And I'm just going to paste in some HTML imports that I've saved. And I'll close the sidebar there so we can bump this up a little bit and you can see what I've got. So in this element, I'm importing Polymer. I'm importing Firebase Auth. So I'll show you why we need that again. I'm importing Firebase Query. So this is what we'll use to actually talk to and read from the database. Paper input, so the user can enter some values and then iron flex layout. And I think we've actually maybe already imported paper button somewhere else, but it's probably good to import that here as well, because we're going to use a paper button too. So I'll say paper button. OK, rat. All right, let us begin by defining an element. So we're just going to call this element MyNotes. And the first thing I'm going to do is actually use the Firebase Auth element. Again, inside of MyNotes. Now I used this in our previous episode to build our sign in and sign out buttons. So here what I'm going to do is I'm also going to expose the user object inside of this element. And what's kind of cool about the Firebase Auth element is that whenever user signs in, basically all instances of the Firebase Auth element that we have kind of sprinkled in our app, all of them will sort of simultaneously get that new user data. They'll get the user object. And so you can treat this element kind of like a model that any other element can just sort of declaratively bind to and extract information about the user. So you can pop these Auth elements into different spots in your app, wherever you might need to reference the user for some reason, which is pretty interesting and pretty handy. So we're going to combine that with the Firebase query element. So the Firebase query element basically lets us talk to the Firebase database and specifically talk to arrays in the Firebase database. So I'm going to give this element an ID of query. So we'll say ID is query. We will use that later to reference it in our JavaScript. We're going to say that it's path. So this is the path in the database where we're going to be reading and writing to. That will be slash users slash. And then we will bind to the current user's user ID. And then we will write to their notes section. And then we will say the data that comes back from Firebase, we're going to expose that in our app as this notes object. So I'll go down here to my element definition. I will define properties object for that notes thing. So we'll say the type is object. And now I want to add sort of like a list so I can render out all of those to-dos as they're coming back from the server. So let's see. So we'll start. We'll define a div. We'll just call it card or something like that. And then inside of here, I'm going to create maybe another div called notes. Something, so we'll say notes. Inside of here, make a UL. And we'll call this, we'll give it an ID of notes list. Notes list. Inside of here, I'm going to do a DOM repeat template. So I'll say template is DOM repeat, DOM repeat. The items that is going to iterate over will be those notes that are coming in from the user. And we will say that we want each note to be referred to just as a note. And then inside of here, we'll create list items. And inside of each list item, I will just drop in a paragraph tag, I'll give it a class of content. And I will say that I want the note.content. So we haven't really defined what a note looks like, but I'm going to assume that it'll have this content property on it and that'll just be the text content of the note itself. The next thing I need to do is I need to add some controls so someone can type in a note and then a button so that they can add it and it'll send it up to Firebase. So I've actually got a little bit of code for this that I've just already saved in my clipboard. So I'll just paste that in here real quick and we can walk through this. So I've got a paper input element with an ID of input. That'll be useful later because we'll refer to it in JavaScript. And it's just got a label that tells the person, hey, take a note. And then I've got inside of that a paper button with an ID of add. We're going to refer to this in JavaScript 2. And basically whenever someone taps on it, we're just going to run this add function. So let's implement that add function. So right under our properties, we'll say add is function. And so what we want to do is we want to take the reference to the Firebase database. And there's two things you can do then. You can either set a value or you can push values. Setting is if you're just dropping in a single object. Pushing is if you're pushing array-like data up to the database. And that's basically what we're doing with these to do. So we want to use the push method on our Firebase instance. So to do that, we're going to go up here. We'll look at our query element, which has this ID of query. And we can say this.$query.ref. So that's going to be a reference to that path that it just defined, so slash users, user ID, notes. So give me a reference to that path in the database and then push an object to it. And this object is just going to have one property, which will be content. And then that's going to come from this.$input.value. So that's just our input text field. And after someone hits the Add button, it'd be nice to clear out the text field so they can keep adding to do this. So right after we push the value, we'll also say this.$input.value equals no. OK? Let's switch over to our terminal and fire this up. So we'll say firebase serve. And then go to localhost 5,000. We will open up our console in case we're, you know, because errors happen sometimes. We will go and we will start typing a note. So let's see. We'll say hello, polycasters. And we'll add it. And there we go. Showing up inside of our list. So that actually, you know, that just sort of confirms that everything worked. If we want, though, go over to the Firebase console, go back to the data tab. And you can see these green rectangles indicate that we just wrote some data to the database. So you can see users, my crazy user ID, notes, and then this unique ID. So every time you push something to Firebase, anytime you're working with array-like data, instead of using numeric indices like 0, 1, 2, Firebase will actually create unique IDs. And this is really useful because if you have a bunch of different people all trying to push to the database at the same time, if you were using just like numeric keys like 0, 1, 2, you could probably end up with some weird transactional issues. So instead, Firebase creates these sort of unique identifiers so it can do the bookkeeping after the fact to make sure data gets synchronized and mushed together in the right ordering. And I can see inside of here the actual value, content hello, polycasters. What's cool about the Firebase database, this is probably my absolute favorite feature of Firebase, is it's super easy to play around with the data once it's in there. So for instance, if I want to change this to finish the demo, I can just update the text. So finish this demo and hit Enter. And now everything turns yellow to indicate that it changed. I go back to my note-taking app and you can see that that value has been updated here as well. So we can add some more deduces, we'd say. Go out and vote. It is November 8th as I'm recording this. And then we will say hopefully celebrate. Question mark, question mark. Yeah, so we can keep adding things to this dedu-list if we want. The next thing I want to do, though, is I want to be able to delete items off of my dedu-list. And this is pretty easy to do as well. So we go back to our code editor. And I'm going to add a couple more imports up here to the top. So I'm going to drop in a paper icon button. And I'm also going to drop in iron icons. Now, I'm only going to use one icon from the iron icon set. And so normally I would say if you're using only a handful of icons from the iron icon set, it's best to go and create your own icon set. And you can do that pretty easily using iron icon set SVG and literally just copy and pasting the stuff out of iron icons. But because we're just doing a demo, I'm not going to go through making my entire icon set. So I'm just going to use iron icons directly. But for performance overhead, it's often a good idea just to create your own icon set. So I'm going to include a paper icon button. And then basically right after where we've written the content for our note, I'm just going to drop in a paper icon button. I'm giving it an icon of clear. So it'll be like an X. And then I've got this property here called note. And I'm actually just setting a property on the paper icon button. I'm setting a reference to the entire note object that this line item is referring to. And the reason I'm doing that is because I'm going to use the key of that note to then go on and delete it in Firebase. And so lastly, I've got this on tap event listener here. And I'm saying I want to call this remove function. So let's implement that remove function. So I'm going to say remove is function. It's an event. So we'll say that the key is equal to E dot current target dot note dot key. And I think maybe they use like dollar sign key to reference it in Firebase, note dot key. I think that's right. Yep. And then we're going to say this dot dollar sign dot query dot child. And then we will give it the key. We're giving it this value right here. This dot child dot key dot remove. So that basically says, go to the database, find the object that matches this key. Delete it. So go back to Zekromes. Actually, before I do that, I'm going to drop in some CSS as well to make this look really pretty. So right above our Firebase off, we'll drop in a big style block. And honestly, I mean, you don't really need to worry too much about what I'm doing here. I'm just sort of like positioning things. So our icons floating to the right, and our text is to the left using iron flex layout. Nothing too interesting. So I'm not going to spend too much time on it. But I just wanted the demo to look nice. Go back to Zekromes, refresh the page. And now we have our notes showing up here. We've got these x's showing up here. And I can go and x them out. And oh, whoa, we got an error. This dot dollar sign dot query dot child remove is not a function. Let's see what I typed wrong here. I need to have ref dot child. Let's try that again. Refresh the page. And we will boom, start deleting items. Yeah, yeah. And we win. We're all done, I think. Yeah. So that about covers it for today. We covered some of the basics of working with the real-time database. We've got user authentication working with this app. The next episode, I think I want to explore maybe how we deploy this thing and get it working on Firebase hosting. Might try to come up with some other interesting topics to include in that episode as well. If there's anything that maybe you're interested in seeing, please leave me a comment down below and I can try and work that in. Or you can hit me up on a social network of your choosing at hashtag as Polymer. As always, thank you so much for watching. And I'll see you next time. Hey, what's up? Thank you so much for watching this episode of Polycast. If you want to check out more, I got some over here on the playlist. And you can also always click the Subscribe button and get notified when we launch new episodes. Thanks for watching.