Navegue por las comunidades SaaS en Twitter, LinkedIn, Reddit, Discord, lo que sea y verá aparecer un tema común en muchas de ellas. Ese tema puede tener muchos nombres: BI, análisis, conocimientos, etc. Es natural, hacemos negocios, recopilamos datos, tenemos éxito o fracasamos. Queremos analizar todo eso, entender los datos que tenemos y tomar medidas. Esta necesidad ha producido muchos proyectos y herramientas que facilitan un poco la vida de cualquiera que quiera examinar los datos. Pero, cuando los humanos lo han hecho, los humanos quieren más. Y en el mundo de BI y análisis, "más" a menudo viene en forma de incrustación, marca, estilo personalizado y acceso, etc. Lo que termina significando más trabajo para los desarrolladores y más tiempo para rendir cuentas. Entonces, naturalmente, ha habido una necesidad de herramientas de BI que le permitan tenerlo todo.
Hagamos una lista de los desafíos que puede enfrentar como constructor y mantenedor de estos paneles:
- Desea que los paneles de control estén disponibles para usuarios finales o espectadores desde su propia aplicación o plataforma.
- Desea poder administrar diferentes colecciones de paneles (es decir, "integraciones")
- Desea poder otorgar derechos de usuario específicos a una colección de paneles y conjuntos de datos
- Quiere asegurarse de que los usuarios tengan acceso a los datos que solo son relevantes para ellos
Cumul.io proporciona una herramienta que llamamos Integraciones lo que ayuda a resolver estos desafíos. En este artículo, te explicaré qué son las integraciones y cómo configurarlas. Lo bueno es que para la mayoría de los puntos anteriores, se requiere un código mínimo y, en su mayor parte, se puede configurar dentro del Cumul.io UI.
Algunos antecedentes: integraciones
An moderna en Cumul.io es una estructura que define una colección de cuadros de mando destinados a ser utilizados juntos (por ejemplo, en la misma aplicación). También es lo que usamos para incrustar paneles en una aplicación. En otras palabras, para incrustar paneles en una aplicación, le damos acceso a la aplicación a la integración a la que pertenecen. Puede asociar paneles a una integración y administrar qué tipo de derechos de acceso tendrán los usuarios finales de la integración en estos paneles y los conjuntos de datos que utilizan. Un tablero puede ser parte de múltiples integraciones, pero puede tener diferentes derechos de acceso en diferentes integraciones. Cuando se trata de incrustar, hay varios SDK disponibles para simplificar la vida, independientemente de cómo se vea su pila. 😊
Una vez que tenga una cuenta Cumul.io y si es un "propietario" de una organización en Cumul.io, podrá administrar y mantener todas sus integraciones a través de la pestaña Integraciones. Echemos un vistazo a un ejemplo de cuenta de Cumul.io. A continuación, puede ver los cuadros de mando que podría haber creado un usuario de Cumul.io:
Aunque estos son todos los paneles que este usuario puede haber creado, es probable que no todos los paneles estén destinados a los mismos usuarios finales, o aplicación para el caso. Entonces, el propietario de esta cuenta de Cumul.io crearía y mantendría una Integración (¡o más!) 💪 Echemos un vistazo a cómo se vería eso para ellos:
Entonces, parece que el propietario de esta cuenta de Cumul.io mantiene dos aplicaciones separadas.
Ahora veamos cómo sería el proceso de crear una integración e incrustar sus paneles en una aplicación. La buena noticia es que, como se mencionó anteriormente, muchos de los pasos que deberá seguir se pueden realizar dentro de la interfaz de usuario de Cumul.io.
Descargo de responsabilidad: a los efectos de este artículo, me centraré únicamente en la parte de integración. Entonces, omitiré todo lo que tenga que ver con la creación y el diseño de paneles y comenzaremos con un conjunto prefabricado de paneles imaginarios.
Que estaremos haciendo:
Creando una Integración
Para simplificar, creemos solo una integración por ahora. Imaginemos que tenemos una plataforma de análisis que mantenemos para nuestra empresa. Hay tres paneles que queremos proporcionar a nuestros usuarios finales: el Panel de marketing, el Panel de ventas y el Panel de clientes potenciales.
Digamos que de todos los paneles de control que esta cuenta ha creado o a los que tiene acceso, para este proyecto en particular solo quieren usar lo siguiente:
nueva Integración
Para crear la integración, vamos a la pestaña Integraciones y seleccionamos Nueva Integración. El diálogo que aparece ya te dará una idea de cuáles serán tus próximos pasos:
Seleccionar paneles
A continuación, podrá seleccionar cuál de sus paneles se incluirá en esta integración. También podrá darle un nombre a la integración, que aquí he decidido que será apropiadamente "Integración muy importante":
Una vez que confirme su selección, tendrá la opción de definir un slug para cada panel (muy recomendable). Estos se pueden usar más adelante mientras se integran los paneles en su aplicación. Más tarde verá que las babosas facilitan la referencia a los paneles en su código de front-end y facilitan el reemplazo de los paneles si es necesario también (ya que no tendrá que preocuparse por las ID de los paneles en el código de front-end).
Derechos de acceso
A continuación, podrá establecer los derechos de acceso de la integración para los conjuntos de datos que utilizan sus paneles. Aquí configuramos esto en "Puede ver". Para obtener más información sobre los derechos de acceso y lo que implican, consulte nuestro asociar conjuntos de datos a integraciones:
Filtros y parámetros (y acceso de múltiples inquilinos)
Nota al margen: para ayudar con el acceso de múltiples inquilinos, lo que tendría sentido en esta configuración imaginaria, Cumul.io hace posible establecer parámetros y filtros en los conjuntos de datos que utiliza un tablero. Esto significa que cada usuario que inicie sesión en su plataforma de análisis solo verá los datos a los que tiene acceso personalmente en los paneles de control. Puede imaginar que en este escenario el acceso se basaría en el departamento para el que trabaja el usuario final en la empresa. Para obtener más información sobre cómo configurar la tenencia múltiple con Cumul.io, consulte nuestro artículo, "Multi-tenancy en paneles de Cumul.io con Auth0". Esto se puede hacer dentro del proceso de diseño del tablero (que estamos omitiendo), lo que facilita la visualización de lo que están haciendo los filtros. Pero aquí, configuraremos estos filtros en el proceso de creación de la integración.
Aquí, establecemos los filtros que pueden necesitar los conjuntos de datos. En este escenario, a medida que filtramos en función de los departamentos de los usuarios, definimos un department
parámetro y filtro basado en eso:
¡Y voilá! Una vez que haya terminado de configurarlos, habrá creado con éxito una integración. El siguiente diálogo le dará instrucciones sobre cuáles serán sus próximos pasos para incorporar su integración:
Ahora podrá ver esta nueva integración en su pestaña Integración. Aquí es también donde tendrá acceso rápido al ID de integración, que luego se utilizará para incrustar los paneles.
¡Buenas noticias! Una vez creada su integración, siempre puede editarla. Puede eliminar o agregar paneles, cambiar los slugs de los paneles o los derechos de acceso también. Por lo tanto, no tiene que preocuparse por crear nuevas integraciones a medida que su aplicación cambia y evoluciona. Y como la edición de una integración está dentro de la interfaz de usuario, no tendrá que preocuparse por que un desarrollador lo configure de nuevo. Los usuarios no técnicos pueden adaptar estas integraciones sobre la marcha.
Incrustar paneles
Veamos adónde queremos llegar. Queremos proporcionar los paneles dentro de una aplicación personalizada. Simple, el usuario inicia sesión en una aplicación, la aplicación tiene paneles, ven los paneles con los datos que pueden ver. Podría tener el siguiente aspecto, por ejemplo:
Alguien tenía una visión muy específica sobre cómo querían proporcionar los paneles al usuario final. Querían una barra lateral donde pudieran hojear cada uno de los tableros. También podría haber sido algo completamente diferente. En lo que nos centraremos es en cómo podemos incrustar estos paneles en nuestra aplicación, independientemente del aspecto de la aplicación host.
Cumul.io viene con un conjunto de SDK disponibles públicamente. Aquí te mostraré lo que harías si usaras el SDK de nodo. Echa un vistazo a nuestra documentos para desarrolladores para ver qué otros SDK están disponibles e instrucciones sobre cómo usarlos.
Paso 1: Genere tokens de SSO para sus usuarios finales
Antes de que pueda generar tokens SSO para sus usuarios finales, deberá asegurarse de crear una clave API y un token en Cumul.io. Puedes hacerlo desde tu perfil de Cumul.io. Debe ser el propietario de la organización con acceso a la integración el que cree y use esta clave de API y el token para realizar la solicitud de autorización de SSO. Una vez que haya hecho esto, primero creemos un cliente Cumul.io que se haría en el lado del servidor de la aplicación:
const Cumulio = require("cumulio"); const client = new Cumulio({ api_key: '<YOUR API KEY>', api_token: '<YOUR API TOKEN>',
});
Ahora podemos crear el token SSO para el usuario final. Para obtener más información sobre esta llamada API y los campos obligatorios, consulte nuestro documentación del desarrollador sobre la generación SSO fichas.
let promise = client.create('authorization', { integration_id: '<THE INTEGRATION ID>', type: 'sso', expiry: '24 hours', inactivity_interval: '10 minutes', username: '< A unique identifier for your end user >', name: '< end-user name >', email: '< end-user email >', suborganization: '< end-user suborganization >', role: 'viewer', metadata: {}
});
Aquí, observe cómo hemos agregado el opcional metadata
campo. Aquí es donde puede proporcionar los parámetros y valores con los que desea filtrar los conjuntos de datos de los paneles. En el ejemplo que hemos visto, hemos estado filtrando según el departamento, por lo que estaríamos agregando esto a los metadatos. Idealmente, obtendría esta información del proveedor de autenticación que utiliza. Ver un explicación detallada de cómo hemos hecho esto con Auth0.
Esta solicitud devolverá un objeto JSON que contiene un ID de autorización y un token que luego se usa como combinación de clave / token para incrustar paneles en el lado del cliente.
Algo más que opcionalmente puede agregar aquí que es bastante bueno es una propiedad de CSS. Esto le permitiría definir una apariencia personalizada para cada usuario (o grupo de usuarios). Para la misma aplicación, este es el aspecto que podría tener el Tablero de marketing para Angelina vs Brad:
Paso 2: incrustar
Saltamos un poco más allá. Creamos tokens de SSO para usuarios finales, pero aún no hemos integrado los paneles en la aplicación. Echemos un vistazo a eso. Primero, debe instalar e importar el Componente web.
import '@cumul.io/cumulio-dashboard';
Después de importar el componente, puede usarlo como si fuera una etiqueta HTML. Aquí es donde incrustará sus paneles:
<cumulio-dashboard dashboardId="< a dashboard id >" dashboardSlug="< a dashboard slug >" authKey="< SSO key from step 1 >" authToken="< SSO token from step 1 >">
</cumulio-dashboard>
Aquí tendrás algunas opciones. Puede proporcionar el ID del panel para cualquier panel que desee incrustar, o puede proporcionar el slug del panel que definimos en la configuración de Integración (por lo que lo recomiendo encarecidamente, es mucho más legible si lo hace de esta manera). Para obtener información más detallada sobre cómo insertar paneles, también puede consultar nuestro documentación del desarrollador.
Una buena manera de hacer este paso es, por supuesto, simplemente definir el esqueleto del componente del tablero en su archivo HTML y completar el resto desde el lado del cliente de su aplicación. He hecho lo siguiente, aunque, por supuesto, no es la única forma:
Agregué el componente del tablero con el ID. dashboard
:
<cumulio-dashboard id="dashboard"></cumulio-dashboard>
Luego, recuperé este componente en el código del cliente de la siguiente manera:
const dashboardElement = document.getElementById("dashboard");
Luego solicito el token SSO del lado del servidor de mi aplicación, que devuelve la clave y el token necesarios para agregar al componente del tablero. Supongamos que tenemos una función contenedora getDashboardAuthorizationToken()
que hace esto por nosotros y devuelve la respuesta de la solicitud de token de SSO del lado del servidor. A continuación, simplemente completamos el componente del tablero en consecuencia:
const authorizationToken = await getDashboardAuthorizationToken();
if (authorizationToken.id && authorizationToken.token) { dashboardElement.authToken = authorizationToken.token; dashboardElement.authKey = authorizationToken.id; dashboardElement.dashboardSlug = "marketing|sales|leads";
}
Observe cómo en los pasos anteriores elegí definir slugs para mis paneles que son parte de esta integración. Esto significa que puedo evitar buscar los ID del panel y agregar dashboardId
como uno de mis parámetros del dashboardElement
. En su lugar, puedo proporcionar una de las babosas marketing
, sales
or leads
y ya terminé! Por supuesto, tendría que configurar algún tipo de proceso de selección para su aplicación para decidir dónde y cuándo insertar qué panel.
¡Eso es amigos! Hemos creado con éxito una Integración en Cumul.io y en unas pocas líneas de código, hemos podido incrustar sus tableros en nuestra aplicación 🎉 Ahora imagine un escenario en el que tenga que mantener múltiples aplicaciones a la vez, ya sea dentro del misma empresa o independientes. Sea cual sea su escenario, estoy seguro de que puede imaginarse cómo si tiene una serie de cuadros de mando donde cada uno de ellos tiene que ir a diferentes lugares y cada uno de ellos tiene que tener diferentes derechos de acceso dependiendo de dónde se encuentren y así sucesivamente. .. Cómo puede salirse de control rápidamente. Las integraciones le permiten administrar esto de una manera simple y ordenada, todo en un solo lugar y, como puede ver, principalmente desde la interfaz de usuario de Cumul.io.
Hay mucho más que puede hacer aquí que no hemos analizado en detalle. Como agregar CSS y temas personalizados específicos del usuario. Tampoco analizamos cómo establecería los parámetros y filtros en los paneles de control, o cómo los usaría desde dentro de su aplicación de host para que tenga una configuración de múltiples inquilinos. A continuación, puede encontrar algunos enlaces a tutoriales y documentación útiles para estos pasos si está interesado.
Fuente: https://css-tricks.com/embedded-analytics-made-simple-with-cumul-io-integrations/
- '
- "
- &
- 11
- 7
- 9
- 98
- de la máquina
- Mi Cuenta
- la columna Acción
- Todos
- Analytics
- abejas
- applicación
- Aplicación
- aplicaciones
- artículo
- Autenticación
- autorización
- Poco
- branding
- constructor
- llamar al
- el cambio
- código
- Algunos
- Comunidades
- compañía
- componente
- Creamos
- página de información de sus operaciones
- datos
- Diseño
- detalle
- Developer
- desarrolladores
- discord
- termina
- Cara
- Terrenos
- filtros
- Nombre
- Focus
- formulario
- función
- candidato
- Grupo procesos
- esta página
- Cómo
- Como Hacer
- HTTPS
- Humanos
- idea
- importador
- info
- información
- Insights
- integración
- integraciones
- IT
- JavaScript
- Clave
- Etiqueta LinkedIn
- Lista
- Marketing
- nombres
- Neat
- noticias
- Optión
- Opciones
- organización
- Otro
- propietario
- plataforma
- producido
- Mi Perfil
- proyecto
- proyecta
- perfecta
- respuesta
- RESTO
- devoluciones
- SaaS
- ventas
- sentido
- set
- pólipo
- sencillos
- So
- RESOLVER
- Patrocinado
- el mundo
- tema
- equipo
- ficha
- Tokens
- Tutoriales
- ui
- us
- usuarios
- Ver
- visión
- QUIENES
- dentro de
- palabras
- Actividades:
- funciona
- mundo