Embedded Analytics-Tutorial

mit Amazon QuickSight

Modul 5: API-Gateway und statische Webseite

In diesem Modul werden wir mit der Einrichtung des Webportals fortfahren.

Einführung

In diesem Modul werden wir mit der Einrichtung des Webportals fortfahren, indem wir ein API-Gateway erstellen, um die Lambda-Funktion aufzurufen und die statische HTML-Seite in den S3-Bucket zu schreiben und zu laden.

Lerninhalte

  • API-Gateway erstellen: Zum Aufrufen von Lambda-Funktionen.
  • Erstellen einer statischen Website

 Veranschlagte Zeit

20 Minuten

 Verwendete Services

Implementierung

  • API-Gateway erstellen

    Lassen Sie uns als Nächstes ein API-Gateway einrichten, um die Lambda-Funktion QSGetEmbedUrl aufzurufen.

    1. Starten Sie das API-Gateway und klicken Sie auf die Schaltfläche API erstellen.

    114

    2. Scrollen Sie nach unten zu REST API und klicken Sie auf die Schaltfläche Build.

    115

    3. Legen Sie den API-Namen als QSGetEmbedUrlApi fest und klicken Sie auf die Schaltfläche API erstellen.

    116

    4. Klicken Sie auf die Dropdown-Liste Aktionen und dann auf die Option Ressource erstellen.

    117

    5. Stellen Sie die folgenden Werte ein.
    Name der Ressource: GetEmbedUrl
    Aktivieren Sie API-Gateway CORS: Aktiviert
    Klicken Sie auf die Schaltfläche Ressource erstellen.

    118

    6. Klicken Sie auf die Dropdown-Liste Aktionen (bei ausgewählter getembededurl-Ressource) und klicken Sie auf die Option Methode erstellen.

    119

    7. Wählen Sie GET aus dem Optionsfeld und klicken Sie auf das Symbol mit dem Häkchen.

    120

    8. Stellen Sie die folgenden Werte ein.
    Integrationstyp: Lambda-Funktion
    Lambda-Proxy-Integration verwenden: Aktiviert
    Lambda-Funktion: QSGetEmbedUrl
    Klicken Sie auf die Schaltfläche Speichern.

    121

    9. Klicken Sie im Dialogfeld Erlaubnis hinzufügen auf die Schaltfläche OK.

    122

    10. Klicken Sie auf die Dropdown-Liste Aktionen und dann auf die Option API bereitstellen.

    123

    11. Treffen Sie folgende Auswahlen.
    Bereitstellungsphase: [Neue Stufe] auswählen
    Stufenname: Test
    Klicken Sie auf die Schaltfläche Bereitstellen

    124

    12. Speichern Sie die Invoke-URL in Ihrem Notizblock als API-Gateway-URL

    125
  • Erstellen einer statischen Website

    Wir werden nun eine statische html-Seite erstellen und diese in unseren S3-Bucket laden.

    1. Kopieren Sie den folgenden html-Code in eine Datei und nennen Sie sie 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. Ersetzen Sie die folgenden Zeichenfolgen in der Datei. (Option Alle ersetzen verwenden)
    <apiGatewayUrl>: API Gateway URL/getembedurl
    <cognitoUrl>: https://qseAwsAccountId.auth.us-east-1.amazoncognito.com
    <clientId>: Cognito-App-Client-ID im Notizblock gespeichert
    <cloudfrontUrl>: https://CloudFront Domain Name im Notizblock gespeichert

    3. Klicken Sie mit der rechten Maustaste auf das folgende aws Logo und speichern Sie es als logo.png
    (oder verwenden Sie Ihre eigene Logodatei mit dem Namen logo.png)

    131

    4. Starten Sie S3, suchen Sie nach qse AwsAccountId und klicken Sie auf den Namen des Buckets.

    132

    5. Klicken Sie auf die Schaltfläche Hochladen.

    133

    6. Fügen Sie qsembed.html und logo.png hinzu und klicken Sie auf die Schaltfläche Hochladen.

    134

Fazit

Sie haben Modul 5 erfolgreich abgeschlossen! Als Nächstes können wir in Modul sechs an der Einrichtung von Benutzern und Domänen arbeiten.

War das Modul hilfreich?

QuickSight Benutzer- und Domäneneinrichtung