2024-02-04T08:32:00.031Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
dc466a8b-b468-4739-a19e-1ded87ac0c7c
85edbaaf296f6199a24698729175bb90111e54f6b60611265a2b94e77db5c9d4
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
In this episode, we're gonna build a text translation feature in Angular 4, and we're gonna do it completely in the background using Firebase Cloud Functions and the Google Translate API.
This example is going to take a string of English text and translate it to French, Spanish, and Arabic.
We're able to make this work using the on write callback from the Firebase database, which will trigger a Cloud Function that handles the entire translation process.
In other words, we're gonna build a microservice specifically for translation, and we're gonna trigger this microservice to run every time new data is added to the database.
The first step is to model the data.
In this case, we just have a collection of translations and each translation has a set of key value pairs where the key is the language and the value is the translated text.
So the user will enter the text in English, and then the Cloud Function will write the data in every other language that we wanna translate.
The first step is to allow the user to input their text to the Firebase database.
So we'll start building that in a service.
The service only needs one function called create translation.
It starts by pushing the user text to the database, then it returns that as an object observable so we can update the user interface asynchronously.
Now we can start building the component.
First, we define a variable for the user's mixed, and then we define another variable for the current translation, which is the observable returned to us from the service.
Then we create a handle translation function that will trigger the entire process when the user submits their form from the template.
I'm also creating a default message helper that will tell the user when the Cloud Function is running in the background.
It'd be a good idea to replace this with a loading spinner or possibly a progress bar.
In the template, we start by creating a text Daria.
Then we use ng model to bind it to the user text variable that we defined in the TypeScript.
Then we create a button and attach the click event to the handle translation function.
Since our current translation isn't observable, we can use the async pipe to unwrap it asynchronously in the template.
In this case, we use the question mark to safely access the attributes before they've been defined.
Otherwise, an exception would be raised.
And we also use the or operator to display the default message if the translation is undefined.
Now we can start building the Cloud Function.
If this is your first time using Cloud Functions in Angular, you'll need to run Firebase init from the command line.
From there, we'll need to install the necessary packages in the Cloud Function environment.
Uh, I'm using Lodash to make the JavaScript a little more readable and also using the request promise library to send the request to the Google Translate API.
Make sure you're in the functions directory and then run npm install.
In the index JS I'll we start by importing the necessary libraries.
Then we run exports dot translate to name our actual cloud function.
From there, we make a reference to the database location that we wanna trigger the function, then we call on right to run this callback whenever new data is added to the database at that particular location.
Next, we create a promise for each language that we wanna translate.
We build the promise by making a request to the Google Translate API through this URL here.
The URL itself needs the source language, the target language, and the text itself.
When we send the request, we need to make sure to resolve the promise with the full spawns.
If we get a successful 200 response.
We convert the response to JSON and then use the translated text as the data that we use to update Firebase.
The final step is to update the Firebase database as an admin user.
And if there's an error, we wanna throw that error to make sure it shows up in uh, Cloud Function Logs.
If we go back into the app, now we can see that our data it's being updated, and we're getting translations back from the Cloud Function pretty quickly.
Looks like about 300 milliseconds for the function to execute.
That's it for this episode.
If you found the video helpful, please like and subscribe.
And if you wanna support the channel, consider becoming a pro subscriber at angularfirebase.com.
For for just a few bucks a month, you'll get access to exclusive content as well as free 1 on 1 project consulting.
Thanks for watching, and I'll see you next time.

Speaker 0: In this episode, we're gonna build a text translation feature in Angular 4, and we're gonna do it completely in the background using Firebase Cloud Functions and the Google Translate API. This example is going to take a string of English text and translate it to French, Spanish, and Arabic. We're able to make this work using the on write callback from the Firebase database, which will trigger a Cloud Function that handles the entire translation process. In other words, we're gonna build a microservice specifically for translation, and we're gonna trigger this microservice to run every time new data is added to the database. The first step is to model the data.

In this case, we just have a collection of translations and each translation has a set of key value pairs where the key is the language and the value is the translated text. So the user will enter the text in English, and then the Cloud Function will write the data in every other language that we wanna translate. The first step is to allow the user to input their text to the Firebase database. So we'll start building that in a service. The service only needs one function called create translation.

It starts by pushing the user text to the database, then it returns that as an object observable so we can update the user interface asynchronously. Now we can start building the component. First, we define a variable for the user's mixed, and then we define another variable for the current translation, which is the observable returned to us from the service. Then we create a handle translation function that will trigger the entire process when the user submits their form from the template. I'm also creating a default message helper that will tell the user when the Cloud Function is running in the background.

