Writing a Cloud Storage Trigger with Cloud Functions for Firebase; Part 1 - Firecasts Video Lecture | Beast Android Development: Firebase Necessities - App Development

hey everyone Jen person here ever wonder
how cloud functions can keep your mobile
app from getting bogged down with
resource intensive CPU or networking
tasks let's find out on today's fire
cast let's say I have a photo app uses
upload photos which populate a grid of
thumbnail images users can select a
thumbnail to see a full-sized version of
the image while creating a thumbnail
could be done from the client it
requires extra processing and an
additional upload to cloud storage with
each image one of the original image and
one of the thumbnails Y users love my
app so they upload lots of pictures I
want to make sure I give them the best
experience by offloading the work using
cloud functions with clouds functions I
can eliminate the additional work from
the client even better if my app is on
more than one platform I don't have to
code the same process for each app the
code I'm going to show you today is
similar to one of the function samples
in the github repository so feel free to
follow along using the link in the
description below today I'm going to use
three additional tools first I'll use a
software package called image magic to
create a thumbnail this is already
provided by clouds functions as a
command line program and you can read
more about it in the description below
next I'll use a module called child
process promise
it lets me run the image magic CLI and
finally I'll use the Google Cloud
Storage module to upload the thumbnail
to my storage bucket
let's get these set up I'll go to the
functions directory of my project and
use NPM to install the google cloud
storage module you can see I use save in
my command this adds the package name as
a dependency in the projects package
JSON file
cloud functions will only install the
modules declared in your projects
package JSON file when you run the
firebase deploy command so now when I
install the child process promise module
I'll use save again I'll open package
JSON and you can see that the Google
Cloud storage and child process promise
modules are listed now that the
environment is set up let's dive deeper
into how cloud storage triggers work so
we can implement the function that will
convert uploaded images so most of the
way I use functions database to receive
write events
the database changes I can use functions
that storage to receive events when
files are changed in my storage bucket
the function all right today receives an
event object that contains a property
called data which has a type object
metadata there are many properties of
object metadata for our purposes we will
use buckets name content type and
resource date bucket is a storage bucket
for the object in our case it's a
storage bucket associated with the
firebase project name is its path and
storage content types is the object type
storage can contain many different types
of objects so we will check content
types
to find out the type of this file
resource state can have one of two
possible string values exists or not
exists we will use this property to see
if the image has been deleted or removed
if the image no longer exists in storage
there's no need to create a thumbnail so
I'll use the bucket property along with
the name property to locate and download
the image from storage then invoke image
magic to create the thumbnail then
upload the thumbnail to a new path in
cloud storage I'll show you what that
looks like now you always start with the
firebase functions module I'll add the
require statement for the Google Cloud
Storage module the cloud storage
required is passed with parameters used
to configure storage since cloud
functions is part of the cloud platform
and all cloud SDKs Auto initialize
inside the cloud platform I don't have
to worry about config I'll also add the
child process promise module this module
provides four different methods for
executing external programs the method
I'm going to use is spawn the spawn
method loads and executes an external
application in a new process I'm going
to define an export a function called
generate thumbnail this will trigger
whenever a file changes in my storage
bucket the function receives an event
that describes the object that changed
I'll get ahold of the object metadata
property from the past event this
contains all the information about the
file that change I'll store the object's
name in file path I can then get the
object file name from the path the
JavaScript method split converts a
string into an array the parameter
passed into the function determines
where
split occurs pop remove and returns the
last element in an array I'll define a
constant for the bucket where the
storage change occurred now I'll create
a reference to the file bucket using the
cloud storage API included earlier then
I'll make a string with a temporary file
stored locally on the cloud functions
instance this will hold the image while
it is being modified I have to handle a
couple scenarios that can occur I'll
need to check if changes to the storage
bucket are images before I try to resize
them also there's a chance where the
image could disappear from the storage
bucket as the function begins to execute
say if a user uploads a different
picture than what they wanted so they
take it down right away I'll want to
check if that image still exists or I
won't have an image to download I'll get
the content type of the newly added
object using the content type property I
mentioned earlier if the content type
does not start with image there's no
need to continue executing the function
along the event and then return to see
if the object still exists I'll check
the resource state property if the value
is the string not exists then the object
has been deleted so I'll return out of
the function after logging the event now
here is where the magic starts to happen
if you watch the last video recall that
we chained together several ven method
calls to trigger each method after the
previous promise was returned this
ensured the function didn't try to read
data that wasn't yet available and since
we need to download the image then
resize it then write the resize image to
a new path in storage this is the
perfect time to chain promises to make
sure the work happens in the correct
order my first bit of work will be a
download of the storage object that has
changed I'll download the object to the
temporary file I just created the next
bit of work I want to execute after the
image is downloaded is the actual resize
of the image I will then use image magic
to convert the image to a smaller size
in this case I'll choose 200 by 200
which looks like this Spahn executes the
image magic convert CLI and then returns
a promise that will become resolved when
the conversion completes this final bit
of work uploads the thumbnail
first I'll designate a file path where
I'll upload the image I'll want to store
the thumbnail in a different location
than the original so I'll prefix thumb
to the name of the original image this
helps clarify which thumbnail is for the
image and also serves as a way to
prevent infinite loops I'll talk more
about that later if you are familiar
with the crazy series of symbols in the
replace function this is a regular
expression or rejects for short it uses
a special texturing to describe a search
pattern this particular rejects matches
to the end of a string that contains a
slash followed by a zero or more of any
character that is not a slash find out
more about regular expressions in the
links below
now I'll upload the image to the newly
created path and storage also add logs
so we can check things out in the
firebase console I have an important
lesson to tie up before deploying the
function when I add a thumbnail image to
storage I've changed the contents of the
storage bucket that means the function
will be triggered again and again and
again I definitely don't want an
infinite loop to occur when I wrote a
database trigger in an earlier fire cast
I used a boolean flag to check if the
function had already been executed on a
post for the storage trigger I'm going
to use the name of the storage object to
determine if the image is a thumbnail
I'll address this in our code now
earlier I mentioned that adding some to
the name of the image after resizing
would be used to prevent infinite loops
here's where that comes into play I
check if the file name starts with thumb
and if it does I log the event or return
out of the function now in the terminal
I'll run firebase deploy to deploy the
generate thumbnails function I'll head
on over to the firebase console and
select storage I'll upload an image and
I can see the image added storage in
order to see the thumbnail I'll refresh
the page and you can see the thumbnail
has been created sweet in the functions
logs in the console I can see when the
image was downloaded to the temporary
path and then resize I can also see a
log that an object added to storage is
already a thumbnail this shows that the
function was triggered when the
thumbnail was adjective storage but
there was no need to generate a
now so the function was exited breaking
it down generate thumbnails downloads
the image then resizes it then writes
the resized image to a new path and
storage and as usual remember to return
your promise or you can end up with a
cryptic error message instead of a
thumbnail so now you see how cloud
functions can be used to offload data
and memory intensive tasks away from the
client but wait there's more I can do
with my cloud storage trigger so tune in
to the next fire cast for part 2 of
writing a cloud storage trigger if you
are ready to write some cloud functions
after watching this video make sure to
hit like also subscribe to the firebase
channel on YouTube to get notified when
new fire casts are released including
part 2 of cloud storage triggers thanks
for watching and I'll see you here next
time
[Music]