Incorpore um QuickSight painel da Amazon em um aplicativo Angular local - Recomendações da AWS
ResumoPré-requisitos e limitaçõesArquiteturaFerramentasÉpicosRecursos relacionadosMais informações

As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.

Incorpore um QuickSight painel da Amazon em um aplicativo Angular local

Criado por Sean Griffin (AWS) e Milena Godau () AWS

Ambiente: PoC ou piloto

Tecnologias: aplicativos web e móveis; análise

AWSserviços: AWS Lambda; Amazon; QuickSight Amazon Gateway API

Resumo

Esse padrão fornece orientação para incorporar um QuickSight painel da Amazon em um aplicativo Angular hospedado localmente para desenvolvimento ou teste. O recurso de análise incorporada QuickSight não oferece suporte nativo a essa funcionalidade. Isso requer uma QuickSight conta com um painel existente e conhecimento do Angular.

Quando você trabalha com QuickSight painéis incorporados, normalmente precisa hospedar seu aplicativo em um servidor web para visualizar o painel. Isso dificulta o desenvolvimento, porque você precisa enviar continuamente suas alterações para o servidor da Web para garantir que tudo esteja se comportando corretamente. Esse padrão mostra como executar um servidor hospedado localmente e usar análises QuickSight incorporadas para tornar o processo de desenvolvimento mais fácil e simplificado.

Pré-requisitos e limitações

Pré-requisitos

Limitações

  • Esse padrão fornece orientação sobre como incorporar um QuickSight painel usando o tipo de autenticação ANONYMOUS (acessível ao público). Se você estiver usando AWS Identity and Access Management (IAM) ou QuickSight autenticação com seus painéis incorporados, o código fornecido não será aplicado. No entanto, as etapas para hospedar o aplicativo Angular na seção Epics (Épicos) ainda são válidas.

  • Usar o GetDashboardEmbedUrlAPIcom o tipo de ANONYMOUS identidade requer um plano QuickSight de preços de capacidade.

Versões

Arquitetura

Pilha de tecnologia

  • Frontend do Angular

  • AWSBack-end do Lambda e do Amazon API Gateway

Arquitetura

Nessa arquitetura, o HTTP APIs in API Gateway permite que o aplicativo Angular local chame a função Lambda. A função Lambda retorna o URL para incorporar o painel. QuickSight

Arquitetura para incorporar um QuickSight painel em um aplicativo Angular local

Automação e escala

Você pode automatizar a implantação de back-end usando AWS CloudFormation nosso AWS Serverless Application Model (). AWS SAM

Ferramentas

Ferramentas

  • CLIO Angular é uma ferramenta de interface de linha de comando que você usa para inicializar, desenvolver, estruturar e manter aplicativos Angular diretamente de um shell de comando.

  • QuickSight A incorporação SDK é usada para incorporar QuickSight painéis em seu. HTML

  • mkcert é uma ferramenta simples para criar certificados de desenvolvimento confiáveis localmente. Não requer configuração. O mkcert é necessário porque QuickSight permite somente HTTPS solicitações de incorporação de painéis.

AWSserviços

  • O Amazon API Gateway é um AWS serviço para criar, publicar, manter, monitorar e proteger RESTHTTP, WebSocket APIs em qualquer escala. 

  • AWSO Lambda é um serviço de computação que oferece suporte à execução de código sem provisionar ou gerenciar servidores. O Lambda executa o código somente quando necessário e dimensiona automaticamente, desde algumas solicitações por dia até milhares por segundo. Você paga apenas pelo tempo de computação consumido. Não haverá cobranças quando o código não estiver em execução. 

  • QuickSightA Amazon é um serviço de análise de negócios para criar visualizações, realizar análises ad hoc e obter insights de negócios a partir de seus dados.

Épicos

TarefaDescriçãoHabilidades necessárias

Crie uma EmbedUrl política.

Crie uma IAM política chamada QuicksightGetDashboardEmbedUrlque tenha as propriedades a seguir.

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

Criar a função do Lambda.

1. No console do Lambda, abra a página Funções.

2. Escolha Criar função.

3. Escolha Criar do zero.

4. Em Function name (Nome da função), insira get-qs-embed-url.

5. Em Runtime, escolha Python 3.9.

6. Escolha Criar função.

7. Na guia Código, copie o código a seguir na função do 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. Escolha Implantar.

Desenvolvedor de aplicativos

Adicione o ID do painel como uma variável de ambiente.

Adicione a variável de ambiente DASHBOARD_ID à função do Lambda:

  1. Na guia Configuração, selecione Variáveis de ambiente, Editar, Adicionar variável de ambiente.

  2. Adicione uma variável de ambiente com a chave DASHBOARD_ID.

  3. Para obter o valor deDASHBOARD_ID, navegue até seu painel QuickSight e copie o que UUID está no final do URL em seu navegador. Por exemplo, se URL forhttps://us-east-1.quicksight.aws.amazon.com/sn/dashboards/<dashboard-id>, especifique a <dashboard-id> parte do URL como valor da chave.

  4. Escolha Salvar.

Desenvolvedor de aplicativos

Adicione permissões para a função do Lambda.

