Navegue pelas comunidades SaaS no Twitter, LinkedIn, Reddit, Discord, você escolhe e verá um tema comum aparecer em muitas delas. Esse tema pode ter vários nomes: BI, análises, insights e assim por diante. É natural, fazemos negócios, coletamos dados, temos sucesso ou fracassamos. Queremos analisar tudo isso, entender os dados que temos e agir. Essa necessidade produziu muitos projetos e ferramentas que facilitam um pouco a vida de quem deseja analisar os dados. Mas, quando os humanos o fazem, os humanos querem mais. E no mundo do BI e da análise, “mais” geralmente vem na forma de incorporação, branding, estilo e acesso personalizados e assim por diante. O que acaba significando mais trabalho para os desenvolvedores e mais tempo para prestar contas. Então, naturalmente, há uma necessidade de ferramentas de BI que permitam que você tenha tudo.
Vamos fazer uma lista dos desafios que você pode enfrentar como construtor e mantenedor desses painéis:
- Você deseja disponibilizar os painéis para usuários finais ou visualizadores em seu próprio aplicativo ou plataforma
- Você deseja poder gerenciar diferentes coleções de painéis (ou seja, “integrações”)
- Você deseja conceder direitos de usuário específicos a uma coleção de painéis e conjuntos de dados
- Você deseja garantir que os usuários tenham acesso apenas aos dados relevantes para eles
Cumul.io fornece uma ferramenta que chamamos Integrações o que ajuda a resolver esses desafios. Neste artigo, explicarei o que são integrações e como configurá-las. O legal é que para a maioria dos pontos acima, há um mínimo de código necessário e na maior parte pode ser configurado dentro do Cumul.io UI.
Alguns antecedentes — Integrações
An Moderna no Cumul.io é uma estrutura que define uma coleção de painéis destinados a serem usados em conjunto (por exemplo, no mesmo aplicativo). É também o que usamos para embutir painéis em um aplicativo. Em outras palavras, para incorporar dashboards em uma aplicação, damos à aplicação acesso à integração a que pertencem. Você pode associar painéis a uma integração e administrar que tipo de direitos de acesso os usuários finais da integração terão nesses painéis e nos conjuntos de dados que eles usam. Um painel pode fazer parte de múltiplas integrações, mas pode ter diferentes direitos de acesso em diferentes integrações. Quando se trata de incorporação, há vários SDKs disponíveis para simplificar a vida, independentemente da aparência da sua pilha. 😊
Depois de ter uma conta Cumul.io e ser “proprietário” de uma organização no Cumul.io, você poderá gerenciar e manter todas as suas integrações por meio da guia Integrações. Vamos dar uma olhada em um exemplo de conta Cumul.io. Abaixo você pode ver os Dashboards que um usuário Cumul.io pode ter criado:
Embora esses sejam todos os painéis que esse usuário possa ter criado, é provável que nem todos os painéis sejam destinados aos mesmos usuários finais ou aplicativos. Então, o proprietário desta conta Cumul.io criaria e manteria uma integração (ou mais!) 💪 Vamos dar uma olhada em como isso seria para eles:
Portanto, parece que o proprietário desta conta Cumul.io mantém dois aplicativos separados.
Agora vamos ver como seria o processo de criação de uma integração e incorporação de seus dashboards em uma aplicação. A boa notícia é que, como mencionado antes, muitas das etapas que você terá que realizar podem ser executadas na interface do Cumul.io.
Isenção de responsabilidade: para os fins deste artigo, focarei apenas na parte de integração. Então, pularei tudo relacionado à criação e design de painéis e começaremos com um conjunto pré-fabricado de painéis imaginários.
O que faremos:
Criando uma Integração
Para simplificar, vamos criar apenas uma integração por enquanto. Vamos imaginar que temos uma plataforma analítica que mantemos para nossa empresa. Existem três painéis que queremos fornecer aos nossos usuários finais: o Painel de Marketing, o Painel de Vendas e o Painel de Leads.
Digamos que de todos os painéis que esta conta criou ou aos quais tem acesso, para este projeto específico eles desejam usar apenas o seguinte:
nova Integração
Para criar a integração, vamos até a aba Integrações e selecionamos Nova Integração. O diálogo que aparece já lhe dará uma ideia de quais serão seus próximos passos:
Selecionando Painéis
A seguir, você poderá selecionar quais dos seus dashboards serão incluídos nesta integração. Você também poderá dar um nome à Integração, que aqui decidi que será apropriadamente “Integração Muito Importante”:
Depois de confirmar sua seleção, você terá a opção de definir um slug para cada painel (altamente recomendado). Eles podem ser usados posteriormente ao incorporar os painéis em seu aplicativo. Mais tarde, você verá que os slugs facilitam a referência aos painéis em seu código front-end e também facilitam a substituição dos painéis, se necessário (já que você não precisará se preocupar com os IDs dos painéis no código front-end).
Direitos de acesso
Você poderá então definir os direitos de acesso da integração para os conjuntos de dados que seus painéis usam. Aqui definimos isso como “Pode visualizar”. Para obter mais informações sobre direitos de acesso e o que eles implicam, consulte nosso associando conjuntos de dados a integrações:
Filtros e parâmetros (e acesso multilocatário)
Nota lateral: Para ajudar com o acesso multilocatário — o que faria sentido nesta configuração imaginária — Cumul.io torna possível definir parâmetros e filtros em conjuntos de dados que um painel usa. Isso significa que cada usuário que fizer login em sua plataforma de análise verá apenas os dados aos quais tem acesso pessoalmente nos painéis. Você pode imaginar que neste cenário o acesso seria baseado em qual departamento o usuário final trabalha na empresa. Para saber mais sobre como configurar multilocação com Cumul.io, confira nosso artigo, “Multilocação em painéis Cumul.io com Auth0”. Isso pode ser feito dentro do processo de design do painel (que estamos ignorando), o que facilita a visualização do que os filtros estão fazendo. Mas aqui iremos definir esses filtros no processo de criação da Integração.
Aqui, definimos os filtros que os conjuntos de dados podem precisar ter. Neste cenário, ao filtrarmos com base nos departamentos dos usuários, definimos um department
parâmetro e filtro com base nisso:
E pronto! Assim que terminar de configurá-los, você criou uma integração com sucesso. A próxima caixa de diálogo lhe dará instruções sobre quais serão os próximos passos para incorporar sua integração:
Agora você poderá ver esta nova integração na sua aba Integração. É aqui também que você terá acesso rápido ao ID de Integração, que posteriormente será utilizado para incorporação dos dashboards.
Boas notícias! Depois que sua integração for criada, você poderá editá-la a qualquer momento. Você pode remover ou adicionar painéis, alterar os slugs dos painéis ou também os direitos de acesso. Assim, você não precisa se preocupar em criar novas integrações à medida que seu aplicativo muda e evolui. E como a edição de uma integração está toda dentro da UI, você não precisará se preocupar em ter um desenvolvedor configurando tudo novamente. Usuários não técnicos podem adaptar essas integrações em qualquer lugar.
Incorporando painéis
Vamos ver onde queremos chegar. Queremos fornecer os painéis em um aplicativo personalizado. Simples, o usuário faz login em um aplicativo, o aplicativo tem painéis, eles veem os painéis com os dados que têm permissão para ver. Poderia ser parecido com o seguinte, por exemplo:
Alguém teve uma visão muito específica sobre como queria fornecer os painéis ao usuário final. Eles queriam uma barra lateral onde pudessem navegar por cada um dos painéis. Poderia ter sido algo completamente diferente também. Vamos nos concentrar em como podemos incorporar esses painéis em nosso aplicativo, independentemente da aparência do aplicativo host.
Cumul.io vem com um conjunto de SDKs disponíveis publicamente. Aqui vou mostrar o que você faria se usasse o SDK do nó. Confira nosso documentos do desenvolvedor para ver quais outros SDKs estão disponíveis e instruções sobre como usá-los.
Etapa 1: gerar tokens SSO para seus usuários finais
Antes de gerar tokens SSO para seus usuários finais, você precisará criar uma chave de API e um token no Cumul.io. Você pode fazer isso em seu perfil Cumul.io. Deve ser o proprietário da organização com acesso à integração que cria e usa esta chave de API e token para fazer a solicitação de autorização de SSO. Depois de fazer isso, vamos primeiro criar um cliente Cumul.io que seria feito no lado do servidor da aplicação:
const Cumulio = require("cumulio"); const client = new Cumulio({ api_key: '<YOUR API KEY>', api_token: '<YOUR API TOKEN>',
});
Agora podemos criar o token SSO para o usuário final. Para obter mais informações sobre esta chamada de API e os campos obrigatórios, consulte nosso documentação do desenvolvedor sobre geração SSO tokens.
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: {}
});
Aqui, observe como adicionamos o opcional metadata
campo. É aqui que você pode fornecer os parâmetros e valores com os quais deseja filtrar os conjuntos de dados dos painéis. No exemplo que vimos, filtramos com base no departamento, então adicionaríamos isso aos metadados. Idealmente, você obteria essas informações do provedor de autenticação usado. Ver um explicação detalhada sobre como fizemos isso com Auth0.
Esta solicitação retornará um objeto JSON que contém um ID de autorização e um token que será usado posteriormente como a combinação de chave/token para incorporar painéis no lado do cliente.
Outra coisa que você pode adicionar opcionalmente aqui e que é bem legal é uma propriedade CSS. Isso permitiria definir uma aparência personalizada para cada usuário (ou grupo de usuários). Para o mesmo aplicativo, o Painel de Marketing poderia ser assim para Angelina x Brad:
Etapa 2: incorporar
Avançamos um pouco lá. Criamos tokens SSO para usuários finais, mas ainda não incorporamos os painéis ao aplicativo. Vamos dar uma olhada nisso. Primeiro, você deve instalar e importar o Componente web.
import '@cumul.io/cumulio-dashboard';
Após importar o componente você poderá utilizá-lo como se fosse uma tag HTML. É aqui que você incorporará seus painéis:
<cumulio-dashboard dashboardId="< a dashboard id >" dashboardSlug="< a dashboard slug >" authKey="< SSO key from step 1 >" authToken="< SSO token from step 1 >">
</cumulio-dashboard>
Aqui você terá algumas opções. Você pode fornecer o ID do painel para qualquer painel que deseja incorporar ou pode fornecer o slug do painel que definimos na configuração da integração (é por isso que recomendo fortemente isso, é muito mais legível fazer desta forma). Para obter informações mais detalhadas sobre como incorporar painéis, você também pode conferir nosso documentação do desenvolvedor.
Uma boa maneira de realizar essa etapa é apenas definir o esqueleto do componente do painel em seu arquivo HTML e preencher o restante no lado do cliente do seu aplicativo. Eu fiz o seguinte, embora obviamente não seja a única maneira:
Adicionei o componente do painel com o ID dashboard
:
<cumulio-dashboard id="dashboard"></cumulio-dashboard>
Então, recuperei esse componente no código do cliente da seguinte maneira:
const dashboardElement = document.getElementById("dashboard");
Em seguida, solicito o token SSO do lado do servidor do meu aplicativo, que retorna a chave e o token necessários para adicionar ao componente do painel. Vamos supor que temos uma função wrapper getDashboardAuthorizationToken()
que faz isso para nós e retorna a resposta da solicitação de token SSO do lado do servidor. A seguir, simplesmente preenchemos o componente do painel de acordo:
const authorizationToken = await getDashboardAuthorizationToken();
if (authorizationToken.id && authorizationToken.token) { dashboardElement.authToken = authorizationToken.token; dashboardElement.authKey = authorizationToken.id; dashboardElement.dashboardSlug = "marketing|sales|leads";
}
Observe como nas etapas anteriores optei por definir slugs para meus dashboards que fazem parte dessa integração. Isso significa que posso evitar procurar IDs de painel e adicionar dashboardId
como um dos meus parâmetros do dashboardElement
. Em vez disso, posso apenas fornecer uma das lesmas marketing
, sales
or leads
e pronto! É claro que você teria que configurar algum tipo de processo de seleção em seu aplicativo para decidir onde e quando incorporar qual painel.
É isso aí pessoal! Criamos com sucesso uma Integração no Cumul.io e em poucas linhas de código, conseguimos incorporar seus dashboards em nossa aplicação 🎉 Agora imagine um cenário onde você tem que manter múltiplas aplicações ao mesmo tempo, seja para dentro do mesma empresa ou empresas separadas. Seja qual for o seu cenário, tenho certeza que você pode imaginar como se você tivesse vários painéis onde cada um deles tem que ir para lugares diferentes e cada um deles tem que ter direitos de acesso diferentes dependendo de onde estão e assim por diante. .. Como isso pode sair rapidamente do controle. As integrações permitem que você gerencie isso de maneira simples e organizada, tudo em um só lugar e, como você pode ver, principalmente na interface do Cumul.io.
Há muito mais que você pode fazer aqui e que não analisamos em detalhes. Como adicionar temas personalizados e CSS específicos do usuário. Também não explicamos como você definiria parâmetros e filtros em painéis ou como usá-los em seu aplicativo host para ter uma configuração multilocatário. Abaixo você pode encontrar alguns links para tutoriais e documentação úteis para essas etapas, se estiver interessado.
Fonte: https://css-tricks.com/embedded-analytics-made-simple-with-cumul-io-integrations/
- '
- "
- &
- 11
- 7
- 9
- 98
- Acesso
- Conta
- Açao Social
- Todos os Produtos
- analítica
- api
- app
- Aplicação
- aplicações
- artigo
- Autenticação
- autorização
- Pouco
- marca
- construtor
- negócio
- chamada
- alterar
- código
- comum
- Comunidades
- Empresa
- componente
- Criar
- painel de instrumentos
- dados,
- Design
- detalhe
- Developer
- desenvolvedores
- discórdia
- termina
- Rosto
- Campos
- filtros
- Primeiro nome
- Foco
- formulário
- função
- Bom estado, com sinais de uso
- Grupo
- SUA PARTICIPAÇÃO FAZ A DIFERENÇA
- Como funciona o dobrador de carta de canal
- Como Negociar
- HTTPS
- Humanos
- idéia
- importador
- info
- INFORMAÇÕES
- insights
- integração
- integrações
- IT
- JavaScript
- Chave
- Lista
- Marketing
- nomes
- Arrumado
- notícias
- Opção
- Opções
- organização
- Outros
- proprietário
- plataforma
- Produzido
- Perfil
- projeto
- projetos
- propriedade
- resposta
- DESCANSO
- Retorna
- SaaS
- vendas
- sentido
- conjunto
- contexto
- simples
- So
- RESOLVER
- Patrocinado
- o mundo
- tema
- tempo
- token
- Tokens
- tutoriais
- ui
- us
- usuários
- Ver
- visão
- QUEM
- dentro
- palavras
- Atividades:
- trabalho
- mundo