Tutorial sugli strumenti di analisi integrati

con Amazon QuickSight

Modulo 5: API Gateway e pagine Web statiche

In questo modulo continueremo a configurare il portale Web.

Introduzione

In questo modulo continueremo a configurare il portale Web creando un'API Gateway per richiamare la funzione Lambda e scrivere e caricare la pagina statica HTML nel bucket S3.

Avrai modo di approfondire i seguenti aspetti

  • Creazione di un API Gateway, per richiamare le funzioni Lambda.
  • Creazione di una pagina Web statica

 Tempo richiesto per il completamento

20 minuti

 Servizi utilizzati

Implementazione

  • Creazione di API Gateway

    Successivamente configureremo un API Gateway per richiamare la funzione Lambda QSGetEmbedUrl.

    1. Avvia API Gateway e fai clic sul pulsante Crea API.

    114

    2. Scorri verso il basso fino a API REST e fai clic sul pulsante Crea.

    115

    3. Imposta il Nome API QSGetEmbedUrlApi e fai clic sul pulsante Crea API.

    116

    4. Fai clic sull'elenco a discesa Operazioni e seleziona l'opzione Crea risorsa.

    117

    5. Imposta i seguenti valori.
    Nome risorsa: GetEmbedUrl
    Abilita API Gateway CORS: selezionato
    Fai clic sul pulsante Crea risorsa

    118

    6. Fai clic sull'elenco a discesa Operazioni (con la risorsa getembedurl selezionata) e fai clic sull'opzione Crea metodo.

    119

    7. Seleziona GET dalla casella delle opzioni e fai clic sull'icona del segno di spunta.

    120

    8. Imposta i seguenti valori.
    Tipo di integrazione: Funzione Lambda
    Utilizza integrazione proxy Lambda: selezionato
    Funzione Lambda: QSGetEmbedUrl
    Fai clic sul pulsante Salva

    121

    9. Fai clic sul pulsante OK nella finestra di dialogo Aggiungi autorizzazione.

    122

    10. Fai clic sull'elenco a discesa Operazioni e seleziona l'opzione Distribuisci API.

    123

    11. Effettua le seguenti selezioni.
    Fase della distribuzione: seleziona [Nuova fase]
    Nome fase: test
    Fai clic sul pulsante Distribuisci

    124

    12. Salva l'URL di richiamo nel blocco note come URL API Gateway

    125
  • Creazione di una pagina Web statica

    Ora creeremo una pagina html statica e la caricheremo nel bucket S3.

    1. Copia il seguente codice html in un file e denominalo qsembed.html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <script type="text/javascript" src="https://unpkg.com/amazon-quicksight-embedding-sdk@1.0.2/dist/quicksight-embedding-js-sdk.min.js"></script>
        <title>Embedding demo</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script src="https://sdk.amazonaws.com/js/aws-sdk-2.517.0.min.js"></script>
        <style>
          iframe {border: 0;}
          body {margin:0;}
        </style>
        <script>
          var awsData = {
            dashboardId: '',
            dashboardRegion: '',
            apiGatewayUrl:'<apiGatewayUrl>?',
            cloudFrontUrl:'<cloudFrontUrl>',
            cognitoUrl:'<cognitoUrl>/login?client_id=<clientId>&response_type=token&scope=openid+profile&redirect_uri=<cloudFrontUrl>/qsembed.html',
            debug: false
          }
    
          $(document).ready(function () {
            document.getElementById('logo').src = awsData.cloudFrontUrl+'/logo.png'
            //On redirect from Cognito; Read out  state
            //Setting client and dashboard id in url is just for demo implementation.
            awsData.dashboardId = getParameterValues('dashboardid','?','&');
            awsData.dashboardRegion = getParameterValues('dashboardregion','?','&');
    
            //Get OpenIdToken
            var tokenPromise = getOpenIdToken();
    
            tokenPromise.then(function(idToken) {
              apiGatewayGetEmbedUrl(
                awsData.apiGatewayUrl,
                awsData.dashboardId,
                awsData.dashboardRegion,
                idToken
              );
            },
            function(err)
            {
                   console.log(err);
            });
          });
    
          function writeDebugInfo(debugInfo){
                  // console.log(debugInfo);
          }
    
          function getCookie(name) {
            var v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
            return v ? v[2] : null;
          }
    
          function setCookie(name, value) {
            document.cookie = name + "=" + value ;
          }
    
          function getParameterValues(param,slicer,delimiter) {
            var urlParms = window.location.href.slice(window.location.href.indexOf(slicer)+ slicer.length).split(delimiter);
            for (var i = 0; i < urlParms.length; i++) {
              var urlparm = urlParms[i].split('=');
              if (urlparm[0].toLowerCase() === param) {
                setCookie(param, decodeURIComponent(urlparm[1]));
                return decodeURIComponent(urlparm[1]);
              }
            }
              return getCookie(param);
          }
    
          function parseJwt (token) {
                 var base64Url = token.split('.')[1];
                var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
                var jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
                    return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
                }).join(''));
                return JSON.parse(jsonPayload);
            }
    
          //Redirect to Cognito if user is not Signed in.
          //Cognito will redirect back to this page and then the promise will be resolved.
          function getOpenIdToken(){
            return new Promise(function(resolve,reject) {
                writeDebugInfo('In getOpenIdToken func');
                var idToken = getParameterValues('id_token','#','&');
                if (idToken ) {
              writeDebugInfo('Token found');
                }
                else {
                    writeDebugInfo('Token not found, Redirecting to Cognito');
                    window.location.href = awsData.cognitoUrl;
                }
    
            resolve(idToken);
            });
          }
    
          //Make APIGateway call to generate the embed url.
          function apiGatewayGetEmbedUrl(
            apiGatewayUrl,
            dashboardId,
            dashboardRegion,
            openIdToken
            ) {
            const parameters = {
                dashboardId: dashboardId,
                dashboardRegion: dashboardRegion,
                openIdToken: openIdToken
            }
    
            const myQueryString = $.param(parameters);
            apiGatewayUrl = apiGatewayUrl + myQueryString;
    
            const headers = { 'Content-Type' : 'application/json' }
    
            axios.get(apiGatewayUrl, { headers: headers})
              .then((response) => {
                  embedDashboard(response.data.EmbedUrl);;
              })
              .catch(function (error) {
                      writeDebugInfo(error);
                      console.log('Error obtaining QuickSight dashboard embed url.');
              });
          }
    
          //Embed the generated url into the div identified to hold the dashboard.
          function embedDashboard(embedUrl) {
              var containerDiv = document.getElementById("dashboardContainer");
              var params = {
                      url: embedUrl,
                      container: containerDiv,
                      width:"100%",
                      height:"1000px"
              };
              var dashboard = QuickSightEmbedding.embedDashboard(params);
          }
    
        </script>
      </head>
      <body>
        <div><img id='logo' src="" style="height:50px;margin-top: 10px;margin-left: 10px;padding-bottom: 10px;" /></div>
        <div id="dashboardContainer"></div>
      </body>
    </html>
    

    2. Sostituisci le seguenti stringe all'interno del file. (Utilizza l'opzione Sostituisci tutto)
    <apiGatewayUrl>: URL API Gateway/getembedurl
    <cognitoUrl>: https://qseAwsAccountId.auth.us-east-1.amazoncognito.com
    <clientId>: ID client app Cognito salvato nel blocco note
    <cloudfrontUrl>: https://CloudFront Domain Name salvato nel blocco note

    3. Fai clic con il tasto destro del mouse sul seguente logo AWS e salvalo come logo.png
    (oppure utilizza un file di logo personale denominato logo.png)

    131

    4. Avvia S3, cerca qseAwsAccountId e fai clic sul nome del bucket.

    132

    5. Fai clic sul pulsante Carica.

    133

    6. Aggiungi qsembed.html e logo.png e fai clic sul pulsante Carica.

    134

Conclusione

Hai completato correttamente il Modulo 5. Successivamente, configureremo utente e dominio nel Modulo 6.

Questo modulo è stato utile?

Configurazione dell'utente e del dominio QuickSight