cubo.js, A estrutura do Painel de código aberto: guia final

cubo.js é uma estrutura de código aberto para a construção de aplicativos analíticos da web. Ele é usado principalmente para criar ferramentas internas de business intelligence ou para adicionar análises voltadas para o cliente a um aplicativo existente. Na maioria dos casos, o primeiro passo para criar esse aplicativo é um painel de análise. Geralmente começa com— ” vamos adicionar um painel de análise ao nosso painel de administração.”Então, como sempre acontece no desenvolvimento de software, as coisas ficam mais complicadas, muito mais complicadas.

quando começamos a trabalhar no Cube.js, queríamos construir uma ferramenta, que é simples de iniciar, mas dimensiona facilmente em recursos, complexidade e volume de dados. Cubo.js coloca uma base sólida para o seu futuro sistema analítico, seja um aplicativo independente ou incorporado ao existente.

você pode pensar sobre este tutorial como ” Cubo.js 101.”Vou guiá-lo pelas etapas básicas de projetar o primeiro painel do banco de dados para visualizações.

a demonstração ao vivo do painel final está disponível aqui. O código-fonte completo está no Github.

Arquitetura

a maioria dos aplicativos da web modernos é construída como um aplicativo de página única, onde o front-end é separado do back-end. O back-end também geralmente é dividido em vários serviços, seguindo uma arquitetura de microsserviço.

cubo.js abraça essa abordagem. Convencionalmente você corre cubo.js Backend como um serviço. Ele gerencia a conexão com seu banco de dados, incluindo fila de consultas, Cache, pré-agregação e muito mais. Ele também expõe uma API para seu aplicativo frontend para criar painéis e outros recursos de análise.

o backend

Analytics começa com os dados e os dados residem em um banco de dados. Essa é a primeira coisa que precisamos ter no lugar. Você provavelmente já tem um banco de dados para o seu aplicativo e, geralmente, não há problema em usar para análises. Bancos de dados populares modernos, como Postgres ou MySQL, são adequados para uma carga de trabalho analítica simples. Por simples, quero dizer um volume de dados com menos de 1 bilhão de linhas.

MongoDB também está bem, a única coisa que você precisa adicionar é o conector MongoDB para BI. Ele permite a execução de código SQL em cima de seus dados MongoDB. É gratuito e pode ser facilmente baixado do site MongoDB. Mais uma coisa a ter em mente é a replicação. É considerado uma prática ruim executar consultas de análise em seu banco de dados de produção principalmente por causa dos problemas de desempenho. Cubo.js pode reduzir drasticamente a quantidade de carga de trabalho de um banco de dados, mas ainda assim, eu recomendo conectar-se à réplica.

para resumir – se você usar Postgres ou MySQL, basta criar uma réplica e estamos prontos para ir. Se você usar o MongoDB-baixe o conector MongoDB para BI e crie uma réplica.

se você não tiver nenhum dado para o painel, poderá carregar nosso conjunto de dados Postgres de E-commerce de exemplo.

 $ curl http://cube.dev/downloads/ecom-dump.sql > ecom-dump.como baixar e instalar Minecraft no minecraft.sql 
 

agora, como temos dados no banco de dados, estamos prontos para criar o cubo.serviço de back-end js. Execute os seguintes comandos em seu terminal:

 $ npm install-g cubejs-cli
$ cubejs create dashboard-backend-d postgres
 

os comandos acima install Cube.js CLI e criar um novo serviço, configurado para trabalhar com banco de dados Postgres.

cubo.js usa variáveis de ambiente para configuração. Ele usa variáveis de ambiente começando com CUBEJS_. Para configurar a conexão com nosso banco de dados, precisamos especificar o tipo e o nome do banco de dados. No cubo.a pasta do projeto js substitui o conteúdo de .env pelo seguinte:Como baixar e instalar Minecraft no minecraft 1.1.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2esquema de dados js

o próximo passo é criar um cubo.esquema de dados js. Cubo.js usa o esquema de dados para gerar um código SQL, que será executado em seu banco de dados. O esquema de dados não é um substituto para SQL. Ele é projetado para tornar o SQL reutilizável e dar-lhe uma estrutura, preservando todo o seu poder. Os elementos básicos do esquema de dados são measures e dimensions.

a medida é referida como dados quantitativos, como o número de unidades vendidas, o número de visitas exclusivas, o lucro e assim por diante.

a dimensão é referida como dados categóricos, como estado, Sexo, nome do produto ou unidades de tempo (por exemplo, dia, semana, mês).

