Deploy a RESTful API

In this module, you will use Amazon API Gateway to expose the Lambda function as a RESTful API.

Create a new REST API

In the Amazon API Gateway console, select APIs.

Choose the Build option for REST API.

Select New API.

Add the API name as WildRydes.

Select the API endpoint type as Edge-optimized.

Click Create API

Create authorizer

In this section, we will be creating an Authorizer for the API, so we can make use of the user pool created in Cognito.

In the left navigation pane, select Authorizers.

Click Create an authorizer.

Enter WildRydes into the Authorizer Name field.

Select Cognito as the Authorizer type.

Enter WildRydes in the Cognito User Pool name field.

Enter Authorization for the Token Source.

Click Create authorizer.

From the Authorizers page, select WildRydes.

Click Test authorizer.

Paste the Authorization Token obtained after successful sign in to the application. Verify the Response code is 200 and the Claims are displayed.

Create a new resource and method

In the left navigation pane of the WildRydes API, select Resources.

Select Create Resource.

Enter ride as the Resource Name, which will automatically create the Resource Path /ride.

Select the checkbox for CORS (Cross Origin Resource Sharing).

Click Create Resource.

Click Create Method.

Select Method type as POST.

Select Integration Type as Lambda function.

Toggle the Lambda proxy integration to ON.

Choose RequestUnicorn as the Lambda function.

Click Create method.

Select Method request.

In the Method request settings, Click Edit.

In the Authorization dropdown, select WildRydes.

Click Save.

Deploy your API

Click Deploy API.

Select New stage in the Stage dropdown.

Add prod as the Stage Name.

Click Deploy.

Copy and make a record of the Invoke URL.

Example of an Invoke URL

https://rwvn0g0pll.execute-api.ap-south-1.amazonaws.com/prod

Update the website config

Navigate to the js folder, and open the config.js file.

Populate the invokeUrl field.

Add, commit and Push the updated config.js file to Git.

git add js/config.js
git commit -m "Added API Gateway config."
git push

This will trigger a deployment in Amplify.

Validate your implementation

In the ride.html file, change the ArcGIS JS version from 4.3 to 4.6 as follows:

<script src="https://js.arcgis.com/4.6/"></script>
<link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">

Add, Commit and Push the file.

git add ride.html
git commit -m "Upgraded ArcGIS to 4.6"
git push

A deployment will be triggered in Amplify.

Visit /ride.html under your website domain.

After the map has loaded, click anywhere on the map to set a pickup location.

Choose Request Unicorn. You should see a notification in the right sidebar that a unicorn is on its way and then see a unicorn icon fly to your pickup location.