Création d'un inventaire Node.js et d'une application de facturation : un guide

Lorsque vous dirigez une entreprise de nos jours, il est important d'avoir accès à vos données de commande, d'inventaire et financières, quel que soit l'emplacement. C'est pourquoi il est essentiel d'avoir des rapports à l'écran à la fois flexibles et interactifs, ainsi qu'adaptables à une variété de résolutions d'écran.

Cela vous permet de rester au top des performances de votre entreprise et de prendre des décisions éclairées quand et où vous en avez besoin.

ActiveReportsJS vous permet de créer des applications Web réactives avec des capacités de création de rapports hautement interactives qui fonctionnent dans n'importe quel navigateur et prennent en charge les appareils de bureau et mobiles.

Dans cet article, nous allons vous montrer comment créer un système de gestion d'inventaire Node.js réactif, permettant aux utilisateurs de suivre les rapports de commande à l'aide d'ActiveReportsJS. Nous aborderons les sujets suivants :

• Conception du titre du rapport

• Définir l'accès aux données dans Node.js

• Utilisation des champs calculés

• Ajout d'un contrôle graphique

• Ajout d'un champ Table

• Définir des sous-tables

• Ajout de la fonctionnalité d'exploration vers le bas

• Ajout de colonnes de tri aux tableaux

• Création de l'application de facturation Node.js

  
  

Si vous souhaitez suivre le rapport et la demande remplis, vous pouvez trouver le référentiel ici .

Création d'un rapport de ventes basé sur le Web

Pour notre scénario, nous avons un client nommé ACME Inc. qui nous a engagé pour lui créer un rapport de ventes. La requête est accompagnée d'une maquette du rapport, qui ressemble à ceci :

Pour créer des rapports au niveau de l'entreprise comme celui ci-dessus, GrapeCity propose le concepteur ActiveReportsJS. Cet outil intuitif vous aide à configurer votre rapport pour récupérer des données et les afficher à l'aide d'éléments visuels tels que des tableaux, des graphiques à barres, des graphiques à secteurs, etc.

Le concepteur ActiveReportsJS stocke les définitions de rapport dans un format JSON spécial et les enregistre dans des fichiers avec l'extension .rdlx-json .

Conception du titre du rapport

Pour créer un nouveau rapport, dans le Designer, ouvrez le menu Fichier de la barre d'outils du Designer et sélectionnez l'option de rapport Mise en page continue :

Maintenant que nous avons un nouveau rapport, cliquez sur le bouton hamburger à gauche pour développer le panneau de contrôle. À partir de là, vous pouvez faire glisser et déposer des contrôles sur votre canevas de rapport pour les inclure dans le rapport :

Pour notre rapport, nous aurons un conteneur en haut qui contient l'image du logo et une étiquette. Faites glisser et déposez un contrôle de conteneur du panneau de contrôle sur le canevas du rapport ; puis faites glisser et déposez une image et un contrôle de zone de texte dans le contrôle conteneur sur le canevas du rapport.

Pour lier une image au contrôle d'image, vous pouvez soit extraire l'image d'une source externe, telle qu'une URL ou une base de données, soit incorporer l'image à partir d'un fichier local. Notre image sera le logo ACME Inc.

Pour la zone de texte, vous pouvez personnaliser la police, la taille et la couleur comme bon vous semble. Pour le texte du titre, nous le définirons sur Commandes mensuelles .

Une fois terminé, votre titre devrait ressembler à ceci :

Définir l'accès aux données dans Node.js

Le concepteur ActiveReportsJS gère les connexions de données via deux types d'entités : les sources de données et les ensembles de données.

Une source de données fonctionne comme une connexion à un stockage de données externe, tel qu'un fichier URI ou JSON ou un document JSON qui peut être intégré dans le rapport.

Un ensemble de données est un élément intermédiaire qui extrait les données de la source de données et les lie aux champs du modèle de données de rapport. Vous pouvez également définir des champs calculés, qui transforment les données source à l'aide d'expressions. Les champs de l'ensemble de données peuvent ensuite être utilisés par les contrôles du rapport.

