Objectivos
- Comprender la relación entre mapas y aplicaciones web
- Aprender a crear una aplicación
- Comprender el rol de los formularios en la plataforma
- Aprender a crear formularios personalizados
- Aprender a compartir una aplicación web con el público
Requisitos previos
- Haber completado y entendido el tutorial anterior sobre los mapas
¿Cuál es la relación entre los mapas y las aplicaciones web?
La sección Aplicaciones Web permite al usuario comenzar con un Mapa para luego agregar funciones adicionales con la ayuda de varias herramientas, como un explorador de fuentes de datos, una función de búsqueda, una función de impresión, etc. Es una poderosa herramienta que permite el análisis y sirve como una plataforma de colaboración ya que varios usuarios pueden compartir y editar aplicaciones web en tiempo real.
¿Cómo crear una aplicación web?
Para crear una aplicación web, haga clic en el botón [+] del menú superior, luego seleccione Aplicación web cartograficá.
En la nueva ventana que aparece, escribe un nombre significativo. En este caso, lo llamaremos Application_wards.
Para crear una Aplicación Web, el primer paso será seleccionar el mapa que se utilizará. En la lista desplegable "Mapa", seleccione el mapa Tutorial_wards que creamos en el tutorial anterior.
El siguiente paso es seleccionar las herramientas que estarán disponibles dentro de la Aplicación web. Para agregar o eliminar una herramienta, simplemente marque o desmarque la casilla de verificación correspondiente.
En nuestro caso, asegúrese de que la casilla "Explorador de fuentes de datos" esté marcada, lo cual permitirá la visualización de nuestras fuentes de datos. Luego, haga clic en el botón "Crear" en la parte inferior de la página.
Application_wards será creado. Selecciónelo en el catálogo de Aplicaciones web, luego haga clic en el botón "Ejecutar la aplicación web" en el menú.
Ups ... ¡la plataforma muestra un error! ¿Pero por qué es eso? El error aparece porque falta una configuración dentro del formulario vinculado a nuestra fuente de datos Points of interest.
¿Cuál es el rol de los formularios en la plataforma?
Los Formularios están vinculados a las fuentes de datos y permiten su configuración de múltiples maneras a través de la estructura JSON. Son, entre otras cosas, los responsables de la ventana que muestra los datos al hacer clic en un registro del Mapa y para algunas configuraciones en las Aplicaciones Web.
¿Cómo crear un formulario personalizado?
Como lo indica el mensaje de error al ejecutar nuestra Aplicación web, las fuentes de datos presentes en el Mapa no tienen la opción "browsable":true especificado en su Formulario. Tendremos que agregarlo manualmente.
Antes de continuar, busque el botón [+] que aparece en la capa de datos Points of interest. Este botón se usa para añadir nuevos registros a la fuente de datos (en este caso, un nuevo punto).
Haga clic en este botón, luego haga clic en cualquiera parte del mapa para crear un nuevo punto. Tenga en cuenta los controles en el formulario y los campos relacionados.
Haga clic en el botón "Cancelar", luego haga clic en el enlace Formulario en la columna "Editar formulario" de la fuente de datos Points of interest.
En la nueva ventana que se abre podemos ver el nombre del formulario, su descripción, así como su configuración en el formato JSON.
Nota: Este tutorial no entrará en detalles sobre la estructura y todas las posibles opciones de los Formularios. Para obtener más información, lea la documentación de la plataforma (NombreUsuario> Documentación> Formularios).
Comencemos resolviendo el problema de la navegación de datos dentro de nuestra aplicación. Para hacer esto, navegue hasta la parte inferior de la configuración, luego agregue la siguiente línea:
,"browsable" : true
Haga clic en el botón "Guardar" en la parte inferior de la página, luego regrese a la aplicación Application_wards. Observe cómo el mensaje de error ha sido reemplazado por una ventana vacía. Esto es normal ya que nuestra fuente de datos de Points of interest está actualmente vacía.
Por lo tanto, añadiremos un punto con el botón [+] como lo hemos hecho antes, y escribiremos los siguientes valores:
- nombre: Estatua
- descripcion: Mármol
- fecha_construccion: 1950
- uuid: déjalo en -1
Una vez hecho esto, haga clic en el botón "Guardar" para validar. ¡Aparece otro error!
¿Se recuerda cuando creamos la fuente de datos Points of interest en el primer tutorial? Si volvemos a ver la estructura, veremos que el campo fecha_construccion es del tipo de datos [date], mientras que se presenta en forma de cuadro de texto en nuestro formulario.
Por lo tanto, será necesario editar nuestro Formulario de nuevo para cumplir con este formato de nuestra fuente de datos. Para hacer esto, haga clic en "Más..." en el menú superior, luego seleccione Formularios.
Busque y seleccione los Points of Interest - Base Form en el catálogo, luego haga clic en el ícono de edición (lápiz) en el panel derecho. En el área de configuración del formulario, identifique la parte relacionada con el campo fecha_construccion.
Tenga en cuenta que cada campo tiene la siguiente configuración:
- label -> representa la etiqueta que se muestra en el formulario
- name -> representa el nombre del campo en la base de datos
- type -> representa el tipo de control utilizado para ingresar la información
Entonces, en este caso, reemplazaremos el tipo del campo fecha_construccion:
"type":"text"
por
"type":"date"
El formulario ahora aplicará el tipo correcto de datos requeridos por la fuente de datos mostrando un control de calendario. También eliminaremos la sección que muestra el campo uuid ya que no queremos que se ingrese manualmente. Para hacer esto, simplemente seleccione este texto y luego elimínelo de la configuración JSON.
Nota: Tenga cuidado de eliminar también la coma del corchete de cierre del campo fecha_construccion (justo debajo de "type": "date") para evitar un error JSON, como se muestra en esta imagen.
Una vez hecho, haga clic en el botón "Guardar".
Ahora volveremos a la sección Aplicaciones web y ejecutaremos Application_wards. Una vez hecho esto, haga clic en el botón [+] de la capa Points of interest y agregue un punto en el mapa.
Ahora podemos notar la desaparición del campo uuid y la presencia de un control de calendario en el campo fecha_construccion del formulario.
Ingrese un nombre , descripcion y fecha_construccion, luego haga clic en el botón "Guardar". Esto tendrá dos efectos: la aparición de un punto en el mapa y una nueva línea de datos en el panel izquierdo.
¿Cómo compartir una aplicación web con el público?
Ahora que la aplicación está completa, sería interesante contar con compañeros que puedan agregar nuevos puntos al mapa. Para que eso suceda, sería conveniente poder compartirlo y que se pueda acceder sin tener que iniciar sesión en la plataforma.
Para lograr esto, haga clic en Aplicaciones web en el menú superior para regresar al catálogo, luego seleccione Application_wards. En el panel derecho, haz clic en el botón "Manejar espacios".
En la ventana que aparece, haga clic en el cuadro de texto y luego seleccione el espacio "Public". Una vez completado, haz clic en el botón "Guardar".
La aplicación ahora está accesible públicamente: lo que tiene que hacer es compartirla con un link. Para obtenerlo, haga clic en el botón "Compartir la aplicación web" y copie el enlace.
El único paso que queda es enviarlo a las personas deseadas y tendrán acceso a la aplicación directamente desde su navegador web favorito.
Resumen
En esta sección, hemos detallado la relación entre Mapas y Aplicaciones web dentro de la plataforma desarrollada por Mapgears.
También vimos cómo crear, personalizar y compartir una aplicación web con la audiencia.
Finalmente, aprendimos sobre la relación entre las fuentes de datos y los Formularios y cómo personalizarlos.
Para obtener más información sobre la sección de aplicaciones web, vaya a la documentación de la plataforma en NombreUsuario > Documentation > Web Apps.
¿Preguntas o necesita algunas precisiones? Contactanos en support@mapgears.com
0 Comments