Usando análises incorporadas de AmazonQuickSight pode simplificar o processo de equipar seu aplicativo com visualizações funcionais sem nenhum desenvolvimento complexo. Existem várias maneiras de incorporar painéis do QuickSight ao aplicativo. Neste post, veremos como isso pode ser feito usando o React e o SDK de incorporação do Amazon QuickSight.
Os consumidores do painel geralmente não têm um usuário atribuído à sua conta da AWS e, portanto, não têm acesso ao painel. Para permitir que eles consumam dados, o painel precisa estar acessível para usuários anônimos. Vejamos as etapas necessárias para permitir que um usuário não autenticado visualize seu painel do QuickSight em seu aplicativo React.
Visão geral da solução
Nossa solução utiliza os seguintes serviços principais:
Depois de carregar a página da Web no navegador, o navegador faz uma chamada para o API Gateway, que invoca uma função Lambda que chama a API QuickSight para gerar um URL de painel para um usuário anônimo. A função do Lambda precisa assumir uma função do IAM com as permissões necessárias. O diagrama a seguir mostra uma visão geral da arquitetura.
Pré-requisitos
Você deve ter os seguintes pré-requisitos:
Configurar permissões para visualizadores não autenticados
Em sua conta, crie uma política IAM que seu aplicativo assumirá em nome do visualizador:
- No console IAM, escolha Políticas internas no painel de navegação.
- Escolha Criar política.
- No JSON guia, insira o seguinte código de política:
Certifique-se de alterar o valor de ao valor do ID do painel. Anote esse ID para usar em uma etapa posterior também.
Para o segundo objeto de instrução com logs, as permissões são opcional. Ele permite que você crie um grupo de logs com o nome especificado, crie um fluxo de logs para o grupo de logs especificado e carregue um lote de eventos de log para o fluxo de logs especificado.
Nesta política, permitimos que o usuário execute o GenerateEmbedUrlForAnonymousUser
ação no ID do painel dentro da lista de IDs do painel inseridos no espaço reservado.
- Insira um nome para sua política (por exemplo,
AnonymousEmbedPolicy
) e escolha Criar política.
Em seguida, criamos uma função e anexamos essa política à função.
- Escolha Setores no painel de navegação e escolha Criar função.
- Escolha Lambda para a entidade confiável.
- Pesquise e selecione
AnonymousEmbedPolicy
, Em seguida, escolha Próximo. - Insira um nome para sua função, como
AnonymousEmbedRole
. - Certifique-se de que o nome da política esteja incluído no Adicionar permissões seção.
- Termine de criar sua função.
Você acabou de criar o AnonymousEmbedRole
função de execução. Agora você pode passar para a próxima etapa.
Gerar uma função do Lambda de URL de incorporação anônima
Nesta etapa, criamos uma função do Lambda que interage com o QuickSight para gerar uma URL incorporada para um usuário anônimo. Nosso domínio precisa ser permitido. Há duas maneiras de obter a integração do Amazon QuickSight:
- Ao adicionar o URL à lista de domínios permitidos no console de administração do Amazon QuickSight (explicado posteriormente em [Opcional] Adicione seu domínio no QuickSight seção).
- [Recomendado] Adicionando a solicitação de URL incorporada durante o tempo de execução na chamada da API. A opção 1 é recomendada quando você precisa manter os domínios permitidos. Caso contrário, os domínios serão removidos após 30 minutos, o que equivale à duração da sessão. Para outros casos de uso, é recomendável usar a segunda opção (descrita e implementada abaixo).
No console do Lambda, crie uma nova função.
- Selecionar Autor do zero.
- Escolha Nome da função, insira um nome, como
AnonymousEmbedFunction
. - Escolha Runtime¸ escolher Python 3.9.
- Escolha Função de execução¸ escolher Use uma função existente.
- Escolha a função
AnonymousEmbedRole
. - Escolha Criar função.
- Na página de detalhes da função, navegue até o Code aba e digite o seguinte código:
Se você não usar localhost, substitua http://localhost:3000
nos retornos com o nome do host do seu aplicativo. Para passar para a produção, não se esqueça de substituir http://localhost:3000
com seu domínio.
- No Configuração guia, sob Configuração geral, escolha Editar.
- Aumente o tempo limite de 3 segundos para 30 segundos e escolha Salvar.
- Debaixo Variáveis ambientais, escolha Editar.
- Adicione as seguintes variáveis:
- Adicionar
DashboardIdList
e liste seus IDs de painel. - Adicionar
DashboardRegion
e insira a região do seu painel.
- Adicionar
- Escolha Salvar.
Sua configuração deve ser semelhante à captura de tela a seguir.
- No Code guia, escolha Implantação para implantar a função.
Configure o API Gateway para invocar a função Lambda
Para configurar o API Gateway para invocar a função que você criou, conclua as seguintes etapas:
- No console do API Gateway, navegue até o API REST seção e escolha Construa.
- Debaixo Criar nova API, selecione Nova API.
- Escolha nome da API, insira um nome (por exemplo,
QuicksightAnonymousEmbed
). - Escolha Criar API.
- No Opções menu, escolha Criar recurso.
- Escolha Nome do recurso, insira um nome (por exemplo,
anonymous-embed
).
Agora, vamos criar um método.
- Escolha o
anonymous-embed
recurso e no Opções menu, escolha Método de criação. - Escolha ENTRE sob o nome do recurso.
- Escolha Tipo de integração, selecione Lambda.
- Selecionar Usar integração de proxy Lambda.
- Escolha Função lambda, insira o nome da função que você criou.
- Escolha Salvar, Em seguida, escolha OK.
Agora estamos prontos para implantar a API.
- No Opções menu, escolha Implementar API.
- Escolha Estágio de implantação, selecione Novo palco.
- Digite um nome para o seu estágio, como
embed
. - Escolha Implantação.
[Opcional] Adicione seu domínio no QuickSight
Se você adicionou domínios permitidos em Gerar uma função do Lambda de URL de incorporação anônima parte, sinta-se à vontade para ir para Ativar preços de capacidade seção.
Para adicionar seu domínio aos domínios permitidos no QuickSight, conclua as seguintes etapas:
- No console do QuickSight, escolha o menu do usuário e escolha Gerenciar QuickSight.
- Escolha Domínios e incorporação no painel de navegação.
- Escolha Domínio, digite seu domínio (
http://localhost:
).
Certifique-se de substituir para corresponder à sua configuração local.
- Escolha Adicionar.
Certifique-se de substituir o domínio localhost por aquele que você usará após o teste.
Ativar preços de capacidade
Se você não tiver o preço de capacidade de sessão ativado, siga as etapas nesta seção. É obrigatório ter esta função habilitada para prosseguir.
O preço de capacidade permite que os clientes do QuickSight comprem sessões de leitor em massa sem precisar provisionar leitores individuais no QuickSight. O preço da capacidade é ideal para aplicativos incorporados ou implantações de inteligência de negócios (BI) em larga escala. Para mais informações visite Preços do Amazon QuickSight.
Para ativar o preço de capacidade, conclua as seguintes etapas:
- No Gerenciar QuickSight página, escolha Suas assinaturas no painel de navegação.
- No Preços de capacidade seção, selecione Obter assinatura mensal.
- Escolha Confirme a assinatura.
Para saber mais sobre preços de capacidade, consulte Novidade no Amazon QuickSight – definição de preço de capacidade de sessão para implantações em larga escala, incorporação em sites públicos e portal do desenvolvedor para análises incorporadas.
Configure seu aplicativo React
Para configurar seu aplicativo React, conclua as seguintes etapas:
- Na pasta do projeto React, vá para o diretório raiz e execute
npm i amazon-quicksight-embedding-sdk
para instalar o pacote amazon-quicksight-embedding-sdk. - Em sua
App.js
arquivo, substitua o seguinte:- Substituir
YOUR_API_GATEWAY_INVOKE_URL/RESOURCE_NAME
com o URL de invocação do API Gateway e o nome do recurso (por exemplo,https://xxxxxxxx.execute-api.xx-xxx-x.amazonaws.com/embed/anonymous-embed
). - Substituir
YOUR_DASHBOARD1_ID
com o primeiro dashboardId do seuDashboardIdList
. Este é o painel que será mostrado na renderização inicial. - Substituir
YOUR_DASHBOARD2_ID
com o segundo dashboardId do seuDashboardIdList
.
- Substituir
O trecho de código a seguir mostra um exemplo do App.js
arquivo em seu projeto React. O código é um componente React que incorpora um painel QuickSight com base no ID do painel selecionado. O código contém os seguintes componentes principais:
- ganchos de estado – Dois ganchos de estado são definidos usando o
useState()
gancho do React:- painel de instrumentos – Contém o ID do painel atualmente selecionado.
- quickSightIncorporação – Mantém o objeto de incorporação QuickSight retornado pelo
embedDashboard()
função.
- Ref gancho – Um gancho de referência é definido usando o
useRef()
gancho do React. É usado para manter uma referência ao elemento DOM onde o painel do QuickSight será incorporado. - gancho useEffect() – O gancho useEffect() é usado para acionar a incorporação do painel QuickSight sempre que o ID do painel selecionado for alterado. Ele primeiro busca a URL do painel para o ID selecionado da API QuickSight usando o método fetch(). Depois de recuperar a URL, ele chama a função embed() com a URL como argumento.
- Alterar manipulador - A
changeDashboard()
A função é um manipulador de eventos simples que atualiza o estado do painel sempre que o usuário seleciona um painel diferente no menu suspenso. Assim que o novo ID do painel é definido, o gancho useEffect é acionado. - tempo limite de 10 milissegundos – O objetivo de usar o tempo limite é introduzir um pequeno atraso de 10 milissegundos antes de fazer a chamada da API. Esse atraso pode ser útil em cenários em que você deseja evitar chamadas de API imediatas ou evitar solicitações excessivas quando o componente é renderizado com frequência. O tempo limite dá ao componente algum tempo para resolver antes de iniciar a solicitação de API. Como estamos construindo o aplicativo no modo de desenvolvimento, o tempo limite ajuda a evitar erros causados pela execução dupla de
useEffect
dentroStrictMode
. Para obter mais informações, consulte Atualizações para o Modo Estrito.
Veja o seguinte código:
Em seguida, substitua o conteúdo do seu App.css
arquivo, que é usado para estilizar e fazer o layout de sua página da Web, com o conteúdo do seguinte trecho de código:
Agora é hora de testar seu aplicativo. Inicie seu aplicativo executando npm start
em seu terminal. As capturas de tela a seguir mostram exemplos de seu aplicativo, bem como os painéis que ele pode exibir.
Conclusão
Nesta postagem, mostramos como incorporar um painel QuickSight em um aplicativo React usando o AWS SDK. Compartilhar seu painel com usuários anônimos permite que eles acessem seu painel sem conceder a eles acesso à sua conta da AWS. Também existem outras maneiras de compartilhar seu painel anonimamente, como usar Incorporação pública com 1 clique.
PARTICIPE NOP Comunidade Quicksight para perguntar, responder e aprender com os outros e explorar recursos adicionais.
Sobre o autor
Adrianna é arquiteto de soluções na AWS Global Financial Services. Fazendo parte da Amazon desde agosto de 2018, ela teve a chance de se envolver tanto nas operações quanto nos negócios de nuvem da empresa. Atualmente, ela cria ativos de software que demonstram o uso inovador dos serviços da AWS, adaptados a casos de uso de clientes específicos. Diariamente, ela se envolve ativamente com vários aspectos da tecnologia, mas sua verdadeira paixão reside na combinação de desenvolvimento web e análise.
- Conteúdo com tecnologia de SEO e distribuição de relações públicas. Seja amplificado hoje.
- PlatoData.Network Gerativa Vertical Ai. Capacite-se. Acesse aqui.
- PlatoAiStream. Inteligência Web3. Conhecimento Amplificado. Acesse aqui.
- PlatãoESG. Automotivo / EVs, Carbono Tecnologia Limpa, Energia, Ambiente, Solar, Gestão de resíduos. Acesse aqui.
- BlockOffsets. Modernizando a Propriedade de Compensação Ambiental. Acesse aqui.
- Fonte: https://aws.amazon.com/blogs/big-data/level-up-your-react-app-with-amazon-quicksight-how-to-embed-your-dashboard-for-anonymous-access/
- :tem
- :é
- :onde
- ][p
- $UP
- 1
- 10
- 100
- 11
- 12
- 13
- 14
- 20
- 200
- 2018
- 26
- 30
- 3000
- 60
- 7
- 9
- a
- Sobre
- Acesso
- acessível
- Conta
- Alcançar
- Açao Social
- ativamente
- adicionar
- adicionado
- acrescentando
- Adicional
- admin
- Depois de
- Todos os Produtos
- permitir
- permitidas
- permite
- tb
- Amazon
- AmazonQuickSight
- Amazon Web Services
- an
- analítica
- e
- Anônimo
- Anonimamente
- responder
- qualquer
- api
- app
- Aplicação
- aplicações
- arquitetura
- SOMOS
- argumento
- AS
- aspectos
- Ativos
- atribuído
- assumir
- At
- anexar
- AGOSTO
- autor
- evitar
- aguardam
- AWS
- baseado
- base
- BE
- Porque
- sido
- antes
- lado
- abaixo
- corpo
- ambos
- navegador
- construir
- Prédio
- Constrói
- negócio
- inteligência de negócios
- mas a
- by
- chamada
- chamadas
- CAN
- Capacidade
- casos
- causado
- Centralização de
- chance
- alterar
- Alterações
- Escolha
- cliente
- Na nuvem
- código
- cor
- combinação
- Empresa
- completar
- integrações
- componente
- componentes
- Configuração
- cônsul
- consumir
- Consumidores
- Recipiente
- contém
- conteúdo
- conteúdo
- contexto
- crio
- criado
- Criar
- APF
- Atual
- Atualmente
- cliente
- Clientes
- diariamente
- painel de instrumentos
- painéis
- dados,
- Padrão
- definido
- atraso
- demonstrar
- implantar
- Implantações
- descrito
- detalhes
- Developer
- Desenvolvimento
- diferente
- Ecrã
- DOM
- domínio
- domínios
- feito
- não
- duplo
- duração
- durante
- e
- efeito
- elemento
- embutir
- incorporado
- embutindo
- permitir
- habilitado
- envolve
- Entrar
- entidade
- Meio Ambiente
- Equivalente
- erro
- erros
- Éter (ETH)
- Evento
- eventos
- exemplo
- exemplos
- Exceto
- exceção
- execução
- existente
- explicado
- explorar
- exportar
- sentir
- Envie o
- financeiro
- serviços financeiros
- Primeiro nome
- seguir
- seguinte
- Escolha
- Gratuito
- freqüentemente
- da
- função
- funcional
- mais distante
- porta de entrada
- gerar
- dá
- Global
- financeiro global
- Go
- concessão
- Grupo
- tinha
- Ter
- ter
- cabeçalhos
- altura
- ajuda
- sua experiência
- segurar
- detém
- Hooks
- pairar
- Como funciona o dobrador de carta de canal
- Como Negociar
- http
- HTTPS
- i
- IAM
- ID
- ideal
- Identidade
- ids
- if
- Imediato
- implementado
- importar
- in
- incluído
- Individual
- INFORMAÇÕES
- do estado inicial,
- iniciando
- inovadores
- instalar
- integração
- Inteligência
- interage
- para dentro
- introduzir
- invoca
- envolvido
- IT
- json
- apenas por
- Chave
- Falta
- grande
- em grande escala
- mais tarde
- traçado
- APRENDER
- Nível
- encontra-se
- Lista
- carregamento
- local
- log
- olhar
- a Principal
- FAZ
- Fazendo
- obrigatório
- Margem
- Match
- Menu
- método
- minutos
- Moda
- mensal
- mais
- mover
- múltiplo
- devo
- nome
- Navegar
- Navegação
- você merece...
- Cria
- Novo
- Próximo
- normal
- agora
- objeto
- of
- frequentemente
- on
- ONE
- Operações
- Opção
- Opções
- or
- Laranja
- OS
- Outros
- Outros
- de outra forma
- A Nossa
- Visão geral
- pacote
- página
- pão
- parte
- paixão
- realizar
- permissões
- escolher
- espaço reservado
- platão
- Inteligência de Dados Platão
- PlatãoData
- por favor
- Privacidade
- Portal
- Publique
- poderoso
- pré-requisitos
- evitar
- preços
- processo
- Produção
- projeto
- provisão
- procuração
- público
- compra
- propósito
- RE
- Reagir
- Leitor
- leitores
- pronto
- Recomenda
- região
- Removido
- torna
- substituir
- solicitar
- pedidos
- requeridos
- recurso
- Recursos
- resposta
- retorno
- Retorna
- Tipo
- raiz
- Execute
- corrida
- Escala
- cenários
- screenshots
- Sdk
- Segundo
- segundo
- Seção
- Vejo
- selecionado
- Serviços
- Sessão
- sessões
- conjunto
- resolver
- instalação
- Partilhar
- compartilhando
- ela
- rede de apoio social
- mostrar
- mostrou
- mostrando
- Shows
- semelhante
- simples
- simplificar
- desde
- pequeno
- Software
- solução
- Soluções
- alguns
- Em breve
- específico
- especificada
- Etapa
- começo
- Estado
- Declaração
- Passo
- Passos
- transmitir canais
- rigoroso
- estilo
- tal
- certo
- adaptados
- Target
- Tecnologia
- terminal
- teste
- ensaio
- que
- A
- deles
- Eles
- então
- Lá.
- assim sendo
- isto
- tempo
- para
- desencadear
- desencadeado
- verdadeiro
- confiável
- tentar
- VIRAR
- dois
- para
- sublinhado
- Atualizações
- URL
- usar
- usava
- Utilizador
- usuários
- usos
- utilização
- valor
- vário
- versão
- Ver
- Visite a
- queremos
- maneiras
- we
- web
- Desenvolvimento web
- serviços web
- sites
- boas-vindas
- BEM
- quando
- sempre que
- qual
- precisarão
- de
- dentro
- sem
- Você
- investimentos
- zefirnet