Construindo um inventário Node.js e um aplicativo de cobrança de fatura: um guia

Atualmente, ao administrar uma empresa, é importante ter acesso aos seus pedidos, estoque e dados financeiros, independentemente da localização. É por isso que é essencial ter relatórios na tela que sejam flexíveis e interativos, bem como adaptáveis a uma variedade de resoluções de tela.

Isso permite que você fique por dentro do desempenho da sua empresa e tome decisões informadas quando e onde precisar.

O ActiveReportsJS permite que você crie aplicativos da Web responsivos com recursos de relatórios altamente interativos que funcionam em qualquer navegador e suportam desktop e dispositivos móveis.

Neste artigo, mostraremos como criar um sistema de gerenciamento de inventário Node.js responsivo, permitindo que os usuários rastreiem relatórios de pedidos usando o ActiveReportsJS. Estaremos abordando os seguintes tópicos:

• Projetando o título do relatório

• Definindo acesso a dados no Node.js

• Usando Campos Calculados

• Adicionando um controle de gráfico

• Adicionando um controle de tabela

• Definindo Sub-Tabelas

• Adicionando funcionalidade de detalhamento

• Adicionando colunas de classificação a tabelas

• Criando o aplicativo de fatura Node.js

  
  

Se você quiser acompanhar o relatório e o aplicativo concluídos, poderá encontrar o repositório aqui .

Construindo um Relatório de Vendas Baseado na Web

Para nosso cenário, temos um cliente chamado ACME Inc. que nos contratou para criar um relatório de vendas para ele. A solicitação vem com uma maquete do relatório, que fica assim:

Para criar relatórios de nível empresarial como o acima, GrapeCity oferece o ActiveReportsJS Designer. Essa ferramenta intuitiva ajuda você a configurar seu relatório para buscar dados e renderizá-los usando elementos visuais como tabelas, gráficos de barras, gráficos de pizza e muito mais.

O ActiveReportsJS Designer armazena as definições de relatório em um formato JSON especial e as salva em arquivos com a extensão .rdlx-json .

Projetando o título do relatório

Para criar um novo relatório, no Designer, abra o menu Arquivo na barra de ferramentas do Designer e selecione a opção de relatório Layout de página contínua :

Agora que temos um novo relatório, clicar no botão de hambúrguer à esquerda expandirá o painel de controle. A partir daqui, você pode arrastar e soltar os controles na tela do relatório para incluí-los no relatório:

Para o nosso relatório, teremos um contêiner na parte superior que contém a imagem do logotipo e um rótulo. Arraste e solte um controle de contêiner do painel de controle na tela do relatório; em seguida, arraste e solte um controle de imagem e caixa de texto no controle de contêiner na tela do relatório.

Para vincular uma imagem ao controle de imagem, você pode extrair a imagem de uma fonte externa, como uma URL ou banco de dados, ou incorporar a imagem de um arquivo local. Nossa imagem será o logotipo da ACME Inc.

Para a caixa de texto, você pode personalizar a fonte, o tamanho e a cor como achar melhor. Para o texto do título, definiremos como Pedidos mensais .

Quando concluído, seu título deve ser algo como isto:

Definindo acesso a dados no Node.js

O ActiveReportsJS Designer gerencia conexões de dados por meio de dois tipos de entidades: fontes de dados e conjuntos de dados.

Uma fonte de dados funciona como uma conexão com armazenamento de dados externo, como um arquivo URI ou JSON ou um documento JSON que pode ser incorporado ao relatório.

Um conjunto de dados é um elemento intermediário que busca dados da fonte de dados e os vincula a campos no modelo de dados do relatório. Você também pode definir campos calculados, que transformam os dados de origem usando expressões. Os campos do conjunto de dados podem então ser usados pelos controles do relatório.

Nosso software de fatura de estoque acessará os dados por meio de uma API externa localizada em um serviço HTTP, retornando os resultados no formato JSON. O relatório mostrará uma variedade de informações de pedidos com base em dados “ao vivo” desse serviço.

