diff --git a/geoapp/src/App.js b/geoapp/src/App.js index 41f354b..d474d6a 100644 --- a/geoapp/src/App.js +++ b/geoapp/src/App.js @@ -51,7 +51,8 @@ export default class App extends React.Component { {/* Title */}
-

GeoApp

+

GeoApp :: React

+

Sanitary Facilities (Cordoba, Spain)

diff --git a/img/04_sprint4.gif b/img/04_sprint4.gif new file mode 100644 index 0000000..33c4e10 Binary files /dev/null and b/img/04_sprint4.gif differ diff --git a/sprint.md b/sprint.md index 0d040ef..798ab2b 100644 --- a/sprint.md +++ b/sprint.md @@ -16,15 +16,15 @@ Con la siguiente entrada cierro este *side proyect* que me ha servido para [cono A modo de **conclusión**, comentar que **estoy contento con la experiecia**. He cumplido con el **objetivo principal** que me marqué que no era otro que el de **introducirme en el uso de React** y he desarrollado la aplicación cubriendo las funcionalidades definidas al principio del proyecto. -También me gusta la **metodología** que que seguido y que creo que aplicaré a aprendizajes futuros.Como en cualquier proyecto de desarrollo real, y con real me refiero proyecto para un cliente, ha sido básico definir correctamente el alcance de las tareas a realizar y marcarme un tiempo. Esto me ha ayudado a no desviarmente, organizar el tiempo y sobre todo a saber cúando darlo por terminado. +También me gusta la **metodología** que seguido y que creo que aplicaré a aprendizajes futuros. Como en cualquier proyecto de desarrollo real, y con real me refiero proyecto para un cliente, ha sido básico definir correctamente el alcance de las tareas a realizar y marcar un tiempo de ejecución. Esto me ha ayudado a no desviarmente, organizar el tiempo y sobre todo a saber cuándo darlo por terminado. -Al final, como es normal y conociendo basicamente la librería, me han surgido posibles mejoras, nuevas funcionalidades o ampliaciones, pero como no estaban definidas en mi pila, las dejaré para otro proyecto. +Al final, como es normal y conociendo basicamente la librería, me han surgido posibles mejoras, nuevas funcionalidades o ampliaciones, pero como no estaban definidas en mi pila, las dejaré para otro momento. Quisiera también comentar que **este sistema de autoaprendizaje tiene también su aspecto negativo**. No contar con alguien que te revise el código, que te aporte comentarios o que simplemente te muestre otras vías para mejorar lo aprendido, me deja la sensación en algunas ocasiones de **no saber si he usado la forma más óptima de usar la librería**, aunque el código funcione correctamente. ![react.png](/img/react.png) -Este es el listado de Las tareas que quedaban por hacer: +Este es el listado de las tareas que quedaban por hacer: - 06 crear componente TableList - 14 Datos WFS en tabla - 17 consulta datos en tabla @@ -36,9 +36,9 @@ Los temas aprendidos sobre React a partir del desarrollo de estas tareas son los # Componente TableList -En este último componente vamos a **presentar en formato tabla los resultados obtenidos desde el servicio WFS** de la Junta de Andalucía con datos sobre servicios sanitarios. Son los mismos datos que usamos para [añadir el GeoJSON al mapa](http://www.sigdeletras.com/2020/side-project-4-react-y-leaflet-wfs/). +En este último componente vamos a **presentar en formato tabla los resultados obtenidos desde el servicio WFS** de la Junta de Andalucía con datos sobre [equipamintos sanitarios](https://www.juntadeandalucia.es/institutodeestadisticaycartografia/DERA/servicios.htm). Son los mismos datos que usamos para [añadir el GeoJSON al mapa](http://www.sigdeletras.com/2020/side-project-4-react-y-leaflet-wfs/). -Para el componente usamos los datos que nos vienen desde sus propiedades y montamos una tabla con cabecera y cuerpo de datos que devuelve la información usando la función map(). El componente *TableList* quedará así. +Usamos los datos que nos vienen desde sus propiedades y montamos una tabla con cabecera y cuerpo de datos que devuelve la información mediante la función *map()*. El componente *TableList* quedará así. ```javascript //TablaList @@ -83,30 +83,28 @@ export default class TableList extends Component { } } } - -Para futuras mejoras, se debería refactorizar el código y que pudiera servir para cualquier tipo de datos temáticos que se consultaran. Ahora mismos está desarrollado pensando en el modelo de datos de servicios sanitarios. - +... ``` -# Implementando un botón de zum con el patrón de diseño Pub-Sub. +Para futuras mejoras, se debería refactorizar el código y que pudiera servir para cualquier tipo de datos temáticos que se consultaran. -Es interesante añadir un **bótón que permita hacer zum al elemento dentro desde la tabla**. Para obtener una comunicación directa entre componentes, y que ejecute el método *flyTo()* de Leaflet en el compomente *MapView*, he usado el [**patrón de diseño **Observador**](https://es.wikipedia.org/wiki/Observer_(patr%C3%B3n_de_dise%C3%B1o)) +# Implementando un botón de zum con el patrón de diseño Pub-Sub. -Este patrón define una dependencia de uno a muchos entre objetos, de forma que cuando un objeto (sujeto) cambie de estado, se notifique y se actualicen automáticamente todos los objetos (observadores) que depende de él. Esta notificación se realiza normalmente a través de uno de sus métodos. +Es interesante añadir un **bótón que permita hacer zum al elemento desde la tabla**. Para obtener una comunicación directa entre componentes, y que ejecute el método *flyTo()* de Leaflet en el compomente *MapView*, he usado el [**patrón de diseño **Observador**](https://es.wikipedia.org/wiki/Observer_(patr%C3%B3n_de_dise%C3%B1o)). Este patrón define una dependencia de uno a muchos entre objetos, de forma que cuando un objeto (sujeto) cambie de estado, se notifique y se actualicen automáticamente todos los objetos (observadores) que depende de él. Esta notificación se realiza normalmente a través de uno de sus métodos. El patrón se ha usado para comunicar dos componentes hijos, en este caso *ButtonZoom* que obtiene las coordenadas desde las propiedades de cada fila y *MapView* que es donde se encuentra el evento del zum a las coordenadas pasadas. Para ser más específicos se ha usado el **patrón Pub-Sub(Publisher-Subscriber)** que añade un evento intermedio. La implementación de este patrón se a realizado gracias a la librería [PubSub](https://www.npmjs.com/package/pubsub-js). En esta [entrada](https://medium.com/@Aida_Pro_/observer-vs-eventbus-patrones-de-dise%C3%B1o-cd8178f48c7d) es donde he obtenido la parte teórica sobre el usos de ambos patrones. -Lo primero que se ha realizado es la instalación de la librería pubsub-js con npm y añadir la importación en los componentes donde los vamos a usar. +Lo primero que se ha realizado es la instalación de la librería *pubsub-js* con npm y añadir la importación en los componentes donde los vamos a usar. ```javascript //TableList.js import React, { Component } from "react"; import PubSub from "pubsub-js"; +... ``` - -Creamos el la función que vamos publicar. La función se denominará *zoomFeature()* y estará dentro del componente de clase *ButtonZoom()*. Este compomente devuelve un botón en cada fila de la tabla con un evento *onClick* que llama a nuestra función. +Creamos la función que vamos publicar. La función se denominará *zoomFeature()* y estará dentro del componente de clase *ButtonZoom()*. Este compomente devuelve un botón en cada fila de la tabla con un evento *onClick* que llama a nuestra función. ```javascript //TableList.js @@ -132,7 +130,7 @@ class ButtonZoom extends Component { ![04_button.png](img/04_button.png) -Vamos a definir los observadores/suscriptores de nuetro evento. En la aplicación será el compomente MapView que es donde podemos usar los métodos de Leaflet gracias al [uso de referencias en React como comentamos en el artículo anterior](http://www.sigdeletras.com/2020/side-project-4-react-y-leaflet-wfs/). La suscripción la hacemos dentro del cliclo de vida *componentDidMount()*. Es importante también eliminar la suscripción ya puede ocurrir fugas de memoria. Esto lo haremos con el método *component WillUnmount()* mediante *PubSub.unsubscribe*. +Vamos a definir los observadores/suscriptores de nuetro evento. En la aplicación será el compomente *MapView* que es donde podemos usar los métodos de Leaflet gracias al [uso de referencias en React como comentamos en el artículo anterior](http://www.sigdeletras.com/2020/side-project-4-react-y-leaflet-wfs/). La suscripción la hacemos dentro del cliclo de vida *componentDidMount()*. Es importante también eliminar la suscripción ya puede ocurrir fugas de memoria. Esto lo haremos con el método *component WillUnmount()* mediante *PubSub.unsubscribe*. ```javascript import React from "react"; @@ -161,10 +159,9 @@ export default class MapView extends React.Component { } ... ``` - ## GeoApp Final - +![04_sprint4.gif](/img/04_sprint4.gif) ## Resumen de tareas realizadas en el Sprint #3