Up next in 10
Firebase: Making Real-time a Reality || Women Data Summit 2021
7K views
Nov 9, 2023
Necessity is the mother of invention. And in 2020, our necessities changed drastically. #workfromhome started trending and it’s still going strong for a lot of us. In an effort to feel a sense of togetherness from the comfort of our home, let’s not forget the importance of real-time interaction. In this session, I will talk about how Firebase’s real-time database can be leveraged for a number of use cases and how I used it in my application. Conference Website: https://globaltechconferences.com/event/women-data-summit-2021/ C# Corner - Community of Software and Data Developers: https://www.c-sharpcorner.com C# Live - Dev Streaming Destination: https://csharp.live #Azure #Data #WomenDataSummit #Firebase
View Video Transcript
0:00
Thank you. Okay
0:05
Thank you for having me here today. I'm super excited to talk to you about leveraging Firebase's real-time database to build powerful collaboration applications
0:15
Well, before that, I'm going to do a little bit of an intro because I want to make friends
0:21
So I'm Suhavi, and I started my career sometime last year after graduating with a bachelor's in engineering
0:28
My first job out of university was thankfully the same place I did my internship at the year before
0:37
So this meant that I knew everyone and there wouldn't be any awkward introductions like this one
0:43
But it became even more important because everything switched to working from home
0:47
So once I started working from home, I realized two things. First of all, I had a lot more free time
0:53
So my drive to work used to be around an hour there and back, but today it's a lot of
0:57
It's like 30 seconds and I never have to worry about traffic, which is great because I'm part of that percentage of people that hates driving and gets a lot of anxiety from driving
1:07
And the second thing I realized was that I barely got to talk to my coworkers
1:11
The collaboration just wasn't there anymore, especially when we did our sprint planning, which is arguably when it's the most important time to collaborate
1:19
So after I came to this realization, I decided to use my newfound free time
1:58
Hi, so are you still there? Looks like there's some internet issue
2:07
If you can hear, we can just come back to the stream and type in the private chats
2:13
because I think your screen has frozen. The roadmap for today's session
2:23
So when you have to build something, say you have a really great idea, or you just want to build something really quick
2:37
chances are, apart from the idea that you have, you also have to worry about things like the database
2:43
the user authentication, backend hosting, as well as ytics. So obviously, you're not going to want to spend all the time working on all of that, since it probably
2:52
has nothing to do with your idea. It's just how most modern applications work. So Firebase
2:58
is a platform that basically provides you a backend. So it's a cloud-hosted service that
3:03
comes with features that help you build and scale your mobile and web applications. It's backed
3:09
by Google and the platform has some really good documentation. At least that's what I found
3:14
So we're specifically going to explore the options that database that Firebase gives you for
3:18
data storage. And it gives you two options. The first one is called Cloud Firestore
3:25
and the second one is called Real TimeDB. Both of them are hosted on the cloud
3:29
and don't require a server to be deployed on, which eases the setup process by a lot
3:35
They're both also NoSQL databases. There are some slight differences between the two options
3:41
which is why I decided to go with one over the other. The Real Time DB is a little bit older
3:46
whereas Firestore came out in 2017-2018, and if your app requires more complex
3:53
queries and needs the data to be sorted frequently, then CloudfireStore is a much better option
3:58
since it supports advanced querying. My use case was pretty simple, just basic synchronization across all users connected to the database
4:07
which is essentially what real-time DB is used for. And it does this task with relatively low latency
4:14
Another factor that differentiates the two is what your storage needs are
4:18
If you're storing tons and tons of data that isn't going to be accessed as frequently
4:22
then Cloudfire Store is going to be better for you. But if you know that your app isn't going to need lots of storage
4:27
but instead we'll have multiple users accessing and maybe modifying the data
4:33
then real-time DB is going to work better for you. Another point of asymmetry is the way your data is stored
4:40
So Cloud Firestore uses a document collection model. You start off with one document and you can introduce sub-collections to it
4:47
Whereas real-time DB stores unstructured JSON data. So you get a lot more flexibility in what you want to store
4:55
And one cool thing that RealTimeDB does is provide context for user presence, which
5:00
lets you determine how many users are connected to your database. Cloud Firestore does not natively support this, but there are workarounds in which you
5:08
can make that happen. So I ended up choosing Real TimeDB because I wanted to build a web application that sync state
5:16
across all the users connected. My goal was basically to simulate a planning environment that
5:21
I was familiar with. Before the pandemic, we would write out our epics on sticky notes
5:27
and then organize them on a board of some sort. Then we would break it up further into tactics
5:37
Like it wasn't a perfect system. Our stickies wouldn't be completely aligned or the writing might be kind of fuzzy
5:42
We might move things around a lot. But that was one of the aspects that I kind of wanted to capture
5:47
Like anyone can grab the sticky note, place it anywhere on the board. The goal was just to make it as a little bit
5:51
real-time as possible. Of course, there are many other solutions on the market that gained
5:56
popularity during that time around last year. Miro is a big one, for example. I'm specifically
6:02
going to use Firebase to accomplish real-time synchronization. So let's talk about that. There are
6:08
two ways to get data to your user. One is through HTTP requests. Either when the user wants to see
6:14
something, they will request it themselves, or the browser will automatically make an HTTP call every one
6:21
or 500 milliseconds or something like that. This is also called polling
6:26
That can get kind of expensive and send lots of traffic to your API endpoint
6:31
And essentially it tying up your resources The other way of getting data to your users is using WebSockets So each user is connected and is able to receive updates to your database anytime something changes Think about it
6:45
like this. If I'm waiting for a package at my door, I could either walk to the door every five
6:50
minutes to see if it has arrived, which would require me to watch the door every five minutes
6:55
only to be disappointed that my package hasn't arrived. Alternatively, if the person delivering my
7:01
package rings a doorbell to inform me that my package has arrived. It'll save me a lot of time on my side to keep checking the door
7:08
And instead, I just need to have an active listener in the background, kind of like my ears
7:13
So let's do a little refresher on how networking works. First, you start by adding a lot of people on LinkedIn
7:21
But networking on the internet has five layers. So let's start at the top layer, which we are most familiar with as developers and content consumers, the application layer
7:31
So this is where your HTTP requests are made, your SSL connections are established, and you get email protocols like SMTP
7:39
This is also where WebSockets start. At this point, you're working with data packets that have headers and a body, kind of like when you're making a get request using curl
7:49
Then we have the transport layer where our data packet is cut up into byte-sized segments for easy transport
7:55
And the network layer takes our segments and using the internet protocol routes them appropriately
8:01
across the network. As we go lower and lower down this diagram
8:05
we get more into the physical realm, with the link layer governing our routers
8:09
and the physical layer being the actual wires that our data is traveling on
8:13
So this is kind of like a really big picture of what happens when you make a request for data on the internet
8:19
And when you're making an HTTP request, it'll go through all these phases
8:23
You make another HTTP request, it'll do the same thing over and over again
8:27
The thing with WebSockets is that when you establish a connection to be transport layer, it stays open for you to get or send data
8:35
which makes it bidirectional. So now that we have an idea of how web sockets work
8:40
at a high level, I'm going to show you how I use Firebase in order to build this collaboration app
8:55
Okay, so the board and enter it. or you can create your own
9:07
So the next question is, what data are we actually storing? And in order to store information per board, we need to store the board itself
9:20
And of course, we want the data to be JSON friendly for Firebase
9:27
So my proposal is that our database holds a bunch of boards that have a bunch of boards that have
9:31
a name. Each note has a few things, the content, the length, width, x and y coordinate, so we know where it's going to appear
9:39
Later on we can also add properties like the color or really anything since it's schemeless, so we get a lot of
9:44
flexibility on that end. Okay, so in terms of Firebase applications, they're really easy to get
9:51
started with. On the UI, you get the option to create a new project and add services to it
9:57
Like you can add real-time DB as one of the services you're using. Once you get all the
10:01
the necessary paperwork filled out you get a config file with your API key your
10:05
database URL and a bunch of other things so this information you grab that and
10:11
store it in a dot env file and do not push it to a remote version control server
10:19
okay so now's a part of the session where i'm going to do a little bit of coding and you're
10:24
going to see how to actually implement a firebase database into your app so let's
10:31
Let me switch to my IDE. Hopefully you can see that. Okay
10:39
So here's the code we'll be working with today. The client code for this application is written in Vue
10:45
And today we're just going to be focusing on the client code, specifically the Firebase implementation
10:52
So NuxJ. is really cool. It lets you build and generate your app
10:57
It's a popular view framework. abstracts the client server relationship and makes it so that you can write both
11:06
server side and client side code. It also comes with a lot of benefits that I won't be
11:11
going over but it's really easy to work with and it also comes with a package for
11:15
Firebase to make it easier to set up. So here I have the package under the modules
11:22
part and what you can do is grab your config details. For example the API key
11:28
the database URL, all that stuff and you can grab but from your ENV file and set which services you'll be using
11:35
So this lets you access those services in your code. So I'm just going to go ahead and start our application
11:52
And as you'll see, it'll build B client and server code. I've gone ahead and done some of the heavy lifting with authentication
12:00
I've also done most of the part of our components. So we'll just be working on the Firebase aspect
12:07
And it's running on 3,000. So this part has already been completed, and I have a demo board
12:15
and I'm just going to log into that. Okay, so as you can see, there's not a lot going on
12:23
We just have a blank toolbar, a blank canvas and a toolbar that has no functionality
12:31
So first we're going to start by making sure that when we press this button, we actually get something
12:37
So the first function we're going to write is in our toolbar
12:41
And this is where I'm going to write our first Firebase query
12:45
So the way you do that is there's a path that your data is stored in
12:52
For example, the one I want it to be stored in, there's a boards folder or JSON
12:56
and then your board name and under notes, that's where you find all of the notes
13:01
So you create a note ref, reference to the note like that
13:08
and you access Firebase DB so fireddd gets to db yeah um rough And I going to add in that it kind of like a URL basically
13:21
So board slash, and the way we're getting our board name is through authentication
13:27
So this is where our note is going to be stored. Okay
13:37
So this is where our note is going to be stored, and we're going to push to that location
13:42
Then once we push to it, we can set any details that we want, like our X and Y coordinates, as well as any default content for it
13:55
I'll set the X as 150, as well as the width. And for the text, we'll just
14:09
we'll do, all right. So let's try that out now
14:22
And if I click the new note button, it still doesn't do anything since we're not actually
14:27
showing on the front end. But if we go to our console, we might be able to see
14:32
our new note has been added right over here. Now let's make sure it's actually appearing on the page
14:39
For that, we're going to go into the index, and we're going to create a method that fetches the board state
14:45
And this is going to act as our listener that listens for any changes to the database
14:49
So I'll add it under methods. Get board state. And we're kind of going to do the same thing
14:58
that we did when we create. We're going to access the same reference
15:06
But instead of pushing to it, we're going to create a list. So var, and once we have the reference, we can check for changes on it
15:29
So anytime a value changes, we're going to get a snapshot. This is a snapshot of our database. And once we get that snapshot, we're going to
15:39
update our notes all right so we have the method and let's call it in our method
15:53
where we create the board application and let's try that up okay so now
16:07
we actually have a note showing up. I'm going to duplicate this. Oh, not reload. And if I make
16:17
changes to this, you can see that there's not a lot happening on the other side. So
16:21
any other users would not get the changes I'm making. For that, we're going to update
16:26
our note component so that when we drag it, when we resize it, when we add text to it, it
16:34
actually makes a call to update the note on Firebase
16:46
So let's go over here. We won't call us to Firebase so that our other user
16:50
can see exactly how we're dragging or resizing our note. So on dragging, we'll call a method called on drag
17:01
And when we resize, let's call And then the text area is where we're going to get our input
17:11
So on input, let's call on text. And since we also have a delete button, we're going to delete it when the user clicks that
17:22
The button for that is this one. So when the user clicks that, let's call on delete
17:30
And we actually have to write these methods out. I'm going to add some methods
17:37
What were they? On drive. And then on resize
17:50
On text. And the last one was on delete
18:01
Okay, so when we resize or drag, we're going to get four things
18:08
We're going to get the x-coordinate, the y- coordinate, the width, and the height
18:14
And same with when we resize, when the copy goes over, and when we change the text, we're just going to get text
18:21
And when we click delete, obviously, we're not getting anything. So when we do dragging, we want to change just the X
18:31
and y the cordness that it's on. We'll change that. And then on resize, we're going to do the width and the height
18:45
So, make a lot of typos when I'm coding. Go bear with me
18:54
All right, and on the text. on the text you can probably guess okay and at this point we aren't actually making any
19:09
Firebase queries we'll do that on the delete and then I'll write another method where we
19:15
actually push our updates up to Firebase so how you delete it's all very similar to you need
19:22
a reference and instead of doing setting or getting you're just going to do that remove
19:30
But before that, you need to give a reference for what you're removing
19:33
So I'm just going to pass the ID of the card or the note. Okay
19:46
Yep that looks about right And we just going to test out to see if our changes are actually working So when I add it adds a new note
19:57
And when I delete, it's actually deleting it. And you can see it's also coming on both sides
20:03
But when we resize, it's still not going to work since we're not pushing our updates up to Firebase
20:09
So let's write one more method called update. And here we're going to take our reference and instead of removing it, we're going to update it
20:30
And let's make sure to call this every time we drag. Okay, and let's see how that's working now
20:55
Oh no, I'm in there. So when you're updating, you take the..
21:11
This happens a lot. First argument must be an object containing the children to replace
21:29
Let me see if it's here. Okay
21:39
Oh, I have this dot notes
21:58
Okay, that should work now. So when I try resizing it, okay, so we're actually getting
22:25
Hi Swahy, can you hear me? Swabwe, if you could just switch off your camera, maybe that would help your video is freezing
22:54
was freezing. All right. Looks like a speaker in drop
23:04
and that she's having some internet issues. But we'll continue. I think she could be back in a moment
23:13
Yeah, Suhavi is back. Looks like it has been some inside issue
23:18
So if you could just switch off your camera, maybe that would help. If you could just switch off your camera
23:22
maybe that would help the bandwidth. Yeah, okay. Okay, alright, perfect. Yeah, I feel like my internet has been really dodgy today
23:40
Yeah, all good now. It's good now? Yeah, it's good now. Okay, cool
23:45
Let me just restart. I'm just building the application
24:10
I know we don't have a lot more time left. Okay. You have around 15 minutes
24:25
I'm sure, sorry, was that? Yeah, you can take around 10 and 15 minutes
24:30
Okay, awesome. All right, so I'm going to log into the board that we're working with and just test out the application
24:43
So it's pretty real time. You can move stuff around and it's pushing changes to the database, the Firebase server
24:54
and it's getting them on all other nodes that are connected. So it wouldn't matter if it's locally or if someone's on another network
25:02
it would still have the same latency since it's all coming from a central node
25:07
And we can also delete and those changes propagate quite quickly, as you can see
25:11
So that's pretty much all I had for the demo. I'm going to switch back to my slides now
25:23
Close that. Okay. So that was all I had. I hope you enjoyed watching the code and run into the normal coding hiccups that we run into
25:40
And if you do want to chat, I am on Twitter, LinkedIn
25:45
If you want to explore the source code for today, I have it up on GitHub under the repository called .board
25:54
I'm frequently making changes to it. The state that you saw it in now
25:59
it's actually kind of a demo state. I have a lot of other features that I've been working on
26:05
but it's all possible due to Firebase and its services. So at least Firebase really helped bring my vision to it
26:14
And I think it's really powerful for bringing that real-time aspect to your application
#Cloud Storage
#Education
#File Sharing & Hosting
#Programming
#Web Services