Modifique a função de execução da função Lambda e adicione a QuicksightGetDashboardEmbedUrlpolítica a ela.

  1. Na guia Configuração, selecione Permissões e, em seguida, selecione o nome do perfil.

  2. Selecione Anexar políticas), pesquise por QuicksightGetDashboardEmbedUrl, marque a caixa de seleção correspondente e selecione Anexar política.

Desenvolvedor de aplicativos

Testar a função do Lambda.

Crie e execute um evento para teste. Você pode usar o modelo “Hello World”, porque a função não usará nenhum dado no evento de teste.

  1. Selecione a guia Testar.

  2. Dê um nome ao seu evento de teste e selecione Salvar.

  3. Para testar sua função do Lambda, escolha Testar. A resposta deve ser semelhante à seguinte.

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

Observação: conforme mencionado na seção Pré-requisitos e limitações, sua QuickSight conta deve estar sob um plano de preços de capacidade de sessão. Caso contrário, esta etapa exibirá uma mensagem de erro.

Desenvolvedor de aplicativos

Crie um API no API Gateway.

  1. No console do API Gateway, escolha Criar eAPI, em seguida RESTAPI, escolha Construir.

    • Para API nome, insiraqs-embed-api.

    • Escolha Criar API.

  2. Em Ações, escolha Criar método.

    • Escolha GETe confirme escolhendo a marca de seleção.

    • Escolha Função do Lambda como tipo de integração.

    • Em Função do Lambda, insira get-qs-embed-url.

    • Escolha Salvar.

    • Na caixa Adicionar permissão à função do Lambda, escolha OK.

  3. HabilitarCORS.

    • Em Ações, escolha Habilitar CORS.

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

    • Escolha Ativar CORS e substituir CORS os cabeçalhos existentes e confirme.

  4. Implemente API o.

    • Em Ações, escolha Implantar API.

    • Em Estágio de implantação, escolha Novo estágio.

    • Em Stage name (Nome do estágio), insira dev.

    • Escolha Deploy (Implantar).

    • Copie o Invoke. URL

Observação: my-qs-app.net pode ser qualquer domínio. Se quiser usar um nome de domínio diferente, atualize as informações de  Access-Control-Allow-Origin na etapa 3 e altere my-qs-app.net nas etapas subsequentes.

Desenvolvedor de aplicativos
TarefaDescriçãoHabilidades necessárias

Crie o aplicativo com o AngularCLI.

  1. Criar o aplicativo.

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

  2. Crie o componente do painel.

    ng g c dashboard

  3. Navegue até seu arquivo src/environments/environment.ts e adicione apiUrl: '<Invoke URL from previous steps>' ao objeto do ambiente.

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

Adicione a QuickSight incorporação. SDK

  1. Instale o QuickSight Embedding SDK executando o comando a seguir na pasta raiz do seu projeto.

    npm i amazon-quicksight-embedding-sdk

  2. Crie um novo arquivo decl.d.ts na pasta src com o seguinte conteúdo.

    declare module 'amazon-quicksight-embedding-sdk';
Desenvolvedor de aplicativos

Adicione código ao seu arquivo 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);
  }
}
Desenvolvedor de aplicativos

Adicione código ao seu arquivo dashboard.component.html.

Adicione o seguinte código ao arquivo src/app/dashboard/dashboard.component.html.

<div id="dashboardContainer"></div>
Desenvolvedor de aplicativos

Modifique seu arquivo app.component.html para carregar seu componente do painel.

  1. Exclua o conteúdo do arquivo src/app/app.component.html.

  2. Adicione o seguinte.

    <app-dashboard></app-dashboard>
Desenvolvedor de aplicativos

Importe HttpClientModule para seu arquivo app.module.ts.

  1. No topo do arquivo src/app/app.module.ts, adicione o seguinte.

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

  2. Adicione HttpClientModule à matriz imports do seu AppModule.

Desenvolvedor de aplicativos
TarefaDescriçãoHabilidades necessárias

Configure o mkcert.

Observação: os comandos a seguir são para máquinas Unix ou macOS. Se você estiver usando o Windows, consulte a seção Informações adicionais para o comando echo equivalente.

  1. Crie uma autoridade de certificação (CA) local em sua máquina.

    mkcert -install

  2. Configure my-qs-app.net para sempre redirecionar para seu PC local.

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

  3. Certifique-se de que você esteja no diretório src do projeto do Angular.

    mkcert my-qs-app.net 127.0.0.1
Desenvolvedor de aplicativos

Configure QuickSight para permitir seu domínio.

  1. Em QuickSight, escolha seu nome no canto superior direito e escolha Gerenciar Quicksight.

  2. Navegue até Domínios e incorporação.

  3. Adicione https://my-qs-app.net:4200 como um domínio permitido.

AWSadministrador

Testar a solução.

Inicie um servidor de desenvolvimento local do Angular executando o seguinte 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

Isso ativa o Secure Sockets Layer (SSL) com o certificado personalizado que você criou anteriormente.

Quando a compilação estiver concluída, ela abrirá uma janela do navegador e você poderá visualizar seu QuickSight painel incorporado hospedado localmente no Angular.

Desenvolvedor de aplicativos

Recursos relacionados

Mais informações

Se você estiver usando o Windows, execute a janela do Prompt de Comando como administrador e configure my-qs-app.net para sempre redirecionar para o PC local usando o comando a seguir. 

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