Michael Dowden 5:44
Thank you so much. I’m really happy to be here and be talking with all of you. So I’ll get right into it. My name is Michael Dowden. I am a Google Developer expert in Firebase. I’ve been working with Firebase for about six or so years now. So I’m happy to answer questions you have and talk to you about it. I really enjoy working with Firebase. Some of the sponsors, of course, are also doing serverless work. So definitely check them out as well. A lot of the same principles when you’re approaching serverless topics, work across different technology stacks. And I talked about Firebase, because that’s what I work in every day. So I’m happy to share it with you. So what is Firebase? Firebase is Google’s back end as a service for serverless work. And this makes writing and deploying web and mobile applications faster and easier, allowing front end web developers to create fully featured applications without needing to manage servers or manage infrastructure. So there’s a lot of different tools involved. You’ve got a web console, you have a command line interface, you have the software development kit. And there’s lots of different software development kits. There’s the basic JavaScript one, there’s different kits based upon your specific framework. So React or Angular or view, for example. There’s a number of different features, you have the real time database, or FireStore, which are serverless databases. You have authentication built in, you have file storage, you have hosting, which is of course, super important. And you have the serverless Cloud Functions. And then there’s a whole bunch of tools about improving app quality monitoring, Crashlytics analytics. And then they also provide tools for growing your business. So if you have a business around launching an application, you can actually run that business, including monetization and everything, right within Firebase. So it’s kind of an all in one platform for being able to really build and launch apps. So one of the things that I hear when talking about Firebase is I don’t really know who’s using it, it turns out some pretty big companies are in fact using Firebase or have in the past. I’m including some of my own startups, Duolingo 20, Flexi Park, which is my own company. But some of these have some really big user base as well, like alibaba.com, over half a million or so over half a billion active users. Duolingo database is updated 1000s of times a second lift provides 10s of 1000s of rides a day. Just a lot of data, a lot of interactions, virus is able to handle that sort of scale. So when you come into Firebase, this is a screenshot from my desktop, which is what I see when I log into the console. And basically, I’ve got a bunch of different projects, you can list them all, you can search through all your projects. If you have multiples, like I do, do, feel free to scan that QR code or go to console that Firebase that google.com. If you want to kind of create your own account, it’s totally free to create an account and get started initially. Once you have created a project, you will find an app configuration. So this app config is going to be the key to getting started, you’re going to need the credentials or the configuration information in here. It’s includes your API key and a bunch of different things. I’ve got an obfuscated here, this is not considered a secure data. So this is not something that needs to be kept secure, and private, you’re going to have this published on your website. What that means is that these ideas are not considered part of the security model of Firebase. And I won’t go into super deep detail on the security model today. I’ll touch on it just a little bit. But it is important to understand that you don’t have to worry about these things too much. Like I’m not going to necessarily showcase it and something that’s going to be live on on YouTube or you know on YouTube video, but I’m also not going to worry about it too much. So do feel free to commit that to your repo and to share that with people when I I’m doing demo projects like this. Towards the end, I’ll show you kind of the URL for the GitHub for the demo code that I’m running through. I don’t commit to shared URL, it’s a shared repo so that you can actually pull down the repo and add your own project really easily. So it’s not using mine, one of the things you can do is set up your authentication, setting up authentication for email password, and for Google of auth is as simple as coming in and basically turning them on. It’s a, it’s a toggle switch. And this enables authentication provider for your application. And then you have to build the front end code that will do the necessary work. But that’s actually available for you. It’s baked in to the SDK. So I’m going to show you how that works here in a minute. So speaking of showing you how things work, it’s time to actually get into a demo. Really quickly, this is the Firebase console, you can come in here have your project overview, I can see my project settings by coming in here and see some different things. I can look at my database. So this is a FireStore database, I can see some chats, and I have a list of users in here, I can look at my authentication. And like I said a minute ago, I can come up, I can come in here, as appointments, click on Skype, and Google is literally just a toggle, I can turn Google authentication on and off with that toggle switch. If I want to do something else like that, here’s a few obvious ones, I can add a new provider, I can say, hey, I want to use Facebook. And I can turn this on pretty easily. But this requires me to have a Facebook account and grab their app ID and their secret from their account, put it in here. It’s not hard. But it’s not, you can’t do it all here, you have to also have that Facebook account to set that up and create the app on that side of things. Cloud Functions gets deployed here, and we can see what those functions are. And then we also have our file storage. So when images get uploaded to our chat, they’re going to show up in here. And our hosting is here. And we’re going to share this URL here in a little bit so that everybody can play along and see what we’re working on the application that we’re building, I’m actually going to show the live version of it right now. It’s just a simple chat application, you can see that I ran a test earlier.

