Lanzamiento de la primera versión estable v1.0.0

Tras mucho esfuerzo, es un placer para nosotros poder anunciar el lanzamiento de la versión estable v1.0.0.

La podéis descargar y probarla en el siguiente enlace: (click). en la parte de assets.

Esta versión trae como cambio más significativo la implementación del sistema de usuarios, pero eso no es todo. A continunación, os presentamos todos los cambios desde la última release.

Lista de cambios (Changelog)

  • Nuevo login y registro.
  • Nueva página informativa con enlaces al proyecto y contacto.
  • Estética renovada con material design.
  • Librerías actualizadas a la última versión.
  • Nuevos botones para controlar y gesto para rotar el mapa.
  • Guardado de preferencias de inicio de sesión para login automático.
  • Impedir envío de reporte sin ubicación.

Capturas

Plan de desarrollo futuro

Y tras la publicación de esta versión, ¿es esto todo? Por supuesto que no, todavía tenemos muchas ideas por plasmar, entre ellas, la más importante: incluir listas que recojan puntos de interés donde los usuarios puedan contribuir y escribir reseñas. Por ejemplo: lugares para hacer picnic, sitios adecuados para mascotas…

Todos estas ideas se pueden consultar en nuestro Project de GitHub llamado “Plan de Desarrollo”, el cual a día de hoy, se encuentra así.

Se puede consultar en el siguiente enlace (click).

Como véis, todavía nos quedan muchas cosas por hacer…

¡Seguiremos manos a la obra con el proyecto!

Sistema de Usuarios

Como fuimos comentando, estábamos trabajando en introducir un sistema de usuarios que permitiese relacionar los reportes con los usuarios, de tal forma que se tenga un mayor control sobre los reportes hechos. Finalmente, lo hemos hecho realidad.

Implementación

Para ello hemos implementado unas funciones php que comprueban o introducen los datos del usuario así como su contraseña cifrada.

Esto lo hacemos de tal forma que la propia aplicación cifra la contraseña con un algoritmo de reducción criptográfico, para comprobar si el login es valido buscamos al usuario que tenga ese mail y o nombre de usuario y dicha contraseña cifrada, el id de usuario devuelto será el registrado.

Hemos añadido 2 vistas, una para el login y otra para el registro, ambas envían la información de id de usuario a la vista principal del mapa para poder tener identificados los reportes con dicho usuario registrado.

Igualmente, se han añadido procedimientos para controlar que los datos introducidos sean válidos, por ejemplo, que ambas contraseñas coincidan y que un email siga un patrón válido.

En las siguientes capturas podemos ver el resultado de estas nuevas pantallas de inicio de sesión y registro:

Seleccionar ubicación manualmente

Actualmente, si queremos enviar un reporte de una incidencia, debemos encontrarnos en la ubicación en persona. Esto puede originar inconsistencias en algunas situaciones, por ejemplo: imagínense que yendo en coche hemos visto que un semáforo ha dejado de funcionar y queremos subirlo a CityReport. Tendríamos que pararnos y hacer una foto y rellenar el reporte en el mismo sitio, lo cual no es muy conveniente, o podríamos enviar el reporte una vez lleguemos a nuesto destino, pero la ubicación no se correspondería a la del lugar del incidente.

A raíz de esta problemática, hemos desarrollado una nueva forma de indicar la ubicación de un reporte: de forma manual.

Hemos añadido un interruptor debajo del mapa que se muestra en la aplicación y permite indicar la ubicación de forma manual tocando el mapa. Aparecerá activado por defecto si no se ha concedido permiso para acceder a la ubicación

Captura de la app seleccionando la ubicación manualmente

Al desactivar el interruptor, se intentará obtener la ubicación del usuario via GPS. Además, hemos añadido control de excepciones que impiden enviar un reporte sin ubicación, y muestran un mensaje informativo al usuario.

Color de los reportes en la web según su estado

Hemos implementado una funcionalidad que fue sugerida en este issue en GitHub. Se trata de hacer que los marcadores del mapa y la ventana que contiene la información del reporte sean del color del estado del reporte que representan, es decir: rojo si está pendiente de revisar, naranja si ya ha sido revisado y verde si ha sido solucionado.

En un principio, la implementación fue trivial, ya que la información del estado del reporte la obteníamos directamente en mapa.php al consultar a la base de datos.

Dificultades

Sin embargo, la cosa se complicó al ser más ambiciosos al querer hacer que el marcador del reporte seleccionado cambiara de color de la misma forma (a azul). Esto facilita la visualización de la ubicación de la incidencia en el mapa, en especial al navegar desde la página de la lista de reportes, que aunque se centra la vista en la localización cercana al reporte, si hay más reportes en esa ubicación, se dificulta distinguir a cuál corresponde el seleccionado.

Implementación

Para hacer posible esta implementación, la página reportes.php debe conocer cuál es el marcador que genera ese reporte y el problema es que solo el script de mapa.php conoce las variables correspondientes.

Para solucionarlo, tras darle muchas vueltas, se nos ocurrió asociar el ID numérico del reporte al marcador como una propiedad extra, de forma que ya se puede cambiar el color del marcador activo al enviar la información del ID del reporte al navegar entra la página de la lista de reportes y el mapa.

Resultado

A continuación se muestra unas capturas del resultado, que pueden consultar en la página de mapa.

Color de los marcadores según el estado de su reporte
Resolución del issue en GitHub

Agilizar la carga de imágenes con miniaturas

