Skip to content

8. Guía de desarrollo

IngenieroGeomatico edited this page Aug 12, 2024 · 5 revisions

Guía de desarrollo de plugins

Requisitos e instalación de dependencias: Node.js (version >=8.x.x)

Existe una herramienta para crear la estructura base del plugin, se instala con el comando npm install -g api-cnig-create-plugin@latest .

Con el "flag" -g realizamos la instalación de forma global para disponer de la herramienta en cualquier parte de nuestro equipo. En el caso de no tener disponible npm a nivel global, se tendrá que hacer npm init dentro de la carpeta en la que queramos crear el plugin y posteriormente realizar el comando npm install api-cnig-create-plugin@latest ..

Para crear el plugin base se tiene que ejecutar el comando api-cnig-create-plugin, solicitará el nombre del plugin, así como la versión de API-CORE sobre la que se desee trabajar. También nos preguntará si queremos que se instalen automáticamente las dependencias del plugin.

👉 Para la guía de desarrollo, supondremos que hemos proporcionado el nombre de 'miPlugin'

Creará la estructura de directorios y los ficheros necesarios para la construcción de un plugin dentro de una carpeta con el nombre 'miplugin' en el lugar donde se haya ejecutado la herramienta. Este plugin es autocontenido y ya contiene los scripts de pruebas y compilación, e incluye una funcionalidad básica de ejemplo 'Hola mundo'.

En este punto, deberemos desarrollar la funcionalidad específica de nuestro plugin.

Usando el comando npm install (para instalar las dependencias) y npm start para lanzar el test del plugin) para empezar el desarrollo.

Para generar el plugin compilado se ejecutará el comando npm run build.

Al ejecutar el comando npm start automáticamente se nos abrirá el test de desarrollo en el navegador y si se quiere acceder al test de producción se tendrá que cambiar la URL en el navegador apuntando al fichero prod.html (es necesario que el plugin este compilado antes).

Se tienen que tener en cuenta los requisitos de desarrollo sobre la fachada y la implementación.

Fachada e implementación

En el desarrollo son importantes los conceptos de fachada e implementación. Uno de los objetivos de la API es independizar en la medida de lo posible los desarrollos funcionales de las librerías de mapas en la que se apoyan (OpenLayers, leaflet, etc.), de modo que adaptar un desarrollo a una nueva librería de mapas implique rehacer la menor parte posible.

La API presenta una fachada común a todas las implementaciones con la que el desarrollador podrá realizar la mayoría de acciones. Bajo esta fachada están las distintas implementaciones que realizan las acciones concretas con las librerías en las que se basan.

Por tanto, a la hora de desarrollar un plugin es muy importante llevar a cabo en la fachada del mismo todas las operaciones independientes de la librería de mapas base, y dejar en la implementación las acciones que sí están ligadas a la librería base.

Estructura del proyecto/plugin

/
├── src 📁                  # Código fuente.
    ├── facade     # Fachada.
    ├── impl       # Implementación.
    ├── templates  # Plantilla handlebars.
    ├── api.json   # Definición del plugin por API-REST
    ├── index.json # Punto de entrada.
├── task 🌈                 # Crea el punto de entrada, index.js
├── test 📦                 # Código test.
├── webpack-config 🏗️       # Configuración de Webpack.
├── .eslintrc 👓            # Configuración del ESLint.
├── .gitignore 💾           # Archivos ignorados por Git.
├── LICENSE 📋              # Licencia.
└── ...

Ficheros destacados para la configuración de plugins

Referencias
Por último destacar que, como complemento a esta guía, el desarrollador siempre tendrá de referencia el código fuente de los plugins ya desarrollados.

1.INICIO
   1.1. Componentes de la API-CNIG
   1.2. Documentación y Puntos de acceso
   1.3. Primeros pasos
   1.4. Diagrama API CNIG

2. MAPA
2.1. Capas

 ■ 2.1.1. Fuentes
   • 2.1.1.1. Capas vectoriales
     + Vector
     + WFS
     + GeoJSON
     + KML
     + MVT
     + OGCAPIFeatures
     + MBTilesVector
     + GenericVector
     + MapLibre
   • 2.1.1.2. Capas ráster
     + WMS
     + WMTS
     + TMS
     + XYZ
     + OSM
     + MBTiles
     + GenericRaster
     + GeoTIFF
   • 2.1.1.3. Capas rápidas
   • 2.1.1.4. Grupo de capas

 ■ 2.1.2. Simbolización
   • 2.1.2.1. Genérica
     + Puntos
     + Líneas
     + Polígonos
   • 2.1.2.2. Básica
     + Puntos
     + Líneas
     + Polígonos
   • 2.1.2.3. Avanzada
     + Coropletas
     + Proporcional
     + Categorías
     + Estadísticos
     + Mapas de Calor
     + Cluster
     + Línea de flujo
     + Composición

 ■ 2.1.3. Filtros

2.3.-Plugins

  > Creación de plugin en cliente

  » Tutorial de creación de un plugin

2.4. Paneles

  » Creación de panel desde cero sin controles

  » Tutorial Panel de un único control

  » Tutorial Panel de un único control con más de un botón

  » Tutorial Panel con más de un control

2.5. Eventos

  » Gestión de eventos
  » Gestión de eventos en controles personalizados

    2.6. Internacionalización

    2.7. Configuración

    2.8. Acceso librerías base

3. UTILIDADES

4. PROXY

5. API REST
 5.1. Parametrización API-REST
 5.2. Base de Datos API-REST
 5.3. API REST Actions
 5.4. Servicio de correos electrónicos
 5.5. Capas rápidas

6. PARAMETRIZACIÓN VISUALIZADORES

7. SOLUCIÓN DE PROBLEMAS

8. PROCESO DE VERSIONADO

9. GUÍA DE DESARROLLO
  > Guía para el desarrollo de API-CNIG
  » Tutorial desarrollo del núcleo de API-CNIG - (Cliente)
  > Guía de desarrollo de componentes
  » Tutorial desarrollo del núcleo de API-CNIG - (Servidor)
  > Guía de desarrollo de plugins
  » Tutorial desarrollo de plugins ya creados
  » Tutorial desarrollo de nuevos plugins
  > Guía de desarrollo de visualizadores con React

  > Compilación proyecto API-CNIG

Clone this wiki locally