convencionalmente, os arquivos de esquema estão localizados na pasta schema. Aqui está um exemplo do esquema, que pode ser usado para descrever os dados dos usuários.

 cubo(`Usuários`, { 
 sql: `SELECT * FROM users`, 
 medidas: { 
 count: { 
 sql: `id` 
 tipo: `contagem` 
 } 
 }, 
 dimensões: { 
 cidade: { 
 sql: `a cidade`, 
 tipo: `string` 
 }, 
 signedUp: { 
 sql: `created_at`, 
 tipo: "o tempo` 
 }, 
 companyName: { 
 sql: `company_name`, 
 tipo: `string` 
 } 
 } 
 }); 

Agora, com o esquema acima, no local, podemos enviar consultas para o Cubo.js back-end sobre os dados dos usuários. Cubo.as consultas js são objetos javascript simples. Geralmente tem um ou mais measures, dimensions e timeDimensions.

se quisermos responder à pergunta ” Onde estão nossos usuários?”podemos enviar a seguinte consulta para o cubo.js:

 { 
 medidas: , 
 dimensões: 
 } 

Cubo.js irá gerar o SQL necessário com base no esquema, executá-lo e enviar o resultado de volta.Vamos criar uma consulta um pouco mais complicada. Podemos adicionar um timeDimensions para ver como a proporção de diferentes cidades tem mudado a cada mês durante o último ano. Para fazer isso, adicionaremos uma dimensão de tempo signedUp, agruparemos mensalmente e filtraremos apenas as inscrições do ano passado.

 { 
 medidas: , 
 > dimensões: , 
 timeDimensions: 
 }] 
 } 

Cubo.js pode gerar esquemas simples com base nas tabelas do seu banco de dados. Vamos gerar esquemas que precisamos para o nosso painel e, em seguida, iniciar um servidor dev.

$ cubejs gerar-t usuários, pedidos
 $ npm run dev 
 

você pode inspecionar esquemas gerados e enviar consultas de teste abrindo um playground de desenvolvimento em http://localhost:4000.

Frontend

construiremos nosso frontend e painel com React, usando o cubo.cliente js React. Mas você pode usar qualquer estrutura ou apenas JavaScript baunilha para construir um frontend com Cube.js. Este tutorial mostra como criar um painel em javascript puro.Vamos configurar tudo usando o aplicativo Create React, que é oficialmente suportado pela equipe React. Ele empacota todas as dependências do aplicativo React e facilita o início de um novo projeto. Execute os seguintes comandos no terminal:

$ npx criar-reagir-aplicativo de painel-frontend
$ cd de painel-frontend
$ npm início

A última linha começa um servidor na porta 3000 e abre o seu navegador da web em http://localhost:3000.

vamos construir nossa interface do usuário com Reactstrap, que é um wrapper React para Bootstrap 4. Instale Reactstrap e Bootstrap do NPM. Reactstrap não inclui Bootstrap CSS, então isso precisa ser instalado separadamente:

 $ npm install reactstrap bootstrap --salvar 

Importar Bootstrap CSS na tag src/index.js arquivo antes de importar ./index.css:

 importar " bootstrap/dist/css/bootstrap.minuto.css'; 

agora estamos prontos para usar os componentes Reactstrap.

o próximo passo é instalar o Cube.cliente js para buscar os dados do servidor e nossa biblioteca de visualização para exibi-los. Para este tutorial, vamos usar recargas. Cubo.js é Visualização agnóstica, o que significa que você pode usar qualquer biblioteca que desejar. Também usaremos momento e numeral para formatar bem datas e números.

 $ npm install -- save @ cubejs-client / core @ cubejs-client / react recarrega o número do momento 

finalmente, terminamos com dependências, então vamos em frente e crie nosso primeiro gráfico.Substitua o conteúdo de src/App.js com as seguintes:

 importação de Reagir, { Componente } de "reagir"; 
 importar { 
 BarChart, 
 Bar, 
 Eixo x 
 eixo y, 
 Dica de ferramenta, 
 ResponsiveContainer
 } de "recharts"; 
 import cubejs from "@cubejs-client/core"; 
 import moment from "moment"; 
 import { QueryRenderer } from "@cubejs-client/react"; 
 const cubejsApi = cubejs(process.env.REACT_APP_CUBEJS_TOKEN, { 
 apiUrl: process.env.REACT_APP_API_URL 
 }); 
 const dateFormatter = item => moment(item).format("MMM YY"); 
 class App extends Component { 
 render() { 
 return ( 
 <QueryRenderer 
 query={{ 
 measures: , 
 timeDimensions: , 
 granularidade: "mês" 
 } 
 ] 
 }} 
 cubejsApi={cubejsApi} 
 render={({ conjunto de resultados }) => { 
 if (!como baixar e instalar o ... .."; 
 } 
 retorno ( 
 <ResponsiveContainer width="100%" height={300}> 
 <BarChart dados={conjunto de resultados.chartPivot()}> 
 <Eixo dataKey="x" tickFormatter={dateFormatter} /> 
 <eixo y /> 
 <Descrição labelFormatter={dateFormatter} /> 
 <Barra de dataKey="Encomendas.contagem de" fill="rgba(106, 110, 229)" /> 
 </BarChart> 
 </ResponsiveContainer> 
 ); 
 }} 
 /> 
 ); 
 } 
 } 
 exportação de Aplicativo padrão; 