There we go. Very basic, very simple, I can upload a file, I am going to show you how to do the notifications with the PWA. And can even run a search. So if I type in my test email address, for example, it’s going to take a second and it is going to come back with a list of all the messages that I have sent. It does take just a second, because we’re dealing with a cold start situation on the server lists. Oops, nope, maybe we’re dealing with more than that.

As is usual, nothing ever goes smoothly, the very first time you’re doing a demo. So of course, I ran a test this all this morning, and it’s not gonna work right now. So that’s great. We’ll run through this again in a minute. There it goes. Finally, it’s working. So you search by email address, and the pullback listed just that person’s messages. And this is the sum total of the application we’re going to build, you can log out you can log in. Very straightforward. But it serves as a framework for teaching the principles and fundamentals of what you can do with Firebase. So back to the presentation. So the first thing is, how do we get this set up. And to do that, we kind of have to understand that database just a little bit. There’s two different types of databases within Firebase. There’s the real time database, which is the original firebase database. In fact, if you see people just talking about Firebase database online, that probably mean the real time database, it’s the original. It can support a lot of concurrent users. It is pure JSON. In other words, everything you put in and out is just JSON data structures. FireStore is a true document database that has documents and collections can support over a million concurrent users, and has a much nicer set of security rules than the JSON based rules in the real time database. On the flip side, sometimes it’s really, really convenient to work with something that is just pure JSON. It makes API’s and integrations super easy. FireStore integrations require a little bit more work, but it provides a lot of value for that they have improved querying, all that sort of thing. pricing models are also different sometimes that determines which one I’m going to use. For this project. We’re going to stick with FireStore. That’s the more popular database these days and it is the default decision that I make. I do use both, but I default to FireStore for most things these days. So the structure is going to look a little bit like this, we’re gonna have a collection of chats, each chat is going to have a document ID. And then some properties inside of it, the properties are going to be the content text, the display name of the person who made the post, and a timestamp when it was when it was posted, that allows us to sort messages in the order that they arrived. There’s also a collection of users, each user has their UID display name, and then a URL to their avatar, which is going to allow us to display that on the app. In order to lock this down, we have to provide some security rules. So here’s kind of what that looks like. We have a match of databases, the database as a variable, and then the documents. And that is just a match pattern. That is the default base match pattern for all FireStore databases. So you’re just always going to have these first three lines of code and all of these, then we are going to go into basically our data model, we’re going to create rules for that. So anything under chats, basically any documents, under the chats collection, we want to lock down, basically, what we’re saying is you have to have, you have to be authenticated, there’s no anonymous access allowed. But if you’re authenticated, you can read and create but no editing, no deleting. So this means that nobody can change something they’ve posted. Once it’s there, it’s there. The next one is for users. And you’ll see that we’ve added a variable UID, right after the user’s collection. And then any documents underneath that. Technically, right now we’re not nesting anything. So that’s a little superfluous as a rule, your really important thing is that UID. And what we’re saying here is that anybody can read the user record if they’re authenticated, but they can only write it if their authentication authenticated, ID matches the ID of that location in the database. In other words, I’m only allowed to write my own user record. But anybody can read it. And the reason anybody can read it is because we use that to post the avatar and the display name and everything in the chat. You can get way more complicated. This is just super basic. But it’s a really important first step to prevent abuse of anything that you’ve published in FireStore. Now, in order to get into the code, there’s a few different things. If we were to use the pure Firebase SDK, it’s going to look a little bit like this, you’re going to grab the FireStore object off of the global Firebase object that comes in from the import. And then we’re going to do a get, basically give me everything in the collection. And then I can print out all those documents. Using that snapshot for each, it’s just gonna print one document after another using that sample code. Then if we’re going to use Angular Fire, this demo that I’m going to show you is written in Angular, you can do similar things in reactor view, or any other framework. And it’s going to use RX js to provide, you know, this, this subscription model. So basically, I’m going to subscribe to changes on the collection. What that means is that I am actually watching in real time, as chats come in, they’re going to continue to get printed out. I don’t have to do anything special to look for updates, because I’m subscribed to those updates, that subscribe effectively locked me in all the way back to the database itself. And I’m going to continue to receive those updates as long as this code is running. When we’re writing, we have to create that chat object based on our data model that I showed you earlier. And then there’s if I use the JavaScript SDK, once I have that FireStore collection, I just do a dot add to the collection. Using AngularFire, I did the exact same thing. Literally just add the object to a collection location. So I’ll actually make the change in the code. And we’re going to enable the reading and writing of chats and show image upload code and then show how the authentication works. The authentication is already done in this project. But that’s okay. So the chat service is where we’re doing most of the real work here. So the first thing I want to do is be able to list the chats. So let’s take a quick look. So some of you already found it. Very cool. Thank you very much. Feel free to post things please be appropriate. I’ve been fortunate so far that nobody has ever abused this live in a presentation and I appreciate you all for it. I do need to run this locally. So I’ll show you that real quickly. I want to show you that this is in fact not currently able to see the chats. Perfect. Okay, so here’s the chat room, you can’t see the chats. Now when I’m on the live published version, you can see them on my local version, I can’t see them. The reason I can’t see them is that that’s not implemented yet. So we’re gonna go ahead and do that here. So what I’m going to do is I’m going to I’ve got this.db, which is coming in from my constructor, it’s an angular FireStore. Object, I’m going to grab a collection, the type of data I’m expecting in that collection is a chat record. So I’m using TypeScript. So this allows me to do typing on the data in my database, the collection name is chats. And then I’m going to pass in this reference, which is going to specify the order by In other words, I want to sort by timestamp in descending order. So the newest stuff is at the top. And then value changes means I’m going to subscribe to all the changes. And all this is going to do is map, I’m doing a type conversion of my records. That’s it. And I return that whole thing. So this because you probably want to see this is getting called from the chatroom component. Basically, we’re just grabbing that list and monitoring it the whole time when that page is displayed. So now that I’ve implemented that all the chat show up here, but

