Acceso a la web: https://joserra20.github.io/p4web/
Para esta práctica he elegido crear un sitio web en el que se pueda consultar los precios del combustible de cada una de las 11600 gasolineras que hay en España. El diseño de la herramienta es bastante sencillo, aunque también he buscado probar varios elementos que me proporciona el framework CSS Bootstrap y JavaScript.
Otra herramienta que he empleado en la práctica es DataTables (https://datatables.net/). Se trata de un plugin para jQuery que abre un mundo de posibilidades a la hora de crear y gestionar tablas. Permite añadir con facilidad paginación, una barra de búsqueda y ordenado por columnas (muy útil para ordenar por precio).
Dado que descargar el JSON completo con todas las gasolineras era demasiado grande (alrededor de 8 MBytes), decidí que lo mejor era realizar un primer filtrado de los datos por provincia, además la API lo permitía.
Como vamos a realizar una petición filtrando por provincia, primero se realiza una petición para obtener un JSON con todas las provincias y su código asociado que será utilizado para realizar la llamada a la API de los precios.
Sobre las DataTables, cabe destacar que se ha configurado para que sea responsive y también se han modificado los mensajes por defecto por mensajes en español y personalizados para aplicación como por ejemplo, cuando no se encuentra ningún resultado que se muestra el siguiente mensaje:
Si se hace click en alguna fila de la tabla, se lanza una ventana Modal (https://getbootstrap.com/docs/5.1/components/modal/) de Bootstrap que contiene información ampliada sobre la gasolinera seleccionada.
De forma alternativa a visualizar la búsqueda en la tabla, también se muestran todos los resultados en forma de grid con su logotipo (generado por API) y con un logo por defecto en caso de no encontrarse ningún logotipo.