Crear un inventario de Node.js y una aplicación de facturación de facturas: una guía

Al administrar un negocio en estos días, es importante tener acceso a su pedido, inventario y datos financieros, independientemente de la ubicación. Por eso es esencial tener informes en pantalla que sean flexibles e interactivos, así como adaptables a una variedad de resoluciones de pantalla.

Hacerlo le permite estar al tanto del rendimiento de su negocio y tomar decisiones informadas cuando y donde lo necesite.

ActiveReportsJS le permite crear aplicaciones web receptivas con capacidades de generación de informes altamente interactivas que funcionan en cualquier navegador y son compatibles con dispositivos móviles y de escritorio.

En este artículo, le mostraremos cómo crear un sistema de gestión de inventario Node.js receptivo, que permita a los usuarios realizar un seguimiento de los informes de pedidos mediante ActiveReportsJS. Estaremos cubriendo los siguientes temas:

• Diseño del título del informe

• Definición de acceso a datos en Node.js

• Uso de campos calculados

• Adición de un control de gráfico

• Adición de un control de tabla

• Definición de subtablas

• Adición de la funcionalidad de desglose

• Agregar columnas de clasificación a las tablas

• Creación de la aplicación de facturación de Node.js

  
  

Si desea seguir el informe completo y la solicitud, puede encontrar el repositorio aquí .

Creación de un informe de ventas basado en la web

Para nuestro escenario, tenemos un cliente llamado ACME Inc. que nos ha contratado para crear un informe de ventas. La solicitud viene con una maqueta del informe, que se ve así:

Para crear informes de nivel empresarial como el anterior, GrapeCity ofrece ActiveReportsJS Designer. Esta herramienta intuitiva lo ayuda a configurar su informe para obtener datos y representarlos utilizando elementos visuales como tablas, gráficos de barras, gráficos circulares y más.

ActiveReportsJS Designer almacena definiciones de informes en un formato JSON especial y las guarda en archivos con la extensión .rdlx-json .

Diseño del título del informe

Para crear un nuevo informe, en el Diseñador, abra el menú Archivo en la barra de herramientas del Diseñador y seleccione la opción de informe Diseño de página continua :

Ahora que tenemos un nuevo informe, al hacer clic en el botón de hamburguesa de la izquierda se expandirá el panel de control. Desde aquí, puede arrastrar y soltar controles en el lienzo de su informe para incluirlos en el informe:

Para nuestro informe, tendremos un contenedor en la parte superior que contiene la imagen del logotipo y una etiqueta. Arrastre y suelte un control de contenedor desde el panel de control al lienzo del informe; luego arrastre y suelte una imagen y un control de cuadro de texto en el control contenedor en el lienzo del informe.

Para vincular una imagen al control de imagen, puede extraer la imagen de una fuente externa, como una URL o una base de datos, o incrustar la imagen desde un archivo local. Nuestra imagen será el logo de ACME Inc.

Para el cuadro de texto, puede personalizar la fuente, el tamaño y el color como mejor le parezca. Para el texto del título, estableceremos esto en Pedidos mensuales .

Cuando esté completo, su título debería verse así:

Definición de acceso a datos en Node.js

ActiveReportsJS Designer administra las conexiones de datos a través de dos tipos de entidades: fuentes de datos y conjuntos de datos.

Una fuente de datos funciona como una conexión con el almacenamiento de datos externo, como un archivo URI o JSON o un documento JSON que se puede incrustar en el informe.

Un conjunto de datos es un elemento intermedio que obtiene datos del origen de datos y los vincula a campos en el modelo de datos del informe. También puede definir campos calculados, que transforman los datos de origen mediante expresiones. Los campos del conjunto de datos pueden ser utilizados por los controles de informe.

Nuestro software de facturación de inventario accederá a los datos a través de una API externa ubicada en un servicio HTTP y devolverá los resultados en formato JSON. El informe mostrará una variedad de información de pedidos basada en datos "en vivo" de ese servicio.

