Implementation

• Create a New REST API

  a. In the AWS Management Console, click Services then select API Gateway under Application Services.
  b. Choose Create API. Underneath the Create new API section, make sure New API is selected.
  c. Select Build under REST API and enter WildRydes for the API Name.
  d. Choose Edge optimized in the Endpoint Type dropdown. Note: Edge optimized are best for public services being accessed from the Internet. Regional endpoints are typically used for APIs that are accessed primarily from within the same AWS Region.
  e. Choose Create API

• Create a new resource and method

  Create a new resource called /ride within your API. Then create a POST method for that resource and configure it to use a Lambda proxy integration backed by the RequestUnicorn function you created in the first step of this module.

  a. In the left nav, click on Resources under your WildRydes API.

  b. From the Actions dropdown select Create Resource.

  c. Enter ride as the Resource Name.

  d. Ensure the Resource Path is set to ride.

  e. Select Enable API Gateway CORS for the resource.

  f. Click Create Resource.

  g. With the newly created /ride resource selected, from the Action dropdown select Create Method.

  h. Select POST from the new dropdown that appears, then click the checkmark.

  i. Select Lambda Function for the integration type.

  j. Check the box for Use Lambda Proxy integration.

  k. Select the Region you are using for Lambda Region.

  l. Enter the name of the function you created in the previous module, RequestUnicorn, for Lambda Function.

  m. Choose Save. Please note, if you get an error that your function does not exist, check that the region you selected matches the one you used in the previous module.

  n. When prompted to give Amazon API Gateway permission to invoke your function, choose OK.

  o. Choose on the Method Request card.

  p. Choose the pencil icon next to Authorization.

  q. Select the WildRydes Cognito user pool authorizer from the drop-down list, and click the checkmark icon.

• Deploy Your API

  From the Amazon API Gateway console, choose Actions, Deploy API. You'll be prompted to create a new stage. You can use prod for the stage name.

  a. In the Actions drop-down list select Deploy API.
  b. Select [New Stage] in the Deployment stage drop-down list.
  c. Enter prod for the Stage Name.
  d. Choose Deploy.
  e. Note the Invoke URL. You will use it in the next section.
  

• Update the Website Config

  Update the /js/config.js file in your website deployment to include the invoke URL of the stage you just created. You should copy the invoke URL directly from the top of the stage editor page on the Amazon API Gateway console and paste it into the _config.api.invokeUrl key of your sites /js/config.js file. Make sure when you update the config file it still contains the updates you made in the previous module for your Cognito user pool.

  a. Open the config.js file in a text editor.
  b. Update the invokeUrl setting under the api key in the config.js file. Set the value to the Invoke URL for the deployment stage your created in the previous section.

  An example of a complete config.js file is included below. Note, the actual values in your file will be different.
  

  window._config = {
  
      cognito: {
  
          userPoolId: 'us-west-2_uXboG5pAb', // e.g. us-east-2_uXboG5pAb         
  
          userPoolClientId: '25ddkmj4v6hfsfvruhpfi7n4hv', // e.g. 25ddkmj4v6hfsfvruhpfi7n4hv
  
          region: 'us-west-2' // e.g. us-east-2 
  
      }, 
  
      api: { 
  
          invokeUrl: 'https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod, 
  
      } 
  
  };

  Code snippet copied

  Copy

  c. Save the modified file and push it to your Git repository to have it automatically deploy to Amplify Console.

  $ git add .
  $ git commit -m "new_configuration"
  $ git push
  

  Code snippet copied

  Copy
• Validate your implementation

  Note: It is possible that you will see a delay between updating the config.js file in your S3 bucket and when the updated content is visible in your browser. You should also ensure that you clear your browser cache before executing the following steps.

  a. Update the ArcGIS JS version from 4.3 to 4.6 (newer versions will not work in this tutorial) in the ride.html file as:
  

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

  Code snippet copied

  Copy

  An example of a complete ride.html file is included below. Note, some values in your file may be different.

  <div id="noApiMessage" class="configMessage" style="display: none;">
          <div class="backdrop"></div>
          <div class="panel panel-default">
              <div class="panel-heading">
                  <h3 class="panel-title">Successfully Authenticated!</h3>
              </div>
              <div class="panel-body">
                  <p>This page is not functional yet because there is no API invoke URL configured in <a href="/js/config.js">/js/config.js</a>. You'll configure this in Module 3.</p>
                  <p>In the meantime, if you'd like to test the Amazon Cognito user pool authorizer for your API, use the auth token below:</p>
                  <textarea class="authToken"></textarea>
              </div>
          </div>
      </div>
  
      <div id="noCognitoMessage" class="configMessage" style="display: none;">
          <div class="backdrop"></div>
          <div class="panel panel-default">
              <div class="panel-heading">
                  <h3 class="panel-title">No Cognito User Pool Configured</h3>
              </div>
              <div class="panel-body">
                  <p>There is no user pool configured in <a href="/js/config.js">/js/config.js</a>. You'll configure this in Module 2 of the workshop.</p>
              </div>
          </div>
      </div>
  
      <div id="main">
          <div id="map">
          </div>
      </div>
  
      <div id="authTokenModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="authToken">
          <div class="modal-dialog" role="document">
              <div class="modal-content">
                  <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      <h4 class="modal-title" id="myModalLabel">Your Auth Token</h4>
                  </div>
                  <div class="modal-body">
                      <textarea class="authToken"></textarea>
                  </div>
                  <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  </div>
              </div>
          </div>
      </div>
  
  
      <script src="js/vendor/jquery-3.1.0.js"></script>
      <script src="js/vendor/bootstrap.min.js"></script>
      <script src="js/vendor/aws-cognito-sdk.min.js"></script>
      <script src="js/vendor/amazon-cognito-identity.min.js"></script>
      <script src="https://js.arcgis.com/4.6/"></script>
      <script src="js/config.js"></script>
      <script src="js/cognito-auth.js"></script>
      <script src="js/esri-map.js"></script>
      <script src="js/ride.js"></script>
  </body>
  
  </html>

  Code snippet copied

  Copy

  b. Save the modified file and push it to your Git repository to have it automatically deploy to Amplify Console.

  c. Visit /ride.html under your website domain.
  d. If you are redirected to the ArcGIS sign-in page, sign in with the user credentials you created previously in the Introduction section as a prerequisite of this tutorial.
  e. After the map has loaded, click anywhere on the map to set a pickup location.
  f. 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.