---
title: "Configurar el client"
url: https://docs.catalyst.zoho.com/es/tutorials/payslip-generator-app/nodejs/configure-client/
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: "Client Directory Structure"
    url: /es/cli/v1/project-directory-structure/client-directory/
  - name: "Web Client Hosting"
    url: /es/cloud-scale/help/web-client-hosting/introduction/
---

# Configurar el Client

Ahora, configuremos el componente client. El [directorio del client](https://docs.catalyst.zoho.com/es/cli/v1/project-directory-structure/client-directory/) contiene:

* El archivo `index.html` que contiene el código HTML para la aplicación frontend
* El archivo `main.css` que contiene el código CSS para la aplicación frontend
* El archivo `main.js` que contiene el código JavaScript
* El archivo de configuración `client-package.json`

Codificaremos `index.html`, `main.css` y `main.js`.

> **Nota:** Por favor, revise el código en esta sección para asegurarse de que lo comprende completamente.

Copie el código a continuación y péguelo en los archivos respectivos ubicados en el directorio `client/directory` de su proyecto usando un IDE y guarde los archivos.

**index.html**

```xml
<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
    />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="main.js"></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="main.css"/>
    <script>
      window.addEventListener("DOMContentLoaded", function () {
        // Obtener los elementos de entrada
        var basicSalaryInput = document.getElementById("basicSalary");
        var allowancesInput = document.getElementById("allowances");
        var deductionsInput = document.getElementById("deductions");
        var netSalaryInput = document.getElementById("netSalary");
        // Agregar event listeners a los campos de entrada
        basicSalaryInput.addEventListener("input", calculateNetSalary);
        allowancesInput.addEventListener("input", calculateNetSalary);
        deductionsInput.addEventListener("input", calculateNetSalary);
        // Función para calcular el salario neto
        function calculateNetSalary() {
          // Obtener valores de los campos de entrada
          var basicSalary = parseFloat(basicSalaryInput.value) || 0;
          var allowances = parseFloat(allowancesInput.value) || 0;
          var deductions = parseFloat(deductionsInput.value) || 0;
          // Calcular el salario neto
          var netSalary = basicSalary + allowances - deductions;
          // Actualizar el campo de entrada del salario neto
          netSalaryInput.value = netSalary.toFixed(2);
        }
      });
    </script>
  </head>
  <body>
    <div class="container mt-5 mb-5">
      <h2>Payslip Generator</h2>
      <form onsubmit="generatePayslip();return false;">
        <div class="row">
          <div class="form-group col-md-6">
            <label for="employeeName">Employee Name:</label>
            <input type="text" id="employeeName" name="employeeName" required />
          </div>
          <div class="form-group col-md-6">
            <label for="employeeId">Employee ID:</label>
            <input type="text" id="employeeId" name="employeeId" required />
          </div>
        </div>
        <div class="row">
          <div class="form-group col-md-6">
            <label for="designation">Employee Designation:</label>
            <input type="text" id="designation" name="designation" required />
          </div>
          <div class="form-group col-md-6">
            <label for="employeeEmail">Employee Email:</label>
            <input
              type="text"
              id="employeeEmail"
              name="employeeEmail"
              required
            />
          </div>
        </div>
        <div class="row">
          <div class="form-group col-md-6">
            <label for="basicSalary">Basic Salary:</label>
            <input type="number" id="basicSalary" name="basicSalary" min="0" oninput="validity.valid||(value='');" required />
          </div>
          <div class="form-group col-md-6">
            <label for="allowances">Allowances:</label>
            <input type="number" id="allowances" name="allowances" min="0" oninput="validity.valid||(value='');" required />
          </div>
        </div>
        <div class="row">
          <div class="form-group col-md-6">
            <label for="deductions">Deductions:</label>
            <input type="number" id="deductions" name="deductions" min="0" oninput="validity.valid||(value='');" required />
          </div>
          <div class="form-group col-md-6">
            <label for="netSalary">Net Salary:</label>
            <input type="number" id="netSalary" name="netSalary" readonly />
          </div>
        </div>
        <div class="row">
          <div class="form-group col-md-6">
            <label for="paymentMethod">Payment Method:</label>
            <select id="paymentMethod" name="paymentMethod" required>
              <option value="">Select</option>
              <option value="Bank Transfer">Bank Transfer</option>
              <option value="Cheque">Cheque</option>
              <option value="Cash">Cash</option>
            </select>
          </div>
        </div>
        <input
          type="submit"
          value="Submit"
        />
      </form>
    </div>
  </body>
</html>

```

**main.css**

```css
.container {     
    background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
    padding: 40px;
    margin-top: 50px;
    margin-bottom: 50px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  h2 {
   
    background: linear-gradient(to right, #4caf50, #45a049);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    margin-bottom: 40px;
  }
  /* Styling for the form labels */
  label {
    transition: color 0.3s ease; /* Add a subtle animation on hover */
  }
  
  label:hover {
    /* Change the color on hover */
    color: #4caf50;
  }
  
  /* Styling for the form input fields */
  input[type="text"],
  input[type="number"],
  select {
    /* Increase the height of the input fields */
    height: 40px;
    /* Add a subtle box shadow */
  }
  
  /* Styling for the form input groups */
  .form-group {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .form-group label {
    flex: 0 0 200px; /* Set a fixed width for the labels */
    margin-right: 10px; /* Add some spacing between label and input */
  }
  
  .form-group input,
  .form-group select {
    flex: 1; /* Allow the inputs to take up remaining space */
  }
  /* Styling for the submit button */
  input[type="submit"] {
    /* Add a gradient background */
    background-image: linear-gradient(to right, #4caf50, #45a049);
    /* Add a box shadow */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    margin-top: 15px;
    width: 150px;
    margin-left: 600px;
  }
  input[type="submit"]:hover {
    /* Darken the background on hover */
    background-image: linear-gradient(to right, #45a049, #398e3d);
  }

```

> **Nota:** El nombre del paquete de la función Node.js `payslip_generator_function` se ha agregado en el código de `main.js` en la línea **13**. Si ha proporcionado un nombre de paquete diferente, asegúrese de reemplazarlo correspondientemente.

**main.js**

```javascript
  function generatePayslip() {
    // Recuperar valores del formulario
    const employeeName = document.getElementById('employeeName').value;
    const employeeId = document.getElementById('employeeId').value;
    const designation = document.getElementById('designation').value;
    const paymentMethod = document.getElementById('paymentMethod').value;
    const employeeEmail = document.getElementById('employeeEmail').value;
    const basicSalary = parseFloat(document.getElementById('basicSalary').value);
    const allowances = parseFloat(document.getElementById('allowances').value);
    const deductions = parseFloat(document.getElementById('deductions').value);

    $.ajax({
      url: '/server/payslip_generator_function/generatepayslip', //proporcione aquí el endpoint de su función
      type: 'post',
      contentType: 'application/json',
      data: JSON.stringify({
        employeeName,
        employeeId,
        basicSalary,
        allowances,
        deductions,
        designation,
        paymentMethod,
        employeeEmail
    }),
      success: function (data) {
          alert(data);
          window.location.reload();
      },
      error: function (error) {
        console.log(error);
        alert(error.responseText);
        window.location.reload();
      }
  });
  }

```

El directorio del client está ahora configurado.

Repasemos el funcionamiento del código de la función y el client:

* El usuario final ingresa los detalles del empleado en el lado del client. Cuando el usuario final hace clic en **Submit**, una llamada `POST` en `main.js` activa el endpoint API `/generatepayslip` y los datos se pasan a la función en formato JSON.

* La función activa el [SDK de PDF & Screenshot](https://docs.catalyst.zoho.com/es/sdk/nodejs/v2/smartbrowz/generate-pdfnscreenshot/#generate-visual-documents-using-template) y se pasa el cuerpo de la solicitud y se genera el documento PDF. El PDF se almacena entonces en una ubicación temporal.

* Se activa el [SDK de Send Mail](https://docs.catalyst.zoho.com/es/sdk/nodejs/v2/cloud-scale/mail/send-email/) y el documento PDF se lee desde la ubicación temporal y se adjunta al correo electrónico. El correo electrónico se envía al empleado desde el ID de correo electrónico configurado usando el componente [Mail](https://docs.catalyst.zoho.com/es/cloud-scale/help/mail/introduction/).

* Se mostrará una respuesta con el mensaje de confirmación en el lado del client, después de que el documento PDF haya sido enviado por correo electrónico.