Notre logiciel de facturation d'inventaire accédera aux données via une API externe située sur un service HTTP, renvoyant les résultats au format JSON. Le rapport affichera une variété d'informations sur les commandes basées sur des données "en direct" de ce service.

Pour définir l'accès aux données client dans votre rapport, commencez par sélectionner l'onglet Sources de données , puis cliquez sur le bouton Ajouter dans la section « Sources de données » :

Cela fera apparaître la fenêtre Nouvelle source de données :

Cette fenêtre nomme la source de données, définit le fournisseur de données et ajoute tout en-tête ou paramètre HTTP supplémentaire requis.

Lors de l'ajout de votre fournisseur de données, vous pouvez choisir entre un JSON distant ou l'intégration de votre JSON dans le rapport via un fichier local. Nous allons charger nos données pour cette application de facturation d'inventaire à partir d'une source distante. Lorsque tout est ajouté, cliquez sur le bouton Enregistrer pour enregistrer votre source de données.

Remarque : Une source de données est une configuration de connexion simple ; aucune demande n'a encore été faite.

Maintenant que nous avons créé une source de données, nous devons créer un ensemble de données qui utilise cette source pour récupérer les données. Pour créer un ensemble de données, cliquez sur le bouton Plus qui apparaît à côté de notre source de données :

Cela fera apparaître la fenêtre Nouvel ensemble de données :

Nous devons généralement définir deux propriétés ici : Uri/path et JSON Path . L'Uri/path indique à ActiveReportsJS où rechercher le fichier JSON une fois arrivé au point de terminaison de l'API, et le Json Path est utilisé pour indiquer à notre application de facturation Node.js quelle partie du JSON nous voulons saisir.

Pour l'Uri/path, nous utiliserons /Customers pour renvoyer des données sur nos clients. Dans notre cas, nous voudrons récupérer toutes les entrées, nous passerons donc $.* comme chemin JSON.

Enfin, nous devons valider la source de données afin qu'ActiveReportsJS puisse confirmer qu'il peut récupérer les données. Vous saurez que votre source de données a été validée si vous voyez que le tableau Database Fields est rempli de valeurs :

Nous aurons besoin d'une autre source de données pour notre application, que nous utiliserons pour récupérer les données sur les commandes passées via l'application de facturation node.js. Votre deuxième source de données devrait ressembler à ceci :

Nous aurons besoin de deux autres ensembles de données : l'un basé sur la source de données NWAPI, en utilisant /Products comme Uri/path, et l'autre basé sur la source NWOData, en utilisant /Orders comme Uri/path. Pour l'ensemble de données Orders , définissez également le chemin Json sur $.value[*] .

Une fois configuré, le panneau de données devrait ressembler à ceci :

Utilisation des champs calculés

Parfois, vous devrez transformer un ou plusieurs champs source en un nouveau champ calculé à utiliser dans le rapport. ActiveReportsJS propose un langage d'expression avec de riches fonctions intégrées pour répondre à ce besoin.

Dans cet exemple, transformons le champ OrderDate au format "mois/année". Vous devez ajouter un champ personnalisé à la liste des champs de base de données liés automatiquement pour y parvenir.

Modifiez l'ensemble de données Commandes et développez la section Champs calculés ; c'est là que nous pouvons ajouter notre nouveau champ calculé. Nommez le champ MonthYear et définissez la valeur comme {DateTime.Parse(OrderDate).ToString("MM/yyyy")} :

Créez un nouvel ensemble de données nommé OrderDetails basé sur la source NWOData ; définissez Uri/path sur /OrderDetails et le chemin Json sur $.value[*] .

Notez que l'ensemble de données OrderDetails n'inclut pas de champ pour une valeur totale par article. Cette valeur est susceptible d'être requise plus d'une fois dans votre rapport. Par conséquent, vous devrez calculer cette valeur chaque fois que cela sera nécessaire ou créer un nouveau champ calculé. Cette dernière option est bien plus efficace.

Développez la section CalculatedFields de l'ensemble de données OrderDetails, nommez le champ Subtotal et définissez la valeur sur {Round(100 * (UnitPrice - UnitPrice * Discount) * Quantity) / 100} .

Ajout d'un contrôle graphique