Para definir el acceso a los datos del cliente en su informe, comience seleccionando la pestaña Fuentes de datos y haga clic en el botón Agregar en la sección "Fuentes de datos":

Esto abrirá la ventana Nueva fuente de datos :

Esta ventana nombra la fuente de datos, establece el proveedor de datos y agrega cualquier encabezado HTTP adicional o parámetros necesarios.

Al agregar su proveedor de datos, puede elegir entre JSON remoto o incrustar su JSON en el informe a través de un archivo local. Cargaremos nuestros datos para esta aplicación de factura de inventario desde una fuente remota. Cuando todo esté agregado, haga clic en el botón Guardar para guardar su fuente de datos.

Nota: una fuente de datos es una configuración de conexión simple; aún no se ha realizado ninguna solicitud.

Ahora que hemos creado una fuente de datos, necesitamos crear un conjunto de datos que use esa fuente para recuperar los datos. Para crear un conjunto de datos, haga clic en el botón Más que aparece junto a nuestra fuente de datos:

Esto abrirá la ventana Nuevo conjunto de datos :

Por lo general, necesitamos establecer dos propiedades aquí: Uri/path y JSON Path . Uri/path le dice a ActiveReportsJS dónde buscar el archivo JSON una vez que llegue al punto final de la API, y Json Path se usa para decirle a nuestra aplicación de facturación Node.js qué parte del JSON queremos tomar.

Para Uri/path, usaremos /Customers para devolver datos sobre nuestros clientes. En nuestro caso, querremos obtener todas las entradas, por lo que pasaremos $.* como la ruta JSON.

Finalmente, necesitamos validar la fuente de datos para que ActiveReportsJS pueda confirmar que puede recuperar los datos. Sabrá que su fuente de datos fue validada si ve que la matriz de campos de la base de datos está llena de valores:

Necesitaremos otra fuente de datos para nuestra aplicación, que usaremos para recuperar datos sobre los pedidos realizados a través de la aplicación de facturación node.js. Su segunda fuente de datos debería verse así:

Necesitaremos dos conjuntos de datos más: uno basado en la fuente de datos NWAPI, usando /Products como Uri/ruta, y el otro basado en la fuente NWOData, usando /Orders como Uri/ruta. Para el conjunto de datos de Pedidos , establezca también la ruta Json en $.value[*] .

Cuando se configura, el panel de datos debería verse así:

Uso de campos calculados

Ocasionalmente, deberá transformar uno o más campos de origen en un nuevo campo calculado para usar en el informe. ActiveReportsJS ofrece un lenguaje de expresión con ricas funciones integradas para satisfacer esta necesidad.

En este ejemplo, transformemos el campo OrderDate en un formato de "mes/año". Debe agregar un campo personalizado a la lista de campos de base de datos vinculados automáticamente para lograr esto.

Edite el conjunto de datos de Pedidos y expanda la sección Campos calculados ; aquí es donde podemos agregar nuestro nuevo campo calculado. Nombre el campo MonthYear y establezca el valor como {DateTime.Parse(OrderDate).ToString("MM/yyyy")} :

Cree un nuevo conjunto de datos llamado OrderDetails basado en la fuente NWOData; establezca Uri/path en /OrderDetails y Json path en $.value[*] .

Tenga en cuenta que el conjunto de datos OrderDetails no incluye un campo para un valor total por artículo. Es probable que este valor se requiera más de una vez en su informe. Por lo tanto, deberá calcular este valor cada vez que sea necesario o crear un nuevo campo calculado. La última opción es mucho más eficiente.

Expanda la sección CalculatedFields del conjunto de datos OrderDetails, nombre el campo Subtotal y establezca el valor como {Round(100 * (UnitPrice - UnitPrice * Discount) * Cantidad) / 100} .

Adición de un control de gráfico

