Logotipo de Zephyrnet

Inteligencia de datos generativa

Big Data

Mejore su experiencia de incorporación de análisis con el nuevo SDK de JavaScript de Amazon QuickSight

Reeditado por Platón
Reeditado por Platón

Fecha:

Vistas: 84

Amazon QuickSight es un servicio de inteligencia empresarial (BI) nativo de la nube totalmente administrado que facilita la conexión a sus datos, la creación de paneles e informes interactivos y el intercambio de estos con decenas de miles de usuarios, ya sea dentro de QuickSight o integrado en su aplicación o sitio web. .

QuickSight lanzó recientemente una nueva versión principal de su Embedding SDK (v2.0) para mejorar la experiencia del desarrollador al incorporar QuickSight en su aplicación o sitio web. QuickSight SDK v2.0 agrega varias mejoras de personalización, como un precargador opcional y nuevos enlaces externos para administrar las opciones de deshacer, rehacer, imprimir y parámetros. Además, hay reescrituras importantes para ofrecer mejoras centradas en el desarrollador, incluida la verificación de tipos estáticos, validación de tiempo de ejecución mejorada, coherencia sólida en los patrones de llamadas y encadenamiento de eventos optimizado.

El nuevo SDK admite la finalización de código mejorada cuando se integra con IDE a través de su adopción de TypeScript y el recién introducido frameOptions y contentOptions, que segmentan las opciones de incorporación en parámetros unificados para todas las experiencias de incorporación y parámetros únicos para cada experiencia de incorporación, respectivamente. Además, SDK v2.0 ofrece una mayor visibilidad al proporcionar nueva información y advertencias específicas de la experiencia dentro del SDK. Esto aumenta la transparencia y los desarrolladores pueden monitorear y manejar nuevos estados de contenido.

QuickSight SDK v2.0 se modernizó mediante el uso de promesas para todas las acciones, por lo que los desarrolladores pueden usar funciones asíncronas y de espera para una mejor gestión de eventos. Las acciones se estandarizan aún más para devolver una respuesta tanto para las acciones de solicitud de datos como para las que no lo son, de modo que los desarrolladores tengan una visibilidad completa del protocolo de enlace de la aplicación de extremo a extremo.

Además del nuevo SDK, también estamos introduciendo la persistencia del estado para la integración de la consola y el tablero basado en el usuario. El GenerateEmbedUrlForRegisteredUser La API se actualiza para admitir esta función y mejora la experiencia del usuario final y la interactividad en el contenido incrustado.

Descripción general de la función SDK

QuickSight SDK v2.0 ofrece nuevas funcionalidades además de mejorar la experiencia de los desarrolladores. En esta versión se han añadido las siguientes funcionalidades:

  • Las acciones de deshacer, rehacer y restablecer del tablero ahora se pueden invocar desde la aplicación
  • Se puede agregar una animación de carga al contenedor del tablero mientras se carga el contenido del tablero.
  • La creación, el montaje y la falla del marco se comunican como eventos de cambio que la aplicación puede usar
  • Acciones getParameter() valores y setParameter() los valores se unifican, eliminando transformaciones de datos adicionales

Uso del nuevo SDK

La URL incrustada obtenida mediante el GenerateEmbedUrlForRegisteredUser or GenerateEmbedUrlForAnonymousUser Las API se pueden consumir en la aplicación usando el embedDashboard experiencia en SDK v2.0. Este método toma dos parámetros:

  • marcoOpciones – Este es un parámetro obligatorio y sus propiedades determinan las opciones del contenedor para incrustar un tablero:
    • url – La URL insertada generada usando GenerateEmbedUrlForRegisteredUser or GenerateEmbedUrlForAnonymousUser API
    • envase - El padre HTMLElement para incrustar el tablero
  • opciones de contenido – Este es un parámetro opcional que controla la configuración regional del tablero y captura eventos del SDK.

El siguiente código de ejemplo usa los parámetros anteriores para insertar un tablero:

