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 de la barre d'outils du Designer et sélectionnez l'option de rapport : Fichier 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 , puis cliquez sur le bouton dans la section « Sources de données » : Sources de données Ajouter 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 pour enregistrer votre source de données. Enregistrer Une source de données est une configuration de connexion simple ; aucune demande n'a encore été faite. Remarque : 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 qui apparaît à côté de notre source de données : Plus Cela fera apparaître la fenêtre : Nouvel ensemble de données Nous devons généralement définir deux propriétés ici : et . 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. Uri/path JSON Path Pour l'Uri/path, nous utiliserons 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. /Customers $.* 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 est rempli de valeurs : Database Fields 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 comme Uri/path, et l'autre basé sur la source NWOData, en utilisant comme Uri/path. Pour l'ensemble de données , définissez également le chemin Json sur . /Products /Orders Orders $.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 et développez la section ; c'est là que nous pouvons ajouter notre nouveau champ calculé. Nommez le champ et définissez la valeur comme : Commandes Champs calculés MonthYear {DateTime.Parse(OrderDate).ToString("MM/yyyy")} Créez un nouvel ensemble de données nommé basé sur la source NWOData ; définissez Uri/path sur et le chemin Json sur . OrderDetails /OrderDetails $.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 de l'ensemble de données OrderDetails, nommez le champ et définissez la valeur sur . CalculatedFields Subtotal {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 , puis cliquez sur le bouton . OrderDetails 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 et l'agrégat sur . Ensuite, pour "Catégories de données", définissez le champ sur . Cela devrait ressembler à ça : {Subtotal} Sum {Lookup(OrderId, OrderId, MonthYear, "Orders")} Cliquez sur puis sur . 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. Suivant, Terminer 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 nous montrera le rapport avec les données en cours de chargement : Aperçu 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 et cliquez sur : Ligne 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 dans le menu et cliquez sur : Cellules Fusionner les cellules Sélectionnez maintenant la cellule nouvellement fusionnée, définissez son nom de zone de texte sur et définissez sa valeur sur : txtMonth {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 dans le menu contextuel. Définissez le premier niveau du groupe avec la formule et le deuxième niveau comme : {Year(OrderDate)} {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 et définissez sa valeur sur l' . Une fois cela configuré, prévisualisez le rapport pour voir les résultats : txtOrderId ID de commande : {OrderId} Notez que la table se trouve au deuxième niveau de votre rapport ; il détaille les commandes passées au cours d'un mois donné. tableOrders 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 , 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. OrderId 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 pour la cellule fusionnée, utilisez le panneau des propriétés pour définir l' sur et sa propriété sur , puis définissez la formule de la cellule fusionnée sur : Total : alignement de la cellule Gauche de format Devise {SOMME(sous-total)} Sélectionnez la table dans l'explorateur et développez la propriété . Cliquez sur et ajoutez un nouveau critère de filtre avec les champs suivants : tableOrderTotal Filters Ajouter un élément 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 pour afficher le tableau mis à jour : Aperçu 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 . Configurez le tableau comme suit : tableOrderDetails Une fois terminé, le tableau devrait ressembler à ceci : Cliquez sur pour afficher le nouveau tableau : Aperçu 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 et réduites jusqu'à ce que l'utilisateur les développe. tableOrders tableOrderDetails Sélectionnez la table tableOrders et modifiez les propriétés et comme suit : Hidden Toggle Item 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 . 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. tableOrderDetails 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 et vous pouvez voir le nom du client et la date de commande ajoutés à la facture : Aperçu, 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 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é : Aperçu, 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é et ouvrez-le dans votre IDE préféré. Ensuite, dans la ligne de commande, exécutez : InventoryInvoice npm init Cela vous guidera dans la configuration de votre fichier , qui sera utilisé pour créer votre application. Une fois votre fichier généré, exécutez les deux commandes suivantes : package.json 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 nommé . Ce fichier utilisera Express pour servir notre application de facturation d'inventaire Node.js. InventoryInvoice index.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 et nommez-le . Une fois créé, insérez le code suivant : 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'); } Il y a quelques choses à faire ici. Tout d'abord, nous incluons quatre fichiers dans notre fichier HTML ; , , et . Les fichiers CSS sont le fichier CSS de base pour ActiveReportsJS et le fichier CSS utilisé pour styliser la visionneuse. ar-js-ui.css ar-js-viewer.css ar-js-core.js ar-js-viewer.js 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 et d'exécuter la commande suivante pour démarrer votre application de facturation d'inventaire Node.js : InventoryInvoice 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 . Bon codage ! ici