Ahora que hemos configurado varias fuentes de datos, es hora de incorporarlas al informe; para ello, añadiremos un gráfico. Al arrastrar y soltar un control de gráfico desde el panel de control al informe, aparecerá el asistente de gráficos:

Asegúrese de que el conjunto de datos esté configurado para usar nuestro conjunto OrderDetails y haga clic en el botón Siguiente .

Ahora podemos configurar nuestros campos de datos y categorías. Para "Valores de datos", agregue un nuevo campo. Establezca el nombre en {Subtotal} y el agregado en Sum . Luego, para "Categorías de datos", establezca el campo en {Lookup(OrderId, OrderId, MonthYear, "Orders")} . Debería verse así:

Haga clic en Siguiente y luego en Finalizar . Lo último que debe hacer, antes de ver el gráfico, es realizar algunos cambios finales en las propiedades de varios elementos del gráfico.

Para modificar elementos del gráfico, solo necesita asegurarse de que está viendo la ventana de propiedades en lugar de la ventana de datos y luego hacer clic en un elemento del gráfico.

La ventana de propiedades se actualizará para mostrar todas las propiedades del elemento actualmente seleccionado. Defina las propiedades del gráfico de la siguiente manera:

Cuando esté completo, su informe debería verse así:

Al hacer clic en Vista previa nos mostrará el informe con los datos que se están cargando:

Adición de un control de tabla

Además del gráfico, queremos permitir que los usuarios vean más datos en nuestra aplicación de facturación Node.js. Vamos a crear una vista tabular del volumen de pedidos mes a mes. Arrastre y suelte un control de tabla desde el panel de control al informe debajo del gráfico:

De forma predeterminada, se crea una tabla ActiveReportsJS con tres columnas y tres filas. La fila superior sirve como fila de encabezado, la fila del medio es nuestra fila de detalles y contiene nuestros datos, y la fila inferior es la fila de pie de página.

Los autores de informes pueden cambiar el tamaño de la tabla, agregar o eliminar filas y columnas, definir varios encabezados y pies de página, etc.

Ahora, seleccione la tabla, navegue hasta el panel de propiedades y defina las propiedades de la siguiente manera:

Luego elimine las filas de encabezado y pie de página de la tabla, ya que no son necesarias. Esto se hace haciendo clic con el botón derecho en una celda de la fila que desea eliminar, seleccionando la opción Fila y haciendo clic en Eliminar fila :

Ahora, combine las celdas para la fila de detalles. Esto se hace seleccionando las celdas que desea fusionar, haciendo clic derecho en una de las celdas seleccionadas, seleccionando la opción Celdas del menú y haciendo clic en Combinar celdas :

Ahora seleccione la celda recién fusionada, establezca el nombre de su cuadro de texto en txtMonth y establezca su valor en {MonthName(Month(OrderDate))}/{Year(OrderDate)} :

Finalmente, debe definir la agrupación de tablas. Esto se puede hacer seleccionando la celda y seleccionando <Grupo de detalles> en el menú emergente.

Establezca el primer nivel del grupo con la fórmula {Year(OrderDate)} y el segundo nivel como {Month(OrderDate)} :

La nueva tabla muestra el primer nivel de datos en la sección tabular:

Ahora, comenzaremos a agregar más niveles de datos. Cree una nueva fila debajo de nuestra fila actual, elimine las filas de encabezado y pie de página, combine la fila de detalles y luego arrastre y suelte otro control de tabla en la nueva celda grande.

Defina las propiedades de la nueva tabla de la siguiente manera:

Ahora seleccione la celda recién fusionada, establezca el nombre de su cuadro de texto en txtOrderId y establezca su valor en el ID de pedido: {OrderId} . Una vez que esté configurado, obtenga una vista previa del informe para ver los resultados:

Observe que la tabla tableOrders está en el segundo nivel de su informe; detalla los pedidos realizados dentro de un mes en particular.

Definición de subtablas