I can’t actually save anything. In fact, I get a 403 error when I try to. So let’s fix that. So the first thing that needs to do is implement this function here for save chat. So what I’m going to do is grab a collection. Again, I’m typing it, and the collection name is chats. And then I’m going to call the add method that adds data to a collection reference. And I’m going to pass in an object that has all the things that I want, it is going to do type checking, because I’ve specified the type here, so that’s nice. Okay, contact your ID, display name, Avatar URL and the timestamp. This is actually a fire store function, it is saying, Give me the current time in the database. When I when I say this. The return value is actually the ID of the object that was just saved. This is important because the function that is actually you’ll notice this is private. The function that is actually called from my component is post, it is going to accept either a string, which is the text that I typed in, or it’s going to accept a file that I wanted to upload. And so what I’m going to do is save the chat and then hang on to the ID reference of the thing that was created. Because if I’m uploading a file, I then need to do the File Upload component. And this uses the Angular Fire storage object. It’s part of the SDK, I say I want to upload this file to this location, this file content. soon as that’s done, we’re going to grab the URL that we would need to use in order to display that image. And then we need to do one more little thing. The thing that we need to do is update the document the chat document that we’d previously saved. And that’s why we need that ID because we need to know how to reference it. And we’re going to update it with a couple of pieces of information, the content text, because the default is to leave blank if nothing was typed. So we’re gonna give it this text, these are provided image and the name file name of the image. And then we’re also going to provide the URL so that we can display that image later. Once those two things are done, now when I’m in here that’s theoretically mostly working. I’m having trouble with the avatars running on my local for some reason. But this is all there and that’s displaying. Cool. So now we’re being able to post information, showing you the image, upload code reading and writing chats. The last thing that I wanted to show you is the authentication. So let’s look at that really quickly. In the core, I have a login component. And all of the login component is doing is using this Firebase UI feature. Firebase you UI is a built in component that I’m importing that is easy, really easy to configure. Firebase UI is available for all platforms. It’s just a basic JavaScript library for implementing the the authentication. And the cool thing about it is you basically tell it, here are the authentication modes that I want to support, Google email, password, Facebook, whatever. And it will display the appropriate buttons and handle everything that needs to handle. This is an angular wrapper for that, that provided that Angular component for me. And the configuration is pretty much right here, I want to disable auto sign on I want them to sign in themselves. That’s the only configuration option that I’m using. And at that point in time, we’re pretty much good to go. There is a little bit of configuration right here inside of the module. And this is where I say, I want to use Google off an email off provider. And within this, I’ve customized it slightly. In other words, I want them to have to select which Google account they want to use, all the time. And the reason I do this, I don’t I don’t know about you, I have multiple Google accounts. And so if I’m only logged into one, it’s still not necessarily the one I want to log into a site as so I keep that. This is a credential helper that helps the user remember how they logged in previously, and manages the credential information. But this is all the code I had to write literally, it’s this configuration, and then I drop in a couple imports. And this, and I have authentication added to my application. That’s all there is to it. So it allows you to I mean, obviously authentications can be very time, timely, it time sensitive, it can be really complex. This makes it super duper easy to add to your project. So I really wanted to show that off. And if you have questions, please do post them in the chat. We will be getting through to comments a little bit later. I want to be sure to answer whatever questions you have. So you saw me earlier run kind of an angular start to be able to demo the local script, I want to show this really quickly on the local server. There’s a couple different ways to run using Firebase, I can run a full build on my project, and then I can serve it. Firebase serve just runs a local node service, you can run an emulator. So I’ve got that in the script as NPM run serve. But basically what this is doing is it’s running a build. And then it’s calling Firebase emulators start, which is using the Firebase CLI. And it runs a full emulator suite, database, off storage, hosting, everything runs locally on your computer, so that you can test everything out. It does require a little bit of configuration within your project. So for example, within Angular Tineo, it’s actually pretty easy. You have your app module here, I set up these emulators. And I use my environment variable to determine if I want to turn emulators on or off. And I can configure where the emulated version of that services. And this is safe to deploy even to production. Because in production, I just have us emulator off. And it uses the main deployed version of the thing. To deploy, again, I have a script for that. But all this is doing is doing a build and then calling Firebase deploy. And so long as we have the site set up correctly. So if I do this fire base, I’ve got all kinds of projects. This is going to pull down quite a few. But we’ll notice that it says that I’m currently using this one fireside. Okay, that’s the project that I’m using right now. And because that is the project that I’m using, if I were to take fire type in Firebase deploy on the command line, it will just go ahead and run the deploy to the live site and it will end up overwriting this deployed version of the site. Again, this is the URL if you want to come check it out and play around again, please, please be polite with your comments. Let’s jump into the progressive web application part of this whole thing. Three Pillars of PWA they need to be capable, reliable and installable. It’s really important that you be able to expand and take advantage of newer capabilities of the web, while still working really really well being fast and allowing a support for a wide variety of devices and and bandwidth and capabilities. The overview of May In a PWA, you need a web web manifest that provides the details about how to kind of apify, the thing that needs to be served in HTTPS for security, you do need that icon to help represent the application on the device. And then you need a registered service worker. That is a mandatory part of a PWA. Doing this in Angular is pretty straightforward, because all we have to do is add the angular PWA package. And it does a bunch of configuration for us, which is pretty nice. It adds the serviceWorker allows us to configure that builds our manifest and all that. So I’m going to do that in a second. This is what it looks like when you run that output. And then you can go into the Chrome Dev Tools, if you run it, you’re gonna see a bunch of things, you’re gonna see your manifest. In this case, we’ve got some warnings, any maskable is discouraged a little bit. And you’ll see that that’s how it’s set up, the way you can kind of get around any problems with that is by going to a tool like maskable dot app and using that to generate safe icons for your app. Basically, it provides a full bleed icon so that regardless of how the device decides to crop that icon, whether it’s into a circle or square different shapes, it’s still going to look correct for your users. You can look in the service workers, of course, within the Chrome dev tools, you can stop and start your service workers, which sometimes, this can be a little bit of interesting to deal with, you can check to see that that’s running. And you can of course, use Lighthouse begin built into Chrome to test the status of your PWA. And look for any issues. One of the things you need as a PWA to support Apple devices does have the apple touch icon. This does not have a transparent background, it’s very important for that particular icon.

