Tutorial sobre análisis integrado

con Amazon QuickSight

Módulo cinco: API Gateway y página web estática

En este tutorial seguiremos con la configuración del portal web.

Introducción

En este módulo, seguiremos con la configuración del portal web al crear una API Gateway para invocar la función de Lambda y escribir y cargar la página estática HTML en el bucket de S3.

Lo que aprenderá

  • Crear una API Gateway para invocar funciones de Lambda.
  • Crear una página web estática

 Tiempo de realización

20 minutos

 Servicios utilizados

Implementación

  • Crear una API Gateway

    Vamos a configurar una API Gateway para invocar la función Lambda QSGetEmbedUrl.

    1. Inicie API Gateway y haga clic en el botón Create API (Crear API).

    114

    2. Deslice hacia abajo hasta API REST y haga clic en el botón Build (Crear).

    115

    3. Configure el nombre de la API como QSGetEmbedUrlApi y haga clic en el botón Create API (Crear API).

    116

    4. Hace clic en el botón desplegable Actions (Acciones) y haga clic en la opción Create Resource (Crear recurso).

    117

    5. Configure los siguientes valores.
    Nombre del recurso: GetEmbedUrl
    Habilitar CORS en API Gateway: Checked (Verificado)
    Haga clic en el botón Create Resource (Crear recurso).

    118

    6. Haga clic en el botón desplegable Actions (Acciones), con el recurso getembedurl seleccionado, y haga clic en el la opción Create Method (Crear método).

    119

    7. Seleccione GET de la casilla de opciones y haga clic el icono de marca de verificación.

    120

    8. Configure los siguientes valores.
    Tipo de integración: Función Lambda
    Usar integración de proxy de Lambda: Checked (Verificado)
    Función Lambda: QSGetEmbedUrl
    Haga clic en el botón Save (Guardar)
    .

    121

    9. Haga clic en el botón OK en el cuadro de diálogo Add Permission (Agregar permiso).

    122

    10. Haga clic en el botón desplegable Actions (Acciones) y haga clic en la opción Deploy API (Implementar API).

    123

    11. Seleccione las siguientes opciones.
    Etapa de implementación: Seleccione [New Stage] (Nueva etapa)
    Nombre de etapa: prueba
    Haga clic en el botón Deploy (Implementar)

    124

    12. Guarde el URL invocado en su bloc de notas como API Gateway URL

    125
  • Crear una página web estática

    Ahora crearemos una página html estática y la cargaremos a nuestro bucket S3.

    1. Copie el siguiente código html en un archivo y nómbrelo 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. Reemplace las siguientes cadenas en el archivo. (Use reemplazar todas las opciones)
    <apiGatewayUrl>: API Gateway URL/getembedurl
    <cognitoUrl>: https://qseAwsAccountId.auth.us-east-1.amazoncognito.com
    <clientId>: ID del cliente de la aplicación Cognito guardado en el bloc de notas
    <cloudfrontUrl>: https://Nombre del dominio CloudFront guardado en el bloc de notas

    3. Haga clic derecho en el siguiente logotipo de AWS y guárdelo como logo.png
    (o utilice su propio archivo de logotipo llamado logo.png)

    131

    4. Inicie S3, busque qseAwsAccountId y haga clic en el nombre del bucket.

    132

    5. Haga clic en el botón Upload (Cargar).

    133

    6. Agregue qsembed.html y logo.png y haga clic en el botón Upload (Cargar).

    134

Conclusión

¡Completó correctamente el módulo cinco! Ahora, vamos a trabajar en el módulo seis con la configuración del usuario y el dominio.

¿Este módulo le resultó útil?

Configuración del usuario y el dominio de QuickSight