¡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!

Adjuntar contenido al reporte y subirlo al servidor

Para reportar una incidencia será necesario aportar la ubicación de la misma, una descripción del problema, así como añadir contenido visual descriptivo.

Para ello, hemos implementado en la aplicación móvil un botón que permitirá seleccionar una imagen de la galería, o bien, hacer una foto en ese mismo momento. (Se implementará compatibilidad con vídeos en un futuro).

En las siguientes imágenes veremos el proceso de escribir y enviar un reporte:

Para que sea posible enviar reportes a nuestro servidor, hemos tenido que implementar unos scripts en PHP que permiten recibir el contenido de la aplicación e insertan una nueva tupla en la base de datos.

Las tuplas de la tabla reportes se caracterizan por un ID único autogenerado, la descripción del reporte, ruta de la foto almacenada en el servidor, coordenadas de la ubicación, fecha y el estado (pendiente, revisado o completado).

Por último, mencionar que también se ha implementado la posibilidad de subir un reporte sin adjuntar imagen, de forma que se suba a la base de datos con una imagen por defecto.

Forja del proyecto usando GitHub

Para la forja del proyecto haremos uso del conocidísimo Github que usa el sistema de control de versiones Git.

Para ello hemos creado una organización en GitHub llamada CityReportCUSL. Esto nos permite vincular varios repositorios a la misma, de forma que hemos creado el repositorio CityReportAPP y el repositorio CityReportWeb, que se usarán para el desarrollo de la aplicación móvil y web, respectivamente.

Perfil de la organización CityReport en GitHub

Projects

Otra función muy interesante que nos ofrece GitHub son los “projects”, esto es, una especia de pizarra en la que podemos añadir notas con los objetivos del proyecto y las pequeñas tareas en las que se divide cada uno, de forma que a medida que se van completando, las iremos moviendo de To do (por hacer) a En Progreso y finalmente en Completado, como podemos ver en las siguientes imagenes.

Hemos creado un project llamado Plan de desarrollo que contendrá las tareas y objetivos de la aplicación móvil así como la web.

Plan de desarrollo de la App a día 31/12/2019
Plan de desarrollo de la Web a día 31/12/2019

Issues

Por otro lado, haremos uso de los “issues” de GitHub, esto es una herramienta de GitHub que permite abrir casos para las incidencias del la aplicación. Lo usaremos para reportar los problemas y errores que se han encontrado en el funcionamiento de las aplicaciones, para poder tenerlos localizados y al implementar la solución, dar el caso por cerrado. Se encuentra en la pestaña “issues” de cada repositorio.

Primer issue abierto en la aplicación móvil

Branches

También estamos estudiando la posibilidad de mantener dos ramas de desarrollo de cada repositorio (branches), una llamada dev donde se publicará el código provisional y otra master con el código funcional de cada versión.

Ramas de desarrollo de la Aplicación móvil

Releases

Por último, haremos uso de la pestaña releases de cada repositorio para subir las versiones funcionales de la aplicación a medida que se van desarrollando, de tal forma que cualquiera la pueda descargar y probarla.

Esto es todo por ahora. Como hemos visto, gracias a GitHub podremos llevar una buena gestión del proyecto. En futuras publicaciones os seguiremos comentando el desarrollo del proyecto.

¡Por último os deaseamos felices fiestas y próspero año 2020, de parte de Ángel y Víctor! 😀

Plan de desarrollo

A continuación os comentamos los objetivos del proyecto así como las tecnologías que usaremos para llevarlo a cabo.

Objetivos

  • Desarrollar una aplicación móvil para enviar los reportes: una imagen/vídeo geolocalizado acompañado de un texto descriptivo de la incidencia.
  • Levantar un servidor para hospedar la aplicación web así como la base de datos.
  • Desarrollar una aplicación web para la gestión de las incidencias y recolección de estadísticas.
  • Implementar un Sistema de Gestión de Bases de datos que permita almacenar la información de los reportes.
  • Crear un sistema de usuarios para controlar el seguimiento de la actividad.

Tecnologías para la implementación

Aplicación móvil

  • Entorno de desarrollo Android Studio.
  • Lenguaje de programación Java.
  • OSMDroid para implementar un mapa para localizar la incidencia.

Servidor

  • Servidor virtual privado (VPS) Amazon AWS EC2.
  • Sistema operativo Ubuntu Server 18.04.
  • Servidor web Apache.
  • Base de datos MariaDB gestionado con PHPMyAdmin.
  • PHP7 para las funciones que manipulan la base de datos e interactúan con el servidor.

Aplicación web

  • Editor de texto Visual Studio Code.
  • Tecnologías a utilizar: HTML5, CSS, JavaScript, AJAX.
  • LeafletJS: librería de JavaScript para la implementación de un mapa.
  • OpenStreetMap: mapa colaborativo de software libre.
  • ChartJS: librería de JavaScript para mostrar gráficos con estadísticas.

Presentación

CityReport nace de la idea de dos jóvenes estudiantes de Ingeniería Informática de la Universidad de Huelva: Víctor y Ángel, en una de nuestras rutinarias rutas de bici. (Véase foto).

¿Pero qué es exactamente CityReport?

Dada la evidente falta de comunicación entre los ciudadanos y la administración pública a la hora de notificar incidencias de diverso tipo en la ciudad (acerado o señales en mal estado, falta de papeleras, rutas cortadas, y un largo etcétera) surge la necesidad de una herramienta que pueda facilitar esta interacción: CityReport.

Nuestro objetivo es implementar una aplicación móvil Android desde la que se puedan enviar los reportes ciudadanos y una aplicación web que los recoja y permita a la administración gestionarlos.

Víctor y Ángel, estudiantes de Ingeniería Informática de la Universidad de Huelva
Ángel (izqda) Víctor (dcha) en las marismas de Punta Umbría

Acompáñanos en el desarrollo del proyecto a través del seguimiento de este blog, así como el repositorio GitHub que subiremos pronto.