Ahora que estamos mostrando los pedidos por mes, es hora de agregar una sección de detalles del pedido para cada uno de los pedidos que llegan a través de nuestra aplicación de factura de inventario.

Agregue una nueva fila de detalles debajo de la fila de detalles OrderId , combine las celdas y coloque otra tabla dentro de esa fila de detalles. Esta vez, en lugar de eliminar las filas de encabezado y pie de página, elimine la fila de detalle y pie de página, dejando la fila de encabezado.

A continuación, en lugar de fusionar las tres celdas en una sola, fusione las celdas del centro y la derecha en una sola y deje la celda izquierda como su propia celda.

Defina la fórmula de la celda izquierda como Total: para la celda combinada, use el panel de propiedades para establecer la Alineación de la celda en Izquierda y su propiedad de formato en Moneda , y establezca la fórmula de la celda combinada como {SUMA (Subtotal)} :

Seleccione la tabla tableOrderTotal en el Explorador y expanda la propiedad Filtros . Haga clic en Agregar elemento y agregue un nuevo criterio de filtro con los siguientes campos:

Como puede ver, la nueva tabla tableOrderTotals se basa en el conjunto de datos OrderDetails. El valor total se obtiene filtrando los detalles del pedido por el ID de pedido de la fila tableOrder y sumando los valores del campo Subtotal.

Al hacer clic en Vista previa se mostrará la tabla actualizada:

Finalmente, crearemos una tabla que represente los artículos de pedido para nuestras facturas.

Cree una nueva fila de detalles en la tabla tableOrders, luego cree una nueva tabla dentro de la nueva fila de detalles denominada tableOrderDetails . Configure la tabla de la siguiente manera:

Cuando esté completa, la tabla debería verse así:

Al hacer clic en Vista previa se mostrará la nueva tabla:

Antes de continuar, haremos un poco de estilo para mejorar el aspecto de la mesa. Así es como se ve la versión final:

Adición de la funcionalidad de desglose

Ahora, agreguemos la funcionalidad de profundización al informe, lo que nos permitirá mantener las tablas tableOrders y tableOrderDetails colapsadas hasta que el usuario las expanda.

Seleccione la tabla tableOrders y cambie las propiedades Oculto y Alternar elemento de la siguiente manera:

Seleccione la tabla tableOrderDetails y hágala plegable también:

Ahora, podemos expandir y contraer los niveles de detalle haciendo clic en los símbolos +/-:

A continuación, agreguemos algunos detalles más a los informes de nuestra aplicación de facturación Node.js.

Agregue cuatro filas nuevas encima de la fila de encabezado existente en la tabla tableOrderDetails . La parte superior e inferior de estas cuatro filas servirán como un búfer, y las dos filas del medio contendrán los datos que queremos mostrar.

En la segunda y tercera fila que se agregaron, deje la celda del extremo izquierdo de cada fila sola y combine el resto de las celdas de cada fila. Luego, complete las filas de la siguiente manera:

Haga clic en Vista previa y podrá ver el nombre del cliente y la fecha del pedido agregados a la factura:

Agregar columnas de clasificación a la tabla

Lo último que agregaremos al informe es la capacidad de ordenar las columnas de detalles del pedido.

Seleccione cada celda de encabezado y complete el campo Expresión de clasificación en la sección Clasificación de usuario con las siguientes fórmulas:

Haga clic en Vista previa y ahora puede ver los iconos de clasificación junto a los encabezados de las columnas; ordenar los artículos del pedido por Cantidad:

Ordenar el pedido por Precio Total:

Creación de la aplicación de factura Node.JS

Ahora con el informe definido, podemos crear nuestra aplicación de factura de inventario. Esta aplicación necesitará una pantalla web receptiva que se vea bien tanto en computadoras de escritorio como en dispositivos móviles. ActiveReportsJS ofrece esta capacidad de forma predeterminada.

