Firestore Realtime Stream Exercise

[00:00:00]
>> All right, so we are going to just create some real-time streams in mapover app. And so, if you want to follow along with this exercise, you can. I will ask you all to do it. If not, you don't have to worry about it. So, in the terminal here, I'm going to CD into 3-cloud-firestore, and then I am going to CD into start.

[00:00:22]
And let's see here. [INAUDIBLE] in here, yeah, okay, we're good. Let's open that up. And then now, I'm gonna run everything locally here. So I'm going to do an npm run dev and this is gonna boot up. And what you can see right here it says importing data from.

[00:00:48]
And that's because here, in this local folder, I have a whole export of users and then Firebase Export. Now, I don't write any of this local folder. This gets generated for me by the emulator itself. So any data that I seeded by scripting, or any data that I just manually did, can be saved out to this folder.

[00:01:12]
All right, so we are on what ports? 3000. So here are the exercises. We're gonna start with creating real-time streams. And so I have this little table. We are going to just write data to this table. That's all we're gonna do. It's pretty straightforward. So let's go into components.

[00:01:33]
So now, let's go into source, components. And then this one is in, sorry, pages and this one is in RealtimeStreams. So to get this to work with view, I kinda set up some boilerplate. The first thing we're gonna wanna do is we're gonna create a real-time stream and that's going to give us back snapshot data.

[00:01:52]
And then from there, we're gonna wanna transform the object that's returned. So what we're gonna do is, we're going to make sure we have on snapshot. And we're going to use the users collection. So I've created a collection to start out with. Pass in Ffreftore and we have referencing out to users.

[00:02:13]
And just also, I want to point out, is that this is connected out to the emulator suite, which is running right now for me on localhost 4000. And if I click into authentication, I have a ton of users that we've set up. And then I also have a very complex data structure full of users.

[00:02:32]
And the data structure's not complex, but a big data structure full of users and expenses. So we're gonna be reading from these users right here. So I have a users collection. Well, what method do we use to read in real time, or function I should say? What function do we use in real time?

[00:02:53]
>> Snapshot?
>> Yes, see, these moments are important to me. I have my hand up for the high five, and I don't wanna be walking around the bench and no one giving me a high five. All right, so exactly, I'm gonna call on snapshot and I'm gonna pass in the users collection.

[00:03:13]
And then this is gonna give us our callback, and awesome. So, now, I've done this, and what I wanna do is that I have it all abstracted out to components that do to the table. It's not important to know how it works but it binds the state.results. So I can say state.results =.

[00:03:35]
And what I want to do is I want to say snapshot.docs, because it's a collection of documents. Call map, and then what's great about the map function is that what I really wanna do is I wanna pass in a general function to it. And then do some work within there.

[00:03:53]
So I wanna pass in format user. And then, within here, this will call it with the document snapshot that gets passed in. And then I can start plucking data off and returning the object I want. So what object do I want? We wanna get a Uid, First name, Last name, Highscore, City, and don't worry about FromCache from now.

[00:04:17]
If you want to try to fill that in you can. If not, don't worry about it. And now I'm gonna turn it over to you all, for those who are doing the exercise. See if you can return with this snapshot, its data, and get it bound to the table.