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 na barra de ferramentas do Designer e selecione a opção de relatório : Arquivo 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 e clique no botão na seção “Fontes de dados”: Fontes de dados Adicionar 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 para salvar sua fonte de dados. Salvar uma fonte de dados é uma configuração de conexão simples; nenhum pedido foi feito ainda. Observação: 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 que aparece ao lado de nossa fonte de dados: Mais Isso abrirá a janela : Novo conjunto de dados Normalmente, precisamos definir duas propriedades aqui: o e o . 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. Uri/path JSON Path Para o Uri/path, usaremos para retornar os dados de nossos clientes. No nosso caso, queremos pegar todas as entradas, então passaremos como o caminho JSON. /Customers $.* 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 está preenchida com valores: Campos do banco de dados 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 como Uri/path, e outro baseado na fonte NWOData, usando como Uri/path. Para o conjunto de dados , defina também o caminho Json como . /Products /Orders Orders $.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 e expanda a seção ; é aqui que podemos adicionar nosso novo campo calculado. Nomeie o campo e defina o valor como : Orders Calculated Fields MonthYear {DateTime.Parse(OrderDate).ToString("MM/yyyy")} Crie um novo conjunto de dados denominado com base na fonte NWOData; defina o Uri/path como e o caminho Json como . OrderDetails /OrderDetails $.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 do conjunto de dados OrderDetails, nomeie o campo e defina o valor como . CalculatedFields Subtotal {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 e clique no botão . OrderDetails Avançar Agora podemos definir nossos campos de dados e categoria. Para "Valores de dados", adicione um novo campo. Defina o nome como e o agregado como . Em seguida, para “Categorias de dados”, defina o campo como . Deve ficar assim: {Subtotal} Sum {Lookup(OrderId, OrderId, MonthYear, “Orders”)} Clique em e em . 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. Avançar Concluir 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 nos mostrará o relatório com os dados sendo carregados: Visualizar 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 e clicando em : Linha 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 no menu e clicando em : Células Mesclar Células Agora selecione a célula recém-mesclada, defina o nome da caixa de texto como e defina seu valor como : txtMonth {MonthName(Month(OrderDate))}/{Year(OrderDate)} Finalmente, você deve definir o agrupamento de tabelas. Isso pode ser feito selecionando a célula e selecionando no menu pop-up. Defina o primeiro nível do grupo com a fórmula e o segundo nível como : {Year(OrderDate)} {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 e defina seu valor como o . Uma vez configurado, visualize o relatório para ver os resultados: txtOrderId ID do pedido: {OrderId} Observe que a tabela está no segundo nível em seu relatório; ele detalha os pedidos feitos em um determinado mês. tableOrders 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 , 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. OrderId 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 Para a célula mesclada, use o painel de propriedades para definir o como e sua propriedade como e defina a fórmula da célula mesclada como : Total: Alinhamento da célula Esquerda de formato Moeda {SUM(Subtotal)} Selecione a tabela no Explorer e expanda a propriedade . Clique em e adicione um novo critério de filtro com os seguintes campos: tableOrderTotal Filters Adicionar item 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 exibirá a tabela atualizada: Visualizar 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 . Configure a tabela da seguinte forma: tableOrderDetails Quando completa, a tabela deve ficar assim: Clicar em mostrará a nova tabela: Visualizar 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 e recolhidas até que o usuário as expanda. tableOrders tableOrderDetails Selecione a tabela tableOrders e altere as propriedades e da seguinte forma: Hidden Toggle Item 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 . 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. tableOrderDetails 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 e você poderá ver o nome do cliente e a data do pedido adicionados à fatura: Visualizar 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 e agora você pode ver os ícones de classificação ao lado dos cabeçalhos das colunas; classificar os itens do pedido por Quantidade: Visualizar 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 e abra-a em seu IDE preferido. Em seguida, na linha de comando, execute: InventoryInvoice npm init Isso o levará a configurar seu arquivo , que será usado para criar seu aplicativo. Depois que seu arquivo for gerado, execute os dois comandos a seguir: package.json 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 chamado . Este arquivo usará o Express para atender nosso aplicativo de fatura de inventário Node.js. InventoryInvoice index.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 e nomeie-o como . Depois de criado, insira o seguinte código: InventoryInvoice index.html ActiveReportsJS Viewer #arjs-viewer { width: 100%; height: 100vh; } function load() { const viewer = new ActiveReports.Viewer('#arjs-viewer'); viewer.open('MonthlyOrders.rdlx-json'); } Há algumas coisas para passar por aqui. Primeiro, incluímos quatro arquivos em nosso arquivo HTML; , , e . Os arquivos CSS são o arquivo CSS principal para ActiveReportsJS e o arquivo CSS usado para estilizar o visualizador. ar-js-ui.css ar-js-viewer.css ar-js-core.js ar-js-viewer.js 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 e executar o seguinte comando para iniciar seu aplicativo de fatura de inventário Node.js: InventoryInvoice 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 . Codificação feliz! aqui

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

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

Aumente sua produtividade com estas 18 ferramentas para desenvolvedores 🚀🔥

Liberando o poder da IA. Uma revisão sistemática de técnicas de ponta: resumo e introdução

De fóruns a feeds: como os algoritmos de mídia social moldam a interação digital

As camadas invisíveis: por que as entrevistas com usuários são um ativo insubstituível

Aumente sua produtividade com estas 18 ferramentas para desenvolvedores 🚀🔥

Liberando o poder da IA. Uma revisão sistemática de técnicas de ponta: resumo e introdução

De fóruns a feeds: como os algoritmos de mídia social moldam a interação digital

As camadas invisíveis: por que as entrevistas com usuários são um ativo insubstituível

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps