Firebase - Sunnyvale DSC Summit ‘19

and now it's unto me so for this go ahead and put your laptop screens down so we'll open them back up here in a little bit but want to kick off and intro all of you to the firebase so you got to play with firebase a little bit in the last and last talk in the last workshop but to talk a little bit more about what you can do with firebase what you could build the firebase and so to kick off I am Kyle Paul I'm the North America regional lead here at Google which basically means all the the programs that we run here in North America so the GDG women techmakers gde DSCs all these programs I hope look after all across North America so it's a lot a lot of fun and so it was great getting to meet a lot of you last night at the dinner and this is where you can follow me on the Twitterverse some of you I think have already been doing that my twitter has been kind of blowing up already so thank you and what is the one thing that no presentation is without I heard it over here yes cats yeah it's perfect so these are my two little kitties Penny and Jules one of the few photos where they're together and playing nice but yes so thanks yes you're the first person who's got that right awesome yes so no presentation was without cats so I have to include them I love them and miss them and all right so the first thing there's two things that you should get out of this top watch me so part of this talk is to also show you how to run a similar workshop within your DSCs so after this talk is where we're gonna start getting into where we're going to talk about the topic and then how to kind of run it so again watch me that's why I had all of you put your laptop lids down so that way you're paying attention seeing how I present what how parmie how i share the information and bottle it up kind of thing like that so watch me cool but we're here to talk about firebase right so this is the second thing to intro you to firebase play when you go back to your DSC clubs and you're talking to your fellow students and how you know you want to share what awesome things that you learned about firebase and you know when you're working on your your projects you know maybe you can choose to use firebase you know so quick show of hands who is brand new to firebase brand new to firebase yeah all right cool so who has built something in firebase let me say there should be a lot more hands you guys were just using firebase in the last workshop all right and then so you know ignoring the last workshop who has used an app that was built on firebase before today before today all right oh that's so all right cool cool all right so let's take a quick journey as a developer when you're building an application you have multiple languages that you're dealing with multiple frameworks there's all kinds of this hectic mess and spaghetti that you have to get through right so as a full-stack developer when you know typically as a student you're kind of learning all the tools of the trade and you're going through how do databases work how does service work how do I build an authentication and you know the list goes on connecting to api's but but really you know obviously this is a super simplified version of this right it actually looks like this especially when you get into the real world and you're building applications there's multiple databases you're connected to multiple api's you're connected to it's when you're creating an app you have multiple clients that you're dealing with you know so it's not just the backend that's super complex it's the front-end that you're dealing with as well but you know really in the end you're building an app right so your user doesn't care what the backend is user doesn't know what the back-end is they don't all they want is for it to be fast they want to open it up and they want it to work they want it to work offline you know so let's say you hop on an airplane and you know you still want to play that game so it should work on offline or you're on the train or you're going through a tunnel you know they don't want to be typing a message and then all of a sudden the app just goes you're offline you can't type anymore that's pretty bad user experience they also want it to be on all of their devices they wanted to work on Android they wanted to work on iOS they wanted to you know some people like the hot swap between devices you know every two years or something like that but they also wanted to work on their laptop or the tablets they also want it to be super easy to authenticate they want to be able to just log in and start using it and they want it to be secure they don't want to go through all this hassle of trying to use your app they just want it to be easy and as a developer you also want users so you want it to be easy for them so how do you do this this is where firebase comes in so firebase makes it very easy to build better apps and put in they give you tools to improve your app quality and also bro so some of you are already thinking of startup ideas and like what apps you want to publish these kind of things firebase also gives you these tools on how to grow and scale this as well so recognize some of these brands and here they all use firebase in production they're using it today hundreds of thousands of users going through it today so as we saw with Jason earlier should get Shazam is using it as well so all all kinds of fun apps are already using this in production the list is much longer these were just a couple icons I pulled in here but yeah cool and so here's some of the it might be a little tiny for some of you but it's also on the website don't worry if you can't read it all but there's 18 technologies here to help you develop improve and grow let's talk about and it's not just mobile apps it's also web apps so if you're more of a web developer than an Android or iOS developer the tools work across both there's a few things that only work mobile right now but just because that's what they're doing designed it built for but we're gonna look at a couple of tools that we'll be using today in our workshop and so first oh sorry I forgot I added this slide so those of you who've heard about firebase you know that they recently had a developer summit and that was in Madrid Spain and they announced a new tool called firebase extensions basically what extensions are are prepackaged functions that enhance your applications that you're building without you the need for you to research and write the code so basically it's a one-click install to help you resize images so this way you don't have to write the whole code to resize the image like let's say you want him to do thumbnails anytime a user uploads a bit an image they already have that code pre-written for you all you do is and click install and add it to your application done very easy so and then the list goes on with many other extensions and they're always looking for feedback on what what other extensions they should add so you can help build and contribute open source as well but first so the first thing that firebase launched with many many years ago was the real-time database and this is a cloud hosted no sequel JSON database and so with that JSON database who's played around with JSON objects before yeah that should be most of us all right cool so at the JSON object database it's very very simple very scalable it's fast it's whenever data is written it's synchronized between all the devices in milliseconds and you can access it directly from the app so as you write data to the real time database it automatically builds that API for you so that way you can quickly build out your app and it kind of looks like this whenever a user so the red line is somebody writing to the database firebase automatically syncs it with all the other connected clients and this way you don't have to worry your users don't have to refresh they don't have to load the page again so as long as they're connected it instantly updates everybody and as of the fire firebase dev summit they've doubled the concurrent connections that you can have so you can have a 200,000 concurrent connections so 200,000 users can connect it all at once being synced this synched up a lot of users right so so yes don't worry about breaking it and then the other feature the other database features that we have is the cloud fire store so the club fire store it's very similar with to the real time database where you can store and sync your data at a global scale the difference is that this is a no sequel document database so it's similar to other document collection databases where you know you have your collections and documents and there's a whole tree that results from that but the one thing the the huge advantage with cloud fire store is it's querying capabilities so the who who's more familiar with like a sequel so Microsoft sequel my sequel yes so your so those are relational databases so what fire stored cloud fire store does is help you more with the the query to where it's more akin to relational style querying but it's still not a relational relational database so keep that in mind so you're still querying a no sequel database but it's more to that style and more comfortable to users in that sense the other huge advantage with cloud firestore is it syncs data data across all devices offline so whether it's web Android or iOS it syncs offline so whenever user happens to disconnect the library already can help you with that and once they reconnect the data will be synced so you don't have to build any special wrappers for offline syncing or anything like that it just works pretty awesome the other awesome feature that we have firebase authentication I spoke to a couple last night who've used firebase authentication who's trying to roll their own authentication anybody taken that test where you try to build your own email password yeah the mess isn't it yeah we're with an email password you know or any type of authentication service it's not just allowing users to type in an email and password you also have to get them to register first and then after you register you have to have the hashing behind it because you don't want to have you know plaintext passwords in there do you know cuz that's how you know iCloud leaks happen or you know Sony leaked huh Sony leaks happen you know these kind of things so we don't want that so we want to hash and protect our users so we don't want these kind of things but then the other thing is like when you're trying to integrate with an OAuth service like Google sign in Facebook sign in Twitter sign in just make it super easy for your users to to log in right so firebase makes it very simple you just click and enable it and we'll play with this a little bit today in the workshop it also has a open-source UI library so when you're building a mobile app you just drag and drop that code and and it helps you build the authentication process within your application as well the other awesome thing that firebase authentication does is it protects your data within your firebase databases whether you're using real time whether you use in cloud fire store and then some other products I'll talk about here in a second or features that we'll talk about here in a second it helps you secure those to the node level so basically what that means is only admins can write to this node so this where that's different with relationship or relational databases is you you can only secure to the table you can't secure to that particular cell so you can secure the record but you can't secure that cell in the record you can get down to that batten mode and secure that with relational with the firebase authentication to to the databases so it's a really really cool powerful feature there and then there's also the firebase hosting so this is where you can host static websites and by static I mean HTML CSS JavaScript and some simple images so you don't want to host you know if you're doing a photo library or a photo gallery you don't want to you know host all your images on there because it's gonna make everything super super slow want to use cloud storage and some with cloud storage this is where you put your larger files so your larger images your PDF files you know videos music these kind of things so you want to store them here in the cloud storage but they're quickly back here with the hosting instantly with hosting it's a global CDN so it automatically scales and everybody can reach it globally the other thing is it provides you with a free ssl certificate so it's automatically encrypted you have the SSL cert with it it also supports custom domains so if you want to have your university calm or I mean that's probably already taken but DSC University or however that gets set up it supports these custom domains and then back to the cloud storage there goes all right so like the database you can secure it down to the node so only certain users can write to this directory only certain users have access to these files so let's say you have a website that or an application that is serving up video files but you only want you know registered users to be able to download these video files you can secure it to where only users who have signed in with their Google authentication can download this file users that sign in with Facebook can download this other video file things like that you can separate even to that extent and then they're they're super powerful thing that we have is the firebase cloud functions whose use cloud functions before I'm surprised all of you were just using it in the last workshop this is a test come on so yeah yeah okay so yeah with the firebase cloud functions what it is is it's a little service package that runs in the background to help you you know do service like actions with your applications so this way you don't have to build server-side logic so if you've done you know the C++ or sorry the Python or PHP or you know some other backend language you don't have to do that it you could just use nodejs and write a little mini script and it'll help you with that process and what it is is it's an event listening process so what it does is whenever an event triggers it it's gonna run and process whatever you asked it to do and then it's gonna die it's gonna go away it's yeah it doesn't exist anymore so whatever data was happened that was happening to be used at that time is no longer accessible so that also helps keep it secure so let's say you have a user that signs into your application so instead of having to handle all of that on your client-side what you do is you just have the login authenticate on the client-side it sends it up to firebase firebase sees that event that oh user a logged in and so the firebase cloud function can catch that and then run some back-end code that let's say we want to grab their profile picture we want to grab their email address and we want to save it to this location in the database this way the client side doesn't have to do any of this the client sides already like I'm already authenticated I'm moving on to the next thing and so with cloud function it's processing all that and saving it to the database we're good to go and then yeah cool so like we were messing with a little bit in the last workshop dialog flow so here's an example of where firebase kind of sits in with this so yes there's no firebase logo up here but what's happening is so you say okay G it goes find me a recipe yeah saving all of you there find me a recipe for homemade cannoli the Google assistant picks it up translates it dialogue dialogue flow picks out the entities and sends those entities to your web hook and that's where your firebase comes in firebase sits as that web hook that translates to a third party service or another Google API and figures out what that response should be and then firebase and the web hooks send it back here's the one I could find so you tailor your message and the response is read back to the user so firebase sits in that web hook spot right there cool so now we got a demo so now you can open up your laptop's cool and so we can go ahead yes thank you cool so the link I already saved you the link I made it bigger and it's not so it's here it's a bitly firebase simple with a capital F and capital S so when you go to it it's just a sample little page and what its gonna do is it's gonna load up this so oh I see yeah so here's an example of what's happening in the backend so all it's doing is as you load hit refresh close it reopen it do whatever you want yeah let's crack these numbers up here perfect so what's happening here is the real-time database is logging your user agent and all it's doing is just outputting to the screen and then as you leave there's a you probably saw it at the beginning but way down here now so you have this past visitors so what it's doing is as you leave it's adding to the past visitors and all in real time so I'm not having to refresh all of you or all you're doing is refreshing and it's capturing that and bring it back in here and this is just using pure vanilla JavaScript so there's nothing special or magic under the hood it's just pure vanilla JavaScript Wow all of you were pretty after it thank you cool oh we got a question yes oh you want the link you want to spam me some more yeah so so that's essentially just a quick demo of firebase with the real-time database going in action but here I'll show you what's actually happening under the hood here oops looks like I'm out of sync here let me refresh really quick alright cool so as you see like keep hitting it keep hitting it keep refreshing all right so you see how it's blinking and so yellow means that it's being updated and so you see how it's ticking up here so even in the console you get to see it live updating as well and so we can see that it's being deleted as they disappear and then yeah so green red means a red means disappearing green means it's new and so they look how fast it's writing nice so we have two hundred thousand concurrent connections unfortunately we don't have two hundred thousand ESC leads in the room here right now to try and test that but all of you are doing a pretty good job at knocking these numbers out but yes so this is just a showing you how powerful and how the real-time aspect works so again I'm not refreshingly just keeping up with you so another fun feature and this code is on my github so if you want to see how I did it I can probably demo that I don't have it open I don't think yeah let me open that real quick and it's here cool cool yeah all right so what I'm doing here is so I have this dashboard which is what that page I was showing you is it too small still a little bit bigger oops is that good enough back there everybody can see it all right cool so you can see what I'm doing is when you're dealing with firebase you have these API keys and stuff like that if you're writing pure JavaScript and you're hosting on firebase you don't have to include the keys you can include the libraries like I have here with the particular version and so all my keys are hidden in the firebase console toward it knows my app is authenticated already with hosting and so it doesn't have to request the API keys again and then all I'm doing is just very simple just showing active visitors and showing past visitors very very simple and then on the page that all of you are hitting is this index page and so again I just have my libraries that I'm loading here and then just the test tracking page so there's nothing you know super special behind behind the scenes it's just very simple HTML here and then here's where the magic comes in though so we have this dashboard so yes I'm using jQuery to help with the swapping of the HTML elements here so you have your total visitors active visitors past visitors and so just building and so what I'm just using jQuery for is just to build those list elements to that way it shows up in a list and then whenever sorry here yeah this is a particular one here so on child removed and so this is a firebase keyword that happens that so whenever that record is removed from the database you can listen to that and run a special action so what I'm doing is I'm just telling it in the jQuery side so firebase has said that this particular record was removed from this node in the database remove this element from HTF from jquery's dom and so it's very very simple as what's happening here and so firebase is just doing the rest of it all under the hood for me here and where is the other thing yeah and so here's where it's actually tracking so every time you hit that visitor tracking page so what you see here it's doing is I'm using the simple push get in the rough key ref referral key here setting the visitor ID and so when it's created a value I'm grabbing the timestamp and up here I'm grant oh so yeah here's where I build the visitor object sorry so what path arrived at user agent and then writing that key and then when whenever you refreshed you're leaving the page and so grabbing that as well so I'm listening I'm doing the on disconnect so what's happening there so firebase is using WebSockets to keep that connection live and so that's how it's able to update in real time and so once you've disconnected that WebSocket you're able to capture that that event and then so I'm setting the visitor now the visitor now belongs to the pass visitors so they're no longer an active visitor and then obviously just updating this node with you know a simple counter plus one so very very simple you know one here all right cool any questions about the demo or anything like that I got some I got five minutes I was just told so sure if the count goes over to so that's 200,000 concurrent users right so if the count goes over two hundred two hundred thousand concurrent users that two hundred thousand and one won't have access like the the service will fail so they'll but that's per second so they just refresh again or but it's very unlikely that you'll hit two hundred thousand in per second so but if you do happen to hit it they'll just have to like refresh or make the request again so there is an opportunity if you're on an enterprise plan with firebase to extend that but essentially what happens is companies that need those need more concurrent connections it's really just more making their application more efficient so that way your your you don't really have two hundred thousand concurrent users it's you know does that user need that live connection at the moment you can set them on the cache thing or you know how that works as they're navigating back and forth kind of thing so but that two hundred thousand and one just gets a failed request currently so cool yes in the back how do what try it yes good luck and so the question was how do i how do we deal with DDoS I'm not on the engineering team nor do I claim to be on our site reliability engineer team so I can't necessarily talk to how they prevent that but but really with firebase it's globally scalable so you essentially all you're doing when you try to DDoS me you're just giving me more servers so so yeah I didn't run in my bill up I guess but but yeah so yeah so it's never really gonna bring my service down so that put it to put it simply my code would fail before firebase did so my code would have to be more efficient cool any other questions yeah right alright so the question is how does a cloud fire store compared to MongoDB real-time and offline those are those are the two advantage where you get with fire store so plus it's connected to the rest of the firebase platform so you get the added security you get firebase authentication that helps make it secure so you have all these other advantages yes it's a no sequel you know document collection database so in the end that side is relatively very similar but you know again you have the firebase platform to back you up the security level real-time and offline so good question though cool oh we got one over here yes oh yes Mike [Music] going to be like rolling out included with certain service in like GCP solutions and if that comes into the sorry I think when it comes to like biomedical and medical companies so it's a bunch of legal walls that you have to go through would that be like dealing with firebase or dealing with GCP because it's like about holding sensitive patient information yes good question so and I lost the notes then the notes laptop but yeah so a good question here so the the concern is about patient data and data privacy so with firebase as well as GCP it is gdpr compliant which is more than HIPAA or any of these so so being that you know where gdpr compliant in this I wouldn't worry too much but it always depends on how you build it and having somebody dedicated to making sure that that resource is secure so yes it's always a very special case when you're dealing with patient data and medical records so how that all comes together yeah you do need auditing you do need all that stuff so yes so we're all Google is doing is providing the resource it's up to you to keep it secure so it's only as secure as your code it's only as secure as the data you put into it so that's quite we got two more questions here yeah I think you had your hand up first from that user or is that just for the firebase connected services so the question is when a user authenticates with your application so does that allow them access to other firebase API like the other Google cloud platform API Sergey speed API it's like the one that I was thinking is if if you log into a firebase app can you use that same login token to go get their users calendar if they give permission or is that yes okay yes so yeah because you have access so it's at their account level you still have to request access to it so it doesn't just inherently give it to you right you have to request access but you get once you get the token you don't need to build the login system to go connect no you don't have to you don't have to login again got it yes good question good question and so what's the average latency that we get that that we gave I'm using it with unity for example the Ring database because you're giving too many website connections for free which is really 10 things so if I have if I build it or a multiplayer game with unity what's the average latency that you have on that and also if the users are in different parts of the world is firebase automatically gonna decide what server to use like like Europe or something there's some friends in India playing and I'm playing from the US so how's it gonna decide what server to use for sure so the first question is the latency I've not tried to build with unity yet and I wouldn't claim to be an expert in that so we'll all have to look that up to be honest I don't have that off the top of my head but I would assume the latency would be as efficient as your app is to be to be short on that and then the other one is about how does it scale to users globally Google's data centers is the simple answer on that one so Google's data centers automatically as a user is connecting to the resource it finds and picks the the closest data center and that has a firebase instance and creates an instance and shares all that so that way everybody's connected and playing in real-time so cool but so yeah we'll do one more and then pop into the workshop so yes right here is firebase eventually going to replace App Engine I don't foresee it to be because there are two different purposes you know just with one sentence what is the main difference between those two so firebase is the platform and so that's where because you have the the static hosting you have the databases you have analytics you have authentication so firebase has all these things to it with App Engine it's a it's another service offering but it allows you to run other back-end code so you can run your PHP go Java Python and oh no js' as well but so you it's more of a back end as a service rather than a platform as a service so that's their kind of serving two different purposes there but yeah so I don't see one replacing the other in that sense but cool already so next everybody go here so I'll get your laptops up you know I so now is the workshop time oh you want to see the latest numbers everybody was hammering away oh goodness nice work Wow great great job all righty it's a firebase for web capital F capital W I'm here and so this will be the workshop that we'll be running through and let me know when you're ready and so with this workshop what I did last night I scout out a couple volunteers that are seated hidden amongst you that will help us on this workshop so if you happen to get stuck just raise your hand and the closest one will come and help you pass that next step so well my volunteers raised their hand the ones I talked to so yes we have Danny we have Stephanie we have Nick Hill we have Jason oh you're gonna kill sorry Nikhil and where's the hand back here Jason yes there you are so so these are our our volunteers that'll help so the closest one so now you know where they are and so just raise your hand if you get stuck at any point because it's a simple workshop but we'll just truck right on through yeah so that way we're conscious at the time and so you should land on this page like this and so essentially what we're gonna be building is a meet-up esque kind of app where you know just uh authenticate users and then we're gonna sink using cloud fire store build some security rules into that database and then deploy it on firebase hosting so a lot of the tools I was talking about earlier in my talk we're actually gonna use them so I'm really excited for this so without further delay we go in here get get the starting code so we have this link right here if everybody sees that right so you click that link and it opens up the page like this so everybody should see something similar to what I got here so you click that link and then it says to click the fork button so it's a blue fork button right up here so everybody see that so we're gonna fork the project so this way we already have the starting code template to go through and our own version of that code so everybody good we're still work able to click the fork button oh the link to the workshop here firebase for web all right we golden all right cool so on next we're gonna edit some information so some of the starting materials so basically we want to open the index.html file locate the event details container and the description container and edit some of those details that are in there so it's already prefilled in with some but so we go to the index.html and it wants us to edit let's let's change this to San Jose and so you see in real time without having to refresh or save or anything like that it automatically changed it to San Jose for me so it's just kind of showing how how quickly that works there so change it you know whatever other things you want in here I want to call this a Google meetup and now it's a Google meetup or we can call it our USA DSC meetup and so so you can quickly modify and just play just kind of and so what this step is doing is just really getting you used to this interface to show here's your code here's how to edit code and here's the window where you see code being displayed alright so great job now we're moving on to the next step cool so now we want to create and set up a firebase project so those of you who've logged into firebase as of the last workshop we're gonna do it again so you can click the sign in to firebase button here and then it says add project and then we want to call it something like firebase web code lab or if you don't have a name for that already so we're gonna call it firebase so I'm gonna call mine firebase for web and then continue and I guess I have to accept everything all right so it's going to take a second to build all the features here and then once that's built ooh somebody beat me to it it's thinking about it alright so don't feel you have to wait on me if you're going ahead through the steps but I'm just going to work through it and make sure that we have everything set up so we're going to going to be using firebase authentication cloud fire store security rules and firebase hosting and so there we go so my project is ready and so I want to go in to develop it and then on authentication here it's that large enough for everybody to see I could probably bump it up yeah let me bump it up a little bit alright and so to enable your email password so you come over here to sign-in method and you see that all of these are disabled so you see that the other thing is how I was talking about how there's all these different awesome ways to sign into your application we have a bunch of them here's where let's say like with Twitter for example with Twitter all you need is the API key and the API secret key that Twitter provides it just automatically enables everything for you you don't have to process and do everything that the the Twitter API says you have to do Google's already baked in a lot of that code for you which is really awesome but today we're just going to be doing email passwords and I don't know if it's sent down yes we want to leave the password list sign and unchecked and save that and then we come back over an enable cloud firestore so that's the other thing so like a lot of these firebase features aren't turned on by default you have to go in and manually turn them on so that way you're only using the cert the resources that your application needs so this way you're not just using all the things when you don't need it so back over here on database and then we want to create and then we want start it in test mode so that's the other thing so whenever you're starting a project it's it's okay to start it in test mode but do not publish anything that's in test mode because that's how people get your data so because right now what all what it does is it just defaults the database authentication the security rules to allow anybody to read or write from it which is okay for the first beginning steps that we'll be doing here and then we'll just go ahead and pick us central leave it default then it's going to provision us cloud firestore so I'll walk you through these steps cool alrighty now we need to configure it so give it a minute here so yeah so in our index.js file we'll want to add the firebase UI and firebase libraries to it and so we need to add this to the index.js file so our index.js file is here so if you're ahead of me awesome so you can see we have it's already importing our authentication and fire store and the firebase UI here and let's see is alright cool this is ready perfect all right and so we want to add firebase to the project and what was that I'm sorry where were you project overview but here on the top and then we want to add it to our website and so we need to register our app so I'm gonna call my firebase for web and we want to set up hosting and register it alright and we can use this friendly copy icon down here and it's going to copy everything for us and so we registered it now we want to copy it and add it to just below our body tag in a script block so over here well apparently we don't have a body tag in here sorry script oh it's already that and we go and grab it from so it's that where is the oh okay so it looks like the codelab is a little out of sync on here because we don't need to have the API keys since we're just doing JavaScript and hosting it on firebase so we're using the the same thing that I talked about in my demo on how we just went ahead and included the the library and it's going to go ahead and do all that for us and then see I'm sorry why did why is yeah I think this is looks like they changed it on me I just ran through this the other day it shouldn't have to be let me back up here and say that No all right that's right all right so what this is so looking right so here it is all right cool so basically what I thank you for for catching me up there so we're over here at firebase for web you click on the little cog over here to get to the settings and down here we click on config and then we can copy this config and it wants us to add it to the index gif file where it says paste below here so right here on line 27 then change that back to var just to match the lab cool alright everybody still with me on this one was a little tricky there all right and then so we'll go ahead and onto the add user sign in so this is where we authenticate our users so we can go to or an XJS file and at the bottom we add this that this statement here to initialize the firebase UI widget at the bottom of the index.js file how it looks like it's already there too so we could have just on uncommented it and then we want to add the RSVP button to the HTML so back on the index.html file we go to the event details container and we have the right so back here let's go ahead and save this on on here and next HTML and then we want it where did it say again event details container so that's right with five days off container here alright ooh looks like I have a looks like I have an error already ah thank you I missed that step perfect thank you so now you see we have our RSVP button here on the side and then yeah so if you have a larger non zoomed in non scrunch screen like mine you should see something like this the other a fun thing that you can do here is you're able to open this in a new window so that way you can view it fullscreen so there's this open and new window over here on the side and then we need to add a listener to the RSVP button so at the bottom we want to add this to our index.js file the event listener to listen for a click on that button so we can go ahead and drop that here I'm going to go ahead and clean up this code a little bit so it's gonna listen to RSVP clicks for us all right and then so in the users tab back over here on firebase we go to authentication and we're looking at the users and so you'll see what happens as users sign in here so when you click RSVP you see that I'm putting in an email address so I'm going to do so you see how the widgets already kind of populating everything for me and then I'm gonna choose a password chrome gave me an awesome super encrypted one I click on save so same firebase built all that for me all I did was just add the button and so firebase saved it for me and if i refresh over here let's see that I have a user now and so I'm able to see the email address that I signed in with that shows me an icon that means that the user signed into the application with the email password it would be a GE of hey if they sign it with Google it'd be an F if it's signed in with Facebook so to use the different icon so it would be the bird if they sign it with Twitter and so on and then you have their secret user ID that so anytime this user now writes to the database this is the ID that you can store that that record belongs to this user so that's a super awesome fun part there and then obviously the created date is the created date but the sign-in date will change every time that user signs in so you're able to see you know some applications show you when when you last signed in you're able to pull that from here as well all right so we authenticated and then now we want to add a state to the UI so we want to add the off state to the bottom of our JavaScript file so yes it it's it's faster to copy/paste but if you want to practice typing it out I suggest you do that I'm up here so I'm gonna copy paste and so now you can see that you know automatically went being that it refreshed it gives me the state it updated my state to log out because it knows my current state is that I'm logged in and then we'll add our listener code here to replace the current event listener so that way when I click it again it's not gonna ask me to login again it's gonna actually help me log out so so now when I log out it's actually gonna log me out and switch back to the RSVP button so when I log in I sign it again but the thing is I already signed in once why is it asking me to sign it again so blast you so are we good on this step everybody still with me or ahead of me perfect sandy this would be an easy lab cool now how do we write data to firestore so basically all we just did was write data to the authentication service but we haven't actually tied it in the database yet so so this is really what our data model is going to look like so we're gonna have a guestbook and so whenever the user writes a message it's going to store it in a document collection and so that document is gonna have a name text timestamp and user ID and so remember how I said that user ID that it's automatically generated for the user this is where we're going to store it and relate it back to that user and so when we add messages to firestore we need a section to for them to write a message in the first place so we're gonna add that to our guestbook container over on our index.html file save this those cancel all right so our guestbook container is here so I want to update that excuse me so see we have our little guestbook container down here towards leave a message and a send button but we now need to give some power to that button so yeah so it's the same same here but now we're gonna listen for the form submission and so here in the form submission to kind of step through this a little bit similar how I did on the real-time database so you're referencing the firebase SDK right here you're telling it to use firestore you're telling it which collection to use so you're giving it the guestbook collection and then you're using the keyword ad and then creating the document here and again the document is the text timestamp name and user ID and you write it and so yeah so we're gonna add this here and you know the the downside with the copy/paste you're not necessarily seen everything you're just getting to the result but but definitely look at how we're using so like up here noting that firebase right here again we're referring to the firebase SDK that's already loaded we're using or telling the firebase SDK to use the off part of the SDK we're telling it to grab the current user and that and get that current users ID because the other thing we could do is get current users name or we can get current user email so we can reference other things here it's like up here right here we're using display name so you're able to build off of that object so that's gonna be at the bottom of our index J s all right cool any questions about the code so far all right and so the other thing we want to do is this guest book is only got a show - signed in users and so we're looking at the firebase SDK again we have we're telling to use the authentication part of the SDK and then we're looking at the off-state changed and so from the off-state changed we're gonna pass in our user and if user meaning logged in is over here on our index J s we we create the user where we yeah yeah so we're passing the user alone and so that way we're testing the state of the user off state changed right here so we're updating our get current off state here on line 71 so it's going to block so since I'm not signed in we no longer see the ability to write to the guestbook if I had written anything it would also not show anything that's been written already alrighty and so we can test sending messages let me get back in cool and so now you see that I have the discussion hey there DSC leads boom so bless you yes all right so back over here on our database you see that we have the guestbook record that was automatically created so I didn't have to go in and create that collection as you write to firebase that automatically builds that for you and so I generated the document ID and then wrote it here and so hey there DSC leads so everything automatically happened there cool and so now we want to synchronize these messages so we want these messages to listen for newly added messages and display them on the UI so how I was using jQuery on my demo that I showed earlier we're gonna build that a similar version to that and so we want to update our guestbook container to show I don't want to do all of that though so we just wanted this one section here in the guestbook container underneath the form and that is where's our guestbook container there it is so underneath the form is where we add that and then in our index.js file so what we're doing here is we're asking firebase to go find these messages and bring them and display them back to our to our users so again firebase SDK referencing fire fire store using the collection because you have to give it the ID if you don't give it the ID it blows up so you refer to guestbook and then here is part of the querying so we're telling it to order by timestamp and you and we're giving it a descending so this way it's gonna show our our messages in a descending order and then you have to use on snapshot because what happens is after you've made this request the data comes back as a snapshot and so once you've queried it out of firebase you have this snapshot of data and that's what you have to work with you can't query on it again so and so what we're gonna do is reset the page so reset to enter the innerhtml and then loop through and display them with our name and our in our text from that document so that's gonna be at the bottom of our index GS oops over here cool and that'll update and so if I add another message that says go DSC so you'll see that populates to the top because not where in descending order and if real time happen cuz I just hit submit and it instantly showed up what firebase so we've tested that and I'm at one minute left so I'm gonna buzz through the security rules here do not buzz through security rules but I'm gonna have to because I have to finish up so but yes so in so here's where you go to set up firebase security rules so in the develop so in the database you'll see it you have data rules indexes and you suggesting how many users are using it and if somebody's trying to ddos me all this kinda stuff so you can you can see what's happening here with your usage but over here in rules is where we want to set everything up and so our rules are all set up in here and so what does it want us to do so so basically in our and our rules it wants us to identify and match that our security rules so let's go down here so we're gonna add a version two of our rules and once I copy this over I'll talk through that real quick so so I update that alright so see right here so even though I've pasted the rules it hasn't actually saved it yet I have to actually publish them for them to go live and so that's what's happening here is I'm telling it that in fire store and you're using the curly brackets as a way to any collection gets these rules so I don't have to reference a particular collection you can if you want to secure down to that collection but what I'm doing here is saying that any collection with documents and then it goes in and matches the guestbook so guest book is gonna populate back up there and then any entry and so it's allowed read if authentication is not null so meaning that the user has to be signed in so this is another way so on the UI side we've already protected it saying that the user has to be logged in to be able to see it but now also on the data side we've protected it to where you have to be logged in in order to read that data and then allowing right if the user ID is the same user that's logged in is what's happening here so we can go ahead and publish that and some validation rules so how much time do I got left in my out I'm out all right so essentially I go ahead and work through the rest of this I don't want to keep you from lunch but yeah so if I can quickly just go back to the slides really quick yeah I'm at I'll be around to talk to to talk to you more but a lot of the stuff that I was demoing today I'll be around if you want to talk more and have more questions if you want to learn more about what was in the presentation I have a fancy link here if you want to do more code labs on firebase which include web Android iOS IOT ads you know we have a Google assistant there's all kinds of code labs that bring in firebase so we have that there so three two one switch all right so thank you that's firebase thank you and again that's me on the tour Devers