The other thing we’re going to do for PWA, this isn’t mandatory to make it a PWA. It’s just a really nice thing to do, which is to prompt the user to install the application if it’s not already installed. So this is the event you’re going to subscribe to in order to do that. When you’re prompted for download, you can use for Angular use the Platform Module, there’s going to be different options and different frameworks, what we’re looking for, for Android or iOS, we have to do things just a little bit differently. So inside of Android, you have to prevent event bubbling. And then you’re going to open a prompt to allow them to click Add to Homescreen. In iOS, we have to check to make sure we’re not already a PWA. As a separate step, we have to do that ourselves on iOS, that’s super important. And when we open the prompts component, we do need to timeout for just a little bit in case we’re just first running the serviceWorker for the first time, because it can take a little bit of time to do that. Um, I’m going to actually just jump right in and show you this really quickly. And then we’ll move on to the last step, actually. Yeah, let’s go do that. So I am in the project, I’m going to go into the angular part of the project, actually. So I’ve got Angular, and then I’ve got my Firebase functions all inside of this Firebase project. I’m going to

I’m running an Angular 13 right now. So I’m going to go ahead and add that yes, I would like to proceed.

And I’m using the angular command line, because that does a lot of extra work for me, or just to add this package using something like NPM, it would add the package, but it wouldn’t do the additional configuration steps that I kind of needed to do. So now that that’s done, I have a few things. I have a web manifest, for example, that didn’t previously exist, I have this angular ServiceWorker config file that will give me some abilities to do some work. In order to test the PWA though, I cannot be running the angular build. I have to run the I’m going to do a build. And then I’m going to run it inside of the Firebase server, the local server because that is capable of supporting HTTPS, which is required to test a PWA. So wait just a second for that to build. And then we’ll actually demonstrate the PWA.