It'd be a good idea to replace this with a loading spinner or possibly a progress bar. In the template, we start by creating a text Daria. Then we use ng model to bind it to the user text variable that we defined in the TypeScript. Then we create a button and attach the click event to the handle translation function. Since our current translation isn't observable, we can use the async pipe to unwrap it asynchronously in the template.

In this case, we use the question mark to safely access the attributes before they've been defined. Otherwise, an exception would be raised. And we also use the or operator to display the default message if the translation is undefined. Now we can start building the Cloud Function. If this is your first time using Cloud Functions in Angular, you'll need to run Firebase init from the command line.

From there, we'll need to install the necessary packages in the Cloud Function environment. Uh, I'm using Lodash to make the JavaScript a little more readable and also using the request promise library to send the request to the Google Translate API. Make sure you're in the functions directory and then run npm install. In the index JS I'll we start by importing the necessary libraries. Then we run exports dot translate to name our actual cloud function.

From there, we make a reference to the database location that we wanna trigger the function, then we call on right to run this callback whenever new data is added to the database at that particular location. Next, we create a promise for each language that we wanna translate. We build the promise by making a request to the Google Translate API through this URL here. The URL itself needs the source language, the target language, and the text itself. When we send the request, we need to make sure to resolve the promise with the full spawns.

If we get a successful 200 response. We convert the response to JSON and then use the translated text as the data that we use to update Firebase. The final step is to update the Firebase database as an admin user. And if there's an error, we wanna throw that error to make sure it shows up in uh, Cloud Function Logs. If we go back into the app, now we can see that our data it's being updated, and we're getting translations back from the Cloud Function pretty quickly.

Looks like about 300 milliseconds for the function to execute. That's it for this episode. If you found the video helpful, please like and subscribe. And if you wanna support the channel, consider becoming a pro subscriber at angularfirebase.com. For for just a few bucks a month, you'll get access to exclusive content as well as free 1 on 1 project consulting.

