delineas / help-maps-party

Aplicación web para posicionar recursos en un mapa.

help-maps-party

Aplicación web para posicionar recursos en un mapa.

Demo: https://help-maps-party.firebaseapp.com/

Útil para aquellas comunidades locales que necesiten saber donde se encuentran las posibilidades más cercanas: personas que necesitan ayuda, personas que ofrecen ayuda, wifis abiertas, comercios cercanos abiertos, etc

Puede emplearse de dos formas:

1. Si eres desarrollador web puedes descargarla y emplearla en tu comunidad.
2. Si tienes una comunidad y crees que puede ayudarte, contacta conmigo (twitter: @delineas)

Para el primer perfil en el repositorio de código puedes encontrar la información de instalación.

Para el segundo, comentar que el despliegue en internet de la aplicación tiene coste cero aprovechando recursos disponibles en la nube.

La versión de demostración muestra parques de Madrid, pero es solo eso, una versión de demostración. Cada comunidad tendría su propia instalación independiente.

La aplicación no trata de sustituir la potencia de servicios como Google Maps u otras aplicaciones de empresas e instituciones, lo que pretende es estar disponible para grupos pequeños que necesiten una herramienta así para organizarse.

Características

• Navegación por los recursos a través del mapa y del listado
• Posicionamiento del usuario en del mapa
• Búsqueda por nombre de lugares y calles usando el servicio de openstreetmaps
• Añadir recursos a través de la interfaz del propio mapa
• Almacenamiento en la nube de Firebase (gratuita hasta un límite de peticiones)
• Puede instalarse como aplicación de escritorio en móvil

Stack tecnológico

• Vue
• Vue Cli
• Vuex
• Leaflet
• Buefy / Bulma
• Vuefire / Firebase

Requisitos de instalación

La aplicación se divide en dos partes diferenciadas.

1. El frontal o frontend es la que ve el usuario cuando accede a la web.
2. El servidor o backend es donde se almacenan los datos que aparecen en el mapa

La parte del frontal está descrita más abajo en Instalación del proyecto.

Para la parte del servidor es necesario crear una cuenta gratuita de Firebase.

Puedes seguir la guía que describen aquí, con algunos matices: https://firebase.google.com/docs/web/setup?hl=es

Paso 1: Crea un proyecto de Firebase

Crear la cuenta en Firebase (necesitas una cuenta de Google)

La cuenta gratuita tiene algunas limitaciones que espero no sea necesario que amplies. Revísalo aquí: https://firebase.google.com/pricing

Paso 2: Registra tu app

Sigue los pasos descritos.

El paso de "Firebase Hosting" es opcional.

Paso 3: Agrega los SDK de Firebase y, luego, inicializa Firebase

Este paso ya está hecho en el código del proyecto.

Si es muy importante la referencia que aparece bajo el título: "Objeto de configuración de Firebase"

Si no sabes como conseguirlo visita esta página: http://support.google.com/firebase/answer/7015592?hl=es

Y sigue los pasos bajo el título "Cómo obtener un fragmento de configuración de tu app web"

Paso 4: Crea una base de datos en Cloud Firestore

En este momento necesitas seguir los pasos descritos en este enlace: https://firebase.google.com/docs/firestore/quickstart?hl=es

Solo los descritos en el título "Crea una base de datos Cloud Firestore"

Crea una colección con un nombre que luego usarás más adelante.

Parametrización

Los parámetros que has conseguido de Firebase hay que trasladarlos a la aplicación.

Para eso tienes que crear una copia del fichero .env.example y llamarlo .env.

cp .env.example .env

A continuación edita ese fichero y coloca los datos necesarios que has copiado desde Firebase.

Por ejemplo si tienes algo así:

var firebaseConfig = {
  apiKey: "api-key",
  authDomain: "project-id.firebaseapp.com",
  databaseURL: "https://project-id.firebaseio.com",
  projectId: "project-id",
  storageBucket: "project-id.appspot.com",
  messagingSenderId: "sender-id",
  appID: "app-id",
};

El fichero .env quedaría así:

VUE_APP_API_KEY=api-key
VUE_APP_AUTH_DOMAIN=project-id.firebaseapp.com
VUE_APP_DATABASE_URL=https://project-id.firebaseio.com
VUE_APP_PROJECT_ID=project-id
VUE_APP_STORAGE_BUCKET=project-id.appspot.com
VUE_APP_MESSAGING_SENDER_ID=sender-id
VUE_APP_APP_ID=app-id
VUE_APP_MEASUREMENT_ID=

Esto es indispensable para que funcione correctamente.

Configuraciones de la aplicación

En el fichero /src/settings.js hay algunas configuraciones.

• center: Son las coordenadas geográficas donde quieres que se situe el mapa de inicio.
• collectionName: Es el nombre de la colección que has creado en Firestore para usarla de almacenamiento.

