Rutas por Madrid

RutasPorMadrid es una publicación cuasi-semanal de rutas aleatorias visitando edificios y monumentos de la ciudad (https://blog.rutas-por-madrid.es)

A principios de este año (o así) estuve jugando un poco con librerías para trabajar con Mapas (sí, en javascript) y aunque feas, publiqué algunas aplicaciones.

Por ejemplo subí TocamelaMadrid, una aplicación que con base en una lista de canciones geo posicionadas que hablan de Madrid las muestra en un mapa creando áreas de Voronoy (áreas que cubren una superficie, usando los puntos como vertices. Yo tampoco sabía que se llamaban así)

También jugué un poco con la idea de hacerme un StoryMap: mostrar en una lista los lugares por donde había estado de vacaciones y que según hicieras scroll por ellos te fuera mostrando en el mapa donde estaban, incluso enseñando algún carrusel de fotos tomadas en ese sitio.

Trasteando con el tema descubrí que es todo un universo. Por ejemplo, existen muchas librerías JS, y probablemente la más conocida sea Leaflet, pero la librería solo manipula un mapa que tienes que "descargar" de algún lado, por ejemplo de OpenStreetMap, pero quieres añadirle capas y así sucesivamente.

También aprendí, por ejemplo, que existe un formato GeoJSON definido por el W3C donde puedes especificar elementos (lineas, puntos, polígonos, …​) geo posicionados, etc

Con todo este chapurreo de librerías e ideas se me ocurrió echar un ojo al OpenData del Ayuntamiento de Madrid, fuente de inspiración para muchas de mis tonterías y uno de ellos me dio la idea de RutasPorMadrid

El catálogo en cuestión es un dataset con edificios (luego descubrí que hay uno similar de monumentos) geo localizados, con descripciones y url a imágenes y se me encendió la bombilla: elegiría un punto aleatorio entre ellos y buscaría los N elementos más cercanos para crear una ruta.

El buscar los puntos más cercanos a una posición es algo que había hecho en algún otro proyecto ( el bot de las gasolineras por ejemplo, donde me mandas tu position y busco la más cercana, o el de las fuentes públicas) así que el algoritmo de ordenar, que sería lo más difícil, ya lo tenía. Todo lo demás sería mi buen saber hacer

En este punto sabía que técnicamente no iba a presentar ninguna dificultad (tampoco estoy mandando un satélite a la luna) así que lo que de verdad quería trabajar era el "formato de entrega"

En mi cabeza veía una ficha en PDF donde poner la descripción del punto de partida, una foto, un mapa estático con los puntos de la ruta así como el resto de la ruta (realmente en mi cabeza veía la plantilla de asciidoctor que usé para montar mi CV cambiando algunos elementos y a correr)

Para no complicarme mucho, lo enviaría como newsletter a gente que se suscribiera y así echaba un ojo al mundillo de las newsletter y que quería probar.

Obviamente, el crear el script que parsee los datos, elija un punto y cree la ruta me llevó 10 minutos, pero enmaquetar el PDF me llevó media vida, pero bueno, quien hace lo que puede no está obligado a más

El siguiente tema a pelear fue elegir una plataforma de newsletter. Soy consciente de que no esto no va a llegar a una masa de lectores que me haga decantarme por plataformas que hacen de todo. Tampoco tiene ningún tema comercial ni marketiniano así que MailChimp y similares las descarté. En realidad el requisito que le ponía a la plataforma es que dispusiera de un API tal que pudiera automatizar el envío al máximo (así que olvídate de Substack)

Al final me decanté por la más simple, TinyLetter con la cual simplemente mando un correo con lo que quiero publicar y cuando está listo me envían un correo de aviso. Simplemente respondiéndolo tal cual se envía la newsletter

Pero …​ para crear la cuenta me piden un correo electrónico (obvio) y hombre, no era cuestión de usar el mío, así que …​ efectivamente, registré el dominio rutas-por-madrid.es. Lo bueno es que era una oferta por unos pocos euros y encima con cuenta de correo incluida

Ya tenía "todo" cuando haciendo las primeras pruebas me enfrenté a la realidad de que una ficha pdf puede estar muy bien, pero el público quiere una página donde consultar toda la info más cómodamente. Así que me decidí por crear un static site con Hugo (JBake me parecía demasiado para algo tan sencillo como tenía en mente)

Así que bueno, más o menos todo automatizado desmenuzo las partes a continuación

Stack tecnológico

El stack es un batiburrillo de tecnologías. Uso Groovy para parsear y generar rutas, pero también uso JavaScript para los mapas. Uso Hugo, que es Go, para el blog y también uso Asciidoctor para generar el pdf. Y un poco de bash para concatenar llamadas

Para generar el mapa estático he usado un proyecto (https://github.com/flopp/go-staticmaps.git) que mediante comando de consola le puedes indicar todos los elementos y te crea un PNG

Para generar el pdf uso una utilidad de asciidoctor, asciidoctor-web-pdf

INFO

Iba a poner el código de los diferentes scripts pero como ya me está quedando aburrido el post y tampoco aportan nada, pongo mejor el enlace al final del articulo y quien quiera que lo vea allí

Choose

choose.groovy es un script que simplemente carga todos los elementos posibles, quita los que ya han sido elegidos y elige uno aleatorio de los restantes

El id elegido se guarda en un fichero current.txt y así es más fácil pasarselo al resto de procesos

Build

La etapa de build es la que construye los diferentes artefactos a desplegar:

Build Pdf

Construir el Pdf lee la ruta elegida anteriormente, y usando un template construye el fichero asciidoctor que espera asciidoctor-web-pdf

Build Blog

Usando la misma técnica que en el Pdf creo una entrada markdown de Hugo

Build Map

Lo mismo para el mapa. Usando una plantilla genero un HTML con el mapa de la ruta. He intentando hacerlo ameno y que los elementos de la ruta vayan apareciendo poco a poco pero creo que no tengo dotes para el front

Build Letter

Así mismo preparo un html formateado para ser enviado por correo electrónico. Como TimyLetter no deja muchas florituras, el html es muy espartano

Build Telegram

Por último un groovy script crea otro groovy script personalizado con la ruta listo para postear en Telegram

Deploy

El proceso de deploy es simplemente copiar los elementos del blog, como el markdown o el html con el mapa y ejecutar Hugo para que cree el static site

Publish

Publish por su parte es subir el contenido al repositorio web (un rsync a una carpeta que tengo en DreamHost pero podria ser a un Netlify o similar)

Notify

En realidad, este no existe todavia y es el paso más manual que tengo.

Un script envia el html a TinyLetter y a la vez que confirmo que se publique, ejecuto el script que postea en Telegram

Repo

Todo el codigo así como el contenido del blog puedes consultarlo en https://gitlab.com/jorge-aguilera/rutas-por-madrid