Guía de desarrollo de visualizadores con React

Guía de desarrollo de visualizadores con React

La API-CNIG no obliga a utilizar ningún framework o librería para desarrollar proyectos, para su utilización se tendrá que importar los CDN necesarios para su utilización.

Requisitos e instalación de dependencias: Node.js (version 14.18+, 16+.)

Los visualizadores que realiza el CNIG con la API-CORE utilizan esta librería "React". Es una librería open source para crear interfaces de usuarios.

Se recomienda utilizar una herramienta de construcción ("Build Tools") para generar el proyecto de React. La documentación de React recomienda utilizar Vite.

Pasos para desarrollar una Aplicación de React de cero con la API-CNIG
En este caso se utilizará Vite como "build tools", pero este ejemplo se extiende para cualquier otro tipo de "build tools", por ejemplo npx (npx create-next-app).

1. Usar el comando npm create vite@latest (existen otras alternativas a npm, como yarm o pnpm).
2. Posteriormente instalar Vite, npm i vite o npm install -g vite.
3. Incluir los CDN de la API-CNIG en el archivo index.html.

  <!-- fichero estilos -->
   <link href="https://componentes.cnig.es/api-core/assets/css/apiign.ol.min.css" rel="stylesheet" />

   <!-- ficheros javascript -->
   <script type="text/javascript" src="https://componentes.cnig.es/api-core/js/apiign.ol.min.js"></script>
   <script type="text/javascript" src="https://componentes.cnig.es/api-core/js/configuration.js"></script>

4. Incluir los estilos básicos en el archivo index.html

<!-- estilo básico -->
<style>
 html,
 body, 
 #root {
     margin: 0;
     padding: 0;
     height: 100%;
     width: 100%;
  }

.map {
    border: 0;
    width: 100%;
    height: 100%;
}
</style>

5. Modificar main.jsx en desarrollo

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'


ReactDOM.createRoot(document.getElementById('root')).render(

  // StrictMode renders components twice (on dev but not production) in order to detect any problems with 
  // your code and warn you about them (which can be quite useful).
  // <React.StrictMode>
  //   <App />
  // </React.StrictMode>,

  <App />

)

6. Crear el mapa, en este ejemplo se creará en App.jsx

import { useEffect } from 'react'

function App() {
  useEffect(() => {
    const mapajs = window.M.map({
      container: "map"
    });
    console.log(mapajs)
  }, [])

  return (
    <>
      <div className='map' id='map'></div>
    </>
  )
}

export default App

En el caso de Vite para levantar el proyecto se utiliza npm run dev, es lo mismo que hacer npm start o npm run start.

*** Para poder ver el resultado en una máquina distinta a la que se levanta el proyecto, habrá que modificar el archivo vite.config.js de la siguiente manera

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    host: true,
    port:3000 // o el puerto que se quiera
  },
})

Remarcar la necesidad de importar los CDN en el archivo index.html que se encuentra en la carpeta public para poder utilizar la API-CORE dentro de la carpeta src.

Para los visualizadores creados con npx create-next-app, para el desarrollo en local se utilizará el comando npm start o npm run start, este comando levanta un servidor de desarrollo.

Para compilar el proyecto se utilizará npm run build, en el caso de utilizar Maven se usará mvn clean package.