Text Translation with Firebase Cloud Functions onWrite and Angular 4

Key Takeaways

in this episode we're going to build a text translation feature in angular 4 and we're going to 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 call back from the firebase database which will trigger a cloud function that handles the entire translation process in other words we're going to build a micro service specifically for translation and we're going to trigger this micro service 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 translation 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 at every other language that we want to translate the first step is to allow the user to input their tags 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 these or interface asynchronously [Music] now we can start building the component first we define a variable for the users text 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 and the template we start by creating a text area then we use ng model to bind it to the user text variable that we defined in the type script 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 that 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 in it from the command line from there we'll need to install the necessary packages in the cloud function environment I'm using lodash to make the java script 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 and the index.jsp file we start by importing the necessary libraries then we run exports translate to you name our actual cloud function from there we make a reference to the database location we want to trigger the function then we call on write 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 want to translate we build the promise by making a request for the Google Translate API through this URL here URL self 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 response if we get a successful 200 response we convert the response to JSON and then use the translated text is 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 want to throw that error to make sure it shows up in that cloud function logs if we go back into the app now we can see that our data is being updated and we're getting translations back from the cloud function pretty quickly looks like about 300 milliseconds for the function to execute [Music] that's it for this episode if you found the video helpful please like and subscribe and if you want to support the channel consider becoming a pro subscriber at angular firebase comm for just a few bucks a month you'll get access to exclusive content as well as free one-on-one project and Colton thanks for watching and I'll see you next time [Music]