<html> <head> <!-- ... --> <script src=”https://unpkg.com/amazon-quicksight-embedding-sdk@2.0.0/dist/quicksight-embedding-js-sdk.min.js"></script> <!-- ... --> <script> (async () => { const { createEmbeddingContext, } = window.QuickSightEmbedding; const embeddingContext = await createEmbeddingContext(); const frameOptions = { url: '<YOUR_EMBED_URL>', container: '#your-embed-container' }; const contentOptions = { toolbarOptions: { reset: true, undoRedo: true, } }; embeddedDashboard = await EmbeddingContext.embedDashboard(frameOptions, contentOptions); })(); </script> </head> <body> <div id="your-embed-container"></div> </body>
</html>

Renderice una animación de carga mientras se carga el tablero

SDK v2.0 permite una opción para representar una animación de carga en el contenedor iFrame mientras se carga el tablero. Esto mejora la experiencia del usuario al sugerir que la carga de recursos está en progreso y dónde aparecerá, y elimina cualquier latencia percibida.

Puede habilitar una animación de carga usando el withIframePlaceholder opción en el frameOption parámetro:

const frameOptions = { url: '<YOUR_EMBED_URL>', container: '#your-embed-container', withIframePlaceholder: true
}

Esta opción es compatible con todas las experiencias de inserción.

Supervisar los cambios en el estado del código SDK

SDK v2.0 admite una nueva devolución de llamada onChange, que regresa eventNames junto con el correspondiente eventCodes para indicar errores, advertencias o información del SDK.

Puede usar los eventos devueltos por la devolución de llamada para monitorear el estado de creación de marcos y el estado del código devuelto por el SDK. Por ejemplo, si el SDK devuelve un error cuando se usa una URL insertada no válida, puede usar un texto o una imagen de marcador de posición en lugar de la experiencia insertada para notificar al usuario.

Las siguientes eventNames y eventCodes se devuelven como parte de la onChange devolución de llamada cuando hay un cambio en el estado del código SDK.

nombre del evento código de evento
ERROR FRAME_NOT_CREATED: se invoca cuando falla la creación del elemento iframe
NO_BODY: se invoca cuando no hay ningún elemento de cuerpo en el HTML de alojamiento
NO_CONTAINER: se invoca cuando no se encuentra el contenedor de experiencia
NO_URL: se invoca cuando no se proporciona ninguna URL en las opciones de marco
INVALID_URL: se invoca cuando la URL proporcionada no es una URL válida para la experiencia
INFO FRAME_STARTED: invocado justo antes de que se cree el iframe
FRAME_MOUNTED: se invoca después de que el iframe se agregue al contenedor de experiencia
FRAME_LOADED: invocado después de que el elemento iframe emitiera el evento de carga
WARN UNRECOGNIZED_CONTENT_OPTIONS: se invoca cuando las opciones de contenido de la experiencia contienen propiedades no reconocidas
UNRECOGNIZED_EVENT_TARGET: se invoca cuando se recibe un mensaje con un objetivo de evento no reconocido

Ver el siguiente código:

const frameOptions = { url: '<YOUR_EMBED_URL>', container: '#your-embed-container', withIframePlaceholder: true onChange: (changeEvent, metadata) => { switch (changeEvent.eventName) { case 'ERROR': { document.getElementById("your-embed-container").append('Unable to load Dashboard at this time.'); break; } } } }

Supervise las interacciones en los paneles integrados

Otra devolución de llamada compatible con SDK v2.0 es onMessage, que devuelve información sobre eventos específicos dentro de una experiencia integrada. El eventName devuelto depende del tipo de experiencia de incrustación utilizada y permite a los desarrolladores de aplicaciones invocar código personalizado para eventos específicos.

Por ejemplo, puede monitorear si un tablero incrustado está completamente cargado o invocar una función personalizada que registra los valores de los parámetros que los usuarios finales establecen o cambian dentro del tablero. Su aplicación ahora puede funcionar sin problemas con SDK v2.0 para rastrear y reaccionar a las interacciones dentro de una experiencia integrada.

