Cómo crear una aplicación con Quasar y Leaflet

Crearemos una aplicación haciendo uso del Framework Quasar, la librería Vue Leaflet, la extensión Quasar Dotenv y Vuex. Con esta, obteniendo la ubicación del usuario le indicaremos a este dónde se encuentra el Service Point de DHL más cercano y distinta información sobre el mismo.

El código completo se encuentra en el siguiente repositorio de Github.

Crear la aplicación con Quasar

En primer lugar instalamos Quasar CLI de forma global y así poder usarla en otros proyectos. Seguidamente crearemos la aplicación y la nombramos:

npm install -g @quasar/cli
quasar create nearest-sercice-point

A las siguientes preguntas respondemos con las respuestas por defecto:

Project name (internal usage for dev) nearest-service-point
? Project product name (must start with letter if building mobile apps) Service 
Point Where
? Project description Search the nearest service point and show a map with info
? Author Javier Gutiérrez <gutifer666@gmail.com>

En las siguientes elegimos SCSS como preprocesador (aunque en principio no lo he utilizado), auto importamos los componentes y directivas de Quasar, añado las librerías de Vuex (para el manejo de estados) y Axios (aunque utilizaremos fetch) y escojo usar npm como gestor de paquetes:

? Pick your favorite CSS preprocessor: (can be changed later) SCSS
? Pick a Quasar components & directives import strategy: (can be changed later) Auto import

? Check the features needed for your project: 
 ◯ ESLint (recommended)
 ◯ TypeScript
 ◉ Vuex
❯◉ Axios
 ◯ Vue-i18n
 ◯ IE11 support
 
❯ Yes, use NPM

Para empezar a desarrollar entramos en el directorio del proyecto, ejecutamos el servidor en modo de desarrollo y abrimos el editor de código:

To get started:

  cd nearest-service-point
  quasar dev
  
  App · Opening default browser at http://localhost:8080
  
  code . 
  (Visual Studio Code)

Variables de entorno con Quasar

Para esta aplicación vamos a utilizar una clave privada para acceder a una API, por lo que vamos a utilizar una variable de entorno para disponer de ella tanto en desarrollo como en producción, pero nunca en el repositorio público de Github. para ello vamos a instalar la extensión Quasar Dotenv:

quasar ext add @quasar/dotenv

Esto crea el archivo .env donde conservamos la clave de la API:

# This is your .env file
# The data added here will be propagated to the client
# example:
# PORT=8080
YOUR_API_KEY=AQUÍ VA LA CLAVE DE LA API

Duplicamos el archivo y lo renombramos como .env.example para subirlo a Github:

# This is your .env file
# The data added here will be propagated to the client
# example:
# PORT=8080
YOUR_API_KEY=

Para obtener la clave de la API debes acceder a la siguiente ubicación web.

Manejo de estados con Vuex

Para comprender un mejor uso de Vuex te recomiendo visitar el Post Llamar a una API con Fetch desde Vuex store.

Lo correcto sería crear un módulo en la carpeta store con el comando :

quasar new store modulo-ejemplo

el cual crea la estructura del store, pero en mi caso he duplicado el módulo module- example que trae como ejemplo.

En src/store/index.js

Descomentamos las siguientes líneas para utilizar el módulo que viene como ejemplo al instalar la aplicación (en caso de haberlo creado nosotros debemos añadir las líneas con el nombre de nuestro módulo):

import example from './module-example'
...
    modules: {
      example
    },

state.js

Inicializamos los atributos que vamos a necesitar en toda la aplicación:

export default function() {
  return {
    userCoordenade: [0, 0],
    coordenadeServicePoint: [0, 0],
    nameServicePoint: "",
    openHourServicePoint: "",
    closeHourServicePoint: "",
    addressServicePoint: "",
    distanceServicePoint: "",
  };
}

getters.js

Esta función accede al atributo userCoordenade:

export function getLocationUser(state){
    return state.userCoordenade;
}

mutations.js

Las siguientes funciones transforman el valor de los atributos:

export function SET_LOCATION(state, newCoordenade) {
    return (state.userCoordenade = newCoordenade);
  }
  export function LOAD_COORDENADE_SERVICE_POINT(state, payload) {
    return (state.coordenadeServicePoint = payload);
  }
  export function LOAD_NAME_SERVICE_POINT(state, payload) {
    return (state.nameServicePoint = payload);
  }
  export function LOAD_OPEN_HOUR_SERVICE_POINT(state, payload) {
    return (state.openHourServicePoint = payload);
  }
  export function LOAD_CLOSE_HOUR_SERVICE_POINT(state, payload) {
    return (state.closeHourServicePoint = payload);
  }
  export function LOAD_ADDRESS_SERVICE_POINT(state, payload) {
    return (state.addressServicePoint = payload);
  }
  export function LOAD_DISTANCE_SERVICE_POINT(state, payload) {
    return (state.distanceServicePoint = payload);
  }

actions.js

La siguiente función accede a la API pasando en la cabecera la clave que hemos guardado anteriormente en el archivo .env y al recibir respuesta carga los datos de la API haciendo uso de las Mutaciones:

export function GET_DATA_SERVICEPOINT (context) {
    let myHeaders = new Headers();
    myHeaders.append("DHL-API-Key", process.env.YOUR_API_KEY);

    let requestOptions = {
      method: "GET",
      headers: myHeaders,
      redirect: "follow",
    }
    let userLatitude = context.getters.getLocationUser[0];
    let userLongitude = context.getters.getLocationUser[1];
    fetch(
      `https://api.dhl.com/location-finder/v1/find-by-geo?latitude=${userLatitude}&longitude=${userLongitude}&locationType=servicepoint&radius=2500&limit=20`,
      requestOptions
    )
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        context.commit("LOAD_COORDENADE_SERVICE_POINT",[data.locations[0].place.geo.latitude, data.locations[0].place.geo.longitude]);
        context.commit("LOAD_NAME_SERVICE_POINT",data.locations[0].name);
        context.commit("LOAD_OPEN_HOUR_SERVICE_POINT",data.locations[0].openingHours[0].opens);
        context.commit("LOAD_CLOSE_HOUR_SERVICE_POINT",data.locations[0].openingHours[0].closes);
        context.commit("LOAD_ADDRESS_SERVICE_POINT",data.locations[0].place.address.streetAddress);
        context.commit("LOAD_DISTANCE_SERVICE_POINT",data.locations[0].distance);
      });
  
}

Implementar Componentes

Creamos los componente de Vue: Location, ServicePoint y Map para usarlos en la página Index.vue e Info para usarlo en el MainLayout:

quasar new component Location ServicePoint Map Info

Location.vue

Geolocaliza la posición del usuario al montar la aplicación y las guarda con SET_LOCATION:

<template></template>

<script>
import { mapMutations } from "vuex";

export default {
  name: "Location",

  methods: {
    ...mapMutations("example", ["SET_LOCATION"]),

    success(pos) {
      this.SET_LOCATION([pos.coords.latitude, pos.coords.longitude]);
    },
  },

  mounted() {
    navigator.geolocation.getCurrentPosition(this.success);
  },
};
</script>

ServicePoint.vue

Este componente tiene un botón que dispara la función showMap ( ) ,la cual obtiene los datos de la API:

<template>
<div class="q-pa-md">
  <q-btn icon="directions" color="info" class="full-width" label="Service Point más cercano" @click="showMap"  />
</div>
  
</template>

<script>
export default {
  name: "ServicePoint",
  methods: {
    showMap() {
      return this.$store.dispatch("example/GET_DATA_SERVICEPOINT");
    }
  }
};
</script>

Map.vue

En public/icons añadir los iconos place-black-24dp.svg y storefront-24px.svg de obtenidos en Material Icons.

El siguiente componente crea el mapa, indicando con un icono dónde está el usuario y dónde el Service Point. Para ello hace uso de la librería Vue Leaflet que instalaremos en el siguiente apartado. Para una mejor comprensión de esta librería aconsejo seguir la documentación de Vue Leaflet.