There we go. And so now we are right here inside of this chat room. I’m gonna reload this page. It’s not 4200 anymore. It’s 5000 Because I am that is the port for the virus server. So that looks Good, let’s go ahead and go to lighthouse. And with any luck, Lighthouse will give us some good feedback on what this looks like. Lighthouse is really useful to just kind of get a quick idea of where things are on your PWA is that sort of thing

does take a couple seconds sometimes to run on.

So again, if you do have questions, please don’t hesitate to post those in the chat. And we’ll get to those here in just a minute.

Feel like that’s taking a little longer than it should, but it did actually work. Okay, cool. So PWA, installable, 101, PWA PWA, optimized six of seven. So we’re doing it looking pretty good right there. So just that one thing, and PWA is mostly working. So the only issue we don’t have a valid Apple touch icon. So we’ll have to fix that. And then it will be in really good shape. So I’m happy with that. To add the apple touch icon is pretty straightforward. I literally have the icon already in the repo. So all I need to do is add this link. And so if I look at and here. These are the icons that Angular created for me. And Alright, so what I’m going to do is I’m going to delete this. And rename this. Make sure change that such as icons. And now all of these assets icons are going to go to the icons that I already created, which are my nice fire icons. So I’ve fixed that problem. At this point, I’m not going to bother rerunning it. But that’s how you do that. It is important to make sure in here we want to have a theme color set. I’m going to change that theme color just a bit to kind of make it match my situation. And then I can come out here and reload. Close the dev tools. And now if we go to the Chrome menu, you’ll see this installed fire side Angular shows up, which is cool. That allows me to I could literally install it on my Windows desktop, no problem on my Linux desktop. I can also go to Application secured application. And I can see that there’s a ServiceWorker running right now. That’s what it looks like on mobile. So that’s pretty good shape. We now have PWA running. So the last step, the last thing we want to do is add push notifications using Firebase Cloud Messaging. Again, feel free to scan the QR code, this is going to take you to information about Firebase Cloud Messaging. Even if you’re not using Firebase for anything else, a lot of projects will use Firebase Cloud Messaging in order to add push notifications to an application. This works within the web. You can also use Firebase Cloud Messaging from native applications, or even something like Ionic, four for hybrid applications. You can send information you can target messaging to single groups of devices. You want to subscribe device, this is probably the trickiest part. That’s the thing that has to happen on the device that wants the notifications, each device has to subscribe separately for push notifications. You want to generally show the notifications in app when the app is loaded. And so that’s what we’re going to do. You want to show the notifications on the device using the device notification system when the app is not loaded. And then anytime the appropriate data changes, you need to send notifications to everybody that has subscribed. So this can get pretty complex. For this chat application. We’ve kept it fairly simple, just to show the basics of how to do the work. So the first thing you have to do is add the AngularFire messaging module. This is if we’re doing this in Angular, you have to enable the messaging API in the Google Cloud Console. That is going to be super important. If you don’t have the API enabled, it won’t work. Then you have to choose the type of subscription or notify case you’re doing. We are doing topic notifications for this project, it’s the easiest thing to do, it won’t work for all use cases, you also need to store the device tokens for all registered devices. In our case, we have an array of device tokens inside of the user record in our FireStore database, that seems to work pretty well. You can come up with any scheme you want, but you do have to store those somewhere in a centralized location that you have access to, at the time you’re trying to send messages. Notifications can include an image, they can include a link, sometimes that’s really useful to be able to do that, it should definitely include the text message, the order of delivery of multiple messages not guaranteed. So you can’t send three messages and expect them to arrive on the user’s device and the order in which you send them that doesn’t work that way. And we, we are not currently showing how to remove stale tokens. In other words, after a period of time, you need to expire the user’s device registration, they need to re up that that registration. We’re not showing how to deal with that here. But it is an important thing to consider in a real implementation. And since the topic is really, really fantastic, but you do generally need to build in some sort of exception, because otherwise, if he if you’re broadcasting user centric events, the chat application is a perfect example of this, I don’t need to receive a notification for a message that I posted. Right, so we gotta watch that provide exceptions to that. So let’s jump right in to the last stage, which is adding this so the first thing I wanted to show you actually is to how to enable the API. I have that open here. So here is the Google Cloud Console. For this Firebase Cloud Messaging API. You’ll see right now it’s enabled. If it was not enabled, there would be a button here for you to enable this service, I can click Disable API right here, to turn it off. That’s, of course, not what I want to do. So let’s clear some of this out of the way. And