Maintenant que nous avons configuré plusieurs sources de données, il est temps de les intégrer au rapport ; pour ce faire, nous ajouterons un graphique. Glisser-déposer un contrôle graphique du panneau de contrôle sur le rapport fera apparaître l'assistant graphique :

Assurez-vous que l'ensemble de données est configuré pour utiliser notre ensemble OrderDetails , puis cliquez sur le bouton Suivant .

Nous pouvons maintenant définir nos champs de données et de catégorie. Pour "Valeurs de données", ajoutez un nouveau champ. Définissez le nom sur {Subtotal} et l'agrégat sur Sum . Ensuite, pour "Catégories de données", définissez le champ sur {Lookup(OrderId, OrderId, MonthYear, "Orders")} . Cela devrait ressembler à ça :

Cliquez sur Suivant, puis sur Terminer . La dernière chose à faire, avant de visualiser le graphique, est d'apporter quelques modifications finales aux propriétés des différents éléments du graphique.

Pour modifier des éléments du graphique, il vous suffit de vous assurer que vous visualisez la fenêtre des propriétés au lieu de la fenêtre des données, puis de cliquer sur un élément du graphique.

La fenêtre des propriétés sera mise à jour pour afficher toutes les propriétés de l'élément actuellement sélectionné. Définissez les propriétés du graphique comme suit :

Une fois terminé, votre rapport devrait ressembler à ceci :

Cliquer sur Aperçu nous montrera le rapport avec les données en cours de chargement :

Ajout d'un champ Table

En plus du graphique, nous voulons permettre aux utilisateurs d'afficher plus de données dans notre application de facturation Node.js. Créons une vue tabulaire du volume de commandes mois par mois. Faites glisser et déposez un contrôle de tableau du panneau de contrôle vers le rapport sous le graphique :

Par défaut, une table ActiveReportsJS est créée avec trois colonnes et trois lignes. La ligne du haut sert de ligne d'en-tête, la ligne du milieu est notre ligne de détails et contient nos données, et la ligne du bas est la ligne de pied de page.

Les auteurs de rapports peuvent redimensionner le tableau, ajouter ou supprimer des lignes et des colonnes, définir plusieurs en-têtes et pieds de page, etc.

Maintenant, sélectionnez la table, accédez au panneau des propriétés et définissez les propriétés comme suit :

Supprimez ensuite les lignes d'en-tête et de pied de page du tableau, car elles ne sont pas nécessaires. Pour ce faire, cliquez avec le bouton droit sur une cellule de la ligne que vous souhaitez supprimer, sélectionnez l'option Ligne et cliquez sur Supprimer la ligne :

Maintenant, fusionnez les cellules pour la ligne de détail. Pour ce faire, sélectionnez les cellules que vous souhaitez fusionner, cliquez avec le bouton droit sur l'une des cellules sélectionnées, sélectionnez l'option Cellules dans le menu et cliquez sur Fusionner les cellules :

Sélectionnez maintenant la cellule nouvellement fusionnée, définissez son nom de zone de texte sur txtMonth et définissez sa valeur sur {MonthName(Month(OrderDate))}/{Year(OrderDate)} :

Enfin, vous devez définir le regroupement des tables. Cela peut être fait en sélectionnant la cellule et en sélectionnant <Groupe de détails> dans le menu contextuel.

Définissez le premier niveau du groupe avec la formule {Year(OrderDate)} et le deuxième niveau comme {Month(OrderDate)} :

Le nouveau tableau affiche le premier niveau de données dans la section tabulaire :

Maintenant, nous allons commencer à ajouter plus de niveaux de données. Créez une nouvelle ligne sous notre ligne actuelle, supprimez les lignes d'en-tête et de pied de page, fusionnez la ligne de détail, puis faites glisser et déposez un autre contrôle de table dans la nouvelle grande cellule.

Définissez les propriétés de la nouvelle table comme suit :

Sélectionnez maintenant la cellule nouvellement fusionnée, définissez son nom de zone de texte sur txtOrderId et définissez sa valeur sur l' ID de commande : {OrderId} . Une fois cela configuré, prévisualisez le rapport pour voir les résultats :