Você pode conferir este exemplo no CodeSandbox abaixo.

vamos analisar mais profundamente como carregamos dados e desenhamos o gráfico.

primeiro, estamos inicializando o cubo.JS API client:

 const cubejsApi = cubejs (process.env.REACT_APP_CUBEJS_TOKEN, {
 
 apiUrl: processo.env.REACT_APP_API_URL 
 }); 

criar um .arquivo env com as seguintes credenciais. No ambiente de desenvolvimento, Cube.js não impõe o uso do token para autorizar consultas, então você pode usar qualquer string para o seu token aqui. Você pode aprender mais sobre como usar e gerar tokens no ambiente de produção aqui nos documentos.

 
 REACT_APP_CUBEJS_TOKEN = YOUR-TOKEN 
REACT_APP_API_URL=http://localhost:4000/cubejs-api/v1 

em seguida, estamos usando o cubo QueryRenderer.componente js React para carregar dados de Pedidos.

 <QueryRenderer 
 query={{ 
 medidas: , 
 timeDimensions: , 
 granularidade: "mês" 
 } 
 ] 
 }} 
 cubejsApi={cubejsApi} 
 render={({ conjunto de resultados }) => { 
 // resultado renderizado 
 }} 
 /> 

QueryRenderer executa uma solicitação de API para o Cubo.js backend e usa a técnica render props para permitir que você renderize o resultado como quiser. Já cobrimos o formato de consulta acima, mas caso você queira atualizar—aqui está a referência completa do formato de consulta.

o parâmetro render do QueryRenderer é uma função do tipo ({error, resultSet, isLoading}) => React.Node. A saída desta função será renderizada pelo QueryRenderer. Um resultSet é um objeto que contém dados obtidos da consulta. Se este objeto não estiver definido, isso significa que os dados ainda estão sendo buscados.

resultSet fornece vários métodos para manipulação de dados, mas no nosso caso, precisamos apenas do método chartPivot, que retorna dados em um formato esperado por recargas.

vamos plotar os dados dos pedidos como um gráfico de barras dentro de um contêiner responsivo.

 
 se (!como baixar e instalar o ... .."; 
 } 
 retorno ( 
 <ResponsiveContainer width="100%" height={300}> 
 <BarChart dados={conjunto de resultados.chartPivot()}> 
 <Eixo dataKey="x" tickFormatter={dateFormatter} /> 
 <eixo y /> 
 <Descrição labelFormatter={dateFormatter} /> 
 <Barra de dataKey="Encomendas.contagem de" fill="rgba(106, 110, 229)" /> 
 </BarChart> 
 </ResponsiveContainer> 
 ); 

construindo um painel

aprendemos a construir um único gráfico com Cube.JS e recarrega, e agora estamos prontos para começar a construir todo o painel. Existem algumas práticas recomendadas em relação ao design do layout do painel. A prática comum é colocar as métricas mais importantes e de alto nível no topo como gráficos de valor único, às vezes chamados de KPIs, e depois listar as quebras relevantes dessas métricas.

aqui está a captura de tela do nosso painel final com KPIs no topo, seguidos por gráficos de barras e linhas.

Primeiro, vamos refatorar nosso gráfico e extrair o código comum em um componente <Chart /> reutilizável. Crie um arquivo src/Chart.js com o seguinte conteúdo:

 import React from "react";
 
import { Card, CardTitle, CardBody, CardText } from "reactstrap";
 
 import { QueryRenderer } from "@cubejs-client / react"; 
 const Chart = ({ cubejsApi, title, query, render }) => ( 
 <Card> 
 <CardBody> 
 <CardTitle tag="h5">{title}</CardTitle> 
 <CardText> 
 <QueryRenderer 
 query={query} 
 cubejsApi={cubejsApi} 
 render={({ resultSet }) => { 
 if (!resultSet) { 
 return <div className="loader" />; 
 } 
 return render(resultSet); 
 }} 
 /> 
 </CardText> 
 </CardBody> 
 </Cartão> 
 ); 
 exportação de Gráfico padrão; 