I believe package json already has. Messaging. Yep, there it is. Cool. So I’m going to turn this back on. Now it’s added.

I need to add a button to enable and disable notifications. I have a bunch of to do comments. To make this easier to find all places we need to do this. So one of the things we need to do is add this subscription. This is for in app notifications while the app is running. I’m using the Angular Fire messaging to subscribe to messages. And I’m using a snack bar to display the notification. Not much to it. But that is an important step. And I’m doing the subscription inside of the app. So this is running the whole time the app is running. Anytime a message shows up while the app is running, we’re gonna get this. I’ve already added the messaging module. I have not disabled these the Enable notification disabled notification buttons are there. It’s important to look at how those work. So the chat room. Component, yes. If user notification token, we want to get the token and subscribe. This is going to add a subscription to that token. enable notifications. So when they click that enable notifications button, this is the thing that’s going to register my device token. Again, this request token is part of Angular Fire messaging. This is one of the things you get along for the ride. If I want to disable notifications, I kind of do the same thing in reverse. I’m going to delete the token from AngularFire messaging. I’m also you’ll note going to record the token in the database when I enable and I’m going to remove the token from the database when I disable super important stuff. Okay, got that that that? Perfect. We have this convenient PWA service that does a lot of work for us. I forgot to do this earlier. But this is the prompt to install is not related to FCM. I just forgot to show you this earlier. That is the code that allows me to prompt to install the application notification function. So this is the code that runs in a Cloud Function behind the scenes to do the real work of sending and posting notifications. So a few things going on here. I am subscribing to user updates. This changes when the user subscribes or unsubscribes. So in this case, if they’ve enabled, if they’re adding a token, it means they’ve enabled notifications. And I’m going to subscribe that user to our topic, the topic name in this case is just chats. If they remove the token from the database, then I need to unsubscribe them. And this does the work of that. The other thing that I need to do is when chats are created, I need to send the notification. So when a chat is created, I use the messaging feature of the Admin SDK to send a message to our topic. And the title is new chat message, the person it’s from, and the body of the notification is the message they sent. And because I’m using topics, this is really simple, I’m just broadcast into the topic, anybody that has subscribed to that topic will receive that notification. And that is everything all the way set up. I’m not going to run it locally because of time. I’m going to run it out here. So if I enable notifications, right now, can somebody that’s watching, please send me a message. And I will also pull this up, I have a test. account as well.

