Skip to content

Commit

Permalink
entrada y cambio de título
Browse files Browse the repository at this point in the history
  • Loading branch information
sigdeletras committed May 13, 2020
1 parent cfafa21 commit 4ec8439
Show file tree
Hide file tree
Showing 3 changed files with 16 additions and 18 deletions.
3 changes: 2 additions & 1 deletion geoapp/src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,8 @@ export default class App extends React.Component {
{/* Title */}
<div className="row m-3">
<div className="col-12">
<h1 className="text-center">GeoApp</h1>
<h2 className="text-center">GeoApp :: React</h2>
<h4 className="text-center">Sanitary Facilities (Cordoba, Spain)</h4>
</div>
</div>

Expand Down
Binary file added img/04_sprint4.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
31 changes: 14 additions & 17 deletions sprint.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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";
Expand Down Expand Up @@ -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
Expand Down

0 comments on commit 4ec8439

Please sign in to comment.