Para definir o acesso aos dados do cliente em seu relatório, comece selecionando a guia Fontes de dados e clique no botão Adicionar na seção “Fontes de dados”:

Isso abrirá a janela Nova fonte de dados :

Esta janela nomeia a fonte de dados, define o provedor de dados e adiciona qualquer cabeçalho HTTP adicional ou parâmetros necessários.

Ao adicionar seu provedor de dados, você pode escolher entre JSON remoto ou incorporar seu JSON ao relatório por meio de um arquivo local. Carregaremos nossos dados para este aplicativo de fatura de inventário de uma fonte remota. Quando tudo estiver adicionado, clique no botão Salvar para salvar sua fonte de dados.

Observação: uma fonte de dados é uma configuração de conexão simples; nenhum pedido foi feito ainda.

Agora que criamos uma fonte de dados, precisamos criar um conjunto de dados que use essa fonte para recuperar os dados. Para criar um conjunto de dados, clique no botão Mais que aparece ao lado de nossa fonte de dados:

Isso abrirá a janela Novo conjunto de dados :

Normalmente, precisamos definir duas propriedades aqui: o Uri/path e o JSON Path . O Uri/path informa ao ActiveReportsJS onde procurar o arquivo JSON assim que atingir o endpoint da API, e o Json Path é usado para informar ao nosso aplicativo de fatura Node.js qual parte do JSON queremos obter.

Para o Uri/path, usaremos /Customers para retornar os dados de nossos clientes. No nosso caso, queremos pegar todas as entradas, então passaremos $.* como o caminho JSON.

Finalmente, precisamos validar a fonte de dados para que o ActiveReportsJS possa confirmar que pode recuperar os dados. Você saberá que sua fonte de dados foi validada se vir que a matriz Campos do banco de dados está preenchida com valores:

Vamos precisar de outra fonte de dados para nosso aplicativo, que usaremos para recuperar dados de pedidos feitos por meio do aplicativo de fatura node.js. Sua segunda fonte de dados deve ter a seguinte aparência:

Vamos precisar de mais dois conjuntos de dados: um baseado na fonte de dados NWAPI, usando /Products como Uri/path, e outro baseado na fonte NWOData, usando /Orders como Uri/path. Para o conjunto de dados Orders , defina também o caminho Json como $.value[*] .

Quando configurado, o painel de dados deve ter a seguinte aparência:

Usando Campos Calculados

Ocasionalmente, você precisará transformar um ou mais campos de origem em um novo campo calculado para ser usado no relatório. O ActiveReportsJS oferece uma linguagem de expressão com funções integradas avançadas para atender a essa necessidade.

Neste exemplo, vamos transformar o campo OrderDate no formato “mês/ano”. Você deve adicionar um campo personalizado à lista de campos de banco de dados vinculados automaticamente para conseguir isso.

Edite o conjunto de dados Orders e expanda a seção Calculated Fields ; é aqui que podemos adicionar nosso novo campo calculado. Nomeie o campo MonthYear e defina o valor como {DateTime.Parse(OrderDate).ToString("MM/yyyy")} :

Crie um novo conjunto de dados denominado OrderDetails com base na fonte NWOData; defina o Uri/path como /OrderDetails e o caminho Json como $.value[*] .

Observe que o conjunto de dados OrderDetails não inclui um campo para um valor total por item. É provável que esse valor seja necessário mais de uma vez em seu relatório. Portanto, você terá que calcular esse valor toda vez que for necessário ou criar um novo campo calculado. A última opção é muito mais eficiente.

Expanda a seção CalculatedFields do conjunto de dados OrderDetails, nomeie o campo Subtotal e defina o valor como {Round(100 * (UnitPrice - UnitPrice * Discount) * Quantity) / 100} .

Adicionando um controle de gráfico

Agora que configuramos várias fontes de dados, é hora de incorporá-las ao relatório; para isso, adicionaremos um gráfico. Arrastar e soltar um controle de gráfico do painel de controle no relatório abrirá o assistente de gráfico:

Certifique-se de que o conjunto de dados esteja definido para usar nosso conjunto OrderDetails e clique no botão Avançar .