There it is sending a message. Thanks, Brian. There it goes. You see I got the in app notification right there. Because FCM is now working. If I disable this, I won’t get those message notifications anymore. As seen right there, no notification for this one. Nope, I didn’t get prompted for it because I had disabled notifications. So that’s the proof that it works. Firebase Cloud Messaging. So thank you very much for sticking around for that really quickly, you feel free to play around out there. Really quick overview, a few things that Firebase has the command line interface, you can create your projects with this manage your projects, you can import and export user accounts. And even manipulate the database for script support allows you to do a lot of scripting, a lot of local management, I use this a lot. We talked a little bit about Firebase Storage, but it didn’t show you a lot about how it works. There is metadata on all the images or files that get uploaded, you can use it for any kinds of files, images, get some additional features, but not even like PDF files, or documents or text files, whatever anything can be out there. You have hosting the hosting service is extremely fast, it’s really easy to use, pushing something out to hosting this one command is just Firebase deploy. And it pushes all the stuff out and runs it in the wild. And you have quite a lot of configuration capabilities, including redirects, and rewrites and security headers, that sort of thing. You also have deployment history. So you can easily roll back with one click within the web console. And of course, we have Cloud Functions. So I didn’t really show this. So I’m going to show you just a couple things really quickly went in this notification function. This is a serverless function. So it would get built and pushed out to Firebase Cloud Functions. And that allows us to do things like these triggers right on update, when it’s something changes in the, the database, or when something’s created in the database, I can watch those events, I can subscribe to a wide range of other events as well. One of the the actual functions that we have out here is an emoji function. So anytime a chat is created, it will replace lol with a laughing emoji. And it’s funny, sometimes people trigger that long before I actually get to show it. There we go. Nice. Exactly. It takes because it’s running as a serverless function. It actually makes the post with the text, and then the function runs and then it replaces it with the emoji after the fact. That’s the way it’s set up just because it highlights how functions really work. So that’s a fun one. But they can be HTTPS endpoints for API’s. You can have them scheduled like running on a cron job. It’d be different platform triggers, like when you upload images or when you change things in the database. So when somebody logs in, those are all types of triggers you can use. You can even do direct API calls to your functions. So a lot of great stuff there. Hi, thank you so much for hanging out with me. I will go through any questions in the chats now I’m happy to answer as much as I possibly can. This is me, if you’d like to set up a meeting with me to discuss more about serverless architecture, Firebase or mentorship or anything like that, I’m more than happy to talk to you. So thank you very much for hanging out with me today.

Brian Rinaldi 50:20
That was great. I’m, I was I was mentioned in the chat that like, I am one of these interesting people like interested in weird for a developer who hasn’t messed with Firebase at all. In all the years, I remember, there was a point when like, particularly that that real time fire fire that database that you mentioned earlier, that was kind of the classic. You know, that it seemed like every web app and mobile app was using Firebase. So yeah, this was this was awesome. I mean, there’s, you know, it’s kind of, I’m really impressed with how easy it is to just do all that stuff. And all with one, one SDK, right. So very cool. So, folks, if you have any questions, please post them in the chat, or in the Ask a Question module. I’ve got some of my own, actually. Okay. So one of the things I noticed is like, Okay, you were doing everything in Firebase here, right? I’m assuming that is pretty. Like, if I, let’s say I have an app running on Netlify, or somewhere else, like I can mix and match these pieces. With my apps, like I don’t have to use the hosting to be able to easily do is there are there any drawbacks to that? I mean, or is it just work more or less the same?

Michael Dowden 51:45
Not particularly. So I so far have never worked on a project that had push notifications that did not use FCM. And that’s actually pretty common across the industry, they’ve just done such a fantastic job of making that easy. Firebase Cloud Messaging is really become kind of an industry standard, a lot of ways for push notifications. So it’s, again, that’s a really common when to mix and match. It’s, I feel like, off maybe the hardest one to mix and match. But even that, it totally works. Like it’s not really a problem to pull in just the off component. If you felt like using that instead of something like I don’t know, odd zero or Okta, hosting, I’ve seen a lot of places do use just the hosting and nothing else. Totally an option. There’s nothing wrong with mixing and matching. It really kind of depends what you want. The thing that I like to point out is you totally can do everything in Firebase. In fact, I often do. But even then, it’s not uncommon for me to have three or four different Firebase projects that all reference the same database. And from that standpoint, it’s no different than if you had your project deployed somewhere else entirely, to a completely different third party platform. And we’re calling Firebase, it’s not particularly harder. One of the things that you do get with Firebase is they actually have some some shortcuts. So if you’re deployed to their environment, they will, they can do auto configuration for you. Because then they know, hey, you’re on our hosting environment, we know what project you’re wanting to run on. We’re just going to set you up with this project automatically. You lose some of those benefits, but that’s the only real drawback. It’s not that hard.

Brian Rinaldi 53:35
Okay, okay. That makes sense. And, and the, the hosting itself is, like, really get into the, is it like node based hosting, or is it static? Like, you know,

Michael Dowden 53:48
it’s it’s not static. It’s static hosting. So the hosting service is only for static files. So but that’s kind of a bit of a misnomer. So the default hosting all static files is superduper. fast it is CDN backed. You’d be hard pressed to find a faster static file hosting service anywhere. It’s on par with with Netlify and with other things. What sorry.

So despite the fact that I completely put my phone on Do Not Disturb it decided to disturb me anyway. So I apologize for that. Metaphor. And now, I can’t even turn it off. So the answer is that super fast, but you can still deploy node based things. What it does is it will run the node on the serverless cloud function displays a Cloud Function, it’ll run that way. So for example, if you have angular or react, or something like that, Angular Universal is a perfect example you want in Angular Universal, you want To do SSR server side rendering, and it will, it will do that automatically. It’s actually a feature of Firebase deploy. So when you do the deploy, it magically bundles that up as a Cloud Function deploys it as a Cloud Function, and then it has access to the node service rendering, there’s some additional configuration you have to do, but it’s available as an option.

