Sematkan QuickSight dasbor Amazon di aplikasi Angular lokal - AWS Prescriptive Guidance
RingkasanPrasyarat dan batasanArsitekturAlatEpikSumber daya terkaitInformasi tambahan

Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

Sematkan QuickSight dasbor Amazon di aplikasi Angular lokal

Sean Griffin dan Milena Godau, Amazon Web Services

Ringkasan

Pola ini memberikan panduan untuk menyematkan QuickSight dasbor Amazon ke dalam aplikasi Angular yang dihosting secara lokal untuk pengembangan atau pengujian. Fitur analitik yang disematkan di QuickSight tidak mendukung fungsionalitas ini secara asli. Ini membutuhkan QuickSight akun dengan dasbor dan pengetahuan Angular yang ada.

Saat Anda bekerja dengan QuickSight dasbor tertanam, Anda biasanya harus meng-host aplikasi Anda di server web untuk melihat dasbor. Ini membuat pengembangan lebih sulit, karena Anda harus terus mendorong perubahan Anda ke server web untuk memastikan semuanya berperilaku dengan benar. Pola ini menunjukkan cara menjalankan server yang dihosting secara lokal dan menggunakan analitik QuickSight tertanam untuk membuat proses pengembangan lebih mudah dan lebih efisien.

Prasyarat dan batasan

Prasyarat

Batasan

  • Pola ini memberikan panduan tentang menyematkan QuickSight dasbor dengan menggunakan jenis otentikasi ANONYMOUS (dapat diakses publik). Jika Anda menggunakan AWS Identity and Access Management (IAM) atau QuickSight autentikasi dengan dasbor yang disematkan, kode yang diberikan tidak akan berlaku. Namun, langkah-langkah untuk menghosting aplikasi Angular di bagian Epics masih valid.

  • Menggunakan GetDashboardEmbedUrlAPI dengan tipe ANONYMOUS identitas memerlukan paket harga QuickSight kapasitas.

Versi

Arsitektur

Tumpukan teknologi

  • Frontend sudut

  • AWS Lambda dan backend Amazon API Gateway

Arsitektur

Dalam arsitektur ini, HTTP APIs di API Gateway memungkinkan aplikasi Angular lokal untuk memanggil fungsi Lambda. Fungsi Lambda mengembalikan URL untuk menyematkan dasbor. QuickSight

Arsitektur untuk menyematkan QuickSight dasbor dalam aplikasi Angular lokal

Otomatisasi dan skala

Anda dapat mengotomatiskan penerapan backend dengan menggunakan AWS atau AWS Serverless Application Model ( CloudFormation AWS SAM).

Alat

Alat

  • Angular CLI adalah alat antarmuka baris perintah yang Anda gunakan untuk menginisialisasi, mengembangkan, perancah, dan memelihara aplikasi Angular langsung dari shell perintah.

  • QuickSight Embedding SDK digunakan untuk menyematkan QuickSight dasbor ke HTML Anda.

  • mkcert adalah alat sederhana untuk membuat sertifikat pengembangan tepercaya secara lokal. Tidak memerlukan konfigurasi. mkcert diperlukan karena hanya QuickSight mengizinkan permintaan HTTPS untuk menyematkan dasbor.

Layanan AWS

  • Amazon API Gateway adalah layanan AWS untuk membuat, menerbitkan, memelihara, memantau, dan mengamankan REST, HTTP, dan WebSocket APIs pada skala apa pun. 

  • AWS Lambda adalah layanan komputasi yang mendukung menjalankan kode tanpa menyediakan atau mengelola server. Lambda menjalankan kode Anda hanya saat diperlukan dan menskalakan secara otomatis, dari beberapa permintaan per hari hingga ribuan per detik. Anda hanya membayar untuk waktu komputasi yang Anda gunakan—tidak ada biaya saat kode Anda tidak berjalan. 

  • Amazon QuickSight adalah layanan analisis bisnis untuk membangun visualisasi, melakukan analisis ad hoc, dan mendapatkan wawasan bisnis dari data Anda.

Epik

TugasDeskripsiKeterampilan yang dibutuhkan

Buat EmbedUrl kebijakan.

Buat kebijakan IAM bernama QuicksightGetDashboardEmbedUrlyang memiliki properti berikut.

{
      "Version": "2012-10-17",		 	 	 
      "Statement": [
            {
                  "Effect": "Allow",
                  "Action": [
                        "quicksight:GetDashboardEmbedUrl",
                        "quickSight:GetAnonymousUserEmbedUrl"
                  ],
                  "Resource": "*"
            }
      ]
}
Administrator AWS

Buat fungsi Lambda.

1. Di konsol Lambda, buka halaman Fungsi.

2. Pilih Buat Fungsi.

3. Pilih Tulis dari awal.

4. Untuk Nama fungsi, masukkan get-qs-embed-url.

