Desarrollamos rastreador de guías de paqueterías para página web de un cliente de logística. Este cliente buscaba la mejor solución porque quería tener su propio sistema de rastreo de guías personalizado, facilitando así la búsqueda y el rastreo de paquetes para sus clientes. Aquí te explicamos el proceso de desarrollo del sistema de rastreo de guías y te mostramos el resultado final de la interfaz. Para una explicación más detallada, puedes ver aquí la parte 1 y parte 2 de nuestro video.
El proyecto comenzó en un entorno local, donde estructuramos la base del sistema. Esta base se concretó en la creación de una clase de rastreo, que funcionaría como el corazón de nuestro diseño.
Interfaz del rastreador y elementos HTML
Nuestra interfaz es sencilla y eficiente. Al lado izquierdo se encuentra un área de texto que permite introducir hasta 25 guías, cada una separada por una coma. Una vez ingresadas, un botón permite rastrearlas para luego mostrar los resultados en el apartado correspondiente. Esta es la esencia de nuestra estructura HTML.
Estética y funcionalidad: el papel del CSS
La belleza está en los detalles, y eso lo hemos logrado con la aplicación del CSS. Hemos añadido elementos para que la experiencia visual sea agradable y clara. A la izquierda, nuestra sección de rastreo de guías; a la derecha, los resultados de ese rastreo, todo ello presentado de forma ordenada y coherente.
Demostración de rastreo de guía en página web
Para comenzar, ingresamos una guía de prueba y ejecutamos el rastreo. En este punto, el sistema nos mostrará el número de la guía junto con los movimientos realizados. Tomando un ejemplo, supongamos que el 8 de octubre de 2021 se realizó un movimiento. En tal escenario, el sistema mostrará que ha llegado al origen, que en este caso específico, sería Chihuahua Industries.
Uso de API y servidor de pruebas
Para lograr este objetivo, inicialmente recurrimos al uso de una API. Al mismo tiempo utilizamos JSON Server, que es un servidor de pruebas que permite subir y manipular archivos JSON. Específicamente, este servidor nos proporciona una URL para acceder a los datos necesarios. Posteriormente, procedemos a consumir estos datos y, finalmente, los presentamos en nuestro sistema de manera efectiva.
Mejora visual y funcional
Nuestro cliente expresó su deseo de un sistema visualmente atractivo. Atendiendo a esta solicitud, nos pusimos manos a la obra y logramos un diseño más amigable y estéticamente agradable. Con este nuevo diseño, cada estado del rastreo ahora tiene una imagen asociada, por lo que hace que la experiencia sea más intuitiva y visualmente satisfactoria.
Para finalizar, esperamos que esta explicación te haya resultado de gran utilidad. Siéntete libre de dejarnos tu comentario o, si lo prefieres, puedes explorar un poco más sobre nuestros diversos servicios de construcción y desarrollo de páginas web.