Desde la creación de la página web, nos estamos encontrando con un problema muy evidente. Este es la tardanza al cargar la lista de reportes, donde aparecen las distintias incidencias acompañadas de una imagen descriptiva de la misma. El problema es que esta imagen se carga a resolución completa y retrasa la carga de la página web, perjudicando la experiencia del usuario.

Para solucionar esto, hemos creado una imagen en miniatura o thumbnail de 300px de ancho por cada imagen que se sube al servidor. Esta miniatura tiene tamaño de archivo muy inferior al original como podemos ver en la siguiente captura del directorio de archivos subidos del servidor:

Comparativa tamaños de archivo de imágenes originales con miniaturas (-min)

Implementación

Para la implementación, hemos decidido que se encargue el servidor a través de un script en PHP, para no sobrecargar más la aplicación móvil.

Tras informarnos, vimos que PHP cuenta con una serie de funciones para el procesado de imágenes, llamadas PHP-GD. Hemos hecho uso de una implementación compartida por el usuario @pquina en GitHub y la hemos adaptado simplificándola para que funcione en nuestra aplicación web, creando el archivo miniatura.php.

El funcionamiento es el siguiente: al subir una foto, la aplicación web guarda la imagen original y genera una miniatura de la misma de 300px de ancho. Ambas rutas de las imágenes se guardan en la base de datos para poder ser accedidas a la hora de listar reportes (miniatura) o ver un reporte detallado en la sección de mapa (original).

¡Volvemos con mejoras en seguridad!

Tras el parón por los exámenes universitarios de Febrero, nos hemos vuelto a poner manos a la obra con el proyecto.

Por el momento, hemos reconfigurado el servidor web para usar un certificado SSL generado con Let’s Encrypt para cifrar la conexión del cliente con el servidor y permitir el envío/recepción de datos de forma segura. Ya no encontramos advertencias en los exploradores, como podemos ver en la siguiente captura:

Certificado SSL en la página web

Por otro lado, hemos reescrito las funciones PHP para evitar ataques de inyección SQL, aunque igualmente, el usuario que accede a la base de datos no tiene permisos que compromentan la seguridad del sistema y hemos creado un archivo de configuración para la apliación web: config.php con la siguiente estructura:

//CONFIGURACION DE LA BASE DE DATOS
$hostname="example.com";      //Dirección del servidor
$database="BD";               //Nombre de la base de datos
$username="user";             //Nombre de usuario de la BD
$password="pass";            //Contraseña 

Lanzamiento de la Aplicación web

¡Hemos lanzamos la aplicación web, podéis verla en cityreport.ga !

La aplicación web se compone de una parte oculta de cara al usuario, que involucra toda la configuración del VPS Ubuntu el cual lanza un servidor web Apache, así como la base de datos y los scripts en PHP que permiten subir contenido de la aplicación al servidor y hacer consultas a la base de datos desde la web.

Antes de esta versión minimalista y simple de la web, estuvimos bicheando hacerla con HTML y CSS desde cero, hasta que llegamos a un punto en el que vimos que no avanzábamos mucho y el diseño quedaba muy anticuado, comparado con las páginas web actuales que son adaptativas para todos los dispositivos móviles.

Es por eso que buscamos una plantilla de bootstrap 4 con licencia libre la cual pudiésemos modificar y adaptar a nuestras necesidades.

Además, hemos obtenido un dominio gratuito para poder visitar la página cómodamente: cityreport.ga

La web consta esta de las siguentes partes:

Mapa

En la parte del mapa podremos ver las localizaciones de todos los reportes realizados por los usuarios en un mapa interactivo, el cual ha sido realizado con la librería de javascript Leaflet que nos permite implementar y controlar el mapa colaborativo de código abierto OpenStreetMap , así como poder ver el contenido cada reporte haciendo click en su marcador.

Reportes

Un apartado reportes donde podremos ver un lista de todos los reportes realizados, así como ordenarlos según los campos: estado, id, descripción o fecha.

Posteriormente tenemos planeado categorizar los reportes según la naturaleza de ellos y añadiremos opciones de filtrado en esta sección.

Al tocar sobre uno de los reportes nos abrirá su localización y descripción detallada en el mapa.

Inicio

En esta sección podremos ver gráficamente estadísticas de los reportes realizados: cuántos están pendientes, revisados o finalizados, así como la progresión de reportes a lo largo del año en un gráfico acumulativo.

Para implementar esta sección hacemos uso de la librería de javascript de código abierto chart.js

Acerca de

Esta sección es meramente informativa, donde brindamos información sobre el proyecto así como información de contacto.

Aspectos a tener en cuenta

Todas las secciones que muestran información así como gráficas de los reportes se generan en tiempo real con el contenido de la base de datos rellena con los reportes de colaboración ciudadana.

Desde que publicamos la aplicación, hemos recibido reportes de distintos lugares de Huelva capital así como de diferentes municipios de la provincia, gracias a multitud de personas que han conocido este proyecto y han colaborado testeando la aplicación y web.

A su vez hemos recibido ayuda de testeo de personas otras regiones de España que se han visto interesadas por el proyecto

El proyecto empieza a tomar forma y a suscitar interés en múltiples personas, lo que nos anima a seguir desarrollándolo.

Próximamente empezaremos a implementar un sistema de usuarios y lanzaremos una versión más actualizada de la aplicación que corrige los fallos encontrados.

¡Seguidnos en este blog para estar al tanto de todas las actualizaciones!