Firebase Extensions Quickstart

Key Takeaways

today at firebase summit a big new feature was announced firebase extensions imagine if the cloud had something like a wordpress plug-in system where you can install or opt in to specific features based on the needs of your application and with this initial release we have nine plugins that handle things like image resizing distributed counters transactional email and more and once again firebase has made a bunch of my past videos obsolete I'm not too english Masshole career so today i want to show you how to not write code by using firebase extensions if you're new here like and subscribe and consider becoming a pro member at bioship i/o and if you're serious about building apps on the firebase platform to get started you'll need to have a firebase project and if you go down here to the bottom you'll see a new option for extensions let's go ahead and install the first one we see to resize images now unfortunately for me about a year ago I created a video about resizing images with a cloud function but this extension provides the exact same functionality with no effort on my part and it's tested and maintained by these smart people at Google let's go ahead and click install and you'll see it takes us to a page to configure the extension the first thing it'll have you do is review the architecture or API is enabled by this extension when it comes to image resizing you'll need to have a cloud storage bucket and then a cloud function to handle the resizing after a file is uploaded to that bucket go ahead and click Next and then it will have you review the access granted to the extension firebase will automatically create the appropriate service account that has IM roles assigned for whatever resources this extension needs in the third step is where we configure and customize the behavior of the extension in this case we'll go ahead and have it generate thumbnails for 200 500 and 1000 pixel sizes and we'll go ahead and specify a directory in the bucket named thumbs which is where the thumbnails will be saved it will take a few minutes to install because what it's doing under the hood is deploying a cloud function to your project after it's complete you'll be able to review the configuration details and then if you go to the functions tab you'll see that cloud function deployed in your functions list and if you're really interested in how the function works under the hood you can go to the GCP console - cloud functions click the source tab and then you can see the full source code for the function and all of the extensions are open sourced so you can see them on github as well and hopefully in the near future they'll open the system 2/3 party developers meaning you could extend and potentially monetize the firebase platform as a developer but I'm really just speculating there I have no idea if or when that'll happen so now that we have this extension installed let's go into our storage bucket and upload a file there and see what happens you can see our storage bucket is completely empty and I'll go ahead and upload the cover image for this video after the upload is complete we'll go ahead and refresh the page and you'll now see we have a Thums directory here that has magically resized this image to the sizes that we specified so if you have an app that handles high resolution file uploads this extension gives you an incredibly simple pipeline for resizing and optimizing those images now let's go ahead and take a look at a second extension that makes a another one of my videos obsolete and that is the translate text extension this particular extension works with Google's cloud translation API and that is a paid API although it does have a free tier so you need to at least have a billing account set up and be on the blaze plan for this firebase project we can go ahead and follow these same steps as before but I'm also going to add Japanese and Arabic language codes to the translations and there's over 800 different language codes for you to choose from now this extension will be looking for a collection and firestore will go ahead and call that comments and then when that document is created it will look at the text field on the document and then translate the text into an object called translated let's go ahead and give that a couple minutes to install and then head over to the firestore database will create the comments collection add a document to it that has a text property on the document and after its created it should automatically translate that text [Music] now this should happen in a matter of seconds but nothing actually happened here so what went wrong our firebase extensions broken or did I do something wrong we can find out by going to the cloud function logs what you'll notice is that most of the translations ran properly except for the Japanese language code and so this was actually my fault JP is not the proper language code it's actually J a and I wanted to show you this because extensions aren't failsafe if you don't add the right configuration options they won't work properly we can fix the issue by going back to the extension tab and reconfiguring the extensions parameters I'll just go ahead and change the language code from JP to J a and then we just have to wait a couple minutes for those changes to propagate or for the underlying cloud function to be redeployed now if we go back to firestore and add a new comment to the comments collection you'll see it translates the text and no more than two seconds so it is incredibly awesome to just enable that kind of feature with a click of a button now I have to admit that building a translation feature from scratch really isn't that big of a deal it's just a simple API call that you can make from your back-end code so the translation extension is really just a minor convenience in my opinion however something that's not so trivial is setting up a distributed counter when you have an extremely high volume of writes going to a single document so normally firestore limits you to about one write per second which you can burst above but what if you have a social media app and you have an extremely viral post that's generating 10,000 likes per second handling a massive volume of writes like that would require you to shard the database and also carefully aggregate the count across those shards needless to say it's not exactly an easy process but now there is an extension for that let's go ahead and install the distributed counter extension and it's going to install three different cloud functions in this project then after the installation is finished there will be a few additional steps to take on your part in this particular case you'll need to update your firestore security rules so that right access is granted to that shards collection and then it will also give you a command to run to set up a cron job in your Google cloud platform project and its job is to ping the controller function to make sure that these shards are scaled properly and last but not least it gives you a script that you can use in your front-end code so it's also extending the firebase job script SDK now this is a feature that's not required by a lot of apps but if your app is seeing a huge volume of Rights you'll probably want to get this implemented very quickly because it means your app is scaling up quickly and having something packaged up and ready to go like this is extremely valuable I'm gonna go ahead and wrap things up there I feel like I don't have much else to talk about because extensions are just so easy but in the future we'll look at some more complex examples with actual front-end framework integrations and make sure to let me know what you think about firebase extensions in the comments thanks for watching and I will talk to you soon [Applause] [Music]