Notez que la table tableOrders se trouve au deuxième niveau de votre rapport ; il détaille les commandes passées au cours d'un mois donné.

Définir des sous-tables

Maintenant que nous affichons les commandes par mois, il est temps d'ajouter une section de détails de commande pour chacune des commandes qui passent par notre application de facturation d'inventaire.

Ajoutez une nouvelle ligne de détail sous la ligne de détail OrderId , fusionnez les cellules et placez un autre tableau dans cette ligne de détail. Cette fois, au lieu de supprimer les lignes d'en-tête et de pied de page, supprimez les détails et la ligne de pied de page, en laissant la ligne d'en-tête.

Ensuite, au lieu de fusionner les trois cellules en une seule, fusionnez les cellules du centre et de droite en une seule et laissez la cellule de gauche comme sa propre cellule.

Définissez la formule de la cellule de gauche sur Total : pour la cellule fusionnée, utilisez le panneau des propriétés pour définir l' alignement de la cellule sur Gauche et sa propriété de format sur Devise , puis définissez la formule de la cellule fusionnée sur {SOMME(sous-total)} :

Sélectionnez la table tableOrderTotal dans l'explorateur et développez la propriété Filters . Cliquez sur Ajouter un élément et ajoutez un nouveau critère de filtre avec les champs suivants :

Comme vous pouvez le constater, la nouvelle table tableOrderTotals est basée sur l'ensemble de données OrderDetails. La valeur totale est obtenue en filtrant les détails de la commande par OrderId de la ligne tableOrder et en additionnant les valeurs du champ Sous-total.

Cliquez sur Aperçu pour afficher le tableau mis à jour :

Enfin, nous allons créer un tableau représentant les articles de commande pour nos factures.

Créez une nouvelle ligne de détail dans la table tableOrders , puis créez une nouvelle table à l'intérieur de la nouvelle ligne de détail appelée tableOrderDetails . Configurez le tableau comme suit :

Une fois terminé, le tableau devrait ressembler à ceci :

Cliquez sur Aperçu pour afficher le nouveau tableau :

Avant de continuer, nous allons faire un peu de style pour améliorer l'apparence de la table. Voici à quoi ressemble la version finie :

Ajout de la fonctionnalité d'exploration vers le bas

Ajoutons maintenant une fonctionnalité d'exploration au rapport, ce qui nous permet de conserver les tables tableOrders et tableOrderDetails réduites jusqu'à ce que l'utilisateur les développe.

Sélectionnez la table tableOrders et modifiez les propriétés Hidden et Toggle Item comme suit :

Sélectionnez la table tableOrderDetails et réduisez-la également :

Maintenant, nous pouvons développer et réduire les niveaux de détail en cliquant sur les symboles +/- :

Ajoutons ensuite quelques détails supplémentaires aux rapports de notre application de facturation Node.js.

Ajoutez quatre nouvelles lignes au-dessus de la ligne d'en-tête existante dans la table tableOrderDetails . Le haut et le bas de ces quatre lignes serviront de tampon, et les deux lignes du milieu contiendront les données que nous voulons afficher.

Dans les deuxième et troisième lignes qui ont été ajoutées, laissez la cellule la plus à gauche de chaque ligne et fusionnez le reste des cellules pour chaque ligne. Ensuite, remplissez les lignes comme suit :

Cliquez sur Aperçu, et vous pouvez voir le nom du client et la date de commande ajoutés à la facture :

Ajout de colonnes de tri au tableau

La dernière chose que nous ajouterons au rapport est la possibilité de trier les colonnes des détails de la commande.

Sélectionnez chaque cellule d'en-tête et remplissez le champ Expression de tri sous la section Tri utilisateur avec les formules suivantes :

Cliquez sur Aperçu, et vous pouvez maintenant voir les icônes de tri à côté des en-têtes de colonne ; trier les articles de la commande par Quantité :

Trier la commande par prix total :

Création de l'application de facturation Node.JS

Maintenant que le rapport est défini, nous pouvons créer notre application de facturation d'inventaire. Cette application aura besoin d'un affichage Web réactif qui s'affiche bien sur les ordinateurs de bureau et les appareils mobiles. ActiveReportsJS offre cette fonctionnalité par défaut.

