Tutorial de análises de dados incorporadas

com o Amazon QuickSight

Módulo cinco: Gateway de API e página da Web estática

Neste módulo, continuaremos a configuração do portal da Web.

Introdução

Neste módulo, continuaremos a configuração do portal da Web com a criação de um gateway de API para invocar a função do Lambda e gravar e carregar a página HTML estática no bucket do S3.

O que você aprenderá

  • Criar gateway de API: para chamar funções do Lambda.
  • Criar página da Web estática

 Tempo para a conclusão

20 minutos

 Serviços usados

Implementação

  • Criar gateway de API

    Vamos configurar um gateway de API para invocar a função QSGetEmbedUrl do Lambda.

    1. Inicie o API Gateway e clique no botão Create API (Criar API).

    114

    2. Role para baixo até REST API (API REST) e clique no botão Build (Compilar).

    115

    3. Defina o nome da API como QSGetEmbedUrlApi e clique no botão Create API (Criar API).

    116

    4. Clique no menu suspenso Actions (Ações) e clique na opção Create Resource (Criar recurso).

    117

    5. Defina os valores a seguir.
    Resource Name (Nome do recurso): GetEmbedUrl
    Enable API Gateway CORS (Ativar CORS do API Gateway): marcado
    Clique no botão Create Resource (Criar recurso)

    118

    6. Clique no menu suspenso Actions (Ações) (com o recurso getembedurl selecionado) e clique na opção Create Method (Criar método).

    119

    7. Selecione GET na caixa de opções e clique no ícone de marca de seleção.

    120

    8. Defina os valores a seguir.
    Integration Type (Tipo de integração): Lambda Function (Função do Lambda)
    Use Lambda Proxy Integration (Usar a integração de proxy do Lambda): marcada
    Lambda Function (Função do Lambda): QSGetEmbedUrl
    Clique no botão Save (Salvar)

    121

    9. Clique no botão OK na caixa de diálogo Add Permission (Adicionar permissão).

    122

    10. Clique no menu suspenso Actions (Ações) e clique na opção Deploy API (Implantar API).

    123

    11. Faça as seleções a seguir.
    Deployment stage (Estágio de implantação): selecione [New Stage] (Novo estágio)
    Stage name (Nome do estágio): test
    Clique no botão Deploy (Implantar)

    124

    12. Salve o URL de invocação no seu bloco de notas como API Gateway URL

    125
  • Criar página da Web estática

    Agora vamos criar uma página HTML estática e carregá-la em nosso bucket do S3.

    1. Copie o seguinte código HTML em um arquivo e digite o nome dele como 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. Substitua as seguintes strings no arquivo. (Use a opção para substituir tudo)
    <apiGatewayUrl>: URL do API Gateway/getembedurl
    <cognitoUrl>: https://qseAwsAccountId.auth.us-east-1.amazoncognito.com
    <clientId>: ID de cliente do aplicativo Cognito salvo no bloco de notas
    <cloudfrontUrl>: https://Nome de domínio do CloudFront salvo no bloco de notas

    3. Clique com o botão direito do mouse no seguinte logotipo da AWS e salve-o como logo.png
    (ou use um arquivo de logotipo próprio denominado logo.png)

    131

    4. Inicie o S3, procure qseAwsAccountId e clique no nome do bucket.

    132

    5. Clique no botão Upload (Fazer upload).

    133

    6. Adicione qsembed.html e logo.png e clique no botão Upload (Fazer upload).

    134

Conclusão

Você concluiu o módulo cinco com êxito! A seguir, vamos trabalhar na configuração de usuário e domínio no módulo seis.

Este módulo foi útil?

Configuração de usuário e domínio do QuickSight