---
title: "Configurar el client"
url: https://docs.catalyst.zoho.com/es/tutorials/document-processor/nodejs/configure-client/
description: "Crea una aplicación web React que detecta y extrae datos de documentos, y los procesa con OCR, Barcode Scanner e Identity Scanner de Zia Services."
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: "Install Tailwind CSS"
    url: https://tailwindcss.com/docs/guides/create-react-app
---

# Configurar el Client 

A continuación, configuremos el componente client. El [directorio del client](https://docs.catalyst.zoho.com/es/cli/v1/project-directory-structure/client-directory/) (`/app`) que inicializaste contendrá: 

* Archivos fuente de la aplicación en el directorio `/src`
* Archivos públicos en el directorio `/public`
* Módulos de Node
* El archivo de configuración `client-package.json`
* Archivos de dependencias `[package.json](https://docs.npmjs.com/files/package.json)` y `[package-lock.json](https://docs.npmjs.com/configuring-npm/package-lock-json.html)`

Puedes obtener el directorio completo del client con el código configurado desde [este repositorio de git](https://github.com/catalystbyzoho/tutorial-catalyst-zia-services) que descargaste anteriormente.

Reemplaza la carpeta `src` en este directorio con la del zip extraído usando un IDE y guarda los archivos. 

> **Nota:** Por favor, revisa el código en cada archivo para asegurarte de que lo comprendes completamente.

### Instalar paquetes de React

Instalaremos los siguientes módulos adicionales de React para la aplicación Document Processor:

* **`react-hot-toast`**: Esta biblioteca se utiliza para mostrar mensajes toast como notificaciones de estado en la aplicación client.

* **`react-router-dom`**: Este paquete se utiliza con fines de enrutamiento para cargar el contenido en la aplicación client de forma dinámica según la URL.

* **`axios`**: Esta biblioteca del client se utiliza para realizar solicitudes HTTP desde el lado del client para comunicarse con las APIs del lado del servidor.

* **`classnames`**: Este atributo se utiliza para establecer o devolver el valor del atributo de clase de un elemento en React.

Para instalar estos paquetes de React, navega al directorio del client del proyecto (`/app`) en tu terminal y ejecuta el siguiente comando:

```sh
npm i react-hot-toast react-router-dom axios classnames
```

![react-install](https://catalyst-docs-development.zohostratus.in/images/tutorials/document-processor/nodejs/react-install.webp)

Esto instalará los módulos y guardará todas sus dependencias.

La siguiente información también se actualizará en el archivo `package.json`.

![package-details](https://catalyst-docs-development.zohostratus.in/images/tutorials/document-processor/nodejs/package-details.webp)

#### Instalar Tailwind CSS

Hemos utilizado el [framework Tailwind](https://tailwindcss.com/) para implementar las clases CSS preconstruidas que escanean todos tus archivos html y componentes JS, y generan un archivo CSS estático para tu proyecto.

Navega al directorio del client del proyecto (`/app`) en tu terminal y para instalar e inicializar este framework, necesitarás ejecutar estos dos comandos en tu terminal:

1. Para instalar Tailwind CSS:

```sh
npm install -D tailwindcss@3
```

![tailwind](https://catalyst-docs-development.zohostratus.in/images/tutorials/document-processor/nodejs/tailwind.webp)

2. Para inicializar el archivo `tailwind.config.js` en tu proyecto:

```sh
npx tailwindcss init
```

![tailwind-init](https://catalyst-docs-development.zohostratus.in/images/tutorials/document-processor/nodejs/tailwind-init.webp)

Esto creará el archivo `tailwind.config.js` en tu directorio del client. Abre el archivo, pega el código a continuación y guarda el archivo. Puedes obtener más información sobre la instalación de tailwind en [esta página](https://tailwindcss.com/docs/guides/create-react-app).

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

```

El directorio del client está ahora configurado.

Repasemos rápidamente el funcionamiento de los componentes de función y client de la aplicación:

El usuario ingresa una imagen de entrada o un documento digital para ser procesado en la aplicación client. 

La API `/:model` en el archivo `index.js` se activa y define qué modelo invocar. Según el tipo del documento de entrada, se ejecutará la lógica correspondiente del modelo (`pan`, `cheque`, `ocr`, `barcode` o `passbook`).

Todos los modelos listados a continuación (excepto barcode) utilizan el método [zia.extractOpticalCharacters()](https://docs.catalyst.zoho.com/es/sdk/nodejs/v2/zia-services/ocr/) en el [paquete SDK de Node.js de Catalyst Zia Services](https://docs.catalyst.zoho.com/es/sdk/nodejs/v2/zia-services/ocr/) para extraer los datos del documento o imagen de entrada y proporcionar la respuesta en formato JSON.

* **`/pan`**: Para este documento, el `modelType` está configurado como `PAN`. El usuario proporciona una copia escaneada de la tarjeta PAN como entrada y la respuesta incluye el nombre, apellido, fecha de nacimiento y número de tarjeta PAN del titular. 

* **`/ocr`**: El `modelType` está configurado como `OCR` para el procesamiento OCR general. El texto extraído del documento de entrada y una puntuación de confianza se enviarán como respuesta. La puntuación de confianza es un valor porcentual que representa la precisión del reconocimiento y predicción de texto en el documento de entrada dado.

* **`/cheque`**: Para este documento, el `modelType` está configurado como `CHEQUE`. El usuario proporciona un formulario de cheque (solo en formato CTS-2010) y la respuesta incluye el número de cheque, detalles bancarios como el nombre del banco, sucursal, código IFSC, número de cuenta, monto y fecha de emisión.

* **`/barcode`**: El usuario proporciona códigos de barras 1D o 2D como entrada y devuelve la información codificada como respuesta. Hemos utilizado el método `[zia.scanBarcode()](https://docs.catalyst.zoho.com/es/sdk/nodejs/v2/zia-services/barcode-scanner/)`
en el [SDK de Node.js de Catalyst Zia Services](https://docs.catalyst.zoho.com/es/sdk/nodejs/v2/zia-services/ocr/) para realizar esta operación. Para obtener más información sobre los formatos de códigos de barras compatibles, consulta [esta página](https://docs.catalyst.zoho.com/es/zia-services/help/barcode-scanner/introduction/).

* **`/passbook`**: El usuario proporciona un documento de libreta bancaria como entrada y la respuesta incluye información como el número de cuenta, nombre del banco, su sucursal y dirección. 

6. La API `/aadhaar` en el archivo `index.js` se activa cuando el usuario elige procesar una tarjeta aadhaar en la aplicación client. El usuario necesita proporcionar las imágenes del frente y el reverso de la tarjeta por separado, las cuales serán procesadas. Este modelo reconoce el idioma del documento automáticamente y lo procesa. Esta API implementa el método `[zia.extractAadhaarCharacters()](https://docs.catalyst.zoho.com/es/sdk/nodejs/v2/zia-services/identity-scanner/aadhaar/)` en el paquete SDK que extrae los parámetros reconocidos en la tarjeta aadhaar como el nombre del titular, dirección, género y número de tarjeta aadhaar. 

Veamos los componentes del client en detalle:

* El directorio raíz del client contiene el archivo específico de Catalyst [`client-package.json`](https://docs.catalyst.zoho.com/es/cli/v1/project-directory-structure/client-directory), que contiene las configuraciones predeterminadas del client.

* La carpeta `src` contiene los archivos fuente de la aplicación, incluyendo los archivos JavaScript y CSS que se incluirán en la carpeta build cuando compilemos la aplicación React. El archivo `App.jsx` facilita el comportamiento del front end de la aplicación. Maneja los eventos de cambio y reducción, y publica y obtiene datos usando las APIs definidas anteriormente. Los archivos dentro de la carpeta `views` son responsables de renderizar la respuesta como salida en la aplicación client. 

* La carpeta `public` se utiliza para almacenar archivos que pueden ser accedidos abiertamente por los navegadores a través de URLs públicas. Incluye los siguientes archivos:

    1. `index.html`: El punto de entrada predeterminado de la aplicación.

    2. `manifest.json`: Contiene información sobre la aplicación web incluyendo el `start_url` que está configurado como ".". Esto permite que cada versión abreviada de la URL que el usuario ingrese se origine desde la URL base [URL_app_web_Catalyst/app/](https://docs.catalyst.zoho.com/es/cloud-scale/help/web-client-hosting/key-concepts/#default-web-application-url) cuando la aplicación está alojada. 

* `tailwind.config.js`: Este archivo contiene todas las personalizaciones del lado del client de tu aplicación, como los estilos CSS implementados en tu proyecto.