--- title: "Introducción" url: https://docs.catalyst.zoho.com/es/tutorials/payslip-generator-app/nodejs/introduction/ description: "Construya una aplicación web que utiliza Catalyst para generar un PDF a partir de una plantilla de nómina dinámica, y enviarlo por correo al usuario final." last_updated: 2026-11-04T10:10:44Z service: All Services type: tutorial related_links: - name: "Project Directory Structure" url: /es/cli/v1/project-directory-structure/introduction/ - name: "Node.js SDK" url: /es/sdk/nodejs/v2/overview/ --- # Aplicación generadora de nóminas ### Introducción Este tutorial le ayudará a construir una aplicación en Catalyst que genera nóminas de empleados. La aplicación permitirá a los usuarios estilizar la plantilla de la nómina de la empresa, ingresar detalles del empleado en un formulario y enviar la nómina a los empleados respectivos por correo electrónico. La aplicación client se verá así: ![smartbrowz_tutorial_payslip_first_look](https://catalyst-docs-development.zohostratus.in/images/tutorials/payslip-generator/smartbrowz_tutorial_payslip_first_look.webp) El correo electrónico enviado al empleado se verá así: ![smartbrowz_tutorial_payslip_first_look_email](https://catalyst-docs-development.zohostratus.in/images/tutorials/payslip-generator/smartbrowz_tutorial_payslip_first_look_email.webp) La nómina que se genera y envía por correo electrónico como PDF se verá así: ![smartbrowz_tutorial_payslip_first_look_template](https://catalyst-docs-development.zohostratus.in/images/tutorials/payslip-generator/smartbrowz_tutorial_payslip_first_look_template.webp) Puede acceder a una aplicación funcional y probar su funcionalidad aquí: [¡Pruebe la App!](https://payslip.catalystserverlessapp.com/) La aplicación Payslip Generator utiliza los siguientes Servicios de Catalyst y sus componentes: 1. [**Catalyst SmartBrowz**](https://docs.catalyst.zoho.com/es/smartbrowz/getting-started/introduction/) - **Templates**: [Templates](https://docs.catalyst.zoho.com/es/smartbrowz/help/templates/create-templates/) se utiliza para crear una plantilla personalizada de una nómina. - **PDF & Screenshot**: [PDF & Screenshot](https://docs.catalyst.zoho.com/es/smartbrowz/help/pdfnscreenshot/introduction/) se utilizará para probar la plantilla y generar PDFs de la plantilla en el backend. 2. [**Catalyst Serverless**](https://docs.catalyst.zoho.com/es/serverless/getting-started/introduction/) - **Función Advanced I/O**: La [función Advanced I/O](https://docs.catalyst.zoho.com/es/serverless/help/functions/advanced-io/) puede codificarse usando Node.js. Contiene las APIs que le permiten alimentar los detalles a su plantilla personalizada y activar el componente Mail para enviar un correo electrónico al empleado. 3. [**Catalyst CloudScale**](https://docs.catalyst.zoho.com/es/cloud-scale/getting-started/introduction/) - **Web Client Hosting**: El frontend/client de la aplicación se alojará en Catalyst usando [Web Client Hosting](https://docs.catalyst.zoho.com/es/cloud-scale/help/web-client-hosting/introduction/). Puede inicializar y crear su web client como una [aplicación web básica](https://docs.catalyst.zoho.com/es/cli/v1/initialize-resources/initialize-client/#basic-client-applications) usando plugins nativos de Catalyst. - **Mail**: [Mail](https://docs.catalyst.zoho.com/es/cloud-scale/help/mail/introduction/) se utiliza para configurar la dirección de correo electrónico desde la cual se enviarán los correos electrónicos automatizados a los empleados. Utilizaremos la [consola web de Catalyst](https://console.catalyst.zoho.com/) y la [Interfaz de Línea de Comandos](https://docs.catalyst.zoho.com/es/cli/v1/cli-command-reference/) (CLI) de Catalyst para construir esta aplicación. Se le proporcionará el código para los archivos que se incluirán en los componentes de función y client en este tutorial. Tendrá que copiar el código proporcionado aquí y pegarlo en los archivos apropiados según se indique. ### Arquitectura de la aplicación La lógica de la aplicación generadora de nóminas se describe a continuación: ![catalyst_payslip_architecture](https://catalyst-docs-development.zohostratus.in/images/tutorials/payslip-generator/catalyst_payslip_architecture.webp) * **Enviar el formulario**: El usuario final ingresará los detalles del empleado en el formulario mostrado en el lado del client, como nombre, cargo, ID, correo electrónico, salario base, deducciones, asignaciones y método de pago. Una vez ingresados los detalles, el usuario hará clic en **Submit**. * **Se activará el SDK de PDF & Screenshot**: En el backend, se activará el [SDK de PDF & Screenshot](https://docs.catalyst.zoho.com/es/sdk/nodejs/v2/smartbrowz/generate-pdfnscreenshot/), y se lanzará un [navegador headless](https://docs.catalyst.zoho.com/es/smartbrowz/help/headless/introduction/). Usando el [Template ID](https://docs.catalyst.zoho.com/es/smartbrowz/help/templates/create-templates/) generado por Catalyst, los detalles recopilados en el formulario se renderizarán en la plantilla y se convertirán en un PDF. * **Se enviará el correo electrónico**: El PDF generado se enviará por correo electrónico como un archivo adjunto al correo electrónico ingresado en el formulario usando el [SDK de Send Mail](https://docs.catalyst.zoho.com/es/sdk/nodejs/v2/cloud-scale/mail/send-email/), que invoca el componente *Mail*. Se notificará al usuario que el correo electrónico ha sido enviado, y el formulario se actualizará y estará listo para recibir los siguientes detalles del usuario.