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.

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:

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:

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

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.