FOR

E DE
OGR
MACI
N
EB
ández
rquerque
o 32
 Resumen
La aplicación desarrollada permite el control, visualización y descarga de archivos tipo
geojson que se obtienen desde un servidor a través de una API desarrollada con Spring
Boost usando la tecnología Java. Existen dos roles en el sistema, el rol de administrador
que permite controlar los usuarios y es el encargado de subir los archivos al servidor
para hacerlos visibles a los usuarios con rol de desarrollador para que puedan utilizarse
en el editor. La web cuenta con un pequeño editor usando Leaflet una de las tecnologías
de visualización de mapas más ligeras implementadas en JavaScript. La interacción
entre el editor y las interfaces de control para los administradores se encuentran
conectados mediante una Api Rest. Este sistema permite una rápida visualización de
archivos geojson de diferentes temáticos usando diferentes proveedores como Open
Street Map, Carto entre otros.

Palabras claves: Leaflet, mapas, visualización, Carto, Open Street Map, Geojson

Abstract
The application developed allows the control and visualization of geojson files that are
obtained from a server through an API developed with Spring Boost using Java
technology. There are two roles in the system, the administrator role that allows
controlling users and is in charge of uploading files to the server to make them visible to
users with a developer role so that they can be used in the editor. The web has a small
editor using Leaflet, one of the lightest map display technologies implemented in
JavaScript. The interaction between the editor and the control interfaces for the
administrators are connected by means of an Api Rest. This system allows a quick
visualization of geojson files of different themes using different providers such as Open
Street Map, Carto among others.

Keywords: Leaflet, maps, visualization, Carto, Open Street Map, Geojson

Índice

Contenido
Resumen...................................................................................................................................1
Abstract....................................................................................................................................1
Índice.......................................................................................................................................1
Introducción.............................................................................................................................2
Desarrollo.................................................................................................................................3
Análisis de las tecnologías usadas............................................................................................3
Primefaces................................................................................................................................4
Spring.......................................................................................................................................4
Requisitos funcionales..............................................................................................................5
 Requisitos no funcionales.........................................................................................................5
Descripción de la Solución Propuesta......................................................................................6
Modelo lógico..........................................................................................................................6
Modelo físico...........................................................................................................................6
Diagrama de Clases..................................................................................................................7
Arquitectura del Proyecto.........................................................................................................7
Front.........................................................................................................................................7
Backend....................................................................................................................................8
Pautas seguidas para el diseño de la interfaz............................................................................8
Seguridad.................................................................................................................................9
Conclusiones..........................................................................................................................10
Bibliografía............................................................................................................................11

Introducción
El software realizado en este proyecto tiene como desarrollada permite el control y
visualización de archivos tipo geojson para así hacer un poco más fácil la lectura e
interpretación de estos archivos.

Se diseñó una base de datos para controlar la gestión de los usuarios los mapas que
crean usando el editor y un resumen de los ficheros almacenados en el servidor para
facilitar su descarga. La base de datos se desarrolló usando PostgresSql, utilizando
EMBARCADERO se logró confeccionar el diagrama y luego exportarlo como código
SQL con de generar la base de datos y el diagrama. La arquitectura de la aplicación está
basada en una arquitectura cliente-servidor. Spring Boot fue el framework utilizado para
desarrollar el backend mientras que para el lado del cliente la implementación está
basada en JSF utilizando Primeface como suite de componentes html para enriquecer la
experiencia del usuario.
 Desarrollo
Análisis de las tecnologías usadas
Leaflet es una librería JavaScript  opensource ampliamente utilizada para la publicación
de mapas en la web.

Su sencillez y ligereza la convierten en la herramienta ideal para aquellos que se quieren

iniciar en el apasionante mundo webmapping o para los que necesitan realizar proyectos
complejos. Su sencillez no es una limitación para sus capacidades, pues es comparable
con cualquiera otro competidor como Openlayers.

La filosofía de Leaflet consiste en tener una librería ligera, sencilla, fácil de manejar

y de usar, que desarrolle funciones básicas y que se complemente a través de plugins
desarrollados por terceros.

En este modelo reside la potencia y el éxito de Leaflet. Por lo tanto, parece que su

evolución seguirá fiel a estos principios.

Para crear un mapa web usando Leaflet basta con crear un contenedor en nuestro código
html y luego referenciarlo en nuestro código JavaScript y el núcleo interno creara y
renderizara los componentes necesarios

<div id="map"></div>

<script>

var map = L.map ('map').setView([41.66, -4.72], 15);

</script>

L.map es la clase central de la API. Se usa para crear y manipular el mapa. En el mapa
establecemos unas coordenadas de la vista y un nivel de zoom. También se pueden
agregar mapas bases de grandes proveedores como OpenStreetMap siempre que sean
atribuidos a sus creadores.
L.tileLayer
('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{attribution:'Map

<a href="http://openstreetmap.org">OpenStreetMap</a>})

Primefaces
PrimeFaces es una suite de componentes JSF de código abierto con varias extensiones.
Contiene un amplio conjunto de componentes (HtmlEditor, Dialog, AutoComplete,
Charts y muchos más).Tiene soporte para la tecnología Ajax, basada en API JSF Ajax
estándar, también posee una amplia documentación así como una comunidad de
usuarios grande, vibrante y activa.