Agora podemos definir nossos campos de dados e categoria. Para "Valores de dados", adicione um novo campo. Defina o nome como {Subtotal} e o agregado como Sum . Em seguida, para “Categorias de dados”, defina o campo como {Lookup(OrderId, OrderId, MonthYear, “Orders”)} . Deve ficar assim:

Clique em Avançar e em Concluir . A última coisa a fazer, antes de visualizarmos o gráfico, é fazer algumas alterações finais nas propriedades de vários elementos do gráfico.

Para modificar os elementos do gráfico, você só precisa se certificar de que está visualizando a janela de propriedades em vez da janela de dados e, em seguida, clicar em um elemento do gráfico.

A janela de propriedades será atualizada para mostrar todas as propriedades do elemento atualmente selecionado. Defina as propriedades do gráfico da seguinte maneira:

Quando concluído, seu relatório deve ter a seguinte aparência:

Clicar em Visualizar nos mostrará o relatório com os dados sendo carregados:

Adicionando um controle de tabela

Além do gráfico, queremos permitir que os usuários visualizem mais dados em nosso aplicativo de fatura Node.js. Vamos criar uma visualização tabular do volume de pedidos mês a mês. Arraste e solte um controle de tabela do painel de controle para o relatório abaixo do gráfico:

Por padrão, uma tabela ActiveReportsJS é criada com três colunas e três linhas. A linha superior serve como linha de cabeçalho, a linha do meio é nossa linha de detalhes e contém nossos dados, e a linha inferior é a linha de rodapé.

Os autores de relatórios podem redimensionar a tabela, adicionar ou remover linhas e colunas, definir vários cabeçalhos e rodapés e assim por diante.

Agora, selecione a tabela, navegue até o painel de propriedades e defina as propriedades da seguinte maneira:

Em seguida, remova as linhas de cabeçalho e rodapé da tabela, pois elas não são necessárias. Isso é feito clicando com o botão direito do mouse em uma célula na linha que você deseja excluir, selecionando a opção Linha e clicando em Excluir linha :

Agora, mescle as células para a linha de detalhes. Isso é feito selecionando as células que você deseja mesclar, clicando com o botão direito do mouse em uma das células selecionadas, selecionando a opção Células no menu e clicando em Mesclar Células :

Agora selecione a célula recém-mesclada, defina o nome da caixa de texto como txtMonth e defina seu valor como {MonthName(Month(OrderDate))}/{Year(OrderDate)} :

Finalmente, você deve definir o agrupamento de tabelas. Isso pode ser feito selecionando a célula e selecionando <Details Group> no menu pop-up.

Defina o primeiro nível do grupo com a fórmula {Year(OrderDate)} e o segundo nível como {Month(OrderDate)} :

A nova tabela exibe o primeiro nível de dados na seção tabular:

Agora, vamos começar a adicionar mais níveis de dados. Crie uma nova linha abaixo da linha atual, remova as linhas de cabeçalho e rodapé, mescle a linha de detalhes e arraste e solte outro controle de tabela na nova célula grande.

Defina as propriedades da nova tabela da seguinte forma:

Agora selecione a célula recém-mesclada, defina o nome da caixa de texto como txtOrderId e defina seu valor como o ID do pedido: {OrderId} . Uma vez configurado, visualize o relatório para ver os resultados:

Observe que a tabela tableOrders está no segundo nível em seu relatório; ele detalha os pedidos feitos em um determinado mês.

Definindo Sub-Tabelas

Agora que estamos exibindo os pedidos por mês, é hora de adicionar uma seção de detalhes do pedido para cada um dos pedidos que chegam por meio de nosso aplicativo de fatura de estoque.

Adicione uma nova linha de detalhes abaixo da linha de detalhes OrderId , mescle as células e coloque outra tabela nessa linha de detalhes. Desta vez, em vez de remover as linhas de cabeçalho e rodapé, remova a linha de detalhe e rodapé, deixando a linha de cabeçalho.

Em seguida, em vez de mesclar todas as três células em uma, mescle as células central e direita em uma e deixe a célula esquerda como sua própria célula.