Brian Rinaldi 55:24
Okay? Okay, that’s so, so similar to like your nullifies, or your oversells. Or, or those were, like, detects what the framework is, and in WordPress, and will, will bundle that up for you. Okay,

Michael Dowden 55:37
the downsides of that approach. And Firebase is that is running in a Cloud Function, which means that it’s not a dedicated, it’s not the same as dedicated server, right, it’s going to spin it up on demand, which means there is the risk of cold starts and things like that, you can with Firebase, give a minimum instance of one, which means it always keeps one cloud function running, to avoid getting hammered with those types of issues. When you’re trying to run the service. So it’s important to be aware of that, you probably if you’re going to use a Cloud Function to run node j. S, for a website or whatever, you really want to have that minimum instance of one so that you don’t get hammered on low traffic sites.

Brian Rinaldi 56:26
Okay. Okay. That makes sense. So, Tony, as I’m trying to, so I think he’s trying to kind of understand lock in here. But I’m assuming, obviously, you can, you can drop these at a point like kind of mix and match as we talked about earlier, you’re not locked into the platform?

Michael Dowden 56:51
Nope, not at all. Well, in fact, if you use the real time database, one of the reasons I love it, because it’s a JSON data store, you can export the entire database, either by going through the web console and clicking a button, or using the command line interface and just download the whole thing as JSON. Also, the databases have built in API’s, like rest API’s that you can use. And so long as you follow the security rules that you’ve written, you can export the data that way or interface with the data that way. So there’s no, there’s no real lock in from how you choose to build your your applications, but also in terms of data ownership.

Brian Rinaldi 57:33
Right. Okay. That’s great. And and I guess my last question here will be, you know, we didn’t discuss the pricing, I’m assuming all of these are, like, have a free tier of some sort?

Michael Dowden 57:47
Yes, yes, yes, yes, Firebase has a free tier. It’s pretty generous. The caveat is that on many of the Cloud Functions, so any cloud function that uses HTTPS, or accesses the outside world in some way, there’s a lot of different restrictions on cloud functions that require you to move to move to a paid tier. Now, the good news is that even within the paid tier, you get a free amount of activity every month, it’s not because you moved to pay tier, you suddenly start paying for everything, you still get access to a certain amount of bandwidth every month, a certain amount of storage every month for free. So just because you’ve added your credit card, doesn’t mean it’s going to start costing you money. In fact, it usually doesn’t. I run Firebase on. I don’t even know at this point a dozen production applications and websites at least. And I think my total monthly bill is about 30 bucks. Oh, wow. Like, it’s not tons of traffic, but it’s 1000s of visitors a month like 1000s and 1000s. You’ve got to be pretty big traffic before it starts costing you much. And it part of it has to do with how much data you’re pushing around. Like how efficiently you’ve built your system, like are you hammering the database, way more times, then you need to prove page load, that sort of thing. There are things you can do to make it expensive. But if you’re if you’re a little bit careful with your data, use an optimization then it’s it’s really cheap.

Brian Rinaldi 59:26
Excellent. Oh, that’s awesome. Okay. So I think that’s all the questions I’ve got. I don’t see any other audience questions. So the pool will kind of ended there. But that was That was fantastic. I definitely want check it out. You know, yeah, you made it look so easy.

Michael Dowden 59:46
It’s a lot to pack into a short period of time. And yeah, I had written some of the boilerplate code already. But the framework parts of the code are so simple, that you really can build the whole application in 45 minutes, so

Brian Rinaldi 1:00:00
Yeah, yeah, I mean, just even the the piece of like, how much time I used to spend on authentication and the way we plugged in authentication there. Our the File Upload was just like a one line from the SDK. So yeah, that’s That’s awesome. So thanks so much, Michael. Appreciate it for coming and presenting to us today. And thank you all for attending this. Hopefully you got as much out of this as as I did. Keep in mind, we’ve got some great events that I talked about earlier. Coming up. We’ve got uptime FM with Becca, we’ve got dev relish with Cassidy and we’ve got a presentation with Austin Gill on edge functions all coming up. I’ve got some more I’m going to be announcing soon. So just keep an eye out for that as well. And I’ll see you all again soon. Bye.