Seguinte, vamos usar este componente para criar o painel de instrumentos. Substitua o conteúdo de src/App.js pelo seguinte:

 import React, {Component } from "react"; 
 import { Container, Row, Col } from "reactstrap"; 
 import { 
 AreaChart, 
 Area, 
 XAxis, 
 YAxis, 
 Tooltip, 
 ResponsiveContainer, 
 Legend, 
 BarChart, 
 Bar 
 } from "recharts"; 
 import moment from "moment"; 
 import numeral from "numeral"; 
 import cubejs from "@cubejs-client/core"; 
 import Chart from "./Chart.js"; 
 const cubejsApi = cubejs(process.env.REACT_APP_CUBEJS_TOKEN, { 
 apiUrl: process.env.REACT_APP_API_URL 
 }); 
 
 const numberFormatter = item = > numeral(item).formato("0,0"); 
 const dateFormatter = item = > momento (item).formato ("MMM YY"); 
 const renderSingleValue = (resultSet, key) => ( 
 <H1 height={300}>{numberFormatter(resultSet.chartPivot ())}</h1> 
 ); 
 classe de App expande a Componente { 
 render() { 
 voltar ( 
 <Recipiente de fluido> 
 <Linha> 
 <Col sm="4"> 
 <Gráfico 
 cubejsApi={cubejsApi} 
 title="Total de Usuários" 
 query={{ medidas }} 
 render={resultSet => renderSingleValue(conjunto de resultados, "os Usuários.contagem")} 
 /> 
 </Col> 
 <Col sm="4"> 
 <Gráfico 
 cubejsApi={cubejsApi} 
 title="Total de Pedidos" 
 query={{ medidas }} 
 render={resultSet => renderSingleValue(conjunto de resultados, "as Ordens.contagem")} 
 /> 
 </Col> 
 <Col sm="4"> 
 <Gráfico 
 cubejsApi={cubejsApi} 
 title="Envio de Pedidos" 
 query={{ 
 medidas: , 
 filtros: 
 } 
 ] 
 }} 
 render = {resultSet = > renderSingleValue(resultSet, " Orders.contagem")} 
 /> 
 </Col> 
 </Linha> 
 <br /> 
 <br /> 
 <Linha> 
 <Col sm="6"> 
 <Gráfico 
 cubejsApi={cubejsApi} 
 title="Novos Usuários ao Longo do Tempo" 
 query={{ 
 medidas: , 
 timeDimensions: , 
 granularidade: "mês" 
 } 
 ] 
 }} 
 render={conjunto de resultados => ( 
 <ResponsiveContainer width="100%" height={300}> 
 <AreaChart dados={conjunto de resultados.chartPivot()}> 
 <Eixo dataKey="categoria" tickFormatter={dateFormatter} /> 
 <eixo y tickFormatter={numberFormatter} /> 
 <Descrição labelFormatter={dateFormatter} /> 
 <Área 
 tipo="monotone" 
 dataKey="Usuários.contagem" 
 nome="Usuários" 
 stroke="rgb(106, 110, 229)" 
 fill="rgba(106, 110, 229, .16)" 
 /> 
 </AreaChart> 
 </ResponsiveContainer> 
 )} 
 /> 
 </Col> 
 <Col sm="6"> 
 <Gráfico 
 cubejsApi={cubejsApi} 
 title="Pedidos por Status ao Longo do tempo" 
 query={{ 
 medidas: , 
 > dimensões: , 
 timeDimensions: , 
 granularidade: "mês" 
 } 
 ] 
 }} 
 render={conjunto de resultados => { 
 retorno ( 
 <ResponsiveContainer width="100%" height={300}> 
 <BarChart dados={conjunto de resultados.chartPivot()}> 
 <Eixo tickFormatter={dateFormatter} dataKey="x" /> 
 <eixo y tickFormatter={numberFormatter} /> 
 <Bar 
 stackId="a" 
 dataKey="expedida, as Ordens.contagem" 
 nome="Enviado" 
 fill="#7DB3FF" 
 /> 
 <Bar 
 stackId="a" 
 dataKey="processamento de Pedidos.contagem" 
 nome="Processamento" 
 fill="#49457B" 
 /> 
 <Bar 
 stackId="a" 
 dataKey="concluído, Ordens.contagem" 
 nome="Concluído" 
 fill="#FF7C78" 
 /> 
 <Legenda /> 
 <Descrição /> 
 </BarChart> 
 </ResponsiveContainer> 
 ); 
 }} 
 /> 
 </Col> 
 </Linha> 
 </Contentor> 
 ); 
 } 
 } 
 exportação de Aplicativo padrão; 

isso é o suficiente para construir o nosso primeiro painel. Experimente no CodeSanbox abaixo.

próximos passos

construímos um simples painel de prova de conceito com Cube.js. Você pode conferir a demonstração ao vivo aqui. O código fonte completo está disponível no Github.

para saber mais sobre o Cube.implantação de back-end js, você pode consultar a documentação de implantação. Além disso, aqui você pode encontrar mais tutoriais sobre uma variedade de tópicos.

e junte-se à nossa comunidade Slack! É um ótimo lugar para obter ajuda e manter-se atualizado com novos lançamentos.