5. Untuk Runtime, pilih Python 3.9.

6. Pilih Buat Fungsi.

7. Pada tab Kode, salin kode berikut ke dalam fungsi Lambda.

import json
import boto3
from botocore.exceptions import ClientError
import time
from os import environ


qs = boto3.client('quicksight',region_name='us-east-1')
sts = boto3.client('sts')

ACCOUNT_ID = boto3.client('sts').get_caller_identity().get('Account')
DASHBOARD_ID = environ['DASHBOARD_ID']

def getDashboardURL(accountId, dashboardId, quicksightNamespace, resetDisabled, undoRedoDisabled):
  try:
    response = qs.get_dashboard_embed_url(
      AwsAccountId = accountId,
      DashboardId = dashboardId,
      Namespace = quicksightNamespace,
      IdentityType = 'ANONYMOUS',
      SessionLifetimeInMinutes = 600,
      UndoRedoDisabled = undoRedoDisabled,
      ResetDisabled = resetDisabled
    )
    return response
          
  except ClientError as e:
    print(e)
    return "Error generating embeddedURL: " + str(e)


def lambda_handler(event, context):
  url = getDashboardURL(ACCOUNT_ID, DASHBOARD_ID, "default", True, True)['EmbedUrl']
  return {
      'statusCode': 200,
      'url': url
  }

8. Pilih Deploy.

Pengembang aplikasi

Tambahkan ID dasbor sebagai variabel lingkungan.

Tambahkan DASHBOARD_ID sebagai variabel lingkungan ke fungsi Lambda Anda:

  1. Pada tab Konfigurasi, pilih variabel Lingkungan, Edit, Tambahkan variabel lingkungan.

  2. Tambahkan variabel lingkungan dengan kuncinyaDASHBOARD_ID.

  3. Untuk mendapatkan nilaiDASHBOARD_ID, navigasikan ke dasbor Anda QuickSight dan salin UUID di akhir URL di browser Anda. Misalnya, jika URL-nyahttps://us-east-1.quicksight.aws.amazon.com/sn/dashboards/<dashboard-id>, tentukan <dashboard-id> bagian URL sebagai nilai kunci.

  4. Pilih Simpan.

Pengembang aplikasi

Tambahkan izin untuk fungsi Lambda.

Ubah peran eksekusi fungsi Lambda dan tambahkan QuicksightGetDashboardEmbedUrlkebijakan ke dalamnya.

  1. Pada tab Konfigurasi, pilih Izin, lalu pilih nama peran.

  2. Pilih Lampirkan kebijakan, cariQuicksightGetDashboardEmbedUrl, pilih kotak centang, lalu pilih Lampirkan kebijakan.

Pengembang aplikasi

Uji fungsi Lambda.

Buat dan jalankan acara uji. Anda dapat menggunakan template “Hello World”, karena fungsi tersebut tidak akan menggunakan data apa pun dalam acara pengujian.

  1. Pilih tab Uji.

  2. Beri nama acara pengujian Anda, lalu pilih Simpan.

  3. Untuk menguji fungsi Lambda Anda, pilih Uji. Responsnya akan terlihat mirip dengan yang berikut ini.

{
  "statusCode": 200,
  "url": "\"https://us-east-1.quicksight.aws.amazon.com/embed/f1acc0786687783b9a4543a05ba929b3a/dashboards/...
}
catatan

Seperti yang disebutkan di bagian Prasyarat dan batasan, QuickSight akun Anda harus berada di bawah rencana penetapan harga kapasitas sesi. Jika tidak, langkah ini akan menampilkan pesan kesalahan.

Pengembang aplikasi

Buat API di API Gateway.

  1. Di konsol API Gateway, pilih Create API, lalu pilih REST API, Build.

    • Untuk nama API, masukkanqs-embed-api.

    • Pilih Buat API.

  2. Di Actions, pilih Create Method.

    • Pilih GET dan konfirmasi dengan memilih tanda centang.

    • Pilih Lambda Function sebagai tipe integrasi.

    • Untuk Fungsi Lambda, masukkan. get-qs-embed-url

    • Pilih Simpan.

    • Di kotak Tambahkan Izin ke Fungsi Lambda, pilih OK.

  3. Aktifkan CORS.

    • Dalam Tindakan, pilih Aktifkan CORS.

    • Untuk Access-Control-Allow-Origin, masukkan. 'https://my-qs-app.net:4200'

    • Pilih Aktifkan CORS dan ganti header CORS yang ada, dan konfirmasikan.

  4. Menerapkan API.

    • Untuk Tindakan, pilih Deploy API.

    • Untuk tahap Deployment, pilih [New Stage].

    • Untuk nama Panggung, masukkandev.

    • Pilih Deploy.

    • Salin URL Invoke.

catatan

