Implementazione

• Creazione di una nuova REST API
  1. Nella console Gateway Amazon API, seleziona API nel riquadro di navigazione a sinistra. 
  2. Scegli Crea in REST API. 
  3. Nella sezione Scegli il protocollo, seleziona REST. 
  4. Nella sezione Crea nuova API, seleziona Nuova API.
  5. Nella sezione Impostazioni, inserisci WildRydes per il nome dell'API e seleziona Ottimizzato per l’edge nel menu a discesa Tipo di endpoint.
     Nota: utilizza i tipi di endpoint ottimizzati per l’edge per i servizi pubblici accessibili tramite Internet. Gli endpoint regionali in genere vengono utilizzati per le API a cui si accedere principalmente dalla stessa regione AWS.
  6. Scegli Crea API.
• Creazione di un autorizzatore

  È necessario creare un autorizzatore dei pool di utenti di Amazon Cognito. Gateway Amazon API utilizza token Web JSON (JWT), che vengono restituiti dal pool di utenti di Amazon Cognito (creato nel Modulo 2) per autenticare le chiamate API. In questa sezione, creeremo un autorizzatore per l'API, in modo da poter utilizzare il pool di utenti.

  Utilizza i seguenti passaggi per configurare l'autorizzatore nella console di Gateway Amazon API:

  1. Nel riquadro di navigazione a sinistra dell'API WildRydes che hai appena creato, seleziona Autorizzatori.
  2. Seleziona Crea nuovo autorizzatore. 
  3. Inserisci WildRydes nel campo Nome dell'autorizzatore.
  4. Seleziona Cognito come Tipo. 
  5. In Pool di utenti Cognito, nel menu a discesa Regione, seleziona la stessa Regione che hai utilizzato per il resto del tutorial. Inserisci WildRydes nel campo del nome del pool di utenti di Cognito.
  6. Immetti Autorizzazione come Origine token. 
  7. Scegli Crea.
  8. Per verificare la configurazione dell'autorizzatore, seleziona Test. 
  9. Incolla il token di autorizzazione copiato dalla pagina Web ride.html nella sezione Convalida la tua implementazione del Modulo 2 nel campo Autorizzazione (intestazione) e verifica che il codice di risposta dello stato HTTP sia 200. 

   

   

• Creazione di una nuova risorsa e di un nuovo metodo

  In questa sezione creerai una nuova risorsa all'interno della tua API. Quindi crea un metodo POST per quella risorsa e configuralo per utilizzare un'integrazione del proxy Lambda supportata dalla funzione RequestUnicorn creata nel primo passaggio di questo modulo.

  1. Nel riquadro di navigazione a sinistra dell'API WildRydes, seleziona Risorse.
  2. Nel menu a discesa Operazioni scegli Crea risorsa.
  3. Inserisci ride come nome della risorsa, che creerà automaticamente il percorso della risorsa /ride.
  4. Seleziona la casella di controllo Abilita CORS per Gateway API.
  5. Scegli Crea risorsa.
  6. Con la risorsa /ride selezionata appena creata, dal menu a discesa Operazioni seleziona Crea metodo.
  7. Seleziona POST dal nuovo menu a discesa visualizzato in OPZIONI, quindi seleziona l'icona del segno di spunta.
  8. Seleziona Funzione Lambda per Tipo di integrazione.
  9. Seleziona la casella di controllo per Usa integrazione del proxy Lambda.
  10. Seleziona la stessa Regione che hai utilizzato durante il tutorial per Regione Lambda.
  11. Inserisci RequestUnicorn per Funzione Lambda.
  12. Scegli Salva.
      Nota: se si verifica un errore che segnala che la funzione non esiste, verificare che la regione selezionata corrisponda a quella utilizzata nel modulo precedente.
  13. Quando viene richiesto di autorizzare Gateway Amazon API a richiamare la funzione, seleziona OK.
  14. Seleziona la scheda Richiesta metodo.
  15. Selezionare l'icona della matita accanto a Autorizzazione.
  16. Seleziona l'autorizzatore WildRydes del pool di utenti di Cognito dall'elenco a discesa e fai clic sull'icona con il segno di spunta.
• Implementazione dell'API.

  In questa sezione implementerai la tua API dalla console Gateway Amazon API. 

  1. Nell'elenco a discesa Operazioni, seleziona Implementa API.
  2. Seleziona Nuova fase nell'elenco a discesa Fase implementazione.
  3. Immetti prod per Nome fase.
  4. Scegli Implementa.
  5. Copia l’URL della chiamata. Verrà utilizzato nella sezione successiva.
     
• Aggiornamento della configurazione del sito Web

  In questa fase, aggiornerai il file /js/config.js nell’implementazione del sito Web in modo da includere l'URL di chiamata della fase appena creata. Copierai l'URL di chiamata direttamente dalla parte superiore della pagina dell'editor di fasi nella console di Gateway Amazon API e lo incollerai nella chiave invokeUrl del file config.js del sito. Il file di configurazione conterrà comunque gli aggiornamenti apportati nel modulo precedente per userPoolID, userPoolClientID e region di Amazon Cognito.

  1. Sul computer locale, passa alla cartella js e apri il file config.js in un editor di testo di tua scelta
  2. Incolla l'URL della chiamata che hai copiato dalla console di Gateway Amazon API nella sezione precedente nel valore invokeUrl del file config.js. 
  3. Salva il file.

  Guarda il seguente esempio di un file config.js completato. Tieni presente che i valori reali del file saranno diversi:
  

  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

  Copia

      3. Aggiungi, esegui il commit e invia il file config.js aggiornato al tuo repository Git per implementarlo automaticamente nella console Amplify.

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

  Code snippet copied

  Copia
• Convalida dell'implementazione

  Nota: è possibile che si verifichi un ritardo tra l'aggiornamento del file config.js nel bucket S3 e il momento in cui il contenuto aggiornato è visibile nel browser. Devi inoltre assicurarti di svuotare la cache del browser prima di eseguire le seguenti fasi.

  1. Aggiorna la versione JS di ArcGIS dalla 4.3 alla 4.6 (le versioni più recenti non funzioneranno in questo tutorial) nel file ride.html come:
     

  <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

  Copia

  Di seguito è disponibile un esempio di file ride.html completo. Tieni presente che alcuni valori nel tuo file potrebbero essere diversi.

  <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

  Copia

  2. Salva il file modificato. Aggiungi, esegui il commit e avvia git push perché il repository Git lo implementi automaticamente nella console AWS Amplify.

      3. Consulta /ride.html nel dominio del sito Web.

      4. Se vieni reindirizzato alla pagina di accesso di ArcGIS, accedi con le credenziali utente create in precedenza nella sezione Introduzione come prerequisito di questo tutorial.

      5. Una volta caricata la mappa, fai clic su un punto qualsiasi per impostare una posizione di incontro.

      6. Seleziona Richiedi Unicorno. Dovrebbe essere visualizzata una notifica nella barra laterale destra che informa dell'arrivo di un unicorno e quindi l'icona dell'unicorno che vola fino al punto di incontro.