Spring
Spring Boot proporciona una buena plataforma para que los desarrolladores de Java
desarrollen una aplicación de primavera independiente y de grado de producción que
puede ejecutar. Puede comenzar con configuraciones mínimas sin la necesidad de una
configuración completa de Spring. Ofreciendo ventajas a los desarrolladores que
facilitan sus trabajos aumentando la productividad y reduciendo el tiempo de desarrollo.
Spring está diseñado para cumplir los siguientes objetivos Spring Boot está diseñado
con los siguientes objetivos:

 Para evitar una configuración XML compleja en Spring

 Para desarrollar aplicaciones Spring listas para producción de una manera más fácil

 Para reducir el tiempo de desarrollo y ejecutar la aplicación de forma independiente

Requisitos funcionales
El sistema debe gestionar:

-Los usuarios, su creación, modificación y eliminación. El administrador es el que

puede realizar estas operaciones.

Controlar los archivos que se suben al servidor, así como su integridad y permitir
acciones como la descarga y subida de archivos al servidor.

Permitir la visualización de archivos geojson usando Leaflet

Los mapas creados en el editor

Requisitos no funcionales
-Creación de un login para la autenticación de los usuarios al sistema

-Posibilitar la descarga de los mapas creados en jpg

-Mostrar un dashboard con los datos más relevantes como los nuevos usuarios las
etiquetas más usadas para identificar un mapa, entre otras.

-Visualizar como dashboard varios reportes.

Descripción de la Solución Propuesta

Modelo lógico
 Modelo físico

Diagrama de Clases

Arquitectura del Proyecto

El proyecto está divido por dos proyectos el front y el backend

Front
cu.edu.cujae.qdeck.bean: En este paquete están las clases que tiene que ver con el
mapeo de los datos de las paginas xhtml
cu.edu.cujae.qdeck.dto: Se encuentra las clases que tiene que ver con el modelo lógico
de los datos

cu.edu.cujae.qdeck.config: Se encuentra las clases que tiene ver con la configuración.

cu.edu.cujae.qdeck.security: Se encuentra las clases que tiene que ver con la seguridad.

cu.edu.cujae.qdeck.service: Se encuentra las llamadas a las clases controladoras del

backend

cu.edu.cujae.qdeck.utils: Contiene las clases que sirven de soporte a la aplicación en

general.

Backend
cu.edu.cujae.backend: Contiene las clases inicialización del servidor interno para Spring
Boot

cu.edu.cujae.backend.api.config: Se encuentra las clases que tiene ver con la

configuración.

cu.edu.cujae.backend.api.controller: Se encuentran las clases que llaman a la interfaz de

los servicios

cu.edu.cujae.backend.core.dto: Se encuentra las clases que tiene que ver con el modelo
lógico de los datos

cu.edu.cujae.backend.core.security: Se encuentra las clases que tiene que ver con la

seguridad.

cu.edu.cujae.backend.core.service: Se encuentra las interfaces que van a implementar

las clases de los servicios

cu.edu.cujae.backend.service: Permite manejar la información y relaciona las clases del

paquete modelo con las tablas de la base de dato. Posibilita insertar, eliminar, modificar
la información.

Diseño de la interfaz
Para el diseño de la interfaz, se tuvo en cuenta la creación de una interfaz para los
administradores teniendo en cuenta el diseño clásico de las dashboard en las páginas
más conocidas de internet, la clásica barra lateral para tener a la vista los botones del
menú y la vista pueda ser adaptado al uso de móviles, manteniendo el diseño
responsive. El uso de iconos que representan determinadas acciones también hace más
atractivas y fáciles de usar las aplicaciones. El editor permite que se pueda visualizar los
mapas tanto en la web como el móvil ya que la biblioteca de Leaflet hace que esta
adaptación sea sencilla. El uso de componentes de las suite de primefaces permite que la
experiencia sea la más adecuada, el uso de componentes como el fileuploader, la barra
lateral entre otros permiten seguir muchas de las especificaciones a la hora de crear
componentes para nuestra web.

Seguridad
Para garantizar la seguridad y protección de la información se ha implementado el
mecanismo de acceso restringido a la aplicación, que está basado en la creación de
diferentes roles con sus respectivos privilegios, usando módulos que proporciona Spring
Boot. Si el usuario no se autentica con su contraseña es imposible que accede al sistema.
Tal seguridad solo permite el uso de la Api Rest para conectar con el servidor a
usuarios que pertenezcan al sistema. El único que tiene el privilegio para eliminar,
insertar, y modificar usuarios es el administrador. La subida de archivos al servidor y la
vista de los reportes. El rol de desarrollador solo será para el uso del editor y para poder
descargar los mapas como imágenes. El control de acceso a los diferentes privilegios se
realiza a través de la interfaz. Y los roles definidos son: Administrador y Desarrollador.

Conclusiones
En este trabajo se han cumplido los objetivos trazados para dar solución a la
problemática planteada, se han profundizado los conocimientos adquiridos en
tecnologías del lado del cliente como html, css, javascript, jsf y el uso de Spring Boot y
de Java para desarrollar el servidor y la Api Rest que servirá de vía para comunicar
aplicaciones manteniendo la arquitectura cliente-servidor
 Bibliografía
Rosa María Mato. Sistemas de Bases de Datos. Editorial Pueblo y Educación. 2005

https://mappinggis.com/2017/10/10-cosas-quiza-no-sabias-leaflet/

https://tutorialpoint.com/springbootreeference

Çağatay Çivici Primefaces User Guide

Eckel Bruce. Thinking in Java. Prentice Hall. Tercera Edición.

Showcase de primefaces (https://www.primefaces.org/showcase/)

Ayuda de PostgreSQL.