El eventNames devueltos son específicos de la experiencia de inserción utilizada. La siguiente eventNames son para la experiencia de incrustación del tablero. para adicional eventNames, Visite el Repositorio GitHub.

  • CONTENT_LOADED
  • ERROR_OCCURRED
  • PARAMETERS_CHANGED
  • SELECTED_SHEET_CHANGED
  • SIZE_CHANGED
  • MODAL_OPENED

Ver el siguiente código:

const contentOptions = { onMessage: async (messageEvent, experienceMetadata) => { switch (messageEvent.eventName) { case 'PARAMETERS_CHANGED': { ….. // Custom code break; }
…
}

Iniciar la impresión del tablero desde la aplicación

La nueva versión del SDK admite iniciar deshacer, rehacer, restablecer e imprimir desde la aplicación principal, sin tener que agregar la barra de navegación integrada QuickSight nativa. Esto permite a los desarrolladores flexibilidad para agregar botones personalizados o lógica de aplicación para controlar e invocar estas opciones.

Por ejemplo, puede agregar un botón independiente en su aplicación que permita a los usuarios finales imprimir un tablero incrustado, sin mostrar un ícono de impresión o una barra de navegación dentro del marco incrustado. Esto se puede hacer usando el initiatePrint acción:

embeddedDashboard.initiatePrint();

El siguiente ejemplo de código muestra una animación de carga, el estado del código SDK y el monitoreo de la interacción del tablero, junto con el inicio de la impresión del tablero desde la aplicación:

<!DOCTYPE html>
<html lang="en"> <head> <script src=" https://unpkg.com/amazon-quicksight-embedding-sdk@2.0.0/dist/quicksight-embedding-js-sdk.min.js "></script> <title>Embedding demo</title> <script> $(document).ready(function() { var embeddedDashboard; document.getElementById("print_button").onclick = function printDashboard() { embeddedDashboard.initiatePrint(); } function embedDashboard(embedUrl) { const { createEmbeddingContext } = window.QuickSightEmbedding; (async () => { const embeddingContext = await createEmbeddingContext(); const messageHandler = (messageEvent) => { switch (messageEvent.eventName) { case 'CONTENT_LOADED': { document.getElementById("print_button").style.display="block"; break; } case 'ERROR_OCCURRED': { console.log('Error occurred', messageEvent.message); break; } case 'PARAMETERS_CHANGED': { // Custom code.. break; } } } const frameOptions = { url: '<YOUR_EMBED_URL>', container: document.getElementById("dashboardContainer"), width: "100%", height: "AutoFit", loadingHeight: "200px", withIframePlaceholder: true, onChange: (changeEvent, metadata) => { switch (changeEvent.eventName) { case 'ERROR': { document.getElementById("dashboardContainer").append('Unable to load Dashboard at this time.'); break; } } } } const contentOptions = { locale: "en-US", onMessage: messageHandler } embeddedDashboard = await embeddingContext.embedDashboard(frameOptions, contentOptions); })(); } }); </Script> </head> <body> <div> <button type="button" id="print_button" style="display:none;">Print</button> </div> <div id="dashboardContainer"></div> </body>
</html>

persistencia del estado

Además del nuevo SDK, QuickSight ahora es compatible con la persistencia de estado para la integración de tableros y consolas. Persistencia del estado significa que cuando los lectores dividen y dividen los tableros incrustados con filtros, QuickSight persistirá en la selección del filtro hasta que regresen al tablero. Los lectores pueden continuar donde lo dejaron y no tienen que volver a seleccionar los filtros.

Actualmente, la persistencia del estado solo se admite para la experiencia de incorporación de la consola y el panel de control basado en el usuario (no anónimo).

Puede habilitar la persistencia del estado usando el FeatureConfigurations parámetro en el GenerateEmbedUrlForRegisteredUser API. FeatureConfigurations contiene StatePersistence estructura que se puede personalizar configurando Enabled as true or false.

La estructura de la API está a continuación:

generate-embed-url-for-registered-user aws-account-id <value> [session-lifetime-in-minutes <value>] user-arn <value> [cli-input-json | cli-input-yaml] [allowed-domains <value>] [generate-cli-skeleton <value>] experience-configuration <value> Dashboard InitialDashboardId <value> [FeatureConfigurations] [StatePersistence] Enabled <value> QuickSightConsole InitialPath <value> [FeatureConfigurations] [StatePersistence] Enabled <value>

El siguiente código deshabilita la persistencia del estado para la integración de la consola QuickSight:

aws quicksight generate-embed-url-for-registered-user --aws-account-id <AWS_Account_ID> --user-arn arn:aws:quicksight:us-east-1:<AWS_Account_ID>:user/<Namespace>/<QuickSight_User_Name>
--experience-configuration '{"QuickSightConsole": { "InitialPath": "/start/analyses", "FeatureConfigurations": {"StatePersistence": {"Enabled": false}}}}' --region <Region>

El siguiente código habilita la persistencia del estado para la incrustación del tablero QuickSight:

aws quicksight generate-embed-url-for-registered-user --aws-account-id <AWS_Account_ID> --user-arn arn:aws:quicksight:us-east-1:<AWS_Account_ID>:user/<Namespace>/<QuickSight_User_Name>
--experience-configuration '{"Dashboard": { "InitialDashboardId": “<Dashboard_ID>", "FeatureConfigurations": {"StatePersistence": {"Enabled": true}}}}' --region <Region>

Consideraciones

Tenga en cuenta lo siguiente cuando utilice estas funciones:

  • Para la incrustación de paneles, la persistencia del estado está deshabilitada de forma predeterminada. Para habilitar esta función, establezca Enabled parámetro en StatePersistence a la verdad
  • Para la incorporación de la consola, la persistencia del estado está habilitada de manera predeterminada. Para deshabilitar esta función, configure Enabled parámetro en StatePersistence a falso

Conclusión

Con la última iteración de QuickSight Embedding SDK, puede indicar cuándo se está cargando una experiencia integrada, monitorear y responder a los errores del SDK, observar los cambios y la interactividad, además de invocar acciones de deshacer, rehacer, restablecer e imprimir desde el código de la aplicación.

Además, puede habilitar la persistencia del estado para persistir en la selección de filtros para los lectores y permitirles continuar donde lo dejaron cuando vuelvan a visitar un tablero incrustado.

Para obtener información más detallada sobre el SDK y las opciones específicas de la experiencia, visite el Repositorio GitHub.

Sobre los autores

Raj Jayaraman es un arquitecto de soluciones especializado sénior para Amazon QuickSight. Raj se enfoca en ayudar a los clientes a desarrollar paneles de muestra, incorporar análisis y adoptar mejores prácticas y patrones de diseño de BI.

Mayank Agarwal es gerente de producto de Amazon QuickSight, el servicio de BI completamente administrado y nativo de la nube de AWS. Se enfoca en la administración de cuentas, el gobierno y la experiencia del desarrollador. Comenzó su carrera como ingeniero de software integrado desarrollando dispositivos portátiles. Antes de QuickSight, lideró equipos de ingeniería en Credence ID, desarrollando dispositivos integrados móviles personalizados y soluciones web utilizando los servicios de AWS que hacen que la identificación y el registro biométrico sean rápidos, intuitivos y rentables para el sector gubernamental, el cuidado de la salud y las aplicaciones de seguridad de transacciones.

Rohit Pujari es el jefe de producto de Embedded Analytics en QuickSight. Le apasiona dar forma al futuro de infundir experiencias ricas en datos en productos y aplicaciones que usamos todos los días. Rohit aporta una gran experiencia en análisis y aprendizaje automático al haber trabajado con empresas de datos líderes y sus clientes. Durante su tiempo libre, puedes encontrarlo haciendo fila en la heladería local para su segunda bola.

punto_img

Información más reciente

punto_img

Derechos de autor @ 2024 Plato Technologies Inc.