L'exemple d'application utilisera Node.js, un environnement d'exécution JavaScript, pour exécuter l'application Web côté serveur.

Pour commencer, créez un nouveau dossier appelé InventoryInvoice et ouvrez-le dans votre IDE préféré. Ensuite, dans la ligne de commande, exécutez :

 npm init

Cela vous guidera dans la configuration de votre fichier package.json , qui sera utilisé pour créer votre application. Une fois votre fichier généré, exécutez les deux commandes suivantes :

 npm install express npm install @grapecity/activereports

Cela installera Express, un framework pour Node.js, et ActiveReports, que nous utiliserons pour afficher les factures.

Maintenant que nous avons installé Express, nous devons l'utiliser. Créez un nouveau fichier dans le dossier InventoryInvoice nommé index.js . Ce fichier utilisera Express pour servir notre application de facturation d'inventaire Node.js.

Dans le fichier index.js, ajoutez le code suivant :

 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`) })

Maintenant, il est temps pour une explication rapide de ce que nous faisons ici :

• Les deux premières lignes de code incluent Express dans notre serveur et nous donnent une variable à utiliser pour référencer les méthodes et propriétés Express.

• La troisième ligne crée une variable qui mène au chemin relatif du dossier, et la quatrième ligne indique à Express que nous voulons utiliser ce chemin comme chemin statique de notre application.

• Les lignes six à huit utilisent Express pour démarrer l'application ; ici, nous lui disons de s'exécuter sur le port 3000, et quand il commence à s'exécuter, nous enregistrons un message sur le terminal.

Et c'est Express à un niveau très basique ! Maintenant que nous avons un serveur sur lequel nous pouvons commencer à lancer le logiciel de facturation d'inventaire, il est temps de créer une page pour servir l'utilisateur.

Créez un nouveau fichier dans le dossier InventoryInvoice et nommez-le index.html . Une fois créé, insérez le code suivant :

 <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>

Il y a quelques choses à faire ici. Tout d'abord, nous incluons quatre fichiers dans notre fichier HTML ; ar-js-ui.css , ar-js-viewer.css , ar-js-core.js et ar-js-viewer.js . Les fichiers CSS sont le fichier CSS de base pour ActiveReportsJS et le fichier CSS utilisé pour styliser la visionneuse.

Les fichiers JS sont les mêmes ; un fichier JS principal et un fichier JS pour le visualiseur.

Deuxièmement, pour le HTML, nous n'utilisons qu'une seule ligne pour créer la visionneuse ActiveReportsJS. Tout ce dont nous avons besoin est une seule div avec un ID que nous pouvons utiliser pour associer le spectateur à la div.

Troisièmement, en JavaScript, une fois la page chargée, nous créons un nouveau contrôle ActiveReports.Viewer, l'associant à notre div, puis lui disons d'ouvrir notre rapport.

Enfin, nous incluons une petite quantité de CSS afin que le spectateur occupe la totalité de l'écran.

Une fois cela fait, il vous suffit de déplacer votre rapport dans le dossier InventoryInvoice et d'exécuter la commande suivante pour démarrer votre application de facturation d'inventaire Node.js :

 node index.js

Accédez à localhost:3000, et vous devriez voir et pouvoir interagir avec le rapport que vous avez créé :

Le composant ActiveReportsJS Viewer est également réactif ; il est rendu de manière appropriée sur divers appareils dans une large gamme de tailles d'écran. Vous pouvez utiliser les outils de développement disponibles dans votre navigateur Web pour émuler rapidement les différents appareils mobiles, tailles d'écran et orientations de page :

Remarques finales

Et avec ça, on a fini ! Cet article a fourni une approche pratique pour créer un rapport de facturation d'inventaire mensuel à l'aide du concepteur ActiveReportsJS de GrapeCity.

Nous avons expliqué comment agréger les informations pour créer un graphique des ventes regroupées par mois, ainsi qu'un rapport tabulaire interactif avec une fonctionnalité d'exploration qui consolide les ventes par mois et par ID de commande.

Si vous souhaitez voir la demande dûment remplie et le rapport, vous pouvez le trouver ici . Bon codage !