Despleigue del frontend en la nube

Las instrucciones para desplegar el sitio en la nube puedes seguirlas en la página de Vue Cli. https://cli.vuejs.org/guide/deployment.html

Despliegue en firebase

Es la opción más sencilla de todas, proque ya tenemos la configuración hecha.

Seguiremos los pasos descritos en https://cli.vuejs.org/guide/deployment.html#firebase

1. Instalar `npm install -g firebase-tools``
2. Ejecutar `firebase init``
3. Te pedirá hacer login en la consola de Firebase
4. La consola te preguntará qué quieres hacer, elige "hosting"
5. Selecciona el proyecto en el que quieres hacer el despliegue. Si has completado los pasos anteriores lo tendrás ya creado, así que seleccionalo.
6. La carpeta public de tu app es dist(por defecto viene definido public)
7. Te pregutna si es una aplicación de una sola página, responde Y
8. Has terminado la configuración, lanza una build con `npm run build``
9. Lanza el comando `firebase deploy --only hosting``
10. Ya tienes la aplicación desplegada

Despliegue en now

El despliegue en la plataforma de zeit now.

0. Necesitarás crear una cuenta en https://now.sh/
1. Instalar cliente de now con npm i -g now
2. En la carpeta raíz del proyecto en local, ejecutar now
3. Seguir los pasos que te va indicando.

Es necesario configurar las variables de entorno de forma concreta desde nuestro entorno local https://zeit.co/docs/v2/build-step#using-environment-variables-and-secrets

Instalación del frontend

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

help-maps-party's Issues

filter-list

Como usuario
Quiero filtrar recursos en la lista
Para poder acceder a la información de interés

Criterio de aceptación:

• Campo de formulario sobre la lista para filtrar por texto los resultados en la lista
• No se afecta los resultados en el mapa

show-description-see-in-the-map

Como usuario
Quiero que aparezca la descripción del PDI al pinchar en "Ver en el mapa"
Para poder leer la descripción directamente en el mapa

Criterio:

• Hacer que aparezca la descripción del PDI al pinchar en "Ver mapa" tal y como se hace al pinchar el icono de señalización del PDI.

decouple-firebase

Estado actual:

La aplicación está completamente acoplada con el servicio de Firebase.
Este servicio es gratuito hasta un número de llamadas.
Si queremos cambiarlo por otro (como FaunaDB o una API) deberíamos tener el acceso a Firebase lo más desacoplado posible

Criterios de aceptación

• Las llamadas a Firebase son agnósticas
• El sistema de gestión de coordenadas de Firebase con GeoPoint también es necesario desacoplarlo.

Error al ejecutar en branch

Si, estoy de acuerdo.

Te comento que luego del PR quise correr mi proyecto en local desde la otra rama, pero me da error en el npm run serve
2020-04-12T20_21_56_155Z-debug.log
(te adjunto el log por si me puedes dar una mano para solucionar) o tengo que hacer algo adicional antes de compilar en la otra rama?

Originally posted by @skcode7 in #2 (comment)

zoom-is-configurable

Cómo programador
Quiero modificar el zoom por defecto
Para que sea un parámetro configurable

Criterios:

• Añadir el parámetro zoom en https://github.com/delineas/help-maps-party/blob/master/src/settings.js
• Traerlo como valor de la configuración en la inicialización del mapa en https://github.com/delineas/help-maps-party/blob/master/src/components/Map.vue#L62

create-with-moderation

Como usuario anónimo
Quiero acceder al formulario de añadir recursos
Para enviar un nuevo recurso

Como usuario administrador
Quiero acceder al sistema de moderación
Para moderar los nuevos recursos

Criterios:

• Necesario un sistema de moderación
• Deseado un filtro antispam

homepage-search-location

Como usuario visitante
Quiero definir mi posición geográfica
Para ver los recursos cercanos

Criterios:

• Cambiar la portada de la app por un buscador de esos que cuando escribes una dirección te va mostrando opciones en un desplegable
• Añadir un botón para lanzar la geolocalización directa con el dispositivo
• Enviar al usuario al mapa en el punto designado

change-marker-icon

Como usuario
Quiero ver un marcador diferente en el mapa
Para entender mejor el significado de lo que estoy viendo

Criterio:

• Cambiar el icono por defecto de Leaflet
• Un icono diferente cuando se añade el recurso en el mapa
• El icono debe ser configurable, para poder elegirlo en cada instalación

create-with-authentication

Como usuario autenticado
Quiero acceder al formulario de nuevos recursos
Para publicar nuevos recursos

Criterios

• Es necesario autenticar al usuario para evitar que se envíe spam
• Usaremos la autenticación de Firebase
• El usuario anónimo no puede publicar nuevos recursos