<template>
  <q-page padding class="flex">
    <q-card style="flex: 1">
      <l-map :zoom="zoom" :center="userCoordenade">
        <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
        <l-marker :lat-lng="userCoordenade" :icon="iconCenter"></l-marker>
        <l-marker
          :lat-lng="coordenadeServicePoint"
          :icon="iconSercivePoint"
        ></l-marker>
      </l-map>
    </q-card>
  </q-page>
</template>

<script>
import { LMap, LTileLayer, LMarker, LIcon } from "vue2-leaflet";
import L from "leaflet";
import "leaflet/dist/leaflet.css";

import { mapState } from "vuex";

export default {
  name: "Map",
  components: {
    LMap,
    LTileLayer,
    LMarker,
    LIcon,
  },

  data() {
    return {
      zoom: 15,
      url: "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
      attribution:
        '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',

      iconCenter: L.icon({
        iconUrl: "icons/place-black-24dp.svg",
        iconSize: [32, 37],
        iconAnchor: [16, 37],
      }),
      iconSercivePoint: L.icon({
        iconUrl: "icons/storefront-24px.svg",
        iconSize: [32, 37],
        iconAnchor: [16, 37],
      }),
    };
  },
  computed: {
    ...mapState("example", ["userCoordenade"]),
    ...mapState("example", ["coordenadeServicePoint"]),
  },
};
</script>
<style>
</style>

Instalar Vue Leaflet

npm install leaflet vue2-leaflet --save

Añadimos las siguientes líneas de código al componente Map.vue para hacer uso de Vue Leaflet de forma local en este (en el archivo que hemos visto anteriormente ya están añadidas):

<script>
import { LMap, LTileLayer, LMarker, LIcon } from "vue2-leaflet";
import L from "leaflet";
import "leaflet/dist/leaflet.css";

export default {
  name: "Map",
  components: {
    LMap,
    LTileLayer,
    LMarker,
    LIcon,
  }
 </script>

Modificar Layout

En src/layouts/MainLayout.vue modificamos el Layout por defecto añadiendo el componente Info en el q-drawer. En <q-page-container> le indico la ruta a <router-view />, la cual nos lleva a la página Index.vue:

<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          icon="menu"
          aria-label="Menu"
          @click="leftDrawerOpen = !leftDrawerOpen"
        />

        <q-toolbar-title>
          Nearest Service Point
        </q-toolbar-title>

        <div>Quasar & Leaflet</div>
      </q-toolbar>
    </q-header>

    <q-drawer
      v-model="leftDrawerOpen"
      show-if-above
      bordered
      content-class="bg-grey-1"
    >
    <div class="fixed-center info">
      <Info></Info>
    </div>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script>
import Info from "../components/Info";

export default {
  name: 'MainLayout',
  components: { Info },
  data () {
    return {
      leftDrawerOpen: false,
    }
  }
}
</script>

<style>
  .info {
    width: max-content;
  }
</style>

Modificar la Página Principal

En src/pages/Index.vue incluimos los componentes Location, ServicePoint y Map:

<template>
  <div>
    <Location></Location>
    <ServicePoint></ServicePoint>
    <Map></Map>
  </div>
</template>

<script>
import Location from "../components/Location";
import ServicePoint from "../components/ServicePoint";
import Map from "../components/Map";

export default {
  name: "PageIndex",
  components: {
    Location,
    ServicePoint,
    Map,
  },
};
</script>

Con esto hemos acabado, sólo queda hacer el Build para la plataforma que queramos implementar. Para una información más completa de Quasar leer su documentación.

# build for production
$ quasar build

# SSR
$ quasar build -m ssr

# PWA
$ quasar build -m pwa

# Mobile App
$ quasar build -m cordova -T [android|ios]
# or the short form:
$ quasar build -m [android|ios]

# passing extra parameters and/or options to
# underlying "cordova" executable:
$ quasar build -m ios -- some params --and options --here

# Electron App
$ quasar build -m electron

Crear la aplicación con Quasar

Variables de entorno con Quasar

Manejo de estados con Vuex

En src/store/index.js

state.js

getters.js

mutations.js

actions.js

Implementar Componentes

Location.vue

ServicePoint.vue

Map.vue

Instalar Vue Leaflet

Modificar Layout

Modificar la Página Principal

Interacciones con los lectores

Deja una respuesta Cancelar la respuesta