DAVID EAST: Hey, everyone.
Welcome to a new episode of "#AskFirebase."
My name is David East.
SUMIT CHANDEL: And I'm Sumit Chandel.
[MUSIC PLAYING]
DAVID EAST: Today, we're here to answer your questions
from YouTube, Stack Overflow, Twitter, and basically,
wherever we hear from you.
So if you want your question answered,
make sure to hit us up with the hashtag #AskFirebase.
SUMIT CHANDEL: David, we've been receiving
a fair amount of questions about Firebase extensions,
but let's start with the basics.
What is an extension?
DAVID EAST: An extension is a no code solution
to common serverless problems, like translating
text in Firestore, triggering an email when a document is
created, and syncing Mailchimp audiences
with Firebase authentication users, and yeah,
and a lot more.
SUMIT CHANDEL: Hm.
Sounds good.
Let's take a look at some questions.
DAVID EAST: Gabe asks on YouTube,
how do I know what the code does in extensions?
SUMIT CHANDEL: Well, Gabe, that's a great question.
Extensions are a 100% open sourced and available
for you to read on GitHub in the Firebase extensions repo.
The link is in description.
Take a look at the URL shortener code extension.
It's just about 75 lines of code, including the license,
but we can see that it creates an on right trigger
for a Firestore document and calls out
to BitLead to create a short link.
Each extension is open sourced so if you
have any questions about what it does,
you can always read the code.
Great question again, Gabe.
DAVID EAST: Oh Sumit, I've got a present for you.
SUMIT CHANDEL: Oh, really?
What is it?
DAVID EAST: It's a next question.
SUMIT CHANDEL: Thamiz asks, how do
I generate a thumbnail for images
uploaded to Firebase storage?
DAVID EAST: Great question, Thamiz.
This is one of the best examples of an extension,
because resizing images is surprisingly complex.
So we want to make this really easy with an extension.
So let's actually take a look on how to set it up.
All right.
Here on the extensions page, I'm going to install the Resize
Images extension.
And the first thing you do is review
the APIs that need to be enabled and the resources created.
So in this case, I need to enable the cloud storage API,
and I also want to create a resource of a Cloud Function
that's going to be named Generate Resized Image.
And each extension always provides
a nice little indicator of what it does.
The next thing is to review the access that's
going to be granted.
So we're going to be granting access
to full control of GCS resources so we can create images.
The next thing is to configure the extension.
So I can select where I want it to be.
I'm going to keep it at the default.
And then what's the name of the storage bucket.
And we'll pre-populate that with your existing storage bucket.
So now to the heart of the extension, and that's
configuring what the sizes of the resized images are.
And that starts with a width and a height.
And you can set it to whatever you want,
but I'm going to leave it at the default of 200 by 200.
Then you decide whether you want the original file deleted,
which I do not.
And then now you specify where the resized images end up
being uploaded to.
So if you upload a file called dog.jpg
to slash images slash dog.jpg, by default, that'll
be created in a folder called Thumbnails
within the Images directory.
And you'll see that when we get it uploaded in just a minute.
And then lastly, if you want to set a cache control header,
you can do that, but I'm going to leave it to the default.
So now I'm going to install the extension.
And this, you know, sometimes takes three to five minutes.
So let's just speed things up.
All right.
So that has been installed.
So let's click Get Started.
And this gives us all this information
about how the extension works.
It teaches us how to see it in action
and tells you all this in-depth information
about the extension.
You can actually go back and review your settings,
or even reconfigure it, and then still see
the APIs and resources involved, and of course, the access.
So let's get started.
So now what I want to do is I'm going to go to upload a file,
but first, let's create a folder for it.
So I'll just call it images.
And clicking into the Images folder,
I am going to upload a file, and that file
is just me drinking coffee.
You can see right here that it's 642 by 648.
So we'll get that resized after it's uploaded.
So after it's uploaded, you can see
that it's about 500 kilobytes.
And a little hack here is if you click on Images,
it will refresh the bucket.
And now when I click in here, we have our thumbnail image,
which is much less under 100k.
And if I go down to the file location,
I can get a new access token and open it up in the browser.
And right here 200 by 200.
So that's how you set up extensions
to generate thumbnails.
Great question, Thamiz.
Now it's time for the "Tip of the Week."
Text translation with extensions.
Extensions are all about not having to reinvent the wheel,
and translating text is one of those things
that we've all done before.
And actually, four years ago, I answered this question
on #AskFirebase.
And this was even before Cloud Functions existed,
so let's just get extensions to handle this for us instead.
Here's how you set it up.
Here in the Extension page in the Firebase console,
I'm going to install the Translate Text extension.
The first thing you do, like always,
review the APIs in the resource created like the Cloud
Translation API, and then the resource of the Cloud
Function, which is called fstranslate,
that just listens for documents that are created in Firestore
so you can translate the message or the text inside of them.
Next, we're going to review billing and usage.
This does require billing, but you only
are charged when you go beyond the free tier.
And lastly, reviewing the access grant to the extension.
Now, time to configure.
And so first, you select where you want
the Cloud Function deployed.
I'm going to set it as the default.
And then I want to specify the target languages
for translations.
And so here you want to use any ISO 639-1 codes, which
I totally know what those are, and you
can get a list of those on this link right here.
And since I know Italian is one, I can just provide a comma
and then it.
Now I'm going to specify what is the collection that we want
to listen to translations on.
This can be messages, notifications,
or anything that makes sense.
But I'm just going to leave it at the default.
And then I need to specify what the input field is.
So what is the actual field that we want to translate.
So I'm going to use the field of message.
And then what is the output?
And so that's going to be translated message in my case.
And then once I'm ready, I'm going
to install this extension.
So extensions usually take about three to five minutes
to install, like we talked about before.
So speed it up.
And we are done.
So when I click Get Started, we can check out
all this information, just like we did before,
about seeing it in action.
And the heart of this extension comes right here
in using the Using the Extension section.
If I give it a message of "My name is Bob,"
it will return to me the translated message
with all of the keys of the language
codes and the translated text.
And I can do that by just editing the data
in the Firestore console.
And just like the other ones, we can also configure these.
We can add languages, remove languages.
Just do whatever makes sense down the line.
So now I'm going to open up the dashboard,
and it's time to create a new collection.
So I'm going to click Start Collection
and paste in the translations.
Then add a document.
The translated field is message.
And I'll just type in just like a totally normal message.
You know, just something simple.
And then I'll save that.
And in just one second, we get all of our translated messages
from all the languages that we supplied.
So that's my tip of the week.
And we're actually going to start
doing more tips like this.
So if you want to see something covered,
let me know in the comments.
SUMIT CHANDEL: And that is all we have for you today.
But if you want us to answer a question,
make sure to post it up on YouTube, Twitter, Stack
Overflow with the hashtag #AskFirebase.
And we will see you on the next episode.
[MUSIC PLAYING]