my-qs-app.netBisa berupa domain apa saja. Jika Anda ingin menggunakan nama domain yang berbeda, pastikan untuk memperbarui informasi Access-Control-Allow-Origin di langkah 3, dan ubah langkah selanjutnya. my-qs-app.net

Pengembang aplikasi
TugasDeskripsiKeterampilan yang dibutuhkan

Buat aplikasi dengan CLI Angular.

  1. Buat aplikasi.

    ng new quicksight-app --defaults
cd quicksight-app/src/app

  2. Buat komponen dasbor.

    ng g c dashboard

  3. Arahkan ke src/environments/environment.ts file Anda dan tambahkan apiUrl: '<Invoke URL from previous steps>' ke objek lingkungan.

    export const environment = {
  production: false,
  apiUrl: '<Invoke URL from previous steps>',
};
Pengembang aplikasi

Tambahkan QuickSight Embedding SDK.

  1. Instal QuickSight Embedding SDK dengan menjalankan perintah berikut di folder root proyek Anda.

    npm i amazon-quicksight-embedding-sdk

  2. Buat decl.d.ts file baru di src folder dengan konten berikut.

    declare module 'amazon-quicksight-embedding-sdk';
Pengembang aplikasi

Tambahkan kode ke file dashboard.component.ts Anda.

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";
import { take } from 'rxjs';
import { EmbeddingContext } from 'amazon-quicksight-embedding-sdk/dist/types';
import { createEmbeddingContext } from 'amazon-quicksight-embedding-sdk';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {

  constructor(private http: HttpClient) { }

  loadingError = false;
  dashboard: any;

  ngOnInit() {
    this.GetDashboardURL();
  }
 
  public GetDashboardURL() {
    this.http.get(environment.apiUrl)
    .pipe(
      take(1),
    )
    .subscribe((data: any) => this.Dashboard(data.url));
  }

  public async Dashboard(embeddedURL: any) {
    var containerDiv = document.getElementById("dashboardContainer") || '';
    const frameOptions = {
      url: embeddedURL,
      container: containerDiv,
      height: "850px",
      width: "100%",
      resizeHeightOnSizeChangedEvent: true,
  }
    const embeddingContext: EmbeddingContext = await createEmbeddingContext();
    this.dashboard = embeddingContext.embedDashboard(frameOptions);
  }
}
Pengembang aplikasi

Tambahkan kode ke file dashboard.component.html Anda.

Tambahkan kode berikut ke src/app/dashboard/dashboard.component.html file Anda.

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

Ubah file app.component.html Anda untuk memuat komponen dasbor Anda.

  1. Hapus isi src/app/app.component.html file.

  2. Tambahkan yang berikut ini.

    <app-dashboard></app-dashboard>
Pengembang aplikasi

Impor HttpClientModule ke file app.module.ts Anda.

  1. Di bagian atas src/app/app.module.ts file, tambahkan yang berikut ini.

    import { HttpClientModule } from '@angular/common/http';

  2. Tambahkan HttpClientModule importsarray untuk AndaAppModule.

Pengembang aplikasi
TugasDeskripsiKeterampilan yang dibutuhkan

Konfigurasikan mkcert.

catatan

Perintah berikut adalah untuk mesin Unix atau macOS. Jika Anda menggunakan Windows, lihat bagian Informasi tambahan untuk perintah echo yang setara.

  1. Buat otoritas sertifikat lokal (CA) di mesin Anda.

    mkcert -install

  2. Konfigurasikan my-qs-app.net untuk selalu mengarahkan ulang ke PC lokal Anda.

    echo "127.0.0.1 my-qs-app.net" | sudo tee -a /private/etc/hosts

  3. Pastikan Anda berada di src direktori proyek Angular.

    mkcert my-qs-app.net 127.0.0.1
Pengembang aplikasi

QuickSight Konfigurasikan untuk mengizinkan domain Anda.

  1. Di QuickSight, pilih nama Anda di sudut kanan atas, lalu pilih Kelola Quicksight.

  2. Arahkan ke Domain dan Embedding.

  3. Tambahkan https://my-qs-app.net:4200 sebagai domain yang diizinkan.

Administrator AWS

Uji solusinya.

Mulai server pengembangan Angular lokal dengan menjalankan perintah berikut.

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

Ini memungkinkan Secure Sockets Layer (SSL) dengan sertifikat kustom yang Anda buat sebelumnya.

Ketika build selesai, itu membuka jendela browser dan Anda dapat melihat QuickSight dasbor tertanam yang dihosting secara lokal di Angular.

Pengembang aplikasi

Sumber daya terkait

Informasi tambahan

Jika Anda menggunakan Windows, jalankan jendela Command Prompt sebagai administrator, dan konfigurasikan my-qs-app.net untuk selalu mengarahkan ulang ke PC lokal Anda dengan menggunakan perintah berikut. 

echo 127.0.0.1 my-qs-app.net >> %WINDIR%\System32\Drivers\Etc\Hosts