Defina a fórmula da célula esquerda como Total: Para a célula mesclada, use o painel de propriedades para definir o Alinhamento da célula como Esquerda e sua propriedade de formato como Moeda e defina a fórmula da célula mesclada como {SUM(Subtotal)} :

Selecione a tabela tableOrderTotal no Explorer e expanda a propriedade Filters . Clique em Adicionar item e adicione um novo critério de filtro com os seguintes campos:

Como você pode ver, a nova tabela tableOrderTotals é baseada no conjunto de dados OrderDetails. O valor total é obtido filtrando os detalhes do pedido pelo OrderId da linha tableOrder e somando os valores do campo Subtotal.

Clicar em Visualizar exibirá a tabela atualizada:

Por fim, criaremos uma tabela representando os itens do pedido para nossas faturas.

Crie uma nova linha de detalhes na tabela tableOrders e, em seguida, crie uma nova tabela dentro da nova linha de detalhes chamada tableOrderDetails . Configure a tabela da seguinte forma:

Quando completa, a tabela deve ficar assim:

Clicar em Visualizar mostrará a nova tabela:

Antes de prosseguirmos, faremos um pequeno styling para melhorar o visual da mesa. Aqui está a aparência da versão finalizada:

Adicionando funcionalidade de detalhamento

Agora, vamos adicionar a funcionalidade de detalhamento ao relatório, permitindo-nos manter as tabelas tableOrders e tableOrderDetails recolhidas até que o usuário as expanda.

Selecione a tabela tableOrders e altere as propriedades Hidden e Toggle Item da seguinte forma:

Selecione a tabela tableOrderDetails e torne-a recolhível também:

Agora, podemos expandir e recolher os níveis de detalhe clicando nos símbolos +/-:

Em seguida, vamos adicionar mais alguns detalhes aos relatórios de nosso aplicativo de fatura Node.js.

Adicione quatro novas linhas acima da linha de cabeçalho existente na tabela tableOrderDetails . A parte superior e inferior dessas quatro linhas servirão como um buffer e as duas linhas do meio conterão os dados que desejamos exibir.

Na segunda e na terceira linhas que foram adicionadas, deixe a célula mais à esquerda de cada linha sozinha e mescle o restante das células para cada linha. Em seguida, preencha as linhas da seguinte forma:

Clique em Visualizar e você poderá ver o nome do cliente e a data do pedido adicionados à fatura:

Adicionando colunas de classificação à tabela

A última coisa que adicionaremos ao relatório é a capacidade de classificar as colunas de detalhes do pedido.

Selecione cada célula de cabeçalho e preencha o campo Expressão de classificação na seção Classificação do usuário com as seguintes fórmulas:

Clique em Visualizar e agora você pode ver os ícones de classificação ao lado dos cabeçalhos das colunas; classificar os itens do pedido por Quantidade:

Classifique o pedido por Preço Total:

Criando o aplicativo de fatura Node.JS

Agora com o relatório definido, podemos criar nossa aplicação de nota fiscal de estoque. Este aplicativo precisará de uma exibição na Web responsiva que tenha boa aparência em computadores e dispositivos móveis. O ActiveReportsJS oferece esse recurso por padrão.

O aplicativo de amostra usará Node.js, um ambiente de tempo de execução JavaScript, para executar o aplicativo da Web no lado do servidor.

Para começar, crie uma nova pasta chamada InventoryInvoice e abra-a em seu IDE preferido. Em seguida, na linha de comando, execute:

 npm init

Isso o levará a configurar seu arquivo package.json , que será usado para criar seu aplicativo. Depois que seu arquivo for gerado, execute os dois comandos a seguir:

 npm install express npm install @grapecity/activereports

Isso instalará o Express, uma estrutura para Node.js, e o ActiveReports, que usaremos para exibir as faturas.

Agora que temos o Express instalado, precisamos colocá-lo em uso. Crie um novo arquivo na pasta InventoryInvoice chamado index.js . Este arquivo usará o Express para atender nosso aplicativo de fatura de inventário Node.js.

