# NodeJS -------------------------------------------------------------------------------- title: "Introducción" description: "Crea una aplicación web React que detecta y extrae datos de documentos de entrada, y los procesa usando OCR, Barcode Scanner e Identity Scanner de Zia Services." last_updated: "2026-10-08T06:48:03.632Z" source: "https://docs.catalyst.zoho.com/es/tutorials/document-processor/nodejs/introduction/" service: "All Services" related: - Advanced I/O Function (/es/serverless/help/functions/advanced-io/) - Catalyst Extensions (/es/catalyst-extensions/vs-code-extension/introduction/) -------------------------------------------------------------------------------- # Document Processor ### Introducción Este tutorial te ayudará a construir una aplicación React de Document Processor en Catalyst que implementa capacidades de AI/ML para detectar, procesar y extraer datos específicos de documentos escaneados e imágenes. La aplicación Document Processor construida en este tutorial podrá hacer lo siguiente: 1. Reconocer texto escrito a mano o impreso en documentos digitales escaneados o imágenes, y convertirlos a un formato legible por máquina (una respuesta JSON). 2. Escanear códigos de barras impresos (formatos 1D y 2D), y extraer la información codificada en ellos. 3. Escanear y procesar documentos de identificación digital como PAN, AADHAAR y otros documentos incluyendo libretas bancarias y cheques, y extraer los registros de campos de esos documentos. También ten en cuenta que PAN y AADHAAR son documentos de identificación específicos de la región de India. Nota: PAN y AADHAAR son documentos de identificación específicos de la región de India. La aplicación cliente se verá de la siguiente manera: Puedes acceder a una aplicación funcional y probar su funcionalidad aquí: ¡Prueba la App! La aplicación Document Processor aprovecha los siguientes servicios de Catalyst y sus componentes: 1. **Catalyst Serverless** - **Functions**: Codificaremos una función Advanced I/O en **Node.js**. Contiene la lógica que te permite procesar y extraer datos de los documentos o imágenes de entrada. Hemos aprovechado el paquete SDK de Catalyst Zia Services para Node.js para este propósito. 2. **Catalyst Cloud Scale** - **Web Client Hosting**: Crearemos e inicializaremos el cliente web como una aplicación React en este tutorial usando plugins integrados de Catalyst. La aplicación cliente se alojará en Catalyst usando Web Client Hosting. 3. **Catalyst Zia Services** - **OCR**: Este componente te ayuda a detectar y reconocer caracteres textuales en tus documentos digitales o imágenes de entrada, y convertirlos a texto codificado por máquina. Catalyst OCR puede reconocer textos en 10 idiomas principales. - **Barcode Scanner**: Este componente te permite escanear códigos de barras y extraer la información codificada en ellos. Puedes aprender más sobre los formatos de códigos de barras soportados en esta página. - **Identity Scanner**: El componente Identity Scanner te permite escanear y extraer datos de documentos de identificación comunes como tarjetas AADHAAR, tarjetas PAN, libretas bancarias y cheques. Consulta esta página para aprender más sobre los idiomas, formatos de archivo y tamaños de archivo soportados. Usaremos la consola web de Catalyst y la Interfaz de Línea de Comandos (CLI) de Catalyst para construir esta aplicación. Puedes obtener el código del tutorial de este repositorio git. Tendrás que reemplazar los archivos en el directorio del proyecto según se indica en las secciones de configuración de función y cliente de este tutorial. -------------------------------------------------------------------------------- title: "Prerrequisitos" description: "Crea una aplicación web de Catalyst que detecta, procesa y extrae datos de documentos digitales de entrada usando los componentes de Catalyst Zia Services." last_updated: "2026-10-08T06:48:03.632Z" source: "https://docs.catalyst.zoho.com/es/tutorials/document-processor/nodejs/prerequisites/" service: "All Services" related: - CLI Command Reference (/es/cli/v1/cli-command-reference/) - Install CLI (/es/getting-started/installing-catalyst-cli/) - Login CLI (/es/cli/v1/login/login-from-cli/) -------------------------------------------------------------------------------- # Prerrequisitos Antes de comenzar a construir la aplicación, debes tener los siguientes prerrequisitos instalados en tu sistema: 1. Catalyst CLI: Catalyst CLI contiene un conjunto de herramientas que te permiten inicializar, desarrollar, probar y desplegar los componentes de tu aplicación desde tu máquina local. Trabajaremos con Catalyst CLI en este tutorial. Debes realizar estas acciones: 1. Instalar Catalyst CLI: Catalyst CLI se instala a través de NPM. Por lo tanto, debes tener NPM y Node.js instalados en tu sistema antes de instalar el CLI. Consulta la **página de ayuda para instalar Catalyst CLI** para obtener detalles sobre los prerrequisitos y los pasos para instalarlo. 2. Iniciar sesión en Catalyst CLI: Después de instalar Catalyst CLI, debes autenticar el CLI con tu cuenta de Catalyst antes de usarlo. Consulta la **página de ayuda de inicio de sesión del CLI** para conocer los pasos para iniciar sesión desde Catalyst CLI y las diversas opciones disponibles. 2. Cualquier herramienta IDE para desarrollo de código del cliente: Puedes usar cualquier IDE para trabajar con el código del cliente. Algunas opciones populares incluyen Visual Studio Code, IntelliJ IDEA y Sublime Text. Descarga e instala un IDE de tu preferencia en tu sistema. Si eres usuario del IDE Visual Studio Code, puedes instalar la extensión Catalyst Tools, y usar tu IDE en lugar del CLI. Puedes encontrar más detalles sobre la extensión de Catalyst para VS Code en esta sección de ayuda. -------------------------------------------------------------------------------- title: "Crear un proyecto" description: "Crea una aplicación web React que detecta y extrae datos de documentos de entrada, y los procesa usando OCR, Barcode Scanner e Identity Scanner de Zia Services." last_updated: "2026-10-08T06:48:03.632Z" source: "https://docs.catalyst.zoho.com/es/tutorials/document-processor/nodejs/create-a-project/" service: "All Services" related: - Catalyst Zia Services SDK (/es/sdk/nodejs/v2/zia-services/ocr/) - Catalyst Project Creation (/es/getting-started/catalyst-projects/#create-a-catalyst-project) -------------------------------------------------------------------------------- # Crear un proyecto Primero vamos a crear un proyecto de Catalyst desde la consola de Catalyst. 1. Inicia sesión en la consola de Catalyst y haz clic en Create new Project. <br /> 2. Ingresa el nombre del proyecto como **"ZiaServices"** en la ventana emergente que aparece. <br /> 3. Haz clic en Create. Tu proyecto será creado y se abrirá. Implementaremos los componentes de Zia Services en este tutorial usando el paquete SDK de Catalyst Zia Services. -------------------------------------------------------------------------------- title: "Inicializar el proyecto" description: "Crea una aplicación web en Catalyst que detecta, procesa y extrae datos de documentos digitales de entrada utilizando los componentes de Catalyst Zia Services." last_updated: "2026-10-08T06:48:03.633Z" source: "https://docs.catalyst.zoho.com/es/tutorials/document-processor/nodejs/initialize-project/" service: "All Services" related: - Initialize Resources (/es/cli/v1/initialize-resources/introduction) - Project Directory Structure (/es/cli/v1/project-directory-structure/introduction/) -------------------------------------------------------------------------------- # Inicializar el proyecto desde la CLI Ahora puedes comenzar a trabajar en tu proyecto de Catalyst desde la CLI. El primer paso es inicializar el proyecto en un directorio vacío. Este será el directorio principal de tu proyecto, donde se guardarán todos los archivos del proyecto. Puedes obtener más información sobre esto en la página de ayuda Project Directory Structure. Puedes aprender sobre la inicialización de un proyecto en detalle en la documentación de ayuda de la CLI. Para la aplicación Document Processor, inicializaremos los componentes del client y la función Advanced I/O. En este tutorial, codificaremos la función Advanced I/O en la plataforma **Node.js**. Sigue los pasos indicados para inicializar el proyecto y crear los componentes de función y client necesarios para la aplicación: 1. Crea una carpeta para el proyecto en tu máquina local y navega hasta ella desde el terminal de la CLI. 2. Para inicializar el proyecto, ejecuta el siguiente comando: catalyst init 3. La CLI te pedirá que selecciones la organización predeterminada de Catalyst. Selecciona la organización en la que creaste el proyecto en el primer paso de este tutorial, luego presiona **Enter**. Nota: Para averiguar en qué organización se encuentra tu proyecto, accede al portal multi-org desde tu consola de Catalyst. 4. Puedes asociar el directorio del proyecto actual con el proyecto de Catalyst que creaste en esta organización. Selecciona **Ecommerce** y presiona **Enter**. 5. Selecciona **Functions** y **Client** presionando **espacio**, luego presiona **Enter** para confirmar tu elección e inicializar tu proyecto. 6. La CLI iniciará la configuración de la función. Selecciona **AdvancedIO** como el tipo de función. 7. Selecciona el runtime más reciente de **Node.js** como el stack de la función. 8. Proporciona el nombre del paquete como "zia_services_function" para tu función de Node cuando se te solicite y presiona **Enter**. También debes definir el punto de entrada como index.js y proporcionar los detalles del autor en este paso. Alternativamente, puedes presionar **Enter** sin ingresar datos para usar los valores predeterminados. La CLI solicitará la inicialización de las dependencias de Node. Presiona **Y** para confirmar la instalación y presiona **Enter** para confirmar tu elección. Los módulos de Node se instalarán. Nota: Asegúrate de ingresar el nombre del paquete de la función exactamente como se indica, porque el código de la aplicación contiene el mismo nombre. 9. La CLI iniciará ahora la configuración del client. Selecciona **React web app** y elige **JavaScript** de la opción y presiona **Enter** para inicializar tu client como una aplicación web React. 10. Ingresa **"app"** como el nombre de tu paquete de client y presiona **Enter**. También puedes proporcionar cualquier nombre de tu elección. La inicialización de Catalyst está completa. El directorio del proyecto ahora está configurado con el directorio del client y el directorio de funciones junto con archivos de configuración y dependencias. El directorio del proyecto también contiene el archivo de configuración catalyst.json y un archivo oculto .catalystrc. La estructura de tu directorio del proyecto debería verse como se muestra a continuación: -------------------------------------------------------------------------------- title: "Configurar la función Advanced I/O" description: "Crea una aplicación web React que detecta y extrae datos de documentos de entrada, y los procesa utilizando OCR, Barcode Scanner e Identity Scanner de Zia Services." last_updated: "2026-10-08T06:48:03.633Z" source: "https://docs.catalyst.zoho.com/es/tutorials/document-processor/nodejs/configure-advancedio/" service: "All Services" related: - Functions Directory Structure (/es/cli/v1/project-directory-structure/functions-directory) - Advanced I/O Function (/es/serverless/help/functions/advanced-io/) -------------------------------------------------------------------------------- # Configurar la función Advanced I/O A continuación, comenzaremos a codificar la aplicación Document Processor configurando el componente de funciones. El directorio de funciones que inicializaste, functions/zia_services_function, contiene: * El archivo principal de la función index.js * El archivo de configuración catalyst-config.json * node_modules * Archivos de dependencias package.json y package-lock.json Además de este directorio, necesitaremos agregar algunos subdirectorios y archivos en el directorio functions/zia_services_function. Tenemos el código del tutorial en este repositorio de git. Descárgalo como archivo ZIP y extrae su contenido. Reemplaza el archivo index.js en el directorio functions/zia_services_function de tu proyecto con el del zip extraído. El directorio functions/zia_services_function del ZIP descargado contendrá los subdirectorios y archivos mencionados a continuación, además de los archivos y dependencias predeterminados de la función. * Archivo constants.js * Directorio services * Directorio pojos * Directorio handlers * Directorio errors Extrae estos archivos y agrégalos al directorio de funciones de tu proyecto. Puedes usar cualquier IDE de tu elección para trabajar con los archivos de la aplicación. Nota: Por favor, revisa el código en esta sección para asegurarte de que lo comprendes completamente. ### Instalar los frameworks Express y Multer para Node.js La función de Node.js requiere que se instalen dos frameworks para esta aplicación. Debes instalar estos frameworks para importar sus paquetes en tu código. #### express Este framework se utiliza para habilitar la comunicación entre el client y el servidor a través de solicitudes HTTP. Para instalar Express.js, navega al directorio de la función de Node (functions/zia_services_function) en tu terminal y ejecuta el siguiente comando: npm install express Esto instalará el módulo Express y guardará las dependencias. #### multer Multer es un middleware utilizado para manejar operaciones de carga de archivos desde el lado del client. Para instalar multer.js, navega al directorio de la función de Node (functions/zia_services_function) en tu terminal y ejecuta el siguiente comando: npm i multer Esto instalará el módulo Multer y guardará las dependencias. Esta información también se actualizará en el archivo package.json. El directorio de funciones está ahora configurado. Ahora podemos proceder a configurar el directorio del client. -------------------------------------------------------------------------------- title: "Configurar el client" description: "Crea una aplicación web React que detecta y extrae datos de documentos de entrada, y los procesa utilizando OCR, Barcode Scanner e Identity Scanner de Zia Services." last_updated: "2026-10-08T06:48:03.635Z" source: "https://docs.catalyst.zoho.com/es/tutorials/document-processor/nodejs/configure-client/" service: "All Services" related: - Client Directory Structure (/es/cli/v1/project-directory-structure/client-directory) - Install Tailwind CSS (https://tailwindcss.com/docs/guides/create-react-app) -------------------------------------------------------------------------------- # Configurar el Client A continuación, configuremos el componente client. El directorio del client (/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 y package-lock.json Puedes obtener el directorio completo del client con el código configurado desde este repositorio de git 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: npm i react-hot-toast react-router-dom axios classnames Esto instalará los módulos y guardará todas sus dependencias. La siguiente información también se actualizará en el archivo package.json. #### Instalar Tailwind CSS Hemos utilizado el framework Tailwind 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: npm install -D tailwindcss@3 2. Para inicializar el archivo tailwind.config.js en tu proyecto: npx tailwindcss init 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. /** @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() en el paquete SDK de Node.js de Catalyst Zia Services 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() en el SDK de Node.js de Catalyst Zia Services para realizar esta operación. Para obtener más información sobre los formatos de códigos de barras compatibles, consulta esta página. * **/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() 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, 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/ 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. -------------------------------------------------------------------------------- title: "Probar la aplicación" description: "Crea una aplicación web React que detecta y extrae datos de documentos de entrada, y los procesa utilizando OCR, Barcode Scanner e Identity Scanner de Zia Services." last_updated: "2026-10-08T06:48:03.636Z" source: "https://docs.catalyst.zoho.com/es/tutorials/document-processor/nodejs/test-the-application/" service: "All Services" related: - Serve CLI Resources (/es/cli/v1/serve-resources/introduction) -------------------------------------------------------------------------------- # Probar la aplicación Antes de desplegar la aplicación en la consola remota, puedes probar la aplicación en un servidor local y verificar si todo funciona usando la CLI de Catalyst. Para información detallada sobre catalyst serve, consulta la página de ayuda de Serve Resources. Para servir el proyecto de Catalyst localmente, ejecuta el siguiente comando desde tu directorio del proyecto: catalyst serve Esto primero compilará la aplicación React y luego la servirá. Para saber más sobre cómo servir aplicaciones React, consulta esta página. La aplicación Document Processor ahora se servirá en el puerto predeterminado 3000. Las URLs de los endpoints locales de los componentes se mostrarán en la CLI. Nota: Cada vez que accedas a la página principal o cualquiera de las subpáginas de tu client, o la función, la CLI mostrará un registro en vivo de la URL accedida, junto con el método de solicitud HTTP. Ahora puedes abrir la aplicación en un navegador usando la URL local del client que se muestra en la CLI y probarla. Para probar cada una de estas funcionalidades, haz clic en la característica requerida y carga un archivo de imagen o un archivo de documento desde tu sistema local, luego haz clic en **Process Image**. Para probar la funcionalidad de Aadhaar, debes cargar dos imágenes del frente y el reverso de la tarjeta Aadhaar. El texto extraído en el caso de OCR, Aadhaar, Pan, Passbook y Cheque se mostrará en el panel de salida en formato JSON. En el caso de Barcode Scanner, se mostrará la información decodificada del código de barras. También ten en cuenta que Pan y Aadhaar son documentos de identidad específicos de la región de India. Para OCR, la salida también contendrá una puntuación de confianza como valor porcentual que representa la precisión de la extracción y procesamiento de información. Nota: Los formatos compatibles para las imágenes de entrada están configurados como .jpeg, .webp y .png, y el tamaño máximo de archivo permitido es 10MB. * **Cheque** <br /> * **PAN** <br /> * **Passbook** <br /> * **Aadhaar** <br /> * **Barcode Scanner** <br /> * **OCR** <br /> Si esta configuración funciona correctamente, podemos desplegar la aplicación a producción. Puedes finalizar la sesión de serve en tu terminal ejecutando el comando para terminar un proceso en ejecución, según tu sistema operativo. -------------------------------------------------------------------------------- title: "Desplegar el proyecto" description: "Crea una aplicación web React que detecta y extrae datos de documentos de entrada, y los procesa utilizando OCR, Barcode Scanner e Identity Scanner de Zia Services." last_updated: "2026-10-08T06:48:03.636Z" source: "https://docs.catalyst.zoho.com/es/tutorials/document-processor/nodejs/deploy-to-console/" service: "All Services" related: - Deploy Catalyst Project (/es/cli/v1/deploy-resources/introduction/) - Web Client Hosting (/es/cloud-scale/help/web-client-hosting/introduction/) -------------------------------------------------------------------------------- # Desplegar en la consola Para desplegar tu proyecto de Catalyst desde la CLI, ejecuta el siguiente comando en tu terminal desde tu directorio del proyecto: catalyst deploy La función se despliega primero, seguida del componente client. Se mostrarán las URLs de la aplicación de los componentes. Ahora puedes abrir la URL del componente client en un navegador para acceder a la aplicación desplegada. La aplicación Document Processor ahora se puede acceder desde su URL de la aplicación web.