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.