Desarrollar una app de almacén con código de barras: cámara, OCR e impresora Zebra

En un almacén entran y salen muchísimos bultos a lo largo del día. Cuando estos movimientos se apuntan primero en papel y luego se introducen en el sistema, se pierde tiempo y los errores son inevitables. La app de almacén que desarrollé para nuestro cliente TCT Lojistik lleva este proceso al móvil: los bultos se escanean con la cámara, el registro entra al instante en el sistema de la empresa y las etiquetas se imprimen en las impresoras Zebra de la red. Soy Berke Özyaşar, y en este artículo comparto las decisiones técnicas que tomé y las lecciones prácticas que aprendí al desarrollar una app así.

¿Qué hace la app?

• Flujos de entrada de carga al almacén y de salida de carga del almacén
• Lectura de códigos de barras con la cámara del móvil y, cuando hace falta, lectura con OCR del texto de la etiqueta
• Selección de la matrícula del vehículo, listas de bultos y vista general de las cargas que van a salir
• Consulta de cargas
• Creación de etiquetas de código de barras, vista previa e impresión en impresora Zebra
• Detección de impresoras en la red local y ajustes de impresora
• Inicio de sesión de usuarios con JWT

La app está escrita con React Native 0.81 y se conecta a la infraestructura ASP.NET Core y SQL Server que ya tenía la empresa.

¿Terminal portátil o móvil?

Cuando se habla de software de almacén, lo primero que viene a la mente son los terminales portátiles industriales con escáner láser integrado. En almacenes con escaneo intenso, estos dispositivos siguen siendo la opción más rápida y resistente. Pero son caros, y comprar uno para cada empleado no tiene sentido para todos los negocios. Las cámaras de los móviles actuales, en cambio, leen muy bien los códigos de barras estándar y los códigos QR.

Lo bueno es que la mayoría de los terminales portátiles modernos ya funcionan con Android. Una app escrita con React Native puede funcionar tanto en el móvil como en el terminal portátil. El escáner integrado del terminal suele enviar el código leído a la app como entrada de teclado o como emisión del sistema (broadcast); es posible añadir esa entrada junto a la lectura con cámara. Es decir, la elección del dispositivo no obliga a reescribir la app.

Lectura de códigos de barras con la cámara

Para la cámara usé react-native-vision-camera. La app lee formatos habituales en los almacenes como Code 128, Code 39, Code 93, EAN-13 y EAN-8. En un lector de este tipo destacan estos puntos:

• Limita los formatos que se escanean. Activar solo los formatos que se usan en el almacén aumenta la velocidad y reduce las lecturas erróneas.
• No cuentes el mismo código dos veces. La cámara procesa muchos fotogramas por segundo y el mismo código de barras puede leerse muchas veces seguidas. Hay que ignorar el mismo código cuando vuelve a llegar en poco tiempo.
• Da una respuesta clara. Cuando la lectura tiene éxito, debe haber una señal evidente; quien trabaja en el almacén no mira la pantalla con atención.
• Prueba con etiquetas reales. Una prueba en la oficina con una impresión limpia no muestra cómo se comportan las etiquetas arrugadas, cubiertas de film o que brillan con la luz del almacén.

Cuando el código de barras no se puede leer: OCR

No todas las etiquetas están en condiciones de leerse. Por eso la app tiene un segundo modo de escaneo: en el modo OCR también se lee el texto de la imagen de la cámara, de modo que el código de barras y el texto de la etiqueta pueden reconocerse juntos y compararse. Cuando el código de barras está dañado pero el número se puede leer, el empleado no tiene que escribirlo a mano. Para el OCR usé un plugin de reconocimiento de texto que funciona con vision-camera; como los fotogramas se procesan del lado de la cámara, la interfaz no se congela.

Impresión de etiquetas: ZPL y Zebra

Las impresoras Zebra usan un lenguaje de comandos llamado ZPL. Las etiquetas sencillas pueden diseñarse directamente con comandos ZPL; pero cuando la etiqueta lleva un logo, tipografías especiales o una composición compleja, se vuelve engorroso. En este proyecto seguí otro camino:

• La etiqueta se diseña en la app como un componente normal de React Native y se previsualiza en pantalla.
• Ese componente se convierte en una imagen.
• La imagen se escala según la resolución de la impresora (203 dpi, etiqueta de 4x6 pulgadas), se gira si hace falta y se convierte en un mapa de bits en blanco y negro.
• El mapa de bits se comprime, se inserta en el comando gráfico de ZPL (^GFA) y se envía a la impresora.

La ventaja de este enfoque es que obtienes en papel lo que ves en pantalla; no hace falta saber ZPL para cambiar el diseño de la etiqueta. Hay que tener cuidado de que las líneas finas y las barras del código no se deformen al pasar a blanco y negro. Aquí son decisivos el método de escalado y el valor de umbral. Que el usuario pueda ajustar la escala y la posición de impresión también resulta útil con distintos rollos de etiquetas.

Encontrar la impresora en la red

Las impresoras Zebra suelen aceptar datos en bruto por red a través del puerto 9100. La app abre una conexión TCP directa con la impresora mediante react-native-tcp-socket y le envía los datos ZPL. En lugar de esperar que el usuario conozca la dirección IP de la impresora, la app escanea la red local y muestra los dispositivos que tienen ese puerto abierto. Hacer el escaneo en paralelo pero con un número limitado de conexiones, y después reintentar con un tiempo de espera más largo las direcciones que no respondieron, dio un resultado rápido y fiable a la vez.

Conectar con el sistema existente

TCT ya tenía una infraestructura de servidor en funcionamiento. Construí la app sobre ella, no en su lugar: la app móvil habla con la API de ASP.NET Core existente y los datos se quedan en SQL Server. La autenticación se hace con JWT; el token se guarda en el dispositivo y se envía en cada petición. Mi recomendación en este tipo de proyectos es siempre la misma: la app móvil no debe conectarse directamente a la base de datos; entre ambas debe haber una API que gestione los permisos y ofrezca solo las operaciones necesarias.

Diseñar para el usuario del almacén

El usuario de una app de almacén no está sentado en una mesa. Tiene un bulto en las manos, quizá lleva guantes y el entorno es ruidoso. Por eso hay que pensar las pantallas con botones grandes, pocos pasos y el principio de una sola tarea principal por pantalla. Las operaciones más frecuentes, como la entrada y la salida, deben poder iniciarse directamente desde la pantalla principal; las capas de menú deben reducirse al mínimo.

De un terreno parecido: Scano QR

El escaneo con la cámara y la extracción de texto de imágenes también son el tema de mi propia app Scano QR, publicada en Google Play. Esta app escanea códigos QR, crea códigos QR con siete plantillas distintas y extrae texto de imágenes. Cuestiones como la lectura en distintas condiciones de luz y la respuesta instantánea al usuario son igual de importantes en una app de consumo que en una app de almacén.

Conclusión

Una app de almacén con código de barras no exige comprar hardware caro ni cambiar el sistema existente. Con la cámara del móvil, un flujo de escaneo bien ajustado, etiquetas diseñadas en pantalla y convertidas a ZPL, y una API conectada al servidor existente, los registros del almacén pueden actualizarse al instante. Si estás pensando en una solución similar para tu almacén, puedes echar un vistazo a la página de apps de almacén con código de barras y terminales portátiles.