Dentro do arquivo index.js, adicione o seguinte código:

 const express = require('express'); //import Express.js module const app = express(); const path = require('path'); app.use(express.static(path.join(__dirname))); app.listen(3000, () => { console.log(`Example app listening on port 3000`) })

Agora, é hora de uma rápida explicação do que estamos fazendo aqui:

• As duas primeiras linhas de código incluem o Express em nosso servidor e nos fornecem uma variável a ser usada para fazer referência aos métodos e propriedades do Express.

• A terceira linha cria uma variável que leva ao caminho relativo da pasta, e a quarta linha informa ao Express que queremos usar esse caminho como o caminho estático de nosso aplicativo.

• As linhas seis a oito usam Express para iniciar o aplicativo; aqui, estamos dizendo para rodar na porta 3000, e quando começar a rodar, registramos uma mensagem no terminal.

E isso é Express em um nível muito básico! Agora que temos um servidor que podemos iniciar para lançar o software de fatura de estoque, é hora de criar uma página para atender o usuário.

Crie um novo arquivo na pasta InventoryInvoice e nomeie-o como index.html . Depois de criado, insira o seguinte código:

 <html> <head> <meta charset="utf-8" /> <title>ActiveReportsJS Viewer</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="node_modules/@grapecity/activereports/styles/ar-js-ui.css" /> <link rel="stylesheet" href="node_modules/@grapecity/activereports/styles/ar-js-viewer.css" /> <script type="text/javascript" src="node_modules/@grapecity/activereports/dist/ar-js-core.js"></script> <script type="text/javascript" src="node_modules/@grapecity/activereports/dist/ar-js-viewer.js"></script> <style> #arjs-viewer { width: 100%; height: 100vh; } </style> </head> <body onload="load()"> <div id="arjs-viewer"></div> <script> function load() { const viewer = new ActiveReports.Viewer('#arjs-viewer'); viewer.open('MonthlyOrders.rdlx-json'); } </script> </body> </html>

Há algumas coisas para passar por aqui. Primeiro, incluímos quatro arquivos em nosso arquivo HTML; ar-js-ui.css , ar-js-viewer.css , ar-js-core.js e ar-js-viewer.js . Os arquivos CSS são o arquivo CSS principal para ActiveReportsJS e o arquivo CSS usado para estilizar o visualizador.

Os arquivos JS são os mesmos; um arquivo JS principal e um arquivo JS para o visualizador.

Em segundo lugar, para o HTML, estamos usando apenas uma única linha para criar o ActiveReportsJS Viewer. Tudo o que precisamos é de um único div com um ID que possamos usar para associar o visualizador ao div.

Em terceiro lugar, em JavaScript, assim que a página é carregada, estamos criando um novo controle ActiveReports.Viewer, associando-o ao nosso div e, em seguida, informando-o para abrir nosso relatório.

Por fim, incluímos uma pequena quantidade de CSS para que o visualizador ocupe toda a tela.

Feito isso, tudo o que você precisa fazer é mover seu relatório para a pasta InventoryInvoice e executar o seguinte comando para iniciar seu aplicativo de fatura de inventário Node.js:

 node index.js

Navegue até localhost:3000 e você verá e poderá interagir com o relatório que criou:

O componente ActiveReportsJS Viewer também é responsivo; ele é renderizado adequadamente em vários dispositivos em uma ampla variedade de tamanhos de tela. Você pode usar as ferramentas de desenvolvedor disponíveis em seu navegador da Web para emular rapidamente os vários dispositivos móveis, tamanhos de tela e orientações de página:

Notas Finais

E com isso, acabamos! Este artigo forneceu uma abordagem prática para criar um relatório de fatura de inventário mensal usando o ActiveReportsJS Designer da GrapeCity.

Examinamos como agregar informações para criar um gráfico de vendas agrupado por meses, bem como um relatório tabular interativo com funcionalidade de detalhamento que consolida as vendas por mês e ID do pedido.

Se você gostaria de ver o formulário preenchido e o relatório, você pode encontrá-lo aqui . Codificação feliz!