Week 3 - Githubissues

Google Translate API: Event Listener & Threads

Introduction to a new event listener and responding in threads.

If you missed the livestream or are unable to view the recording, here is a link to a written copy: https://github.com/bitprj/BitCamp/blob/master/Slack-Apps/week3/blog.md

During the livestream, you were introduced to two new concepts: a new event listener to emoji reactions and a new way of having your Slack App respond to a thread. In this issue, you will be incorportating these concepts as you integrate your Slack App with your first third party API, Google Translate!

Event Listeners

Before we introduce the Google Translate API, make sure you understand how the new event listener works as well as how to make your Slack App respond to a thread:

Emoji Reactions: https://api.slack.com/events/reaction_added

 app.event('reaction_added', async ({ event, client }) => {
 /* Listening for Reaction Emojis */
 });

Using app.event('reaction_added')acts as an event listener whenever a user responds to a message with a reaction (this can be any emoji ex: smile, heart, or even a flag!). We will be using the reaction_added event listener for our Slack App that translates a user's message to a language based on the nationality of the flag the user reacts to the message with.

const { reaction, user, item: { channel, ts } } = event;

Here, we are setting the reaction value to a constant in order to compare it to a list of languages. However, the names of some emojis don't exactly represent the language we need to translate to which is why we have to create a map of country codes corresponding with the APIs values. An example of this:

const langMap = {
      mx: ['es', 'Spanish'],
      es: ['es', 'Spanish'],
      ru: ['ru', 'Russian'],
      jp: ['ja', 'Japanese'],
    }

Using these two concepts, we need to create a segment of code that compares the name value of the flag to see whether the Google Translate API incorporates its value and if not, uses are map of country codes.

To do this, we will need to create a new constant called validFlag and compare it with our constant called reaction (which we set already) and test if reaction.includes ('flag-'). If it doesn't, we compare it to our language Map (const langMap). After, if reaction.includes ('flag-') we need to split the string into two parts by using reaction.split(-).

Now we would incorporate the Google Translate API but first we are going to write the code to send our translated text in a thread. To do so, we need to create a await client.chat.postMessage({ Edit Here });

Inside here, we are passing through a few things: channel, thread_ts, and text. In our const reaction we recorded the channel, and ts which we can pass through for the first and second argument. For our text argument, we need to pass through the translated message. We will finish this argument when we incorporate the Google Translate API!

Check out these helpful links:

Threads: https://api.slack.com/methods/chat.postMessage (sending messages, not recording) Reactions: https://api.slack.com/events/reaction_added (event listener)

If you have any further questions, please reach out to your mentors!

After you have finished, make sure to commit any file changes you made. To do this, please create a branch off of the master called week(x) with x being the # of the week you are on. For that week you will need to create a PR for every Learning Lab step to review and make sure your work is correct. For example: After finishing step 1.2, make a new branch off of week(x) and call it week(x)-1.2 (with 1.2 being the step you're on). Then create a Pull Request between week(x) and week(x)-1.2. After reviewing you're PR or having another user review it, merge you're work and continue.

REMINDER: If you are part of the MENTORED group, after you complete all steps within a certain week and followed the instructions above, create a Pull Request with your work from week(x) to master and assign your mentor as a reviewer. If you are an open-source user, do the same but self-review your PR to continue to the next week.

Google Translate API: Account & Credentials

Setting up a Google Developer Account and using the Translator.

After setting up our event listener and making our Slack App respond in a thread, it's finally time to to integrate the Google Translate API. Before we install the client libary and actually create the translation callback logic for our Slack App, we need to create an account and find our downloaded API token.

Creating an Account

To create a Google Developer Account, head to: https://cloud.google.com/translate/docs/ and click on Get Started for Free. Select your Country and accept the Terms of Service, then press Continue. Next, fill out the assigned textboxes and add a payment Note: you won't be charged unless you specfically add $ to your account, all free-trial accounts comes with 300$ of credit.

New Project

You should now be on the dashboard and your Google Developer Account is fully created. Cloud Translation, has two editions, a basic and advanced version. For our needs, choose the basic version (in the future, if you want to use the Google Translate API for more advanced options, you could use the advanced edition).

Then, click on the button labelled Create a New Project. To use services provided by Google Cloud, you must create a project. A project organizes all your Google Cloud resources. A project consists of a set of collaborators, enabled APIs (and other resources), monitoring tools, billing information, and authentication and access controls (here). Fill out the fields and continue.

Free Trial and Billing

You should now be at a screen asking you to enable billing for your new project. Although it asks you to enable billing, we are using the Google Developer Account (Free Trial) which gives you 300$ of credit to test and use Cloud Translation.

If you are having trouble with enabling the API, check this link: https://cloud.google.com/service-usage/docs/enable-disable.

Service Account Keys

When an identity calls an API, Google Cloud requires that the identity has the appropriate permissions. You can grant permissions by granting roles to a service account. To do this, we need to create and locate Service Keys. Follow these steps:

Go to Create Service Account Key page (here).
From the Service account list, select New service account.
In the service account name field, enter a name and set the role as Project Owner.
Then click Create, you should download a JSON file that contains your key downloads.

Providing OAUTH to Environment

Provide authentication credentials to your application code by setting the environment variable GOOGLE_APPLICATION_CREDENTIALS. Replace [PATH] with the file path of the JSON file that contains your service account key. This variable only applies to your current shell session, so if you open a new session, set the variable again.

Linux or macOS: export GOOGLE_APPLICATION_CREDENTIALS="[PATH]" Windows: $env:GOOGLE_APPLICATION_CREDENTIALS="[PATH]"

Installing Client Libraries

We're almost done! Lastly, we need to install the library by using npm install --save @google-cloud/translate in your NODEJS terminal. You should now have a new folder called node_modules.

You also need to create a new Translator by using the following:

Library: const { v2: { Translate } } = require('@google-cloud/translate'); Translator Object: const translator = new Translate();

If you have any questions, please reach out to your mentors or read the documentation here.

emsesc / slackapps2

Week 3 #11