Incorpora una QuickSight dashboard Amazon in un'applicazione Angular locale - Prontuario AWS
RiepilogoPrerequisiti e limitazioniArchitetturaStrumentiEpicheRisorse correlateInformazioni aggiuntive

Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.

Incorpora una QuickSight dashboard Amazon in un'applicazione Angular locale

Creato da Sean Griffin () e Milena Godau () AWS AWS

Ambiente: PoC o pilota

Tecnologie: app Web e mobili; analisi

AWSservizi: AWS Lambda; Amazon; QuickSight Amazon Gateway API

Riepilogo

Questo modello fornisce indicazioni per incorporare una QuickSight dashboard Amazon in un'applicazione Angular ospitata localmente per lo sviluppo o il test. La funzionalità di analisi integrata in QuickSight non supporta questa funzionalità in modo nativo. Richiede un QuickSight account con una dashboard esistente e la conoscenza di Angular.

Quando si lavora con QuickSight dashboard incorporati, in genere è necessario ospitare l'applicazione su un server Web per visualizzare la dashboard. Ciò rende lo sviluppo più difficile, poiché è necessario inviare continuamente le modifiche al server Web per assicurarsi che tutto si comporti correttamente. Questo schema mostra come eseguire un server ospitato localmente e utilizzare l'analisi QuickSight integrata per rendere il processo di sviluppo più semplice e snello.

Prerequisiti e limitazioni

Prerequisiti

Limitazioni

  • Questo modello fornisce indicazioni su come incorporare una QuickSight dashboard utilizzando il tipo di autenticazione ANONYMOUS (accessibile pubblicamente). Se utilizzi AWS Identity and Access Management (IAM) o QuickSight l'autenticazione con i dashboard incorporati, il codice fornito non verrà applicato. Tuttavia, i passaggi per ospitare l'applicazione Angular nella sezione Epics sono ancora validi.

  • L'utilizzo del tipo GetDashboardEmbedUrlAPIwith the ANONYMOUS identity richiede un piano tariffario QuickSight relativo alla capacità.

Versioni

Architettura

Stack tecnologico

  • Frontend angolare

  • AWSBackend Lambda e Amazon API Gateway

Architettura

In questa architettura, HTTP APIs in API Gateway consente all'applicazione Angular locale di chiamare la funzione Lambda. La funzione Lambda restituisce il valore URL per incorporare il pannello di controllo. QuickSight

Architettura per incorporare una QuickSight dashboard in un'applicazione Angular locale

Automazione e scalabilità

È possibile automatizzare l'implementazione del backend utilizzando AWS CloudFormation o AWS Serverless Application Model (). AWS SAM

Strumenti

Strumenti

  • Angular CLI è uno strumento di interfaccia a riga di comando che puoi utilizzare per inizializzare, sviluppare, scaffold e mantenere le applicazioni Angular direttamente da una shell di comando.

  • QuickSight L'incorporamento SDK viene utilizzato per incorporare dashboard in. QuickSight HTML

  • mkcert è uno strumento semplice per creare certificati di sviluppo affidabili a livello locale. Non richiede alcuna configurazione. mkcert è richiesto perché QuickSight consente solo le richieste di incorporamento di dashboard. HTTPS

AWSservizi

  • Amazon API Gateway è un AWS servizio per la creazione, la pubblicazione, la manutenzione, il monitoraggio e la protezione RESTHTTP, WebSocket APIs su qualsiasi scala. 

  • AWSLambda è un servizio di elaborazione che supporta l'esecuzione di codice senza fornire o gestire server. Lambda esegue il codice solo quando è necessario e si dimensiona automaticamente, da poche richieste al giorno a migliaia al secondo. Verrà addebitato soltanto il tempo di calcolo consumato e non verrà addebitato alcun costo quando il codice non è in esecuzione. 

  • Amazon QuickSight è un servizio di analisi aziendale per creare visualizzazioni, eseguire analisi ad hoc e ottenere informazioni aziendali dai tuoi dati.

Epiche

AttivitàDescrizioneCompetenze richieste

Crea una EmbedUrl politica.

Crea una IAM politica QuicksightGetDashboardEmbedUrldenominata con le seguenti proprietà.

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

Creazione della funzione Lambda

1. Sulla console Lambda, apri la pagina Funzioni.

2. Selezionare Create function (Crea funzione).

3. Scegli Crea da zero.

4. Nel campo Function name (Nome funzione), immettere get-qs-embed-url.

5. In Runtime, scegli Python 3.9.

6. Selezionare Create function (Crea funzione).

7. Nella scheda Codice, copia il codice seguente nella funzione 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. Seleziona Deploy (Implementa).

Sviluppatore di app

Aggiungi l'ID del dashboard come variabile di ambiente.

Aggiungi DASHBOARD_ID come variabile di ambiente alla tua funzione Lambda:

  1. Nella scheda Configurazione, scegli Variabili di ambiente, Modifica, Aggiungi variabile di ambiente.

  2. Aggiungi una variabile di ambiente con la chiaveDASHBOARD_ID.

  3. Per ottenere il valore diDASHBOARD_ID, accedi alla dashboard QuickSight e copiala UUID alla fine URL nel tuo browser. Ad esempio, se URL èhttps://us-east-1.quicksight.aws.amazon.com/sn/dashboards/<dashboard-id>, specifica la <dashboard-id> parte di URL come valore chiave.

  4. Seleziona Salva.

Sviluppatore di app

Aggiungi le autorizzazioni per la funzione Lambda.