La aplicación de muestra utilizará Node.js, un entorno de tiempo de ejecución de JavaScript, para ejecutar la aplicación web en el lado del servidor.

Para comenzar, cree una nueva carpeta llamada InventoryInvoice y ábrala en su IDE preferido. Luego, en la línea de comando, ejecute:

 npm init

Esto lo guiará a través de la configuración de su archivo package.json , que se usará para construir su aplicación. Una vez que se haya generado su archivo, ejecute los siguientes dos comandos:

 npm install express npm install @grapecity/activereports

Esto instalará Express, un marco para Node.js y ActiveReports, que usaremos para mostrar las facturas.

Ahora que tenemos Express instalado, necesitamos ponerlo en uso. Cree un nuevo archivo en la carpeta InventoryInvoice denominado index.js . Este archivo usará Express para servir nuestra aplicación de factura de inventario Node.js.

Dentro del archivo index.js, agregue el siguiente 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`) })

Ahora, es hora de una explicación rápida de lo que estamos haciendo aquí:

• Las primeras dos líneas de código incluyen Express en nuestro servidor y nos dan una variable para usar para hacer referencia a los métodos y propiedades de Express.

• La tercera línea crea una variable que conduce a la ruta relativa de la carpeta y la cuarta línea le dice a Express que queremos usar esta ruta como la ruta estática de nuestra aplicación.

• Las líneas seis a ocho usan Express para iniciar la aplicación; aquí, le decimos que se ejecute en el puerto 3000, y cuando comienza a ejecutarse, registramos un mensaje en la terminal.

¡Y eso es Express en un nivel muy básico! Ahora que tenemos un servidor que podemos comenzar a lanzar el software de factura de inventario, es hora de crear una página para servir al usuario.

Cree un nuevo archivo en la carpeta InventoryInvoice y asígnele el nombre index.html . Una vez creado, inserte el siguiente 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>

Hay algunas cosas para repasar aquí. Primero, estamos incluyendo cuatro archivos en nuestro archivo HTML; ar-js-ui.css , ar-js-viewer.css , ar-js-core.js y ar-js-viewer.js . Los archivos CSS son el archivo CSS principal para ActiveReportsJS y el archivo CSS que se utiliza para diseñar el visor.

Los archivos JS son los mismos; un archivo JS central y un archivo JS para el espectador.

En segundo lugar, para el HTML, solo usamos una sola línea para crear el visor ActiveReportsJS. Todo lo que necesitamos es un solo div con una ID que podamos usar para asociar el visor con el div.

En tercer lugar, en JavaScript, una vez que se carga la página, creamos un nuevo control ActiveReports.Viewer, lo asociamos con nuestro div y luego le indicamos que abra nuestro informe.

Finalmente, estamos incluyendo una pequeña cantidad de CSS para que el espectador ocupe la totalidad de la pantalla.

Una vez hecho esto, todo lo que necesita hacer es mover su informe a la carpeta InventoryInvoice y ejecutar el siguiente comando para iniciar su aplicación de factura de inventario Node.js:

 node index.js

Vaya a localhost:3000 y debería ver y poder interactuar con el informe que ha creado:

El componente ActiveReportsJS Viewer también responde; se representa adecuadamente en varios dispositivos en una amplia gama de tamaños de pantalla. Puede utilizar las herramientas de desarrollo disponibles en su navegador web para emular rápidamente los distintos dispositivos móviles, tamaños de pantalla y orientaciones de página:

Notas finales

Y con eso, ¡hemos terminado! Este artículo proporcionó un enfoque práctico para crear un informe mensual de facturas de inventario utilizando ActiveReportsJS Designer de GrapeCity.

Repasamos cómo agregar información para crear un gráfico de ventas agrupado por meses, así como un informe tabular interactivo con funcionalidad de desglose que consolida las ventas por mes e ID de pedido.

Si desea ver la solicitud completa y el informe, puede encontrarlos aquí . ¡Feliz codificación!