在本地角度應用程式中嵌入 Amazon QuickSight 顯示儀表板 - AWS Prescriptive Guidance

本文為英文版的機器翻譯版本,如內容有任何歧義或不一致之處,概以英文版為準。

在本地角度應用程式中嵌入 Amazon QuickSight 顯示儀表板

由肖恩·格里芬 (AWS) 創建

環境:PoC 或試驗

技能:網站與網路應用程式;分析

AWS 服務:AWS Lambda;Amazon QuickSight;Amazon API Gateway

Summary

此模式提供了將 Amazon QuickSight 儀表板嵌入到本機託管的 Angular 應用程式中的指導方針,以進行開發或測試。所以此內嵌分析功能不支援此項功能。它需要具有現有儀表板和 Angular 知識的 Amazon QuickSight 帳戶。

當您使用嵌入式 Amazon QuickSight 儀表板時,通常必須將應用程式託管在 Web 伺服器上,才能檢視儀表板。這使得開發變得更加困難,因為您必須持續將更改推送到 Web 服務器,以確保所有內容都正常運作。此模式顯示如何執行本機託管的伺服器,並使用 Amazon QuickSight 內嵌式分析,讓開發程序更輕鬆且更簡化。

先決條件和限制

先決條件

限制

  • 此模式提供了如何使用ANONYMOUS(可公開存取) 驗證類型。如果您將 AWS Identity to Access Management (IAM) 或 QuickSight 身分驗證搭配使用,則提供的程式碼無法套用。不過,主控 Angular 應用程式的步驟史詩部分仍然有效。

Architecture

T圖徵學堆疊

  • Angular Account

  • AWS Lambda 和 Amazon API Gateway 後端

架構

在這種架構中,API 網關中的 HTTP API Gateway 啟用本機角度應用程式來呼叫 Lambda 函式。Lambda 函數會傳回內嵌快速顯示儀表板的 URL。

自動化和擴充

您可以使用 AWS CloudFormation 或 AWS Serverless Application Model (AWS SAM) 來自動執行後端部署。

Tools

工具

  • Angular CLI角 CLI 是您用來初始化、開發、支架和維護角度應用程式直接從命令殼層的命令列介面工具。

  • 內嵌軟體開發套件— 您可以使用此 SDK 將快速檢視儀表板內嵌到您的 HTML 中。

  • Mkcert— mkcert 是建立本機信任開發憑證的簡單工具。它不需要設定。mkcert 是必要的,因為 QuickSight 只允許 HTTPS 要求內嵌儀表板。

AWS 服務

  • Amazon API Gateway— Amazon API Gateway 是一種 AWS 服務,可讓您建立、發佈、維護、監控和保護任何規模的 REST、HTTP 和 WebSocket API。 

  • AWS Lambda— AWS Lambda 是一項運算服務,可支援執行程式碼,無需佈建或管理伺服器。Lambda 只有在需要時才會執行程式碼,可自動從每天數項請求擴展成每秒數千項請求。只需為使用的運算時間支付費用,一旦未執行程式碼,就會停止計費。 

  • Amazon QuickSight— Amazon QuickSight 是一項商業分析服務,可用來建置視覺化效果、執行臨機操作分析,以及從資料獲取商業洞見。

Code

請參閱附件區段來取得此模式的 Lambda 程式碼。

Epics

任務描述所需技能
建立內嵌 URL 政策。

建立名為的 IAM 政策快速檢視儀表板下載 URL具有下列屬性:

{     "Version": "2012-10-17",     "Statement": [         {             "Effect": "Allow",             "Action": [                 "quicksight:GetDashboardEmbedUrl",                 "quickSight:GetAnonymousUserEmbedUrl"             ],             "Resource": "*"         }     ] }
AWS 管理員
建立 Lambda 函數。
  1. 在 Lambda 主控台上,開啟函數頁面

  2. 選擇 Create Function (建立函數)

  3. Basic information (基本資訊) 下,請執行下列動作:

    1. 選擇 Author from Scratch (從頭開始撰寫)

    2. 適用於函數名稱,輸入獲取 qs-embedd-url

    3. 適用於執行時間中,選擇Python 3.9

  4. 選擇 Create Function (建立函數)

  5. 從附加的get-qs-embed-url.py文件添加到 Lambda 函數程式碼來源索引標籤。

  6. 部署您的函數。

  7. AddDASHBOARD_ID 作為環境變量添加到 Lambda 函數中:

    1. 組態索引標籤中,選擇環境變數Edit (編輯)新增環境變數

    2. 使用密鑰添加一個環境變量DASHBOARD_ID

    3. 若要取得DASHBOARD_ID中,導覽至您的儀表板,然 QuickSight 在瀏覽器中複製 URL 結尾處的 UUID。舉例來說,如果 URL 是https://us-east-1.quicksight.aws.amazon.com/sn/dashboards/<dashboard-id>,請指定<dashboard-id>部分 URL 作為鍵值。

    4. 選擇 Save (儲存)

  8. 修改 Lambda 函數的執行角色,並將快速檢視儀表板下載 URL政策給它。

    1. 組態索引標籤中,選擇Permissions (許可),然後選擇您的角色名稱。

    2. 選擇連接政策,搜尋快速檢視儀表板下載 URL,選取其核取方塊,然後選擇連接政策

  9. 建立並執行測試事件。您可以使用「Hello World」模板,因為該函數不會使用任何測試事件中的數據。

    1. 選擇測試索引標籤。

    2. 為測試事件提供一個名稱,然後選擇儲存變更

    3. 若要測試 Lambda 函數,請選擇測試。回應看起來會與下列類似:

{   "statusCode": 200,   "body": "\"https://us-east-1.quicksight.aws.amazon.com/embed/f1acc0786687783b9a4543a05ba929b3a/dashboards/8a123480-8d77-4f71-92a0-0e736968b99b1?code=AYABeNod..."" }
應用開發人員
在 API Gateway 中建立 API。
  1. API Gateway 主控台中,選擇建立 API,然後選擇HTTP API建置

    1. 選擇新增整合,然後選擇您剛建立的 Lambda 函數。

    2. 針對 API 名稱,請輸入應用程式碼

    3. 選擇下一頁,然後變更ANGULARGET(針對)/取消qs-embedd-url路由。

    4. 選擇下一頁下一頁,然後建立

  2. 導覽至 。CORS部分,然後選擇設定。設定下列項目:

    • 存取控制允許來源: https://my-qs-app.net:4200

    • 存取控制允許標頭*

    • 存取控制允許方法*

    • 存取控制允許認證

  3. 從螢幕左上角,導覽至 API應用程式碼。請注意叫用 URL$default下的階段Qs 嵌入 API 的階段。

請注意:我的網絡可以是任何域。如果您想要使用不同的網域名稱,請務必更新允許原點資訊,並在下列步驟中變更我的 qs-app.net。

應用開發人員
任務描述所需技能
創建與角 CLI 的應用程序。

請注意:下列指令適用於 Unix 或 MacOS 電腦。

  1. 若要建立應用程式,請使用下列命令:

    ng new quicksight-app --defaults cd quicksight-app/src/app ng g c dashboard npm i amazon-quicksight-embedding-sdk echo "declare module 'amazon-quicksight-embedding-sdk';" >> types.d.ts
  2. 導覽至您的

    src/environments/environment.ts

    檔案,然後新增

    apiUrl 

    和您的 API Gateway 的 URL:

    export environment = { production: false, apiUrl: "<Invoke URL from previous steps>" };
應用開發人員
將程式碼新增至儀表板 .元件 .ts 檔案。

將下列程式碼加入到 src/app/dashboard/dashboard.component.ts 檔案:

import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import * as QuicksightEmbedding from 'amazon-quicksight-embedding-sdk'; import { environment } from "../../environments/environment"; @Component({   selector: 'app-dashboard',   templateUrl: './dashboard.component.html',   styleUrls: ['./dashboard.component.css'] }) export class DashboardComponent implements OnInit {   constructor(private http: HttpClient) { }   dashboard: any;   ngOnInit() {     this.GetDashboardURL();   }     public async GetDashboardURL() {     const url = await this.http.get(environment.apiUrl + "get-qs-embed-url").toPromise()     this.Dashboard(url);   }   public Dashboard(embeddedURL: any) {     var containerDiv = document.getElementById("dashboardContainer");     var options = {       url: embeddedURL,       container: containerDiv,       scrolling: "yes",       height: "850px",       width: "100%"     };     this.dashboard = QuicksightEmbedding.embedDashboard(options);   } }
應用開發人員
將程式碼新增至儀表板 .html 檔案。

在 中src/app/dashboard/dashboard.component.html檔案中,插入下列<div>標籤,您想要嵌入儀表板的位置:

<div id="dashboardContainer"></div>

此程式碼會使用識別碼來判斷儀表板應該與哪個 HTML 元素相關聯。

應用開發人員
修改您的應用程式元件 .html 檔案,以載入儀表板元件。
  1. 刪除所有現有的程式碼src/app/app.component.htmlfile.

  2. 新增下列項目:

    <app-dashboard></app-dashboard>
應用開發人員
將 HTTP 客戶端模塊導入到您的應用程序的 .ts 文件中。
  1. 在頂端

    src/app/app.module.ts

    檔案,新增:

    import { HttpClientModule } from '@angular/common/http';
  2. AddHttpClientModule作為導入後BrowserModule

應用開發人員
任務描述所需技能
設定 mkcert (mkcert)。

請注意:下列指令適用於 Unix 或 MacOS 電腦。

  1. 若要在您的電腦上建立本機憑證授權單位 (CA):

    mkcert -install
  2. 將我的 qs-app.net 設定為始終重新導向到您的本機電腦:

    echo "127.0.0.1 my-qs-app.net" | sudo tee -a /private/etc/hosts
  3. 確定您位於

    src/

    目錄:

    mkcert my-qs-app.net 127.0.0.1
應用開發人員
設定「快速檢視」以允許您的網域。
  1. 在 QuickSight 中,在右上角選擇您的名稱,然後選擇管理快速視覺。

  2. 導覽至。領域和內嵌

  3. 將 https://my-qs-app.net:4200 新增為允許的網域。

AWS 管理員
啟動本地角度開發服務器。

執行以下命令:

ng serve --host my-qs-app.net --port 4200 --ssl --ssl-key "./src/my-qs-app.net-key.pem" --ssl-cert "./src/my-qs-app.net.pem" -o

如此一來,可讓 Secure Sockets Layer (SSL) 搭配您先前建立的自訂憑證。

構建完成後,它會打開一個瀏覽器窗口,您可以查看在 Angular 本地託管的嵌入式 Amazon QuickSight 儀表板。

應用開發人員

Attachments

attachment.zip