Modifica il ruolo di esecuzione della funzione Lambda e aggiungi la QuicksightGetDashboardEmbedUrlpolicy.

  1. Nella scheda Configurazione, scegli Autorizzazioni, quindi scegli il nome del ruolo.

  2. Scegli Allega policy, cercaQuicksightGetDashboardEmbedUrl, seleziona la relativa casella di controllo, quindi scegli Allega policy.

Sviluppatore di app

Prova la funzione Lambda.

Crea ed esegui un evento di test. Puoi utilizzare il modello «Hello World», perché la funzione non utilizzerà nessuno dei dati dell'evento di test.

  1. Seleziona la scheda Test.

  2. Assegna un nome al tuo evento di test, quindi scegli Salva.

  3. Per testare la tua funzione Lambda, scegli Test. Il risultato dovrebbe essere simile al seguente.

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

Nota: come indicato nella sezione Prerequisiti e limitazioni, il tuo QuickSight account deve avere un piano tariffario per la capacità di sessione. In caso contrario, in questo passaggio verrà visualizzato un messaggio di errore.

Sviluppatore di app

Crea un API in API Gateway.

  1. Nella console API Gateway, scegli Crea API, quindi scegli RESTAPIBuild.

    • Per API nome, inserisciqs-embed-api.

    • Scegliete Crea API.

  2. In Azioni, scegli Crea metodo.

    • Scegli GETe conferma selezionando il segno di spunta.

    • Scegli Lambda Function come tipo di integrazione.

    • Per Funzione Lambda, immettere. get-qs-embed-url

    • Seleziona Salva.

    • Nella casella Aggiungi autorizzazione alla funzione Lambda, scegli OK.

  3. Abilita. CORS

    • In Azioni, scegli Abilita CORS.

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

    • Scegli Abilita CORS e sostituisci le intestazioni esistenti e conferma. CORS

  4. Implementa il. API

    • Per Azioni, scegli Distribuisci API.

    • In Deployment stage (Fase di distribuzione), scegliere [New Stage] ([Nuova fase]).

    • In Stage name (Nome fase) immettere dev.

    • Selezionare Deploy (Distribuisci).

    • Copia Invoke URL.

Nota: my-qs-app.net può essere qualsiasi dominio. Se desideri utilizzare un nome di dominio diverso, assicurati di aggiornare le informazioni di Access-Control-Allow-Origin nel passaggio 3 e modificarle nei passaggi successivi. my-qs-app.net

Sviluppatore di app
AttivitàDescrizioneCompetenze richieste

Crea l'applicazione con AngularCLI.

  1. Crea l'applicazione.

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

  2. Crea il componente del dashboard.

    ng g c dashboard

  3. Passa al src/environments/environment.ts file e aggiungilo apiUrl: '<Invoke URL from previous steps>' all'oggetto dell'ambiente.

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

Aggiungi l' QuickSight incorporamento. SDK

  1. Installa l' QuickSight incorporamento SDK eseguendo il seguente comando nella cartella principale del progetto.

    npm i amazon-quicksight-embedding-sdk

  2. Crea un nuovo decl.d.ts file nella src cartella con il seguente contenuto.

    declare module 'amazon-quicksight-embedding-sdk';
Sviluppatore di app

Aggiungi codice al tuo file 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";
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);
  }
}
Sviluppatore di app

Aggiungi codice al tuo file dashboard.component.html.

Aggiungi il codice seguente al tuo file. src/app/dashboard/dashboard.component.html

<div id="dashboardContainer"></div>
Sviluppatore di app

Modifica il file app.component.html per caricare il componente del pannello di controllo.

  1. Elimina il contenuto del file. src/app/app.component.html

  2. Aggiungi quanto segue.

    <app-dashboard></app-dashboard>
Sviluppatore di app

Importa HttpClientModule nel tuo file app.module.ts.

  1. Nella parte superiore del src/app/app.module.ts file, aggiungi quanto segue.

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

  2. Aggiungi HttpClientModule l'importsarray per il tuoAppModule.

Sviluppatore di app
AttivitàDescrizioneCompetenze richieste

Configura mkcert.

Nota: i seguenti comandi sono per macchine Unix o macOS. Se usi Windows, consulta la sezione Informazioni aggiuntive per il comando echo equivalente.

  1. Crea un'autorità di certificazione (CA) locale sul tuo computer.

    mkcert -install

  2. Configura my-qs-app.net per reindirizzare sempre al tuo PC locale.

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

  3. Assicurati di trovarti nella src directory del progetto Angular.

    mkcert my-qs-app.net 127.0.0.1
Sviluppatore di app

Configura QuickSight per consentire il tuo dominio.

  1. In QuickSight, scegli il tuo nome nell'angolo in alto a destra, quindi scegli Manage Quicksight.

  2. Vai a Domini e incorporamento.

  3. Aggiungi https://my-qs-app.net:4200 come dominio consentito.

AWSamministratore

Prova la soluzione.

Avvia un server di sviluppo Angular locale eseguendo il seguente comando.

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

Ciò abilita Secure Sockets Layer (SSL) con il certificato personalizzato creato in precedenza.

Quando la build è completa, apre una finestra del browser e puoi visualizzare la QuickSight dashboard incorporata ospitata localmente in Angular.

Sviluppatore di app

Risorse correlate

Informazioni aggiuntive

Se usi Windows, esegui la finestra del prompt dei comandi come amministratore e configura my-qs-app.net il reindirizzamento al PC locale utilizzando il seguente comando. 

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