Build a serverless application with React Native and AWS (P2)

In the previous section we learned how to install AWS and use AWS’s built-in user authentication, in this section we will learn some more interesting mechanisms of AWS.

Analytic

Analytic events can be tracked using the Analytics class

We can call this event with more detailed properties:

To view analytic data, we can go to the AWS Mobile Hub project in the console, by clicking Resources in the upper right corner and selecting Pinpoint and clicking on your service.

Storage

Amplify has a Storage class that allows interaction with React Native to make storing and accessing image, video files easier, and more seamless with Amazon S3.

We can open the storage function in AWS Mobile Hub from the command line:

We can now use the Storage class from within the app:

We save the data into storage as follows:

And read it from storage:

We can save media files easily into storage (assuming you have installed react-native-fetch-blob ).

To see the S3 bucket, we run the awsmobile console command then click on Resources and under Amazon S3 Buckets click on userfiles .

Lambda Functions

When you hear the word “Serverless”, you will immediately think of the Lambda function. We can install one of them directly and connect it to one of AWS Amplify’s resources, or use the AWS Moible CLI to install it for us. Let’s start using CLI to create the Lambda function.

To add a configured Lambda, run the following command:

awsmobile cloud-api enable will automatically create an API in the API Gateway along with the Lambda function and reconnect them.

Now let’s look inside the project, in awsmobilejs / backend / cloud-api to see a new configuration. There will be a newly created folder named sampleLambda that holds the new Lambda function that has been implemented for us.

The Lambda function was created for us using the AWS Serverless Express package to connect the express server to customized endpoints. These endpoints can be updated in local code and pushed to the server by using awsmobile push .

Update the app.get function in the items directory located in awsmobilejs / backend / cloud-api / sampleLambda :

Then push this API to the AWS Mobile Hub project:

awsmobile push

Now open the AWS Mobile Hub console to get the API name:

awsmobile console

Click on Cloud Logic and copy the API name (my sampleCloudApi is sampleCloudApi ).

Now we will check in the Lambda function. In App.js , create a new componentDidMount function.

Manage API and Data tier

AWS Amplify offers a client called GraphQL that can work with any GraphQL API. In our case, let’s look at AWS AppSync, which is managed by the GraphQL service.

With AWS AppSync , you can have a GraphQL API interact with any data source you want. There are many sources of data built underground such as Amazon DynamoDB, AWS Lambda Function or Amazon Elasticsearch, with a Lambd function, you can access any service or database that you want seamlessly with only one API layer. GraphQL is in the shape of your AppSync API.

We will go into an example that is making a Todo app.

To get started, click https://console.aws.amazon.com/appsync and then click on CREATE API .

From here, name this API and choose Custom Schema , then click Create .

Now the API has been created and we will add some information such as URL and Key.

Click on Schema in the left menu as follows:

Click on Save and click on Create Resources .

Create Resources will automatically configure a DynamoDB database, adding to the GraphQL Schema for many processes including queries, mutations, subscriptions, and resolvers that connect the GraphQL process to the data source.

Next, click on Queries in the left menu to test mutation and query to make sure everything works.

Now test this API from the client. First, we need to update the configure to identify the AppSync API.

Create a file named appsync-config.js in root:

Next is the Amplify client. Please update it to recognize AppSync’s configuration.

Now we can easily create and execute the process with the following API: In App.js, add the following query:

Push Notification

Installing Push Notification takes more time than any other type of service because it requires services from Apple and Google. The specific settings you can see here: iOS , Android .

In our project just as follows:

Thank you for reading, wish you success.

REF: https://medium.com/react-native-training/building-serverless-mobile-applications-with-react-native-aws-740ecf719fce