Thanks for watching, and I'll see you next time.
In this episode, we're gonna build a text translation feature in Angular 4, and we're gonna do it completely in the background using Firebase Cloud Functions and the Google Translate API. This example is going to take a string of English text and translate it to French, Spanish, and Arabic.
languages
We're able to make this work using the on write callback from the Firebase database, which will trigger a Cloud Function that handles the entire translation process. In other words, we're gonna build a microservice specifically for translation, and we're gonna trigger this microservice to run every time new data is added to the database.
The first step is to model the data. In this case, we just have a collection of translations and each translation has a set of key value pairs where the key is the language and the value is the translated text. So the user will enter the text in English, and then the Cloud Function will write the data in every other language that we wanna translate.
modeling
languages
The first step is to allow the user to input their text to the Firebase database. So we'll start building that in a service. The service only needs one function called create translation.
It starts by pushing the user text to the database, then it returns that as an object observable so we can update the user interface asynchronously. Now we can start building the component. First, we define a variable for the user's mixed, and then we define another variable for the current translation, which is the observable returned to us from the service. Then we create a handle translation function that will trigger the entire process when the user submits their form from the template.
programming
databases
I'm also creating a default message helper that will tell the user when the Cloud Function is running in the background.
It'd be a good idea to replace this with a loading spinner or possibly a progress bar. In the template, we start by creating a text Daria. Then we use ng model to bind it to the user text variable that we defined in the TypeScript. Then we create a button and attach the click event to the handle translation function.
modeling
Since our current translation isn't observable, we can use the async pipe to unwrap it asynchronously in the template. In this case, we use the question mark to safely access the attributes before they've been defined. Otherwise, an exception would be raised. And we also use the or operator to display the default message if the translation is undefined. Now we can start building the Cloud Function. If this is your first time using Cloud Functions in Angular, you'll need to run Firebase init from the command line. From there, we'll need to install the necessary packages in the Cloud Function environment. Uh, I'm using Lodash to make the JavaScript a little more readable and also using the request promise library to send the request to the Google Translate API. Make sure you're in the functions directory and then run npm install. In the index JS I'll we start by importing the necessary libraries. Then we run exports dot translate to name our actual cloud function. From there, we make a reference to the database location that we wanna trigger the function, then we call on right to run this callback whenever new data is added to the database at that particular location. Next, we create a promise for each language that we wanna translate. We build the promise by making a request to the Google Translate API through this URL here. The URL itself needs the source language, the target language, and the text itself. When we send the request, we need to make sure to resolve the promise with the full spawns. If we get a successful 200 response. We convert the response to JSON and then use the translated text as the data that we use to update Firebase. The final step is to update the Firebase database as an admin user. And if there's an error, we wanna throw that error to make sure it shows up in uh, Cloud Function Logs. If we go back into the app, now we can see that our data it's being updated, and we're getting translations back from the Cloud Function pretty quickly.
Looks like about 300 milliseconds for the function to execute. That's it for this episode. If you found the video helpful, please like and subscribe. And if you wanna support the channel, consider becoming a pro subscriber at angularfirebase.com. For for just a few bucks a month, you'll get access to exclusive content as well as free 1 on 1 project consulting. Thanks for watching, and I'll see you next time.
youtube
customer support
podcasts
In this episode, we're gonna build a text translation feature in Angular 4, and we're gonna do it completely in the background using Firebase Cloud Functions and the Google Translate API. This example is going to take a string of English text and translate it to French, Spanish, and Arabic. We're able to make this work using the on write callback from the Firebase database, which will trigger a Cloud Function that handles the entire translation process. In other words, we're gonna build a microservice specifically for translation, and we're gonna trigger this microservice to run every time new data is added to the database. The first step is to model the data. In this case, we just have a collection of translations and each translation has a set of key value pairs where the key is the language and the value is the translated text. So the user will enter the text in English, and then the Cloud Function will write the data in every other language that we wanna translate. The first step is to allow the user to input their text to the Firebase database. So we'll start building that in a service. The service only needs one function called create translation. It starts by pushing the user text to the database, then it returns that as an object observable so we can update the user interface asynchronously. Now we can start building the component. First, we define a variable for the user's mixed, and then we define another variable for the current translation, which is the observable returned to us from the service. Then we create a handle translation function that will trigger the entire process when the user submits their form from the template. I'm also creating a default message helper that will tell the user when the Cloud Function is running in the background. It'd be a good idea to replace this with a loading spinner or possibly a progress bar. In the template, we start by creating a text Daria. Then we use ng model to bind it to the user text variable that we defined in the TypeScript. Then we create a button and attach the click event to the handle translation function. Since our current translation isn't observable, we can use the async pipe to unwrap it asynchronously in the template. In this case, we use the question mark to safely access the attributes before they've been defined. Otherwise, an exception would be raised. And we also use the or operator to display the default message if the translation is undefined. Now we can start building the Cloud Function. If this is your first time using Cloud Functions in Angular, you'll need to run Firebase init from the command line. From there, we'll need to install the necessary packages in the Cloud Function environment. Uh, I'm using Lodash to make the JavaScript a little more readable and also using the request promise library to send the request to the Google Translate API. Make sure you're in the functions directory and then run npm install. In the index JS I'll we start by importing the necessary libraries. Then we run exports dot translate to name our actual cloud function. From there, we make a reference to the database location that we wanna trigger the function, then we call on right to run this callback whenever new data is added to the database at that particular location. Next, we create a promise for each language that we wanna translate. We build the promise by making a request to the Google Translate API through this URL here. The URL itself needs the source language, the target language, and the text itself. When we send the request, we need to make sure to resolve the promise with the full spawns. If we get a successful 200 response. We convert the response to JSON and then use the translated text as the data that we use to update Firebase. The final step is to update the Firebase database as an admin user. And if there's an error, we wanna throw that error to make sure it shows up in uh, Cloud Function Logs. If we go back into the app, now we can see that our data it's being updated, and we're getting translations back from the Cloud Function pretty quickly. Looks like about 300 milliseconds for the function to execute. That's it for this episode. If you found the video helpful, please like and subscribe. And if you wanna support the channel, consider becoming a pro subscriber at angularfirebase.com. For for just a few bucks a month, you'll get access to exclusive content as well as free 1 on 1 project consulting. Thanks for watching, and I'll see you next time.
In
in
this
this
episode,
episode
we're
we're
gonna
gonna
build
build
a
a
text
text
translation
translation
feature
feature
in
in
Angular
angular
4,
4
and
and
we're
we're
gonna
gonna
do
do
it
it
completely
completely
in
in
the
the
background
background
using
using
Firebase
firebase
Cloud
cloud
Functions
functions
and
and
the
the
Google
google
Translate
translate
API.
api
This
this
example
example
is
is
going
going
to
to
take
take
a
a
string
string
of
of
English
english
text
text
and
and
translate
translate
it
it
to
to
French,
french
Spanish,
spanish
and
and
Arabic.
arabic
We're
we're
able
able
to
to
make
make
this
this
work
work
using
using
the
the
on
on
write
write
callback
callback
from
from
the
the
Firebase
firebase
database,
database
which
which
will
will
trigger
trigger
a
a
Cloud
cloud
Function
function
that
that
handles
handles
the
the
entire
entire
translation
translation
process.
process
In
in
other
other
words,
words
we're
we're
gonna
gonna
build
build
a
a
microservice
microservice
specifically
specifically
for
for
translation,
translation
and
and
we're
we're
gonna
gonna
trigger
trigger
this
this
microservice
microservice
to
to
run
run
every
every
time
time
new
new
data
data
is
is
added
added
to
to
the
the
database.
database
The
the
first
first
step
step
is
is
to
to
model
model
the
the
data.
data
In
in
this
this
case,
case
we
we
just
just
have
have
a
a
collection
collection
of
of
translations
translations
and
and
each
each
translation
translation
has
has
a
a
set
set
of
of
key
key
value
value
pairs
pairs
where
where
the
the
key
key
is
is
the
the
language
language
and
and
the
the
value
value
is
is
the
the
translated
translated
text.
text
So
so
the
the
user
user
will
will
enter
enter
the
the
text
text
in
in
English,
english
and
and
then
then
the
the
Cloud
cloud
Function
function
will
will
write
write
the
the
data
data
in
in
every
every
other
other
language
language
that
that
we
we
wanna
wanna
translate.
translate
The
the
first
first
step
step
is
is
to
to
allow
allow
the
the
user
user
to
to
input
input
their
their
text
text
to
to
the
the
Firebase
firebase
database.
database
So
so
we'll
we'll
start
start
building
building
that
that
in
in
a
a
service.
service
The
the
service
service
only
only
needs
needs
one
one
function
function
called
called
create
create
translation.
translation
It
it
starts
starts
by
by
pushing
pushing
the
the
user
user
text
text
to
to
the
the
database,
database
then
then
it
it
returns
returns
that
that
as
as
an
an
object
object
observable
observable
so
so
we
we
can
can
update
update
the
the
user
user
interface
interface
asynchronously.
asynchronously
Now
now
we
we
can
can
start
start
building
building
the
the
component.
component
First,
first
we
we
define
define
a
a
variable
variable
for
for
the
the
user's
user's
mixed,
mixed
and
and
then
then
we
we
define
define
another
another
variable
variable
for
for
the
the
current
current
translation,
translation
which
which
is
is
the
the
observable
observable
returned
returned
to
to
us
us
from
from
the
the
service.
service
Then
then
we
we
create
create
a
a
handle
handle
translation
translation
function
function
that
that
will
will
trigger
trigger
the
the
entire
entire
process
process
when
when
the
the
user
user
submits
submits
their
their
form
form
from
from
the
the
template.
template
I'm
i'm
also
also
creating
creating
a
a
default
default
message
message
helper
helper
that
that
will
will
tell
tell
the
the
user
user
when
when
the
the
Cloud
cloud
Function
function
is
is
running
running
in
in
the
the
background.
background
It'd
it'd
be
be
a
a
good
good
idea
idea
to
to
replace
replace
this
this
with
with
a
a
loading
loading
spinner
spinner
or
or
possibly
possibly
a
a
progress
progress
bar.
bar
In
in
the
the
template,
template
we
we
start
start
by
by
creating
creating
a
a
text
text
Daria.
daria
Then
then
we
we
use
use
ng
ng
model
model
to
to
bind
bind
it
it
to
to
the
the
user
user
text
text
variable
variable
that
that
we
we
defined
defined
in
in
the
the
TypeScript.
typescript
Then
then
we
we
create
create
a
a
button
button
and
and
attach
attach
the
the
click
click
event
event
to
to
the
the
handle
handle
translation
translation
function.
function
Since
since
our
our
current
current
translation
translation
isn't
isn't
observable,
observable
we
we
can
can
use
use
the
the
async
async
pipe
pipe
to
to
unwrap
unwrap
it
it
asynchronously
asynchronously
in
in
the
the
template.
template
In
in
this
this
case,
case
we
we
use
use
the
the
question
question
mark
mark
to
to
safely
safely
access
access
the
the
attributes
attributes
before
before
they've
they've
been
been
defined.
defined
Otherwise,
otherwise
an
an
exception
exception
would
would
be
be
raised.
raised
And
and
we
we
also
also
use
use
the
the
or
or
operator
operator
to
to
display
display
the
the
default
default
message
message
if
if
the
the
translation
translation
is
is
undefined.
undefined
Now
now
we
we
can
can
start
start
building
building
the
the
Cloud
cloud
Function.
function
If
if
this
this
is
is
your
your
first
first
time
time
using
using
Cloud
cloud
Functions
functions
in
in
Angular,
angular
you'll
you'll
need
need
to
to
run
run
Firebase
firebase
init
init
from
from
the
the
command
command
line.
line
From
from
there,
there
we'll
we'll
need
need
to
to
install
install
the
the
necessary
necessary
packages
packages
in
in
the
the
Cloud
cloud
Function
function
environment.
environment
Uh,
uh
I'm
i'm
using
using
Lodash
lodash
to
to
make
make
the
the
JavaScript
javascript
a
a
little
little
more
more
readable
readable
and
and
also
also
using
using
the
the
request
request
promise
promise
library
library
to
to
send
send
the
the
request
request
to
to
the
the
Google
google
Translate
translate
API.
api
Make
make
sure
sure
you're
you're
in
in
the
the
functions
functions
directory
directory
and
and
then
then
run
run
npm
npm
install.
install
In
in
the
the
index
index
JS
js
I'll
i'll
we
we
start
start
by
by
importing
importing
the
the
necessary
necessary
libraries.
libraries
Then
then
we
we
run
run
exports
exports
dot
dot
translate
translate
to
to
name
name
our
our
actual
actual
cloud
cloud
function.
function
From
from
there,
there
we
we
make
make
a
a
reference
reference
to
to
the
the
database
database
location
location
that
that
we
we
wanna
wanna
trigger
trigger
the
the
function,
function
then
then
we
we
call
call
on
on
right
right
to
to
run
run
this
this
callback
callback
whenever
whenever
new
new
data
data
is
is
added
added
to
to
the
the
database
database
at
at
that
that
particular
particular
location.
location
Next,
next
we
we
create
create
a
a
promise
promise
for
for
each
each
language
language
that
that
we
we
wanna
wanna
translate.
translate
We
we
build
build
the
the
promise
promise
by
by
making
making
a
a
request
request
to
to
the
the
Google
google
Translate
translate
API
api
through
through
this
this
URL
url
here.
here
The
the
URL
url
itself
itself
needs
needs
the
the
source
source
language,
language
the
the
target
target
language,
language
and
and
the
the
text
text
itself.
itself
When
when
we
we
send
send
the
the
request,
request
we
we
need
need
to
to
make
make
sure
sure
to
to
resolve
resolve
the
the
promise
promise
with
with
the
the
full
full
spawns.
spawns
If
if
we
we
get
get
a
a
successful
successful
200
200
response.
response
We
we
convert
convert
the
the
response
response
to
to
JSON
json
and
and
then
then
use
use
the
the
translated
translated
text
text
as
as
the
the
data
data
that
that
we
we
use
use
to
to
update
update
Firebase.
firebase
The
the
final
final
step
step
is
is
to
to
update
update
the
the
Firebase
firebase
database
database
as
as
an
an
admin
admin
user.
user
And
and
if
if
there's
there's
an
an
error,
error
we
we
wanna
wanna
throw
throw
that
that
error
error
to
to
make
make
sure
sure
it
it
shows
shows
up
up
in
in
uh,
uh
Cloud
cloud
Function
function
Logs.
logs
If
if
we
we
go
go
back
back
into
into
the
the
app,
app
now
now
we
we
can
can
see
see
that
that
our
our
data
data
it's
it's
being
being
updated,
updated
and
and
we're
we're
getting
getting
translations
translations
back
back
from
from
the
the
Cloud
cloud
Function
function
pretty
pretty
quickly.
quickly
Looks
looks
like
like
about
about
300
300
milliseconds
milliseconds
for
for
the
the
function
function
to
to
execute.
execute
That's
that's
it
it
for
for
this
this
episode.
episode
If
if
you
you
found
found
the
the
video
video
helpful,
helpful
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
wanna
wanna
support
support
the
the
channel,
channel
consider
consider
becoming
becoming
a
a
pro
pro
subscriber
subscriber
at
at
angularfirebase.com.
angularfirebase.com
For
for
for
for
just
just
a
a
few
few
bucks
bucks
a
a
month,
month
you'll
you'll
get
get
access
access
to
to
exclusive
exclusive
content
content
as
as
well
well
as
as
free
free
1
1
on
on
1
1
project
project
consulting.
consulting
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
see
see
you
you
next
next
time.
time
success
The speaker explains how to use a text translation feature in Angular 4 to create a microservice specifically for translation. They discuss the process of creating a text Daria and triggering a callback from the Azure database. They also discuss updating the Azure database and updating the Cloud Function environment. The speaker recommends using the Cloud Function and mentions exclusive content and a free program for consulting.
Text Translation with Firebase Cloud Functions onWrite and Angular 4
https://angularfirebase.com/lessons/text-translator-with-firebase-cloud-functions-onwrite-and-angular/

Learn how to translate text in the cloud as a background task with Firebase Cloud Functions and Angular 4.