Enough talking, let’s get building!

React Native app

The React Native app is really made up of a single component. This component handles all of the functionality:

Handling user text input and saving to the state Handling language input type and saving to the state Sending GraphQL queries to an API & handling response Playing audio based on GraphQL API response

The dependencies we’re using are:

To follow along, you can clone the repo:

You can also view the App.js containing all of the functionality at this gist.

Once you’ve downloaded the project, install the dependencies:

yarn || npm install

Creating the S3 bucket

Because this app will be creating MP3s with the translations we will be using, we will need to have an S3 bucket to hold these MP3s.

To create the S3 bucket do the following:

Visit https://s3.console.aws.amazon.com/ and click Create bucket Give the bucket a name and choose defaults for all other options Update line 46 in App.js to use the bucket name you just created (replace YOURBUCKETNAME ):

const mp3Url = `https://s3.amazonaws.com/YOURBUCKETNAME/${sentence}

Building the Lambda function

Adding & configuring the Lambda function

Now that the React Native project is downloaded, we’ll create the Lambda function.

The Lambda function is where we see most of the action happen! The function takes the user’s sentence & preferred language, translates it, synthesizes it to real speech in the form of an MP3, stores the MP3 in and S3 bucket, then returns the key so we can identify the MP3 and play it back in the app!

In the AWS dashboard, go to the AWS Lambda console Create a new function by clicking on Create Function Give the function a name, choose the runtime as Node.js 8.10, choose Create a custom role for the role, give the role a name of lambda_ai_role & click Allow. Click Create Function Next, we need to add permissions to the Lambda function in order to access other services (such as S3, Polly, & Translate). To do so, go to the IAM console, go to Roles, find & choose the lambda_ai_role, and add the following policies:

AmazonS3FullAccess

AmazonPollyFullAccess

TranslateReadOnly

Your lambda_ai_role summary should now look like this: