Implementação

• Criar uma nova API REST
  1. No console do Amazon API Gateway, selecione APIs no painel de navegação esquerdo. 
  2. Em API REST, escolha Compilar.
  3. Na seção Escolha o protocolo, selecione REST. 
  4. Na seção Criar nova API, selecione API nova.
  5. Na seção Configurações, insira WildRydes como Nome da API e selecione Otimizado para a borda no menu suspenso Tipo de endpoint.
     Observação: use os tipos de endpoint otimizado para borda para serviços públicos acessados da Internet. Normalmente, os endpoints regionais são usados para APIs acessadas principalmente de dentro da mesma região da AWS.
  6. Escolha Criar API.
• Criar autorizador

  Você deve criar um Autorizador de grupos de usuários do Amazon Cognito. O Amazon API Gateway usa tokens Web JSON (JWT), que são retornados pelo grupo de usuários do Amazon Cognito (criado no Módulo 2) para autenticar as chamadas de API. Nesta seção, criaremos um Autorizador para a API, para que possamos usar o grupo de usuários.

  Use as seguintes etapas para configurar o Autorizador no console do Amazon API Gateway:

  1. No painel de navegação esquerdo da API WildRydes que você acabou de criar, selecione Autorizadores.
  2. Selecione Criar novo autorizador. 
  3. Insira WildRydes no campo Nome do Autorizador.
  4. Selecione Cognito como o Tipo. 
  5. Em Grupo de usuários do Cognito, no menu suspenso Região, selecione a mesma região que você usou no restante do tutorial. Insira WildRydes no campo de nome do Grupo de usuários do Cognito. 
  6. Insira Autorização para a Origem do token. 
  7. Escolha Criar.
  8. Para verificar a configuração do autorizador, selecione Testar. 
  9. Cole o Token de Autorização copiado da página da Web ride.html na seção Validar sua implementação do Módulo 2 no campo Autorização (cabeçalho) e verifique se o código de resposta do status HTTP é 200. 

   

   

• Criar um novo recurso e método

  Nesta seção, você criará um novo recurso na sua API. Então, crie um método POST para esse recurso e configure-o para usar uma integração de proxy do Lambda baseada na função RequestUnicorn criada na primeira etapa deste módulo.

  1. No painel de navegação esquerdo da sua API WildRydes, selecione Recursos.
  2. No menu suspenso Ações, selecione Criar recurso.
  3. Insira  ride como o Nome do recurso, que criará automaticamente o Caminho do recurso /ride.
  4. Marque a caixa de seleção Ativar CORS do API Gateway.
  5. Escolha Criar recurso.
  6. Com o recurso /ride recém-criado selecionado, na lista suspensa Ações, selecione Criar método.
  7. Selecione POST na nova lista suspensa que aparece em OPÇÕES e, em seguida, selecione o ícone de marca de seleção.
  8. Selecione Função Lambda como Tipo de integração.
  9. Marque a caixa de seleção Usar a integração do Lambda Proxy.
  10. Selecione a mesma região que você usou durante todo o tutorial para a Região do Lambda.
  11. Insira RequestUnicorn para a Função do Lambda.
  12. Escolha Salvar.
      Observação: se você receber um erro informando que a função não existe, verifique se a região selecionada corresponde à que você usou no módulo anterior.
  13. Quando for solicitado a conceder permissão para o Amazon API Gateway invocar sua função, selecione OK.
  14. Selecione o cartão Solicitação de método.
  15. Selecione o ícone de lápis ao lado de Autorização.
  16. Selecione o autorizador do grupo de usuários WildRydes do Cognito na lista vertical e clique no ícone de marca de seleção.
• Implantar a API

  Nesta seção, você implantará sua API pelo console do Amazon API Gateway. 

  1. Na lista suspensa Ações, selecione Implantar API.
  2. Selecione [Novo estágio] na lista suspensa Estágio de implantação.
  3. Insira prod como o Nome do estágio.
  4. Escolha Implantar.
  5. Copie o URL de invocação. Você vai usá-lo na próxima seção.
     
• Atualizar a configuração do site

  Nesta etapa, você atualizará o arquivo /js/config.js na implantação do site para incluir o URL de invocação do estágio que você acabou de criar. Você copiará o URL de invocação diretamente da parte superior da página do editor de estágio no console do Amazon API Gateway e colá-lo no chave invokeUrl do arquivo config.js do seu site. Seu arquivo de configuração ainda conterá as atualizações feitas no módulo anterior para seu UserPoolID, UserPoolClientID e região do Amazon Cognito.

  1. Em sua máquina local, navegue até a pasta js e abra o arquivo config.js em um editor de texto de sua escolha
  2. Cole o URL de invocação que você copiou do console do Amazon API Gateway na seção anterior no valor invokeUrl do arquivo config.js. 
  3. Salve o arquivo.

  Veja o exemplo a seguir de um arquivo config.js completo. Os valores reais do seu arquivo serão diferentes.
  

  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

  Copiar

      3. Adicione, confirme e envie o arquivo config.js atualizado para seu repositório Git para que ele seja implantado automaticamente no console do Amplify.

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

  Code snippet copied

  Copiar
• Validar sua implementação

  Observação: é possível que você veja um atraso entre o momento em que é feita a atualização do arquivo config.js no bucket do S3 e o momento em que o conteúdo atualizado fica visível no navegador. Você também deve limpar o cache do navegador antes de executar as etapas a seguir.

  1. Atualize a versão do ArcGIS JS de 4.3 para 4.6 (as versões mais recentes não funcionarão neste tutorial) no arquivo ride.html como:
     

  <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

  Copiar

  Um exemplo de um arquivo ride.html concluído pode ser visto abaixo. Observe que alguns valores em seu arquivo podem ser diferentes.

  <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

  Copiar

  2. Salve o arquivo modificado. Adicione, confirme e envie por git para seu repositório Git para que seja implantado automaticamente no console do AWS Amplify.

      3. Acesse /ride.html no domínio do seu site.

      4. Se você for redirecionado para a página de entrada do ArcGIS, entre com as credenciais do usuário que você criou anteriormente na seção Introdução como um pré-requisito deste tutorial.

      5. Depois que o mapa for carregado, clique em qualquer lugar dele para definir um local de partida.

      6. Selecione Solicitar Unicorn. Você verá uma notificação na barra lateral direita informando que um unicórnio está a caminho e, então, verá o ícone de um unicórnio voando até o local de partida.