Uso de análisis integrados de Amazon QuickSight puede simplificar el proceso de equipar su aplicación con visualizaciones funcionales sin ningún desarrollo complejo. Hay varias formas de incorporar paneles de QuickSight en la aplicación. En esta publicación, vemos cómo se puede hacer usando React y el SDK de integración de Amazon QuickSight.
Los consumidores del panel a menudo no tienen un usuario asignado a su cuenta de AWS y, por lo tanto, no tienen acceso al panel. Para permitirles consumir datos, el tablero debe ser accesible para usuarios anónimos. Veamos los pasos necesarios para permitir que un usuario no autenticado vea su panel de QuickSight en su aplicación React.
Resumen de la solución
Nuestra solución utiliza los siguientes servicios clave:
Después de cargar la página web en el navegador, el navegador realiza una llamada a API Gateway, que invoca una función de Lambda que llama a la API de QuickSight para generar una URL de panel para un usuario anónimo. La función de Lambda debe asumir un rol de IAM con los permisos necesarios. El siguiente diagrama muestra una descripción general de la arquitectura.
Requisitos previos
Debes tener los siguientes requisitos previos:
Configurar permisos para espectadores no autenticados
En su cuenta, cree una política de IAM que su aplicación asumirá en nombre del espectador:
- En la consola de IAM, elija Políticas internas en el panel de navegación.
- Elige Crear política.
- En JSON pestaña, ingrese el siguiente código de política:
Asegúrese de cambiar el valor de al valor de la ID del tablero. Tenga en cuenta este ID para usarlo también en un paso posterior.
Para el segundo objeto de declaración con registros, los permisos son opcional. Le permite crear un grupo de registro con el nombre especificado, crear un flujo de registro para el grupo de registro especificado y cargar un lote de eventos de registro en el flujo de registro especificado.
En esta política, permitimos que el usuario realice la GenerateEmbedUrlForAnonymousUser
acción en el identificador del tablero dentro de la lista de identificadores del tablero insertados en el marcador de posición.
- Introduzca un nombre para su política (por ejemplo,
AnonymousEmbedPolicy
) y elige Crear política.
A continuación, creamos un rol y adjuntamos esta política al rol.
- Elige Roles en el panel de navegación, luego elija Crear rol.
- Elige lambda para la entidad de confianza.
- Buscar y seleccionar
AnonymousEmbedPolicy
, A continuación, elija Siguiente. - Introduzca un nombre para su función, como
AnonymousEmbedRole
. - Asegúrese de que el nombre de la política esté incluido en el Agregar permisos .
- Termina de crear tu rol.
Acabas de crear el AnonymousEmbedRole
rol de ejecución. Ahora puede pasar al siguiente paso.
Generar una función Lambda de URL insertada anónima
En este paso, creamos una función Lambda que interactúa con QuickSight para generar una URL de inserción para un usuario anónimo. Nuestro dominio necesita ser permitido. Hay dos formas de lograr la integración de Amazon QuickSight:
- Al agregar la URL a la lista de dominios permitidos en la consola de administración de Amazon QuickSight (se explica más adelante en [Opcional] Agregue su dominio en QuickSight sección).
- [Recomendado] Agregando la solicitud de URL incrustada durante el tiempo de ejecución en la llamada a la API. Se recomienda la opción 1 cuando necesite conservar los dominios permitidos. De lo contrario, los dominios se eliminarán después de 30 minutos, lo que equivale a la duración de la sesión. Para otros casos de uso, se recomienda utilizar la segunda opción (descrita e implementada a continuación).
En la consola de Lambda, cree una nueva función.
- Seleccione Autor desde cero.
- Nombre de la función, ingrese un nombre, como
AnonymousEmbedFunction
. - Runtimeescoger 3.9 Python.
- Rol de ejecuciónescoger Use un rol existente.
- Elige el rol
AnonymousEmbedRole
. - Elige Crear función.
- En la página de detalles de la función, vaya a la Código pestaña e ingrese el siguiente código:
Si no usa localhost, reemplace http://localhost:3000
en las devoluciones con el nombre de host de su aplicación. Para pasar a producción, no olvide reemplazar http://localhost:3000
con tu dominio.
- En Configuración pestaña, debajo Configuración general, escoger Editar.
- Aumente el tiempo de espera de 3 segundos a 30 segundos, luego elija Guardar.
- under Variables de entorno, escoger Editar.
- Agregue las siguientes variables:
- Añada
DashboardIdList
y enumere sus ID de panel. - Añada
DashboardRegion
e ingrese la Región de su tablero.
- Añada
- Elige Guardar.
Su configuración debería ser similar a la siguiente captura de pantalla.
- En Código pestaña, elegir Despliegue para implementar la función.
Configurar API Gateway para invocar la función Lambda
Para configurar API Gateway para invocar la función que creó, complete los siguientes pasos:
- En la consola de API Gateway, vaya a la REST API sección y elegir Construcción.
- under Crear nueva API, seleccione Nueva API.
- Nombre de la API, ingrese un nombre (por ejemplo,
QuicksightAnonymousEmbed
). - Elige Crear API.
- En Acciones menú, seleccione Crear recurso.
- Nombre del recurso, ingrese un nombre (por ejemplo,
anonymous-embed
).
Ahora, vamos a crear un método.
- Elija el
anonymous-embed
recurso y en el Acciones menú, seleccione Crear método. - Elige bajo el nombre del recurso.
- Tipo de integración, seleccione lambda.
- Seleccione Utilice la integración de proxy de Lambda.
- función lambda, ingrese el nombre de la función que creó.
- Elige Guardar, A continuación, elija OK.
Ahora estamos listos para implementar la API.
- En Acciones menú, seleccione Implementar API.
- Etapa de implementación, seleccione Nueva fase.
- Introduzca un nombre para su escenario, como
embed
. - Elige Despliegue.
[Opcional] Agregue su dominio en QuickSight
Si agregó Dominios permitidos en Generar una función Lambda de URL insertada anónima parte, siéntete libre de moverte a Activar precios de capacidad .
Para agregar su dominio a los dominios permitidos en QuickSight, complete los siguientes pasos:
- En la consola de QuickSight, elija el menú de usuario, luego elija Administrar QuickSight.
- Elige Dominios e incrustaciones en el panel de navegación.
- Dominio, ingrese su dominio (
http://localhost:
).
Asegúrate de reemplazar para que coincida con su configuración local.
- Elige Añada.
Asegúrese de reemplazar el dominio localhost con el que usará después de la prueba.
Activar precios de capacidad
Si no tiene activado el precio de la capacidad de la sesión, siga los pasos de esta sección. Es obligatorio tener esta función habilitada para continuar.
Los precios por capacidad permiten a los clientes de QuickSight comprar sesiones de lectores en masa sin tener que aprovisionar lectores individuales en QuickSight. El precio por capacidad es ideal para aplicaciones integradas o implementaciones de inteligencia empresarial (BI) a gran escala. Para más información visite Precios de Amazon QuickSight.
Para activar el precio de la capacidad, complete los siguientes pasos:
- En Administrar QuickSight página, elige Sus suscripciones en el panel de navegación.
- En Precios de capacidad sección, seleccionar Obtenga suscripción mensual.
- Elige Confirmar suscripción.
Para obtener más información sobre los precios de capacidad, consulte Nuevo en Amazon QuickSight: precios de capacidad de sesión para implementaciones a gran escala, integración en sitios web públicos y portal para desarrolladores para análisis integrados.
Configura tu aplicación React
Para configurar su aplicación React, complete los siguientes pasos:
- En la carpeta de su proyecto React, vaya a su directorio raíz y ejecute
npm i amazon-quicksight-embedding-sdk
para instalar el paquete amazon-quicksight-embedding-sdk. - En su
App.js
archivo, reemplace lo siguiente:- Reemplaza
YOUR_API_GATEWAY_INVOKE_URL/RESOURCE_NAME
con su URL de invocación de API Gateway y su nombre de recurso (por ejemplo,https://xxxxxxxx.execute-api.xx-xxx-x.amazonaws.com/embed/anonymous-embed
). - Reemplaza
YOUR_DASHBOARD1_ID
con el primer dashboardId de suDashboardIdList
. Este es el tablero que se mostrará en el renderizado inicial. - Reemplaza
YOUR_DASHBOARD2_ID
con el segundo dashboardId de suDashboardIdList
.
- Reemplaza
El siguiente fragmento de código muestra un ejemplo de la App.js
archivo en su proyecto React. El código es un componente de React que incorpora un tablero QuickSight basado en la ID del tablero seleccionado. El código contiene los siguientes componentes clave:
- ganchos de estado – Dos ganchos de estado se definen usando el
useState()
gancho de React:- página de información de sus operaciones – Contiene el ID del tablero seleccionado actualmente.
- QuickSightEmbedding – Contiene el objeto de incrustación QuickSight devuelto por el
embedDashboard()
función.
- Gancho de referencia – Un gancho de referencia se define usando el
useRef()
gancho de React. Se utiliza para contener una referencia al elemento DOM donde se incrustará el panel de QuickSight. - gancho useEffect() – El enlace useEffect() se utiliza para activar la incrustación del panel QuickSight cada vez que cambia la ID del panel seleccionado. Primero obtiene la URL del tablero para la ID seleccionada de la API de QuickSight usando el método fetch(). Después de recuperar la URL, llama a la función incrustar() con la URL como argumento.
- Cambiar controlador - El
changeDashboard()
La función es un controlador de eventos simple que actualiza el estado del tablero cada vez que el usuario selecciona un tablero diferente del menú desplegable. Tan pronto como se establece la nueva ID del tablero, se activa el enlace useEffect. - tiempo de espera de 10 milisegundos – El propósito de usar el tiempo de espera es introducir un pequeño retraso de 10 milisegundos antes de realizar la llamada a la API. Este retraso puede ser útil en escenarios en los que desea evitar llamadas API inmediatas o evitar solicitudes excesivas cuando el componente se procesa con frecuencia. El tiempo de espera le da al componente algo de tiempo para establecerse antes de iniciar la solicitud de API. Debido a que estamos creando la aplicación en modo de desarrollo, el tiempo de espera ayuda a evitar errores causados por la doble ejecución de
useEffect
dentro deStrictMode
. Para obtener más información, consulte Actualizaciones al modo estricto.
Ver el siguiente código:
A continuación, reemplace el contenido de su App.css
archivo, que se utiliza para diseñar y diseñar su página web, con el contenido del siguiente fragmento de código:
Ahora es el momento de probar su aplicación. Inicie su aplicación ejecutando npm start
en tu terminal. Las siguientes capturas de pantalla muestran ejemplos de su aplicación, así como los paneles que puede mostrar.
Conclusión
En esta publicación, le mostramos cómo incrustar un tablero QuickSight en una aplicación React utilizando el SDK de AWS. Compartir su tablero con usuarios anónimos les permite acceder a su tablero sin otorgarles acceso a su cuenta de AWS. También hay otras formas de compartir su tablero de forma anónima, como usar Incrustación pública con 1 clic.
ÚNASE AL Comunidad Quicksight para preguntar, responder y aprender con otros y explorar recursos adicionales.
Sobre la autora
Adrianna es arquitecto de soluciones en AWS Global Financial Services. Habiendo sido parte de Amazon desde agosto de 2018, ha tenido la oportunidad de participar tanto en las operaciones como en el negocio de la nube de la empresa. Actualmente, crea activos de software que demuestran el uso innovador de los servicios de AWS, adaptados a los casos de uso de un cliente específico. Diariamente, se involucra activamente en varios aspectos de la tecnología, pero su verdadera pasión radica en la combinación de análisis y desarrollo web.
- Distribución de relaciones públicas y contenido potenciado por SEO. Consiga amplificado hoy.
- PlatoData.Network Vertical Generativo Ai. Empodérate. Accede Aquí.
- PlatoAiStream. Inteligencia Web3. Conocimiento amplificado. Accede Aquí.
- PlatoESG. Automoción / vehículos eléctricos, Carbón, tecnología limpia, Energía, Ambiente, Solar, Gestión de residuos. Accede Aquí.
- Desplazamientos de bloque. Modernización de la propiedad de compensaciones ambientales. Accede Aquí.
- Fuente: https://aws.amazon.com/blogs/big-data/level-up-your-react-app-with-amazon-quicksight-how-to-embed-your-dashboard-for-anonymous-access/
- :posee
- :es
- :dónde
- ][pag
- $ UP
- 1
- 10
- 100
- 11
- 12
- 13
- 14
- 20
- 200
- 2018
- 26
- 30
- 3000
- 60
- 7
- 9
- a
- Nuestra Empresa
- de la máquina
- accesible
- Mi Cuenta
- Lograr
- la columna Acción
- activamente
- add
- adicional
- la adición de
- Adicionales
- Admin
- Después
- Todos
- permitir
- permitido
- permite
- también
- Amazon
- Amazon QuickSight
- Amazon Web Services
- an
- Analytics
- y
- Anónimo
- Anónimamente
- https://www.youtube.com/watch?v=xB-eutXNUMXJtA&feature=youtu.be
- cualquier
- abejas
- applicación
- Aplicación
- aplicaciones
- arquitectura
- somos
- argumento
- AS
- aspectos
- Activos
- asigna
- asumir
- At
- adjuntar
- AGOSTO
- autor
- evitar
- esperar
- AWS
- basado
- base
- BE
- porque
- esto
- antes
- favor
- a continuación
- cuerpo
- ambas
- cada navegador
- build
- Construir la
- construye
- inteligencia empresarial
- pero
- by
- llamar al
- Calls
- PUEDEN
- Capacidad
- cases
- causado
- Reubicación
- oportunidad
- el cambio
- Cambios
- Elige
- cliente
- Soluciones
- código
- Color
- combinación
- compañía
- completar
- integraciones
- componente
- componentes
- Configuración
- Consola
- consumir
- Clientes
- Envase
- contiene
- contenido
- contenido
- contexto
- Para crear
- creado
- Creamos
- CO
- Current
- En la actualidad
- cliente
- Clientes
- todos los días
- página de información de sus operaciones
- de los tableros
- datos
- Predeterminado
- se define
- retrasar
- demostrar
- desplegar
- Despliegues
- descrito
- detalles
- Developer
- Desarrollo
- una experiencia diferente
- Pantalla
- DOM
- dominio
- dominios
- hecho
- No
- doble
- duración
- durante
- e
- efecto
- elementos
- incrustar
- integrado
- incrustación
- habilitar
- facilita
- participa
- Participar
- entidad
- Entorno
- Equivalente a
- error
- Errores
- Éter (ETH)
- Evento
- Eventos
- ejemplo
- ejemplos
- Excepto
- excepción
- ejecución
- existente
- explicado
- explorar
- exportar
- sentir
- Archive
- financiero
- servicios financieros
- Nombre
- seguir
- siguiendo
- Gratuito
- frecuentemente
- Desde
- función
- funcional
- promover
- puerta
- generar
- da
- Buscar
- financiero mundial
- Go
- concesión
- Grupo procesos
- tenido
- Tienen
- es
- cabeceras
- altura
- ayuda
- aquí
- mantener
- mantiene
- Manos
- flotar
- Cómo
- Como Hacer
- http
- HTTPS
- i
- AMI
- ID
- ideal
- Identidad
- ids
- if
- inmediata
- implementado
- importar
- in
- incluido
- INSTRUMENTO individual
- información
- inicial
- iniciando
- originales
- instalar
- integración
- Intelligence
- interactúa
- dentro
- introducir
- invoca
- involucra
- IT
- json
- solo
- Clave
- Falta
- large
- Gran escala
- luego
- Disposición
- APRENDE:
- Nivel
- se encuentra
- Lista
- carga
- local
- log
- Mira
- Inicio
- HACE
- Realizar
- obligatorio
- Margen
- Match
- Menú
- Método
- minutos
- Moda
- mensual
- más,
- movimiento
- múltiples
- debe
- nombre
- Navegar
- Navegación
- ¿ Necesita ayuda
- Nuevo
- Next
- normal
- ahora
- objeto
- of
- a menudo
- on
- ONE
- Operaciones
- Optión
- Opciones
- or
- Naranja
- OS
- Otro
- Otros
- de otra manera
- nuestros
- visión de conjunto
- paquete
- página
- cristal
- parte
- pasión
- realizar
- permisos
- recoger
- marcador de posición
- Platón
- Inteligencia de datos de Platón
- PlatónDatos
- Por favor
- política
- Portal
- Publicación
- poderoso
- requisitos previos
- evitar
- cotización
- Producción
- proyecto
- provisión
- apoderado
- público
- comprar
- propósito
- RE
- Reaccionar
- Testimoniales
- lectores
- ready
- recomendado
- región
- Remoto
- renders
- reemplazar
- solicita
- solicitudes
- Requisitos
- Recurso
- Recursos
- respuesta
- volvemos
- devoluciones
- Función
- raíz
- Ejecutar
- correr
- Escala
- escenarios
- capturas de pantalla
- Sdk
- Segundo
- segundos
- Sección
- ver
- seleccionado
- Servicios
- Sesión
- sesiones
- set
- resolver
- Configure
- Compartir
- compartir
- ella
- tienes
- Mostrar
- mostró
- mostrado
- Shows
- similares
- sencillos
- simplificar
- desde
- chica
- Software
- a medida
- Soluciones
- algo
- Pronto
- soluciones y
- especificado
- Etapa
- comienzo
- Estado
- Posicionamiento
- paso
- pasos
- stream
- estricto
- papa
- tal
- seguro
- adaptado
- Target
- Tecnología
- terminal
- test
- Pruebas
- esa
- La
- su
- Les
- luego
- Ahí.
- por lo tanto
- así
- equipo
- a
- detonante
- desencadenados
- verdadero
- de confianza
- try
- GIRO
- dos
- bajo
- subrayar
- Actualizaciones
- Enlance
- utilizan el
- usado
- Usuario
- usuarios
- usos
- usando
- propuesta de
- diversos
- versión
- Ver
- Visite
- quieres
- formas
- we
- web
- Desarrollo web
- servicios web
- sitios web
- bienvenido
- WELL
- cuando
- cuando
- que
- seguirá
- dentro de
- sin
- Usted
- tú
- zephyrnet