Jorge Aguilera Open source Open mind 2026-06-11T08:37:31Z tag:blog.jagedn.dev,2026:06 FediPhoto III Jorge Aguilera 2026-06-11T00:00:00Z https://blog.jagedn.dev/blog/2026/fediphoto-iii.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>En esta serie de artículos voy a explicar cómo funciona "FediPhoto", una aplicación Java hecha desde cero y (casi) sin dependencias que se integra en el Fediverso, a.k.a. Mastodon usando el protocolo ActivityPub</p> </div> <div class="paragraph"> <p>En este tercer post vamos a centrarnos en implementar un endpoint que permita a cualquier instancia del fediverso conocer los detalles de los usuarios de la nuestra</p> </div> <div class="ulist"> <ul> <li> <p>Parte 1: Introducción <a href="fediphoto-i.html" class="bare">fediphoto-i.html</a></p> </li> <li> <p>Parte 2: Business <a href="fediphoto-ii.html" class="bare">fediphoto-ii.html</a></p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="fediphoto_core">FediPhoto Core</h2> <div class="sectionbody"> <div class="paragraph"> <p>Como ya vimos en el anterior post, FediPhoto no usa ninguna base de datos y simplemente usa las carpetas que se creen manualmente a partir de una carpeta configurada como root. Cada carpeta representa el nombre de un usuario y al arrancar la aplicación comprueba si el usuario tiene un par de claves generadas</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Esta aplicación es un ejemplo y NO se deberían dejar las claves de forma tan accesible</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="webfinger">Webfinger</h2> <div class="sectionbody"> <div class="literalblock"> <div class="content"> <pre>"WebFinger es un protocolo especificado por el IETF para el descubrimiento de información sobre personas y entes. La información puede ser descubierta por medio de un URI "acct:", que es un URI similar a una dirección de correo electrónico." https://es.wikipedia.org/wiki/WebFinger</pre> </div> </div> <div class="paragraph"> <p>Básicamente es un endpoint HTTP que devuelve un json con un formato específico sobre el usuario "acct" sobre el que se consulta</p> </div> </div> </div> <div class="sect1"> <h2 id="webfingercontroller">WebfingerController</h2> <div class="sectionbody"> <div class="paragraph"> <p>Como FediPhoto es una aplicación super simple implementa Webfinger en un simple Controller</p> </div> <div class="listingblock"> <div class="title">src/main/java/com/incsteps/fediphoto/activitypub/WebfingerController.java</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="java">@Controller("/.well-known/webfinger") public class WebfingerController { private final String domain; private final UsersRepository usersRepository; public WebfingerController(@Value("${fediphoto.domain}") String domain, UsersRepository usersRepository) { this.domain = domain; this.usersRepository = usersRepository; } @Get public HttpResponse&lt;?&gt; webfinger(@QueryValue("resource") String resource) { if (resource == null || !resource.startsWith("acct:")) { return HttpResponse.badRequest(); } String username = resource.replace("acct:", "").split("@")[0]; var user = usersRepository.getUser(username); if (user == null) { return HttpResponse.notFound(); } var selfLink = new WebfingerLink( "self", "application/activity+json", "https://" + domain + "/users/" + username ); return HttpResponse.ok(new WebfingerResponse( resource, List.of(selfLink) )); } }</code></pre> </div> </div> <div class="paragraph"> <p>Usamos un par de DTO <code>WebfingerResponse</code> y <code>WebfingerLink</code> para que Micronaut lo renderize como JSON</p> </div> <div class="listingblock"> <div class="title">src/main/java/com/incsteps/fediphoto/activitypub/model/WebfingerLink.java</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="java">@Serdeable public record WebfingerLink( String rel, String type, String href ) {}</code></pre> </div> </div> <div class="listingblock"> <div class="title">src/main/java/com/incsteps/fediphoto/activitypub/model/WebfingerResponse.java</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="java">@Serdeable public record WebfingerResponse( String subject, List&lt;WebfingerLink&gt; links) { }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="ejemplo">Ejemplo</h2> <div class="sectionbody"> <div class="paragraph"> <p>Así si nuestra instancia tien un usuario <code>demo</code> (representado como una carpeta "demo" bajo la carpeta definida como raiz) podremos consultar los detalles del usuario:</p> </div> <div class="paragraph"> <p><code><a href="https://fediphoto.jagedn.dev/.well-known/webfinger?resource=acct:demo@fediphoto.jagedn.dev" class="bare">https://fediphoto.jagedn.dev/.well-known/webfinger?resource=acct:demo@fediphoto.jagedn.dev</a></code></p> </div> <div class="paragraph"> <p>obtendremos un JSON similar a:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>{ "subject": "acct:demo@fediphoto.jagedn.dev", "links": [ { "rel": "self", "type": "application/activity+json", "href": "https://fediphoto.jagedn.dev/users/demo" } ] }</code></pre> </div> </div> <div class="paragraph"> <p>Como puedes observar "links" es un array de enlaces, cada uno con un "type". Las instancias que quieren consultar información sobre nuestros usuarios filtrarán buscando el "type" "application/activity+json" y de ahí obtendrán la URL del usuario</p> </div> </div> </div> <div class="sect1"> <h2 id="userscontroller">UsersController</h2> <div class="sectionbody"> <div class="paragraph"> <p>Por último nos toca implementar un controller que devuelve la información específica del usuario.</p> </div> <div class="paragraph"> <p>El controller en este caso es tan simple como buscar el usuario que se solicita en la url en nuestra "base de datos" y devolver un "Actor" con los detalles del usuario, como el nombre, la URL a su inbox y su clave pública:</p> </div> <div class="listingblock"> <div class="title">src/main/java/com/incsteps/fediphoto/activitypub/UsersController.java</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="java">@Controller("/users") public class UsersController { private final String domain; private final UsersRepository usersRepository; public UsersController(@Value("${fediphoto.domain}") String domain, UsersRepository usersRepository) { this.domain = domain; this.usersRepository = usersRepository; } @Get(value = "/{username}", produces = "application/activity+json") public HttpResponse&lt;?&gt; getActor(String username) { var user = usersRepository.getUser(username); if (user == null) { return HttpResponse.notFound(); } var publicKeyRecord = new PublicKeyRecord( "https://" + domain + "/users/" + username + "#main-key", "https://" + domain + "/users/" + username, user.pubKey() ); var actor = new Actor( "https://www.w3.org/ns/activitystreams", "Person", "https://" + domain + "/users/" + username, username, "https://" + domain + "/users/" + username + "/inbox", "https://" + domain + "/users/" + username + "/outbox", publicKeyRecord); return HttpResponse.ok(actor); } }</code></pre> </div> </div> <div class="paragraph"> <p><code>Actor</code> y <code>PublicKeyRecord</code> son a su vez dos DTO que nos sirven para que Micronaut renderize el JSON correcto</p> </div> <div class="listingblock"> <div class="title">src/main/java/com/incsteps/fediphoto/activitypub/model/PublicKeyRecord.java</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="java">@Serdeable public record PublicKeyRecord( String id, String owner, String publicKeyPem ) {}</code></pre> </div> </div> <div class="listingblock"> <div class="title">src/main/java/com/incsteps/fediphoto/activitypub/model/Actor.java</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="java">@Serdeable public record Actor( @JsonProperty("@context") Object context, // Puede ser String o List String type, String id, String preferredUsername, String inbox, String outbox, PublicKeyRecord publicKey ) {}</code></pre> </div> </div> <div class="paragraph"> <p>Simplemente, remarcar que el atributo "context" debe renderizarse como "@context" y por eso usamos JsonProperty</p> </div> </div> </div> <div class="sect1"> <h2 id="ejemplo_2">Ejemplo</h2> <div class="sectionbody"> <div class="paragraph"> <p>Así nuestra aplicación es capaz de proporcionar información al exterior y devolvería algo como:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>{ "@context": "https://www.w3.org/ns/activitystreams", "type": "Person", "id": "https://fediphoto.jagedn.dev/users/demo", "preferredUsername": "demo", "inbox": "https://fediphoto.jagedn.dev/users/demo/inbox", "outbox": "https://fediphoto.jagedn.dev/users/demo/outbox", "publicKey": { "id": "https://fediphoto.jagedn.dev/users/demo#main-key", "owner": "https://fediphoto.jagedn.dev/users/demo", "publicKeyPem": "-----BEGIN PUBLIC KEY-----\nMIIBIjANBgkqh...ePIOfL7ZLOR\n/QIDAQAB\n-----END PUBLIC KEY-----" } }</code></pre> </div> </div> <div class="paragraph"> <p>Con esta información "mínima" una instancia remota puede por un lado mostrar el perfil del usuario "demo" así como tener la información necesaria para interactuar con él (a través del endpoint "inbox") y validar los mensajes que este usuario emita (validando la firma usando la publicKeyPem)</p> </div> </div> </div> FediPhoto: una aplicación java de ejemplo para el fediverso FediPhoto II Jorge Aguilera 2026-06-10T00:00:00Z https://blog.jagedn.dev/blog/2026/fediphoto-ii.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>En esta serie de artículos voy a explicar cómo funciona "FediPhoto", una aplicación Java hecha desde cero y (casi) sin dependencias que se integra en el Fediverso, a.k.a. Mastodon usando el protocolo ActivityPub</p> </div> <div class="paragraph"> <p>En este segundo post vamos a centrarnos en la parte "pura" de la aplicación sin llegar a entrar en las funcionalidades de ActivityPub para poder tener un "producto" sobre el que trabajar</p> </div> <div class="ulist"> <ul> <li> <p>Parte 1: Introducción <a href="fediphoto-i.html" class="bare">fediphoto-i.html</a></p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="fediphoto_core">FediPhoto Core</h2> <div class="sectionbody"> <div class="paragraph"> <p>Como ya vimos en el anterior post, FediPhoto no usa ninguna base de datos y simplemente usa las carpetas que se creen manualmente a partir de una carpeta configurada como root. Cada carpeta representa el nombre de un usuario y al arrancar la aplicación comprueba si el usuario tiene un par de claves generadas</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Esta aplicación es un ejemplo y NO se deberían dejar las claves de forma tan accesible</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="repository">Repository</h2> <div class="sectionbody"> <div class="paragraph"> <p>Siguiendo las buenas prácticas, aunque la aplicación no use una base de datos vamos a crear un User y un UserRepository que nos sirvan para abstraer la funcionalidad</p> </div> <div class="listingblock"> <div class="title">src/main/java/com/incsteps/fediphoto/data/User.java</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="java">package com.incsteps.fediphoto.data; public record User( String username, String pubKey, String privKey) { }</code></pre> </div> </div> <div class="listingblock"> <div class="title">src/main/java/com/incsteps/fediphoto/data/UsersRepository.java</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="java">package com.incsteps.fediphoto.data; import java.util.List; public interface UsersRepository { List&lt;User&gt; getUsers(); User getUser(String username); void setKey(String username, String publicKey, String privateKey); void addFollower(User user, String followerUrl); void removeFollower(User user, String followerUrl); List&lt;String&gt; getFollowerUrls(String username); }</code></pre> </div> </div> <div class="paragraph"> <p>y la implementación basada en fichero</p> </div> <div class="listingblock"> <div class="title">src/main/java/com/incsteps/fediphoto/data/file/FileUsersRepository.java</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="java">@Singleton public class FileUsersRepository implements UsersRepository { private final String usersDir; public FileUsersRepository(@Value("${fediphoto.users}") String usersDir) throws IOException { this.usersDir = usersDir; Files.createDirectories(Path.of(usersDir)); } public List&lt;User&gt; getUsers() { return Arrays.stream( Objects.requireNonNull(new File(this.usersDir).listFiles(File::isDirectory)) ) .map(this::fromDir) .toList(); } @Override public User getUser(String username) { var dir = new File(this.usersDir, username); if(!dir.exists()) return null; return fromDir(dir); } @Override public void setKey(String username, String publicKey, String privateKey) { saveFile(username, "public.key", publicKey); saveFile(username, "private.key", privateKey); } @Override public synchronized void addFollower(User user, String followerUrl) { var followers = readFile(user.username(), "followers.txt"); if( followers == null) followers = ""; followers += followerUrl+"\n"; saveFile(user.username(), "followers.txt", followers+"\n"); } @Override public synchronized void removeFollower(User user, String followerUrl) { var followers = readFile(user.username(), "followers.txt"); if( followers == null) followers = ""; var list = Arrays.stream(followers.split("\n")).filter(f -&gt; !f.equals(followerUrl)).toList(); saveFile(user.username(), "followers.txt", String.join("\n", list)); } @Override public List&lt;String&gt; getFollowerUrls(String username) { var user = getUser(username); if( user == null) return List.of(); var followers = readFile(user.username(), "followers.txt"); return List.of(followers.split("\n")); } private User fromDir(File dir) { var publicKey = getPublicKey(dir.getName()); var privKey = getPrivateKey(dir.getName()); return new User(dir.getName(), publicKey, privKey); } protected String getPublicKey(String username) { return readFile(username, "public.key"); } protected String getPrivateKey(String username) { return readFile(username, "private.key"); } protected String readFile(String username, String fileName) { var file = new File(usersDir+File.separator+username, fileName); if (!file.exists()) { return null; } try { return String.join("\n", Files.readAllLines(file.toPath())); } catch (IOException e) { throw new RuntimeException(e); } } protected void saveFile(String username, String fileName, String content) { var file = new File(usersDir+File.separator+username, fileName); try { Files.write(file.toPath(), content.getBytes()); } catch (IOException e) { throw new RuntimeException(e); } } }</code></pre> </div> </div> <div class="paragraph"> <p>Como se puede ver el repository usa una carpeta root y para cada usuario maneja un fichero de texto <code>followers.txt</code> y un par <code>public.key</code> <code>private.key</code></p> </div> </div> </div> <div class="sect1"> <h2 id="crypt">Crypt</h2> <div class="sectionbody"> <div class="paragraph"> <p>Para generar las claves de un usuario vamos a usar un Singleton sencillo:</p> </div> <div class="listingblock"> <div class="title">src/main/java/com/incsteps/fediphoto/crypt/CryptService.java</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="java">@Singleton public class CryptService implements ApplicationEventListener&lt;StartupEvent&gt; { private final UsersRepository usersRepository; public CryptService(UsersRepository usersRepository) { this.usersRepository = usersRepository; } @Override public void onApplicationEvent(StartupEvent event) { for(var user : usersRepository.getUsers()){ if( user.privKey()==null || user.pubKey()==null){ var keys = generateUserKeyPair(); usersRepository.setKey(user.username(), keys[0], keys[1]); }; } } private String[] generateUserKeyPair() { try { KeyPairGenerator kpg = KeyPairGenerator.getInstance("RSA"); kpg.initialize(2048); KeyPair kp = kpg.generateKeyPair(); String[] result = new String[2]; result[0] = formatKey(kp.getPublic().getEncoded(), "PUBLIC"); result[1] = formatKey(kp.getPrivate().getEncoded(), "PRIVATE"); return result; } catch (NoSuchAlgorithmException e) { throw new RuntimeException("Error: No se encontró el algoritmo RSA", e); } } private String formatKey(byte[] encoded, String type) { String base64 = Base64.getMimeEncoder(64, new byte[]{'\n'}).encodeToString(encoded); return String.format("-----BEGIN %s KEY-----\n%s\n-----END %s KEY-----", type, base64, type); } }</code></pre> </div> </div> <div class="paragraph"> <p>Es un singleton que al levantar la aplicación busca los usuarios y genera un par de claves para los que no las tengan creadas todavia</p> </div> <div class="paragraph"> <p>Usa clases incluídas en el JDK estándar para crear claves RSA</p> </div> </div> </div> <div class="sect1"> <h2 id="business">Business</h2> <div class="sectionbody"> <div class="paragraph"> <p>La lógica de negocio del aplicativo es bien simple. Escanea cada X segundos las carpetas de los usuarios y si existe alguna foto nueva publicará una "activity" en la red del usuario (una notificación a cada follower)</p> </div> <div class="listingblock"> <div class="title">src/main/java/com/incsteps/fediphoto/business/ImageService.java</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="java">@Singleton public class ImageService { private static final Logger LOG = LoggerFactory.getLogger(ImageService.class); private final String usersDir; private final UsersRepository usersRepository; private final FederationService federationService; ImageService(@Value("${fediphoto.users}") String usersDir, FederationService federationService, UsersRepository usersRepository) { this.usersDir = usersDir; this.usersRepository = usersRepository; this.federationService = federationService; } @Scheduled(fixedDelay = "30s") void scanForImages() { for (var user : usersRepository.getUsers()) { scanForUserImages(user); } } void scanForUserImages(User user) { File inputDir = new File(usersDir+File.separator+user.username(), "input"); if (!inputDir.exists()) inputDir.mkdirs(); File[] files = inputDir.listFiles((dir, name) -&gt; name.toLowerCase().endsWith(".png") || name.toLowerCase().endsWith(".jpg")); if (files != null) { for (File file : files) { publishAndProcess(user.username(), file); } } } private void publishAndProcess(String username, File file) { try { LOG.info("Imagen detectada: {}", file.getName()); File processedDir = new File(usersDir+File.separator+username, "processed"); if (!processedDir.exists()) processedDir.mkdirs(); String now = new SimpleDateFormat("yyyyMMdd-HHmmss").format(new Date()); File dest = new File(processedDir + "/" + now + ".png"); Files.move(file.toPath(), dest.toPath(), StandardCopyOption.REPLACE_EXISTING); publishToFediverse(username, dest); LOG.info("Imagen procesada y movida a: {}", dest.getPath()); } catch (Exception e) { LOG.error("Error procesando {}", file.getName(), e); } } private void publishToFediverse(String username, File file) { federationService.sendNewPhoto(username, file.getName()); } public byte[]getImage(String username, String image) throws IOException { File processedDir = new File(usersDir+File.separator+username, "processed"); if (!processedDir.exists()) processedDir.mkdirs(); File dest = new File(processedDir + "/" + image); if( !dest.exists()){ return null; } return Files.readAllBytes(dest.toPath()); } }</code></pre> </div> </div> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>El servicio tiene una dependencia con FederationService que aún no hemos visto</p> </dd> </dl> </div> <div class="paragraph"> <p>Como se puede ver el servicio es super sencillo y lo único que hace es para cada imagen encontrada la mueve de "input" a "processed" para poder ser vista via navegador.</p> </div> <div class="paragraph"> <p>Una vez ejecutado la "lógica de negocio" se invoca al federationService para que notifique a los followers</p> </div> </div> </div> <div class="sect1"> <h2 id="controller">Controller</h2> <div class="sectionbody"> <div class="paragraph"> <p>Para que un usuario externo pueda ver las imagenes de los usuarios del aplicativo vamos a crear un Controller</p> </div> <div class="listingblock"> <div class="title">src/main/java/com/incsteps/fediphoto/business/ImageController.java</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="java">@Controller("/images") public class ImageController { private final ImageService imageService; public ImageController(ImageService imageService) { this.imageService = imageService; } @Get("{username}/{image}") @Produces(MediaType.IMAGE_PNG) public HttpResponse&lt;?&gt; getImage(String username, String image) { try{ var bytes = imageService.getImage(username,image); return HttpResponse.ok(bytes); }catch (Exception e){ return HttpResponse.notFound(); } } }</code></pre> </div> </div> <div class="paragraph"> <p>En una aplicación más completa el UI será más complejo, a lo mejor una aplicación cliente javascript llamando a un API Rest, o usando Views de Micronaut crear un interface completo</p> </div> <div class="paragraph"> <p>En nuestro caso el UI es simplemente un endpoint que recibe un Http Get "/{username}{id}" para buscar la foto a mostrar</p> </div> </div> </div> FediPhoto: una aplicación java de ejemplo para el fediverso FediPhoto I Jorge Aguilera 2026-06-09T00:00:00Z https://blog.jagedn.dev/blog/2026/fediphoto-i.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>En esta serie de artículos voy a explicar cómo funciona "FediPhoto", una aplicación Java hecha desde cero y (casi) sin dependencias que se integra en el Fediverso, a.k.a. Mastodon usando el protocolo ActivityPub</p> </div> </div> </div> <div class="sect1"> <h2 id="fediverso">Fediverso</h2> <div class="sectionbody"> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>Esto es un resumen muy particular</p> </dd> </dl> </div> <div class="paragraph"> <p>El llamado Fediverso es un conjunto de aplicaciones distribuidas que "hablan" un mismo protocolo abierto. Estas aplicaciones, en el 99%, se orientan a formar redes sociales donde un usuario con cuenta en una de ellas puede interactuar con usuarios en otras aplicaciones</p> </div> <div class="paragraph"> <p>Los casos de aplicaciones más conocidas en el fediverso pueden ser Mastodon, una aplicación de microblogging tipo Twitter (paso de llamarle X) o Peertube una aplicación orientada a la publicación de vídeos similar a Youtube</p> </div> <div class="paragraph"> <p>Como estas aplicaciones usan el protocolo ActivityPub pueden dialogar entre sí de tal forma que un usuario de una de ellas puede seguir a un usuario en la otra y ver en su timeline la actividad de este</p> </div> </div> </div> <div class="sect1"> <h2 id="activitypub">ActivityPub</h2> <div class="sectionbody"> <div class="paragraph"> <p>El protocolo ActivityPub, implementado por estas aplicaciones, es el que especifica el qué y el cómo tienen que enviarse actividades las aplicaciones para los usuarios de cada una pueda interactuar con las de otras. Todo ello de forma abierta y siguiendo las especificaciones del W3C</p> </div> <div class="paragraph"> <p>Dicho de forma burda, el protocolo especifica de qué forma un usuario en una instancia Mastodon, por ejemplo, puede obtener información sobre otro usuario en otra instancia, tanto Mastodon como Peertube por ejemplo, y cómo estos dos servidores (en nombre de esos usuarios) se intercambian "actividades" de sus usuarios</p> </div> <div class="paragraph"> <p>ActivityPub se basa en conceptos muy simples:</p> </div> <div class="ulist"> <ul> <li> <p>sólo especifica la publicación de actividades. NO en cómo transmitir o visualizar el resultado de esta actividad</p> </li> <li> <p>las partes de una activity son: un actor, un objeto y una acción o verbo</p> </li> <li> <p>el descubrimiento de usuarios usa la spec Webfinger (la veremos en otro post)</p> </li> <li> <p>los mensajes de un usuario entre instancia van firmados con las claves publico-privadas de ese usuario</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="fediphoto">FediPhoto</h2> <div class="sectionbody"> <div class="paragraph"> <p>En esa serie vamos a ir viendo cómo desarrollar una aplicación super-super-super-simple en Java que se integre en el Fediverso, de tal forma que cualquier usuario podrá:</p> </div> <div class="ulist"> <ul> <li> <p>descubrir los detalles de un usuario de esta instancia</p> </li> <li> <p>seguir (y abandonar) a este usuario</p> </li> <li> <p>recibir una activity en su timeline cuando el usuario publica una foto</p> </li> </ul> </div> <div class="paragraph"> <p>Por su parte, el usuario "propietario" de la instancia podrá simplemente publicar fotos copiándola en un directorio "input" y el sistema se encargará de notificar que hay una nueva foto a sus followers de forma automática</p> </div> </div> </div> <div class="sect1"> <h2 id="stack">Stack</h2> <div class="sectionbody"> <div class="paragraph"> <p>Mi framework favorito de Java es de hace unos años Micronaut por lo que lo usaremos para llegar a construir un binario Linux mediante GraalVM</p> </div> <div class="paragraph"> <p>Así mismo mi build tool preferida es Gradle (por encima de Maven). En principio sería fácil usar Maven simplemente teniendo en cuenta los puntos que detallaré a continuación</p> </div> <div class="paragraph"> <p>La aplicación es super sencilla por lo que no usará ni base de datos, sólo carpetas y ficheros locales.</p> </div> <div class="paragraph"> <p>Tampoco tendrá un interface web.</p> </div> <div class="paragraph"> <p>Para comenzar usaremos el starter kit que ofrece Micronaut y crearemos un proyecto simple sin ninguna "feature" especial</p> </div> <div class="paragraph"> <p>Una vez descomprimido el zip en una carpeta de trabajo, revisaremos el build.gradle prestando atención a estas partes:</p> </div> <div class="listingblock"> <div class="title">build.gradle</div> <div class="content"> <pre class="prettyprint highlight"><code>dependencies { annotationProcessor("io.micronaut:micronaut-http-validation") annotationProcessor("io.micronaut.openapi:micronaut-openapi") annotationProcessor("io.micronaut.openapi:micronaut-openapi-adoc") annotationProcessor("io.micronaut.serde:micronaut-serde-processor") implementation("io.micronaut.serde:micronaut-serde-jackson") implementation("io.micronaut:micronaut-http-client") compileOnly("io.micronaut.openapi:micronaut-openapi-annotations") runtimeOnly("ch.qos.logback:logback-classic") testImplementation("io.micronaut:micronaut-http-client") implementation("org.tomitribe:tomitribe-http-signatures:1.1") }</code></pre> </div> </div> <div class="paragraph"> <p>Incluiremos la ultima dependencia para que nos facilite la parte de generar la firma http, por lo demás como se puede ver las dependencias son mínimas.</p> </div> <div class="paragraph"> <p>Para poder interactuar e incluso depurar la aplicación en desarrollo tenemos que poder acceder desde "fuera" y además vía SSL. Yo uso ngrok que me crea un túnel entre mi máquina e internet</p> </div> <div class="listingblock"> <div class="title">application.properties</div> <div class="content"> <pre class="prettyprint highlight"><code>fediphoto.domain=tu-dns.ngrok-free.app fediphoto.users=data/users</code></pre> </div> </div> <div class="paragraph"> <p>En domain tienes que poner el dns que te haya asignado Ngrok o el proxy que uses</p> </div> </div> </div> <div class="sect1"> <h2 id="próximos_pasos">Próximos pasos</h2> <div class="sectionbody"> <div class="paragraph"> <p>En los siguientes artículos veremos:</p> </div> <div class="ulist"> <ul> <li> <p>el core, que inspecciona automaticamente las carpetas de usuarios y crea las claves publico/privada para cada uno, así como las carpetas de cada uno para detectar si hay que publicar una foto</p> </li> <li> <p>el descubrimiento de usuarios</p> </li> <li> <p>el Inbox/Outbox de usuarios</p> </li> <li> <p>Recibiendo un Follow por usuario y guardándola</p> </li> <li> <p>Enviando una notificación a los followers</p> </li> </ul> </div> </div> </div> FediPhoto: una aplicación java de ejemplo para el fediverso K3s Networking: Solving the Source IP SNAT Issue Jorge Aguilera 2026-05-11T00:00:00Z https://blog.jagedn.dev/blog/2026/k3s-real-ip.html <div id="preamble"> <div class="sectionbody"> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>This article was written entirely by Google Gemini and supervised by a human to ensure technical accuracy and real-world applicability. It serves as a testament to how AI can assist developers in documenting complex infrastructure challenges and sharing solutions with the global community.</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="issue">Issue</h2> <div class="sectionbody"> <div class="paragraph"> <p>When transitioning a K3s cluster from a combined 'all-in-one' node to a dedicated Control Plane and Agent architecture, many developers encounter a frustrating hurdle: the loss of the client&#8217;s original source IP address. Suddenly, every request to your backend appears to originate from the cluster’s internal node IP, breaking geolocation, rate-limiting, and logging.</p> </div> <div class="paragraph"> <p>This post explores why Kubernetes' default networking behavior (SNAT) masks the source IP during inter-node hops and provides a step-by-step guide to fixing it. We’ll dive into configuring Traefik as a DaemonSet, leveraging hostNetwork mode, and adjusting externalTrafficPolicy to ensure your application sees the real user behind the request, not just the cluster&#8217;s internal proxy."</p> </div> </div> </div> <div class="sect1"> <h2 id="the_problem_the_mysterious_node_ip">The Problem: The "Mysterious" Node IP</h2> <div class="sectionbody"> <div class="paragraph"> <p>Everything was working perfectly. My K3s cluster was a single-node powerhouse where the Control Plane and Agent roles lived together. My Node.js backend accurately logged client IPs using X-Forwarded-For.</p> </div> <div class="paragraph"> <p>Then, I decided to grow. I separated the roles: one dedicated Control Plane and one Agent node.</p> </div> <div class="paragraph"> <p>Immediately, my logs broke. Instead of seeing the real user&#8217;s IP, every single request appeared to come from the internal IP of the Control Plane node. If you’ve ever tried to implement rate-limiting or geolocation, you know this is a nightmare.</p> </div> </div> </div> <div class="sect1"> <h2 id="why_did_the_ip_disappear">Why did the IP disappear?</h2> <div class="sectionbody"> <div class="paragraph"> <p>In a standard Kubernetes setup, when traffic hits a node that doesn&#8217;t host the destination Pod, the cluster uses Source Network Address Translation (SNAT) to route the packet to the correct node.</p> </div> <div class="paragraph"> <p>When my setup was a single node, the traffic hit the node and stayed there. No hops, no SNAT. Once I moved the Pod to a separate Agent node, the Control Plane had to "forward" the traffic. To ensure the response could find its way back, the Control Plane replaced the Client&#8217;s IP with its own.</p> </div> </div> </div> <div class="sect1"> <h2 id="the_solution_bringing_traefik_to_the_edge">The Solution: Bringing Traefik to the Edge</h2> <div class="sectionbody"> <div class="paragraph"> <p>To fix this, we need to ensure that the entry point (Traefik) is present on every node and that it talks directly to the host&#8217;s network.</p> </div> <div class="sect2"> <h3 id="transform_traefik_into_a_daemonset">Transform Traefik into a DaemonSet</h3> <div class="paragraph"> <p>By default, K3s installs Traefik as a Deployment. This means it might only run on one node. If traffic hits Node A but Traefik is on Node B, you get SNAT.</p> </div> <div class="paragraph"> <p>By changing it to a DaemonSet, we ensure a Traefik instance runs on every single node, including your Control Plane.</p> </div> </div> <div class="sect2"> <h3 id="bypass_the_nat_with_hostnetwork">Bypass the NAT with HostNetwork</h3> <div class="paragraph"> <p>We want Traefik to listen directly on the host&#8217;s ports (80 and 443) rather than through the Kubernetes virtual networking proxy. This allows Traefik to see the "wire" IP of the packet before Kubernetes touches it.</p> </div> </div> <div class="sect2"> <h3 id="set_the_local_traffic_policy">Set the Local Traffic Policy</h3> <div class="paragraph"> <p>We need to tell the Service to only route traffic to pods on the same node that received the request. This preserves the source IP because it eliminates the inter-node hop.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="the_configuration">The Configuration</h2> <div class="sectionbody"> <div class="paragraph"> <p>In K3s, the cleanest way to apply this is by creating a HelmChartConfig. Edit (or create) the following file on your Control Plane:</p> </div> <div class="listingblock"> <div class="title">/var/lib/rancher/k3s/server/manifests/traefik.yaml</div> <div class="content"> <pre class="prettyprint highlight"><code>apiVersion: helm.cattle.io/v1 kind: HelmChartConfig metadata: name: traefik namespace: kube-system spec: valuesContent: |- deployment: kind: DaemonSet <i class="conum" data-value="1"></i><b>(1)</b> hostNetwork: true <i class="conum" data-value="2"></i><b>(2)</b> service: spec: externalTrafficPolicy: Local <i class="conum" data-value="3"></i><b>(3)</b> additionalArguments: - "--entryPoints.web.forwardedHeaders.insecure=true" <i class="conum" data-value="4"></i><b>(4)</b> - "--entryPoints.websecure.forwardedHeaders.insecure=true"</code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>Runs Traefik on every node.</td> </tr> <tr> <td><i class="conum" data-value="2"></i><b>2</b></td> <td>Binds Traefik directly to the host&#8217;s network interface.</td> </tr> <tr> <td><i class="conum" data-value="3"></i><b>3</b></td> <td>Forces the packet to stay within the node, preserving the IP.</td> </tr> <tr> <td><i class="conum" data-value="4"></i><b>4</b></td> <td>Not sure if required but&#8230;&#8203;</td> </tr> </table> </div> <div class="paragraph"> <p><strong>Once edited and saved K3S redeploy Traefik automagically in all nodes</strong></p> </div> </div> </div> <div class="sect1"> <h2 id="conclusion">Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>Separating your Control Plane and Agents is a great step for cluster stability, but it changes the rules of the game for networking.</p> </div> <div class="paragraph"> <p>By moving Traefik to a DaemonSet and using HostNetwork, you remove the middleman that&#8217;s masking your data.</p> </div> <div class="paragraph"> <p>Now, my logs are back to normal, and I can see where my users are actually coming from.</p> </div> <div class="paragraph"> <p>Happy hacking!</p> </div> </div> </div> Obtaining the remote IP in a cluster with K3s y Traefik Auto alojando Writefreely Jorge Aguilera 2026-05-05T00:00:00Z https://blog.jagedn.dev/blog/2026/writefreely.html <div class="sect1"> <h2 id="writefreely">Writefreely</h2> <div class="sectionbody"> <div class="paragraph"> <p>"An open source platform for building a writing space on the web."</p> </div> <div class="paragraph"> <p>Básicamente, Writefreely es una aplicación muy ligera (y superminimalista) para escribir un blog en Internet.</p> </div> <div class="paragraph"> <p><em> Cuando digo super minimalista no exagero. No subes fotos, no creas tablas, ni layouts, ni nada parecido, sólo escribes texto y publicas</em></p> </div> <div class="paragraph"> <p>Al ser open source cualquiera puede descargarla e instalarla para tener su propio blog aunque también existe la posibilidad de crear una cuenta en cualquiera de las instancias existentes y no complicarse la vida.</p> </div> <div class="paragraph"> <p>La diferencia es obvia: si la alojas tú mismo puedes usar tu propio dominio (random.jagedn.dev, yo.es, &#8230;&#8203;) , mientras que si usas la oficial tu blog será algo como nombredelainstancia.com/usuario</p> </div> </div> </div> <div class="sect1"> <h2 id="requisitos">Requisitos</h2> <div class="sectionbody"> <div class="paragraph"> <p>En este post vamos a ver cómo alojar Writefreely en nuestra propia instancia. Para ello necesitamos:</p> </div> <div class="ulist"> <ul> <li> <p>una máquina donde alojarla. Lo más fácil es contratar una por 4€ al mes en cualquier proveedor (Yo uso Hostinger y va como un tiro). Seguramente te sobrará máquina pero suele ser lo mínimo que se despacha</p> </li> <li> <p>el nombre de un dominio, el mío por ejemplo es "jagedn.dev". Dependiendo del dominio y donde lo registres el precio varía pero puedes conseguir un .com por unos 10€ al año</p> </li> <li> <p>acceso a la máquina. Yo uso la consola con SSH pero muchos proveedores te permiten acceder vía navegador</p> </li> <li> <p>docker. NO es necesario pero para mí es un imprescindible porque me permite instalar, desinstalar, actualizar&#8230;&#8203; todo tipo de aplicaciones de una forma sencilla</p> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Esta guía instala Writefreely en el stack de aplicaciones que tengo (ver otros posts como "Self-hosting multiples blogs" o "Self-hosting Snikket and GoToSocial behind Caddy") de tal forma que en un mismo VPS ejecuto diferentes aplicaciones</p> </dd> </dl> </div> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="preparación">Preparación</h2> <div class="sectionbody"> <div class="paragraph"> <p>Definimos (y creamos) un directorio donde va a residir nuestra aplicación, por ejemplo /blog</p> </div> <div class="paragraph"> <p>En este directorio crearemos los siguientes ficheros:</p> </div> <div class="listingblock"> <div class="title">docker-compose.yml</div> <div class="content"> <pre class="prettyprint highlight"><code>services: caddy: image: caddy:2.11.1-alpine container_name: caddy restart: always ports: - "80:80" - "443:443" volumes: - ./Caddyfile:/etc/caddy/Caddyfile - ./caddy_data:/data - ./caddy_config:/config - ./acme_challenges:/var/www/challenges db: image: mariadb:latest container_name: db init: true volumes: - ./db_data:/var/lib/mysql env_file: - .env_write restart: unless-stopped writefreely: build: context: ./writefreely dockerfile: Dockerfile.prod image: writefreely-local-prod:latest container_name: writefreely-app depends_on: - db volumes: - ./app_data:/data restart: unless-stopped</code></pre> </div> </div> <div class="listingblock"> <div class="title">Caddy</div> <div class="content"> <pre class="prettyprint highlight"><code>... Otros dominios random.jagedn.dev { <i class="conum" data-value="1"></i><b>(1)</b> reverse_proxy writefreely:8080 } &lt;1&gt; el nombre de tu dominio</code></pre> </div> </div> <div class="listingblock"> <div class="title">.env_write</div> <div class="content"> <pre class="prettyprint highlight"><code>MARIADB_ROOT_PASSWORD=unapasswordalgocomplicada MARIADB_DATABASE=writefreely MARIADB_USER=writefreely MARIADB_PASSWORD=otrapasswordcomplicada</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="git_writefreely">Git Writefreely</h2> <div class="sectionbody"> <div class="paragraph"> <p>En lugar de la imagen docker publicada que no es para producción, vamos a usar el código fuente para construir la imagen. De esta forma será fácil actualizar de versión</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>git clone https://github.com/writefreely/writefreely.git</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="db">DB</h2> <div class="sectionbody"> <div class="paragraph"> <p>En primer lugar debemos levantar la base de datos <strong>antes</strong> que Writefreely por lo que ejecutamos</p> </div> <div class="paragraph"> <p><code>docker compose up -d db</code></p> </div> <div class="paragraph"> <p>Si queremos ver cómo (y cúando) se levanta la base de datos:</p> </div> <div class="paragraph"> <p><code>docker compose logs -f db</code></p> </div> <div class="paragraph"> <p>Cuando veamos que la bbdd está levantada pasaremos a crear la imagen de Writefreely</p> </div> </div> </div> <div class="sect1"> <h2 id="writefreely_2">Writefreely</h2> <div class="sectionbody"> <div class="paragraph"> <p>En primer lugar vamos a "construir" la imagen</p> </div> <div class="paragraph"> <p><code>docker compose build writefreely</code></p> </div> <div class="paragraph"> <p>Después le diremos que cree la configuración inicial:</p> </div> <div class="paragraph"> <p><code>docker compose run --rm writefreely writefreely config start</code></p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>El primer writefreely se refiere al nombre del container (ver docker-compose.yml) mientras que el segundo se refiere al comando a ejecutar "dentro de él"</p> </dd> </dl> </div> <div class="paragraph"> <p>Writefreely nos hará unas cuantas preguntas muy simples de responder, siendo la más "rara" si estamos usando un reverse proxy. Como es el caso (Caddy) contestaremos que sí</p> </div> <div class="paragraph"> <p>Usaremos "db" como nombre donde está corriendo la base de datos (pues es el nombre que le hemos dado en el docker-compose)</p> </div> <div class="paragraph"> <p>Por último, una vez completada la configuración y creado el usuario, crearemos las claves:</p> </div> <div class="paragraph"> <p><code>docker compose run writefreely writefreely keys generate</code></p> </div> <div class="paragraph"> <p>Si todo ha ido bien sólo resta levantar el servicio:</p> </div> <div class="paragraph"> <p><code>docker compose up -d</code></p> </div> </div> </div> <div class="sect1"> <h2 id="escribir">Escribir</h2> <div class="sectionbody"> <div class="paragraph"> <p>En unos pocos segundos podremos acceder a nuestra instancia con el usuario y password que indicamos en el setup.</p> </div> <div class="paragraph"> <p>Vía interface web puedes configurar si quieres federar la instancia de tal forma que usuarios del fediverso (Mastodon, Pleroma, Loops) puedan seguirte y enterarse cuando publicas un artículo nuevo</p> </div> </div> </div> <div class="sect1"> <h2 id="conclusión">Conclusión</h2> <div class="sectionbody"> <div class="paragraph"> <p>Writefreely es realmente minimalista y muy centrado en la escritura sencilla. Yo recién he añadido una instalación en mi stack y creado un par de posts pero espero seguir usándolo cada vez más</p> </div> </div> </div> Autoalojar una instancia de WriteFreely GitOps con Terraform y Github Jorge Aguilera 2026-04-01T00:00:00Z https://blog.jagedn.dev/blog/2026/gitops-tf-gh.html <div class="sect1"> <h2 id="projecto">Projecto</h2> <div class="sectionbody"> <div class="paragraph"> <p>Actualmente, estoy "ejerciendo" las labores de DevOps/Infra en un equipo multidisciplinar, o sea lo que viene siendo varias personas trabajando en varios microservicios que se despliegan en un mismo sitio, en este caso y por "imperativo legal" un cluster ECS de Amazon (yo hubiera preferido un EKS porque me manejo mejor con kubernetes).</p> </div> <div class="paragraph"> <p>Desde el principio hemos aplicado que todo el tema de infra tiene que ser bajo Terraform y hemos reducido las intervenciones manuales (tanto consola como web) al mínimo.</p> </div> <div class="paragraph"> <p>Así nuestro proyecto terraform despliega todo lo relativo a la red, DNS, bases de datos, secretos y cómo no, para bien o para mal, la definición de todos los microservicios.</p> </div> <div class="paragraph"> <p>Ignorando los detalles, básicamente tenemos:</p> </div> <div class="ulist"> <ul> <li> <p>Un proyecto de terraform que define los elementos "globales" entre ellos el repositorio Docker de cada servicio, exponiendo los arn como outputs</p> </li> <li> <p>Diferentes proyectos de terraform con los recursos necesarios para desplegar cada servicio dentro del cluster, diferenciando además entre staging y prod</p> </li> </ul> </div> <div class="paragraph"> <p>A cada proyecto terraform de cada servicio, entre otras cosas, se le define la imagen Docker y el tag de la misma a desplegar junto con otras configuraciones como la lista de secretos y environments a usar.</p> </div> <div class="paragraph"> <p>De esta forma, y como la arquitectura en esta fase está "viva", cada servicio se despliega de forma independiente y si es necesario se elimina sin interferir en los otros proyectos.</p> </div> </div> </div> <div class="sect1"> <h2 id="servicio">Servicio</h2> <div class="sectionbody"> <div class="paragraph"> <p>Así, cada servicio cuenta con su <code>locals.tf</code></p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>locals { project = "xxxxx" container_image = "${data.terraform_remote_state.global.outputs.ecr_servicexxxx_url}:${var.service_tag}" .... }</code></pre> </div> </div> <div class="paragraph"> <p>y en un fichero <code>versions.auto.tfvars</code> definimos el tag a desplegar:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>service_tag = 1234567</code></pre> </div> </div> <div class="paragraph"> <p>Desplegar una nueva version es "tan fácil" como editar este fichero con el nuevo commit y ejecutar un <code>terraform apply</code></p> </div> </div> </div> <div class="sect1"> <h2 id="gitops">GitOps</h2> <div class="sectionbody"> <div class="paragraph"> <p>Obviamente, una vez que este sistema está funcionando y desplegar versiones se convierte en algo tan fácil como esperar a que una versión nueva se encuentre subida al ECR, cambiar el fichero y ejecutar el terraform, surge la "necesidad" de <code>esto hay que automatizarlo</code></p> </div> <div class="paragraph"> <p>La primera parte para la automatización es "trivial": cada vez que en un servicio se mergee a <code>main</code>, un pipeline construirá y publicará la imagen.</p> </div> <div class="paragraph"> <p>Como estamos usando Github, esto lo resolvemos mediante una GH Action similar a:</p> </div> <div class="listingblock"> <div class="title">deploy.yml</div> <div class="content"> <pre class="prettyprint highlight"><code>name: CD - Deploy Develop on: push: branches: [main] env: AWS_REGION: us-east-1 ECR_REPOSITORY: servicexxxx jobs: .... build: name: Build &amp; Push runs-on: ubuntu-latest needs: test steps: - name: Checkout code uses: actions/checkout@v4 - name: Configure AWS credentials uses: aws-actions/configure-aws-credentials@v4 with: aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }} aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }} aws-region: ${{ env.AWS_REGION }} - name: Login to Amazon ECR id: login-ecr uses: aws-actions/amazon-ecr-login@v2 - name: Get short SHA id: shortsha run: echo "sha7=$(echo ${GITHUB_SHA} | cut -c1-7)" &gt;&gt; $GITHUB_OUTPUT - name: Build, tag, and push image to Amazon ECR id: build-image env: ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }} IMAGE_TAG: ${{ steps.shortsha.outputs.sha7 }} run: | docker build --build-arg GITHUB_TOKEN=${{ steps.generate_token.outputs.token }} -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG . docker tag $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG $ECR_REGISTRY/$ECR_REPOSITORY:latest docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG docker push $ECR_REGISTRY/$ECR_REPOSITORY:latest IMAGE_URI="$ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG" echo "image=$IMAGE_URI" &gt;&gt; $GITHUB_OUTPUT echo "✅ Built and pushed image: $IMAGE_URI"</code></pre> </div> </div> <div class="paragraph"> <p>Ahora que tenemos la imagen creada y subida (recuerda, esto es en cada servicio/proyecto) lo que querríamos es poder "notificar" al repositorio de Terraform que existe una versión nueva para desplegar.</p> </div> <div class="paragraph"> <p>Como esta parte es "común" a todos los servicios hemos creado un repositorio <code>platform-ci</code> donde, entre otros pipelines, tenemos uno para crear una PR en el repositorio de Terraform que modifique únicamente el <code>versions</code> correspondiente. De esta forma "reutilizamos" pipelines y no nos repetimos</p> </div> </div> </div> <div class="sect1"> <h2 id="platform_ci">Platform CI</h2> <div class="sectionbody"> <div class="paragraph"> <p>El pipeline en este repo es similar a:</p> </div> <div class="listingblock"> <div class="title">deploy-version.yml</div> <div class="content"> <pre class="prettyprint highlight"><code>name: Deploy service on: workflow_call: secrets: GH_TOKEN_APP_ID: required: true GH_TOKEN_PRIVATE_KEY: required: true inputs: environment: required: true type: string project: required: true type: string variable: required: true type: string value: required: true type: string jobs: update-version: runs-on: ubuntu-latest steps: - name: Generate GitHub App Token id: generate_token uses: actions/create-github-app-token@v1 with: app-id: ${{ secrets.GH_TOKEN_APP_ID }} private-key: ${{ secrets.GH_TOKEN_PRIVATE_KEY }} - name: Checkout Infra Repo uses: actions/checkout@v4 with: repository: OUR_ORGANIZATION/tr-infra token: ${{ steps.generate_token.outputs.token }} - name: Update Version File run: | cd environments/${{ inputs.environment }}/${{ inputs.project }} sed -i 's/${{ inputs.variable }} = .*/${{ inputs.variable }} = "${{ inputs.value }}"/' versions.auto.tfvars - name: Create Pull Request uses: peter-evans/create-pull-request@v5 with: token: ${{ steps.generate_token.outputs.token }} commit-message: "deploy: update ${{ inputs.variable }} (${{ inputs.environment }}) to ${{ inputs.value }}" title: "🚀 Deploy ${{ inputs.project }} (${{ inputs.environment }})" body: "Deploy new version of **${{ inputs.project }}** \n ${{inputs.variable}}=${{inputs.value}}" branch: "gitops/${{ inputs.variable }}-${{ inputs.value }}" base: main</code></pre> </div> </div> <div class="paragraph"> <p>Este pipeline requiere 4 parámetros:</p> </div> <div class="ulist"> <ul> <li> <p>environment (staging o production), referencia a una de las dos carpetas "padres"</p> </li> <li> <p>project (service1, service2), referencia a una de las multiples subcarpetas donde tenemos definidos los servicios</p> </li> <li> <p>variable, por ahora usamos "service_tag" pero lo dejamos abierto para futuros usos</p> </li> <li> <p>value, el valor a usar que en este caso será el tag pero asi esta abierto para futuros usos</p> </li> </ul> </div> <div class="paragraph"> <p>El pipeline simplemente clona el repo terraform, se ubica en la carpeta <code>{environment}/{project}</code>, modifica el valor proporcionado usando un simple <code>sed</code> y crea una PR</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Por ahora las PR que se crean deben ser aprobadas de forma manual hasta que todo vaya más rodado</p> </dd> </dl> </div> <div class="paragraph"> <p>Así pues, simplemente tenemos que incluir en el pipeline de cada servicio una invocación a este una vez que la imagen se encuentra subida:</p> </div> <div class="listingblock"> <div class="title">deploy.yml</div> <div class="content"> <pre class="prettyprint highlight"><code> notify-infra: needs: build uses: OUR_ORGANIZATION/platform-ci/.github/workflows/deploy-version.yml@main secrets: GH_TOKEN_APP_ID: ${{ secrets.GH_TOKEN_APP_ID }} GH_TOKEN_PRIVATE_KEY: ${{ secrets.GH_TOKEN_PRIVATE_KEY }} with: environment: staging <i class="conum" data-value="1"></i><b>(1)</b> project: service1 variable: service_tag value: ${{ needs.build.outputs.image_tag }}</code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>En este caso desplegamos en staging, pero cuando es un merge versionado usamos production</td> </tr> </table> </div> <div class="paragraph"> <p>Cuando la imagen ha sido publicada y este último steps se ejecuta, tenemos una PR creada en el repo de Terraform. En un proceso típico simplemente se mergea y el pipeline del proyecto Terraform despliega la última versión.</p> </div> <div class="paragraph"> <p>Este mecanismo nos permite de una forma fácil hacer <strong>rollback</strong> a la versión anterior, pues simplemente es hacer otra PR (esta vez manual) indicando el tag a usar, pero lo más importante (en mi opinión) permite al equipo ser "dueño" del proceso de despliegue sin depender de nadie.</p> </div> </div> </div> <div class="sect1"> <h2 id="conclusion">Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>La propuesta primera era incluir en cada servicio los comandos aws necesarios para modificar la Task Definition proporcionándole el tag a usar, pero esto creaba que el proyecto terraform se quedará "desactualizado".</p> </div> <div class="paragraph"> <p>La otra opción era "mover" la parte terraform a cada servicio, pero esto nos dificulta la reutilización de módulos de terraform y de alguna manera tendríamos la infra "distribuida" en varios proyectos. Por ahora nos sentimos más cómodos teniéndolo unificado en un único repo</p> </div> <div class="paragraph"> <p>En cualquier caso la idea es conseguir proporcionar herramientas y procedimientos simples al equipo lo más automatizados posible para que los despliegues sean fluídos</p> </div> </div> </div> Creando un flujo GitOps con Terraform y Github Actions Self-hosting multiples blogs Jorge Aguilera 2026-02-18T00:00:00Z https://blog.jagedn.dev/blog/2026/apache-docker.html <div class="sect1"> <h2 id="idea">Idea</h2> <div class="sectionbody"> <div class="paragraph"> <p>Recientemente he movido el blog desde mi proveedor de hosting en USA a otro en Europa y me estoy migrando todos los sites que tenía en aquel al nuevo.</p> </div> <div class="paragraph"> <p>Una de las ventajas del proveedor que tenía era la facilidad para crear sites con un par de clicks. Dado mi dominio "jagedn.dev" por ejemplo, era sumamente fácil crear otro site "blog.jagedn.dev", "maps.jagedn.dev" o "whatever.jagedn.dev". Cada site tenía su directorio e incluía PHP</p> </div> <div class="paragraph"> <p>En este blog voy a explicar cómo he hecho la migración de estos sites a mi instancia de tal forma, que aunque no sea con un simple click, me permita crear sites de una forma fácil</p> </div> <div class="paragraph"> <p>Además algunos sites podrán usar carpetas "public" y "private"</p> </div> </div> </div> <div class="sect1"> <h2 id="requisitos">Requisitos</h2> <div class="sectionbody"> <div class="paragraph"> <p>Un dominio (por ejemplo "jagedn.dev") y que los DNS apunten a la máquina donde vamos a instalar el multisite</p> </div> <div class="paragraph"> <p>Básicamente, voy a usar Docker en la máquina donde voy a alojar mis sites.</p> </div> <div class="paragraph"> <p>Obviamente, el otro requisito es poder acceder por ssh a la instancia.</p> </div> </div> </div> <div class="sect1"> <h2 id="preparación">Preparación</h2> <div class="sectionbody"> <div class="paragraph"> <p>En el directorio de trabajo elegido vamos a crear directorios por cada site que queramos hostear:</p> </div> <div class="ulist"> <ul> <li> <p>./blog</p> </li> <li> <p>./maps</p> </li> <li> <p>./calendar</p> </li> </ul> </div> <div class="sect2"> <h3 id="blog">Blog</h3> <div class="paragraph"> <p>En la carpeta blog copio los ficheros de mi static-site. Como es todo html+css simplemente copio los ficheros manteniendo la estructura del mismo</p> </div> </div> <div class="sect2"> <h3 id="maps">Maps</h3> <div class="paragraph"> <p>Esta es una aplicación que usa PHP y que usa una carpeta pública donde hay html y un api en PHP y una carpeta private donde guarda ficheros sensibles</p> </div> </div> <div class="sect2"> <h3 id="calendar">Calendar</h3> <div class="paragraph"> <p>Podría ser por ejemplo un Calendy o similar. La incluyo solo a modo de ejemplo</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="caddy">Caddy</h2> <div class="sectionbody"> <div class="paragraph"> <p>En el directorio de trabajo crearemos un fichero <code>Caddyfile</code> similar a :</p> </div> <div class="listingblock"> <div class="title">Caddyfile</div> <div class="content"> <pre class="prettyprint highlight"><code>maps.jagedn.dev, blog.jagedn.dev, jagedn.dev { reverse_proxy apache:80 }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="docker">Docker</h2> <div class="sectionbody"> <div class="paragraph"> <p>En el directorio de trabajo crearemos un dichero <code>Dockerfile</code></p> </div> <div class="listingblock"> <div class="title">Dockerfile</div> <div class="content"> <pre class="prettyprint highlight"><code>FROM php:8.4-apache RUN apt-get update &amp;&amp; apt-get install -y --no-install-recommends \ sudo \ &amp;&amp; rm -rf /var/lib/apt/lists/* RUN chown -R www-data:www-data /var/www/html \ &amp;&amp; chmod -R 755 /var/www/html RUN a2enmod rewrite USER www-data</code></pre> </div> </div> <div class="paragraph"> <p>y el fichero <code>docker-compose.yml</code></p> </div> <div class="listingblock"> <div class="title">docker-compose.yml</div> <div class="content"> <pre class="prettyprint highlight"><code>services: caddy: image: caddy:latest container_name: caddy restart: always ports: - "80:80" - "443:443" volumes: - ./Caddyfile:/etc/caddy/Caddyfile - caddy_data:/data - caddy_config:/config - acme_challenges:/var/www/challenges apache: container_name: apache build: context: . dockerfile: Dockerfile volumes: - ./blog:/var/www/html/blog - ./maps:/var/www/html/maps - ./apache2/sites-available:/etc/apache2/sites-available - ./apache2/sites-enabled:/etc/apache2/sites-enabled</code></pre> </div> </div> <div class="paragraph"> <p>Por último crearemos los directorios <code>./apache2/sites-available</code> y <code>./apache2/sites-enabled</code></p> </div> <div class="paragraph"> <p>En <code>sites-available</code> mantendremos la configuracion de todos los sites y en <code>sites-enabled</code> los que queremos en cada momento activos. Lo normal es usar enabled como enlaces simbólicos pero yo simplemente hago un copy porque nunca sé cómo usar <code>ln -s</code></p> </div> <div class="listingblock"> <div class="title">apache2/sites-enabled/blog.conf</div> <div class="content"> <pre class="prettyprint highlight"><code>&lt;VirtualHost *:80&gt; ServerName blog.jagedn.dev ServerAdmin webmaster@localhost DocumentRoot /var/www/html/blog ErrorLog ${APACHE_LOG_DIR}/error.log CustomLog ${APACHE_LOG_DIR}/access.log combined &lt;/VirtualHost&gt;</code></pre> </div> </div> <div class="listingblock"> <div class="title">apache2/sites-enabled/maps.conf</div> <div class="content"> <pre class="prettyprint highlight"><code>&lt;VirtualHost *:80&gt; ServerName maps.jagedn.dev ServerAdmin webmaster@localhost DocumentRoot /var/www/html/maps/public ErrorLog ${APACHE_LOG_DIR}/error.log CustomLog ${APACHE_LOG_DIR}/access.log combined &lt;/VirtualHost&gt;</code></pre> </div> </div> <div class="paragraph"> <p>Aunque son casi similares hay diferencias:</p> </div> <div class="ulist"> <ul> <li> <p>ServerName: sirve para que Apache "machee" la petición del usuario con la config a usar</p> </li> <li> <p>DocumentRoot: sirve para indicar qué carpeta debe servir ese server name. Por ejemplo maps usa "maps/public" mientras que blog usa directamente la carpeta "blog" montada</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="nuevo_site">Nuevo Site</h2> <div class="sectionbody"> <div class="paragraph"> <p>Básicamente si tengo que añadir un nuevo site los pasos a seguir serían:</p> </div> <div class="ulist"> <ul> <li> <p>crear el DNS en mi proveedor y apuntarlo a la IP de la máquina. Por ejemplo "chat.jagedn.dev"</p> </li> <li> <p>crear una carpeta al mismo nivel que blog o map, donde alojar la aplicación</p> </li> <li> <p>crear una site-enabled similar a los existentes indicando el ServerName y la ruta</p> </li> <li> <p>montar la nueva carpeta en el docker-compose</p> </li> </ul> </div> <div class="paragraph"> <p>y simplemente reconfigurar todo con <code>docker-compose up -d</code></p> </div> </div> </div> Autoalojar multiples sitios webs con Docker y Apache Creando un Map en PHP y Drive Jorge Aguilera 2026-01-05T00:00:00Z https://blog.jagedn.dev/blog/2026/drive-maps-php.html <div class="sect1"> <h2 id="idea">Idea</h2> <div class="sectionbody"> <div class="paragraph"> <p>La idea es bien simple. Vamos a usar una carpeta de Google Drive, donde habremos subido fotos de diferentes sitios y <strong>que contienen el metadata GPS</strong>, para crear una página html que las ubique en un map</p> </div> <div class="paragraph"> <p>Como la mayoría de los provedores de hosting ofrecen PHP gratuito vamos a crear un pequeño API que sirva para realizar la integración con Google (proceso de autentificación y obtención de las fotos)</p> </div> <div class="paragraph"> <p>De esta forma los requisitos de la aplicación son mínimos, pues las fotos serán servidas por un enlace (read-only) de google y el php tendrá una carga mínima.</p> </div> <div class="paragraph"> <p>Además, vamos a implementar un pequeño caché para evitar llamadas excesivas a Google.</p> </div> </div> </div> <div class="sect1"> <h2 id="consola_google">Consola Google</h2> <div class="sectionbody"> <div class="paragraph"> <p>Lo primero (aparte de tener cuenta en Google y una carpeta con fotos en Google Drive) es crear un proyecto en la consola de Google, por ejemplo misandanzas:</p> </div> <div class="paragraph"> <p><a href="https://console.cloud.google.com/welcome?project=misandanzas" class="bare">https://console.cloud.google.com/welcome?project=misandanzas</a></p> </div> <div class="ulist"> <ul> <li> <p>Una vez creado (y seleccionado) debemos habilitar el API de Drive, con lo que iremos a "APIs and services", "Library", buscaremos Drive y lo añadiremos al proyecto</p> </li> <li> <p>Lo siguiente es crear una "Oauth Screen consent". Como la aplicación será de consumo "propio" y su objetivo no es ser usada por el público nos servirá el estado "testing" en que se crea y que no requiere aprobación por parte de Google (Si vas a Audience verás que está en estado Testing)</p> </li> <li> <p>En la pantalla de Audience añadiremos (abajo del todo) nuestro correo como usuario de test</p> </li> <li> <p>En la pantalla de Data access añadiremos un nuevo scope pulsando "Add or remove scopes". Añadiremos "&#8230;&#8203;/auth/drive.readonly" (tal cual) en el campo de entrada inferior y pulsamos añadir.</p> </li> <li> <p>Por último crearemos un Oauth Client en la pantalla de "Clients". El cliente será del tipo "Web application" y deberemos añadir nuestra web como "Authorised Javascript" (<a href="https://maps.jagedn.dev" class="bare">https://maps.jagedn.dev</a> en mi caso) y en "Authorised redirect URIs"" (<a href="https://maps.jagedn.dev/api/callback" class="bare">https://maps.jagedn.dev/api/callback</a>)</p> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Si el mapa lo vas a "consumir" en local puedes usar <a href="http://localhost:xxxx" class="bare">http://localhost:xxxx</a></p> </dd> </dl> </div> </li> </ul> </div> <div class="paragraph"> <p>Una vez creado el OAUTH descargaremos el JSON que nos proporciona. ¡OJO! Hay que descargarlo en el modal recién generado. Si no lo descargas justo en este momento te toca generar otro OAuth de nuevo</p> </div> </div> </div> <div class="sect1"> <h2 id="drive">Drive</h2> <div class="sectionbody"> <div class="paragraph"> <p>Como ya hemos mencionado en nuestro Google Drive crearemos una carpeta y subiremos fotos que tengan el metadata de GPS para poder ubicarlas en el mapa.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Lo interesante del proyecto es que podamos añadir fotos posteriormente y que aparezcan sin tener que hacer nada, pero para probar que todo va bien deberíamos subir al menos un par de ellas al principio</p> </dd> </dl> </div> <div class="paragraph"> <p>En mi caso la carpeta la he llamado "MisAndanzas" pero puede ser cualquier nombre</p> </div> </div> </div> <div class="sect1"> <h2 id="proyecto">Proyecto</h2> <div class="sectionbody"> <div class="paragraph"> <p>Para proteger los datos sensibles (el fichero json bajado con las credenciales) vamos a crear dos carpetas en nuestro hosting: public y private</p> </div> <div class="paragraph"> <p>Public será la carpeta que configuraremos como root de la aplicación web y private estará "fuera" de ella. Yo las he puesto las dos en el mismo directorio y configurado "public" como root en el Apache</p> </div> <div class="paragraph"> <p>A su vez en la carpeta public crearemos otra llamada "api" y dentro de ella otra llamada "src"</p> </div> <div class="listingblock"> <div class="content"> <pre>|-- root | |-- public | |-- api | |-- src | |-- private | |-- credentials.json</pre> </div> </div> <div class="paragraph"> <p>La carpeta <code>root/public/api</code> será donde estará nuestro api PHP. Usaremos Slim como framework por ser ligero y sencillo:</p> </div> <div class="paragraph"> <p>En la carpeta <code>root/public/api</code> creamos un fichero <code>composer.json</code>:</p> </div> <div class="listingblock"> <div class="title">root/public/api/composer.json</div> <div class="content"> <pre>{ "require": { "slim/slim": "^4.0", "slim/psr7": "^1.8" }, "autoload": { "psr-4": { "App\\": "src/" } } }</pre> </div> </div> <div class="paragraph"> <p>y ejecutaremos <code>composer install</code> (desde esta carpeta) para instalar las dependencias.</p> </div> <div class="paragraph"> <p>En la misma carpeta crearemos un <code>.htaccess</code> que nos sirva para proteger nuestro api:</p> </div> <div class="listingblock"> <div class="title">root/public/api/.htaccess</div> <div class="content"> <pre>&lt;IfModule mod_rewrite.c&gt; RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d # Todo lo que llegue aquí lo procesa index.php RewriteRule ^ index.php [QSA,L] &lt;/IfModule&gt;</pre> </div> </div> <div class="paragraph"> <p>(De esta forma todas las peticiones se resuelven en el index.php que crearemos)</p> </div> <div class="paragraph"> <p>Y por último crearemos nuestro index.php:</p> </div> <div class="listingblock"> <div class="title">root/public/api/index.php</div> <div class="content"> <pre>&lt;?php use Psr\Http\Message\ResponseInterface as Response; use Psr\Http\Message\ServerRequestInterface as Request; use Slim\Factory\AppFactory; use App\GooglePhotos; // El autoload está en la misma carpeta api/ require __DIR__ . '/vendor/autoload.php'; $app = AppFactory::create(); // IMPORTANTE $app-&gt;setBasePath('/api'); $app-&gt;addRoutingMiddleware(); $app-&gt;addErrorMiddleware(true, true, true); $google = new GooglePhotos(); // Rutas... $app-&gt;get('/setup', function (Request $request, Response $response) use ($google) { return $response-&gt;withHeader('Location', $google-&gt;getAuthUrl())-&gt;withStatus(302); }); $app-&gt;get('/callback', function (Request $request, Response $response) use ($google) { $params = $request-&gt;getQueryParams(); $google-&gt;authenticate($params['code']); $response-&gt;getBody()-&gt;write("Conectado con éxito."); return $response; }); $app-&gt;get('/photos', function (Request $request, Response $response) use ($google) { $params = $request-&gt;getQueryParams(); $token = $params['nextPageToken'] ?? null; $photos = $google-&gt;getPhotos($token); $response-&gt;getBody()-&gt;write(json_encode($photos)); return $response -&gt;withHeader('Content-Type', 'application/json') -&gt;withHeader('Cache-Control', 'no-store, no-cache, must-revalidate, max-age=0') -&gt;withHeader('Pragma', 'no-cache'); }); $app-&gt;run();</pre> </div> </div> <div class="paragraph"> <p>Como puedes ver el index.php "simplemente" indica las rutas de nuestra aplicación y las dirige a una clase <code>GooglePhotos</code> que crearemos a continuación (en la subcarpeta <code>src</code>)</p> </div> <div class="paragraph"> <p>Básicamente, la API tendrá una llamada <code>setup</code> que ejecutaremos una vez para obtener un token de Google (que nos la proporcionará en el endpoint <code>callback</code>) y una llamada <code>photos</code> para devolver un json con el detalle de las fotos</p> </div> </div> </div> <div class="sect1"> <h2 id="service">Service</h2> <div class="sectionbody"> <div class="paragraph"> <p>Toda la lógica (tampoco es que sea mucha) la ubicaremos en el fichero <code>public/api/src/GooglePhotos.php</code></p> </div> <div class="paragraph"> <p>Vamos a verla por partes</p> </div> <div class="listingblock"> <div class="title">public/api/src/GooglePhotos.php</div> <div class="content"> <pre>&lt;?php namespace App; class GooglePhotos { private $tokenPath; private $credentialsPath; private $scope = "https://www.googleapis.com/auth/drive.readonly"; public function __construct() { $this-&gt;tokenPath = __DIR__ . '/../../../private/token.json'; $this-&gt;credentialsPath = __DIR__ . '/../../../private/credentials.json'; }</pre> </div> </div> <div class="paragraph"> <p>Ajusta las rutas si no has usado las mismas que yo. Simplemente, indicamos donde leer las credenciales y donde guardar el token que se obtenga</p> </div> <div class="listingblock"> <div class="title">public/api/src/GooglePhotos.php</div> <div class="content"> <pre> private function getCredentials() { if (!file_exists($this-&gt;credentialsPath)) throw new \Exception("Falta credentials.json"); $data = json_decode(file_get_contents($this-&gt;credentialsPath), true); return $data['web'] ?? $data['installed'] ?? $data; } public function getAuthUrl() { $creds = $this-&gt;getCredentials(); if (empty($creds['client_id'])) { die("ERROR: client_id está vacío. Estructura del JSON: " . print_r($creds, true)); } $params = [ 'client_id' =&gt; $creds['client_id'], 'redirect_uri' =&gt; $creds['redirect_uris'][0], 'scope' =&gt; $this-&gt;scope, 'response_type' =&gt; 'code', 'access_type' =&gt; 'offline', 'prompt' =&gt; 'consent' ]; return "https://accounts.google.com/o/oauth2/v2/auth?" . http_build_query($params); }</pre> </div> </div> <div class="paragraph"> <p>Cuando se llama al método <code>getAuthUrl</code> se construye una URL para iniciar el flujo OAUTH contra Google indicandole los parámetros necesarios (como client_id y scope)</p> </div> <div class="paragraph"> <p>Una vez que Google ha validado el proceso y autentificado al usuario (a tí) nos proporciona un code que debemos aceptar:</p> </div> <div class="listingblock"> <div class="content"> <pre> public function authenticate($code) { $creds = $this-&gt;getCredentials(); return $this-&gt;postToTokenEndpoint([ 'client_id' =&gt; $creds['client_id'], 'client_secret' =&gt; $creds['client_secret'], 'code' =&gt; $code, 'redirect_uri' =&gt; $creds['redirect_uris'][0], 'grant_type' =&gt; 'authorization_code' ]); } private function postToTokenEndpoint($params) { $ch = curl_init('https://oauth2.googleapis.com/token'); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($params)); $response = json_decode(curl_exec($ch), true); curl_close($ch); $tokenToSave = [ 'access_token' =&gt; $response['access_token'], 'expires_at' =&gt; time() + $response['expires_in'], 'refresh_token' =&gt; $response['refresh_token'] ?? (json_decode(file_get_contents($this-&gt;tokenPath), true)['refresh_token'] ?? null) ]; file_put_contents($this-&gt;tokenPath, json_encode($tokenToSave)); return $tokenToSave['access_token']; }</pre> </div> </div> <div class="paragraph"> <p>Si todo ha ido bien deberíamos tener en nuestra carpeta privada un fichero <code>token.json</code> que nos servirá para identificar las sucesivas llamadas a Drive. Además, el PHP se encargará de ir renovándolo cuando sea necesario</p> </div> <div class="listingblock"> <div class="content"> <pre> private function getValidAccessToken() { if (!file_exists($this-&gt;tokenPath)) throw new \Exception("Falta token.json"); $tokenData = json_decode(file_get_contents($this-&gt;tokenPath), true); if (time() &gt; ($tokenData['expires_at'] - 30)) { return $this-&gt;refreshAccessToken($tokenData['refresh_token']); } return $tokenData['access_token']; } private function refreshAccessToken($refreshToken) { $creds = $this-&gt;getCredentials(); return $this-&gt;postToTokenEndpoint([ 'client_id' =&gt; $creds['client_id'], 'client_secret' =&gt; $creds['client_secret'], 'refresh_token' =&gt; $refreshToken, 'grant_type' =&gt; 'refresh_token' ]); }</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="api_photos">API Photos</h2> <div class="sectionbody"> <div class="paragraph"> <p>La lógica principal, una vez que podemos "dialogar" con Google la ubicamos en una método getPhotos</p> </div> <div class="paragraph"> <p>Este método comprueba si ya hemos generado un fichero de cache y si no existe o es un poco antiguo lo recrea</p> </div> <div class="paragraph"> <p>Para ello:</p> </div> <div class="ulist"> <ul> <li> <p>obtenemos el token</p> </li> <li> <p>obtenemos el ID de Drive a partir del nombre de la carpeta y el token</p> </li> <li> <p>iteramos llamando al api de google hasta que <code>nextPageToken</code> nos indique que no hay más fotos</p> </li> <li> <p>para cada iteración extraemos la información y la vamos añadiendo a un json nuestro</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre> public function getPhotos($nextPageToken = null, $folderName = "MisAndanzas", $seconds = 30) { $cacheFile = __DIR__ . '/../../../private/photos_cache.json'; // Si el archivo de caché existe y es reciente, lo devolvemos if (file_exists($cacheFile) &amp;&amp; (time() - filemtime($cacheFile) &lt; $seconds)) { return json_decode(file_get_contents($cacheFile), true); } $accessToken = $this-&gt;getValidAccessToken(); $folderId = $this-&gt;getFolderIdByName($folderName, $accessToken); if (!$folderId) return ["error" =&gt; "No se encontró la carpeta '$folderName'"]; $allPhotos = []; $pageToken = null; do { $query = urlencode("'$folderId' in parents and mimeType contains 'image/' and trashed = false"); // Pedimos el máximo por página (100) para terminar antes $url = "https://www.googleapis.com/drive/v3/files?q=$query" . "&amp;fields=nextPageToken,files(id,name,thumbnailLink,imageMediaMetadata,createdTime)" . "&amp;pageSize=100"; if ($pageToken) { $url .= "&amp;pageToken=" . $pageToken; } $ch = curl_init($url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_HTTPHEADER, ['Authorization: Bearer ' . $accessToken]); $res = json_decode(curl_exec($ch), true); curl_close($ch); if (isset($res['files'])) { foreach ($res['files'] as $file) { $meta = $file['imageMediaMetadata'] ?? null; $location = $meta['location'] ?? null; // Solo guardamos las que tienen GPS para no llenar el JSON de basura if ($location) { $allPhotos[] = [ 'id' =&gt; $file['id'], 'name' =&gt; $file['name'], 'url' =&gt; str_replace('=s220', '=s800', $file['thumbnailLink'] ?? ''), 'lat' =&gt; (float)$location['latitude'], 'lng' =&gt; (float)$location['longitude'], 'date' =&gt; $meta['time'] ?? $file['createdTime'] ?? null, 'date_human' =&gt; isset($meta['time']) ? date("d/m/Y H:i", strtotime($meta['time'])) : null ]; } } } // Si hay un token, el bucle se repite; si no, termina. $pageToken = $res['nextPageToken'] ?? null; } while ($pageToken); // Ordenamos por fecha antes de enviar al cliente usort($allPhotos, function($a, $b) { return strtotime($a['date']) - strtotime($b['date']); }); return $allPhotos; } private function getFolderIdByName($name, $accessToken) { $query = urlencode("name = '$name' and mimeType = 'application/vnd.google-apps.folder' and trashed = false"); $url = "https://www.googleapis.com/drive/v3/files?q=$query&amp;fields=files(id)"; $ch = curl_init($url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_HTTPHEADER, ['Authorization: Bearer ' . $accessToken]); $res = json_decode(curl_exec($ch), true); curl_close($ch); return $res['files'][0]['id'] ?? null; }</pre> </div> </div> <div class="paragraph"> <p>y básicamente esto es todo lo que necesitamos para consumir el API de Drive con PHP</p> </div> </div> </div> <div class="sect1"> <h2 id="front">Front</h2> <div class="sectionbody"> <div class="paragraph"> <p>Esta parte la puedes hacer tan "profesional" como quieras.</p> </div> <div class="paragraph"> <p>Yo por mi parte voy a crear un simple <code>index.html</code> que use Vue y Leaflet.</p> </div> <div class="paragraph"> <p>Las partes mas importantes del html serian</p> </div> <div class="listingblock"> <div class="title">root/public/index.html</div> <div class="content"> <pre>&lt;head&gt; ... &lt;link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="app"&gt; &lt;div id="map"&gt;&lt;/div&gt; &lt;div v-if="selectedPhoto" class="lightbox" @click="selectedPhoto = null"&gt; &lt;span class="close-btn"&gt;&amp;times;&lt;/span&gt; &lt;img :src="getFullSizeUrl(selectedPhoto.url)" @click.stop /&gt; &lt;div class="lightbox-caption"&gt; &lt;span class="date-badge"&gt;&amp;nbsp;&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;script src="https://unpkg.com/vue@3/dist/vue.global.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"&gt;&lt;/script&gt; &lt;/body&gt;</pre> </div> </div> <div class="paragraph"> <p>El html crea dos divs: map y selectedPhoto. El primero se usará para que Leaflet monte el mapa y el segundo para mostrar un modal cuando se seleccione una foto</p> </div> <div class="paragraph"> <p>El javascript que llama al api y monta el mapa es muy simple:</p> </div> <div class="listingblock"> <div class="content"> <pre>const { createApp, onMounted, ref } = Vue; createApp({ setup() { const map = ref(null); const photos = ref([]); const selectedPhoto = ref(null); const getFullSizeUrl = (url) =&gt; { return url ? url.replace(/=s\d+/, '=s0') : ''; }; const openImage = (id) =&gt; { console.log("Intentando abrir foto ID:", id); // Para debug const photo = photos.value.find(p =&gt; p.id === id); if (photo) { selectedPhoto.value = photo; } }; window.openImage = openImage; const initMap = () =&gt; { map.value = L.map('map', { minZoom: 2, worldCopyJump: true }).setView([17, 0], 2); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap' }).addTo(map.value); }; const loadPhotos = async () =&gt; { try { const response = await fetch('/api/photos'); const data = await response.json(); // Filtrar solo las que tienen coordenadas photos.value = data .filter(p =&gt; p.lat &amp;&amp; p.lng) .sort((a, b) =&gt; new Array(a.date).toLocaleString().localeCompare(new Array(b.date).toLocaleString())); // Añadir marcadores photos.value.forEach(photo =&gt; { const marker = L.marker([photo.lat, photo.lng]).addTo(map.value); // Contenido del Popup const popupContent = ` &lt;div style="text-align:center" id="pop-${photo.id}"&gt; &lt;strong&gt;${photo.date_human}&lt;/strong&gt;&lt;br&gt; &lt;img src="${photo.url}" class="img-click" style="width:150px; cursor:pointer; border-radius:4px; margin-top:5px;" /&gt; &lt;/div&gt; `; marker.bindPopup(popupContent); marker.on('popupopen', function() { const container = document.querySelector(`#pop-${photo.id} .img-click`); if (container) { container.onclick = () =&gt; { window.openImage(photo.id); }; } }); }); } catch (error) { console.error("Error cargando fotos:", error); } }; onMounted(() =&gt; { initMap(); loadPhotos(); window.addEventListener('keydown', (e) =&gt; { if (e.key === 'Escape') { selectedPhoto.value = null; } }); }); return { photos, selectedPhoto, openImage, getFullSizeUrl}; } }).mount('#app');</pre> </div> </div> <div class="paragraph"> <p>Simplemente llama al api, y recorriendo el JSON crea Markups en el mapa</p> </div> </div> </div> <div class="sect1"> <h2 id="conclusiones">Conclusiones</h2> <div class="sectionbody"> <div class="paragraph"> <p>A parte de la (nula) utilidad del proyecto, este desarrollo me ha venido bien para investigar un poco más de PHP y su integración con Google</p> </div> <div class="paragraph"> <p>Las primeras tortas fueron usando el SDK de PHP, en concreto el de GooglePhotos, pero "gracias" a que es un dolor de muelas usarlo al final he optado por una aproximación más simple que me ha servido para ver lo fácil que es usar PHP</p> </div> </div> </div> Creando un mapa a partir de fotos en Google Drive Self-hosting Snikket and GoToSocial behind Caddy Jorge Aguilera 2026-01-05T00:00:00Z https://blog.jagedn.dev/blog/2026/gotosocial-snikket-caddy.html <div class="sect1"> <h2 id="idea">Idea</h2> <div class="sectionbody"> <div class="paragraph"> <p>After a couple of months running my GotoSocial instance, I wanted to add more federated-opensource services to my stack, so I decided to add an XMPP server. After a little research (a simple Google search) I decided to use Snkikket.</p> </div> <div class="paragraph"> <p>As my instance is a 5€ monthly machine, my first intent was to create another similar instance and install Snikket on it. But I wondered if all the stack could work in the same machine and maybe save so money</p> </div> <div class="paragraph"> <p>As I deployed my GotoSocial instance using Docker, and the Snikket&#8217;s installation guide refers to Docker, I thought it would be easy to add to my docker-compose.yml</p> </div> </div> </div> <div class="sect1"> <h2 id="initial">Initial</h2> <div class="sectionbody"> <div class="paragraph"> <p>Deploying a GotoSocial instance using Docker is as "simple" as running a docker-compose.yml similar to</p> </div> <div class="listingblock"> <div class="title">docker-compose.yml</div> <div class="content"> <pre>services: gotosocial: image: docker.io/superseriousbusiness/gotosocial:latest container_name: gotosocial user: 1000:1000 networks: - gotosocial environment: GTS_HOST: social.jagedn.dev GTS_DB_TYPE: sqlite GTS_DB_ADDRESS: /gotosocial/storage/sqlite.db GTS_LETSENCRYPT_ENABLED: "false" GTS_PORT: "8080" GTS_TRUSTED_PROXIES: "172.18.0.0/16" GTS_LETSENCRYPT_EMAIL_ADDRESS: "jorge@xxxx.xxxx" GTS_WAZERO_COMPILATION_CACHE: /gotosocial/.cache GTS_STATUSES_MAX_CHARS: 512 TZ: Europe/Madrid GTS_MEDIA_LOCAL_MAX_SIZE: 60MiB GTS_INSTANCE_EXPOSE_PUBLIC_TIMELINE: "true" expose: - "8080" volumes: - /home/ubuntu/gotosocial/data:/gotosocial/storage restart: "always"</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="caddy">Caddy</h2> <div class="sectionbody"> <div class="paragraph"> <p>My first (easy) step was to include Caddy in my stack and let Caddy work as a proxy-reverse against my GotoSocial.</p> </div> <div class="paragraph"> <p>Add Caddy to the docker-compose</p> </div> <div class="listingblock"> <div class="title">docker-compose.yml</div> <div class="content"> <pre> caddy: image: caddy:latest container_name: caddy restart: always ports: - "80:80" - "443:443" volumes: - ./Caddyfile:/etc/caddy/Caddyfile - caddy_data:/data - caddy_config:/config - acme_challenges:/var/www/challenges networks: - gotosocial</pre> </div> </div> <div class="listingblock"> <div class="title">Caddyfile</div> <div class="content"> <pre>social.jagedn.dev { reverse_proxy gotosocial:8080 }</pre> </div> </div> <div class="paragraph"> <p>Now Caddy will negociate the Let&#8217;s Encrypt SSL Certificate and redirect all requests to the gotosocial instance</p> </div> <div class="paragraph"> <p>Simple.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>As a plus, this configuration allows me to add more applications</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="the_challenge_the_snikket_monolith">The Challenge: The Snikket "Monolith"</h2> <div class="sectionbody"> <div class="paragraph"> <p>While Snikket is often deployed as a single Docker image, running it behind an existing reverse proxy like Caddy requires breaking it down into its core components:</p> </div> <div class="ulist"> <ul> <li> <p>The Server (Prosody): The brain of the XMPP operations.</p> </li> <li> <p>The Portal: The web interface for users and admins.</p> </li> <li> <p>The Cert-Manager: To handle XMPP-specific encryption</p> </li> </ul> </div> <div class="paragraph"> <p>Following Snikket&#8217;s tutorial, it&#8217;s straightforward to deploy all these services in a docker-composer <strong>but only if they act as a hole and not behind a reverse proxy</strong></p> </div> <div class="listingblock"> <div class="title">docker-compose.yml</div> <div class="content"> <pre> snikket_certs: container_name: snikket-certs image: snikket/snikket-cert-manager:stable networks: - gotosocial env_file: snikket.conf volumes: - snikket_data:/snikket - acme_challenges:/var/www/.well-known/acme-challenge restart: "unless-stopped" snikket_portal: container_name: snikket-portal image: snikket/snikket-web-portal:stable networks: - gotosocial env_file: snikket.conf restart: "unless-stopped" snikket_server: container_name: snikket image: snikket/snikket-server:stable networks: - gotosocial expose: - "5280" - "5281" ports: - "5222:5222" # XMPP Client - "5269:5269" # XMPP Federation - "3478:3478" # TURN - "3478:3478/udp" - "5000:5000/tcp" - "5000:5000/udp" volumes: - snikket_data:/snikket env_file: snikket.conf restart: "unless-stopped"</pre> </div> </div> <div class="listingblock"> <div class="title">snikket.conf</div> <div class="content"> <pre>SNIKKET_DOMAIN=chat.jagedn.dev SNIKKET_ADMIN_EMAIL=jorge@edn.es</pre> </div> </div> <div class="paragraph"> <p>(I will omit the part you need to configure DNS in your internet provider as the aim of the post is not a HOWTO install Snikket)</p> </div> <div class="listingblock"> <div class="title">Caddyfile</div> <div class="content"> <pre>social.jagedn.dev { reverse_proxy gotosocial:8080 } chat.jagedn.dev, groups.chat.jagedn.dev, share.chat.jagedn.dev { handle_path /.well-known/acme-challenge/* { root * /var/www/challenges file_server } handle { reverse_proxy snikket_portal:5765 } }</pre> </div> </div> <div class="paragraph"> <p>As the Cert-Manager is responsible to negociate the certificate for mobile comms, we have to align it with Caddy. This part was solved easily sharing the <code>acme_challenges</code> folder</p> </div> <div class="paragraph"> <p>Also, the docker-compose uses typical ports 443 and 80, but in my case Caddy manages these ports</p> </div> <div class="paragraph"> <p>Another issue is that with this default mapping, the portal tries to talk to the server via 127.0.0.1, which fails in a multi-container Docker setup, and we need to find the way to configure the services.</p> </div> <div class="paragraph"> <p>After several tries and errors, and digging a lot into the Snikket GitHub repo, I was able to figure how to configure all the pieces</p> </div> </div> </div> <div class="sect1"> <h2 id="the_aha_moment">The "Aha!" Moment</h2> <div class="sectionbody"> <div class="paragraph"> <p>At the end it was so easy as configure snikket.conf:</p> </div> <div class="listingblock"> <div class="title">snikket.conf</div> <div class="content"> <pre>SNIKKET_DOMAIN=chat.jagedn.dev SNIKKET_ADMIN_EMAIL=jorge@edn.es SNIKKET_TWEAK_PORTAL_INTERNAL_HTTP_INTERFACE=0.0.0.0 SNIKKET_TWEAK_INTERNAL_HTTP_INTERFACE=0.0.0.0 SNIKKET_WEB_PROSODY_ENDPOINT=http://snikket:5280 SNIKKET_TWEAK_INTERNAL_HTTP=true</pre> </div> </div> <div class="paragraph"> <p>In sum up:</p> </div> <div class="ulist"> <ul> <li> <p>configure portal to listen in all interfaces not only 127.0.0.1, so Caddy can redirect calls to it</p> </li> <li> <p>configure server to listen in all interfaces so portal can validate requests against it</p> </li> <li> <p>configure portal to call snikket container instead to 127.0.0.1</p> </li> </ul> </div> <div class="paragraph"> <p>(to be honest, not sure if SNIKKET_TWEAK_INTERNAL_HTTP is required)</p> </div> </div> </div> <div class="sect1"> <h2 id="conclusion">Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>Docker networking can be a real pain if you don&#8217;t keep an eye on where your traffic is going.</p> </div> <div class="paragraph"> <p>I spent too much time fighting against 502 errors just to realize I was pointing Caddy to the wrong port or the wrong container name.</p> </div> <div class="paragraph"> <p>In the end, keeping it simple and forcing the internal endpoints was all it took. Now I have a full social stack running on a tiny VPS, and it actually works!</p> </div> <div class="paragraph"> <p>But the most important part is, since this is all Open Source, I didn&#8217;t have to just "guess" why it was failing. When the logs kept showing the portal was stuck on 127.0.0.1, I could actually look into the code and the internal scripts to see which environment variables it was looking for.</p> </div> <div class="paragraph"> <p>Now I have a full social stack running on a tiny VPS, and it actually works because I took the time to understand what was happening under the hood.</p> </div> </div> </div> Self-hosting Snikket and GoToSocial behind Caddy Tooteando cámaras de Madrid Jorge Aguilera 2025-12-14T00:00:00Z https://blog.jagedn.dev/blog/2025/camaras-madrid-fedi.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p><strong>Spoiler</strong> : este script usa Google App Script. Si Google te da asco seguramente no quieras seguir leyendo. Avisado estás</p> </div> </div> </div> <div class="sect1"> <h2 id="opendata">OpenData</h2> <div class="sectionbody"> <div class="paragraph"> <p>Dentro del catálogo de datos abiertos del ayuntamiento de Madrid hay uno que publica un xml con los datos de todas las cáramas que controlan el tráfico (y a nosotros por ende) de la ciudad</p> </div> <div class="paragraph"> <p>Cada elemento indica la posición, nombre etc y una URL hacia la última imagen tomada (creo que se refrescan cada 5 minutos aprox)</p> </div> <div class="paragraph"> <p>En este post voy a explicar cómo uso este OpenData para elegir una cámara aleatoria y subirla a mi cuenta de "Mastodon" (en realidad GotoSocial) junto con un texto. Tal vez te pueda servir de ejemplo/inspiración para crear tus scripts.</p> </div> <div class="paragraph"> <p>El script se ejecuta en Google Script pero podría tenerlo en una raspberry, en mi ordenador &#8230;&#8203; Y por otra parte está hecho en Javascript pero podrías hacerlo hasta con puro Bash con un curl</p> </div> </div> </div> <div class="sect1"> <h2 id="crear_fedi_aplicación">Crear fedi-aplicación</h2> <div class="sectionbody"> <div class="paragraph"> <p>Lo primero a hacer es crearnos una aplicación en nuestra cuenta del Fediverso. Cada sistema (mastodon, gotosocial, pleroma) lo hacen de forma diferente pero muy parecida.</p> </div> <div class="paragraph"> <p>Básicamente en settings crearás una "application", le das permisos de read-write y una vez que la autorizas te devuelve un token.</p> </div> <div class="paragraph"> <p>Este token hay que guardarlo aunque en cualquier momento puedes borrar la application y volver a recrearlo</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>El nombre de la aplicación que creas aparecerá como metadato y se podrá "ver" en tu timeline.</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="crear_script">Crear Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Si tienes cuenta en Google (gmail por ejemplo) puedes crear un proyecto en <a href="https://script.google.com" class="bare">https://script.google.com</a> y configurar "disparadores" que lo ejecuten</p> </div> <div class="paragraph"> <p>En nuestro caso vamos a usar un disparador de tiempo que ejecutará el script todos los días entre las 8 y las 9 de la mañana</p> </div> <div class="paragraph"> <p>En el editor que nos abre Google copiaremos este código (el cual explico a continuación)</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="javascript">const url = "https://datos.madrid.es/egob/catalogo/202088-0-trafico-camaras.kml" const instancia = 'social.jagedn.dev'; const bootToken = 'ZTMYYTQ4-----recuerda no compartir tu token ni en un post'; function myFunction() { let xml = UrlFetchApp.fetch(url).getContentText('ISO-8859-1'); let document = XmlService.parse(xml); let root = document.getRootElement(); let ids = new Array() root.getChildren().forEach(document=&gt;{ document.getChildren().forEach(item=&gt;{ if(item.getName()=="Placemark"){ item.getChildren().forEach(extendedData=&gt;{ if( extendedData.getName()=='ExtendedData'){ extendedData.getChildren().forEach(data=&gt;{ if(data.getAttribute("name").getValue()=="Numero"){ data.getChildren().forEach(value=&gt;{ ids.push(value.getText()) }) } }) } }) } }) }) let id = ids[Math.floor(Math.random() * ids.length)]; let image = UrlFetchApp.fetch("https://informo.madrid.es/cameras/Camara"+id+".jpg?v="+new Date().getMilliseconds()).getBlob() sendMedia(image, "Una #random webcam de #Madrid al día\n(Enviada con un script, podriamos decir que es un bot o no, qué se yo)") } function sendMedia(blob, toot) { var urlMedia = `https://${instancia}/api/v1/media`; var url = `https://${instancia}/api/v1/statuses`; var boundary = "xxxxxxxxxx"; var data = ""; data += "--" + boundary + "\r\n"; data += "Content-Disposition: form-data; name=\"file\"; filename=\"chart.png\"\r\n"; data += "Content-Type:image/png\r\n\r\n"; var payloadImage = Utilities.newBlob(data).getBytes() .concat(blob.getBytes()) .concat(Utilities.newBlob("\r\n--" + boundary + "--").getBytes()); var optionsImage = { method : "post", contentType : "multipart/form-data; boundary=" + boundary, payload : payloadImage, headers:{ 'Authorization': `Bearer ${bootToken}` }, muteHttpExceptions: true, }; var respImage = UrlFetchApp.fetch(urlMedia, optionsImage).getContentText(); Logger.log(respImage) var jsonImage = JSON.parse(respImage); var payload = { status: toot, media_ids: [jsonImage.id] } var options = { 'method' : 'post', 'contentType': 'application/json', 'payload': JSON.stringify(payload), 'headers': { 'Authorization': `Bearer ${bootToken}` }, 'muteHttpExceptions':true }; Logger.log(payload) const resp = UrlFetchApp.fetch(url, options); Logger.log(resp) }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="myfunction">myFunction</h2> <div class="sectionbody"> <div class="paragraph"> <p>este es el punto de entrada a nuestro proyecto. Simplemente se descarga la última versión del XML y lo parsea, extrayendo los ids de todas las cámaras</p> </div> <div class="paragraph"> <p>Como el XLM es un KML (xml con etiquetas de posicionar elementos geográficos) es un poco raruno pero se lee fácil.</p> </div> <div class="paragraph"> <p>Básicamente elegimos un id al azar y nos descargamos la imagen (la url es la misma para todas las cámaras cambiando el id). Le añado además un parámetro en la url con la fecha actual para evitar temas de cacheo</p> </div> <div class="paragraph"> <p>Una vez tenemos el "blog", o sea el binario remoto, llamamos a la funcion que lo enviará al fediverso de nuestra instancia</p> </div> <div class="paragraph"> <p>Si usas otro lenguaje (tipo PHP o Java) o incluso con Javascript usando axios, puedes usar sus funciones para subir un fichero mediante <code>multipart/form-data</code> (formato requerido por las instancias)</p> </div> <div class="paragraph"> <p>Mi ejemplo es una implementación "a pelo" de cómo subir un multipart usando "boundary"</p> </div> <div class="paragraph"> <p>Una vez enviada la imagen a la url <code>/api/v1/media</code> el servidor nos devolverá un json con la info del recurso creado por lo que nos guardamos su id</p> </div> <div class="paragraph"> <p>A continuación creamos un toot llamando a la url <code>/api/v1/statuses</code> pasando un json con el payload requerido. Simplemente proporcionamos un texto (en este caso fijo, en otros podría ser generado al vuelo) y añadimos el <code>media_ids</code> con el id que nos devolvió de la imagen</p> </div> <div class="paragraph"> <p>Y eso es todo, si todo va bien habremos publicado un toot con una imagen callejera</p> </div> </div> </div> <div class="sect1"> <h2 id="otras_ideas">Otras ideas</h2> <div class="sectionbody"> <div class="paragraph"> <p>Tomando una hoja de GoogleSheet como fuente de datos puedes hacer un script que tootee un chiste, o que genere un gráfico de barras según los datos del excel y lo subas al fediverso</p> </div> <div class="paragraph"> <p>O pasar de Google y tenerlo autoalojado en una raspberry&#8230;&#8203;</p> </div> <div class="paragraph"> <p>La imaginación es el límite</p> </div> </div> </div> Un pequeño script para tootear imágenes de Madrid Writing (and publishing) a Nextflow Plugin III Jorge Aguilera 2025-09-30T00:00:00Z https://blog.jagedn.dev/blog/2025/writing-nextflow-plugin-iii.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Welcome to this comprehensive four-part series on developing and publishing your own Nextflow plugins!</p> </div> <div class="paragraph"> <p>Nextflow plugins allow you to extend the core functionality of Nextflow, making your pipelines more powerful, flexible, and integrated with external systems. Whether you&#8217;re looking to add custom executors, integrate cloud services, or enhance reporting, this series has you covered from initial concept to final release.</p> </div> <div class="paragraph"> <p>Use the links below to easily navigate the entire series:</p> </div> <div class="ulist"> <ul> <li> <p>Part 1: Introduction and Creating a Nextflow Plugin <a href="writing-nextflow-plugin.adoc" class="bare">writing-nextflow-plugin.adoc</a></p> </li> <li> <p>Part 2: Adding Configuration to Your Nextflow Plugin <a href="writing-nextflow-plugin-ii.adoc" class="bare">writing-nextflow-plugin-ii.adoc</a></p> </li> <li> <p>Part 3: Testing Nextflow Plugins with Spock (You Are Here)</p> </li> <li> <p>Part 4: Publishing Documentation and Generating a GitHub Release <a href="writing-nextflow-plugin-iv.adoc" class="bare">writing-nextflow-plugin-iv.adoc</a></p> </li> </ul> </div> <div class="paragraph"> <p>Robust testing is key to reliability. Here, you&#8217;ll learn how to leverage the powerful Spock Framework to write effective unit and integration tests for your Nextflow plugin components.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>This kind of tests can&#8217;t be used in a complete pipeline. For example, you can&#8217;t test a full Kubernetes executor (or at least not easily) but using this approach you can validate how your plugin works in a more realistic situation than simple unit tests</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="nf_math">nf-math</h2> <div class="sectionbody"> <div class="paragraph"> <p>In this post we&#8217;ll use the nf-math plugin we created in the first post.</p> </div> <div class="paragraph"> <p>We created a <code>test.nf</code> (and a <code>nextflow.config</code>) and we show our plugin in action executing nextflow in a terminal.</p> </div> <div class="paragraph"> <p>Now we&#8217;ll create a <code>NfDslSpec</code> Spock test to integrate this kind of validations into our build process</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Spock is a test framework similar to JUnit. You can create tests with JUnit, but Nexflow provides some utilities that make our tests straightforward to use</p> </dd> </dl> </div> <div class="paragraph"> <p>Create a <code>NfDslSpec.groovy</code> file at <code>src/main/test/incsteps/plugin</code> (where incsteps is the package name I choosed for my plugin. Use your package instead)</p> </div> <div class="paragraph"> <p>Declare the class</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>class NfDslSpec extends Dsl2Spec{ <i class="conum" data-value="1"></i><b>(1)</b> @Shared String pluginsMode <i class="conum" data-value="2"></i><b>(2)</b></code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>Instead from Specification we&#8217;ll use a Dsl2Speec class from Nextflow</td> </tr> <tr> <td><i class="conum" data-value="2"></i><b>2</b></td> <td>We&#8217;ll use to start and stop our plugin</td> </tr> </table> </div> <div class="paragraph"> <p>Create a setup and cleanup. Spock will execute these methods every time it start/finish a test</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code> def setup() { PluginExtensionProvider.reset() pluginsMode = System.getProperty('pf4j.mode') System.setProperty('pf4j.mode', 'dev') def root = Path.of('.').toAbsolutePath().normalize() def manager = new TestPluginManager(root){ @Override protected PluginDescriptorFinder createPluginDescriptorFinder() { return new TestPluginDescriptorFinder(){ @Override protected Manifest readManifestFromDirectory(Path pluginPath) { def manifestPath= getManifestPath(pluginPath) final input = Files.newInputStream(manifestPath) return new Manifest(input) } protected Path getManifestPath(Path pluginPath) { return pluginPath.resolve('build/tmp/jar/MANIFEST.MF') } } } } Plugins.init(root, 'dev', manager) } def cleanup() { Plugins.stop() PluginExtensionProvider.reset() pluginsMode ? System.setProperty('pf4j.mode',pluginsMode) : System.clearProperty('pf4j.mode') }</code></pre> </div> </div> <div class="paragraph"> <p>Basically we&#8217;ll integrate our tests with the Pf4j library used by Nextflow instead to use the "installed" plugin</p> </div> <div class="paragraph"> <p>Now create as many tests as you think will be necessary to ensure quality to your plugin</p> </div> <div class="paragraph"> <p>For example, we&#8217;ll validate the plugin calculate and return values for a list of doubles:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code> def 'should calculate some values' () { when: def SCRIPT = """ include { calculate_stats } from 'plugin/nf-math' Channel.of( [1.0, 2, 3.0, 21.2] ) .map{ values -&gt; calculate_stats( values ) } .view() """ and: def result = new MockScriptRunner([ math:[ max: -1 ] ]).setScript(SCRIPT).execute() then: result.val == [max:21.2, min:1.0, mean:6.8, median:2.5, stddev:9.634659654947166] result.val == Channel.STOP }</code></pre> </div> </div> <div class="paragraph"> <p><code>def 'should calculate some values' ()</code> is the starting point of our plugin. As you realize the name of the method can be a sentence describing the intent of the test</p> </div> <div class="paragraph"> <p>SCRIPT is a simple String where we define the pipeline to be executed. As you can see we use the <code>include</code> directive, Channel objet and operators as <code>map</code> or <code>view</code></p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>View is a good operator to use as we&#8217;ll validate the values returned by the pipeline</p> </dd> </dl> </div> <div class="paragraph"> <p>We use a <code>MockScriptRunner</code> provided by Nextflow to create a "light" version of the nextflow environment where run the pipeline. As you can see the first parameter is a Map you can use to provide configuration to the execution similar to a <code>nextflow.config</code></p> </div> <div class="paragraph"> <p>As our pipeline only returns a row (and them the pipeline ends) we can validate the values of the return</p> </div> <div class="paragraph"> <p>You can/must create more test and validate as many situations as you can, simply create more "def should" methods</p> </div> </div> </div> Starting a Nexflow plugin from scratch, part III Writing (and publishing) a Nextflow Plugin IV Jorge Aguilera 2025-09-30T00:00:00Z https://blog.jagedn.dev/blog/2025/writing-nextflow-plugin-iv.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Welcome to this comprehensive four-part series on developing and publishing your own Nextflow plugins!</p> </div> <div class="paragraph"> <p>Nextflow plugins allow you to extend the core functionality of Nextflow, making your pipelines more powerful, flexible, and integrated with external systems. Whether you&#8217;re looking to add custom executors, integrate cloud services, or enhance reporting, this series has you covered from initial concept to final release.</p> </div> <div class="paragraph"> <p>Use the links below to easily navigate the entire series:</p> </div> <div class="ulist"> <ul> <li> <p>Part 1: Introduction and Creating a Nextflow Plugin <a href="writing-nextflow-plugin.adoc" class="bare">writing-nextflow-plugin.adoc</a></p> </li> <li> <p>Part 2: Adding Configuration to Your Nextflow Plugin <a href="writing-nextflow-plugin-ii.adoc" class="bare">writing-nextflow-plugin-ii.adoc</a></p> </li> <li> <p>Part 3: Testing Nextflow Plugins with Spock <a href="writing-nextflow-plugin-iii.adoc" class="bare">writing-nextflow-plugin-iii.adoc</a></p> </li> <li> <p>Part 4: Publishing Documentation and Generating a GitHub Release (You Are Here)</p> </li> </ul> </div> <div class="paragraph"> <p>This article guides you through generating clear documentation and standardizing your release process using GitHub Actions and features, ensuring your work is easily discoverable and adoptable by the community.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>It&#8217;s important to note that the approach presented here—specifically the use of GitHub Actions for documentation and releases—is my personal, non-official workflow. Nextflow doesn&#8217;t mandate a specific release tool, so feel free to adapt this process to your own preferred platform.</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="build_and_test">Build and Test</h2> <div class="sectionbody"> <div class="paragraph"> <p>We can use GitHub to check every change running our tests.</p> </div> <div class="paragraph"> <p>Create a folder in the root of the project <code>.github/workflows/</code> (<strong>pay attention to the dot in github folder</strong> )</p> </div> <div class="paragraph"> <p>Create a <code>build.yaml</code> file (name doesn&#8217;t matter only the extension)</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>name: build on: push: branches: - '*' tags-ignore: - '*' pull_request: branches: - '*' jobs: build: name: Build if: "!contains(github.event.head_commit.message, '[ci skip]')" runs-on: ubuntu-latest timeout-minutes: 10 strategy: fail-fast: false matrix: java_version: [17] steps: - name: Environment run: env | sort - name: Checkout uses: actions/checkout@v1 with: fetch-depth: 1 submodules: true - name: Setup Java ${{ matrix.java_version }} uses: actions/setup-java@v1 with: java-version: ${{matrix.java_version}} architecture: x64 - name: Compile run: ./gradlew assemble - name: Tests run: ./gradlew check env: GRADLE_OPTS: '-Dorg.gradle.daemon=false'</code></pre> </div> </div> <div class="paragraph"> <p>Once merged this file, GitHub will run a <code>./gradlew assemble check</code> in every commit, in all branches, all PR, etc</p> </div> <div class="paragraph"> <p>If some test fails, we&#8217;ll receive a notification.</p> </div> </div> </div> <div class="sect1"> <h2 id="asciidoctor">Asciidoctor</h2> <div class="sectionbody"> <div class="paragraph"> <p>I&#8217;m a big (big big) fan of Asciidoctor (<a href="https://asciidoctor.org/" class="bare">https://asciidoctor.org/</a>) and as it has a Gradle plugin one of the "extra" features I like to include in my plugins documentation using it.</p> </div> <div class="sect2"> <h3 id="gradle">Gradle</h3> <div class="paragraph"> <p>Add the plugin into <code>plugins</code> closure of <code>build.gradle</code></p> </div> <div class="listingblock"> <div class="title">build.gradle</div> <div class="content"> <pre class="prettyprint highlight"><code>plugins { id 'org.asciidoctor.jvm.convert' version '3.3.2' <i class="conum" data-value="1"></i><b>(1)</b> id 'io.nextflow.nextflow-plugin' version '1.0.0-beta.9' }</code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>Add the asciidoctor plugin</td> </tr> </table> </div> <div class="paragraph"> <p>Create the asciidoctor configuration</p> </div> <div class="listingblock"> <div class="title">build.gradle</div> <div class="content"> <pre class="prettyprint highlight"><code>asciidoctor{ <i class="conum" data-value="1"></i><b>(1)</b> resources { from('src/docs/asciidoc/images') { include '**/*.png' } into './images' } }</code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>Add to the end of build.gradle</td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="index_adoc">Index.adoc</h3> <div class="paragraph"> <p>Create your first <code>index.adoc</code> page at <code>src/docs/asciidoc</code> folder</p> </div> <div class="listingblock"> <div class="title">index.adoc</div> <div class="content"> <pre class="prettyprint highlight"><code>= nf-csvext Jorge Aguilera &lt;jorge@incsteps.com&gt; :toc: left :imagesdir: images == Install To install the plugin, add the plugin into your `nextflow.config` blablabla</code></pre> </div> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Asciidoctor will convert all <code>.adoc</code> files to <code>.html</code> so you can create several pages and link all of them, for example</p> </dd> </dl> </div> </div> <div class="sect2"> <h3 id="github_pages">Github Pages</h3> <div class="paragraph"> <p>If you use GitHub (in case you use others as Gitlab for example process is very similar) you need to prepare your repository:</p> </div> <div class="ulist"> <ul> <li> <p>go to settings</p> </li> <li> <p>select pages</p> </li> <li> <p>set "Build and deployment Source" as "Github Actions"</p> </li> </ul> </div> <div class="paragraph"> <p>Them create a <code>ghpages.yml</code> file (ghpages can be whatever but extension needs to be <code>yml</code> or <code>yaml</code>) in the <code>.github/workflows/</code> folder:</p> </div> <div class="listingblock"> <div class="title">ghpages.yml</div> <div class="content"> <pre class="prettyprint highlight"><code>name: ghpages on: push: branches: - 'main' <i class="conum" data-value="1"></i><b>(1)</b> workflow_dispatch: permissions: contents: read pages: write id-token: write concurrency: group: "pages" cancel-in-progress: false jobs: build: name: Build docu runs-on: ubuntu-latest timeout-minutes: 90 steps: - name: Environment run: env | sort - uses: actions/checkout@v4 - name: Set up JDK for x64 uses: actions/setup-java@v3 with: java-version: '17' distribution: 'temurin' architecture: x64 - name: Generate run: ./gradlew asciidoctor - name: Upload artifact uses: actions/upload-pages-artifact@v3.0.1 with: path: ./build/docs/asciidoc publish-ghpages: needs: build runs-on: ubuntu-latest environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} steps: - name: Deploy to GitHub Pages id: deployment uses: actions/deploy-pages@v4</code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>adjust it in case you use other as <code>master</code> for example</td> </tr> </table> </div> <div class="paragraph"> <p>Once committed and merged in the main branch, next merges will fire a GitHub action to build a static site and publish it in the repository GitHub pages. For example, if my repo is <code>github.com/incsteps/nf-csvext</code> the url will be <a href="https://incsteps.github.io/nf-csvext" class="bare">https://incsteps.github.io/nf-csvext</a></p> </div> </div> </div> </div> <div class="sect1"> <h2 id="tag_and_release">Tag and Release</h2> <div class="sectionbody"> <div class="paragraph"> <p>Another feature GitHub Actions allows us is to automatically generate and publish a new release when we create a <strong>tag</strong> in our repo</p> </div> <div class="sect2"> <h3 id="secret">Secret</h3> <div class="paragraph"> <p>First, we need to add our NPR_API_KEY token to our repository as a <strong>secret</strong>:</p> </div> <div class="ulist"> <ul> <li> <p>Goto settings</p> </li> <li> <p>Secrets and Variables</p> </li> <li> <p>Actions</p> </li> <li> <p>New repository secret</p> </li> </ul> </div> <div class="paragraph"> <p>And create a new secret with your token. We&#8217;ll use NPR_API_KEY but can be whatever</p> </div> </div> <div class="sect2"> <h3 id="github_action">Github Action</h3> <div class="paragraph"> <p>Them, in your repo, create a <code>release.yaml</code> file in the <code>.github/workflows</code> folder (as with ghpages the name doesn&#8217;t matter only the extension)</p> </div> <div class="listingblock"> <div class="title">release.yml</div> <div class="content"> <pre class="prettyprint highlight"><code>name: release on: push: tags: - '[0-9]+.[0-9]+.[0-9]+' - '[0-9]+.[0-9]+.[0-9]+-edge[0-9]+' permissions: contents: write jobs: build: name: Build runs-on: ubuntu-latest timeout-minutes: 90 strategy: fail-fast: false matrix: java_version: [19] steps: - name: Environment run: env | sort - name: Checkout uses: actions/checkout@v1 with: fetch-depth: 1 submodules: true - name: Setup Java ${{ matrix.java_version }} uses: actions/setup-java@v1 with: java-version: ${{matrix.java_version}} architecture: x64 - name: Compile run: ./gradlew assemble - name: Tests run: ./gradlew check env: GRADLE_OPTS: '-Dorg.gradle.daemon=false' publish-gpr: needs: build runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: Set up JDK 19 for x64 uses: actions/setup-java@v3 with: java-version: '19' distribution: 'temurin' architecture: x64 - name: build artifacts run: ./gradlew clean installPlugin -x test -P version=${GITHUB_REF#refs/tags/} - name: Upload artifact and release uses: softprops/action-gh-release@v2 with: draft: false prerelease: false body_path: CHANGELOG.md files: | ./build/distributions/* - name: publish release env: NPR_API_KEY: ${{ secrets.NPR_API_KEY }} run: ./gradlew releasePlugin -x test -P version=${GITHUB_REF#refs/tags/}</code></pre> </div> </div> <div class="paragraph"> <p>Basically, we&#8217;re telling to GitHub we want to run this pipeline when a new <strong>tag</strong> is created. This tag needs to follow a semver pattern (0.0.1, 1.22.33), also we&#8217;ll allow "release candidates" identified by <code>edge-XXX</code> suffix.</p> </div> <div class="paragraph"> <p>You can change this behavior and use your pattern if you want</p> </div> </div> <div class="sect2"> <h3 id="create_a_release">Create a Release</h3> <div class="paragraph"> <p>When you&#8217;re ready to publish a new release click in your GitHub repository page at "Releases"</p> </div> <div class="ulist"> <ul> <li> <p>Draft a new release</p> </li> <li> <p>Create a tag (remember to use the semver notation)</p> </li> <li> <p>Give a title</p> </li> <li> <p>Generate a release notes</p> </li> <li> <p>Publish the release</p> </li> </ul> </div> <div class="paragraph"> <p>Once you publish the release GitHub will create the tag and your pipeline will be executed.</p> </div> <div class="paragraph"> <p>The pipeline will build and test last version of your plugin and if all goes well it will send your to the registry ( <code>./gradlew releasePlugin -x test -P version=${GITHUB_REF#refs/tags/}</code> )</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Also, the action will attach the artifacts to the release as future references</p> </dd> </dl> </div> <div class="paragraph"> <p>And this is all. Once the plugin is approved, it will be ready to be used by the community!!!</p> </div> </div> </div> </div> Starting a Nexflow plugin from scratch, part IV Writing (and publishing) a Nextflow Plugin II Jorge Aguilera 2025-09-28T00:00:00Z https://blog.jagedn.dev/blog/2025/writing-nextflow-plugin-ii.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Welcome to this comprehensive four-part series on developing and publishing your own Nextflow plugins!</p> </div> <div class="paragraph"> <p>Nextflow plugins allow you to extend the core functionality of Nextflow, making your pipelines more powerful, flexible, and integrated with external systems. Whether you&#8217;re looking to add custom executors, integrate cloud services, or enhance reporting, this series has you covered from initial concept to final release.</p> </div> <div class="paragraph"> <p>Use the links below to easily navigate the entire series:</p> </div> <div class="ulist"> <ul> <li> <p>Part 1: Introduction and Creating a Nextflow Plugin <a href="writing-nextflow-plugin-iv.adoc" class="bare">writing-nextflow-plugin-iv.adoc</a></p> </li> <li> <p>Part 2: Adding Configuration to Your Nextflow Plugin (You Are Here)</p> </li> <li> <p>Part 3: Testing Nextflow Plugins with Spock <a href="writing-nextflow-plugin-iii.adoc" class="bare">writing-nextflow-plugin-iii.adoc</a></p> </li> <li> <p>Part 4: Publishing Documentation and Generating a GitHub Release <a href="writing-nextflow-plugin-iv.adoc" class="bare">writing-nextflow-plugin-iv.adoc</a></p> </li> </ul> </div> <div class="paragraph"> <p>Moving beyond the basic setup, this post dives into how to define, manage, and access custom configuration within your plugin, making it truly adaptable for various user environments.</p> </div> <div class="paragraph"> <p>To have a more interesting plugin, we&#8217;ll create a new <code>nf-llm</code> plugin following the steps explained in the previous post.</p> </div> <div class="paragraph"> <p>This new plugin will allow the user to store messages in an Embedded store and "chat" with an LLM at the end of the pipeline about the messages collected during the execution</p> </div> <div class="paragraph"> <p>For example, a simple pipeline can be</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>include { addMessage; chat } from 'plugin/nf-llm' channel.of( 'hi', 'this is a simple sentence generated at '+new Date(), 'dont be shine and give me a hi' ) .subscribe( onNext: { v -&gt; addMessage v }, onComplete: { println chat("Generate a brief of the conversation") })</code></pre> </div> </div> <div class="paragraph"> <p>Imagine instead a simple channel of strings you can call <code>addMessage</code> in every process executed and once completed the pipeline you can request to the LLM to generate a report, analyze times, &#8230;&#8203;</p> </div> <div class="paragraph"> <p>For the sake of simplicity, our plugin will use Google Gemini (but can be easily replaced with OpenAI, Ollama, etc), so the user needs to provide his <code>apiKey</code> in the <code>nextflow.config</code> . Also, the user will be allowed to specify which model to use in their pipeline:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>plugins { id "nf-llm@0.1.0" } llm{ model = "gemini-2.5-flash" apiKey = "AIzaSy------" }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="creating_our_new_plugin">Creating our new plugin</h2> <div class="sectionbody"> <div class="paragraph"> <p>Following the previous post, we have a new plugin created, so now is the time to add our logic:</p> </div> <div class="ulist"> <ul> <li> <p>add dependencies</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code> implementation "dev.langchain4j:langchain4j:1.4.0" implementation "dev.langchain4j:langchain4j-embeddings-all-minilm-l6-v2:1.4.0-beta10" implementation "dev.langchain4j:langchain4j-google-ai-gemini:1.4.0"</code></pre> </div> </div> <div class="ulist"> <ul> <li> <p>create an Assistant interface</p> </li> </ul> </div> <div class="listingblock"> <div class="title">src/main/groovy/incsteps.plugin/Assistant.groovy</div> <div class="content"> <pre class="prettyprint highlight"><code>package incsteps.plugin interface Assistant { String chat(String prompt) }</code></pre> </div> </div> <div class="ulist"> <ul> <li> <p>create an LlmFactory</p> </li> </ul> </div> <div class="listingblock"> <div class="title">src/main/groovy/incsteps.plugin/LlmFactory.groovy</div> <div class="content"> <pre class="prettyprint highlight"><code>import dev.langchain4j.data.segment.TextSegment import dev.langchain4j.memory.chat.MessageWindowChatMemory import dev.langchain4j.model.chat.ChatModel import dev.langchain4j.model.embedding.EmbeddingModel import dev.langchain4j.model.embedding.onnx.allminilml6v2.AllMiniLmL6V2EmbeddingModel import dev.langchain4j.model.googleai.GoogleAiGeminiChatModel import dev.langchain4j.rag.content.retriever.EmbeddingStoreContentRetriever import dev.langchain4j.service.AiServices import dev.langchain4j.store.embedding.EmbeddingStore import dev.langchain4j.store.embedding.inmemory.InMemoryEmbeddingStore class LlmFactory { static EmbeddingModel embeddingModel(){ new AllMiniLmL6V2EmbeddingModel() } static EmbeddingStore&lt;TextSegment&gt; embeddingStore() { new InMemoryEmbeddingStore() } static ChatModel chatModel(String model, String apiKey){ return GoogleAiGeminiChatModel.builder() .apiKey(apiKey) .modelName(model) .temperature(0.8) .build(); } static Assistant assistant(ChatModel model, EmbeddingStore embeddingStore){ return AiServices.builder(Assistant.class) .chatModel(model) .chatMemory(MessageWindowChatMemory.withMaxMessages(Integer.MAX_VALUE)) .contentRetriever (EmbeddingStoreContentRetriever .builder() .maxResults(30) .embeddingStore(embeddingStore) .build()) .build(); } }</code></pre> </div> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Basically, we are creating our "business logic" following Langchain4j tutorials creating a series of artifacts required to build an <code>Assistant</code> how use an InMemory storage as knowledge repository</p> </dd> </dl> </div> <div class="paragraph"> <p>By the moment, nothing special relates to our Nextflow Plugin</p> </div> </div> </div> <div class="sect1"> <h2 id="configuration">Configuration</h2> <div class="sectionbody"> <div class="paragraph"> <p>We&#8217;ll create a new class to represent our configuration requirements (remember, a model and an apiKey)</p> </div> <div class="listingblock"> <div class="title">src/main/groovy/incsteps.plugin/PluginConfig.groovy</div> <div class="content"> <pre class="prettyprint highlight"><code>class PluginConfig { final String model final String apiKey private PluginConfig(String model, String apiKey){ this.model = model this.apiKey = apiKey } static PluginConfig fromMap(Map config){ assert config.containsKey("apiKey") String model = config.model ? config.model.toString() : "gemini-2.5-flash" String apiKey = config.apiKey.toString() new PluginConfig(model, apiKey) } }</code></pre> </div> </div> <div class="paragraph"> <p>As you can see, this is a simple Java Bean. You can model as you want, but basically the idea is to retrieve values from a Map. In my example, the only way to create a PluginConfig is using the <code>static fromMap</code> method</p> </div> <div class="paragraph"> <p>This Map can be retrieved from the <code>Session</code> in our <code>NfLlmExtension</code> (created by nextflow)</p> </div> <div class="listingblock"> <div class="title">src/main/groovy/incsteps.plugin/NfLlmExtension.groovy</div> <div class="content"> <pre class="prettyprint highlight"><code>class NfLlmExtension extends PluginExtensionPoint { private PluginConfig llmConfig @Override protected void init(Session session) { llmConfig = session.config.containsKey("llm") ? session.config.llm as Map : [:] .... }</code></pre> </div> </div> <div class="paragraph"> <p>Once all plugins are loaded, Nextflow will initialize all Extensions calling their <code>init</code> method. This is the moment to check and validate our configuration</p> </div> </div> </div> <div class="sect1"> <h2 id="initializing_our_function">Initializing our Function</h2> <div class="sectionbody"> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>Our function requires to be initialized, maybe yours no, so you can skip this part</p> </dd> </dl> </div> <div class="paragraph"> <p>As our function wants to store intermediate messages in the storage we need to initialize:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code> protected void init(Session session) { def llmConfig = session.config.containsKey("llm") ? session.config.llm as Map : [:] initAssistant( PluginConfig.fromMap( llmConfig ) ) } private Assistant assistant private EmbeddingModel embeddingModel private EmbeddingStore embeddingStore void initAssistant(PluginConfig config){ embeddingModel = LlmFactory.embeddingModel() embeddingStore = LlmFactory.embeddingStore() def chatModel = LlmFactory.chatModel(config.model, config.apiKey) assistant = LlmFactory.assistant(chatModel, embeddingStore) }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="exposing_functions">Exposing functions</h2> <div class="sectionbody"> <div class="paragraph"> <p>Now our plugin is fully configured and initialized we can expose our functions to the pipeline, as we did with the nf-math plugin:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code> @Function void addMessage(String target) { def segment = TextSegment.from(target) def embedding = embeddingModel.embed(segment) embeddingStore.add( embedding.content(), segment ) } @Function String chat(String msg) { assistant.chat(msg) }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="validating">Validating</h2> <div class="sectionbody"> <div class="paragraph"> <p>Once compiled and "installed" (remember <code>installPlugin</code> Gradle task?) We can run our <code>test.nf</code></p> </div> <div class="paragraph"> <p>To validate config is applied, we&#8217;ll try some "invalid" values. For examples remove apiKey from configuration</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>plugins { id "nf-llm@0.1.0" } llm{ model = "gemini-2.5-flash" // remove or set to null: apiKey = null }</code></pre> </div> </div> <div class="paragraph"> <p>Will fail as <code>apiKey</code> is required by PluginConfig</p> </div> <div class="paragraph"> <p>You can change also, <code>model</code> with "gemini-2.5" and compare the result with the flash model, etc</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Remember, this is the "dirty"/"quick" way. You can/need to create tests and validate all uses cases</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="executing">Executing</h2> <div class="sectionbody"> <div class="paragraph"> <p>Once configured the plugin, I can run the pipeline and "chat" with my LLM:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>nextflow run test.nf N E X T F L O W ~ version 25.04.7 Launching `test.nf` [extravagant_linnaeus] DSL2 - revision: 7e8c5f63b0 The conversation begins with a "hi" and describes itself as a simple sentence generated on Sun Sep 28 11:11:09 CEST 2025. It concludes by requesting a "hi" back, advising the recipient not to be shy.</code></pre> </div> </div> </div> </div> Starting a Nexflow plugin from scratch, second part Writing (and publishing) a Nextflow Plugin Jorge Aguilera 2025-09-26T00:00:00Z https://blog.jagedn.dev/blog/2025/writing-nextflow-plugin.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Welcome to this comprehensive four-part series on developing and publishing your own Nextflow plugins!</p> </div> <div class="paragraph"> <p>Nextflow plugins allow you to extend the core functionality of Nextflow, making your pipelines more powerful, flexible, and integrated with external systems. Whether you&#8217;re looking to add custom executors, integrate cloud services, or enhance reporting, this series has you covered from initial concept to final release.</p> </div> <div class="paragraph"> <p>Use the links below to easily navigate the entire series:</p> </div> <div class="ulist"> <ul> <li> <p>Part 1: Introduction and Creating a Nextflow Plugin (You Are Here)</p> </li> <li> <p>Part 2: Adding Configuration to Your Nextflow Plugin <a href="writing-nextflow-plugin-ii.adoc" class="bare">writing-nextflow-plugin-ii.adoc</a></p> </li> <li> <p>Part 3: Testing Nextflow Plugins with Spock <a href="writing-nextflow-plugin-iii.adoc" class="bare">writing-nextflow-plugin-iii.adoc</a></p> </li> <li> <p>Part 4: Publishing Documentation and Generating a GitHub Release <a href="writing-nextflow-plugin-iv.adoc" class="bare">writing-nextflow-plugin-iv.adoc</a></p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="intro">Intro</h2> <div class="sectionbody"> <div class="paragraph"> <p>Some useful links as introduction reference:</p> </div> <div class="ulist"> <ul> <li> <p><a href="https://www.nextflow.io/docs/latest/plugins/plugins.html" class="bare">https://www.nextflow.io/docs/latest/plugins/plugins.html</a></p> </li> <li> <p><a href="https://www.nextflow.io/docs/latest/plugins/developing-plugins.html" class="bare">https://www.nextflow.io/docs/latest/plugins/developing-plugins.html</a></p> </li> <li> <p><a href="https://www.nextflow.io/docs/latest/plugins/plugin-registry.html" class="bare">https://www.nextflow.io/docs/latest/plugins/plugin-registry.html</a></p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="language">Language</h2> <div class="sectionbody"> <div class="paragraph"> <p>Nextflow is mainly written in Apache Groovy (4.x) language. Groovy is one of the "JVM language" similar to Java, Kotlin or Scala</p> </div> <div class="paragraph"> <p>I&#8217;ll use Groovy as the main language, but if you feel more comfortable with Java steps and syntax are very similar, so it&#8217;s not complicated to code the plugin in Java and it&#8217;ll work</p> </div> </div> </div> <div class="sect1"> <h2 id="nextflow_plugin_features">Nextflow plugin features</h2> <div class="sectionbody"> <div class="paragraph"> <p>A plugin can provide different features to the Nextflow ecosystem:</p> </div> <div class="ulist"> <ul> <li> <p>Function(s). Instead of populating and repeating the same code across all your pipelines, you can create a plugin with several functions. For example, a "validate_params" function can validate if the provided params are ok following your own logic</p> </li> <li> <p>Operator(s). Similar to a function but oriented to work with a DataFlow. It receives a DataflowReadChannel and provides a DataflowWriteChannel. The operator will be notified when an input is ready in the read channel and it can emit an output when considered necessary</p> </li> <li> <p>Factory(s). Similar to operators but oriented to produce data. It returns a DataflowWriteChannel where emit values. Can be configured with params if you desired</p> </li> <li> <p>Observer(s). A plugin can be notified about the progress execution of the pipeline using Observers so you can create your own report, abort the process, etc</p> </li> <li> <p>Executor. Maybe the most complicated feature (at least to me). You can create a new Executor and it will work with Core executing new Tasks when Core required. You need to maintain/provide also the status of every one</p> </li> <li> <p>Command. Your plugin can provide command to be executed "outside" the execution of a pipeline. For example it can provide a "send-reports-to-our-backend" command to zip all the reports and upload it to your backend server</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="our_plugin">Our plugin</h2> <div class="sectionbody"> <div class="paragraph"> <p>For the sake of simplicity, in this post we&#8217;ll create a simple plugin with some functions and operators.</p> </div> <div class="paragraph"> <p>Our plugin will be a Math utility with following features:</p> </div> <div class="ulist"> <ul> <li> <p>some math functions to work with a List (as max, min, average, &#8230;&#8203;)</p> </li> <li> <p>a operator to calculate some stats of items in a channel. Similar to the functions but reading from a channel</p> </li> </ul> </div> <div class="paragraph"> <p>For sure, for this example, we can implement all the logic in our plugin but as an example of how to use open source libraries, I&#8217;ll use Apache Math for math operations.</p> </div> </div> </div> <div class="sect1"> <h2 id="requirements">Requirements</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Java 17 (you can use sdkman to install and manage different versions easily)</p> </li> <li> <p>IntelliJ Community Edition as IDE (I dont like VSCode, sorry)</p> </li> <li> <p>Nextflow installed</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="create_the_plugin">Create the plugin</h2> <div class="sectionbody"> <div class="paragraph"> <p>In you dev folder execute:</p> </div> <div class="paragraph"> <p><code>nextflow plugin create</code></p> </div> <div class="ulist"> <ul> <li> <p>plugin name: nf-math</p> </li> <li> <p>organization: Incremental Steps (use yours)</p> </li> <li> <p>project path: nf-math</p> </li> </ul> </div> <div class="paragraph"> <p>Open the nf-math folder with IntelliJ and compile the project using the <code>build</code> gradle task (you can find it in the "Gradle" toolbar, at the left)</p> </div> <div class="paragraph"> <p>If all goes well, now we&#8217;ll try to "install" it in our local, so execute the <code>installPlugin</code> gradle task under <code>nextflow plugin</code> section</p> </div> <div class="paragraph"> <p>Create a subfolder <code>validation</code> (or whatever) and create our first pipeline</p> </div> <div class="listingblock"> <div class="title">nextflow.config</div> <div class="content"> <pre class="prettyprint highlight"><code>plugins { id "nf-math@0.1.0" <i class="conum" data-value="1"></i><b>(1)</b> }</code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>you can find current version value at <code>build.gradle</code></td> </tr> </table> </div> <div class="listingblock"> <div class="title">test.nf</div> <div class="content"> <pre class="prettyprint highlight"><code>include { sayHello } from 'plugin/nf-math' sayHello("hi")</code></pre> </div> </div> <div class="paragraph"> <p>Now, you can run your pipeline:</p> </div> <div class="paragraph"> <p><code>nextflow run test.nf</code></p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>Launching `test.nf` [disturbed_bose] DSL2 - revision: 93fbf85726 Pipeline is starting! 🚀 Hello, hi! Pipeline complete! 👋</code></pre> </div> </div> <div class="paragraph"> <p>Congratulations!!! Your first plugin is alive</p> </div> </div> </div> <div class="sect1"> <h2 id="removing_not_desired_features">Removing not desired features</h2> <div class="sectionbody"> <div class="paragraph"> <p>We&#8217;ll remove some features created by Nextflow</p> </div> <div class="paragraph"> <p>Delete following files:</p> </div> <div class="ulist"> <ul> <li> <p>src/main/groovy/incrementalsteps/plugin/NfMathFactory</p> </li> <li> <p>src/main/groovy/incrementalsteps/plugin/NfMathObserver</p> </li> <li> <p>src/test/groovy/incrementalsteps/plugin/NfMathObserverTest</p> </li> </ul> </div> <div class="paragraph"> <p>In <code>build.gradle</code> change</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>extensionPoints = [ 'incrementalsteps.plugin.NfMathExtension', 'incrementalsteps.plugin.NfMathFactory' ]</code></pre> </div> </div> <div class="paragraph"> <p>by</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>extensionPoints = [ 'incrementalsteps.plugin.NfMathExtension', ]</code></pre> </div> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>As our plugin will provide only function and operators, we remove Factory and Observer.</p> </dd> </dl> </div> <div class="paragraph"> <p>Rerun the <code>installPlugin</code> task and execute again the <code>test.nf</code> plugin. This time you will see only</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>Launching `test.nf` [disturbed_bose] DSL2 - revision: 93fbf85726 Hello, hi!</code></pre> </div> </div> <div class="paragraph"> <p>Great, we have a starting point for our plugin</p> </div> </div> </div> <div class="sect1"> <h2 id="add_commons_math_dependency">Add commons-math dependency</h2> <div class="sectionbody"> <div class="paragraph"> <p>As our plugin will use Apache Math, we&#8217;ll include it as a dependency in our <code>build.gradle</code>:</p> </div> <div class="listingblock"> <div class="title">build.gradle</div> <div class="content"> <pre class="prettyprint highlight"><code>dependencies{ implementation 'org.apache.commons:commons-math3:3.6.1' <i class="conum" data-value="1"></i><b>(1)</b> }</code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>You can put it at the end of the file, but I like to put after plugins block, at the beginning</td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="our_first_function">Our first Function</h2> <div class="sectionbody"> <div class="paragraph"> <p>Open <code>NfMathExtension.groovy</code> and remove the function sayHello (don&#8217;t forget to remove also the annotation @Function)</p> </div> <div class="paragraph"> <p>Create our first function</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>@Function Map calculate_stats( List&lt;Double&gt; values) { def descriptiveStatistics = new DescriptiveStatistics() <i class="conum" data-value="1"></i><b>(1)</b> for(double d : values){ descriptiveStatistics.addValue(d) } [ max: descriptiveStatistics.max, min: descriptiveStatistics.min, mean : descriptiveStatistics.mean, median: descriptiveStatistics.getPercentile(50), stddev: descriptiveStatistics.standardDeviation ] }</code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>Include import if intellij doesn&#8217;t include it automatically</td> </tr> </table> </div> <div class="paragraph"> <p>Basically our function will receive a list of numbers and will return a map with some stats</p> </div> <div class="paragraph"> <p>Ejecute the <code>installPlugin</code> again</p> </div> <div class="paragraph"> <p>Reuse our <code>test.nf</code> or create a new one:</p> </div> <div class="listingblock"> <div class="title">test.nf</div> <div class="content"> <pre class="prettyprint highlight"><code>include { calculate_stats } from 'plugin/nf-math' println calculate_stats( [1.0, 2, 3.0, 21.2] )</code></pre> </div> </div> <div class="paragraph"> <p>and execute it:</p> </div> <div class="paragraph"> <p><code>nextflow run test.nf</code></p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>Launching `test.nf` [crazy_saha] DSL2 - revision: 9e046654f5 [max:21.2, min:1.0, mean:6.8, median:2.5, stddev:9.634659654947166]</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="test">Test</h2> <div class="sectionbody"> <div class="paragraph"> <p>As you realize, We&#8217;ve been testing our tests in a "dirty" way so now we&#8217;ll create a test</p> </div> <div class="listingblock"> <div class="title">src/test/groovy/incrementalsteps/plugin/NfFunctionSpec.groovy</div> <div class="content"> <pre class="prettyprint highlight"><code>class NfFunctionSpec extends Specification { def 'should calculate values for a list' () { given: def list = [0, 1.2, 3, 23.1, 18] def functions = new NfMathExtension() when: def ret = functions.calculate_stats(list) then: ret == [1] } }</code></pre> </div> </div> <div class="paragraph"> <p>This time we&#8217;ll execute the <code>build</code> gradle to be sure our plugin is validated</p> </div> <div class="paragraph"> <p>As you can gess, it will fail because result is not [1]</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>Condition not satisfied: ret == [1] | | | false [max:23.1, min:0.0, mean:9.06, median:3.0, stddev:10.696167537954892]</code></pre> </div> </div> <div class="paragraph"> <p>Fix our test changing the condition expression</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>then: ret == [max:23.1, min:0.0, mean:9.06, median:3.0, stddev:10.696167537954892]</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="publish">Publish</h2> <div class="sectionbody"> <div class="paragraph"> <p>Now our plugin is working fine it&#8217;s time to let the community use it!!!</p> </div> <div class="paragraph"> <p>If you use Github, you can create a repository and commit your changes on it. Then you create your first Release using the Github UI and attach the plugin binary</p> </div> <div class="paragraph"> <p>To generate the binary you need to execute the <code>packagePlugin</code> and upload the zip located in <code>build/distributions</code> folder</p> </div> <div class="paragraph"> <p>Users can execute your plugin using the NXF_PLUGINS_TEST_REPOSITORY env as explaining in <a href="https://www.nextflow.io/docs/latest/plugins/developing-plugins.html" class="bare">https://www.nextflow.io/docs/latest/plugins/developing-plugins.html</a></p> </div> <div class="paragraph"> <p>But if you&#8217;re confidence with your plugin and want everyone uses it you can publish in the official repository:</p> </div> <div class="ulist"> <ul> <li> <p>Create an account at <a href="https://registry.nextflow.io/" class="bare">https://registry.nextflow.io/</a></p> </li> <li> <p>Create an access token at <a href="https://registry.nextflow.io/access-tokens" class="bare">https://registry.nextflow.io/access-tokens</a> (grab it in a secure place and never include it in any repository)</p> </li> <li> <p>Register/Claim the plugin <a href="https://registry.nextflow.io/claim-plugin" class="bare">https://registry.nextflow.io/claim-plugin</a> (Pay attention the Provider <strong>must</strong> to be same you use when created the plugin and it&#8217;s specified in your <code>build.gradle</code> ). Approval is requiered, but it doesn&#8217;t take so much, at least in my recent claims.</p> </li> </ul> </div> <div class="paragraph"> <p>Open a terminal console and navigate to your plugin folder:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>export NPR_API_KEY=your_token_value ./gradlew clean build installPlugin</code></pre> </div> </div> <div class="paragraph"> <p>If all goes well, your last version plugin will be uploaded to the registry and someone at Sequera will review it and hopefully approve it !!!!!!!!!!!</p> </div> <div class="paragraph"> <p>Now be ready to receive feedback and issues!</p> </div> </div> </div> <div class="sect1"> <h2 id="next_step">Next Step</h2> <div class="sectionbody"> <div class="paragraph"> <p>In the next post we&#8217;ll see how to implement an Operator to consume the double values from a Channel instead as parameters</p> </div> </div> </div> Starting a Nexflow plugin from scratch Debugging Nextfow core/plugins Jorge Aguilera 2025-09-02T00:00:00Z https://blog.jagedn.dev/blog/2025/debug-nextflow.html <div class="sect1"> <h2 id="requirements">Requirements</h2> <div class="sectionbody"> <div class="paragraph"> <p>Say you&#8217;re developing your own Nextflow plugin (or want to learn how Nextflow works internally) and don&#8217;t want to populate your code with thousands of <code>println "passing 1"</code>.</p> </div> <div class="paragraph"> <p>Say you want to debug your code to understand these corner cases that tests are not able to reproduce</p> </div> <div class="paragraph"> <p>In this post, I&#8217;ll show you how easily it is using Intellij (Community Edition is ok). So basically the requirements are:</p> </div> <div class="ulist"> <ul> <li> <p>Intellij as IDE</p> </li> <li> <p>A repository with your code (or the Nextflow core repo)</p> </li> <li> <p>A pipeline to be executed</p> </li> </ul> </div> <div class="paragraph"> <p>I&#8217;ll use <code>nf-parquet</code> as the plugin I want to debug</p> </div> </div> </div> <div class="sect1"> <h2 id="cloning_and_installing_repo">Cloning and installing repo</h2> <div class="sectionbody"> <div class="paragraph"> <p>In a fresh directory you need to grab the project</p> </div> <div class="paragraph"> <p><code>git clone <a href="https://github.com/nextflow-io/nf-parquet" class="bare">https://github.com/nextflow-io/nf-parquet</a></code></p> </div> <div class="paragraph"> <p>Next, we need to build and install the plugin in our machine</p> </div> <div class="paragraph"> <p><code>./gradlew installPlugin</code></p> </div> <div class="paragraph"> <p>This command will compile and install last version of the plugin in our <code>$HOME/.nextflow/plugins</code> folder</p> </div> </div> </div> <div class="sect1"> <h2 id="intellij">IntelliJ</h2> <div class="sectionbody"> <div class="paragraph"> <p>Open the <code>nf-parquet</code> directory with Intellij and let it to reindex the project (hope a few seconds)</p> </div> <div class="paragraph"> <p>In the <code>Project</code> view (at the left) navigate and open <code>ParquetExtension.groovy</code> file</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2025/debug-nextflow-1.png" alt="debug nextflow 1"> </div> </div> <div class="paragraph"> <p>Scroll down until line <code>44</code> and click on the line number. A red dot will show the breakpoint is activated in this line</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2025/debug-nextflow-2.png" alt="debug nextflow 2"> </div> </div> <div class="paragraph"> <p>Now we need to create a "JVM Remote Debug configuration".</p> </div> <div class="paragraph"> <p>Select "Edit configuration":</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2025/debug-nextflow-3.png" alt="debug nextflow 3"> </div> </div> <div class="paragraph"> <p>and create a new JVM Debug configuration:</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2025/debug-nextflow-4.png" alt="debug nextflow 4"> </div> </div> <div class="paragraph"> <p>press OK and accept default values</p> </div> </div> </div> <div class="sect1"> <h2 id="running_the_pipeline">Running the pipeline</h2> <div class="sectionbody"> <div class="paragraph"> <p><code>nf-parquet</code> comes with some simple pipelines to validate it. Open a console terminal and navigate to the <code>validation</code> folder and execute one of them:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>export PARQUET_PLUGIN_VERSION=0.2.1 <i class="conum" data-value="1"></i><b>(1)</b> nextflow -remote-debug run read.nf <i class="conum" data-value="2"></i><b>(2)</b></code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>nextflow.config allows to test different versions of the plugin</td> </tr> <tr> <td><i class="conum" data-value="2"></i><b>2</b></td> <td>pay attention where "-remote-debug" is specified</td> </tr> </table> </div> <div class="paragraph"> <p>If all goes well, the pipeline will be stopped at the start and is waiting for the debug session showing the message <code>Listening for transport dt_socket at address: 5005</code></p> </div> <div class="paragraph"> <p>Go to the Intellij editor and click in the "bug" green button close to the "Unnamed" configuration (in case you didnt provided one)</p> </div> <div class="paragraph"> <p>As soon both JVMs are connected your pipeline will start. When the execution reach the breakpoint it will be stopped and you can inspect the variables, for example:</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2025/debug-nextflow-5.png" alt="debug nextflow 5"> </div> </div> <div class="paragraph"> <p>Uses the debug buttons to "continue", "step by step", etc to continue with the execution of your pipeline</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2025/debug-nextflow-6.png" alt="debug nextflow 6"> </div> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>stop the debug process only "detached" your session, the pipeline will be running</p> </dd> <dt class="hdlist1">INFO</dt> <dd> <p>You dont need to create a new JVM Debug configuration.</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="fixing_code">Fixing code</h2> <div class="sectionbody"> <div class="paragraph"> <p>Say you find where your code is failing, or you want to try something new. Simple change your code, execute again the <code>installPlugin</code> task and repeat the process</p> </div> </div> </div> How to debug your Nextflow's plugin Using parquet files in Nextflow Jorge Aguilera 2025-08-10T00:00:00Z https://blog.jagedn.dev/blog/2025/nextflow-parquet.html <div class="sect1"> <h2 id="csv_vs_parquet">CSV vs Parquet</h2> <div class="sectionbody"> <div class="paragraph"> <p>CSV is a common plain text file format where each line represents a row and fields in each row are separated by a "special" character, usually a comma, tab or pipe</p> </div> <div class="paragraph"> <p>Parquet, by opposite, is a columnar storage file format optimized for analytics. It&#8217;s highly efficient in both storage and performance</p> </div> <div class="paragraph"> <p>In this post I&#8217;ll show you how to deal with Parquet files in your Nextflow pipelines using the <code>nf-parquet</code> plugin</p> </div> </div> </div> <div class="sect1"> <h2 id="csv_generator">CSV generator</h2> <div class="sectionbody"> <div class="paragraph"> <p>We&#8217;ll use a Nextflow script to generate a csv file with random values. By default it will generate a one million rows with 21 fields:</p> </div> <div class="ulist"> <ul> <li> <p>UUID</p> </li> <li> <p>field1, field2, &#8230;&#8203; field10 as random string</p> </li> <li> <p>field11, field12, &#8230;&#8203; field20 as random float</p> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>You can specify how many rows you want using `--rows' parameter</p> </dd> </dl> </div> </li> </ul> </div> <div class="listingblock"> <div class="title">generator.nf</div> <div class="content"> <pre class="prettyprint highlight"><code>import java.util.UUID; params.out = "$baseDir/data/example.csv" params.rows = 1_000_000 alphabet = (('A'..'Z')+('0'..'9')).join() String randomString(int n){ new Random().with { (1..n).collect { alphabet[ nextInt( alphabet.length() ) ] }.join() } } String randomFloat(){ new Random().with{ nextFloat() }.toString() } outFile = new File(params.out) outFile.text = (["uuid"]+(1..20).collect{ "field${it}"}).join(",")+"\n" (1..params.rows).each{ outFile &lt;&lt; ( [ UUID.randomUUID().toString() ] + (1..10).collect{ randomString(new Random().nextInt(10)) } + (1..10).collect{ randomFloat() } ).join(",")+"\n" }</code></pre> </div> </div> <div class="paragraph"> <p><code>nextflow run generator.nf</code></p> </div> <div class="paragraph"> <p>In my case the script create, after 1-minute aprox, a <code>data/example.csv</code> with <strong>191Mb</strong> and one million of rows (plus header)</p> </div> </div> </div> <div class="sect1"> <h2 id="reading_a_csv_file">Reading a CSV file</h2> <div class="sectionbody"> <div class="paragraph"> <p>To parse a CSV file, we can use the <code>splitCSV</code> operator provided by Nextflow:</p> </div> <div class="listingblock"> <div class="title">csv.nf</div> <div class="content"> <pre class="prettyprint highlight"><code>params.input = "$baseDir/data/example.csv" workflow { Channel.fromPath(params.input) .splitCsv(header:true) .count() .view() }</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>$ nextflow run csv.nf N E X T F L O W ~ version 25.02.3-edge Launching `csv.nf` [prickly_heisenberg] DSL2 - revision: 192c2f35f2 1000000</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="reading_a_parquet_file">Reading a Parquet file</h2> <div class="sectionbody"> <div class="paragraph"> <p>Before to work with parquet format we need to convert our CSV.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>We can use online tools to convert a CSV file to Parquet, for example <a href="https://www.tablab.app/csv/to/parquet" class="bare">https://www.tablab.app/csv/to/parquet</a>, or with a simple Nextflow script. By the moment we&#8217;ll use online tool</p> </dd> </dl> </div> <div class="paragraph"> <p>Follow instructions to upload the csv generated and download the "parquet version" into <code>data</code> subfolder, close to the csv version</p> </div> <div class="paragraph"> <p>If you compared the sizes of both files, you can find first advantage of parquet format:</p> </div> <div class="ulist"> <ul> <li> <p>example.csv <strong>191Mb</strong></p> </li> <li> <p>example.parquet <strong>112Mb</strong></p> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>In case your csv contains only a few hundreds of Kb, the size difference will be not notable.</p> </dd> </dl> </div> </li> </ul> </div> <div class="paragraph"> <p>To use parquet files we need to install the <code>nf-parquet</code> plugin:</p> </div> <div class="listingblock"> <div class="title">nextflow.config</div> <div class="content"> <pre class="prettyprint highlight"><code>plugins { id "nf-parquet" }</code></pre> </div> </div> <div class="paragraph"> <p>The plugin contains a <code>splitParquet</code> operator similar to CSV:</p> </div> <div class="listingblock"> <div class="title">parquet.nf</div> <div class="content"> <pre class="prettyprint highlight"><code>include { splitParquet } from 'plugin/nf-parquet' params.input = "$baseDir/data/example.parquet" workflow { Channel.fromPath(params.input) .splitParquet() .count() .view() }</code></pre> </div> </div> <div class="paragraph"> <p>As you can see, You need to add the <code>splitParquet</code> function defined in the nf-parquet plugin and use it very similar as <code>splitCSV</code> (they differ in the allowed parameters)</p> </div> </div> </div> <div class="sect1"> <h2 id="first_benchmark">First benchmark</h2> <div class="sectionbody"> <div class="paragraph"> <p>Now that we have both format files, we can run a simple comparison:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>time nextflow run csv.nf .... real 0m9,085s user 0m27,703s sys 0m2,415s</code></pre> </div> </div> <div class="paragraph"> <p>Twenty-seven seconds to parse the csv file</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>time nextflow run parquet.nf .... real 0m5,814s user 0m20,854s sys 0m1,542s</code></pre> </div> </div> <div class="paragraph"> <p>Twenty seconds to parse the parquet file</p> </div> <div class="paragraph"> <p>"Only" 7 seconds of difference but it&#8217;s the beginner</p> </div> </div> </div> <div class="sect1"> <h2 id="reading_data">Reading data</h2> <div class="sectionbody"> <div class="paragraph"> <p>We&#8217;ll dump a tuple of field1 and field20 (for example) in both format</p> </div> <div class="listingblock"> <div class="title">csv_view.nf</div> <div class="content"> <pre class="prettyprint highlight"><code>params.input = "$baseDir/data/example.csv" workflow { Channel.fromPath(params.input) .splitCsv(header:true) .map{ row -&gt; tuple(row.field1, row.field20) } .view() }</code></pre> </div> </div> <div class="listingblock"> <div class="title">parquet_view.nf</div> <div class="content"> <pre class="prettyprint highlight"><code>include { splitParquet } from 'plugin/nf-parquet' params.input = "$baseDir/data/example.parquet" workflow { Channel.fromPath(params.input) .splitParquet() .map{ row -&gt; tuple(row.field1, row.field20) } .view() }</code></pre> </div> </div> <div class="paragraph"> <p>As you can see, both pipelines look very similar.</p> </div> <div class="paragraph"> <p>Running the benchmark on my computer:</p> </div> <div class="ulist"> <ul> <li> <p>csv took <code>user 0m42,274s</code></p> </li> <li> <p>parquet took <code>user 0m32,426s</code></p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="defining_a_schema">Defining a Schema</h2> <div class="sectionbody"> <div class="paragraph"> <p>Although nf-parquet allows parsing a parquet file in "raw" format as a <code>Map</code> in a similar way of splitCSV, the power of parquet format comes when you define a schema to instruct the library about the structure of the file</p> </div> <div class="paragraph"> <p>Create a <code>schema</code> directory in your project and create these files:</p> </div> <div class="listingblock"> <div class="title">module-info.java</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="java">module records { <i class="conum" data-value="1"></i><b>(1)</b> opens records; <i class="conum" data-value="1"></i><b>(1)</b> }</code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>We&#8217;ll use a "records" package name. Can be anything but need to be the same in the pipeline</td> </tr> </table> </div> <div class="listingblock"> <div class="title">Row.java</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="java">package records; <i class="conum" data-value="1"></i><b>(1)</b> record Field1Field2( <i class="conum" data-value="2"></i><b>(2)</b> String uuid, String field1, String field2 ){}</code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>the package we specified in module-info.java</td> </tr> <tr> <td><i class="conum" data-value="2"></i><b>2</b></td> <td>a java record with the names and type of every field</td> </tr> </table> </div> <div class="paragraph"> <p>Lastly, we need to compile our schema:</p> </div> <div class="paragraph"> <p><code>javac --release 17 -d lib/ schemas/*</code></p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>this process is only required one time meantime your schema doesn&#8217;t change</p> </dd> <dt class="hdlist1">INFO</dt> <dd> <p>In case you&#8217;re versioning your pipeline, you need to version at least the schema (java files) and generate the binary before run the pipeline</p> </dd> </dl> </div> <div class="paragraph"> <p>Now we&#8217;ll run a "raw" count</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>workflow { Channel.fromPath(params.input) .splitParquet() .count() .view() }</code></pre> </div> </div> <div class="paragraph"> <p>vs a "schema" count</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>workflow { Channel.fromPath(params.input) .splitParquet( record: Field1Field20 ) .count() .view() }</code></pre> </div> </div> <div class="paragraph"> <p>As you can see, the only difference is we provide a <code>record</code> params to indicate which fields we&#8217;re interested to read (parquet not only will ignore other but also will not read them)</p> </div> <div class="ulist"> <ul> <li> <p>csv took <code>user 0m32,118s</code></p> </li> <li> <p>"raw" took <code>user 0m20,470s</code></p> </li> <li> <p>"schema" took <code>user 0m14,590s</code></p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="writing">Writing</h2> <div class="sectionbody"> <div class="paragraph"> <p>nf-parquet plugin not only allows us to read parquet files but also create</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>writing requires a Schema (implemented in a record Java as shown in the previous section)</p> </dd> </dl> </div> <div class="paragraph"> <p>Create a <code>Row.java</code> record with your schema:</p> </div> <div class="listingblock"> <div class="title">Row.java</div> <div class="content"> <pre class="prettyprint highlight"><code>package records; record Row( String id, String field1, String field2, String field3, String field4, String field5, String field6, String field7, String field8, String field9, String field10, Float field11, Float field12, Float field13, Float field14, Float field15, Float field16, Float field17, Float field18, Float field19, Float field20 ){}</code></pre> </div> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>you can use nested records as for example <code>position</code> with <code>latitude</code> and <code>longitude</code> fields, or more complex case that it&#8217;s impossible to represent with CSV</p> </dd> </dl> </div> <div class="paragraph"> <p>and compile it:</p> </div> <div class="paragraph"> <p><code>javac --release 17 -d lib/ schemas/*</code></p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>lib folder will contain now a <code>record</code> subfolder with two classes, Field1Field20 and Row</p> </dd> </dl> </div> <div class="listingblock"> <div class="title">convert.nf</div> <div class="content"> <pre class="prettyprint highlight"><code>include { splitParquet; toParquet } from 'plugin/nf-parquet' <i class="conum" data-value="1"></i><b>(1)</b> import records.* <i class="conum" data-value="2"></i><b>(2)</b> params.index = "$baseDir/data/example.csv" params.output = "$baseDir/data/converted.parquet" workflow { Channel.fromPath(params.index) .splitCsv(header:true) \ .map{ row-&gt; new Row( <i class="conum" data-value="3"></i><b>(3)</b> row.uuid, row.field1,row.field2,row.field3,row.field4,row.field5, row.field6,row.field7,row.field8,row.field9,row.field10, row.field11 as float, row.field12 as float, row.field13 as float, row.field14 as float, row.field15 as float, row.field16 as float, row.field17 as float, row.field18 as float, row.field19 as float, row.field20 as float, ) } .toParquet( params.output, [record:Row]) }</code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>include new function from plugin</td> </tr> <tr> <td><i class="conum" data-value="2"></i><b>2</b></td> <td>import the package you specified in module-info.java</td> </tr> <tr> <td><i class="conum" data-value="3"></i><b>3</b></td> <td>instance a Java record with the desired info</td> </tr> </table> </div> <div class="paragraph"> <p>If all goes well you&#8217;ll have a <code>data/converted.parquet</code> file.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Also, if you have a parquet viewer, you can see parquet generated online specifies all columns as String, but our converted file uses Float for last columns following our Schema</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="comparing_with_real_data">Comparing with real data</h2> <div class="sectionbody"> <div class="paragraph"> <p>Someone notices me that using random values doesn&#8217;t use some compress features of Parquet format, so I&#8217;ve looked for a more realistic example and I run another benchmark. You can read more about it at</p> </div> <div class="paragraph"> <p><a href="https://github.com/jagedn/nf-parquet-benchmark" class="bare">https://github.com/jagedn/nf-parquet-benchmark</a></p> </div> </div> </div> From CSV to Parquet in Nextflow, a tutorial Deploying a Nomad cluster with Terraform and Oracle for Nextflow Jorge Aguilera 2025-07-22T00:00:00Z https://blog.jagedn.dev/blog/2025/nomad-nextflow-oracle.html <div class="sect1"> <h2 id="empowering_nextflow_workflows_for_small_teams_with_terraform_and_nomad">Empowering Nextflow Workflows for Small Teams with Terraform and Nomad</h2> <div class="sectionbody"> <div class="paragraph"> <p>If you&#8217;re part of a small team in bioinformatics or computational science, getting your Nextflow pipelines up and running can be a real headache.</p> </div> <div class="paragraph"> <p>You&#8217;re trying to do awesome science, but instead, you&#8217;re wrestling with servers, trying to figure out how to scale things, and constantly worrying about whether your data&#8217;s in the right place.</p> </div> <div class="paragraph"> <p>That&#8217;s where tf-nomad project comes in.</p> </div> <div class="paragraph"> <p>We, at Incremental Steps, are working in an IAC (Infrastructure-As-Code) project with the idea to offer a super easy way to spin up the infrastructure you need.</p> </div> <div class="paragraph"> <p>We&#8217;re using Terraform to automate all the setup – think of it as writing down exactly what you want, and Terraform just makes it happen. Our repo will provision all Networks, Security Rules, instances, etc the stack requires with one command but most important, if you need to change some resources (more instances, memory&#8230;&#8203;) Terraform will apply changes automatically.</p> </div> <div class="paragraph"> <p>Once Networks are deployed, Terraform will aprovisionate instances and will create a Nomad cluster on it, all running in a private network.</p> </div> <div class="paragraph"> <p>We&#8217;re also deploying a MinIO instance right inside your cluster. Why? So all your important data stays local, preventing those annoying data transfer fees and speeding up your Nextflow runs significantly.</p> </div> <div class="paragraph"> <p>And for the cherry on top, this solution sets up a Tailscale network. This means you can securely and easily run your pipelines directly from your local machine, connecting seamlessly to the cluster as if it were right next door.</p> </div> <div class="paragraph"> <p>But wait, there is more: do you have several teams/customers and want to replicate same infra for every one? The project allows to create as many "clients" you need, every one with their space</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/diag-695287f8335110e5ffa9c72700571694.png" alt="Diagram" width="499" height="772"> </div> </div> </div> </div> <div class="sect1"> <h2 id="the_repository">The repository</h2> <div class="sectionbody"> <div class="paragraph"> <p>Here you can find the GitHub repository to the project</p> </div> <div class="paragraph"> <p><a href="https://github.com/incsteps/nomad-oracle" class="bare">https://github.com/incsteps/nomad-oracle</a></p> </div> <div class="paragraph"> <p>This repo is structured in modules, for example <code>vcn</code> describe the network with their security rules, etc</p> </div> <div class="paragraph"> <p>Also, it includes a simple nextflow pipeline to validate every infrastructure once deployed</p> </div> </div> </div> <div class="sect1"> <h2 id="requirements">Requirements</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>An Oracle Cloud Account. (Why? Basically because we&#8217;ve a free account;) to play with it)</p> </li> </ul> </div> <div class="paragraph"> <p>Good news is Terraform makes very similar to deploy the same solution in different providers (AWS, Google, etc)</p> </div> <div class="ulist"> <ul> <li> <p>An Internet Domain (can be a subdomain or your organization). As your team will work from their local and the stack will be deployed in a remote cloud, we need a "DNS" to join all parts</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="deploying_a_cluster">Deploying a cluster</h2> <div class="sectionbody"> <div class="paragraph"> <p>Say you want to create a stack for TeamA, this is the steps you need to follow to provision it:</p> </div> <div class="ulist"> <ul> <li> <p>create a folder at <code>clients/team_a</code> and copy files from <code>clients/incsteps</code></p> </li> <li> <p>set your vars at <code>terraform.tfvars</code> file as for example <code>client_name</code>, <code>headscale_domain_name</code>, or <code>nomad_client_count</code></p> </li> </ul> </div> <div class="paragraph"> <p>Plan your Terraform and if all looks fine, apply it:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>$ terraform init $ terraform plan $ terraform apply</code></pre> </div> </div> <div class="paragraph"> <p>If all goes well, Terraform will create all required artifacts and output interesting IP&#8217;s. For example, "public IP"</p> </div> <div class="ulist"> <ul> <li> <p>set your "A" record (DNS) pointing to the new public IP created</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="join_the_cluster">Join the cluster</h2> <div class="sectionbody"> <div class="paragraph"> <p>As an admin, you can ssh to the bastion machine using the private key pem you provided when create the stack</p> </div> <div class="paragraph"> <p>From this machine you can, for example, approve users to join the private network:</p> </div> <div class="paragraph"> <p>Say our dns is <code>nomad.incsteps.com</code> and one member of our team want to use the cluster.</p> </div> <div class="paragraph"> <p>The user executes on their computer:</p> </div> <div class="paragraph"> <p><code>tailscale up --accept-routes --login-server=https://nomad.incsteps.com</code></p> </div> <div class="paragraph"> <p>and a URL with a token is generated</p> </div> <div class="paragraph"> <p>The user provides to you the token so you can approve the login using <code>headscale accept</code> command in bastion</p> </div> <div class="paragraph"> <p>Once accepted, the user is able to consume resources in this network (plus their own network)</p> </div> </div> </div> <div class="sect1"> <h2 id="nextflow_configuration">Nextflow configuration</h2> <div class="sectionbody"> <div class="paragraph"> <p>Now, the nextflow project configuration can use private IPs:</p> </div> <div class="listingblock"> <div class="title">nextflow.config</div> <div class="content"> <pre class="prettyprint highlight"><code>plugins { id "nf-nomad@0.3.1" } process.executor = "nomad" docker.enabled = true wave.enabled=true fusion.enabled=true fusion.exportStorageCredentials=true aws { accessKey = 'minioadmin' secretKey = 'minioadmin' client { endpoint = "http://10.10.2.201:9000" <i class="conum" data-value="1"></i><b>(1)</b> s3PathStyleAccess = true } } nomad { client { address = "http://10.10.2.188:4646" <i class="conum" data-value="2"></i><b>(2)</b> } jobs { deleteOnCompletion = false } }</code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>Minio private IP</td> </tr> <tr> <td><i class="conum" data-value="2"></i><b>2</b></td> <td>Nomad private IP</td> </tr> </table> </div> <div class="paragraph"> <p>And run their pipelines:</p> </div> <div class="paragraph"> <p><code>nextflow run hello</code></p> </div> </div> </div> <div class="sect1"> <h2 id="nomad">Nomad</h2> <div class="sectionbody"> <div class="paragraph"> <p>The Nomad cluster can be accessed via web browser at <a href="http://&lt;&lt;nomad-server-ip&gt;:4646" class="bare">http://&lt;&lt;nomad-server-ip&gt;:4646</a></p> </div> <div class="paragraph"> <p>Current deployment doesn&#8217;t provide any login but, as you as admin can ssh into the machines, you can configure what you want</p> </div> </div> </div> <div class="sect1"> <h2 id="minio">Minio</h2> <div class="sectionbody"> <div class="paragraph"> <p>The stack deploys a Minio instance, so you can use the S3 features from Nextflow without needing an Amazon account.</p> </div> <div class="paragraph"> <p>Moreover, the stack provisions and mount an Oracle File System in the Minio instance so data is persisted outside the instance.</p> </div> </div> </div> <div class="sect1"> <h2 id="conclusion">Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>This project offers a complete, easy-to-use solution for small scientific teams.</p> </div> <div class="paragraph"> <p>By combining Terraform for automated infrastructure, Nomad for efficient workflow orchestration, MinIO for secure, local data storage, and Tailscale for seamless remote access, we&#8217;ve built an environment that lets you focus on what truly matters: your research.</p> </div> </div> </div> Infrastructure as code for Nextflow pipelines on Nomad Sincronizar serverless functions con CosmosDB Jorge Aguilera 2025-05-04T00:00:00Z https://blog.jagedn.dev/blog/2025/cosmosdb-lock.html <div class="paragraph"> <p>Cuando utilizas <code>serverless</code> (Azure Functions en mi caso) uno de los problemas recurrentes es cómo sincronizar el acceso a ciertos recursos para que dos "functions" no se ejecuten a la vez sobre el mismo recurso.</p> </div> <div class="paragraph"> <p>Por ejemplo:</p> </div> <div class="paragraph"> <p>Supongamos que estamos implementando una aplicación <code>serverless</code> donde en un momento determinado múltiples usuarios pueden acceder a la misma.</p> </div> <div class="paragraph"> <p>Dependiendo del número de ellos, de la capacidad de la aplicación, etc la infra nos puede crear otra instancia ( en otra máquina diferente, e incluso en otra región) para permitir que nuestra aplicación escale sin interrupción del servicio.</p> </div> <div class="paragraph"> <p>En un escenario típico, donde tenemos el control de las instancias, usaríamos algun mecanismo de bloqueo para que cada ejecución pueda tomar el control sobre el recurso. Por ejemplo si sólo es una instancia usaríamos variables estáticas, o semáforos en memoria. Si es en un cluster usaríamos Redis (entre muchas otras opciones), etc</p> </div> <div class="paragraph"> <p>Pero en el caso serverless es más complicado porque no tenemos el control y además las instancias no tienen porqué "verse"</p> </div> <div class="paragraph"> <p>En el mundo Azure contamos con CosmosDB como base de datos distribuida &#8230;&#8203;</p> </div> Cómo bloquear acceso a recursos usando CosmosDB QaQatua Jorge Aguilera 2025-03-21T00:00:00Z https://blog.jagedn.dev/blog/2025/qaqatua-1.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Hace unas semanas le eché una mano a un amigo QA, Oscar Islas, a "aterrizar" una idea con la que andaba trabajando y que me resultó muy atractiva desde el primer momento.</p> </div> <div class="paragraph"> <p>Como QA muchas veces tienes que preparar flujos de pruebas contra servicios que manejan información "sensible", por ejemplo "cuenta bancaria", "password", etc.</p> </div> <div class="paragraph"> <p>Algunos de estos servicios requieren el uso de criptografía de tal forma que estos campos van encriptados junto con el resto y a su vez son devueltos encriptados.</p> </div> <div class="paragraph"> <p>De cara al desarrollo no deja de ser "una capa más". Quiero decir, cuando desarrollo mi programa para enviar/recibir estos payloads, configuro mi aplicación con las claves publicas/privadas que el admin del entorno me proporcione y con unas cuantas líneas de código encripto/desencripto los mensajes.</p> </div> <div class="paragraph"> <p>El trabajo del QA es más laborioso. Debe preparar juegos de prueba que contemplen todos los escenarios así que le toca o bien pregenerar los mensajes o incluir algun tipo de librería que le haga lo mismo que hace el programador lo cual tampoco es fácil</p> </div> <div class="paragraph"> <p>Oscar Islas se enfrenta casi a diario a este tipo de situaciones. Como usa Postman pudo desarrollar una pequeña librería Groovy que embeber a la que invoca para que le haga el trabajo de encriptar/desencriptar payloads.</p> </div> <div class="paragraph"> <p>Tras echarle una mano revisando y poniendo a punto la librería Groovy se nos ocurrió que esta funcionalidad podría ser una buena herramienta para la comunidad y así comenzamos QaQatua (un giño a QA y a la funcionalidad que implementa que no deja de ser una cacatua que repite lo que le dices)</p> </div> </div> </div> <div class="sect1"> <h2 id="idea">Idea</h2> <div class="sectionbody"> <div class="paragraph"> <p>Básicamente QaQatua es una aplicación web que, tras configurarla, permite transformar las partes de un payload que le indiques tanto para encriptar como para desencriptar.</p> </div> <div class="paragraph"> <p>Así pues el "flujo" de un usuario (QA principalmente) sería:</p> </div> <div class="ulist"> <ul> <li> <p>preparar una prueba con datos "en claro"</p> </li> <li> <p>invocar al endpoint QaQatua de encriptación, el cual le devolverá el payload transformado</p> </li> <li> <p>invocar al servicio con el payload obtenido de la llamada a QaQatua</p> </li> <li> <p>invocar al endpoint QaQatua de desencriptación, el cual le devolverá el payload transformado</p> </li> <li> <p>validar que los campos retornados, ya "en claro", son los esperados</p> </li> </ul> </div> <div class="paragraph"> <p>Usando Postman, SoapUI, o simple scripts con <code>curl</code> el uso es sencillo y evita tener que añadir dependencias a la herramienta</p> </div> </div> </div> <div class="sect1"> <h2 id="qaqatua">QaQatua</h2> <div class="sectionbody"> <div class="paragraph"> <p>QaQatua permite a un usuario registrarse en el sistema mediante email/password.</p> </div> <div class="paragraph"> <p>Una vez identificado, el usuario puede crear hasta 3 proyectos, proporcionando un nombre identificativo a cada uno.</p> </div> <div class="paragraph"> <p>Cada proyecto consta de los siguientes campos:</p> </div> <div class="ulist"> <ul> <li> <p>fields, una lista de campos, separados por comas, a modificar en los payloads.</p> </li> <li> <p>priv/pub keys, una pareja de clave pública/privada para operar con el payload.</p> </li> </ul> </div> <div class="paragraph"> <p>Si el usuario no quiere "complicarse" con la gestión de claves puede solicitar a QaQatua que genere un juego de claves.</p> </div> <div class="paragraph"> <p>En cualquier caso estos tres campos son editables en todo momento por lo que puede empezar a diseñar sus casos de prueba y posteriormente proporcionar las claves que requiera el servicio a invocar.</p> </div> <div class="paragraph"> <p>Así mismo, al permitir más de un proyecto, es fácil crear casos de pruebas donde intervienen más de un servicio cada uno con claves diferentes.</p> </div> </div> </div> <div class="sect1"> <h2 id="api">Api</h2> <div class="sectionbody"> <div class="paragraph"> <p>QaQatua ofrece un API realmente sencillo:</p> </div> <div class="ulist"> <ul> <li> <p>/api/projects:</p> <div class="ulist"> <ul> <li> <p>get</p> </li> <li> <p>post</p> </li> <li> <p>put</p> </li> <li> <p>delete</p> </li> </ul> </div> </li> <li> <p>/api/encrypt:</p> <div class="ulist"> <ul> <li> <p>post</p> </li> </ul> </div> </li> <li> <p>/api/decrypt:</p> <div class="ulist"> <ul> <li> <p>post</p> </li> </ul> </div> </li> </ul> </div> <div class="paragraph"> <p>Además de contar con un interface Web, el api de projects permite la gestión vía REST</p> </div> <div class="paragraph"> <p>Los endpoints de encrypt/decrypt son altamente configurables y permiten especificar qué proyecto usar en cada petición (si el usuario tiene sólo un proyecto se usa por defecto) e incluso añadir <code>fields</code> a usar en una petición específica</p> </div> </div> </div> <div class="sect1"> <h2 id="conclusion">Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>En los próximos posts iremos contando más detalles de este proyecto, como tecnología usada, casos de éxito, nuevas funcionalidades, etc.</p> </div> </div> </div> Qaqatua, un proyecto OpenSource para QAs How I Feel Today, una app para el fediverso Jorge Aguilera 2025-03-04T00:00:00Z https://blog.jagedn.dev/blog/2025/fediverse-hift.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Hace poco he publicado una aplicación web que permite publicar mensajes en el fediverso sin salir de tu navegador.</p> </div> <div class="paragraph"> <p>La aplicación se llama How I Feel Today y es una aplicación VueJS que se conecta a tu servidor de Mastodon (en realidad tu servidor del Fediverso pero como todo el mundo lo conoce como Mastodon&#8230;&#8203;.) para publicar un diagrama "radar" en formato PNG con tus estados de salud, financiero, social y emocional.</p> </div> <div class="paragraph"> <p>Sin texto, sin explicaciones, solamente una imagen que refleja tu estado de ánimo en ese momento.</p> </div> </div> </div> <div class="sect1"> <h2 id="ui">UI</h2> <div class="sectionbody"> <div class="paragraph"> <p>El interface de la aplicación es muy sencillo, solamente tienes que seleccionar el "nivel" de cada uno de los estados y la imagen se va ajustando en tiempo real.</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2025/hift-web.png" alt="hift web"> </div> </div> <div class="paragraph"> <p>Cuando has ajustado los niveles a cómo te sientes en cada uno puedes publicarlos pulsando simplemente en "publish" y la aplicación publicará un toot con la imagen</p> </div> <div class="paragraph"> <p>Como puedes ver, la aplicación es muy sencilla de usar.</p> </div> </div> </div> <div class="sect1"> <h2 id="oauth">OAuth</h2> <div class="sectionbody"> <div class="paragraph"> <p>Para poder publicar tu HIFT lo primero que debes hacer es identificarte en tu instancia y permitir a la aplicación obtener un <code>access token</code> para poder publicar en tu cuenta</p> </div> <div class="paragraph"> <p>La aplicación detecta cuando no está logeada (más detalles a continuación) y te muestra una pantalla para que indiques la instancia que usas (i.e. mastodon.social, jvm.social, etc)</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2025/hift-login.png" alt="hift login"> </div> </div> <div class="paragraph"> <p>Cuando has puesto tu instancia y pulsado Submit, la aplicación te redirige a tu instancia para que la apruebes y ella se encarga de completar el proceso de autorización guardando el <code>access token</code> en tu navegador</p> </div> <div class="paragraph"> <p>En mi opinión, esta es (una de) la "gracia" de esta aplicación: no requiere de un servidor donde guardar secretos ni completar de forma oscura el proceso de autorización. Todo se realiza en tu navegador a base de "redirects"</p> </div> </div> </div> <div class="sect1"> <h2 id="vue">Vue</h2> <div class="sectionbody"> <div class="paragraph"> <p>El código de la aplicación se encuentra publicado en <a href="https://github.com/jagedn/hift/" class="bare">https://github.com/jagedn/hift/</a></p> </div> <div class="paragraph"> <p>La aplicación está desarrollada con Vue 3 y se ejecuta completamente en el navegador por lo que no se guarda nada en servidores externos (El servidor donde está alojada es de Github pero por tener el código publicado junto con la aplicación web. En realidad podrías descargarte el código y ejecutarla en tu máquina)</p> </div> <div class="paragraph"> <p>Como puedes ver en el fichero <code>package.json</code> tiene pocas dependencias:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>"bootstrap": "^5.3.3", "chart.js": "^3.9.1", "masto": "^6.7.0", "pinia": "^2.1.7", "vue": "^3.5.10", "vue-chart-3": "^3.1.8",</code></pre> </div> </div> <div class="paragraph"> <p>Bootstrap para poder "enmaquetar" de una forma responsive la página</p> </div> <div class="paragraph"> <p>Chart.js para generar el diagrama en tiempo real y Vue-Chart-3 para integrarlo en Vue3</p> </div> <div class="paragraph"> <p>Pinia para mantener el estado de la aplicación y compartir los cambios en el modelo de datos</p> </div> <div class="paragraph"> <p>Básicamente la aplicación se compone de un <code>parent</code> HomeView.vue y dos componentes <code>FeelingForm.vue</code> y <code>FeelingChart.vue</code> , así como 2 <code>stores</code>, uno para mantener la configuración de la instancia a la que te has logeado y otro para mantener tus "feelings"</p> </div> </div> </div> <div class="sect1"> <h2 id="propagación_de_eventos_y_compartir_estado">Propagación de eventos y compartir estado</h2> <div class="sectionbody"> <div class="paragraph"> <p>Debido a mis escasos conocimientos de Vue una de las cosas donde me he peleado más ha sido en conseguir sincronizar los cambios entre el formulario donde seleccionas el nivel de cada sentimiento y la generación del Chart, pero una vez puesta en marcha la verdad es que muy simple con Vue3</p> </div> <div class="paragraph"> <p>En el parent simplemente usamos "@evento" (@save en este caso) y proporcionamos una funcion a ejecutar ante este evento</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>&lt;div class="col-lg-4 col-md-12 col-sm-12 px-0"&gt; &lt;FeelingForm @save="publishFeeling" v-model="feeling" @logoff="logoff" :topics="topics"/&gt; &lt;/div&gt;</code></pre> </div> </div> <div class="paragraph"> <p>y en el child emitimos el evento</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>const submitForm = () =&gt; { emits('save'); }; ... &lt;form @submit.prevent="submitForm"&gt; .... &lt;/form&gt;</code></pre> </div> </div> <div class="paragraph"> <p>En este ejemplo, cuando el usuario pulsa Submit se captura el evento y se emite a su vez uno propio "save"</p> </div> <div class="paragraph"> <p>Para compartir el estado entre el padre y los hijos Vue lo hace realmente fácil</p> </div> <div class="paragraph"> <p>En el padre usamos <code>ref</code> para crear objetos "referenciados"</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>const feeling = { a: ref(0), b: ref(0), c: ref(0), d: ref(0), };</code></pre> </div> </div> <div class="paragraph"> <p>y los pasamos a los hijos</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code> v-model="feeling"</code></pre> </div> </div> <div class="paragraph"> <p>En los hijos simplemente definimos el modelo</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>defineModel('modelValue')</code></pre> </div> </div> <div class="paragraph"> <p>y los usamos donde sea necesario</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code> &lt;input type="range" class="form-range" id="a" @change="updated" v-model="modelValue.a.value" min="1" max="5"/&gt;</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="fediverse">Fediverse</h2> <div class="sectionbody"> <div class="paragraph"> <p>Una vez que tengo la imagen (en memoria) que quieres publicar es muy sencillo subirla a tu instancia. En realidad el protocolo es muy simple y se podría hacer con unos simples <code>fetch</code> pero ya que existe una librería <code>masto</code> que lo hace por mí, todo se vuelve más fácil</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code> const masto = createRestAPIClient({ url: url, accessToken: accessToken, }); const response = await masto.v1.media.create({ file: currentImage, description:`A radar chart shows four categories: ${topics.a} (light red), ${topics.b} (light teal), ${topics.c} (light gray), and ${topics.d} (gold). The ${topics.a} category has a value of ${feeling.a.value} The ${topics.b} category has a value of ${feeling.b.value} The ${topics.c} category has a value of ${feeling.c.value} The ${topics.d} category has a value of ${feeling.d.value} ` }) const mediaId = response.id; await masto.v1.statuses.create({ status: `#HIFT`, visibility: "public", mediaIds:[mediaId] });</code></pre> </div> </div> <div class="paragraph"> <p>Básicamente creamos un objeto <code>masto</code> usando la url+accessToken y subimos la imagen con <code>media.create</code> añadiendo un texto alternativo (que no falte)</p> </div> <div class="paragraph"> <p>El servidor nos devuelve el id de la imagen que ha guardado y simplemente creamos un toot añadiendo el mediaId</p> </div> <div class="paragraph"> <p>y eso es todo para publicar un toot con una imágen!!!</p> </div> <div class="paragraph"> <p>Por último simplemente guardamos en el navegador el HIFT publicado para usarlos como punto de partida la próxima vez que abrás la aplicación</p> </div> </div> </div> <div class="sect1"> <h2 id="github">Github</h2> <div class="sectionbody"> <div class="paragraph"> <p>La aplicación está publicada en Github (podría estar alojada en cualquier servidor de contenido estático) y esto plantea un pequeño reto para aplicaciones Vue y similares que se basan en la ruta del navegador para mantener el estado además de los redirects necesarios de esta aplicación</p> </div> <div class="paragraph"> <p>En el caso concreto de Github hay dos pequeños "hacks" a tener en cuenta</p> </div> <div class="paragraph"> <p>El index.html generado por Vue hay que añadirle un pequeño script:</p> </div> <div class="listingblock"> <div class="title">index.html</div> <div class="content"> <pre class="prettyprint highlight"><code> &lt;script type="text/javascript"&gt; // Single Page Apps for GitHub Pages // MIT License // https://github.com/rafgraph/spa-github-pages // This script checks to see if a redirect is present in the query string, // converts it back into the correct url and adds it to the // browser's history using window.history.replaceState(...), // which won't cause the browser to attempt to load the new url. // When the single page app is loaded further down in this file, // the correct url will be waiting in the browser's history for // the single page app to route accordingly. (function(l) { if (l.search[1] === '/' ) { var decoded = l.search.slice(1).split('&amp;').map(function(s) { return s.replace(/~and~/g, '&amp;') }).join('?'); window.history.replaceState(null, null, l.pathname.slice(0, -1) + decoded + l.hash ); } }(window.location)) &lt;/script&gt;</code></pre> </div> </div> <div class="paragraph"> <p>además de añadir un .htaccess</p> </div> <div class="listingblock"> <div class="title">.htaccess</div> <div class="content"> <pre class="prettyprint highlight"><code>Options All -Indexes &lt;Files .htaccess&gt; order allow,deny deny from all &lt;/Files&gt; &lt;IfModule mod_rewrite.c&gt; # Redirect to the public folder RewriteEngine On # RewriteBase / RewriteRule login index.html [L] # Redirect to HTTPS # RewriteEngine On # RewriteCond %{HTTPS} off # RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301] &lt;/IfModule&gt;</code></pre> </div> </div> <div class="paragraph"> <p>Así conseguimos que cuando la instancia en la que hacemos login nos haga el redirect a <code>login</code> , página que no existe en nuestra aplicación, sea redirigida a <code>index.html</code> y que se ejecute nuestra aplicacion Vue</p> </div> </div> </div> Una aplicacion para el fediverso sin salir de tu navegador Cómo "tracear" visitas al blog con Telegram Jorge Aguilera 2024-11-10T00:00:00Z https://blog.jagedn.dev/blog/2024/ping-telegram.html <div class="paragraph"> <p>Por si no lo he dicho antes, mi blog es un "static site". Básicamente es un conjunto de páginas HTML (más imágenes, css, etc) preconstruido previamente de tal forma que no necesito base de datos ni un servidor especial para visualizarlo.</p> </div> <div class="paragraph"> <p>Mi blog está alojado en un plan Shared en DreamHost pero al ser todo generado previamente, en principio podría usar casi cualquier alojamiento básico.</p> </div> <div class="paragraph"> <p>Para el tema de estadísticas (a todos nos gusta saber si nos leen para qué engañarnos) tiro del viejo sistema que analiza los logs de acceso. DreamHost lo provee con un sólo click pero casi todos los alojamientos lo tienen de una forma u otra porque es más viejo que el hilo negro y no requiere de grandes recursos por su parte.</p> </div> <div class="paragraph"> <p>En mi plan con DreamHost también está incluido el alojamiento de PHP que en dos palabras serían ficheros que se ejecutan en el servidor cuando los pides y que se "salida" se envía a tu navegador. PHP también es más viejo que el hilo negro y suele ser incluido en casi todos los planes de hosting. Por eso es tan popular, por ejemplo, WordPress (el cual me parece un monstruo que ha crecido de tal forma que es una burrada usarlo para un blog)</p> </div> <div class="paragraph"> <p>Así qe aprovechando esta funcionalidad le he añadido un pequeño PHP a mi blog para que me envíe una notificación a un canal de Telegram privado cuando un usuario accede al blog</p> </div> <div class="listingblock"> <div class="title">ping.php</div> <div class="content"> <pre>&lt;?php $apiToken = 'TU_API_TOKEN'; $json = file_get_contents('php://input'); $body = json_decode($json); $data = [ 'chat_id' =&gt; 'TU_CHAT', 'text' =&gt; "un usuario esta leyendo $json" ]; $response = file_get_contents("http://api.telegram.org/bot$apiToken/sendMessage?" . http_build_query($data) );</pre> </div> </div> <div class="paragraph"> <p>Y en el static site le incluyo un pequeño javascript, que invoca a <code>ping.php</code> en cada página que me interesa "tracear"</p> </div> <div class="listingblock"> <div class="title">api.js</div> <div class="content"> <pre>$( document ).ready(function() { var obj = { url:window.location.href }; $.ajax({ url: '/ping.php', type: 'post', dataType: 'json', contentType: 'application/json', data: JSON.stringify(obj) }); });</pre> </div> </div> <div class="paragraph"> <p>De esta forma recibo un aviso cada vez que leéis una entrada en el blog pero sin recolectar información acerca de navegador, origen, sesion ni nada parecido</p> </div> Traceando visitas al blog estático con Telegram y PHP Apisix+KeyCloak+Active Directory Jorge Aguilera 2024-09-29T00:00:00Z https://blog.jagedn.dev/blog/2024/apisix-keycloak-ldap.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>En post anteriores hemos visto cómo montar un ApiGateway con Apisix el cual protega las peticiones a los servicios del backend comprobando si las peticiones están autorizadas. Para la autorización hemos usado Keycloak y creado usuarios "a mano"</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>El post anterior lo puedes encontrar en <a href="apisix-keycloak-docker.html" class="bare">apisix-keycloak-docker.html</a>]</p> </dd> </dl> </div> <div class="paragraph"> <p>En este post vamos a seguir avanzando con esta idea pero ahora los usuarios/passwords Keycloak los validará contra un Active Directory de Windows ( o cualquier otro sistema que use LDAP)</p> </div> <div class="paragraph"> <p>De forma visual la arquitectura será algo parecido a:</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/diag-ebee2a095b9cb9617b1283cfdf749b12.png" alt="Diagram" width="699" height="536"> </div> </div> <div class="paragraph"> <p>Como se puede ver, es exactamente la situación del post anterior salvo que delegamos la gestión de usuarios en un LADP</p> </div> </div> </div> <div class="sect1"> <h2 id="ldap">LDAP</h2> <div class="sectionbody"> </div> </div> <div class="sect1"> <h2 id="realm_en_keycloak">Realm en Keycloak</h2> <div class="sectionbody"> </div> </div> <div class="sect1"> <h2 id="apisix">Apisix</h2> <div class="sectionbody"> </div> </div> <div class="sect1"> <h2 id="conclusión">Conclusión</h2> <div class="sectionbody"> <div class="paragraph"> <p>Este ejemplo NO debería de usarse como tal en producción pero creo que sirve de ejemplo para ver cómo encajan las diferentes piezas al montar una arquitectura de microservicios con un ApiGateway y con autentificadión delegada</p> </div> </div> </div> Protegiendo el accesso a tu API mediante autentificacion LDAP (Active Directory) RemoveCookieWall, una extension de Firefox Jorge Aguilera 2024-09-11T00:00:00Z https://blog.jagedn.dev/blog/2024/remove-cookiewall.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>¿Harto del banner que se ha puesto de moda en las webs para que aceptes cookis de terceros o pases por caja? En este post explico cómo me hecho (y publicado) una extensión de Firefox para evitarlo en la mayoría de sites</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>El código de esta extensión está publicado en <a href="https://github.com/jagedn/removecookiewall-addon" class="bare">https://github.com/jagedn/removecookiewall-addon</a> y lo puedes instalar en Firefox (también en móvil) desde <a href="https://addons.mozilla.org/es/firefox/addon/removecookiewall/" class="bare">https://addons.mozilla.org/es/firefox/addon/removecookiewall/</a></p> </dd> </dl> </div> <div class="paragraph"> <p>Desde hace unos meses, y por una exigencia de Europa (creo), la mayoría de las webs te muestran un banner la primera vez que accedes a ellas que no te dejan continuar hasta que no decides entre:</p> </div> <div class="ulist"> <ul> <li> <p>te voy a colocar miles de cookies de terceros en tu navegador que van a espiar lo que navegas</p> </li> <li> <p>pasa por caja y págame para que no lo haga</p> </li> </ul> </div> <div class="paragraph"> <p>La mayoría de estas librerias ejecutan un javascript nada más cargar la página que leen tus cookies. Si ven que no has pasado por caja te muestran un dialogo HTML y bloquean el body cambiando el style a "block" (o similar)</p> </div> <div class="paragraph"> <p>Este diálogo no te deja leer lo que hay debajo pero &#8230;&#8203; no deja de ser un elemento DOM del HTML, así que, como los navegadores te permiten abrir una consola de desarrollo e inspeccionar el HTML, me surgió la idea de eliminar manualmente el díalogo (simplemente le das a inspeccionar, buscas en el HTML donde está definido y le das a suprimir) y chimpón, el diálogo desaparece. Luego busco la declaración del "body" y dando doble click en el atributo style le quito la propiedad que lo bloquea y ya puedo hacer scroll.</p> </div> <div class="paragraph"> <p>Poca magia.</p> </div> <div class="paragraph"> <p>Qué es lo que está pasando entonces? Pues simplemente el código javascript sigue esperando que le llegue un evento de usuario diciendole qué botón has pulsado, pero estos botones ya no están, así que nunca le llegará y no te instalará cookies de terceros.</p> </div> <div class="paragraph"> <p>Ok, pero ¿y si refresco la página?. Pues vuelta a empezar &#8230;&#8203; así que esto es perfecto para una nueva extensión del navegador que lo haga por mí.</p> </div> </div> </div> <div class="sect1"> <h2 id="extension_removecookiewall">Extension RemoveCookieWall</h2> <div class="sectionbody"> <div class="paragraph"> <p>Una extensión Firefox, de forma resumida, es un espacio de memoria del navegador reservado donde se ejecuta un código javascript que puede dialogar con él.</p> </div> <div class="paragraph"> <p>Puede (si le concede permisos el usuario) inyectar código en las páginas que visitas, abrir pestañas, cerrarlas, comunicarse con servicios remotos, &#8230;&#8203;</p> </div> <div class="paragraph"> <p>RemoveCookieWall es una extensión de Firefox que lo "único" que necesita es que el navegador inyecte en todas las páginas que el usuario visita un pequeño código javascript.</p> </div> <div class="paragraph"> <p>Este javascript según se ha cargado la página inspeccionará si existe un elemento DOM que coincida con alguno de los que he investigado que ese están usando. Si lo detecta usará funciones standard de Javascript para borrarlo.</p> </div> <div class="paragraph"> <p>Como el banner a veces puede aparecer (mili)segundos después de que nuestro código se ejecute lo que hace el script es repetir la búsqueda durante un par de segundos. Pasado este tiempo si el banner no ha aparecido la extensión asume que la página no tiene un CookieeWall y termina</p> </div> <div class="paragraph"> <p>Y esto es todo. Sólo queda empaquetar el código, añadir un fichero Manifest que indique los permisos que requiere nuestra extensión y publicarlo en Firefox</p> </div> </div> </div> <div class="sect1"> <h2 id="código">Código</h2> <div class="sectionbody"> <div class="paragraph"> <p>El código JS básicamente es:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>var readyStateCheckInterval; var counter = 0; function sanitizeBody() { document.body.style.overflow = "unset" document.body.classList.remove('sxnlzit') document.body.classList.remove('didomi-popup-open') document.body.parentNode.classList.remove('sp-message-open') } function removeMe(element) { element.remove(); sanitizeBody(); } readyStateCheckInterval = setInterval(function() { if (document.readyState === "complete") { counter++; const removeParent = ['div.pmConsentWall']; //elpais [...removeParent].forEach(s =&gt; { var divs = document.body.querySelectorAll(s); [...divs].forEach(element =&gt; { removeMe(element.parentNode); }); }); const removeThis = [ 'div[data-nosnippet="data-nosnippet"]', '#mrf-popup', '#didomi-popup', '[id^="sp_message_container_"]', '#cl-consent', 'dialog.cookie-policy' ]; [...removeThis].forEach(s =&gt; { var divs = document.body.querySelectorAll(s); [...divs].forEach(element =&gt; { removeMe(element); }); }); if (counter &gt; 30) { clearInterval(readyStateCheckInterval); } } }, 100);</code></pre> </div> </div> <div class="paragraph"> <p>Nada más ser inyectado el código en la página se inicia un <code>interval</code> cada 100 milis</p> </div> <div class="paragraph"> <p>El scrip busca si el <code>document.body.querySelectorAll</code> encuentra algún elmento tipo <code>#mrf-popup</code>, <code>#didomi-popup</code>, etc. Si lo encuentra simplemente lo elimina con <code>element.remove()</code></p> </div> <div class="paragraph"> <p>Después de unos cuantos intentos termina borrando el <code>interval</code></p> </div> <div class="paragraph"> <p>Toda extensión tiene que tener un fichero Manifest. El de esta extensión es simplemente:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>{ "description": "Remove CookieWall", "manifest_version": 2, "name": "RemoveCookieWall", "version": "0.11", "homepage_url": "https://github.com/jagedn/removecookiewall-addon", "icons": { "48": "icons/border-48.png" }, "content_scripts": [{ "matches": [ "*://*/*" ], "js": ["removeCookieWall.js"] }], "browser_specific_settings": { "gecko": { "id": "remove-cookiewall@aguilera.soy" } } }</code></pre> </div> </div> <div class="paragraph"> <p>Como ves, content_scripts indica que queremos inyectar el js en todas las páginas. Otras extensiones pueden indicar sólo un site, otras ejecutar un javascript en backuground, &#8230;&#8203;</p> </div> </div> </div> <div class="sect1"> <h2 id="build_and_publish">Build and publish</h2> <div class="sectionbody"> <div class="paragraph"> <p>Para publicar en Firefox simplemente tenemos que proveer un zip donde esten todos los ficheros que requiere la extension. Para hacerlo fácil me he hecho un <code>build.sh</code> que simplemente ejecuta el zip:</p> </div> <div class="paragraph"> <p><code>zip -r -FS ../remove-cookiewall.zip * --exclude '<strong>.git</strong>' --exclude 'build.sh'</code></p> </div> <div class="paragraph"> <p>Publicar una extension en Firefox no tiene ninguna complicación y es gratis. Lo único que tu extensión tiene que pasar una revisión inicial que puede tardar uno (o varios) días</p> </div> </div> </div> Crear una extension de Firefox para quitar el mensajito de aceptar cookies o pagar Apisix Gateway con autentificación Keycloak (y SSL con Caddy) Jorge Aguilera 2024-09-06T00:00:00Z https://blog.jagedn.dev/blog/2024/apisix-keycloak-docker.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>En este post voy a instalar en una máquina (linux obviamente) desde cuasi-cero un stack que nos permita tener un acceso <code>https</code> a unos microservicios pasando por un api gateway (con Apisix) que dialogará con Keycloack para gestionar la autentificación y autorización del usuario a los mismos.</p> </div> <div class="paragraph"> <p>De forma visual la arquitectura será algo parecido a:</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/diag-48e3624df831c83b3b10f65d36a64899.png" alt="Diagram" width="558" height="504"> </div> </div> </div> </div> <div class="sect1"> <h2 id="proyecto">Proyecto</h2> <div class="sectionbody"> <div class="paragraph"> <p>La idea del proyecto es crear un stack en Internet de tal forma que se expongan unos servicios a los que el usuario accederá previa identificación.</p> </div> <div class="paragraph"> <p>Dicha identificación podrá ser mediante usuario/password o bien mediante un proveedor de identidades, en este caso Linkedin (de igual forma puede ser Github, Gitlab, Google, etc.)</p> </div> <div class="paragraph"> <p>El acceso a los servicios se realizará mediante https y la gestión de la autentificación residirá en una pieza ajena a los servicios. Estos recibirán una cabecera con un JWT donde podrán extraer la información del usuario sin preocuparse de cómo se ha obtenido.</p> </div> </div> </div> <div class="sect1"> <h2 id="requisitos">Requisitos</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Una máquina Linux (la mia tiene 2GB de memoria y unos pocos gigas de disco)</p> </li> <li> <p>Tener acceso como root (seguramente podrías con otro usuario pero no me voy a complicar)</p> </li> <li> <p>Docker instalado</p> </li> <li> <p>Un dominio en internet (para este post usaré <code>apisix.edn.es</code>)</p> </li> <li> <p>Una entrada en el DNS que apunte a la IP pública de la máquina</p> </li> <li> <p>acceso ssh a la máquina.</p> </li> <li> <p>si se desea probar la integración con Linkedin (o similar) se necesita crear una App en <a href="https://developer.linkedin.com/" class="bare">https://developer.linkedin.com/</a> y generar un ApiClient y SecretClient</p> </li> </ul> </div> <div class="paragraph"> <p>Crear un dominio/subdominio suele tardar unos minutos, al igual que la propagación de la entrada DNS. Recomiendo hacer esto lo primero para que se vaya realizando la propagación DNS y así Caddy aprovisionará un certificado sin esperas.</p> </div> <div class="paragraph"> <p>Recomiendo tener todos los puertos de la máquina expuesta a internet cerrados (e incluso cambiar el puerto por defecto 22 de ssh a otro) salvo el 80 y el 443. El puerto 80 es necesario para que Caddy pueda gestionar la provisión del certificado</p> </div> </div> </div> <div class="sect1"> <h2 id="servicios_web">Servicios Web</h2> <div class="sectionbody"> <div class="paragraph"> <p>La idea es tener nuestros microservicios "limpios" de cualquier lógica de identificar a un usuario. Simplemente recibirán un JWT donde podrá extraer el nombre, email, etc.</p> </div> <div class="paragraph"> <p>Para este ejemplo vamos a usar una imagen <code>httpbin.org</code> que simplemente muestra los parámetros que se le envían en la petición y así comprobar que el servicio recibe dichos parámetros.</p> </div> <div class="paragraph"> <p>Así mismo vamos a crear dos servicios, <code>web1</code> y <code>web2</code> para darle más contenido y poder explorar cómo manejarlos con Apisix</p> </div> <div class="listingblock"> <div class="title">docker-compose.yml</div> <div class="content"> <pre class="prettyprint highlight"><code>services: web1: image: kennethreitz/httpbin web2: image: kennethreitz/httpbin</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="caddy">Caddy</h2> <div class="sectionbody"> <div class="paragraph"> <p>Caddy es un reverse proxy que gestiona de forma automática el aprovisionar un certificado SSL con Let&#8217;s Encrypt de tal forma que será nuestra "puerta de entrada" al sistema mediante <code>https</code>. Una vez que securiza la conexión con el cliente mediante SSL realiza la labor de reverse proxy y le pasa la petición al servicio que se le indique</p> </div> <div class="listingblock"> <div class="title">docker-compose.yml</div> <div class="content"> <pre class="prettyprint highlight"><code> caddy: image: caddy ports: - "80:80" - "443:443" volumes: - ./caddy/data:/data/ - ./caddy/config:/config/ - ./caddy/Caddyfile:/etc/caddy/Caddyfile</code></pre> </div> </div> <div class="paragraph"> <p>La configuración es además bastante simple, al menos para el alcance de este artículo:</p> </div> <div class="listingblock"> <div class="title">caddy/Caddyfile</div> <div class="content"> <pre class="prettyprint highlight"><code>{ email TU_EMAIL@TU_EMAIL } apisix.edn.es { reverse_proxy http://apisix:9080 }</code></pre> </div> </div> <div class="paragraph"> <p>En este fichero indicarás tu correo y el dominio a usar ( <code>apisix.edn.es</code> en mi ejemplo)</p> </div> <div class="paragraph"> <p>Una vez que Caddy resuelve el SSL realizará el reverse proxy hacia el servicio <code>apisix</code> que crearemos a continuación</p> </div> </div> </div> <div class="sect1"> <h2 id="keycloak">Keycloak</h2> <div class="sectionbody"> <div class="paragraph"> <p>Keycloak es un sistema de autenticación y autorización seguro (Open Source). Es decir, es el encargado de "gestionar los usuarios" y los "accesos a los recursos"</p> </div> <div class="paragraph"> <p>En su uso más básico podremos dar de alta usuarios vía interface web y los servicios podrán dialogar con él para validar si un usuario es quien dice ser y saber a qué tiene acceso.</p> </div> <div class="paragraph"> <p>También puedes conectarlo con directorios de usuarios típicos en empresa (Kerberos, Active Directory, etc.) e incluso usar <code>identity providers</code> como Google, Linkedin, Github, etc.</p> </div> <div class="paragraph"> <p>Para este ejemplo vamos a crear un usuario con el interface web y además añadir Linkedin como identity provider (es decir, un usuario podrá identificarse mediante user/password o usando su cuenta de Linkedin)</p> </div> <div class="listingblock"> <div class="title">docker-compose.yml</div> <div class="content"> <pre class="prettyprint highlight"><code> keycloak: image: quay.io/keycloak/keycloak:25.0 container_name: keycloak env_file: - .env command: start-dev depends_on: - keycloakdb ports: - 8080:8080 keycloakdb: image: postgres:15 volumes: - postgres_data:/var/lib/postgresql/data env_file: - .env</code></pre> </div> </div> <div class="paragraph"> <p>El interface de Keycloak realiza dos funciones:</p> </div> <div class="ulist"> <ul> <li> <p>mostrar el dialogo para autentificar un usuario</p> </li> <li> <p>mostrar el dashboard de admin que permite la configuración y gestion del propio Keycloak</p> </li> </ul> </div> <div class="paragraph"> <p>Obviamente NO queremos que el dashboard esté accesible a todo el mundo así usaremos las variables de entorno que nos ofrece para configurarle dos URLs diferentes. Una será accesible a todos los usuarios que quieran acceder a nuestro sistema y otra sólo estará disponible para administradores</p> </div> <div class="paragraph"> <p>Para nuestro ejemplo estas URLs serán:</p> </div> <div class="ulist"> <ul> <li> <p><a href="https://apisix.edn.es/keycloak" class="bare">https://apisix.edn.es/keycloak</a></p> </li> <li> <p><a href="http://localhost:8080" class="bare">http://localhost:8080</a></p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="env">.env</h2> <div class="sectionbody"> <div class="paragraph"> <p>Usamos un fichero <code>.env</code> para tener en un sitio las variables de entorno de configuración, así como usuarios y password de sistema, así que este fichero NO debería ser versionado</p> </div> <div class="listingblock"> <div class="title">.env</div> <div class="content"> <pre class="prettyprint highlight"><code>KC_DB=postgres KC_DB_URL=jdbc:postgresql://keycloakdb:5432/keycloak KC_DB_USERNAME=keycloak KC_DB_PASSWORD=password KC_HOSTNAME=https://apisix.edn.es/keycloak KC_HOSTNAME_PORT=443 KC_HOSTNAME_STRICT=true KC_HOSTNAME_STRICT_HTTPS=true KC_HOSTNAME_ADMIN=http://localhost:8080 KC_LOG_LEVEL=info KEYCLOAK_ADMIN=admin KEYCLOAK_ADMIN_PASSWORD=admin POSTGRES_DB=keycloak POSTGRES_USER=keycloak POSTGRES_PASSWORD=password</code></pre> </div> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Básicamente, las variables que empiezan por <code>KC_</code> son propias de Keycloak y las que empiezan por <code>POSTGRES</code> son del motor de la base de datos. De ahí que estén duplicados los valores</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="preparando_keycloak">Preparando Keycloak</h2> <div class="sectionbody"> <div class="paragraph"> <p>A estas alturas estamos listos para levantar la primera fase de nuestro proyecto</p> </div> <div class="paragraph"> <p><code>docker compose up -d</code></p> </div> <div class="paragraph"> <p>Si todo va bien, Caddy gestionará el tema del SSL y Keycloak preparará la base de datos &#8230;&#8203; pero cómo acceder a la consola de Keycloak si está corriendo en una máquina en nuestro proveedor?</p> </div> <div class="paragraph"> <p><code>ssh -p 2222 -L 8080:localhost:8080 <a href="mailto:root@TU.IP">root@TU.IP</a></code></p> </div> <div class="paragraph"> <p>Es decir, abrimos una conexión ssh con nuestra máquina (yo uso el puerto 2222) y hacemos enrutado de puertos 8080 entre la máquina remota y la nuestra.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>Esta NO es la manera de segurizar un acceso remoto en una máquina en internet, pero para este artículo no me voy a complicar.</p> </dd> </dl> </div> <div class="paragraph"> <p>Existen tutoriales más detallados sobre cómo manejar Keycloak. En este artículo simplemente voy a enumerar los pasos a realizar, pues son realmente muy fáciles e intuitivos</p> </div> <div class="ulist"> <ul> <li> <p>crear un realm <code>apisix_test</code></p> </li> <li> <p>en este realmn crear un client <code>apisix</code></p> </li> <li> <p>configurar en este cliente <code>valid redirect URL</code> con <code><a href="https://apisix.edn.es/web1/anything" class="bare">https://apisix.edn.es/web1/anything</a></code> y <code><a href="https://apisix.edn.es/web2/anything" class="bare">https://apisix.edn.es/web2/anything</a></code></p> </li> <li> <p>asegurarnos en este cliente que está marcada la opción "Client authentication". De esta forma la autentificación en este realm es gestionada entre servicios. Si estuviera OFF sería para aplicaciones Javascript por ejemplo</p> </li> </ul> </div> <div class="paragraph"> <p>Una vez creado, Keycloak nos creará un client y un secret para este client que deberemos proporcionar a Apisix (paso siguiente)</p> </div> <div class="ulist"> <ul> <li> <p>crearemos un usuario <code>test</code> con password <code>test</code> y marcaremos como que su email ha sido validado y que no necesita cambiar la password en el primer acceso. (Por no complicarnos)</p> </li> <li> <p>Si quieres añadir Linkedin como Identity Provider, en el menú de la izquierda te permitirá elegirlo y añadir las claves creadas desde Linkedin</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="apisix">Apisix</h2> <div class="sectionbody"> <div class="paragraph"> <p>Apisix es un ApiGateway Open Source (la lógica de negocio no reside en él, sino que se dedica a enrutar, transformar, etc. peticiones hacia los servicios).</p> </div> <div class="paragraph"> <p>En este post lo vamos a usar en modo "standalone" de tal forma que la configuración y gestión sea lo más sencilla posible.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Puedes instalarlo con varias instancias, que use <code>etcd</code> como respaldo de la configuración, puedes instalarlo en kubernetes, etc.</p> </dd> </dl> </div> <div class="listingblock"> <div class="title">docker-compose.yml</div> <div class="content"> <pre class="prettyprint highlight"><code> apisix: image: apache/apisix:${APISIX_IMAGE_TAG:-3.10.0-debian} volumes: - ./apisix_conf/apisix-standalone.yaml:/usr/local/apisix/conf/apisix.yaml env_file: - .env environment: - APISIX_STAND_ALONE=true</code></pre> </div> </div> <div class="paragraph"> <p>Añadiremos en el fichero <code>.env</code> la configuración creada por Keycloak</p> </div> <div class="listingblock"> <div class="title">.env</div> <div class="content"> <pre class="prettyprint highlight"><code>KC_OIDC_CLIENTID=apisix KC_OIDC_SECRET=myhg------------ KC_OIDC_ISSUER=apisix_test</code></pre> </div> </div> <div class="paragraph"> <p>Por último el fichero <code>apisix-standalone.yml</code> donde ocurre toda la magia:</p> </div> <div class="listingblock"> <div class="title">apisix-standalone.yml</div> <div class="content"> <pre class="prettyprint highlight"><code>routes: - uris: [ "/keycloak/js/*", "/keycloak/resources/*", "/keycloak/realms/*", "/keycloak/robots.txt" ] upstream_id: 3 plugins: proxy-rewrite: regex_uri: ["/keycloak/(.*)","/$1"] - uri: /web1/* upstream_id: 1 plugins: proxy-rewrite: regex_uri: ["/web1/(.*)"] openid-connect: client_id: ${{KC_OIDC_CLIENTID}} client_secret: ${{KC_OIDC_SECRET}} discovery: https://apisix.edn.es/keycloak/realms/${{KC_OIDC_ISSUER}}/.well-known/openid-configuration redirect_uri: https://apisix.edn.es/web1/anything scope: openid profile - uri: /web2/* upstream_id: 2 plugins: proxy-rewrite: regex_uri: ["/web2/(.*)"] openid-connect: client_id: ${{KC_OIDC_CLIENTID}} client_secret: ${{KC_OIDC_SECRET}} discovery: https://apisix.edn.es/realms/${{KC_OIDC_ISSUER}}/.well-known/openid-configuration redirect_uri: httsp://apisix.edn.es/web2/anything scope: openid profile upstreams: - id: 1 nodes: "web1:80": 1 type: roundrobin - id: 2 nodes: "web2:80": 1 type: roundrobin - id: 3 nodes: "keycloak:8080": 1 type: roundrobin #END</code></pre> </div> </div> <div class="paragraph"> <p>Lo primero: El fichero debe acabar en "#END" !!!! Esto es así porque estamos usando la versión standalone. En una instalación en producción NO usaríamos este modo y la gestión de rutas, etc las tendríamos en ficheros separados por ejemplo.</p> </div> <div class="paragraph"> <p>Como ves este fichero es donde configuramos tanto las rutas, como los backends (upstreams) y plugins.</p> </div> <div class="paragraph"> <p>Para nuestro ejemplo vamos a usar 3 upstreams:</p> </div> <div class="ulist"> <ul> <li> <p>web1</p> </li> <li> <p>web2</p> </li> <li> <p>los endpoints de keycloak "abiertos"</p> </li> </ul> </div> <div class="paragraph"> <p>Así mismo en este ejemplo sencillo vamos a configurar 3 tipos de rutas:</p> </div> <div class="ulist"> <ul> <li> <p>Los endpoints abiertos de keycloak los dirigimos tal cual</p> </li> <li> <p>Creamos rutas para web1 y web2, y para complicar el ejemplo cada uno podría estar configurado para usar diferentes realm (web1 por ejemplo permitiría accesos a un realm y web2 a otros)</p> </li> </ul> </div> <div class="paragraph"> <p>En el caso de web1 (idem para web2) podríamos dirigir las llamadas al endpoint del servicio <code>/api</code> por ejemplo. Como estamos usando la imagen de <code>httpbin.org</code> usamos un endpoint suyo llamado <code>anything</code> que simplemente vuelca los parámetros de la llamada (y así poder comprobar que recibe el JWT entre otros)</p> </div> </div> </div> <div class="sect1"> <h2 id="ejecutando">Ejecutando</h2> <div class="sectionbody"> <div class="paragraph"> <p>Si levantamos todos los servicios <code>docker compose up -d</code> nuestro stack debería estar completo ahora:</p> </div> <div class="ulist"> <ul> <li> <p><code>caddy</code> recibe una petición https y la pasa a <code>apisix</code></p> </li> <li> <p><code>apisix</code> evalúa que <code>route</code> despachar</p> </li> <li> <p>si es para <code>web1</code> el plugin <code>openid</code> valida si hay una autentificadion valida en la petición</p> </li> <li> <p>si no la hay o es inválida <code>openid</code> se la envía a <code>keycloak</code></p> </li> <li> <p><code>keycloak</code> presenta el interface para que el usuario haga login y dialoga con el usuario</p> </li> <li> <p>una vez validado el acceso, <code>keycloak</code> redirige la petición original de <code>web1</code></p> </li> <li> <p><code>apisix</code> la recibe y la enruta a <code>web1</code></p> </li> <li> <p><code>web1</code> puede acceder al JWT</p> </li> </ul> </div> <div class="paragraph"> <p>Puedes probarlo accediendo a <code><a href="http://apisix.edn.es/web1/index.html" class="bare">http://apisix.edn.es/web1/index.html</a></code> (al menos mientras tenga esta máquina de pruebas levantada, que cuesta sus dineros)</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2024/apisix-keycloak.png" alt="apisix keycloak"> </div> </div> </div> </div> <div class="sect1"> <h2 id="conclusión">Conclusión</h2> <div class="sectionbody"> <div class="paragraph"> <p>Este ejemplo NO debería de usarse como tal en producción pero creo que sirve de ejemplo para ver cómo encajan las diferentes piezas al montar una arquitectura de microservicios con un ApiGateway y con autentificadión delegada</p> </div> </div> </div> Creando un ApiGateway con autentificacion usando: Apisix, Keycloak, Docker, Caddy Executing Nextflow pipelines with Nomad by Hashicorp Jorge Aguilera 2024-08-30T00:00:00Z https://blog.jagedn.dev/blog/2024/nomad-nextflow.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Nextflow enables scalable and reproducible scientific workflows using software containers. It allows the adaptation of pipelines written in the most common scripting languages.</p> </div> <div class="paragraph"> <p>Nomad is a simple and flexible scheduler and orchestrator to deploy and manage containers and non-containerized applications across on-premises and clouds at scale.</p> </div> <div class="paragraph"> <p>In this post, I&#8217;ll explore how to use a Nomad cluster to run Nextflow pipelines.</p> </div> </div> </div> <div class="sect1"> <h2 id="about_nomad">About Nomad</h2> <div class="sectionbody"> <div class="paragraph"> <p>In some ways, Nomad is an alternative to Kubernetes (and similar orchestrators) without its complexity. You can create a cluster of low-resources machines and Nomad orchestrates how/where deploy your workloads.</p> </div> <div class="paragraph"> <p>Workloads are defined in Nomad by a <code>Job</code> witch contains 1 or more <code>TaskGroup</code>, and every <code>TaskGroup</code> contains 1 or more <code>Task</code>. This task can be a Jar application, a system process or a Docker image</p> </div> <div class="paragraph"> <p>Also, you can share volumes across your cluster. These volumes can be a local folder, in case you have only one machine, or use some of the available plugins to share CSI volumes as NFS, etc.</p> </div> </div> </div> <div class="sect1"> <h2 id="about_nf_nomad">About nf-nomad</h2> <div class="sectionbody"> <div class="paragraph"> <p>As you can imagine, this is enough to run Nextflow pipelines (a container orchestrator and shared volumes) and the "only" missing piece is some Nextflow <code>Executor</code> to submit tasks into the cluster and control their execution and this missing piece is the <code>nf-nomad</code> plugin</p> </div> <div class="paragraph"> <p><code>nf-nomad</code> is a new Nextflow plugin, similar to the <code>nf-k8s</code> kubernetes plugin, implementing the bridge logic between Nextflow and Nomad.</p> </div> <div class="paragraph"> <p>When you execute a pipeline in Nextflow using this plugin as <code>executor</code>, it will translate, create and submit the Nextflow process to the cluster the Nomad <code>Job</code> specification.</p> </div> <div class="paragraph"> <p>Once submitted, the plugin will maintain the status of every task in the Nexflow session.</p> </div> <div class="paragraph"> <p><strong>The plugin is open source, and you can find it at <a href="https://github.com/nextflow-io/nf-nomad" class="bare">https://github.com/nextflow-io/nf-nomad</a></strong></p> </div> </div> </div> <div class="sect1"> <h2 id="running_a_nomad_cluster">Running a Nomad Cluster</h2> <div class="sectionbody"> <div class="paragraph"> <p>Install and run a Nomad cluster it&#8217;s as easy as download and execute the binary from the official website. In the same way, configure and attach clients to the cluster are straightforward, and it only requires a text configuration file.</p> </div> <div class="paragraph"> <p>For simplicity, In this post, we&#8217;ll create a cluster with only one machine on (our computer). We&#8217;ll use, also, a local folder as shared volume.</p> </div> <div class="paragraph"> <p><em>Steps in this post have been tested using a Linux machine, not sure if they will work on a Mac. Surely it will not work in a Windows OS</em></p> </div> <div class="paragraph"> <p>Download the Git repo <a href="https://github.com/nextflow-io/nf-nomad" class="bare">https://github.com/nextflow-io/nf-nomad</a> and unzip it (or clone with <code>git clone</code>) in some folder</p> </div> <div class="paragraph"> <p>Open a terminal console and navigate to the <code>validation</code> sub-folder and run on it:</p> </div> <div class="paragraph"> <p><code>./start-nomad.sh</code></p> </div> <div class="paragraph"> <p>This sh will perform the following steps:</p> </div> <div class="ulist"> <ul> <li> <p>download the <code>nomad</code> binary from the official website</p> </li> <li> <p>create a <code>server</code> and a <code>client</code> configuration files</p> </li> <li> <p>create a <code>nomad_temp</code> folder and configure it as a "shared" volume called <code>scratchdir</code></p> </li> <li> <p>run the nomad executable</p> </li> </ul> </div> <div class="paragraph"> <p>If all goes well, you have running a Nomad cluster into your computer. You see the UI at <a href="http://localhost:4646/" class="bare">http://localhost:4646/</a></p> </div> </div> </div> <div class="sect1"> <h2 id="running_a_hello_world_pipeline">Running a "hello world" pipeline</h2> <div class="sectionbody"> <div class="paragraph"> <p>In this <code>validation</code> folder you can find several pipelines examples. They are used to validate different plugin features.</p> </div> <div class="paragraph"> <p>We&#8217;ll try to run a simple "hello world" nextflow pipeline.</p> </div> <div class="paragraph"> <p>Open a terminal console and navigate to the <code>validation</code> sub-folder and run on it:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="console">export NOMAD_PLUGIN_VERSION=0.2.0 <i class="conum" data-value="1"></i><b>(1)</b> nextflow run -w $(pwd)/nomad_temp/scratchdir/ -c basic/nextflow.config basic/main.nf <i class="conum" data-value="2"></i><b>(2)</b></code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>Last version at this moment</td> </tr> <tr> <td><i class="conum" data-value="2"></i><b>2</b></td> <td>This post assumes you have nextflow 24.x.x installed in your PATH</td> </tr> </table> </div> <div class="paragraph"> <p>Using the NOMAD_PLUGIN_VERSION environment variable, we instruct to <code>basic/nextflow.config</code> about which version we want to use. Feel free to use a fixed value in <code>basic/nextflow.config</code></p> </div> <div class="paragraph"> <p>If all goes well, you will see the typical `Bonjour world', 'Ciao world', 'Hello world', 'Hola world' output</p> </div> <div class="paragraph"> <p><code>basic/main.nf</code> is the typical Nextflow "hello world", nothing special here.</p> </div> <div class="paragraph"> <p><code>basic/nextflow.config</code> configures <code>nomad</code> as the default executor. Also, it contains the minimal configuration required by the plugin:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>process { executor = "nomad" } nomad { client { address = "http://localhost:4646" } jobs { volume = { type "host" name "scratchdir" } } }</code></pre> </div> </div> <div class="paragraph"> <p>As you can see, the plugin requires the endpoint to the cluster (localhost in our case) and a volume to attach to the <code>Job</code>. This volume was created previously by the <code>start-nomad.sh</code>. In a more realistic situation probably this volume will be a <code>csi</code> type</p> </div> </div> </div> <div class="sect1"> <h2 id="nf_coredemo">nf-core/demo</h2> <div class="sectionbody"> <div class="paragraph"> <p>In the same terminal and in the <code>validation</code> folder run:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>export NXF_ASSETS=$(pwd)/nomad_temp/scratchdir/assets export NXF_CACHE_DIR=$(pwd)/nomad_temp/scratchdir/cache nextflow run -w $(pwd)/nomad_temp/scratchdir/ -c basic/nextflow.config nf-core/demo -profile test,docker --outdir $(pwd)/nomad_temp/scratchdir/outdir</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>.... * Software dependencies https://github.com/nf-core/demo/blob/master/CITATIONS.md ------------------------------------------------------ executor &gt; nomad (7) [21/35f6ba] process &gt; NFCORE_DEMO:DEMO:FASTQC (SAMPLE1_PE) [100%] 3 of 3 ✔ [9b/5e0157] process &gt; NFCORE_DEMO:DEMO:SEQTK_TRIM (SAMPLE3_SE) [100%] 3 of 3 ✔ [da/0eadbc] process &gt; NFCORE_DEMO:DEMO:MULTIQC [100%] 1 of 1 ✔ -[nf-core/demo] Pipeline completed successfully-</code></pre> </div> </div> <div class="paragraph"> <p>if all goes well, you&#8217;ll be able to see the <code>nf-core/demo</code> outputs at <code>./nomad_temp/scratchdir/outdir/pipeline_info</code> folder</p> </div> </div> </div> <div class="sect1"> <h2 id="volumes">Volumes</h2> <div class="sectionbody"> <div class="paragraph"> <p>In all these examples, we&#8217;ve used a local folder as a shared volume between our nextflow command line and containers created into the nomad cluster. However, you can also use a S3 bucket (with wave+fusion), or install some of the available Nomad plugins and mount an NFS server, for example.</p> </div> <div class="paragraph"> <p><code>nf-nomad</code> plugin allows also mounting more than one volume:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>jobs { volumes = [ { type "host" name "scratchdir" }, { type "host" name "scratchdir" path "/var/data" }, // can mount same volume in different path ] }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="delete_jobs">Delete Jobs</h2> <div class="sectionbody"> <div class="paragraph"> <p>Using the <code>jobs.deleteOnCompletion</code> boolean configuration you can specify if the jobs are removed once completed or maintain them for posterior inspection (using the nomad UI for example)</p> </div> </div> </div> <div class="sect1"> <h2 id="secrets">Secrets</h2> <div class="sectionbody"> <div class="paragraph"> <p>One feature of Nomad is to store variables into the cluster (and configure which roles can access to them,) and you can use them in your <code>Job</code> definition avoiding using fixed values into it.</p> </div> <div class="paragraph"> <p><code>nf-nomad</code> plugin use this feature to provide a Nextflow <code>SecretsProvider</code> as a bridge between your pipelines and these variables:</p> </div> <div class="paragraph"> <p>Create a key=value variable into the cluster using the nomad cli.</p> </div> <div class="paragraph"> <p><code>./nomad var put secrets/nf-nomad/MY_ACCESS_KEY MY_ACCESS_KEY=TheAccessKey</code></p> </div> <div class="paragraph"> <p>use this variable as a secret into your pipeline</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>workflow.onComplete { println("The secret is: ${secrets.MY_ACCESS_KEY}") }</code></pre> </div> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>The <code>start-nomad.sh</code> shell create a namespace and two variables. You can see how to use them in the <code>secrets/main.nf</code> pipeline</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="stop_and_clean">Stop and clean</h2> <div class="sectionbody"> <div class="paragraph"> <p>Stop the cluster is so easy as kill the <code>nomad</code> process. You can use the <code>stop-nomad.sh</code> shell to do it and clean the temporal folder</p> </div> </div> </div> <div class="sect1"> <h2 id="configuration">Configuration</h2> <div class="sectionbody"> <div class="paragraph"> <p>Using the <code>nomad</code> closure you can configure different aspects of the plugin as:</p> </div> <div class="ulist"> <ul> <li> <p>endpoint to the cluster</p> </li> <li> <p>access token (in case you&#8217;ve protected the access with a token)</p> </li> <li> <p>list of datacenters to use</p> </li> <li> <p>region where allocate jobs</p> </li> <li> <p>namespace to use in jobs</p> </li> <li> <p>list of volume specs</p> </li> <li> <p>list of affinities and constraints</p> </li> <li> <p>attempts in case of failure</p> </li> <li> <p>&#8230;&#8203;</p> </li> </ul> </div> <div class="paragraph"> <p>Also, in current version, some of them can be overwritten using environment variables:</p> </div> <div class="ulist"> <ul> <li> <p>NOMAD_ADDRESS</p> </li> <li> <p>NOMAD_TOKEN</p> </li> <li> <p>NOMAD_DC (datacenters)</p> </li> <li> <p>NOMAD_REGION</p> </li> <li> <p>NOMAD_NAMESPACE</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="raspberry_pi">Raspberry Pi</h2> <div class="sectionbody"> <div class="paragraph"> <p>As a side/fun note, I would like to comment I was able to run the <code>bactopia</code> pipeline in a raspberry pi attached to the cluster</p> </div> </div> </div> <div class="sect1"> <h2 id="conclusion">Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>At this moment the plugin is in version <code>0.2.0</code> and it is being testing by the Universitey Gent team.</p> </div> <div class="paragraph"> <p>The Current version covers almost all the requirements to run typical pipelines, but surely new features will be included in the plugin</p> </div> </div> </div> Playing to run Nextflow pipelines with Nomad Machine Learning with Spark and Groovy Jorge Aguilera 2024-07-21T00:00:00Z https://blog.jagedn.dev/blog/2024/ml-spark-groovy.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>In a previous post, <a href="machine-learning-groovy.html" class="bare">machine-learning-groovy.html</a> (spanish), I was playing to group similar customers using Groovy + Ignite.</p> </div> <div class="paragraph"> <p>To be honest, although it works, I think the script is very obscure, so I was looking for another approach, and I&#8217;ve reached Spark. In this post, I&#8217;ll cover the same issue but using it but <strong>using local mode</strong> I mean, I&#8217;ll not use many nodes as my data is a small files with 1000 records +- and can suite on my computer</p> </div> <div class="paragraph"> <p>To recap:</p> </div> <div class="paragraph"> <p>We have collected different features of our customer as number of users, number of documents finished, time to complete, web or api, and so.</p> </div> <div class="paragraph"> <p>As our main data comes from a big MySQL database, we have created a "feature" table fed with several "groups by", so we have something similar to</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 14.2857%;"> <col style="width: 14.2857%;"> <col style="width: 14.2857%;"> <col style="width: 14.2857%;"> <col style="width: 14.2857%;"> <col style="width: 14.2857%;"> <col style="width: 14.2858%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">CustomerId</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Users</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Finished</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Days</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">API</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Web</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">&#8230;&#8203;</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">1</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">2</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">21221</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">22</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">2212</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">18000</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">&#8230;&#8203;</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">2</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">1</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">221</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">2</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">21</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">200</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">&#8230;&#8203;</p></td> </tr> </tbody> </table> </div> </div> <div class="sect1"> <h2 id="project">Project</h2> <div class="sectionbody"> <div class="paragraph"> <p>This time I&#8217;ll use a <code>gradle</code> project (you can use Maven also) instead a GroovyScript. I founded some problems with Ivy downloading dependencies, so I decided to create a project with only 1 class (yes, I know, I know &#8230;&#8203;)</p> </div> <div class="listingblock"> <div class="title">build.gradle</div> <div class="content"> <pre class="prettyprint highlight"><code>dependencies { // Use the latest Groovy version for building this library implementation 'org.apache.groovy:groovy-all:4.0.11' implementation 'mysql:mysql-connector-java:5.0.5' implementation 'org.apache.spark:spark-core_2.13:3.5.1' implementation 'org.apache.spark:spark-mllib_2.13:3.5.1' implementation 'org.apache.spark:spark-sql_2.13:3.5.1' } java { toolchain { languageVersion = JavaLanguageVersion.of(11) } }</code></pre> </div> </div> <div class="paragraph"> <p>(Java version 17 doesn&#8217;t work with Spark)</p> </div> </div> </div> <div class="sect1"> <h2 id="features">Features</h2> <div class="sectionbody"> <div class="paragraph"> <p>We&#8217;ll define a correlation map between "visual labels" and mysql column:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>def labels = [ 'Users' : 'nusers', 'Documents': 'ndocuments', 'Finished' : 'docusfinished', 'Days' : 'daystofinish', 'API' : 'template', 'Web' : 'web', 'Workflow' : 'workflow' ]</code></pre> </div> </div> <div class="paragraph"> <p>And we&#8217;ll generate a CSV file:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>def rows = mlDB.rows('select * from ml.clientes order by nombre') def file = new File("out.csv") file.text = (["Company"]+labels.keySet()).join(";") + "\n" rows.eachWithIndex { row , idx-&gt; List&lt;String&gt; details = [] labels.entrySet().eachWithIndex { entry, i -&gt; details &lt;&lt; (row[entry.value] ?: 0.0).toString() } file &lt;&lt; "${idx+1};"+details.join(';')+"\n" }</code></pre> </div> </div> <div class="paragraph"> <p>By the moment nothing special, only a CSV file with a header using ";" as separator</p> </div> </div> </div> <div class="sect1"> <h2 id="spark">Spark</h2> <div class="sectionbody"> <div class="paragraph"> <p>Next we&#8217;ll create a "local" spark session and read the csv</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>def spark = SparkSession .builder() .appName("CustomersKMeans") .config(new SparkConf().setMaster("local")) .getOrCreate() def dataset = spark.read() .option("delimiter", ";") .option("header", "true") .option("inferSchema", "true") .csv("out.csv")</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="transforming_origin">Transforming origin</h2> <div class="sectionbody"> <div class="paragraph"> <p>We need to transform our dataset, adding some new columns and normalizing others:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>def assembler = new VectorAssembler(inputCols: labels.keySet(), outputCol: "features") dataset = assembler.transform(dataset) def scaler = new StandardScaler(inputCol: "features", outputCol: "scaledFeatures", withStd: true, withMean: true) def scalerModel = scaler.fit(dataset) dataset = scalerModel.transform(dataset)</code></pre> </div> </div> <div class="paragraph"> <p>We add a new "features" column and write on it all the labels (defined at the beginning), so "features" column will contain "Users, Documents, API,&#8230;&#8203; "</p> </div> <div class="paragraph"> <p>Also, we&#8217;ll transform the data using a StandardScalar so all data will be standarized using their media</p> </div> </div> </div> <div class="sect1"> <h2 id="running_a_kmean">Running a kMean</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>def kmeans = new KMeans(k:5 ,seed:1, predictionCol: "Cluster", featuresCol: "scaledFeatures" ) def kmeansModel = kmeans.fit(dataset) // Make predictions def predictions = kmeansModel.transform(dataset)</code></pre> </div> </div> <div class="paragraph"> <p>We want to have 5 groups (this is a "business" requirements. They are ways to find the optimal number). We want to "create" a new column called "Cluster" where indicate in which group the data is (by default the column is called "prediction,") and also we indicate which columns used, "scaledFeatures" in this case, created previously</p> </div> </div> </div> <div class="sect1"> <h2 id="showing_the_cluster">Showing the cluster</h2> <div class="sectionbody"> <div class="paragraph"> <p>We&#8217;ll create a copy of the original dataset, and we&#8217;ll join to it a new column <code>Cluster</code> using an inner join from <code>predictions</code> dataset</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>def copy = dataset.alias("copy") copy = copy.join(predictions.select("Company", "Cluster"), "Company", "inner") copy.show(3)</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>+-------+-----+---------+--------+----+---+---+--------+--------------------+--------------------+-------+ |Company|Users|Documents|Finished|Days|API|Web|Workflow| features| scaledFeatures|Cluster| +-------+-----+---------+--------+----+---+---+--------+--------------------+--------------------+-------+ | 1|238.0| 26906.0| 20987.0| 4.0|0.0|1.0| 0.0|[238.0,26906.0,20...|[5.09496005230008...| 0| | 2| 1.0| 16.0| 9.0| 0.0|0.0|0.0| 0.0|(7,[0,1,2],[1.0,1...|[-0.3286794172192...| 0| | 3| 80.0| 0.0| 0.0| 0.0|0.0|0.0| 0.0| (7,[0],[80.0])|[1.47920040595383...| 0| +-------+-----+---------+--------+----+---+---+--------+--------------------+--------------------+-------+ only showing top 3 rows</code></pre> </div> </div> <div class="paragraph"> <p>as you can see, we have a <code>copy</code> dataset with original data plus a <code>Cluster</code> column indicating in which cluster this customer is</p> </div> <div class="paragraph"> <p>From here you can use this information to iterate over the dataset and generate some diagrama, update a database, &#8230;&#8203; or create some HTML charts</p> </div> </div> </div> <div class="sect1"> <h2 id="chart_js">Chart.js</h2> <div class="sectionbody"> <div class="paragraph"> <p>In this post we want to create an HTML visualization using <code>chart.js</code> so we&#8217;ll create a <code>data.js</code> containing a Javascript object to embed in an index.html</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>def json = [ labels:labels.keySet(), datasets:[] ] kmeansModel.clusterCenters().eachWithIndex{v,i-&gt; json.datasets &lt;&lt; [ label:"Cluster ${i+1}", data: v.toArray(), fill: true ] } new File("data.js").text = "const dataArr = "+JsonOutput.prettyPrint(JsonOutput.toJson(json))</code></pre> </div> </div> <div class="paragraph"> <p>Most important part here is <code>kmeansModel.clusterCenters()</code></p> </div> <div class="paragraph"> <p>We create a JSON where datasets is an array of objects (required by chart.js) and everyone has an array of doubles with their centers</p> </div> <div class="paragraph"> <p>Lastly we have an <code>index.html</code> with <code>chart.js</code> and <code>data.js</code> included</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Clustering Customers&lt;/title&gt; &lt;script src="https://momentjs.com/downloads/moment.js"&gt;&lt;/script&gt; &lt;script src="https://cdn.jsdelivr.net/npm/chart.js"&gt;&lt;/script&gt; &lt;script src="./data.js"&gt;&lt;/script&gt; &lt;/head&gt; ... &lt;div style="width:75%; height: 40rem"&gt; &lt;canvas id="canvas"&gt;&lt;/canvas&gt; &lt;/div&gt; ... &lt;script&gt; const config = { type: 'radar', data: dataArr, options: { elements: { line: { borderWidth: 3 } } }, }; window.onload = function() { var ctx = document.getElementById('canvas').getContext('2d'); window.myLine = new Chart(ctx, config); }; &lt;/script&gt; ....</code></pre> </div> </div> <div class="paragraph"> <p>Nothing special but visually very attractive:</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2024/kmeans.png" alt="kmeans"> </div> </div> </div> </div> <div class="sect1"> <h2 id="source">Source</h2> <div class="sectionbody"> <div class="paragraph"> <p>Here you can find the source code</p> </div> <div class="paragraph"> <p><a href="https://gist.github.com/jagedn/184302ac4f89def14410f8a6f54a93ea" class="bare">https://gist.github.com/jagedn/184302ac4f89def14410f8a6f54a93ea</a></p> </div> </div> </div> Clustering customers with Spark + Groovy A fancy pdf CV with Asciidoctor Jorge Aguilera 2024-07-13T00:00:00Z https://blog.jagedn.dev/blog/2024/cv-asciidoctor.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>In this post I&#8217;ll show you how to create a CV in PDF using a simple text file. No Word, no Google Docs, no Acrobat &#8230;&#8203; only text</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2024/cv.png" alt="cv"> </div> </div> </div> </div> <div class="sect1"> <h2 id="asciidoctor_web_pdf">asciidoctor-web-pdf</h2> <div class="sectionbody"> <div class="paragraph"> <p>Install <code>asciidoctor-web-pdf</code></p> </div> <div class="paragraph"> <p><code>npm i -g @asciidoctor/core asciidoctor-pdf</code></p> </div> </div> </div> <div class="sect1"> <h2 id="assets">assets</h2> <div class="sectionbody"> <div class="paragraph"> <p>in a folder, grab these files:</p> </div> <div class="ulist"> <ul> <li> <p><a href="https://github.com/ggrossetie/asciidoctor-web-pdf/blob/main/examples/resume/style.css" class="bare">https://github.com/ggrossetie/asciidoctor-web-pdf/blob/main/examples/resume/style.css</a></p> </li> <li> <p><a href="https://github.com/ggrossetie/asciidoctor-web-pdf/blob/main/examples/resume/template.js" class="bare">https://github.com/ggrossetie/asciidoctor-web-pdf/blob/main/examples/resume/template.js</a></p> </li> <li> <p><a href="https://github.com/ggrossetie/asciidoctor-web-pdf/blob/main/examples/resume/phone.svg" class="bare">https://github.com/ggrossetie/asciidoctor-web-pdf/blob/main/examples/resume/phone.svg</a></p> </li> <li> <p><a href="https://github.com/ggrossetie/asciidoctor-web-pdf/blob/main/examples/resume/mail.svg" class="bare">https://github.com/ggrossetie/asciidoctor-web-pdf/blob/main/examples/resume/mail.svg</a></p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="cv">CV</h2> <div class="sectionbody"> <div class="paragraph"> <p>in the same folder, create a text file, JorgeAguileraCV.adoc, for example, and write: (feel free to change with your data)</p> </div> <div class="sect2"> <h3 id="header">Header</h3> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>= Software Developer Solutions Jorge Aguilera González [.info] == ! === Jorge Aguilera [contact] - image:mail.svg[role="picto"] jorge@edn.es</code></pre> </div> </div> <div class="paragraph"> <p>The First line is the title of your CV</p> </div> <div class="paragraph"> <p>The Second line will not be visible, so you can omit but be sure to let a blank line</p> </div> <div class="paragraph"> <p><code>[.info]</code> creates a section where you&#8217;ll insert your name</p> </div> <div class="paragraph"> <p><code>[contact]</code> will be used to write your email</p> </div> <div class="paragraph"> <p>You can add another item with your phone, for example:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>- image:mail.svg[role="picto"] jorge@edn.es - image:phone.svg[role="picto"] +3491xxxxxx</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="left">Left</h2> <div class="sectionbody"> <div class="paragraph"> <p>We&#8217;ll use the left bar of our CV to include some tips about us, as knowledge, education, style of life &#8230;&#8203;</p> </div> <div class="paragraph"> <p>So append to the file following text:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>==== Knowledge - 30+ years as Developer - C, C++, *Java*, Groovy - *Javascript*, TypeScript, NodeJS - Maven, Gradle - Asciidoctor ==== OpenSource Projects - K8s Caos Operator - Gradle extensions - Google DSL (Groovy) - Asciidoctor Extensions - MicronautRaffle ==== Publications 101-groovy-scripts blog</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="about_me">About me</h2> <div class="sectionbody"> <div class="paragraph"> <p>Now it&#8217;s time to write some sentences about us:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>[.chronologie] == ! === About me With more than 30 years of experience in IT, I’ve worked in many different sectors where always I focused to bring quality and innovation ideas in every project I’ve been participated. During several years I’ve run a one-person company offering services as technical leader and providing my experience to improve the skills of the team, teaching good practices and applying productive tools and languages.</code></pre> </div> </div> <div class="paragraph"> <p><code>[.chronologie]</code> will position "the cursor" at the top of the right part and we&#8217;ll start writing an "about me" sentences</p> </div> </div> </div> <div class="sect1"> <h2 id="professional_career">Professional career</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>==== Professional experience *Software Architect* at EDN (2024) - Helping different customers in the digital transformation of their systems, migrating from monolithic application to microservice architecture, implement best practices as code review and clean code *Software Architect/DevOps* at Baraka (Dec 2022) - Leading the migration of a NodeJS *Javascript* application deployed in AWS ECS to a *microservice architecture* in Kubernetes.</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="building_our_cv">Building our CV</h2> <div class="sectionbody"> <div class="paragraph"> <p>It&#8217;s time to see how it looks:</p> </div> <div class="paragraph"> <p><code>asciidoctor-web-pdf JorgeAguilera.adoc --template-require ./template.js</code></p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>This command will generate a temp HTML file</p> </dd> </dl> </div> <div class="paragraph"> <p>Surely you&#8217;ll need to iterate several times. My advice is to be conscious and write only a couple of sentences in every position, so the CV will have only one page</p> </div> <div class="paragraph"> <p>This is how mine looks</p> </div> <div class="paragraph"> <p><a href="JorgeAguilera.pdf" class="bare">JorgeAguilera.pdf</a></p> </div> <div class="paragraph"> <p>Now is the time to send it and wait the headhunter&#8217;s call. Good luck</p> </div> </div> </div> Build a fancy pdf CV using asciidoctor Groogle Intro Jorge Aguilera 2024-07-11T00:00:00Z https://blog.jagedn.dev/blog/groogle/groogle-1.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Groogle is a DSL (Domain Specific Language) oriented to interact with Google Cloud services in an easy way. It provides a concise language so you can create scripts or integrate into your application and consume Google Cloud services as Drive, Sheet or Gmail</p> </div> <div class="paragraph"> <p>In this post series I&#8217;ll (try) to explain the origin, aim and how to use it with several real examples</p> </div> </div> </div> <div class="sect1"> <h2 id="requirement">Requirement</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>A Google account</p> </li> <li> <p>Java 11+ and Google 4.x installed</p> </li> <li> <p>A Google credentials file (more details above)</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="example">Example</h2> <div class="sectionbody"> <div class="paragraph"> <p>With Groogle you can create a script, for example, to list all the files in your <code>Drive</code>:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>groogle = GroogleBuilder.build { withOAuthCredentials { applicationName 'test' scopes DriveScopes.DRIVE usingCredentials "client_secret.json" storeCredentials true } } groogle.with { service(DriveService).with { findFiles { eachFile { println "$id = $file.name" } } } }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="origin">Origin</h2> <div class="sectionbody"> <div class="paragraph"> <p>A few years ago I was fascinated about how easily you can write your own DSL using ApacheGroovy so I started a project called Groogle (Groovy + Google)</p> </div> <div class="paragraph"> <p>I started it using the <code>com.puravida-software.groogle</code> maven coordinates but as PuraVida Software company run out, I&#8217;ve decided to rewrite/improve it under the new <code>es.edn.groogle</code> coordinates</p> </div> </div> </div> <div class="sect1"> <h2 id="first_steps">First steps</h2> <div class="sectionbody"> <div class="paragraph"> <p>Before to start you need to have a Google Cloud account and a project created, say <code>QuickStart</code> for example</p> </div> <div class="paragraph"> <p>Create an Oauth 2.0 credential (service credentials will be covered in another post):</p> </div> <div class="imageblock"> <div class="content"> <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oyv3nvx16j574k884a54.png" alt="oyv3nvx16j574k884a54"> </div> </div> <div class="imageblock"> <div class="content"> <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b5qlgt48duwxgznh63h0.png" alt="b5qlgt48duwxgznh63h0"> </div> </div> <div class="paragraph"> <p>Download the <code>.json</code> file but <strong>don&#8217;t share them nor store in your repo</strong>. For our examples this file will be called <code>client_secret.json</code></p> </div> </div> </div> <div class="sect1"> <h2 id="first_script">First script</h2> <div class="sectionbody"> <div class="paragraph"> <p>In the same folder you downloaded the json create a <code>example.groovy</code> file:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>import com.google.api.services.sheets.v4.SheetsScopes import com.google.api.services.drive.DriveScopes import es.edn.groogle.* @Grab("es.edn:groogle:4.0.0-rc4") @GrabConfig(systemClassLoader=true) groogle = GroogleBuilder.build { withOAuthCredentials { applicationName 'test' scopes DriveScopes.DRIVE, SheetsScopes.SPREADSHEETS usingCredentials "client_secret.json" storeCredentials true } } groogle.with { service(DriveService).with { findFiles { eachFile { println "$id = $file.name" } } } }</code></pre> </div> </div> <div class="paragraph"> <p>in a terminal console execute:</p> </div> <div class="paragraph"> <p><code>groovy example.groovy</code></p> </div> <div class="paragraph"> <p>if all goes well a browser will be opened and you need to indicate which Google account you want to use</p> </div> <div class="imageblock"> <div class="content"> <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wl1k1kjl22dkit2ghzfz.png" alt="wl1k1kjl22dkit2ghzfz"> </div> </div> <div class="paragraph"> <p>and allow access to the application</p> </div> <div class="imageblock"> <div class="content"> <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/01cj5vk58mnks9wc1iwa.png" alt="01cj5vk58mnks9wc1iwa"> </div> </div> <div class="paragraph"> <p>Now you can close the browser and see how the script was able to iterate over your files</p> </div> <div class="imageblock"> <div class="content"> <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2snq47fbrcf1l68ujrp7.png" alt="2snq47fbrcf1l68ujrp7"> </div> </div> </div> </div> <div class="sect1"> <h2 id="next">Next</h2> <div class="sectionbody"> <div class="paragraph"> <p>In the following posts we&#8217;ll see how to create or download files from your Drive, create and modify Sheets or send emails</p> </div> </div> </div> Intro to Groogle Creando un producto por menos de 10€ Jorge Aguilera 2024-06-19T00:00:00Z https://blog.jagedn.dev/blog/2024/recargo-equivalencia.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Recientemente, he "sacado" al mercado un nuevo servicio que permite a las empresas que facturan a minoristas saber si alguno de ellos está acogido a un régimen especial de IVA, lo que le obliga a aplicar un tipo impositivo más.</p> </div> <div class="paragraph"> <p>Básicamente, la AEAT (la Hacienda española) ofrece un servicio para realizar esta consulta, de tal forma que rellenando un formulario, y tras identificarte con tu certificado electrónico, puedes consultar si un NIF está acogido a este servicio. Así mismo ofrece un servicio SOAP (ahí es nada) para realizar esta consulta mediante programación.</p> </div> <div class="paragraph"> <p>El caso es que a pocos clientes que manejes el tema de consultar uno a uno no es trivial por lo que he creado <code>recargo-de-equivalencia.es</code>, un servicio en el que tras darte de alta, subes un fichero con los NIFs y de forma periódica el servicio los chequeará y te notificará si encuentra alguno acogido al servicio.</p> </div> <div class="paragraph"> <p>La "gracia" del servicio es que no requiere un chequeo en tiempo real por lo que se puede realizar un escaneo semanal o mensual, por ejemplo, y notificar vía email (más adelante podría ser también mediante un WebHook).</p> </div> <div class="paragraph"> <p>Así pues los requisitos del servicio serían:</p> </div> <div class="ulist"> <ul> <li> <p>dominio personalizado</p> </li> <li> <p>una landing page donde explicar el servicio</p> </li> <li> <p>un proceso de subscripcion al servicio</p> </li> <li> <p>un aplicativo con un dashboard simple donde el usuario pueda subir un fichero y consultar aquellos que estén acogidos al sistema de recargo</p> </li> <li> <p>un proceso que periódicamente consulte <strong>todos</strong> los NIFs y actualice su estado</p> </li> <li> <p>una notificación via email</p> </li> </ul> </div> <div class="paragraph"> <p>Y el requisito más "importante": el MVP tiene que tener el costo de mantenimiento lo más reducido posible</p> </div> </div> </div> <div class="sect1"> <h2 id="infraestructura">Infraestructura</h2> <div class="sectionbody"> <div class="paragraph"> <p>La mayor parte del servicio se ha hecho en PHP y alojado en DreamHost (DH). ¿Porqué? porque es un proveedor donde tengo alojados varios dominios (pero de sites estáticos básicamente) y que me ofrece hosting con base de datos y email ilimitados. Más o menos pago al año unos 120 € y puedo alojar todos los sites que quiera.</p> </div> <div class="paragraph"> <p>Hasta hace poco permitían desplegar aplicaciones con NodeJS, Ruby y PHP pero hace poco han cambiado y sólo permiten PHP (8.3 eso sí), lo cual casi agradezco porque así me he obligado a hacer algo en PHP</p> </div> <div class="paragraph"> <p>Para el proceso que interactua con el servico SOAP de la AEAT he optado por hacer un programa de línea de comando, perfecto para ser ejecutado por un planificador de tareas de sistema (un cron) con Micronaut &#8230;&#8203; y que se ejecuta en una RaspberryPi que tenía criando polvo en la estantería !!!!</p> </div> <div class="paragraph"> <p><strong>Es decir que el coste del MVP es prácticamente cero</strong>.</p> </div> <div class="paragraph"> <p>El problema de DH es que no me sirve para registrar dominios <code>.es</code> directamente pero sí puedo registrarlo con un proveedor español (Strato en mi caso) y luego configurar los DNS para que use los de DH. A partir de ahí puedo crear tantos subdominios como quiera y alojarlos en DH, todo por el mismo precio</p> </div> <div class="paragraph"> <p>Porqué Strato? pues básicamente cuando he buscado proveedores para registrar el dominio el precio de casi todos era de unos 35 € pero en Strato era de &#8230;&#8203;. 1€!!!!</p> </div> </div> </div> <div class="sect1"> <h2 id="landing_page">Landing Page</h2> <div class="sectionbody"> <div class="paragraph"> <p>Una vez que he registrado el dominio <code>recargo-de-equivalencia.es</code> y configurado los DNS para usar los de DH he creado <code>info.recargo-de-equivalencia.es</code></p> </div> <div class="paragraph"> <p>Este es un static-site creado con Hugo usando una plantilla OpenSource y que me ha llevado un par de días ir retocando y añadiendo mi contenido.</p> </div> <div class="paragraph"> <p>Una vez tenía la landing en mi local simplemente la copiaba a la carpeta correspondiente de DH y ya estaba disponible</p> </div> </div> </div> <div class="sect1"> <h2 id="subscripcion">Subscripcion</h2> <div class="sectionbody"> <div class="paragraph"> <p>Como es un MVP he creado un form de Google con 4 preguntas para conocer a las empresas que les pueda interesar el servicio y tener su email para ponerme en contacto con ellas.</p> </div> <div class="paragraph"> <p><strong>El servicio se encuentra actualmente en Beta, es gratis y cuenta con 2 clientes</strong></p> </div> </div> </div> <div class="sect1"> <h2 id="aplicación">Aplicación</h2> <div class="sectionbody"> <div class="paragraph"> <p>Esta parte ha sido la más ardua pero probablemente por desconocimiento de PHP y el framework Laravel. Sin embargo en cierta forma ha sido la más placentera</p> </div> <div class="paragraph"> <p>Actualmente la aplicación es un simple dashboard donde, una vez registrado, puedes ver el total de NIFs que has subido y cúales de ellos están en recargo de equivalencia. Además puedes subir un fichero con más NIFs que serán incluidos en tu espacio.</p> </div> <div class="paragraph"> <p>Como nota técnica sobre Laravel comentaré que me ha encantado. Tiene muchos conceptos similares a los frameworks Java y es un ecosistema bastante maduro. Comentar que gracias a que DH también me permite ejecutar tareas planificadas ha sido muy fácil añadir Workers a la aplicación de tal forma que una vez el usuario sube un fichero el aplicativo lo guarda en un directorio temporal y un worker lo procesa al poco</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2024/recargo.png" alt="recargo"> </div> </div> </div> </div> <div class="sect1"> <h2 id="micronaut">Micronaut</h2> <div class="sectionbody"> <div class="paragraph"> <p>Para la parte de integración con AEAT he recurrido a lo "seguro": un Micronaut + Apache Axis para hacer llamadas al SOAP de la AEAT y que lee/escribe en la base de datos alojada en DH</p> </div> <div class="paragraph"> <p>Este Micronaut lo he convertido a binario con GraalVM y encima lo puedo ejecutar en una RaspberryPi por lo que el consumo energético del proceso es mínimo.</p> </div> <div class="paragraph"> <p>La idea es que este aplicativo está configurado para "peinar" los NIFs de los clientes y marcarlos si encuentra alguno en el régimen.</p> </div> <div class="paragraph"> <p>Posteriormente un worker en el aplicativo anterior detectará estos registrados marcados y los empaquetará en un email de notificación al cliente</p> </div> </div> </div> <div class="sect1"> <h2 id="conclusion">Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>Actualmente el servicio se encuentra, como he dicho, en fase Beta pero ya maneja unos 35.000 NIFs</p> </div> <div class="paragraph"> <p>Los siguientes pasos, según el interés que despierte, sería crear algunas integraciones por ejemplo para FacturaScript, WordPress o incluso en avanzar la parte de WebHook</p> </div> </div> </div> Creando un servicio SaaS para comprobar si un minorista está acogido al recargo de equivalencia Executing Nextflow pipelines with K3d Jorge Aguilera 2024-05-01T00:00:00Z https://blog.jagedn.dev/blog/2024/k3s-nextflow.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p><em>Nextflow enables scalable and reproducible scientific workflows using software containers. It allows the adaptation of pipelines written in the most common scripting languages.</em></p> </div> <div class="paragraph"> <p>In this post I&#8217;ll explore how to create a "work environment" where run Nextflow pipelines using Kubernetes.</p> </div> <div class="paragraph"> <p>The user will be able to create and edit the pipeline, configuration and assets into their computer and run the pipelines in the cluster in a fluent way.</p> </div> <div class="paragraph"> <p>The idea is to provide to the user the most complete environment in their computer so, once tested and validated, it will run in a real cluster.</p> </div> </div> </div> <div class="sect1"> <h2 id="problem">Problem</h2> <div class="sectionbody"> <div class="paragraph"> <p>When you&#8217;re deploying Nextflow&#8217;s pipelines in kubernetes you need to find a way to share the workdir. Options are basically use <code>volumes</code> or use <code>fusion</code></p> </div> <div class="paragraph"> <p>Fusion is very easy to use (basically <code>enable=true</code> in the nextflow.config) but you create an external dependency.</p> </div> <div class="paragraph"> <p>Volumes are more "native" solution, but you need to fight with the infrastructure, providers, etc.</p> </div> <div class="paragraph"> <p>Another challenge working with pipelines in kubernetes is to retrieve outputs once the pipeline is completed. Probably you need to run some <code>kubectl cp</code> commands</p> </div> <div class="paragraph"> <p>In this post I&#8217;ll create a cluster (with only 1 node) from scratch and run some pipelines on it. We&#8217;ll see how pods are created and how we can edit the pipeline and/or configuration using our preferred IDE (notepad, vi, VSCode,&#8230;&#8203;)</p> </div> </div> </div> <div class="sect1"> <h2 id="requirements">Requirements</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>a computer (and internet connection of course)</p> </li> </ul> </div> <div class="paragraph"> <p>We need to have installed following command line tools:</p> </div> <div class="ulist"> <ul> <li> <p>kubectl (if you work in kubernetes you&#8217;ve it)</p> </li> <li> <p>skaffold <a href="https://skaffold.dev/docs/install/" class="bare">https://skaffold.dev/docs/install/</a></p> </li> <li> <p>k3d <a href="https://k3d.io/v5.6.3/#releases" class="bare">https://k3d.io/v5.6.3/#releases</a></p> </li> <li> <p>k9s. Is <strong>not required</strong> but very useful</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="create_a_cluster">Create a cluster</h2> <div class="sectionbody"> <div class="paragraph"> <p><code>k3d cluster create nextflow --port 9999:80@loadbalancer</code></p> </div> <div class="paragraph"> <p>We&#8217;re creating a new cluster called <code>nextflow</code> (can be whatever). We&#8217;ll use 9999 port to access to our results</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>kubectl cluster-info Kubernetes control plane is running at https://0.0.0.0:40145 CoreDNS is running at https://0.0.0.0:40145/api/v1/namespaces/kube-system/services/kube-dns:dns/proxy Metrics-server is running at https://0.0.0.0:40145/api/v1/namespaces/kube-system/services/https:metrics-server:https/proxy</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="preparing_our_environment">Preparing our environment</h2> <div class="sectionbody"> <div class="paragraph"> <p>Create a folder <code>test</code></p> </div> <div class="sect2"> <h3 id="nextflow_area">Nextflow area</h3> <div class="paragraph"> <p>Create a subfolder <code>project</code> (will be our nextflow working area)</p> </div> <div class="paragraph"> <p>Create a <code>nextflow.config</code> in this subfolder</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>k8s { context = 'k3d-nextflow' <i class="conum" data-value="1"></i><b>(1)</b> namespace = 'default' <i class="conum" data-value="2"></i><b>(2)</b> runAsUser = 0 serviceAccount = 'nextflow-sa' storageClaimName = 'nextflow' storageMountPath = '/mnt/workdir' } process { executor = 'k8s' container = "quay.io/nextflow/rnaseq-nf:v1.2.1" }</code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td><code>k3d-nextflow</code> was created by k3d. If you chose another name you need to change it</td> </tr> <tr> <td><i class="conum" data-value="2"></i><b>2</b></td> <td>I&#8217;ll use the <code>default</code> namespace</td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="k8s_area">K8s area</h3> <div class="paragraph"> <p>Create a subfolder <code>k8s</code> and create following files into it:</p> </div> <div class="listingblock"> <div class="title">pvc.yml</div> <div class="content"> <pre class="prettyprint highlight"><code>apiVersion: v1 kind: PersistentVolumeClaim metadata: name: nextflow namespace: default spec: accessModes: - ReadWriteOnce storageClassName: local-path resources: requests: storage: 2Gi</code></pre> </div> </div> <div class="listingblock"> <div class="title">admin.yml</div> <div class="content"> <pre class="prettyprint highlight"><code>--- apiVersion: v1 kind: ServiceAccount metadata: name: nextflow-sa --- apiVersion: rbac.authorization.k8s.io/v1 kind: Role metadata: name: nextflow-role rules: - apiGroups: [""] resources: ["pods", "pods/status", "pods/log", "pods/exec"] verbs: ["get", "list", "watch", "create", "delete"] --- apiVersion: rbac.authorization.k8s.io/v1 kind: RoleBinding metadata: name: nextflow-rolebind roleRef: apiGroup: rbac.authorization.k8s.io kind: Role name: nextflow-role subjects: - kind: ServiceAccount name: nextflow-sa</code></pre> </div> </div> <div class="listingblock"> <div class="title">jagedn.yml</div> <div class="content"> <pre class="prettyprint highlight"><code>--- apiVersion: apps/v1 kind: Deployment metadata: name: jagedn <i class="conum" data-value="1"></i><b>(1)</b> labels: app: jagedn spec: selector: matchLabels: app: jagedn template: metadata: labels: app: jagedn spec: serviceAccountName: nextflow-sa terminationGracePeriodSeconds: 5 securityContext: fsGroup: 0 runAsGroup: 0 runAsNonRoot: false runAsUser: 0 containers: - name: nextflow image: jagedn volumeMounts: - mountPath: /mnt/workdir name: volume - name: nginx-container image: nginx:latest ports: - containerPort: 80 volumeMounts: - name: volume mountPath: /usr/share/nginx/html volumes: - name: volume persistentVolumeClaim: claimName: nextflow</code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td><code>jagedn</code> is my nick, you can use whatever but pay attention to replace in all places</td> </tr> </table> </div> <div class="listingblock"> <div class="title">kustomization.yaml</div> <div class="content"> <pre class="prettyprint highlight"><code>apiVersion: kustomize.config.k8s.io/v1beta1 kind: Kustomization resources: - pvc.yml - admin.yml - jagedn.yaml</code></pre> </div> </div> <div class="paragraph"> <p>Basically we&#8217;re creating:</p> </div> <div class="ulist"> <ul> <li> <p>service account and their roles</p> </li> <li> <p>a persistent volume claim to share across pods</p> </li> <li> <p>a pod</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="skaffold">Skaffold</h3> <div class="paragraph"> <p>In the "parent" folder create following files:</p> </div> <div class="listingblock"> <div class="title">Dockerfile</div> <div class="content"> <pre class="prettyprint highlight"><code>FROM nextflow/nextflow:24.03.0-edge RUN yum install -y tar <i class="conum" data-value="1"></i><b>(1)</b> ADD project /home/project <i class="conum" data-value="2"></i><b>(2)</b> ENTRYPOINT ["tail", "-f", "/dev/null"]</code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>Required by skaffold to sync files</td> </tr> <tr> <td><i class="conum" data-value="2"></i><b>2</b></td> <td>Required by skaffold to sync files</td> </tr> </table> </div> <div class="listingblock"> <div class="title">skaffold.yaml</div> <div class="content"> <pre class="prettyprint highlight"><code>apiVersion: skaffold/v4beta10 kind: Config metadata: name: nextflow build: artifacts: - image: jagedn context: . docker: dockerfile: Dockerfile sync: manual: - src: 'project/**' dest: /home manifests: kustomize: paths: - k8s deploy: kubectl: {}</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="watching">Watching</h2> <div class="sectionbody"> <div class="paragraph"> <p>Only for the purpose to watch how pods are created and destroyed we&#8217;ll run in a terminal console <code>k9s</code></p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2024/k9s.png" alt="k9s"> </div> </div> </div> </div> <div class="sect1"> <h2 id="go">Go</h2> <div class="sectionbody"> <div class="paragraph"> <p>Open the project with VSCode (for example)</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2024/vscode.png" alt="vscode"> </div> </div> <div class="paragraph"> <p>Open a <code>terminal</code> tab and execute:</p> </div> <div class="paragraph"> <p><code>skaffold dev</code></p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2024/skaffold.png" alt="skaffold"> </div> </div> <div class="paragraph"> <p>let the terminal running</p> </div> <div class="paragraph"> <p>In another terminal console execute:</p> </div> <div class="paragraph"> <p><code>kubectl exec -it jagedn-56b9fb64dc-2xw8f&#8201;&#8212;&#8201;/bin/bash</code></p> </div> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>You&#8217;ll need to use the pod id skaffold has created</p> </dd> </dl> </div> <div class="paragraph"> <p>and cd to <code>/home/project</code></p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2024/nextflow-k3d-1.png" alt="nextflow k3d 1"> </div> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Using you VCode editor open <code>nextflow.config</code> and change something (a comment for example). Save the change and in the terminal run a <code>cat</code> command to verify skaffold has been synced the file</p> </dd> </dl> </div> <div class="imageblock"> <div class="content"> <img src="/images/2024/nextflow-k3d-2.png" alt="nextflow k3d 2"> </div> </div> </div> </div> <div class="sect1"> <h2 id="run">Run</h2> <div class="sectionbody"> <div class="paragraph"> <p>In the terminal execute</p> </div> <div class="paragraph"> <p><code>NXF_ASSETS=/mnt/workdir/assets nextflow run nextflow-io/rnaseq-nf -with-docker -w /mnt/workdir -cache false</code></p> </div> <div class="paragraph"> <p>If you change to the <code>k9s</code> console, you&#8217;ll see how pods are created</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2024/k9s-2.png" alt="k9s 2"> </div> </div> <div class="paragraph"> <p>After a while the pipeline is completed !!!!</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2024/nextflow-k3d-3.png" alt="nextflow k3d 3"> </div> </div> </div> </div> <div class="sect1"> <h2 id="extra_ball">Extra ball</h2> <div class="sectionbody"> <div class="paragraph"> <p>If you inspect the folder <code>/home/project/results</code> you&#8217;ll find the outputs of the pipeline, so &#8230;&#8203; how we can inspect them?</p> </div> <div class="paragraph"> <p>Execute <code>cp -R results/ /mnt/workdir/</code> in the kubectl terminal and open a browser to <a href="http://localhost:9999/results/multiqc_report.html" class="bare">http://localhost:9999/results/multiqc_report.html</a></p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2024/tadam.png" alt="tadam"> </div> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>A better approach is to create another volume for the result so nginx sidecar pod can read directly</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="clean_up">Clean up</h2> <div class="sectionbody"> <div class="paragraph"> <p>Once you want to end with your cluster only finish (ctrl+c) the skaffold session and it will remove all resources</p> </div> <div class="paragraph"> <p>To delete the cluster you can run <code>k3d cluster delete nextflow</code></p> </div> </div> </div> <div class="sect1"> <h2 id="conclusion">Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>Don&#8217;t know if this approach is the best or maybe a little complicate but I think can be a good approach to have a very productive kubernetes environment without the need to have a full cluster</p> </div> </div> </div> <div class="sect1"> <h2 id="update_using_k3s">Update: using k3s</h2> <div class="sectionbody"> <div class="paragraph"> <p>If you have a k3s cluster with several nodes and Longhorm installed you can change the <code>pvc.yml</code> file and you&#8217;ll be able to run your pipeline using them</p> </div> <div class="listingblock"> <div class="title">pvc.yaml</div> <div class="content"> <pre class="prettyprint highlight"><code>apiVersion: v1 kind: PersistentVolumeClaim metadata: name: nextflow spec: accessModes: - ReadWriteMany storageClassName: longhorn resources: requests: storage: 2Gi</code></pre> </div> </div> </div> </div> Playing to run pipelines with k3d Machine Learning con Groovy Jorge Aguilera 2024-04-27T00:00:00Z https://blog.jagedn.dev/blog/2024/machine-learning-groovy.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Recientemente he participado en lo que podría ser mi primer proyecto con Machine Learning. En concreto el proyecto consiste en catalogar a unos mil clientes en función de una serie de atributos (unos 15) de tal forma que nos ayude a comprender mejor sus necesidades.</p> </div> <div class="paragraph"> <p>El proyecto no requiere (ahora mismo) de un análisis en real-time sino que vamos a iterando y mejorando las características y sacando conclusiones en cada una.</p> </div> <div class="paragraph"> <p>En esta fase del proyecto no hace falta acudir a diferentes fuentes de datos sino que vamos a trabajar con los datos "consolidados" que ya disponemos. Es decir, vamos a calcular para cada cliente:</p> </div> <div class="ulist"> <ul> <li> <p>el número de usuarios que utilizan nuestra aplicación (hay clientes con un sólo usuario y otros con un pool de ellos)</p> </li> <li> <p>el número de documentos que empiezan y el número de documentos que completan</p> </li> <li> <p>el tiempo, en días, que emplean para completarlos</p> </li> <li> <p>si usan el interface web o el api</p> </li> <li> <p>etc</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="preparación_de_datos">Preparación de datos</h2> <div class="sectionbody"> <div class="paragraph"> <p>Así pues la primera tarea es revisar las fuentes de datos y "su calidad". En nuestro proyecto hemos revisado las diferentes tablas de las qe disponemos y preparado una base de datos donde consolidarlas.</p> </div> <div class="paragraph"> <p>Esto ha sido por la comodidad de usar algo que es compartido entre los diferentes miembros del proyecto y su rapidez. En otros proyectos o artículos verás que usan ficheros CSV o sistemas más o menos complejos según sus necesidades. En realidad, al menos para nuestro caso, esto es irrelevante, lo único que queremos es tener un sitio que sea cómodo de donde leer los datos</p> </div> <div class="paragraph"> <p>Así pues se han creado una serie de "select count, group, sum, diff" que nos permitan obtener los diferentes contadores por clientes e insertarlos en una tabla</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>create table clientes ( id int auto_increment primary key, cif varchar(20) not null, nombre varchar(200) not null, nusers int, ndocuments int, docusfinished int, daystofinish int, api int, web int, ... otros campos de interés )</code></pre> </div> </div> <div class="paragraph"> <p>Este proceso ha sido incremental, es decir, hemos empezado con unos pocos campos e ido añadiendo según analizábamos el modelo y las herramientas.</p> </div> </div> </div> <div class="sect1"> <h2 id="datos">Datos</h2> <div class="sectionbody"> <div class="paragraph"> <p>La idea principal es disponer de una serie de registros donde cada uno representa los atributos de un cliente, lo cual coincide con la idea de un query SQL y que Groovy nos permite leer al vuelo.</p> </div> <div class="paragraph"> <p>Definimos un mapa <code>metadata</code> donde podremos asociar los nombres de los campos MySQL con un nombre más legible y prepararemos con los datos de tabla un <code>data</code> :</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>var metadata = [ 'Users' : 'nusers', 'Documents': 'ndocuments', 'Finished' : 'docusfinished', 'Days' : 'daystofinish', 'API' : 'template', 'Web' : 'web', ... ] var rows = mlDB.rows("select * from ml.clientes order by nombre") var fields = metadata.values() var data = rows.collect { row -&gt; fields.collect { row[it] ?: 0.0 } as double[] } as double[][]</code></pre> </div> </div> <div class="paragraph"> <p>Así en <code>data</code> tenemos una matriz de NxM con los datos de los clientes</p> </div> </div> </div> <div class="sect1"> <h2 id="groovy_y_apache_ignite">Groovy y Apache Ignite</h2> <div class="sectionbody"> <div class="paragraph"> <p>A diferencia de la mayoría de los post que encontrarás por ahí nosotros no hemos usado Python, sino Groovy. No voy a detallar las razones, pero básicamente es porque puedo.</p> </div> <div class="paragraph"> <p>Por la parte de Machine Learning, existen diferentes frameworks con capacidades para ello, pero Ignite se integra muy bien con Groovy y ha sido muy fácil usarlo. En mi equipo, un portátil normal, y con un script de Groovy de unas cuantas líneas, el proceso de generar el cluster de clientes tarda apenas unos segundos sin necesidad de crear ninguna infraestructura especial.</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>@Grab("org.apache.ignite:ignite-core:2.15.0") @Grab("org.apache.ignite:ignite-ml:2.15.0") @Grab("org.apache.ignite:ignite-spring:2.15.0") import org.apache.ignite.cache.affinity.rendezvous.RendezvousAffinityFunction import org.apache.ignite.cache.query.ScanQuery import org.apache.ignite.configuration.CacheConfiguration import org.apache.ignite.configuration.IgniteConfiguration import org.apache.ignite.ml.clustering.kmeans.KMeansTrainer import org.apache.ignite.ml.dataset.feature.extractor.impl.DoubleArrayVectorizer import org.apache.ignite.spi.discovery.tcp.TcpDiscoverySpi import org.apache.ignite.spi.discovery.tcp.ipfinder.multicast.TcpDiscoveryMulticastIpFinder import static org.apache.ignite.Ignition.start var cfg = new IgniteConfiguration( peerClassLoadingEnabled: true, discoverySpi: new TcpDiscoverySpi( ipFinder: new TcpDiscoveryMulticastIpFinder( addresses: ['127.0.0.1:47500..47509'] ) ) ) start(cfg).withCloseable { ignite -&gt; // alimentar a Ignite }</code></pre> </div> </div> <div class="paragraph"> <p>Aunque el script es más complejo (y lo iré desgranado a continuación) este código básicamente lo que hace es levantar en nuestra máquina una instancia de Ignite de un sólo nodo.</p> </div> <div class="paragraph"> <p>A continuación creamos una cache</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>var dataCache = ignite.createCache(new CacheConfiguration&lt;Integer, double[]&gt;( name: "TEST_${UUID.randomUUID()}", affinity: new RendezvousAffinityFunction(false, 10)))</code></pre> </div> </div> <div class="paragraph"> <p>y le alimentamos con los datos de <code>data</code>. Insertaremos los datos de todos nuestros clientes porque no son millones de registros, sólo unos miles</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>data.indices.each { int i -&gt; dataCache.put(i, data[i]) // estamos insertando en la fila "i" un array de doubles }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="entrenando_el_modelo">Entrenando el modelo</h2> <div class="sectionbody"> <div class="paragraph"> <p>A continuación vamos a decirle a Ignite que entrene al modelo con los datos proporcionados:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>var vectorizer = new DoubleArrayVectorizer() var trainer = new KMeansTrainer() .withAmountOfClusters(CLUSTERS) .withMaxIterations(100) .withEpsilon(1.0E-14) var mdl = trainer.fit(ignite, dataCache, vectorizer) var centroids = mdl.centers*.all()</code></pre> </div> </div> <div class="paragraph"> <p>CLUSTERS es el número de agrupaciones en las que queremos categorizar a nuestros clientes. Para nuestro proyecto hemos empezado con 3, pero ahora estamos probando con 10 para conseguir mayor "granuralidad"</p> </div> <div class="paragraph"> <p><strong>Esta es la parte central y más difícil de entender de este método de ML.</strong> Lo que hace el algoritmo de KMeans es tomar CLUSTERS puntos aleatorios y de forma repetitiva (nosotros forzamos a 100 veces) va analizando cada fila de datos y viendo la distancia "matemática" que hay con esos puntos. En cada paso irá colocando a esa fila en un grupo u otro, de tal forma que al final del bucle unos registros estarán en un grupo y otros en otro.</p> </div> <div class="paragraph"> <p>El elemento aleatorio de dónde ubicar los puntos (centroides) iniciales hace que si ejecutas el proceso diferentes veces obtengas diferentes resultados. Por eso estoy forzando al trainer a que la distancia entre los elementos sea muy muy reducida y a que se ejecute hasta 100 veces obteniendo así las mismas (o parecidas) agrupaciones todas las veces que se ejecuta el script.</p> </div> <div class="paragraph"> <p>Una vez ejecutado el trainer lo que obtenemos es un array de los puntos "centrales" de cada agrupación</p> </div> </div> </div> <div class="sect1"> <h2 id="alimentando_al_modelo">Alimentando al modelo</h2> <div class="sectionbody"> <div class="paragraph"> <p>Por último lo que vamos a hacer es, usando el modelo entrenado, "predecir" uno a uno cada cliente e ir acumulándolos en un mapa en memoria <code>clusters</code> , además vamos a guardar las observaciones de cada uno en otro mapa <code>observationMap</code> para tener un mayor detalle. Este segundo map lo usamos para generar un report más específico pero por no complicar este post no voy a entrar en detalles</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>// Predict all data var clusters = [:].withDefault { [] } as Map&lt;Integer, ArrayList&gt; var observationsMap = [:].withDefault { [:].withDefault { [] as Set } } dataCache.query(new ScanQuery&lt;&gt;()).withCloseable { observations -&gt; observations.each { observation -&gt; def (k, v) = observation.with { [getKey(), getValue()] } def vector = vectorizer.extractFeatures(k, v) int prediction = mdl.predict(vector) clusters[prediction] += companies[k] v.eachWithIndex { val, idx -&gt; observationsMap[prediction][features[idx]] += val } } }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="generando_conclusiones">Generando conclusiones</h2> <div class="sectionbody"> <div class="paragraph"> <p>Una vez hemos realizado todas las predicciones tendremos en las variables <code>clusters</code> y <code>observationsMap</code> suficiente información de cada grupo así como por cada cliente y podremos sacar conclusiones e incluso podremos generar gráficas</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code> int clusterIdx = 1 clusters.sort { e -&gt; e.value.size() }.each { k, v -&gt; println "\nCluster ${clusterIdx}: ${v.sort().join(', ')}" def chart = new RadarChartBuilder().width(1024).height(768).title("Cluster ${clusterIdx}: ${v.size()} Empresas").build() chart.radiiLabels = features as String[] chart.styler.with { legendVisible = true seriesColors = [ new Color(255, 51, 151, 50) ] as Color[] } chart.addSeries("Serie".toString(), normalized) def bufferedImage = BitmapEncoder.getBufferedImage(chart) var outputfile = new File("cluster_${clusterIdx}.png") ImageIO.write(bufferedImage, "png", outputfile) clusterIdx++ }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="ejemplo">Ejemplo</h2> <div class="sectionbody"> <div class="paragraph"> <p>Tras ejecutar el script obtenemos gráficas de cada cluster (podríamos tenerlos todos en una pero interpretar tanta info resulta un poco confuso así que hemos preferido crear una imagen por cluster) como por ejemplo:</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2024/cluster1.png" alt="cluster1"> </div> <div class="title">Figure 1. Ejemplo de cluster</div> </div> <div class="paragraph"> <p>Estas agrupaciones nos ayudan a determinar qué empresas en concreto están tardando muchos días en completar el proceso de documentos y que además tienen una baja tasa de terminados lo que indica que están teniendo problemas de usabilidad con la aplicación</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2024/cluster2.png" alt="cluster2"> </div> <div class="title">Figure 2. Ejemplo de cluster</div> </div> <div class="paragraph"> <p>O a ver que un par de empresas son capaces de terminar todo el flujo de creación de documentos pero empleando muchos usuarios por lo que podríamos ayudarles en mejorar las integraciones con API</p> </div> <div class="paragraph"> <p>En esta fase del proyecto tenemos 10 agrupaciones de clientes y cada una revela ciertas características y/o patrones que nos pueden ayudar a enfocar el diálogo de mejoras.</p> </div> <div class="paragraph"> <p>Así mismo trabajando "un poco" más en el script hemos parametrizado qué atributos nos interesan en cada ejecución de tal forma que en pocos segundos, de una forma sencilla, podemos obtener diferentes agrupaciones que nos descubren comportamientos de los clientes</p> </div> </div> </div> <div class="sect1"> <h2 id="conclusion">Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>En este post NO muestro todo el script, simplemente las partes de interés (además de que puede haber algún dato sensible) pero espero que sirva para exponer la idea principal de cómo agrupar clientes en función de múltiples atributos</p> </div> <div class="paragraph"> <p>Personalmente lo mejor para mí es poder seguir aplicando mis conocimientos de Apache Groovy y descubrir nuevos frameworks de Machine Learning sin tener que tocar una sóla línea de Python</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>En este post encontrarás una explicación mejor de cómo hacer una agrupación de marcas de Wisky (que es en el que me he inspirado para este proyecto)</p> </dd> </dl> </div> <div class="paragraph"> <p><a href="https://groovy.apache.org/blog/whiskey-clustering-with-groovy-and" class="bare">https://groovy.apache.org/blog/whiskey-clustering-with-groovy-and</a></p> </div> </div> </div> Agrupando clientes con Machine Learning (Groovy+Apache Ignite) Deploying a K3s cluster with SSL Jorge Aguilera 2024-04-20T00:00:00Z https://blog.jagedn.dev/blog/2024/k3s-ssl.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>In this post I&#8217;ll explain how to deploy a ready to prod k8s cluster (with only 1 node) using k3s and exposing a service using https with an auto-provisioned certificate using Let&#8217;s Encrypt</p> </div> <div class="paragraph"> <p>As a plus we&#8217;ll install Apisix, an OpenSource ApiGateway, to allow grow up our stack with more nodes+applications</p> </div> </div> </div> <div class="sect1"> <h2 id="requirement">Requirement</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>A Linux server with (min) 2Gb</p> </li> <li> <p>A registered DNS, for example <code>api.jorge.io</code></p> </li> <li> <p>kubectl installed</p> </li> <li> <p>helm installed</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="install_k3s">Install k3s</h2> <div class="sectionbody"> <div class="paragraph"> <p>K3s is a light implementation of kubernetes ready to production. You can find more information at <a href="https://docs.k3s.io/installation" class="bare">https://docs.k3s.io/installation</a></p> </div> <div class="paragraph"> <p><code>curl -sfL <a href="https://get.k3s.io" class="bare">https://get.k3s.io</a> | INSTALL_K3S_EXEC="--tls-san api.jorge.io" sh -</code></p> </div> </div> </div> <div class="sect1"> <h2 id="install_apisix">Install Apisix</h2> <div class="sectionbody"> <div class="paragraph"> <p>Apisix is an ApiGateway. You can use it as standalone, with docker or integrate into your cluster. It has a lot of plugins and features ready to be used in production</p> </div> <div class="paragraph"> <p>We&#8217;ll use a namespace for Apisix:</p> </div> <div class="paragraph"> <p><code>kubectl create namespace ingress-apisix</code></p> </div> <div class="paragraph"> <p>We&#8217;ll install a basic/typical implementation:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>helm repo add apisix https://charts.apiseven.com helm update KUBECONFIG=/etc/rancher/k3s/k3s.yaml helm install apisix apisix/apisix --set gateway.tls.enabled=true --set ingress-controller.enabled=true --namespace ingress-apisix</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="install_certmanager">Install CertManager</h2> <div class="sectionbody"> <div class="paragraph"> <p>CertManager is the agent able to create and provision certificates. It allows to create diferent kinds of certificates and talk with different CAs to create and install them as secrets into our cluster. For our we&#8217;ll use it to install free SSL certificates from Let&#8217;s Encrypt</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>helm repo add jetstack https://charts.jetstack.io --force-update helm update KUBECONFIG=/etc/rancher/k3s/k3s.yaml helm install cert-manager jetstack/cert-manager --namespace cert-manager --create-namespace --version v1.14.4</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="checking">Checking</h2> <div class="sectionbody"> <div class="paragraph"> <p>We&#8217;ll check if Apisix is ready</p> </div> <div class="paragraph"> <p><code>kubectl get all -n ingress-apisix</code></p> </div> <div class="paragraph"> <p>Pods and services are up and running</p> </div> </div> </div> <div class="sect1"> <h2 id="the_funny_part">The funny part</h2> <div class="sectionbody"> <div class="paragraph"> <p>First thing (can be also last, of course, it doesnt matter) will be to redirect all plain http requests to https</p> </div> <div class="listingblock"> <div class="title">traefik-https-redirect-middleware.yaml</div> <div class="content"> <pre>apiVersion: traefik.containo.us/v1alpha1 kind: Middleware metadata: name: redirect-https spec: redirectScheme: scheme: https permanent: true</pre> </div> </div> <div class="paragraph"> <p><code>kubectl apply -f traefik-https-redirect-middleware.yaml</code></p> </div> <div class="paragraph"> <p>Next, we&#8217;ll create the issuer:</p> </div> <div class="listingblock"> <div class="title">cluster-issuer.yaml</div> <div class="content"> <pre>apiVersion: cert-manager.io/v1 kind: ClusterIssuer metadata: name: letsencrypt namespace: ingress-apisix spec: acme: server: https://acme-v02.api.letsencrypt.org/directory email: jorge@edn.es privateKeySecretRef: name: letsencrypt solvers: - selector: {} http01: ingress: class: traefik</pre> </div> </div> <div class="paragraph"> <p><code>kubectl apply -f cluster-issuer.yaml</code></p> </div> <div class="paragraph"> <p>We&#8217;ve created a ClusterIssuer (so all nodes and all namespaces in the cluster will be able to use it)</p> </div> <div class="paragraph"> <p>It will negociate with Lets Encrypt using the <code>http01</code> method via traefik and will create a secret into the cluster named <code>letsencrypt</code> (or whatever you specify)</p> </div> <div class="paragraph"> <p>Now, we&#8217;ll send all trafic to Apisix</p> </div> <div class="listingblock"> <div class="title">ingress.yml</div> <div class="content"> <pre>apiVersion: networking.k8s.io/v1 kind: Ingress metadata: annotations: spec.ingressClassName: traefik cert-manager.io/cluster-issuer: letsencrypt traefik.ingress.kubernetes.io/router.middlewares: default-redirect-https@kubernetescrd name: api-jorge-ingress namespace: ingress-apisix spec: rules: - host: api.jorge.io http: paths: - pathType: Prefix path: / backend: service: name: apisix-gateway port: number: 80 tls: - hosts: - api.jorge.io secretName: letsencrypt-cert</pre> </div> </div> <div class="paragraph"> <p><code>kubectl apply -f ingress.yml</code></p> </div> <div class="paragraph"> <p>Pay attention to the annotations, this is the "trick":</p> </div> <div class="ulist"> <ul> <li> <p>we will use the traekif ingress</p> </li> <li> <p>we&#8217;re instructing to the certificate manager to use the previous issuer created</p> </li> <li> <p>we&#8217;re instructing to traefil to redirect all plain http to https</p> </li> <li> <p>we&#8217;re instructing we want to use a certificate from a secret (created by cert-manager)</p> </li> </ul> </div> <div class="paragraph"> <p><strong>Now all traffic will be served from our k3s cluster using https with a certificate created by Lets&#8217;Encrypt</strong></p> </div> <div class="paragraph"> <p>Obviously we&#8217;ll have a 404 as Apisix doesn&#8217;t know what to do with the request</p> </div> </div> </div> <div class="sect1"> <h2 id="deploying_a_service">Deploying a service</h2> <div class="sectionbody"> <div class="paragraph"> <p>We&#8217;ll deploy a typical service (httpbin)</p> </div> <div class="paragraph"> <p><code>kubectl run httpbin --image kennethreitz/httpbin --namespace ingress-apisix</code></p> </div> <div class="paragraph"> <p>(We are creating a deploying httpbin using the public image kennethreitz/httpbin)</p> </div> <div class="paragraph"> <p>and exposing it</p> </div> <div class="paragraph"> <p><code>kubectl expose pod httpbin -n ingress-apisix --port 80</code></p> </div> <div class="paragraph"> <p>It only remains to "link" Apisix with the new httpbin service:</p> </div> <div class="listingblock"> <div class="title">routes.yaml</div> <div class="content"> <pre>apiVersion: apisix.apache.org/v2 kind: ApisixRoute metadata: name: httpbin spec: http: - name: httpbin match: paths: - /* hosts: - api.jorge.io backends: - serviceName: httpbin servicePort: 8080</pre> </div> </div> <div class="paragraph"> <p>We are creating an ApisixRoute to route all requests to <code>api.jorge.io</code> to the httpbin service.</p> </div> <div class="paragraph"> <p>And this is all. Right now a request from outside will follow:</p> </div> <div class="ulist"> <ul> <li> <p>traefik redirecting http to https</p> </li> <li> <p>cert-manager negociate, creates and store the certificate</p> </li> <li> <p>traefik redirect all requests to Apisix</p> </li> <li> <p>Apisix determine which service to use (httpbin in our case)</p> </li> <li> <p>httpbin response to the requests</p> </li> </ul> </div> </div> </div> Deploying from scratch a basic k3s cluster with Let's Encrypt SSL Is Spam? Jorge Aguilera 2024-01-16T00:00:00Z https://blog.jagedn.dev/blog/2024/is-spam-in-devto.html <div class="paragraph"> <p>These last days I&#8217;ve reported to the Dev.to admin a few posts as spam, so I&#8217;ve developed this small bash script to detect posible posts</p> </div> <div class="paragraph"> <p>INFO: You need to have <code>httpie</code> and <code>jq</code> installed. Also, an API-KEY is required</p> </div> <div class="paragraph"> <p>INFO: In fact, it&#8217;s more to practice httpie and jq filtering capabilities than a useful tool</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>#!/bin/bash API_KEY=$1 <i class="conum" data-value="1"></i><b>(1)</b> latest=$(http https://dev.to/api/articles api-key:$API_KEY accept:application/vnd.forem.api-v1+json per_page==80) <i class="conum" data-value="2"></i><b>(2)</b> filtered=$(jq '.[] | select(.reading_time_minutes==1 and .user.user_id &gt; 4)' &lt;&lt;&lt; "$latest") echo Total Last articles $(jq -M -r '.id' &lt;&lt;&lt; "$filtered" | wc -l) echo '-----' echo Number of authors $(jq -M -r '.user.user_id' &lt;&lt;&lt; "$filtered" | uniq | wc -l) echo '-----' <i class="conum" data-value="3"></i><b>(3)</b> users=$(jq -M -r '.user | .user_id' &lt;&lt;&lt; "$filtered" | uniq) for user_id in $(echo "$users"); do <i class="conum" data-value="4"></i><b>(4)</b> strjoined_at=$(http GET "https://dev.to/api/users/$user_id" api-key:$API_KEY accept:application/vnd.forem.api-v1+json | jq -r '.joined_at') joined_at=$(date --date="$strjoined_at" "+%Y-%m-%d") days=$((($(date +%s) - $(date -d "$joined_at" +%s))/86400)) <i class="conum" data-value="5"></i><b>(5)</b> if (( ${days:-2} &lt; 3 )); then echo "The $user_id user is suspect to be spam, see post:" jq --arg jq_user_id ${user_id} '.[] | select(.user.user_id == ($jq_user_id|tonumber)) | .url' &lt;&lt;&lt; "$latest" fi done</code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>retrieve last articles (80 max)</td> </tr> <tr> <td><i class="conum" data-value="2"></i><b>2</b></td> <td>filter by <code>reading_time_minutes</code> as spam usually are short post</td> </tr> <tr> <td><i class="conum" data-value="3"></i><b>3</b></td> <td>extract uniques <code>user_id</code></td> </tr> <tr> <td><i class="conum" data-value="4"></i><b>4</b></td> <td>find user details for <code>user_id</code></td> </tr> <tr> <td><i class="conum" data-value="5"></i><b>5</b></td> <td>check if this account was recently created</td> </tr> </table> </div> <div class="paragraph"> <p>Obviously not all articles that meet these conditions are spam. Lot of people (as me) write a hello-world just created the account so the script show the url, so I can read the post and decide if it&#8217;s spam or not.</p> </div> <div class="paragraph"> <p>For next version, I have time, I would like to include some kind of "IA" to automatically read the post and decide if the post is spam</p> </div> A 20 lines bash script to check if last posts in Dev.to can be spam Groogle al rescate Jorge Aguilera 2023-12-02T00:00:00Z https://blog.jagedn.dev/blog/2023/groogle-al-rescate.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Hace ya unos años dediqué un tiempo en desarrollar un DSL (domain specific language) para poder usar los servicios de Google de una forma simple. La implementación la hice, obviamente, en Groovy (de ahí el nombre Groogle como contracción entre Groovy y Google)</p> </div> <div class="paragraph"> <p>Llegué a publicar bastantes releases cubriendo varios servicios como Drive, Sheet, Gmail, People y Calendar pero para ser sincero como no veía mucho interés por parte de la comunidad en el DSL lo fui dejando y dedicandome a otras cosas.</p> </div> <div class="paragraph"> <p>Pero de repente y por casualidad, hablando con una amiga me dice que han tenido un problema con la base de datos y que se va a pasar toda la mañana (con suerte) extrayendo datos de unas 120 hojas de cálculo Google para recuperarlos.</p> </div> <div class="paragraph"> <p>Básicamente, tenía que ir una por una, buscar la hoja correspondiente a diciembre y extraer los 31 valores de una columna, pasarlos a un fichero csv para al final del todo poder importarlos de nuevo a la base de datos.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>No viene al caso el porqué una empresa maneja toda su información en hojas de Google. No creo que sean los únicos</p> </dd> </dl> </div> <div class="paragraph"> <p>Así que ví la oportunidad para desempolvar Groogle y echarle una mano.</p> </div> <div class="paragraph"> <p>En primer lugar, lo que necesitaba era los identificadores de todas esas hojas de cálculo y como además necesitábamos saber a quién correspondía cada una le dije a mi amiga que fuera recabando esta información (puesto que además era ella la que tenía acceso a las hojas). Simplemente tenía que prepara un fichero parecido a:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>Fulanito 123123123123sdafas12312 Meganito 92131231ewewrdsfs112321 ....</code></pre> </div> </div> <div class="paragraph"> <p>Los IDs se pueden extraer fácilmente de la URL cuando estás editando la hoja.</p> </div> <div class="paragraph"> <p>Mientras se ponía a esta tarea yo preparé el DSL:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="groovy">@Grab('com.puravida-software.groogle:groogle-core:3.1.2') @Grab('com.puravida-software.groogle:groogle-sheet:3.1.2') import com.google.api.client.googleapis.auth.oauth2.GoogleClientSecrets import com.google.api.client.json.gson.GsonFactory import com.google.api.services.sheets.v4.SheetsScopes import com.puravida.groogle.* import java.text.SimpleDateFormat lst = new File("lista.txt").text.split("\n") sdf = new SimpleDateFormat("yyyy/MM/dd") file = new File("data.csv") file.text = "id | fecha | valor\n" groogle = GroogleBuilder.build { withOAuthCredentials { applicationName 'test-sheet' withScopes SheetsScopes.SPREADSHEETS usingCredentials "client_secret.json" storeCredentials true } service SheetServiceBuilder.build(), SheetService } centros.eachWithIndex { line, cidx -&gt; def kv = line.split(" ") def id = kv[0] def sheetId = kv[1] println id groogle.service(SheetService).withSpreadSheet sheetId, { withSheet 'Dic23', { def day = sdf.parse( "2023/01/01") def values = writeRange("J7", "J37").get() values.eachWithIndex{ v, idx-&gt; file &lt;&lt; "${kv[0]} | ${sdf.format(day)} | ${v[0]}\n" day++ } } } if( !(cidx % 10) ){ sleep 1000*60 } }</code></pre> </div> </div> <div class="paragraph"> <p>Tras importar las librerías correspondientes e inicializar un par de variables empezamos escribiendo en el fichero a generar unas cabeceras</p> </div> <div class="paragraph"> <p>Usando <code>withOAuthCredentials</code> le diremos a Groogle que el usuario se tendrá que identificar para lo que se abrirá un navegador y el usuario podrá usar su cuenta para dar permisos al script.</p> </div> <div class="paragraph"> <p>Esto lo que quiere decir es que no necesito ejecutar el script en mi equipo, sino que puedo pasarselo tal cual y ella ejecutarlo en su máquina, usando su cuenta de Google (teniendo Groovy instalado claro)</p> </div> <div class="paragraph"> <p>El resto del script es bastante fácil:</p> </div> <div class="ulist"> <ul> <li> <p>leemos línea a línea el fichero que ha preparado con los IDs de las hoja</p> </li> <li> <p><code>withSpreadSheet sheetId</code> abre la hoja con este ID</p> </li> <li> <p><code>withSheet 'Dic23'</code> abre la pestaña de esa hoja</p> </li> <li> <p><code>def values = writeRange("J7", "J37").get()</code> leemos de una sola vez todo un rango</p> </li> <li> <p>vamos volcando al fichero cada valor junto con el origen y la fecha</p> </li> </ul> </div> <div class="paragraph"> <p>Para evitar que Google nos dé un error por muchas lecturas en poco tiempo metemos una espera cada 10 hojas de un minuto.</p> </div> <div class="paragraph"> <p>Tras un par de pruebas tuvimos listo el fichero completo.</p> </div> <div class="paragraph"> <p>Tiempo ejecución 5-8 minutos</p> </div> <div class="paragraph"> <p>Tiempo que nos llevó preparar el script 30-40 minutos</p> </div> </div> </div> <div class="sect1"> <h2 id="conclusión">Conclusión</h2> <div class="sectionbody"> <div class="paragraph"> <p>Sé que puede ser una noñería, pero que de vez en cuando, acuda a un proyecto OpenSource que publiqué hace un tiempo y que pueda resolverle a alguien el evitar estar todo un día realizando una tarea tan pesada como esta que se puede resolver con unas pocas líneas me llenan de orgullo y satisfacción. ;)</p> </div> </div> </div> Usando el DSL Groogle para extraer datos de 100 hojas de cálculo Integrando un botón de Donar en React Jorge Aguilera 2023-12-02T00:00:00Z https://blog.jagedn.dev/blog/2023/stripe-react.html <div id="preamble"> <div class="sectionbody"> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>De react tengo cero conocimientos, lo único que sé copypastear muy bien</p> </dd> </dl> </div> <div class="paragraph"> <p>Recientemente, he publicado una aplicación hecha totalmente en React (un framework javascript para desarrollar aplicaciones web).</p> </div> <div class="paragraph"> <p>La aplicación en sí no es muy complicada, simplemente sirve para convertir unos ficheros XML de la Seguridad Social a Excel y viceversa, pero quería darle un toque moderno y hacerla visualmente atractiva así que he buscado algún ejemplo React que me gustara y del que poder partir</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>La aplicación en concreto está en <a href="https://creta.edn.es" class="bare">https://creta.edn.es</a></p> </dd> </dl> </div> <div class="paragraph"> <p>Una vez que me peleé con el framework y entendí un poco cómo funciona pude desplegar la aplicación y ya hay algún usuario usándola e incluso me han reportado algún bug (que ha sido oportunamente corregido).</p> </div> <div class="paragraph"> <p>En su momento me planteé hacer la aplicación accesible mediante un pago, tipo una subscripción o un pago único así que me creé una cuenta de Stripe. Sin embargo, una vez me puse con la aplicación decidí que no me compensaba el esfuerzo de crear todo el sistema de carrito de la compra para una aplicación tan simple así que la publiqué abierta.</p> </div> <div class="paragraph"> <p>Sin embargo, ahora que ya está publicada y en uso me he planteado si la gente que la usa se animaría a realizar un pequeño donativo, aunque fueran un par de euros para ayudar en el mantenimiento del hosting. Realmente no lo necesitaría pero por un lado me gustaría comprobar si la gente es consciente de que estas cosas nos cuestan tiempo y esfuerzo y por otra me interesaba investigar la integración con Stripe.</p> </div> <div class="paragraph"> <p>Descartado el implementar un carrito de la compra descubrí que Stripe permite generar un trozo de código HTML que puedes integrar en tu web para que el usuario pueda hacer pagos simples, así que me propuse incluir un botón de "Donar" en la aplicación.</p> </div> <div class="paragraph"> <p>Como digo, Stripe cuenta con librerías para muchos lenguajes y componentes web para integrar en tu aplicación, pero el caso concreto de insertar un código HTML en React no era tan trivial (para un backend sin conocimientos como yo).</p> </div> <div class="paragraph"> <p>Al final la solución ha sido así de sencilla:</p> </div> </div> </div> <div class="sect1"> <h2 id="componente_stripecard">Componente StripeCard</h2> <div class="sectionbody"> <div class="paragraph"> <p>En la carpeta component, he creado un subdirectorio <code>StripeCard</code> con dos ficheros</p> </div> <div class="listingblock"> <div class="title">types.ts</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="typescript">export interface StripeCardProps { buttonId?: string; publishableKey?: string; }</code></pre> </div> </div> <div class="paragraph"> <p>Para definir los dos properties que requiere el componente (ambos proporcionados por Stripe cuando creas el botón desde su dashboard)</p> </div> <div class="listingblock"> <div class="title">index.ts</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="typescript">import * as React from 'react' import { StripeCardProps } from './types'; declare global { namespace JSX { interface IntrinsicElements { 'stripe-buy-button': any; } } } export const StripeCard = ({ buttonId, publishableKey }: StripeCardProps) =&gt;{ return ( &lt;div&gt; &lt;stripe-buy-button buy-button-id={buttonId} publishable-key={publishableKey} &gt; &lt;/stripe-buy-button&gt; &lt;/div&gt; ); };</code></pre> </div> </div> <div class="paragraph"> <p>Con esto ya cuento con un componente "integrado" en React llamado 'stripe-buy-button'</p> </div> </div> </div> <div class="sect1"> <h2 id="page">Page</h2> <div class="sectionbody"> <div class="paragraph"> <p>Simplemente para incluirlo en una página</p> </div> <div class="listingblock"> <div class="title">Creta/index.ts</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="typescript">import { lazy } from "react"; // otros imports import { StripeCard } from '../../common/StripeCard'; const Home = () =&gt; { return ( &lt;Container&gt; &lt;ScrollToTop /&gt; &lt;UnificarCreta id="unificar" title={UnirLiquidaciones.title} content={UnirLiquidaciones.text}/&gt; &lt;StripeCard buttonId={process.env.REACT_APP_PUBLIC_STRIPE_BUTTON_ID} publishableKey={process.env.REACT_APP_PUBLIC_STRIPE_PUBLISHABLE_KEY}/&gt; &lt;SolicitudCalculosForm id="solicitud" title={SolicitudCalculo.title} content={SolicitudCalculo.text}/&gt; &lt;/Container&gt; ); }; export default Home;</code></pre> </div> </div> <div class="paragraph"> <p>Como ves es tan simple como hacer el import al igual que con otros componentes y usarlo en tu página</p> </div> </div> </div> <div class="sect1"> <h2 id="stripe_javascript">Stripe Javascript</h2> <div class="sectionbody"> <div class="paragraph"> <p>Por último simplemente tenemos que incluir el código propio de Stripe que será el encargado de "dar vida" al webcomponent</p> </div> <div class="listingblock"> <div class="title">public/index.html</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="html">&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; ... &lt;script async src="https://js.stripe.com/v3/buy-button.js"&gt; &lt;/script&gt; &lt;/head&gt;</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="conclusión">Conclusión</h2> <div class="sectionbody"> <div class="paragraph"> <p>Aunque en este post hablo de Stripe en realidad es la forma que he encontrado de integrar webcomponents ajenos a React dentro de este framework</p> </div> </div> </div> Añadiendo un botón "Donar" de Stripe en una aplicación React Adding AI to your Micronaut search service Jorge Aguilera 2023-10-17T00:00:00Z https://blog.jagedn.dev/blog/2023/openai-milvus-micronaut.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>In this post we&#8217;ll see how to create an "intelligent search service" using Micronaut, Milvus and OpenAI.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>I&#8217;ll show only most important part of the code to have an idea about the full picture</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="idea">Idea</h2> <div class="sectionbody"> <div class="paragraph"> <p>Say we want to create a service to search across a bunch of product descriptions using a user input.</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 50%;"> <col style="width: 50%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">ProductId</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">ProductDescription</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">1</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">This is long text with several info for product 1</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">2</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">This is long text with several info for product 2</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">&#8230;&#8203;</p></td> <td class="tableblock halign-left valign-top"></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">n</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">This is long text with several info for product n</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Traditionally we will use some kind of `LIKE %str%' approach, so we&#8217;ll try to find descriptions containing the input text. But we want to improve our service with a little intelligence and search using vector search where information is represented as vectors instead to plain text so queries can retrieve "closed" documents instead "matched" documents.</p> </div> <div class="paragraph"> <p>For this example, we&#8217;ll use Milvus (<a href="https://milvus.io/" class="bare">https://milvus.io/</a>) as a "similarity" database. Another alternatives can be Meilisearch or Postgresql with pg_vector plugin installed, for example</p> </div> </div> </div> <div class="sect1"> <h2 id="architecture">Architecture</h2> <div class="sectionbody"> <div class="imageblock"> <div class="content"> <img src="/images/diag-a970f120851b2be2551be21afa8af63b.png" alt="Diagram" width="757" height="302"> </div> </div> </div> </div> <div class="sect1"> <h2 id="requirements">Requirements</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>PostgreSQL (or another source where "documents" are stored). For our example documents will be stock descriptions</p> </li> <li> <p>Milvus</p> </li> <li> <p>OpenAI account (we&#8217;ll use free tier of OpenAI to vectorized documents)</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="collection">Collection</h2> <div class="sectionbody"> <div class="paragraph"> <p>We need to create the collection in Milvus. For this purpose we&#8217;ll create a Micronaut command line (cli) application and add the milvus dependency</p> </div> <div class="listingblock"> <div class="title">gradle.build</div> <div class="content"> <pre class="prettyprint highlight"><code>dependencies{ ... implementation 'io.milvus:milvus-sdk-java:2.2.5' }</code></pre> </div> </div> <div class="paragraph"> <p>And we&#8217;ll create a PicoCli Command java class. We can implement also others commands as <code>delete-collection</code>, <code>create-user</code>, &#8230;&#8203;</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>MilvusClient connect(){ return new MilvusServiceClient( ConnectParam.newBuilder() .withUri(url) .withAuthorization(user, password) .build() ); } void createCollection() throws Exception { final var milvusClient = connect(); final var collection = positional.get(1); final var createCollection = CreateCollectionParam.newBuilder() .withCollectionName(collection) .addFieldType(FieldType.newBuilder().withName("id") .withDataType(DataType.Int64).withPrimaryKey(true).withAutoID(true).build()) .addFieldType(FieldType.newBuilder().withName("instrument_id") .withDataType(DataType.VarChar).withMaxLength(36).build()) .addFieldType(FieldType.newBuilder().withName("stock_instrument") .withDataType(DataType.VarChar).withMaxLength(20000).build()) .addFieldType(FieldType.newBuilder().withName("embedding") .withDataType(DataType.FloatVector).withDimension(1536).build()) .build(); final var response = milvusClient.createCollection(createCollection); if( response.getStatus().intValue() != R.success().getStatus() ) throw response.getException(); final var createIndex = CreateIndexParam.newBuilder() .withCollectionName(collection) .withFieldName("embedding") .withIndexType(IndexType.IVF_FLAT) .withMetricType(MetricType.L2) .withExtraParam("{\"nlist\": 1024}") .build(); final var index = milvusClient.createIndex(createIndex); if( index.getStatus().intValue() != R.success().getStatus() ) throw response.getException(); }</code></pre> </div> </div> <div class="paragraph"> <p>Basically we&#8217;re creating a Milvus collection with 4 fields, and auto generated Id, our stock Id, the full description of the stock (for future reference) and an embedding vector to represent the description</p> </div> <div class="paragraph"> <p>Once we build the jar we can run something similar to</p> </div> <div class="paragraph"> <p><code>java -jar milvus-cli.jar --url milvus-instance --user user --password password create-schema</code></p> </div> </div> </div> <div class="sect1"> <h2 id="documents">Documents</h2> <div class="sectionbody"> <div class="paragraph"> <p>We can use also the previous command line java to feed the collection but as we want to update every day we&#8217;ll create a service and use a daily scheduler to do it.</p> </div> <div class="paragraph"> <p>Stock description will be extracted from our PostgreSQL but in your case can be text files, Excel, World, etc</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>@JdbcRepository(dialect = Dialect.POSTGRES) public interface StocksRepository extends GenericRepository&lt;StockInstrumentEntity, UUID&gt; { Flux&lt;StockInstrumentEntity&gt;findAll();</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="openai">OpenAI</h2> <div class="sectionbody"> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>This service will require an authorization token</p> </dd> </dl> </div> <div class="paragraph"> <p>We will use public OpenAPI endpoint to send descriptions and retrieve associated vectors.</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>@Serdeable public record EmbeddingsModel(List&lt;String&gt; input, String model) { } @Client("https://api.openai.com") public interface OpenaiClient { @Post("/v1/embeddings") EmbeddingsResponse embeddings( @Body EmbeddingsModel model, @Header(HttpHeaders.AUTHORIZATION)String auth); } @Serdeable public record EmbeddingData(String object, List&lt;Float&gt; embedding, int index) { }</code></pre> </div> </div> <div class="paragraph"> <p>EmbeddingsModel is a POJO to send a list of Strings to be vectorized using a model, <code>"text-embedding-ada-002"</code> in this case, and receive a list of <code>EmbeddingData</code> where every input was converted to a <code>List&lt;Float&gt;</code> (the vector)</p> </div> </div> </div> <div class="sect1"> <h2 id="feed_milvus">Feed Milvus</h2> <div class="sectionbody"> <div class="paragraph"> <p>Basically we have a Micronaut service retrieving StockInstrumentEntities from the database, sending the description to OpenAI and receiving a <code>List&lt;Float&gt;</code> per each document. Now is time to store all information into the collection:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>List&lt;InsertParam.Field&gt; fields = new ArrayList&lt;&gt;(); fields.add(new InsertParam.Field("instrument_id", ids)); fields.add(new InsertParam.Field("stock_instrument", stocks)); fields.add(new InsertParam.Field("embedding", vectors)); InsertParam insertParam = InsertParam.newBuilder() .withCollectionName(configuration.getCollection()) .withFields(fields) .build(); var resp = milvusClient.insert(insertParam);</code></pre> </div> </div> <div class="paragraph"> <p>As you can see Milvus allows feed collections using a batch of objects. In our example we&#8217;re sending a bunch of 100 Ids+Descriptions+Vectors</p> </div> </div> </div> <div class="sect1"> <h2 id="intelligent_search">Intelligent Search</h2> <div class="sectionbody"> <div class="paragraph"> <p>To run the search we need vectorized the user input as we did with the description of the stocks, using the OpenAI endpoint. Once we have the associated vector we can use Milvus to run a search:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>LoadCollectionParam.newBuilder().withCollectionName(collection).build()); if( load.getStatus().intValue() != R.success().getStatus() ) throw load.getException(); List&lt;String&gt; query_output_fields = List.of("id","instrument_id", stock_instrument"); QueryParam queryParam = QueryParam.newBuilder() .withCollectionName(collection) .withConsistencyLevel(ConsistencyLevelEnum.STRONG) .withExpr(search) .withOutFields(query_output_fields) .withOffset(0L) .withLimit(100L) .build(); R&lt;QueryResults&gt; respQuery = milvusClient.query(queryParam); QueryResultsWrapper wrapperQuery = new QueryResultsWrapper(respQuery.getData()); var ids = wrapperQuery.getFieldWrapper("instrument_id").getFieldData(); var stocks = wrapperQuery.getFieldWrapper("stock_instrument").getFieldData(); for(var i=0; i&lt; ids.size(); i++){ System.out.println(Map.of("id",ids.get(i),"stock",stocks.get(i))); }</code></pre> </div> </div> <div class="paragraph"> <p>Using the search vector Milvus will run a query and find these related documents using the distances of the vectors.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>As you can see, we&#8217;re retrieving our custom Id (<code>instrument_id</code>) so we can use it and retrieve from our Postgresql database more information</p> </dd> </dl> </div> <div class="paragraph"> <p>Some search examples:</p> </div> <div class="ulist"> <ul> <li> <p>"companies selling cars"</p> <div class="ulist"> <ul> <li> <p>"Ford Motor Company is an automobile company that designs, manufactures, markets, and services a full line of Ford trucks, utility vehicles, cars as well as Lincoln luxury vehicles"</p> </li> <li> <p>"Toyota Motor Corp is a Japan-based company engaged in the automobile business, finance business and other businesses."</p> </li> <li> <p>"General Motors Company designs, builds and sells trucks, crossovers, cars and automobile parts worldwide"</p> </li> </ul> </div> </li> <li> <p>"women care"</p> <div class="ulist"> <ul> <li> <p>The Wendy&#8217;s Company (Wendy) is engaged in the business of operating, developing and franchising a system of quick-service restaurants</p> </li> <li> <p>JELD-WEN Holding, Inc. is a door and window manufacturer. The Company designs, produces and distributes a range of interior and exterior doors, wood, vinyl and aluminum windows</p> </li> </ul> </div> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="conclusion">Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>As you can see it&#8217;s very easy to integrate new similarity databases, as Milvus in this case, to improve the user search experience</p> </div> </div> </div> An "improved" Micronaut search service using embeddings with OpenAI and Milvus ApacheConf Halifax Jorge Aguilera 2023-10-13T00:00:00Z https://blog.jagedn.dev/blog/2023/apacheconf-halifax.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Por segunda vez he estado en la ApacheCon, (Conferencias de la fundación Apache sobre Open Source) esta vez en Halifax, Canada. En este post, voy a intentar resumir mi experiencia</p> </div> </div> </div> <div class="sect1"> <h2 id="cómo_por_qué_otra_vez">¿Cómo? ¿Por qué? ¿otra vez?</h2> <div class="sectionbody"> <div class="paragraph"> <p>El cómo ya lo expliqué en el post del año pasado sobre las conferencias en New Orleans. Básicamente, y a pesar de que el año pasado me dije que había estado bien pero que era muy cansado, otra vez el "impulso" de vivir una experiencia me llevó a enviar dos propuestas al track de Groovy.</p> </div> <div class="paragraph"> <p>Esta vez tenía claro que una propuesta iba a ser la de cómo hacer un operador de kubernetes en Groovy. Había aprendido recientemente y tenía un par de ellos ya hechos y funcionando así que &#8230;&#8203; propuesta enviada!! Luego me acordé que había estado hablando el año pasado con un programador sobre Micronaut y Kafka y tenía una charla que había dado &#8230;&#8203; pero me parecía muy larga de dar y entonces se me ocurrió que podía mandar la versión corta de cómo empezar con kubernetes usando Okteto &#8230;&#8203; ¡Segunda propuesta enviada!!</p> </div> <div class="paragraph"> <p>Como el año pasado todo estaba supeditado a que me aceptaran también como assistant porque así me costearían el viaje, al menos el billete de avión (al final fue todo incluido!!!). No lo tenía claro porque había entendido el año pasado que suelen aceptar a gente que no haya estado antes así que envié mi solicitud como assistant cruzando los dedos y a esperar.</p> </div> <div class="paragraph"> <p>Por otro lado ya empezaba a imaginar cómo compaginaría la asistencia con el trabajo pero en mi fuero interno sabía que para cuando llegara la fecha lo más probable es que ya no estuviera en este sitio así que ya cruzaríamos ese puente cuando llegáramos a ese río.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Copiado del post sobre el evento del año pasado: He "descubierto" que existe un programa de voluntariado en el que, si te aceptan, puedes asistir a la conferencia a gastos pagados (billete y hotel e incluso manutención). La labor que hay que hacer es básicamente el primer día estar en recepción para dar las camisetas y luego ayudar en las charlas al ponente avisándole del tiempo que le queda etc. No sé si lo entendí bien, pero suelen pillar a gente que no lo haya solicitado anteriormente. Creo que es una oportunidad para poder asistir, conocer gente y vivir una experiencia bastante enriquecedora.</p> </dd> </dl> </div> <div class="paragraph"> <p>Este año parecía que me sentiría más seguro con el inglés, pero para ser sincero creo que nunca se está lo suficientemente seguro, pero bueno he sobrevivido.</p> </div> <div class="paragraph"> <p>Para más info sobre asistir como assistant <a href="https://events.apache.org/involved/index.html" class="bare">https://events.apache.org/involved/index.html</a></p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2023/apachecon-1.jpg" alt="apachecon 1"> </div> <div class="title">Figure 1. Primer registro impreso, el mío</div> </div> </div> </div> <div class="sect1"> <h2 id="la_conferencia">La conferencia</h2> <div class="sectionbody"> <div class="paragraph"> <p>Sobre la conferencia y las charlas:</p> </div> <div class="paragraph"> <p>Para ser sinceros, este año la he visto más deslucida que el anterior. No, no me dejé deslumbrar por la novedad, es que este año ha habido menos asistentes (tal vez no era un sitio tan fácil de llegar como el anterior) y en mi opinión, menos "ambiente". Aun así ha sido un evento muy interesante y se han hablado de un montón de temas.</p> </div> <div class="paragraph"> <p>Este año se han organizado los tracks por días. Por ejemplo Groovy y API los dos primeros, Inteligencia Artificial e infra otro, etc. En general se han tratado muchos temas diferentes siendo el de AI el estrella, como era de esperar.</p> </div> <div class="paragraph"> <p>En lugar de un hotel, ha sido en un centro de convenciones y teníamos toda una planta para nosotros por lo que moverse entre salas era superfácil, estaban todas a la vista y bien marcadas. Eran salas bastante amplias y muy bien preparadas. ¡La mía incluso tenía un "podium" y atril para el speaker!!</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2023/apachecon-2.jpg" alt="apachecon 2"> </div> <div class="title">Figure 2. Primer registro impreso, el mío</div> </div> <div class="paragraph"> <p>Como en la edición anterior, no se han grabado todas salvo las keynotes y alguna por ahí. Creo que se ha grabado el audio de muchas, pero no sé con qué intención la verdad.</p> </div> <div class="paragraph"> <p>A diferencia del año anterior, la comida estaba incluida y entre que si assistant, speaker y que "os invitamos" las cenas también han estado incluidas. Vamos, que al final me he gastado unos 60 euros en total como mucho</p> </div> </div> </div> <div class="sect1"> <h2 id="las_charlas">Las charlas</h2> <div class="sectionbody"> <div class="paragraph"> <p>Con lo de assistant me ha tocado estar atento de varios tracks, así que he podido oir cosas de las que no tengo ni idea, y como en el chiste del perro mistetas, "pero me gustaría". No solo AI, las charlas estrellas con salas llenas de gente, sino también Spark, GeoSpatial y algunas de kubernetes</p> </div> <div class="paragraph"> <p>En mi opinión y a las que yo he asistido, casi todas eran muy interesantes y bastante asequibles (me refiero al tema de seguir al ponente, material, etc.)</p> </div> <div class="paragraph"> <p>Por ejemplo, y como una especie de regalo, asistí a la última charla tras los 4 días, ya relajado, a una sobre un plugin de Maven para comprobar si tus releases son "reproducible builds" superchula.</p> </div> <div class="paragraph"> <p>Intenté/Tomé un montón de fotos de cada una a las que fuí para luego repasarlas, espero tener tiempo para hacerlo</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2023/apachecon-3.jpg" alt="apachecon 3"> </div> </div> <div class="imageblock"> <div class="content"> <img src="/images/2023/apachecon-4.jpg" alt="apachecon 4"> </div> </div> <div class="imageblock"> <div class="content"> <img src="/images/2023/apachecon-5.jpg" alt="apachecon 5"> </div> </div> <div class="imageblock"> <div class="content"> <img src="/images/2023/apachecon-6.jpg" alt="apachecon 6"> </div> </div> <div class="imageblock"> <div class="content"> <img src="/images/2023/apachecon-7.jpg" alt="apachecon 7"> </div> </div> </div> </div> <div class="sect1"> <h2 id="socializar">Socializar</h2> <div class="sectionbody"> <div class="paragraph"> <p>Este año me propusé socializar más. No lo conseguí, pero tampoco es que fuera un ermitaño, así que bueno he sobrevivido y hablado con gente de "distinto pelaje" a la par que he charlado con algunas de las figuras que llevan Groovy, por ejemplo</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2023/apachecon-8.jpg" alt="apachecon 8"> </div> </div> <div class="paragraph"> <p>o incluso con algunos "legendarios" del OpenSource</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2023/apachecon-9.jpg" alt="apachecon 9"> </div> </div> <div class="paragraph"> <p>y muchos, muchos saraos</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2023/apachecon-10.jpg" alt="apachecon 10"> </div> </div> </div> </div> <div class="sect1"> <h2 id="mis_charlas">Mis charlas</h2> <div class="sectionbody"> <div class="paragraph"> <p>Este año, a diferencia del anterior, mis charlas fueron nada más empezar. El año anterior fue hacia el final con lo que tuve tiempo de ir ganando confianza. Este año como eso ya estaba "superado" (mentira) me ha venido bien que fuera nada más empezar y así ya poder dedicarme a la labor de assistant</p> </div> <div class="paragraph"> <p>Voy a resumir mis dos charlas en dos palabras: fracaso absoluto</p> </div> <div class="paragraph"> <p>No acudió nadie. Pero nadie, nadie. Solo Paul, que es el que lleva el track de Groovy. El resto de personas que habían asistido a la charla anterior, se levantaron y me quedé sólo. Como puedes imaginar todo un palo que me dejó el resto del día echo polvo.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>como hemos venido a jugar, ya el domingo más relajado lo puse en contexto y bueno, estas cosas pasan, a veces tu propuesta no interesa al público y ya está. La diferencia con los Meetups es que vas viendo antes cómo va la gente que se apunta, mientras que aquí vas a "pecho palomo"</p> </dd> </dl> </div> <div class="paragraph"> <p>Tengo que decir que yo creo que no salieron mal. Todo funcionó y no hubo efecto demo, me trabé en alguna parte porque por mucho que ensayes luego sale otra cosa, pero nada grave y en resumen, otro listón superado que de todo se aprende</p> </div> </div> </div> <div class="sect1"> <h2 id="lighthing_talk">Lighthing talk</h2> <div class="sectionbody"> <div class="paragraph"> <p>Como colofón a los 4 días y en un arrojo de valentía envié una propuesta de mini charla de 5 minutos y &#8230;&#8203; tuve que subir al escenario casi al final, así que en mi corazoncito es como si yo hubiera cerrado las jornadas</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2023/apachecon-13.jpg" alt="apachecon 13"> </div> </div> <div class="paragraph"> <p>A ver como lo explico: es como si los astros se hubieran alineado.</p> </div> <div class="paragraph"> <p>El primer día de las conferencias, estando en la mesa para registrarse la gente y darles las camisetas, oigo a un asistente hablar con una assistant sobre que él había trabajado en el proyecto Apache POI. Por si no lo sabes, son unas librerías de Java que permiten leer y escribir ficheros Microsoft Office como Word o Excel.</p> </div> <div class="paragraph"> <p>Justo hacía poco, un proyecto que había empezado hace 16 años para un cliente y que se basaba en estas librerías, ya no tiene mantenimiento desde hace tiempo y llega a su fin.</p> </div> <div class="paragraph"> <p>Obviamente, me armé de valor y me presenté. Él era David Fisher y le enseñé la aplicación. Estuvimos hablando un rato y resulta que uno de los que organizan el tema de assistants &#8230;&#8203; ¡Había sido también parte del equipo!! Así que me ví en la obligación de intentar hacer un postmortem al proyecto delante de toda esta gente y darles las gracias</p> </div> <div class="paragraph"> <p>Bueno, en resumen, el último minuto lo empleé en reponerme porque iba viendo cómo la emoción me iba nublando los ojos y la voz y veía que no iba a llegar a terminar la exposición sin echarme a llorar.</p> </div> <div class="paragraph"> <p>Que sí, que te parecerá una gilipollez, pero qué le vamos a hacer, a mi me emocionó muchísimo estar ahí delante</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2023/apachecon-14.jpg" alt="apachecon 14"> </div> </div> </div> </div> <div class="sect1"> <h2 id="halifax">Halifax</h2> <div class="sectionbody"> <div class="paragraph"> <p>Al principio me pareció muy pequeño (me dí una caminata el día antes de empezar las conferencias de unas 4 horas) pero coqueto. El último día me dí otra caminata de otras 2-3 horas y bueno, es más grande de lo que creía, lo único que es más desparramado de lo que yo creía. Obviamente no es un Madrid pero me resultó muy agradable de visitar</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2023/apachecon-11.jpg" alt="apachecon 11"> </div> </div> <div class="imageblock"> <div class="content"> <img src="/images/2023/apachecon-12.jpg" alt="apachecon 12"> </div> </div> </div> </div> <div class="sect1"> <h2 id="conclusión">Conclusión</h2> <div class="sectionbody"> <div class="paragraph"> <p>No sé si repetiré otro año, falta mucho, pero que ha sido una experiencia inolvidable ya te digo que sí.</p> </div> <div class="paragraph"> <p>Como "primicia" va a haber edición Europa en Bratislava y otra USA en Denver. Ya veremos, queda mucho (aunque el Call For Papers ya está abierto)</p> </div> <div class="paragraph"> <p>Como novedad, abrí un canal de Telegram donde fuí "retransmitiendo" lo que me iba pasando, por si quieres verlo <a href="https://t.me/apachecon2023" class="bare">https://t.me/apachecon2023</a></p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2023/apachecon-15.jpg" alt="apachecon 15"> </div> </div> </div> </div> cuatro días de Apache conferencias en Halifax Swagger-Operator, let groovy operate your cluster Jorge Aguilera 2023-10-10T00:00:00Z https://blog.jagedn.dev/blog/2023/swagger-operator.html <div id="preamble"> <div class="sectionbody"> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>This post is still under review</p> </dd> </dl> </div> <div class="paragraph"> <p>In this post I&#8217;ll (try to) explain how I&#8217;ve created a kubernetes operator using Groovy and Micronaut, because &#8230;&#8203; yes, you don&#8217;t need to use Go for it!!</p> </div> </div> </div> <div class="sect1"> <h2 id="situation">Situation</h2> <div class="sectionbody"> <div class="paragraph"> <p>Say we are working in a microservice architecture with several services (nodejs, spring, micronaut, quarkus, &#8230;&#8203;), and some (or all) of them are using OpenAPI to expose their API, and they are deployed in a kubernetes cluster.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Basically an OpenApi spec is a resource (typically a JSON or YAML) the service serve via an http GET where all endpoints, payloads, documentation, etc are structured following a well-know structure</p> </dd> </dl> </div> <div class="paragraph"> <p>From time to timme a new service is deployed, or deprecated and removed from the cluster.</p> </div> <div class="paragraph"> <p>Typical situation is every service include an html interface to render this spec in a human friendly way and is very common to use swagger-ui for it.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Swagger-ui is basically a Javascript application able to understand an OpenApi spec and generate a playground on the fly</p> </dd> </dl> </div> <div class="paragraph"> <p>Another posible solution is to use a single swagger-ui instance and configure a list of OpenApi spec (for example configuring the SERVERS_URL environment) so using a single javascript application we can play with different services</p> </div> <div class="paragraph"> <p>Usually QA and/or Frontend use this interface to check their implementation, and also to execute some requests to the backend microservice (yes, yes, I know, is not the best practique, but &#8230;&#8203; ) so it&#8217;s important to have this swagger-ui updated with the right list of specs.</p> </div> </div> </div> <div class="sect1"> <h2 id="manual_solution">Manual solution</h2> <div class="sectionbody"> <div class="paragraph"> <p>Our current solution consists in 2 artifacts:</p> </div> <div class="ulist"> <ul> <li> <p>a pod running a standard swagger-ui docker image</p> </li> <li> <p>a configmap with a JavaScript file similar to the oficial but with the lists of servers</p> </li> </ul> </div> <div class="listingblock"> <div class="title">configmap</div> <div class="content"> <pre class="prettyprint highlight"><code>window.ui = SwaggerUIBundle({ urls: [ { name:"user-rest", url:"/user-rest/swagger/service-example-0.0.yml" } ... })</code></pre> </div> </div> <div class="paragraph"> <p>When we deploy the swagger-ui overwriting the original javascript with this configmap we have a Swagger playground where our QA team can use to send requests to every service.</p> </div> <div class="paragraph"> <p>When a new microservice is required by the architecture and is deployed in the cluster is so simple as edit the configmap, add the new entry in the list, and delete the current pod. As soon the cluster detect this pod was deleted a new one will be created using new configmap, so QA only need to refresh the browser to see the new service in the list. (Same if what we want is to remove a microservice from the list)</p> </div> <div class="paragraph"> <p>As you can imagine, although is a simple process is very error-prone, and most of the time we react when the QA report can&#8217;t find the new service in the swagger-ui application.</p> </div> </div> </div> <div class="sect1"> <h2 id="whats_and_operator">What&#8217;s and operator?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Basically an operator is a "typical" application deployed into the cluster who will be "talking" with the cluster, no with the user.</p> </div> <div class="paragraph"> <p>The cluster will be asking to our operator to check if all looks good every few seconds and our operator need to "reconcile" current status with the desired state.</p> </div> <div class="paragraph"> <p>Imagine we want to have running 2 instances of a deployment and suddenly one of them reach and exception and finish.</p> </div> <div class="paragraph"> <p>A "few seconds" later the cluster will ask the operator to check if all looks good in the deployment so the operator will retrieve the list of running instances, will compare with the desired state, and it will decide to create a new pod.</p> </div> <div class="paragraph"> <p>The logic of our SwaggerOperator to decide if all looks good is similar.</p> </div> </div> </div> <div class="sect1"> <h2 id="swagger_operator">Swagger-Operator</h2> <div class="sectionbody"> <div class="paragraph"> <p>So basically what we&#8217;ll create is a kubernetes operator to perform these actions:</p> </div> <div class="ulist"> <ul> <li> <p>create a deployment (running the swagger-ui docker image) and a service in case they not exist</p> </li> <li> <p>maintain a configmap updated with the list of current services present into the cluster.</p> </li> <li> <p>delete the current pod in case an update in the configmap is done</p> </li> </ul> </div> <div class="paragraph"> <p>As an operator is in fact a typical application we&#8217;ll create our swagger-operator using the micronaut command line to create it:</p> </div> <div class="paragraph"> <p><code>mn create-app --lang groovy --features kubernetes-informer swagger-operator</code></p> </div> </div> </div> <div class="sect1"> <h2 id="crd_custom_resource_definition">CRD, Custom Resource Definition</h2> <div class="sectionbody"> <div class="paragraph"> <p>First thing is to define a new Kind resource (and deploy it into the cluster). The CRD is where we&#8217;ll instruct to the cluster how the new resource will look, so yes, it&#8217;s a kind of meta-resource.</p> </div> <div class="paragraph"> <p>In a CRD we need to specify the name of the kind, the group we want to include it and the properties the user need to fill to deploy a new swagger-operator resource</p> </div> <div class="paragraph"> <p>Swagger-operator CRD looks like:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>apiVersion: apiextensions.k8s.io/v1 kind: CustomResourceDefinition metadata: name: swaggers.puravida.com spec: group: puravida.com scope: Namespaced names: plural: swaggers singular: swagger kind: Swagger versions: - name: v1 schema: openAPIV3Schema: type: object properties: spec: type: object properties: serviceSelector: type: string configMap: type: string deployment: type: string service: type: string ...</code></pre> </div> </div> <div class="paragraph"> <p>Although a long file basically what we&#8217;re doing is instructing to the cluster about a new kind of resource (Swagger). When the user will want to create a new resource of this kind he will need to provide 4 properties called <code>serviceSelector</code>, <code>configMap</code> &#8230;&#8203;</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>In our case these 4 properties will be used by the operator to create configurable "named" resources instead to use hardcoded values</p> </dd> </dl> </div> <div class="paragraph"> <p>To let the cluster manage this new resource we need to apply it into the cluster:</p> </div> <div class="paragraph"> <p><code>$ kubectl apply -f crd.yml</code></p> </div> </div> </div> <div class="sect1"> <h2 id="crd_to_java">CRD to Java</h2> <div class="sectionbody"> <div class="paragraph"> <p>As we want to use Groovy/Java in our operator, we need to convert this CRD to Java objects. The easy way is to use a command line from kubernetes-client project similar to:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>docker run --rm -v /var/run/docker.sock:/var/run/docker.sock -v "$(pwd)":"$(pwd)" \ -ti --network host ghcr.io/kubernetes-client/java/crd-model-gen:v1.0.6 \ /generate.sh -u $(pwd)/src/k8s/crd.yml -n com.puravida -p com.puravida \ -o $(pwd)</code></pre> </div> </div> <div class="paragraph"> <p>Mounting our local project as a volume the <code>generate.sh</code> process can read the crd and generate some Java files. They are basically a kind of POJO Java representations of the CRD.</p> </div> </div> </div> <div class="sect1"> <h2 id="operator">Operator</h2> <div class="sectionbody"> <div class="paragraph"> <p>Swagger-operator is a simple operator and requires only one class, <code>SwaggerOperator.groovy</code></p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>@Operator( informer = @Informer( apiType = V1Swagger, apiListType = V1SwaggerList, apiGroup = V1SwaggerWrapper.GROUP, resourcePlural = V1SwaggerWrapper.PLURAL, resyncCheckPeriod = 10000L ) ) class SwaggerOperator implements ResourceReconciler&lt;V1Swagger&gt;{ // The implementation }</code></pre> </div> </div> <div class="paragraph"> <p>As you can see basically we need to annotate our class with <code>@Operator</code> and implement <code>ResourceReconciler&lt;V1Swagger&gt;</code> interface</p> </div> <div class="paragraph"> <p>This interface requires we implement only one method:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>@Override Result reconcile(@NonNull Request request, @NonNull OperatorResourceLister&lt;V1Swagger&gt; lister) { // return new Result(false) <i class="conum" data-value="1"></i><b>(1)</b> }</code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>Returning false we inform to the cluster we don&#8217;t need a new reconcile "right now"</td> </tr> </table> </div> <div class="paragraph"> <p><code>reconcile</code> is the method will be called every X millis (10s in our case) by the cluster once a V1Swagger resource is deployed by the user. Our operator must check if all resources are aligned with the desired state.</p> </div> <div class="paragraph"> <p>To do it the operator needs/can "talk" with different APIs exposed by the cluster as CoreApi or AppApi, so it can list all services present in a namespace, create a configmap, etc</p> </div> <div class="paragraph"> <p>Basically the main logic of the swagger-operator reconcile method is:</p> </div> <div class="ulist"> <ul> <li> <p>if a Swagger resource is present the operator need to check if the configmap, the deployment and the service exist</p> </li> <li> <p>also, if the Swagger resource exist it must to check if the configmap is up to date checking the list of services and if they is any different it needs to update the configmap and delete the current pod</p> </li> <li> <p>if the resource is marked to be deleted the operator needs to "clean" the resources created deleting the configmap, service and deployment</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="checking_the_list_of_services">Checking the list of services</h2> <div class="sectionbody"> <div class="paragraph"> <p>The operator requests to the cluster a list of current services in the namespace and select all that contains the desired annotation:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>def services = coreApi.listNamespacedService(wrapper.namespace) .items .findAll({ service-&gt; service.metadata.annotations?.containsKey(wrapper.serviceSelector) }) def map = services.inject([:],{ map, it -&gt; map[it.metadata.name] = it.metadata.annotations[wrapper.serviceSelector] map }) as Map&lt;String, String&gt;</code></pre> </div> </div> <div class="paragraph"> <p><code>services</code> is the current list of services we want to show in the list of swagger-ui and <code>map</code> is a Map to be "injected" in the ConfigMap.</p> </div> </div> </div> <div class="sect1"> <h2 id="checking_if_configmap_is_up_to_date">Checking if ConfigMap is up to date</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>def configMap = coreApi .readNamespacedConfigMap(wrapper.configMap, wrapper.namespace,null,null,null) def currentJS = configMap.data[CONFIG_YML] if( currentJS.contains("urls: [$urlServices]") ){ return false }</code></pre> </div> </div> <div class="paragraph"> <p>The swagger-operator read current ConfigMap data entry CONFIG_YML and check if the current value contains a string similar to the current list of services. If it is the same no action is required</p> </div> <div class="paragraph"> <p>If they are not equals this means some service is not in the list or a new service was deployed so the swagger-operator create a new updated ConfigMap</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>currentJS = currentJS.replaceFirst(/urls: \[(.*?)]/,"urls: [$urlServices]") configMap.data[CONFIG_YML] = currentJS coreApi.replaceNamespacedConfigMap(wrapper.configMap, wrapper.namespace, configMap)</code></pre> </div> </div> <div class="paragraph"> <p>and mark current deployment to be restarted</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>def deployment = deploymentList.items.first() deployment.spec .template .metadata .annotations[V1SwaggerWrapper.RESTARTED_AT_ANNOTATION]=Instant.now().toString() appsApi.replaceNamespacedDeployment(deployment.metadata.name, deployment.metadata.namespace, deployment)</code></pre> </div> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>You can check out the repository (link at the end of the post) to see full code</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="roles_and_service_account">Roles and Service account</h2> <div class="sectionbody"> <div class="paragraph"> <p>Probably your operator will require to be run with an special service account how allow them to access to cluster resources. For swagger-operator this is specify in this resource</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>apiVersion: rbac.authorization.k8s.io/v1 kind: Role metadata: name: swagger-operator-role rules: - apiGroups: ["", "apps"] resources: ["services", "configmaps", "deployments", "pods"] verbs: ["get", "watch", "list", "create", "delete", "update"] - apiGroups: ["coordination.k8s.io"] resources: ["leases"] verbs: ["get", "create", "update"] - apiGroups: ["puravida.com"] resources: ["swaggers"] verbs: ["*"] --- apiVersion: v1 kind: ServiceAccount metadata: name: swagger-operator-sa --- kind: RoleBinding apiVersion: rbac.authorization.k8s.io/v1 metadata: name: swagger-operator-role-binding roleRef: apiGroup: rbac.authorization.k8s.io kind: Role name: swagger-operator-role subjects: - kind: ServiceAccount name: swagger-operator-sa namespace: default</code></pre> </div> </div> <div class="paragraph"> <p>As you can see we are creating a new service account <code>swagger-operator-sa</code> and allowing to it different access to different resources (full control for swaggers.puravida.com resources for example)</p> </div> </div> </div> <div class="sect1"> <h2 id="deploy">Deploy</h2> <div class="sectionbody"> <div class="paragraph"> <p>As a final step we need to build and deploy our application to a docker registry (in swagger-opeator case using the gradle task <code>jib</code> ) and deploy it into the cluster using a typical deployment</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>apiVersion: apps/v1 kind: Deployment metadata: labels: app: swagger-deployment-operator name: swagger-deployment-operator spec: replicas: 1 selector: matchLabels: app: swagger-deployment-operator template: metadata: labels: app: swagger-deployment-operator spec: serviceAccountName: swagger-operator-sa containers: - image: registry.localhost:5000/swagger-operator name: swagger-deployment-operator imagePullPolicy: Always</code></pre> </div> </div> <div class="paragraph"> <p>As you can see we specify the serviceAccountName <code>swagger-operator-sa</code> created previously.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>For this example I&#8217;m using a local docker registry. In a near future I hope to have time and deploy in docker hub</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="last_step">Last step</h2> <div class="sectionbody"> <div class="paragraph"> <p>So now our cluster is ready and waiting an user (admin, QA, &#8230;&#8203;) create a new Swagger resource specifying wich services to include and wich deployment create</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>apiVersion: puravida.com/v1 kind: Swagger metadata: name: swagger-operator spec: serviceSelector: swagger-path configMap: swagger-config deployment: swagger service: swagger</code></pre> </div> </div> <div class="paragraph"> <p>As soon the user apply this file into the cluster, swagger-operator will start receiving events from the cluster to reconcile it.</p> </div> <div class="paragraph"> <p>The operator will list all current services and select some of them, check the ConfigMap is not present and it will create a new one using a classpath resource as template, check the Deployment is not present and create one, etc</p> </div> <div class="paragraph"> <p>After a few seconds we&#8217;ll have a new pod running into our cluster with the swagger-ui interface and a list of services configured</p> </div> <div class="paragraph"> <p>If we remove some service (<code>kubectl delete -f user-rest</code> for example) the operator will recreate all resources and the swagger-ui will be updated automatically</p> </div> </div> </div> <div class="sect1"> <h2 id="conclusion">Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>In this article we are creating a Micronaut Kubernetes Operator using Groovy able to create and maintain resources into the cluster</p> </div> <div class="paragraph"> <p>I&#8217;ve created a repo with the code and a service to be used as example at <a href="https://github.com/jagedn/swagger-operator" class="bare">https://github.com/jagedn/swagger-operator</a></p> </div> </div> </div> How to create a k8s operator in Groovy (using Micronaut) Jugando con Monos (de Reactor) Jorge Aguilera 2023-09-28T00:00:00Z https://blog.jagedn.dev/blog/2023/reactor-usecase.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Cada día la programación funcional está más en boga y hay que ponerse las pilas, así que me he inventado este caso de uso para jugar un poco con ella y sobre todo por practicar con <code>Mono</code> y <code>Flux</code> de Reactor (esta vez en Java)</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>As usual, este post se basa en lo que yo he buscado y probado, pudiendo estar mal e incluso rematadamente mal, pero &#8230;&#8203; en mi local funciona.</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="caso_de_uso">Caso de Uso</h2> <div class="sectionbody"> <div class="paragraph"> <p>Supongamos que tenemos dos sistemas independientes (dos microservicios en tu arquitectura o dos servicios de dos proveedores diferentes, o uno tuyo y otro externo, por ejemplo):</p> </div> <div class="ulist"> <ul> <li> <p>Stock Service. Gestiona la cantidad de artículos que tenemos en el almacén</p> </li> <li> <p>Ecommerce Service. Gestiona algunos de artículos junto con su cantidad disponible más el precio de venta (por ejemplo querríamos tener un catálogo de artículos y para cada uno querer tener en almacén 100 unidades pero en eCommerce solamente 10)</p> </li> </ul> </div> <div class="paragraph"> <p>Ambos sistemas son independientes, con sus bases de datos correspondientes, etc y son accesibles a través de unos endpoints diferentes.</p> </div> <div class="paragraph"> <p>La idea es ejecutar un proceso que busque el stock actual de todos los artículos, llamando a Stock Service, aplicar una regla de negocio para cada uno, e invocar al endpoint de eCommerce para actualizar la cantidad de cada uno.</p> </div> <div class="paragraph"> <p>Además, como eCommerce dispone de un subconjunto de artículos, deberemos consultar en eCommerce la lista de artículos para no recorrer todo el catálogo que tenemos en Stock</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/diag-7e53f76e7753639da499077cbfbcb429.png" alt="Diagram" width="455" height="290"> </div> </div> <div class="paragraph"> <p>No parece muy difícil &#8230;&#8203;</p> </div> </div> </div> <div class="sect1"> <h2 id="stock_service">Stock Service</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code> public record Stock(String sku, int cantidad) { } public record StockPage(int total, Collection&lt;Stock&gt; stocks) { } @Get("/") Mono&lt;StockPage&gt; get(@QueryValue int page) @Post("/update") void update(@Body List&lt;Stock&gt; stocks)</code></pre> </div> </div> <div class="paragraph"> <p>Simplificando mucho vamos a trabajar con un <code>Stock</code> identificado por su sku y del que mantenemos la cantidad que tenemos en stock</p> </div> <div class="paragraph"> <p>StockPage nos sirve para hacer una paginación básica devolviendo el total de artículos en la base de datos, y unos cuantos stocks. El servicio devolverá páginas según se le pida por parámetro.</p> </div> <div class="paragraph"> <p>También añadimos un endpoint para poder actualizar el stock (que nos servirá para jugar a cambiar cantidades del stock y volver a ejecutar nuestro proceso)</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>obviamente es un ejemplo muy simplificado</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="ecommerce_service">eCommerce Service</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code> public record Articulo(String sku, int cantidad, double precio) { } public record ArticuloPage(int total, Collection&lt;Articulo&gt; articulos) { } @Get("/articulos") public Mono&lt;ArticuloPage&gt; get(@QueryValue int page) @Post("/update") public Mono&lt;List&lt;UpdateStock&gt;&gt; update(@Body List&lt;UpdateStock&gt; update)</code></pre> </div> </div> <div class="paragraph"> <p>Parecido al Stock Service, el eCommerce service nos permite paginar los artículos y (lo más importante en este caso) actualizar la cantidad de stock de articulos en ecommmerce</p> </div> </div> </div> <div class="sect1"> <h2 id="aproximación_tradicional">Aproximación tradicional</h2> <div class="sectionbody"> <div class="paragraph"> <p>Siguiendo el diagrama anterior una posible implementación sería:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>int offset = 0; while( offset &lt; maxArticles ){ // obtener n articulos en ecomerce var articuloPage = ecommerceClient.get(offset).block(); // extraer los ids var articulos = new ArrayList&lt;String&gt;(); for(var articulo : articuloPage.articulos()){ articulos.add(articulo.sku()); } // ver el stock de estos articulos StockPage stockPage = stockClient.get( String.join(",",articulos) ).block(); // logica de negocio para estos articulos List&lt;UpdateStock&gt; updateStocks = new ArrayList&lt;&gt;(); for (Stock s : stockPage.stocks()) { updateStocks.add(new UpdateStock(s.sku(), s.cantidad())); } // actualizar ecommerce ecommerceClient.update(updateStocks).block(); offset+=batchSize; }</code></pre> </div> </div> <div class="paragraph"> <p>Bueno, un poco engorroso pero (semi)fácil de seguir. Pedidos unos pocos articulos a ecommerce, pedimos la cantidad de estos al servicio de stock, y actualizamos ecommerce con la cantidad que tenemos en stock</p> </div> <div class="paragraph"> <p>El "detalle" de esta implementación es que estamos haciendo llamadas a servicios externos y estamos esperando a que se completen (por eso el uso de <code>block()</code> al final de las llamadas a endpoints)</p> </div> <div class="paragraph"> <p>Si este bucle se está ejecutando en el hilo de un Controller, por ejemplo, este hilo se queda bloqueado mientras se resuelven las llamadas pudiendo quedarse congelado si no disponemos de los hilos necesarios.</p> </div> </div> </div> <div class="sect1"> <h2 id="implementación_reactiva_no_bloqueante">Implementación Reactiva (no bloqueante)</h2> <div class="sectionbody"> <div class="paragraph"> <p>La implementación reactiva (y funcional) va a hacer uso de los objetos <code>Mono</code> y <code>Flux</code> (si usas reactor) y otros, los cuales en realidad NO ejecutan en ese momento la lógica que le indicamos, sino que las van "encadenando" y ejecutando en hilos diferentes coordinados por la implementación reactiva que usemos</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>Mono&lt;ArrayList&lt;UpdateStock&gt;&gt; reactive() { return Flux .generate(() -&gt; 0, (offset, emitter) -&gt; { if (offset &lt; maxArticles) { emitter.next(offset); } else { emitter.complete(); } return offset + batchSize; }) .concatMap(page -&gt; ecommerceClient.get((Integer) page)) .map(ArticuloPage::articulos) .filter(items -&gt; !items.isEmpty()) .flatMap(items -&gt; stockClient.get(items.stream().map(Articulo::sku).collect(Collectors.joining())) .map(stocks -&gt; stocks.stocks() .stream() .map(s -&gt; new UpdateStock(s.sku(), s.cantidad())) .toList())) .concatMap(ecommerceClient::update) .reduce(new ArrayList&lt;&gt;(), (prev, items) -&gt; { prev.addAll(items); return prev; }); }</code></pre> </div> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>No he conseguido resolver de forma satisfactoria el hacer una primera llamada que me de el numero de páginas que hay en eCommerce por lo que voy a hacer un número de llamadas "fijas" y luego filtrar las respuestas que no contengan datos.</p> </dd> </dl> </div> <div class="paragraph"> <p>Esta implementación:</p> </div> <div class="ulist"> <ul> <li> <p>genera un Flux de números entre 0 y N</p> </li> <li> <p>cada <code>page</code> es mapeado a una llamada asíncrona al eCommerce</p> </li> <li> <p>De lo que devuelva (en un futuro) el eCommerce, nos quedamos con la lista de artículos</p> </li> <li> <p>filtramos aquellas respuestas que vienen vacía</p> </li> <li> <p>Cada lista de artículos en eCommerce es convertida a una llamada al servicio de stock</p> </li> <li> <p>Cada lista de stocks que nos devolverá (en un futuro) el stock la usaremos para actualizar eCommerce</p> </li> <li> <p>Por último, juntaremos todas las respuestas (futuras) de eCommerce en un List para devolver la lista de articulos actualizados</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="repositorio">Repositorio</h2> <div class="sectionbody"> <div class="paragraph"> <p>He creado un repositorio con una aplicación Micronaut por si quieres jugar con estos servicios y las implementaciones.</p> </div> <div class="paragraph"> <p><a href="https://github.com/jagedn/reactor-demo" class="bare">https://github.com/jagedn/reactor-demo</a></p> </div> <div class="paragraph"> <p>Para simplificar la implementación los dos servicios (stock y ecommerce) se encuentran en la misma aplicación, pero de forma independiente. Cada uno se accede por unos endpoints diferentes y mantienen una "base de datos" independiente (la base de datos es un simple List en memoria)</p> </div> <div class="paragraph"> <p>Una vez clonado el repositorio podremos ejecutar la aplicacion:</p> </div> <div class="paragraph"> <p><code>./gradlew run</code></p> </div> <div class="paragraph"> <p>y acceder a los servicios</p> </div> <div class="paragraph"> <p><code>http localhost:8080/ecommerce/articulos</code>, para ver la situacion actual de ecommerce</p> </div> <div class="paragraph"> <p><code>http localhost:8080/stock/</code>, para ver la situacion actual del stock</p> </div> <div class="paragraph"> <p><code>http -v localhost:8080/stock/update [0][sku]=1 [0][cantidad]=1</code> para actualizar la cantidad del artículo "1" en la base de datos del stock</p> </div> <div class="paragraph"> <p>En este punto, eCommerce tiene una cantidad diferente que Stock así que ejecutaremos la lógica de negocio que las "sincroniza"</p> </div> <div class="paragraph"> <p><code>http localhost:8080/ejemplo/block</code></p> </div> <div class="paragraph"> <p>o</p> </div> <div class="paragraph"> <p><code>http localhost:8080/ejemplo/reactive</code></p> </div> <div class="paragraph"> <p>Si todo ha ido bien, la cantidad disponible en stock habrá sido actualizada en eCommerce</p> </div> </div> </div> Encadenando llamadas a servicios con reactor (Mono, Flux,...) JBake + Gradle + Linkedin Jorge Aguilera 2023-09-27T00:00:00Z https://blog.jagedn.dev/blog/2023/jbake-linkedin.html <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Para poder replicar esta funcionalidad necesitarás una cuenta en Linkedin y obtener un token. Puedes consultar el post que subí al respecto <a href="2022/gmail-linkedin.html" class="bare">2022/gmail-linkedin.html</a></p> </dd> </dl> </div> <div class="paragraph"> <p>Continuando con el post anterior de cómo publicar un toot en tu instancia del Fediverso cuando tienes un artículo nuevo en tu blog, esta vez vamos a hacer lo mismo pero notificandolo en Linkedin (ver <a href="jbake-toot.html" class="bare">jbake-toot.html</a>)</p> </div> <div class="paragraph"> <p>Mi blog es un static site hecho con JBake usando Gradle y Asciidoctor así que básicamente es crear una tarea nueva en el <code>buildSrc</code></p> </div> <div class="listingblock"> <div class="title">buildSrc/src/main/groovy/LinkedinTask.groovy</div> <div class="content"> <pre class="prettyprint highlight"><code>import groovy.json.JsonOutput import groovy.xml.XmlSlurper import org.gradle.api.DefaultTask import org.gradle.api.provider.Property import org.gradle.api.tasks.Input import org.gradle.api.tasks.TaskAction import java.net.http.* abstract class LinkedinTask extends DefaultTask{ @Input abstract Property&lt;String&gt; getPublisher() @Input abstract Property&lt;String&gt; getToken() @Input abstract Property&lt;String&gt; getPostId() @TaskAction def runTask() { def xml = new XmlSlurper().parse("https://blog.jagedn.dev/feed.xml") def entry = xml.entry.find{ "$it.id".endsWith( postId.get()+".html")} if( !entry ) { println("Post no encontrado") return } def hashtags = entry.category.collect{ "#"+it."@term"}.join(' ') def content = """ 🗣️ Nuevo post en mi blog $entry.title 📖 ${entry.summary} $hashtags ${entry.id} """ def json = JsonOutput.toJson([ "author": "urn:li:person:"+publisher.get(), "commentary": content, "visibility": "PUBLIC", "distribution": [ "feedDistribution": "MAIN_FEED", "targetEntities": [], "thirdPartyDistributionChannels": [], ], "lifecycleState": "PUBLISHED", "isReshareDisabledByAuthor": false ]) def client = HttpClient.newHttpClient() def request = HttpRequest.newBuilder() .header("Content-Type", "application/json; charset=UTF-8") .header("Authorization", "Bearer ${token.get()}") .header('X-Restli-Protocol-Version','2.0.0') .header('LinkedIn-Version','202308') .uri(URI.create('https://api.linkedin.com/rest/posts')) .POST(HttpRequest.BodyPublishers.ofString(json)) .build() def response = client.send(request, HttpResponse.BodyHandlers.ofString()) println response } }</code></pre> </div> </div> <div class="paragraph"> <p>y crear una task en el <code>build.gradle</code> para llamarla en nuestro pipeline</p> </div> <div class="listingblock"> <div class="title">build.gradle</div> <div class="content"> <pre class="prettyprint highlight"><code>tasks.register('linkedin', LinkedinTask){ publisher = findProperty("LINKEDIN_PUBLISHER") token = findProperty("LINKEDIN_TOKEN") postId = findProperty("postId") }</code></pre> </div> </div> <div class="paragraph"> <p>Los parámetros como el publisher or el token puedes guardarlos en el fichero $HOME/.gradle/gradle.properties y evitar así tener que recordarlos cada vez que quieras ejecutar la tarea.</p> </div> <div class="paragraph"> <p>El parámetro postId es simplemente el nombre corto (sin extension) del post. Por ejemplo en mi caso ejecutaría</p> </div> <div class="paragraph"> <p><code>./gradlew linkedin -P postId=jbake-linkedin</code></p> </div> <div class="paragraph"> <p>y se crearía una publicación en mi feed de Linkedin</p> </div> Tarea de Gradle para avisar en Linkedin de un nuevo post en el blog MapBlog with JBake Jorge Aguilera 2023-09-27T00:00:00Z https://blog.jagedn.dev/blog/2023/jbake-map.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>JBake is a static site generator (similar to Hugo, Gatsby, etc). Although is written in Java you don&#8217;t need special knowledge in Java only a little knowledge of Markdown or better Asciidoctor</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>this site is generated by JBake</p> </dd> </dl> </div> <div class="paragraph"> <p>With default installation you can write typical "posts" or "pages".</p> </div> <div class="paragraph"> <p>Pages are "fixed" documents as "about", "contact", etc</p> </div> <div class="paragraph"> <p>Posts are "dynamic" in the sense they are showed in a paginated view (typically recent post first,) and they have attributes as published date, state, summary, etc</p> </div> <div class="paragraph"> <p>When JBake is generating your site it applies a different template for every content depending on the "type". For example "index.tpl" for the "masterindex" page, or "post.tpl" for every "post" document</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>JBake can use different template engines, and you need to select wich engine to use. I&#8217;ve selected Groovy’s MarkupTemplateEngine, but you can use Freemarker, Thymeleaf, &#8230;&#8203; This post only works with Groovy MarkupTemplateEngine but surely is easy to convert to other</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="idea">Idea</h2> <div class="sectionbody"> <div class="paragraph"> <p>I would like to create a new section in my blog talking about my trips around the world. It&#8217;s easy to create a post for every place, but I would like to have them in another "page" and no mix them with my current posts about tech.</p> </div> <div class="paragraph"> <p>Instead to have an ordered list of posts I would like to have a map and show every place on it so the user can see all of them and clicking in an icon show a popup with the summary and a link to the post</p> </div> <div class="paragraph"> <p>I would like to tag every post with different coordinates so JBake generate the map automatically</p> </div> <div class="paragraph"> <p>I would like to have the possibility to have different maps, for example one for trips, another one for talks, etc and every one will show only the associate "mappost"</p> </div> </div> </div> <div class="sect1"> <h2 id="model">Model</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Map (type=map) with attributes <code>status</code>, <code>map</code> and <code>title</code>. Only <code>published</code> will be rendered.</p> </li> <li> <p>MapPost (type=mappost). A typical post with new <code>coordinates</code> and <code>map</code> attributes</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="template">Template</h2> <div class="sectionbody"> <div class="paragraph"> <p>I&#8217;ve created a new file, <code>map.tpl</code> in the "templates" directory. Basically it renders a pure HTML with all javascript/css/link required</p> </div> <div class="paragraph"> <p>I&#8217;ll use a WebComponent <code>&lt;leaflet-map id="blog-map" fitToBounds&gt;&lt;/leaflet-map&gt;</code> from <a href="https://migupl.github.io/vanilla-js-web-component-leaflet-geojson" class="bare">https://migupl.github.io/vanilla-js-web-component-leaflet-geojson</a> because it makes very easy to include and manage a map</p> </div> <div class="paragraph"> <p>JBake will create as many <code>xxx.html</code> as content with type equal to <code>map</code> are published</p> </div> <div class="paragraph"> <p>The template will "inject" a Javascript array collecting all mappost associate to this map:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>published_mapposts.findAll{ it.map == content.map }.each{ post-&gt; yieldUnescaped """ data.push({ "type": "Feature", "geometry": { "type": "${post.coordstype ?: 'Point'}", "coordinates": [${post.coordinates}] }, "properties": { "popupContent": '&lt;a href="${post.uri}"&gt;${post.title}&lt;/a&gt;&lt;br/&gt;${post.summary}', ... more attributes }) """</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="mappost">MapPost</h2> <div class="sectionbody"> <div class="paragraph"> <p>As I don&#8217;t want any special (by the moment) in every mappost I&#8217;ve duplicated the <code>post.tpl</code> template</p> </div> </div> </div> <div class="sect1"> <h2 id="configuration">Configuration</h2> <div class="sectionbody"> <div class="paragraph"> <p>To activate the new kind of content you need to configure jbake.properties:</p> </div> <div class="listingblock"> <div class="title">jbake.properties</div> <div class="content"> <pre class="prettyprint highlight"><code>template.map.file=map.tpl template.mappost.file=mappost.tpl</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="mis_andanzas">Mis-Andanzas</h2> <div class="sectionbody"> <div class="paragraph"> <p>To create the trip map I&#8217;ve created a new "empty" asciidoc file <code>mis-andanzas.adoc</code></p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>= Mis Andanzas Jorge Aguilera 2023-03-28 :jbake-type: map :jbake-status: published :jbake-map: mis-andanzas</code></pre> </div> </div> <div class="paragraph"> <p>As you can imagine <code>jbake-type: map</code> advise to JBake to use the <code>map.tpl</code> so we have at the end an <code>mis-andanzas.html</code> file with an embedded map</p> </div> <div class="paragraph"> <p>Next step is to write "mappost" as a typical post but including some attributes:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>= Costa Rica 1999 Jorge Aguilera 2022-09-23 :jbake-type: mappost :jbake-status: published :jbake-tags: personales, viajes :jbake-summary: Primer viaje transoceánico :jbake-coordinates: -83.712266,8.6543759 :jbake-map: mis-andanzas :idprefix: :icons: font A poco que hayas hablado conmigo seguro que me has tenido que aguantar la chapa sobre blabla blabla</code></pre> </div> </div> <div class="paragraph"> <p>As you can see the type is <code>mappost</code> and I&#8217;ve add <code>coordinates</code> attribute to locate this entry into the map</p> </div> </div> </div> <div class="sect1"> <h2 id="result">Result</h2> <div class="sectionbody"> <div class="paragraph"> <p>This is an example how it appears in my blog</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/jbakemap.png" alt="jbakemap"> </div> </div> <div class="paragraph"> <p>You can see it in action at <a href="https://blog.jagedn.dev/mis-andanzas.html" class="bare">https://blog.jagedn.dev/mis-andanzas.html</a></p> </div> </div> </div> Creating a MapBlog in JBake JBake + Gradle + Mastodon Jorge Aguilera 2023-09-25T00:00:00Z https://blog.jagedn.dev/blog/2023/jbake-toot.html <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Para poder replicar esta funcionalidad necesitaras una cuenta en una instancia Mastodon o Pleroma y crear un Token con ella</p> </dd> </dl> </div> <div class="paragraph"> <p>Se me ha ocurrido (idea nada brillante) hacerme una tarea Gradle en el proyecto del blog para poder tootear el enlace a un post</p> </div> <div class="paragraph"> <p>No es nada del otro mundo. Mi blog es un static site hecho con JBake usando Gradle y Asciidoctor así que básicamente es crear una tarea nueva en el <code>buildSrc</code></p> </div> <div class="listingblock"> <div class="title">buildSrc/src/main/groovy/MastodonTask.groovy</div> <div class="content"> <pre class="prettyprint highlight"><code>import org.gradle.api.DefaultTask import org.gradle.api.provider.Property import org.gradle.api.tasks.Input import org.gradle.api.tasks.TaskAction import groovy.xml.XmlSlurper import groovy.json.JsonOutput import java.net.http.* abstract class MastodonTask extends DefaultTask{ @Input abstract Property&lt;String&gt; getInstance() @Input abstract Property&lt;String&gt; getToken() @Input abstract Property&lt;String&gt; getPostId() @TaskAction def runTask() { def xml = new XmlSlurper().parse("https://blog.jagedn.dev/feed.xml") def entry = xml.entry.find{ "$it.id".endsWith( postId.get()+".html")} if( !entry ) { println("Post no encontrado") return } def hashtags = entry.category.collect{ "#"+it."@term"}.join(' ') def toot = """ 🗣️ Nuevo post en el blog $entry.title 📖 ${entry.summary} $hashtags ${entry.id} """ def json = JsonOutput.toJson([ status: toot]) def client = HttpClient.newHttpClient() def request = HttpRequest.newBuilder() .header("Content-Type", "application/json; charset=UTF-8") .header("Authorization", "Bearer ${token.get()}") .uri(URI.create(instance.get()+'/api/v1/statuses')) .POST(HttpRequest.BodyPublishers.ofString(json)) .build() client.send(request, HttpResponse.BodyHandlers.ofString()) } }</code></pre> </div> </div> <div class="paragraph"> <p>y crear una task en el <code>build.gradle</code> para llamarla en nuestro pipeline</p> </div> <div class="listingblock"> <div class="title">build.gradle</div> <div class="content"> <pre class="prettyprint highlight"><code>tasks.register('tootea', MastodonTask){ instance = "https://jvm.social" token = findProperty("BLOG_ACCESS_TOKEN") postId = findProperty("postId") }</code></pre> </div> </div> <div class="paragraph"> <p>Los parámetros como el publisher or el token puedes guardarlos en el fichero $HOME/.gradle/gradle.properties y evitar así tener que recordarlos cada vez que quieras ejecutar la tarea.</p> </div> <div class="paragraph"> <p>El parámetro postId es simplemente el nombre corto (sin extension) del post.</p> </div> <div class="paragraph"> <p>Simplemente, una vez que hemos generado y publicado el blog con el ultimo post, ejecutaremos la tarea de gradle para que tootee por nosotros</p> </div> <div class="paragraph"> <p><code>./gradlew tootea -P postId=mi-ultimo-post</code></p> </div> Tarea de Gradle para anunciar en el Fediverso un nuevo post en el blog Nextflow: Organizando fotos por geoposicion Jorge Aguilera 2023-09-05T00:00:00Z https://blog.jagedn.dev/blog/2023/use-case-images.html <div id="preamble"> <div class="sectionbody"> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>Nextflow es una herramienta orientada a casos de uso mucho más interesantes pero este ejemplo creo que puede servir para prácticar un poco y ver algunas funcionalidades de este DSL</p> </dd> </dl> </div> <div class="paragraph"> <p>En este post vamos a desarrollar un pipeline de Nextflow para organizar las fotos de un directorio y ordernarlas por el sitio que fueron tomadas respecto de un punto que indiquemos.</p> </div> <div class="paragraph"> <p>Para ello el pipeline accederá a la meta información de cada foto y buscará si tiene la posición donde fue tomada. Si la foto no cuenta con esta info, la foto será ignorada.</p> </div> <div class="paragraph"> <p>Una vez obtenida la información de todas las fotos, el pipeline las ordenará según lo lejos que se encuentren de un punto dado (en formato "latitud, longitud"). Si no se proporciona ningun punto se tomará el punto [0,0] como referencia.</p> </div> <div class="paragraph"> <p>La idea es obtener al final del proceso un directorio con las imágenes copiadas pero renombradas como</p> </div> <div class="paragraph"> <p>0-imagexxxx.jpg 1-imageyyyy.png 2-imagezzzz.jpg etc</p> </div> </div> </div> <div class="sect1"> <h2 id="groovy_util">Groovy util</h2> <div class="sectionbody"> <div class="paragraph"> <p>Para mejorar la legibilidad del pipeline (y separar la "lógica de negocio" del pipeline) vamos a crear una clase Groovy con 2 métodos estáticos:</p> </div> <div class="paragraph"> <p>Uno servirá para extraer la posición donde fue tomada la foto</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>static def extractCoord( path ){ def metadata = Imaging.getMetadata(path.toFile()) if( !metadata || !metadata.metaClass.getMetaMethod("getExif") ) return null def latitude = metadata.exif?.GPS?.latitudeAsDegreesNorth def longitude = metadata.exif?.GPS?.longitudeAsDegreesEast [latitude, longitude] }</code></pre> </div> </div> <div class="paragraph"> <p>El otro método servirá para ordenar dos posiciones geográficas:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>static double metersTo( a, b) { double lat1 = a[0] as double double lng1 = a[1] as double double lat2 = b[0] as double double lng2 = b[1] as double double radioTierra = 6371; double dLat = Math.toRadians(lat2 - lat1); double dLng = Math.toRadians(lng2 - lng1); double sindLat = Math.sin(dLat / 2); double sindLng = Math.sin(dLng / 2); double va1 = Math.pow(sindLat, 2) + Math.pow(sindLng, 2) * Math.cos(Math.toRadians(lat1)) * Math.cos(Math.toRadians(lat2)); double va2 = 2 * Math.atan2(Math.sqrt(va1), Math.sqrt(1 - va1)); double meters = radioTierra * va2; meters; }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="image">Image</h2> <div class="sectionbody"> <div class="paragraph"> <p>Para mejorar la legibilidad del código (y no estar usando mapas genéricos donde guardar la información) vamos a crear una clase <code>Image</code></p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>class Image{ def file def coord def order }</code></pre> </div> </div> <div class="paragraph"> <p>Nos servirá para guardar referencia a la imagen original, las coordenadas y su posicion en la lista</p> </div> </div> </div> <div class="sect1"> <h2 id="process">Process</h2> <div class="sectionbody"> <div class="paragraph"> <p>El pipeline se va a componer de dos procesos:</p> </div> <div class="paragraph"> <p>Uno para iterar sobre las fotos y extraer su posicion</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>process EXIF_GPS{ input: path fImage output: val image exec: coord = Images.extractCoord( file("$params.directory/$fImage") ) image = new Image(file:fImage, coord: coord) }</code></pre> </div> </div> <div class="paragraph"> <p>y otro para copiar la imagen original al destino, usando la posicion como nombre</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>process PROCESS_IMAGE{ input: each img output: val target exec: target = file("$params.directory/$img.file").copyTo(file("$params.outputDir/$img.order-$img.file")) }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="pipeline">Pipeline</h2> <div class="sectionbody"> <div class="paragraph"> <p>Por último el pipeline a ejecutar:</p> </div> <div class="ulist"> <ul> <li> <p>Para todas las fotos que existan en un directorio</p> </li> <li> <p>Extraeremos la posicion</p> </li> <li> <p>Filtraremos las que tengan información de la posición</p> </li> <li> <p>Las ordenaremos segun el punto de origin</p> </li> <li> <p>Copiaremos a directorio de salida</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>workflow{ def images = Channel.fromPath("$params.directory/*.jpg") images //read all images | EXIF_GPS // extract gpf information | branch { // diferenciate if exif information or not no_info: !it.coord?[0] with_info: it.coord } | set{ gps_images } // send to new channel gps_images.with_info // only images with gps info | toSortedList{ a, b-&gt; // sort respect how far are from origin Images.metersTo(origin,a.coord) &lt;=&gt; Images.metersTo(origin, b.coord) } | map { // assign the index it.eachWithIndex{ img, idx-&gt; img.order = idx} } | set{ images_sorted } //send to new channel images_sorted | PROCESS_IMAGE | view }</code></pre> </div> </div> <div class="paragraph"> <p>Este workflow tiene algunas cosas interesantes como:</p> </div> <div class="paragraph"> <p><code>branch</code> que nos permite crear un canal con canales "hijos" según el criterio que queramos</p> </div> <div class="paragraph"> <p><code>set</code> que nos permite crear canales "al vuelo". En este caso creamos un canal <code>images_sorted</code> alimentándolo con un ArrayList de images y así poder ejecutar en pararelo cada imagen</p> </div> </div> </div> <div class="sect1"> <h2 id="ejecutando">Ejecutando</h2> <div class="sectionbody"> <div class="paragraph"> <p>Si tienes instalado nextflow y tienes un directorio con imágenes puedes ejecutar</p> </div> <div class="paragraph"> <p><code>nextflow run -r main <a href="https://github.com/jagedn/nextflow-images.git" class="bare">https://github.com/jagedn/nextflow-images.git</a> --directory "/MI/DIRECTORIO/ORIGEN" --outputDir "/MI/DIRECTORIO/SALIDA"</code></p> </div> <div class="paragraph"> <p>Como ves Nextflow es capaz de descargar desde un repositorio git un pipeline completo e incluso de poder especificarle qué rama del mismo queremos ejecutar (<code>main</code> en mi caso)</p> </div> <div class="paragraph"> <p>Si quieres ordenar las fotos por algún punto que no sea [0,0] añade al final del comando `--origin "20.23,12.13123" ` o las coordenadas que quieras</p> </div> </div> </div> <div class="sect1"> <h2 id="conclusión">Conclusión</h2> <div class="sectionbody"> <div class="paragraph"> <p>Probablemente no sea un pipeline muy útil pero me ha servido para practicar un poco el cómo encadenar canales y procesos</p> </div> </div> </div> Un caso de uso simple. Organizando fotos por geoposicion He vuelto a fallar Jorge Aguilera 2023-08-01T00:00:00Z https://blog.jagedn.dev/blog/2023/vuelto-fallar.html <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Como ya habrás observado se me da mejor escribir sobre cosas técnicas, explicando mis pajas mentales y pet projects, que hablar sobre las movidas que tengo en la cabeza pero creo que de vez en cuando tengo sacarlo fuera</p> </dd> </dl> </div> <div class="paragraph"> <p>En unos días hará ya un mes que renuncié en mi último trabajo, después de 8 meses bastante intensos (tampoco mucho, ha habido otras etapas más intensas pero supongo que con la edad va costando más). Durante este mes he estado de vacaciones y por cosas de la vida todavía me quedan unas semanas más de estar off.</p> </div> <div class="paragraph"> <p>Este no era el plan. El plan era repetir la idea del año pasado y aprovechar el #remotework para trabajar unas semanas desde Tailandia a la vez que hacíamos turismo. Pero &#8230;&#8203; las cosas cambiaron muy rápido y ha habido que adaptarse.</p> </div> <div class="paragraph"> <p>Para tener un poco de contexto, recapitularemos:</p> </div> <div class="paragraph"> <p>El año pasado lo inicié en una empresa que reunía todo lo que me gustaba. Trabajar con Groovy, en un proyecto OpenSource, con peña de otros paises y con un sueldo muy bueno. Todo pintaba genial y de hecho lo guardo con mucho cariño pero me encontré con que el jefe (un tipo muy majo y buena persona además de técnico exceptional) no "me dejaba espacio".</p> </div> <div class="paragraph"> <p>Muchas veces lo que hablábamos de hacer un viernes, llegaba el lunes y me lo encontraba ya medio montado por ejemplo. O iba viendo cómo mis opiniones no se tenían (del todo) en cuenta y me tenía que ceñir a lo que otro había pensado que era lo correcto.</p> </div> <div class="paragraph"> <p>Como puedes imaginar eso me dejó muy tocado anímicamente. Creo que seguí los pasos correctos, comentándolo a la persona indicada pero descubrí que aunque la mayoría de mis compañeros en privado compartían mi opinión, no la manifestaban así que llegó un punto en que dije hasta aquí y recogí mis cosas.</p> </div> <div class="paragraph"> <p>Por suerte conseguí enlazarlo con un reto que un muy buen amigo me propuso. Había empezado como sheriff en una startup de Dubai y necesitaban a un DevOps, pero de los de verdad: dev y ops, no el de infraestructura. Así que me tiré de cabeza a por ello.</p> </div> <div class="paragraph"> <p>Han sido 8 meses de aprender un huevo de cosas. Terraform, AWS, clusters, Nodejs, Typescript, Github actions, ufff.,, iba a continuar escribiendo más cosas que me he comido estos 8 meses pero &#8230;&#8203; no es de eso de lo que quiero escribir, para eso esta Linkedin.</p> </div> <div class="paragraph"> <p>El problema es que una vez más me sentí que no compartía la visión con los de arriba y además no me gustaba la actitud que tenían hacia el equipo. Me gustaría explayarme, pero creo que no toca, que mejor lo voy olvidando. El caso es que una vez más el Aguilera que llevo dentro se empezó a pudrir rápidamente y una mañana se encontró enviando la renuncia de forma abrupta.</p> </div> <div class="paragraph"> <p>Seguramente tú en tu trabajo estés aguantando tus mierdas (seguro que sí) y no entenderás muy bien cómo puedo renunciar así (y más peinando canas como ya peino) si encima me pagaban muy bien &#8230;&#8203; Pues eso mismo me pasa a mí, que me lo pregunto todas las mañanas.</p> </div> <div class="paragraph"> <p>El caso es que siempre se me queda una sensación amarga, de "fracaso", de creer que es que la gente va a pensar "que no aguanto nada" y bueno aunque uno se diga que la gente piense lo que quiera pues oye tampoco somos de piedra.</p> </div> <div class="paragraph"> <p>Así que nada, toca seguir disfrutando de estas semanas super interesantes por tierras extrañas y ya a la vuelta enfrentarse a mi peor enemigo, yo mismo.</p> </div> Pues después de 8 meses intensos ... he dimitido again Programar es de trileros Jorge Aguilera 2023-08-01T00:00:00Z https://blog.jagedn.dev/blog/2023/programar-trileros.html <div class="paragraph"> <p>Hoy 1 de Agosto hace exactamente 32 años que terminé la beca en C.P. Software para programata</p> </div> <div class="paragraph"> <p>Por hacer un poco de memoria, en aquella época estaba haciendo (más bien suspendiendo) segundo curso de Económicas y trabajando de vigilante los fines de semana para pagar las cervezas. Ya había descubierto el aula de informática de la Uni, siempre vacía, mi colega José Merchán me había dado algunas clasecillas de Cobol y me "enchufó" para la beca donde curraba. Una beca de dos meses y medio (medio Mayo, Junio y Julio) que me cuadró muy bien en el timing de los exámenes finales porque estaba previsto suspender casi todas</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Ojo, beca pagada. Si mal no recuerdo me pagaron por los dos meses que duró unas 30.000 pesetas por mes, lo mismo que me sacaba de vigilante.</p> </dd> </dl> </div> <div class="paragraph"> <p>De aquella beca tengo varios recuerdos/anécdotas (seguramente distorsionadas tras 32 años) como la de mi primer traje, pero la que vengo a contar hoy no se la había contado a nadie, tal vez por verguenza, aunque lo dudo.</p> </div> <div class="paragraph"> <p>El caso es que ya iniciado el curso y una vez que habíamos ido viendo que si el editor, que si el entorno, etc empezamos a meternos en faena con el Cobol, su sintáxis, etc y uno de los ejercicios que teníamos que resolver era algo así como:</p> </div> <div class="paragraph"> <p>Dadas dos variables A y B donde A vale 30 y B vale 20 hacer un programa que intercambie los valores de tal forma que A valga 20 y B 30 (crifras y enunciado aproximado)</p> </div> <div class="paragraph"> <p>"Chupao, le meto"</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>A VALUE 3 B VALUE 20 MOVE A TO B MOVE B TO A</code></pre> </div> </div> <div class="paragraph"> <p>y a correr"</p> </div> <div class="paragraph"> <p>No hace falta ser un ingeniero del MIT para entender que no funciona. Si "mueves" A a B pierdes el valor de B así que en el segundo move ya estás jodido.</p> </div> <div class="paragraph"> <p>Seguramente había recibido antes alguna bofetada a mi chulería informática, pero esta la he guardado en mi recuerdo. Cuando el profe nos/me hizo ver el error estuvo unos segundos dándole vueltas y pensando "pero entonces cómo &#8230;&#8203;", o como se dice ahora "guat de fak?" hasta que nos dijo como si tal cosa que necesitábamos una variable temporal donde almacenar una de las dos</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>A VALUE 3 B VALUE 20 MOVE B TO C MOVE A TO B MOVE C TO A</code></pre> </div> </div> <div class="paragraph"> <p>y entonces mi cabeza hizo boom. Ahí es cuando lo ví claro: <strong>programar es de trileros</strong></p> </div> <div class="paragraph"> <p>No hay magia en programar, no existe la salsa secreta de Kunfu Panda (vale, esto no lo pensé en su día), es todo truco: Tienes unos recursos limitados y de lo que se trata es de hacer tocomochos y mantener las suficientes pelotas en el aire para que parezca magia fluida, pero es todo truco</p> </div> <div class="paragraph"> <p>(poco tiempo después volví a tener la misma epifanía cuando descubrí la recursividad pero no tengo anécdota #AbueloCebolleta que recuerde)</p> </div> <div class="paragraph"> <p>Pues eso, ya lo he soltado después de 32 años.</p> </div> Hoy 1 de Agosto hace exactamente 32 años que terminé la beca que me enseño que prograrmar es de trileros FediSearch Jorge Aguilera 2023-06-30T00:00:00Z https://blog.jagedn.dev/blog/2023/fedisearch.html <div id="preamble"> <div class="sectionbody"> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>En este post voy a contar mis primeros pasos con OpenAI asi que como todo primer paso estaré equivocado y seguramente cometeré alguna burrada &#8230;&#8203; pero a mí me ha funcionado</p> </dd> </dl> </div> <div class="paragraph"> <p>Aunque ya hay gente dedicada de lleno al tema de OpenAI y relacionados, la verdad es que yo todavía no he tocado nada de esta tecnología y sólo conozco lo poquito de algún que otro artículo que haya podido leer asi como los típicos post en Linkedin de gente haciendo prompts o como se diga. Supongo que algún día me tendré que arremangar y ponerme más con ello.</p> </div> <div class="paragraph"> <p>Sin embargo, este mes en el trabajo me han "encasquetado" integrar un producto que no había oído nunca y dar soporte al programador que lo necesitaba. El producto en cuestión es Milvus y la movida era potenciar el buscador de nuestra aplicación usando OpenAI en lugar de los típicos "where like %" en la base de datos.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>Ahora ya sé que podíamos haber usado Postgresql con menos esfuerzo</p> </dd> </dl> </div> <div class="paragraph"> <p>Básicamente la idea de lo que queríamos hacer era:</p> </div> <div class="ulist"> <ul> <li> <p>tenemos una base de datos de artículos con varios campos de interés para buscar, como el típico de descripción, sector, familia, etc</p> </li> <li> <p>vamos a "vectorizar" la unión de todos ellos. Esto significa que le vamos a pasar todos estos campos a OpenAI (un API disponible en Internet y que es propietario de una gente muy lista) para que le aplique un modelo suyo y nos devuelva un array de números (el vector). Este vector "representa" ese texto en una matriz de muchísimas dimensiones</p> </li> <li> <p>lo insertamos en Milvus y le decimos qué campo es el vector</p> </li> <li> <p>dada una búsqueda del usuario con "texto libre", la vectorizamos y le decimos a Milvus que nos busque similitudes con un grado de afinidad</p> </li> </ul> </div> <div class="paragraph"> <p>Y mientras estaba liado con la parte de instalar e ir entendiendo Milvus, un buen amigo me pasó por otro lado un artículo que por casualidad me ayudó a entender mejor la historia y que además me descubría una nueva plataforma , Supabase, donde poder desplegar aplicaciones con una capa gratuita interesante.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>El artículo en cuestión: <a href="https://supabase.com/blog/openai-embeddings-postgres-vector" class="bare">https://supabase.com/blog/openai-embeddings-postgres-vector</a></p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="supabase">Supabase</h2> <div class="sectionbody"> <div class="paragraph"> <p>La idea de Supabase me ha enganchado y tengo que estrujarla más pero así, en dos palabras, me dan un Postgresql donde puedo instalar con un simple click muchas de sus extensiones (Postgresql tiene más de 1.000 extensiones) y desplegar functions que acceden a los datos creando así un API.</p> </div> <div class="paragraph"> <p>Digamos que lo veo (tengo que explorarlo más) como el backend para mi frontend en Netlify</p> </div> <div class="paragraph"> <p>Una vez registrado en la plataforma simplemente he creado un proyecto nuevo, he activado el plugin pg-vector y creado una tabla "users"</p> </div> <div class="paragraph"> <p>Siguiendo los pasos del articulo anterior y cambiando su documents por mi users he tenido que crear la funcion de Postgresql y el índice, pero es basicamente un c&amp;p del artículo</p> </div> </div> </div> <div class="sect1"> <h2 id="openai">OpenAI</h2> <div class="sectionbody"> <div class="paragraph"> <p>Por lo que he entendido hay miles de proyectos que hacen lo mismo que OpenAI pero como este es el más famoso y su API es realmente sencilla es el que voy a usar. Simplemente me registro en la plataforma y obtengo un API key para poder hacer N llamadas por minuto (suficientes para este proyecto)</p> </div> </div> </div> <div class="sect1"> <h2 id="fedisearch">FediSearch</h2> <div class="sectionbody"> <div class="paragraph"> <p>Obviamente, parafraseando a Jose Luis Lopez Vazquez "soy como un americano que si le das una pistola tiene que usarla", así que me he hecho este pequeño proyecto para probarlo.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Aquí tienes el video por si te quieres saltar la parte técnica y verlo en acción <a href="https://fediverse.tv/w/iiH8mw2J9D3KV2eyxBJ4Rz" class="bare">https://fediverse.tv/w/iiH8mw2J9D3KV2eyxBJ4Rz</a></p> </dd> </dl> </div> <div class="paragraph"> <p>La idea es crear un buscador de perfiles en Mastodon (en realidad Fediverso pero la gente lo conoce más por esta aplicación que lo usa).</p> </div> <div class="paragraph"> <p>A diferencia de Twitter, donde sólo hay un "único servidor", en el Fediverso hay muchísimos (se conocen como instancias, nodos, servidores &#8230;&#8203;) y todos exponen el directorio de usuarios registrados en una url. Para cada usuario puedes ver el username, su bio y campos descriptivos que el usuario haya querido añadir</p> </div> <div class="paragraph"> <p>Si por ejemplo consultas esta url <a href="https://mastodon.social/api/v1/directory" class="bare">https://mastodon.social/api/v1/directory</a> puedes ver que te responde con</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>[ { "id":"109244873849193955", "username":"jikodesu", "acct":"jikodesu", "display_name":"Jiko", ... "created_at":"2022-10-28T00:00:00.000Z", "note":"\u003cp\u003eTrying out Mastodon. Part of 2022 Twitter migration\u003c/p\u003e\u003cp\u003eDuolingo user: Nihongo, ... }, { "id":"......" }</code></pre> </div> </div> <div class="paragraph"> <p>Cada vez que consultas esta url te devuelve usuarios random.</p> </div> <div class="paragraph"> <p>De esta forma ya tenemos la primera parte del proyecto: obtener de cada usuario un campo de texto que lo describa.</p> </div> <div class="paragraph"> <p>La segunda parte del proyecto será enviarle este campo descriptivo a OpenAI para que lo vectorize</p> </div> <div class="paragraph"> <p>La tercera parte del proyecto será insertar en nuestra base de datos de usuarios el username, el campo de texto y el vector</p> </div> <div class="paragraph"> <p>Para ello he hecho un pequeño script (en Groovy of course, pero con un poco de maña lo podría haber hecho incluso con un bash) que dada una instancia del fediverso extrae la info y se la manda a OpenAI para luego insertar los resultados en Supabase:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="groovy">@Grab(group='org.apache.commons', module='commons-lang3', version='3.12.0') import groovy.json.* import java.net.http.* import static org.apache.commons.lang3.StringEscapeUtils.escapeHtml4 json = new JsonSlurper().parse("${args[0]}/api/v1/directory".toURL()) // extraemos los campos de interes de cada usuario users = json.collect { user-&gt; [username: user.username, note: user.display_name +"|"+escapeHtml4(user.note)+"|"+user.fields.collect{it.name+'|'+it.value}.join('|'), url: user.url] } body = [ input: users.collect{it.note}, model: "text-embedding-ada-002" ] // se los mandamos a openai para que los vectorize request = HttpRequest.newBuilder(new URI("https://api.openai.com/v1/embeddings")) .headers( "Content-Type", "application/json", "Authorization", "Bearer ${args[1]}" ) .POST(HttpRequest.BodyPublishers.ofString(JsonOutput.toJson(body).toString())) .build() response = HttpClient.newHttpClient().send(request, HttpResponse.BodyHandlers.ofInputStream()) result = response.body().text // añadimos a cada usuario su vector embeddings= new JsonSlurper().parseText(result) as Map embeddings.data.each{ def entry -&gt; users[entry.index].embedding = entry.embedding } // se los mandamos a Supabase con un POST request = HttpRequest.newBuilder(new URI("https://TUPROJECTO.supabase.co/rest/v1/users")) .headers( "Content-Type", "application/json", "apikey", args[2] ) .POST(HttpRequest.BodyPublishers.ofString(JsonOutput.toJson(users).toString())) .build() HttpClient.newHttpClient().send(request, HttpResponse.BodyHandlers.ofInputStream())</code></pre> </div> </div> <div class="paragraph"> <p>Es un script muy basico y guarro que pide por parametros la instancia, la key de OpenAI y la key de Supabase</p> </div> </div> </div> <div class="sect1"> <h2 id="buscando_usuarios">Buscando usuarios</h2> <div class="sectionbody"> <div class="paragraph"> <p>Para la búsqueda me he peleado un poco con node, deno y el subase-cli para poder crear una función que se pueda invocar para realizar la busqueda (lo que sería mi API).</p> </div> <div class="paragraph"> <p>Una vez he conseguido crear el proyecto y entender cómo desplegar las functions he podido desplegar mi funcion (copiada prácticamente del articulo de supabase):</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="javascript">import { serve } from 'https://deno.land/std@0.170.0/http/server.ts' import 'https://deno.land/x/xhr@0.2.1/mod.ts' import { createClient } from 'https://esm.sh/@supabase/supabase-js@2.5.0' import { Configuration, OpenAIApi } from 'https://esm.sh/openai@3.1.0' export const corsHeaders = { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type', } serve(async (req) =&gt; { // Handle CORS if (req.method === 'OPTIONS') { return new Response('ok', { headers: corsHeaders }) } // Search query is passed in request payload const { query } = await req.json() // OpenAI recommends replacing newlines with spaces for best results const input = query.replace(/\n/g, ' ') console.log(`Searching users for ${input}`) const configuration = new Configuration({ apiKey: 'sk-----------' }) const openai = new OpenAIApi(configuration) // Generate a one-time embedding for the query itself const embeddingResponse = await openai.createEmbedding({ model: 'text-embedding-ada-002', input, }) const [{ embedding }] = embeddingResponse.data.data const supabaseClient = createClient('https://pqlvxllouutlnnnwnlxp.supabase.co', 'TU_API_TOKEN'); // In production we should handle possible errors const { data: documents } = await supabaseClient.rpc('match_users', { query_embedding: embedding, match_threshold: 0.75, // Choose an appropriate threshold for your data match_count: 50, // Choose the number of matches }) return new Response(JSON.stringify(documents.sort((a,b)=&gt;a.similarity - b.similarity)), { headers: { ...corsHeaders, 'Content-Type': 'application/json' }, }) })</code></pre> </div> </div> <div class="paragraph"> <p>En sí no tiene mucho interés la funcion salvo:</p> </div> <div class="ulist"> <ul> <li> <p>Llama a OpenAPI usando mi token para vectorizar la query enviada por el usuario</p> </li> <li> <p>Usando la librería de supabase ejecuto un RPC llamando a la funcion embebida en el Postgres que realiza la busqueda de simimilitud por vectores</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="conclusiones">Conclusiones</h2> <div class="sectionbody"> <div class="paragraph"> <p>A parte de jugar un poco con el api de OpenAI y entender un poco lo de vectorizar textos creo que Supabase tiene mucho potencial pues poder disponer de un Postgresql con un solo click y añadirle funciones es muy interesante para esos pet-projects que se me ocurren cada cierto tiempo</p> </div> </div> </div> Buscando perfiles del Fediverso con OpenAI y Supabase Apisix en Okteto Jorge Aguilera 2023-05-15T00:00:00Z https://blog.jagedn.dev/blog/2023/apisix-3.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>En este post sobre APISIX vamos a desplegarlo en nuestro namespace de Okteto</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Este post NO es la continuación de <a href="apisix-1.html" class="bare">apisix-1.html</a> o <a href="apisix-2.html" class="bare">apisix-2.html</a> sino que esta vez vamos a usar un cluster que no estará en nuestro local.</p> </dd> <dt class="hdlist1">INFO</dt> <dd> <p>El código de estos post los puedes encontrar en el repo <a href="https://github.com/jagedn/apisix-example" class="bare">https://github.com/jagedn/apisix-example</a></p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="recapitulando">Recapitulando</h2> <div class="sectionbody"> <div class="paragraph"> <p>En posts anteriores vimos cómo instalar un cluster en nuestro local con <code>k3d</code> y cómo desplegar en este cluster APISIX. Así mismo creamos un servicio <code>whoami</code> y unas rutas para acceder a él a través de nuestro apigateway APISIX</p> </div> </div> </div> <div class="sect1"> <h2 id="apigateway">Apigateway</h2> <div class="sectionbody"> <div class="paragraph"> <p>En este post vamos a hacer lo mismo pero en lugar de usar un cluster en nuestro local, usaremos nuestro namespace en Okteto por lo que nuestra aplicación estará accesible en Internet.</p> </div> <div class="paragraph"> <p>La idea es desplegar en nuestro namespace dos servicios (custom-service y product-service) pero queremos que no se puedan acceder a ellos de forma directa, sino a través de nuestro ApiGateway que será donde tendremos las configuraciones de rutas, autentificaciones, etc que nos ofrece Apisix.</p> </div> </div> </div> <div class="sect1"> <h2 id="arquitectura">Arquitectura</h2> <div class="sectionbody"> <div class="paragraph"> <p>Así pues nuestra arquitectura actual es algo parecido a</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/diag-b9f840ad8e7db980307124f7b2c7b1cc.png" alt="Diagram" width="447" height="293"> </div> </div> <div class="paragraph"> <p>Obviamente este es un ejemplo simple con dos servicios donde vamos a usar la imagen de Docker whoami, pero en un caso real los servicios serían aplicaciones dialogando con bases de datos e incluso entre ellas, todo de forma interna.</p> </div> </div> </div> <div class="sect1"> <h2 id="okteto">Okteto</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ya he publicado algunos post sobre Okteto y cómo crearnos una cuenta, obtener las credenciales y tal, así que desde aquí asumo que tienes tu namespace preparado y configurado. En mi caso va a ser <code>example-pvidasoftware</code></p> </div> </div> </div> <div class="sect1"> <h2 id="product_y_customer_service">Product y Customer Service</h2> <div class="sectionbody"> <div class="paragraph"> <p>Para desplegar los dos servicios vamos a usar una funcionalidad de Okteto que nos permite desplegar mediante un docker-compose.yml (recuerda tienes todo el codigo en el repositorio <a href="https://github.com/jagedn/apisix-example" class="bare">https://github.com/jagedn/apisix-example</a>)</p> </div> <div class="paragraph"> <p>El docker-compose es similar en ambos casos y es tan simple como:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>version: "3" services: customer-service: image: containous/whoami</code></pre> </div> </div> <div class="paragraph"> <p>Nos situamos en la carpeta <code>product-service</code> y ejecutamos</p> </div> <div class="paragraph"> <p><code>$ okteto deploy</code></p> </div> <div class="paragraph"> <p>y lo mismo desde la carpeta <code>customer-service</code></p> </div> <div class="paragraph"> <p>Si vemos la consola de Okteto veremos que hemos desplegado dos stacks</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2023/okteto_apisix_1.png" alt="okteto apisix 1"> </div> </div> <div class="paragraph"> <p>Al no especificar ningun puerto ni endpoints, ninguno de los servicios está accesible desde fuera del cluster (a no ser que hagas un port-forward a tu maquina claro)</p> </div> </div> </div> <div class="sect1"> <h2 id="desplegando_apisix_en_okteto">Desplegando Apisix en Okteto</h2> <div class="sectionbody"> <div class="paragraph"> <p>Si recuerdas, en los post anteriores instalamos Apisix usando el Helm chart oficial. El "problema" con Okteto es que no contamos con todos los permisos para hacer el mismo despliegue así que mi primera opción fue desplegarlo usando un docker-compose y especificando las imágenes oficiales más la configuración de ejemplo.</p> </div> <div class="paragraph"> <p>Sin embargo después de investigar un poco he visto que existe una forma más sencilla usando el Helm y simplemente hay que "tunearlo" un poco (El fichero de configuración completo está en el repositorio. Sólo busca las líneas marcadas con "JORGE" y reemplaza a tu gusto)</p> </div> <div class="paragraph"> <p>En primer lugar añadiremos a nuestra configuración la URL del repositorio oficial "https://charts.apiseven.com"</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2023/okteto_apisix_2.png" alt="okteto apisix 2"> </div> </div> <div class="paragraph"> <p>volvemos a nuestro namespace y pinchamos en "Launch Dev Environment" seleccionando un helm char y buscando Apisix en la lista.</p> </div> <div class="paragraph"> <p>Okteto nos permite personalizar la configuración mediante un campo de entrada donde podremos borrar toda la configuracion por defecto y poner la nuestra (o buscar los campos directamente y modificarlos)</p> </div> <div class="paragraph"> <p>Básicamente los campos que he modificado son:</p> </div> <div class="ulist"> <ul> <li> <p>etcd.persistentce.size a 1Gb. Por defecto son 8Gb y al crear 3 volumenes me deja sin espacio</p> </li> <li> <p>ingress.hosts.host. Tienes que cambiarlo según tu namespace. Yo por ejemplo he tenido que poner "example-pvidasoftware.cloud.okteto.net"</p> </li> <li> <p>dashboard.true. Este es solo para tener la consola habilitada y poder crear rutas de forma sencilla, pero puedes deshabilitarlo con lo que te ahorras recursos (pero te tocará crear las rutas mediante curl y json)</p> <div class="olist lowerroman"> <ol class="lowerroman" type="i"> <li> <p>y ejecutamos &#8230;&#8203; y esperamos unos 3-4 minutos</p> </li> </ol> </div> </li> </ul> </div> <div class="paragraph"> <p>Si todo va bien deberías tener algo parecido a:</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2023/okteto_apisix_3.png" alt="okteto apisix 3"> </div> </div> <div class="paragraph"> <p>Como ves he subrayado la url pública y <strong>único</strong> punto de entrada a nuestra aplicación.</p> </div> </div> </div> <div class="sect1"> <h2 id="creando_rutas">Creando rutas</h2> <div class="sectionbody"> <div class="paragraph"> <p>Como he comentado he habilitado el dashboard de apisix, pero al no publicar el puerto no se puede acceder a él desde fuera así que usando kubectl haremos un port-forward para poder acceder como si se estuviera ejecutando en nuestra máquina.</p> </div> <div class="paragraph"> <p>Accedemos a la consola en <a href="http://localhost:9000" class="bare">http://localhost:9000</a> con el usuario admin/admin (obviamente tú habrás puesto otros porque eres una persona más cuidadosa que yo) y creamos</p> </div> <div class="ulist"> <ul> <li> <p>upstream customer-service</p> </li> <li> <p>upstream product-service</p> </li> <li> <p>route /customer/* al upstream customer-service</p> </li> <li> <p>route /product/* al upstream product-service</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="probando">Probando</h2> <div class="sectionbody"> <div class="paragraph"> <p>Si accedemos a <a href="https://apisix-gateway-example-pvidasoftware.cloud.okteto.net/customer/1" class="bare">https://apisix-gateway-example-pvidasoftware.cloud.okteto.net/customer/1</a> veremos que nos devuelve algo como</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>Hostname: customer-service-6fdbbdc48-nts96 GET /customer/1 HTTP/1.1 Host: apisix-gateway-example-pvidasoftware.cloud.okteto.net User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/114.0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8 Accept-Encoding: gzip, deflate, br Accept-Language: es-ES,es;q=0.8,en-US;q=0.5,en;q=0.3 Sec-Fetch-Dest: document Sec-Fetch-Mode: navigate Sec-Fetch-Site: none Sec-Fetch-User: ?1 Upgrade-Insecure-Requests: 1 X-Forwarded-Host: apisix-gateway-example-pvidasoftware.cloud.okteto.net X-Forwarded-Port: 443 X-Forwarded-Proto: https X-Forwarded-Scheme: https X-Request-Id: 861e9d2c73dba0fa01e8f9ea677129f3 X-Scheme: https</code></pre> </div> </div> <div class="paragraph"> <p>y lo mismo con la ruta de product</p> </div> </div> </div> <div class="sect1"> <h2 id="conclusión">Conclusión</h2> <div class="sectionbody"> <div class="paragraph"> <p>Una vez que tenemos Apisix corriendo en nuestro cluster podemos desplegar en él los microservicios sabiendo que están "por detrás" de nuestro ApiGateway, con toda la potencia y facilidad que ofrece</p> </div> </div> </div> Desplegando Apisix en Okteto Graalvanizando un script de Groovy Jorge Aguilera 2023-04-21T00:00:00Z https://blog.jagedn.dev/blog/2023/groovy-graalvm.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>En este post voy a publicar el código y pasos a seguir para convertir un script de Groovy en un binario de tal forma que para su ejecución no se necesita ni Groovy ni Java instalado. Además, aunque es simple, la velocidad de ejecución es sensiblemente mejor</p> </div> <div class="paragraph"> <p>En concreto el aplicativo va a subir un post a Linkedin (por ahora texto, luego veré de adjuntar imágenes) usando el nuevo api REST de esta plataforma. Para ello pedirá el <code>author</code> y el <code>accessToken</code> para poder publicar</p> </div> </div> </div> <div class="sect1"> <h2 id="requisitos">Requisitos</h2> <div class="sectionbody"> <div class="paragraph"> <p>Para completar todos los pasos se requiere tener instado:</p> </div> <div class="ulist"> <ul> <li> <p>sdkman, <a href="https://sdkman.io/install" class="bare">https://sdkman.io/install</a></p> </li> </ul> </div> <div class="paragraph"> <p>Una vez instalado le indicaremos que nos instale las versiones de Java y Groovy necesarias para generar el binario:</p> </div> <div class="paragraph"> <p><code>sdk use groovy 4.0.11</code></p> </div> <div class="paragraph"> <p><code>sdk use java 22.3.r19-grl</code></p> </div> </div> </div> <div class="sect1"> <h2 id="configuración">Configuración</h2> <div class="sectionbody"> <div class="paragraph"> <p>Para generar una imagen nativa de un script de groovy es necesario que este sea compilado en modo estático (lo que resta mucho de la expresividad de Groovy, pero &#8230;&#8203;)</p> </div> <div class="listingblock"> <div class="title">compiler.config</div> <div class="content"> <pre class="prettyprint highlight"><code>withConfig(configuration) { ast(groovy.transform.CompileStatic) ast(groovy.transform.TypeChecked) }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="groovyscript">GroovyScript</h2> <div class="sectionbody"> <div class="paragraph"> <p>Para mejorar la legibilidad del código he dividido el script en 2 ficheros .groovy, uno de ellos con métodos estáticos orientado a hacer las peticiones HTTP get y post y el otro que será el que contenga la "logica de negocio"</p> </div> <div class="listingblock"> <div class="title">HttpUtil.groovy</div> <div class="content"> <pre class="prettyprint highlight"><code>import groovy.json.JsonOutput import groovy.json.JsonSlurper import java.net.http.HttpClient import java.net.http.HttpRequest import java.net.http.HttpResponse class HttpUtil{ static Map postJson(Map map, String url, String token) { println "-&gt; ${JsonOutput.prettyPrint(JsonOutput.toJson(map).toString())}" def request = HttpRequest.newBuilder(new URI(url)) .headers( "Content-Type", "application/json", "X-Restli-Protocol-Version", "2.0.0", "LinkedIn-Version", "202301", "Authorization", "Bearer $token" ) .POST(HttpRequest.BodyPublishers.ofString(JsonOutput.toJson(map).toString())) .build() def response = HttpClient.newHttpClient().send(request, HttpResponse.BodyHandlers.ofInputStream()) if( response.statusCode() &gt; 299 ){ println response return null } def result = response.body().text println "&lt;-${result}" if( !result ){ return null } new JsonSlurper().parseText(result) as Map } static Map getJson(String url, String token){ def request = HttpRequest.newBuilder(new URI(url)) .headers( "Content-Type", "application/json", "X-Restli-Protocol-Version", "2.0.0", "LinkedIn-Version", "202301", "Authorization", "Bearer $token" ) .GET() .build() def response = HttpClient.newHttpClient().send(request, HttpResponse.BodyHandlers.ofString()) def result = response.body() println "&lt;-${result}" new JsonSlurper().parseText(result) as Map } }</code></pre> </div> </div> <div class="paragraph"> <p>Aunque parece tener mucho código en realidad es una implementación básica para usar las clases Http de Java y poder hacer un get y un post con unas cabeceras determinadas así como enviar y recibir Mapas como si fueran Json.</p> </div> <div class="listingblock"> <div class="title">PostContent.groovy</div> <div class="content"> <pre class="prettyprint highlight"><code>@GrabConfig(systemClassLoader = true) @Grab('info.picocli:picocli-groovy:4.7.3') @picocli.groovy.PicocliScript2 import groovy.transform.Field import static picocli.CommandLine.* @Option(names = ["-a", "--author"], description = "nickname", required=true) @Field String author = '' @Option(names = ["-k", "--token"], description = "token", required=true) @Field String token = '' @Option(names = ["-t", "--test"], description = "run as test") @Field boolean test = false @Parameters @Field List&lt;String&gt; content = [] String postURL = "https://api.linkedin.com/rest/posts" if( test ){ postURL="https://httpbin.org/delay/0" } Map post = [ "author" : "urn:li:person:${author}", "commentary" : content.join(' '), "visibility" : "PUBLIC", "distribution" : [ "feedDistribution" : "MAIN_FEED", "targetEntities" : [], "thirdPartyDistributionChannels": [] ], "lifecycleState" : "PUBLISHED", "isReshareDisabledByAuthor": false ] HttpUtil.postJson(post, postURL, token)</code></pre> </div> </div> <div class="paragraph"> <p>Este script usa Picocli para facilitar el parseo de comandos. Simplemente necesita un author y un token y además podemos indicar que se ejecute en modo test (-t) con lo que usará el servidor de httpbin como backend para testearlo</p> </div> <div class="paragraph"> <p>Por lo demás es un "simple" post con el formato que Linkedin espera para publicar un post</p> </div> </div> </div> <div class="sect1"> <h2 id="graalvm">Graalvm</h2> <div class="sectionbody"> <div class="paragraph"> <p>Las fases para convertir este script en binario las he separado en:</p> </div> <div class="ulist"> <ul> <li> <p>Pasar de Groovy a Java usando groovyc</p> </li> <li> <p>Ejecutarlo con Java en modo test para que el agente genere la configuracion de Graalvm</p> </li> <li> <p>Ejecutar el native-image para generar el binario</p> </li> </ul> </div> <div class="listingblock"> <div class="title">compile.sh</div> <div class="content"> <pre>#!/bin/bash set -e # sdk use groovy 4.0.11 # sdk use java 22.3.r19-grl echo compiling script groovyc --configscript=compiler.groovy -d out PostContent.groovy CP="$CP:./out" CP="$CP:$HOME/.sdkman/candidates/groovy/4.0.11/lib/groovy-4.0.11.jar" CP="$CP:$HOME/.sdkman/candidates/groovy/4.0.11/lib/groovy-json-4.0.11.jar" CP="$CP:$HOME/.sdkman/candidates/groovy/4.0.11/lib/groovy-cli-picocli-4.0.11.jar" CP="$CP:$HOME/.groovy/grapes/info.picocli/picocli/jars/picocli-4.7.3.jar" CP="$CP:$HOME/.groovy/grapes/info.picocli/picocli-groovy/jars/picocli-groovy-4.7.3.jar" echo generating graalvm configuration java -Dgroovy.grape.enable=false -agentlib:native-image-agent=config-output-dir=conf/ \ -cp "$CP" \ PostContent -t -a test -k test test echo building native image native-image -Dgroovy.grape.enable=false \ --no-server \ --no-fallback \ --report-unsupported-elements-at-runtime \ --initialize-at-build-time \ --initialize-at-run-time=org.codehaus.groovy.control.XStreamUtils,groovy.grape.GrapeIvy \ -H:ConfigurationFileDirectories=out/conf/ \ --enable-url-protocols=http,https \ -cp "$CP" \ -H:ConfigurationFileDirectories=conf/ \ PostContent</pre> </div> </div> <div class="paragraph"> <p>Si todo va bien al final del proceso (poco más de 1 minuto) tendremos un binario <code>postcontent</code> que podremos ejecutar</p> </div> <div class="paragraph"> <p><code>./postcontent -a NH123123 -k A_BEARER_TOKEN_YOU_CAN_USE_MY_PREVIOUS_POST Hi this is a post from groovy script</code></p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Para obtener el token te remito a otro de mis post donde te cuento como generarlo, o si lo prefieres usar el servicio que he publicado.</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="conclusion">Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>Las nuevas versiones de Groovy y Graalvm permiten (con un poco de esfuerzo lo admito) poder crear comandos de consola binarios, lo que para mí abre la puerta a poder distribuir utilidades usando mi lenguaje favorito</p> </div> <div class="paragraph"> <p>Queda pendiente para un futuro post el poder adjuntar imágenes, que con el nuevo api Linkedin lo ha complicado un poco más.</p> </div> </div> </div> Convirtiendo un script de groovy a binario nativo Primeros pasos con Apisix en Kubernetes: JWT Auth Jorge Aguilera 2023-04-05T00:00:00Z https://blog.jagedn.dev/blog/2023/apisix-2.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>En este segundo post sobre APISIX vamos a securizar el acceso a los endpoints de un microservicio que se encuentra tras el api-gateway usando JWT</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Este post es la continuación de <a href="apisix-1.html" class="bare">apisix-1.html</a> y da por supuesto que ya has instalado y desplegado ciertos artefactos en tu cluster. Si no es así te recomiendo que en primer lugar lo completes</p> </dd> <dt class="hdlist1">INFO</dt> <dd> <p>El código de estos post los puedes encontrar en el repo <a href="https://github.com/jagedn/apisix-example" class="bare">https://github.com/jagedn/apisix-example</a></p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="recapitulando">Recapitulando</h2> <div class="sectionbody"> <div class="paragraph"> <p>En el post anterior vimos cómo instalar un cluster en nuestro local con <code>k3d</code> y cómo desplegar en este cluster APISIX. Así mismo creamos un servicio <code>whoami</code> y unas rutas para acceder a él a través de nuestro apigateway APISIX</p> </div> <div class="paragraph"> <p>En este post vamos a ver cómo podemos seguir con la migración a microservicios de nuestro monolito en concreto aquellos endpoints securizados con JWT</p> </div> <div class="paragraph"> <p>Es decir, probablemente en nuestro monolito tengamos implementado un sistema de autentificación de usuarios que genere token JWT y que tengamos multitud de endpoints de nuestra API que lo validen mirando la cabecera <code>authorization</code></p> </div> <div class="paragraph"> <p>El "problema" a resolver es conseguir que nuestro api gateway valide esos JWT antes de enrutar las peticiones al microservicio de tal forma que estos no tengan que preocuparse de esta validación.</p> </div> <div class="paragraph"> <p>Así mismo otro problema a resolver es cómo les hacemos llegar a estos usuarios qué usuario es el que está "detrás" de esa petición.</p> </div> </div> </div> <div class="sect1"> <h2 id="arquitectura">Arquitectura</h2> <div class="sectionbody"> <div class="paragraph"> <p>Así pues nuestra arquitectura actual es algo parecido a</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/diag-89c8eead60a7280b39668b8bd033bce2.png" alt="Diagram" width="408" height="382"> </div> </div> <div class="paragraph"> <p>Mientras que en una arquitectura microservicios con un ApiGw sería como:</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/diag-0ab8b5f511d26adc8df9ce558415fb49.png" alt="Diagram" width="862" height="446"> </div> </div> </div> </div> <div class="sect1"> <h2 id="security_service">Security Service</h2> <div class="sectionbody"> <div class="paragraph"> <p>Para este post he creado un servicio Micronaut de ejemplo siguiendo el tutorial <a href="https://guides.micronaut.io/latest/micronaut-security-jwt-gradle-java.html" class="bare">https://guides.micronaut.io/latest/micronaut-security-jwt-gradle-java.html</a></p> </div> <div class="paragraph"> <p>Este servicio "validarará" cualquier login cuya password sea "password" y usará el username como <code>sub</code> en el JWT generado. Es decir, cualquier login con un usuario cualquier y una password=password devolverá un JWT donde el <code>sub</code> será el usuario que indiquemos. De esta forma podremos simular diferentes logins y comprobar que nuestra solución es capaz de identificarlos</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>el plugin de Apisix valida que el JWT incluya un campo <code>key</code> por lo que el tutorial de micronaut no es 100% valido.</p> </dd> </dl> </div> <div class="paragraph"> <p>El código de nuestro servicio de autentificación lo puedes encontrar en <a href="https://github.com/jagedn/apisix-example/tree/main/micronaut-security-jwt-gradle-java" class="bare">https://github.com/jagedn/apisix-example/tree/main/micronaut-security-jwt-gradle-java</a></p> </div> <div class="paragraph"> <p>Una vez compilado y generada la imagen la he subido a mi docker.io como <code>jagedn/monolito</code> (ya, el nombre no es muy acertado)</p> </div> <div class="paragraph"> <p>Una vez publicada la imagen la desplegamos en nuestro cluster</p> </div> <div class="listingblock"> <div class="title"><a href="https://github.com/jagedn/apisix-example/blob/main/k3d/04-jwt/user-service.yml" class="bare">https://github.com/jagedn/apisix-example/blob/main/k3d/04-jwt/user-service.yml</a></div> <div class="content"> <pre class="prettyprint highlight"><code>apiVersion: apps/v1 kind: Deployment metadata: name: user-service-deployment spec: replicas: 1 selector: matchLabels: app: user-service template: metadata: labels: app: user-service spec: containers: - name: user-service image: jagedn/monolito imagePullPolicy: Always ports: - containerPort: 8080 protocol: TCP name: http env: - name: MICRONAUT_SECURITY_TOKEN_JWT_SIGNATURES_SECRET_GENERATOR_SECRET value: MY_APPLICATION_JWT_SECRET_KEY_DUMMY <i class="conum" data-value="1"></i><b>(1)</b> --- apiVersion: v1 kind: Service metadata: name: user-service spec: ports: - name: http targetPort: http port: 8080 selector: app: user-service</code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>MY_APPLICATION_JWT_SECRET_KEY_DUMMY es la clave a usar para generar JWT firmados</td> </tr> </table> </div> <div class="paragraph"> <p>y creamos una ruta que redirija las peticiones de login a él</p> </div> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="Warning"></i> </td> <td class="content"> si nuestro monolito fuera el que está resolviendo las autentificaciones y generando los JWT, NO desplegaríamos un servicio nuevo sino que usaríamos la ruta que ya tengamos creada </td> </tr> </table> </div> <div class="listingblock"> <div class="title"><a href="https://github.com/jagedn/apisix-example/blob/main/k3d/04-jwt/apisix-login.yml" class="bare">https://github.com/jagedn/apisix-example/blob/main/k3d/04-jwt/apisix-login.yml</a></div> <div class="content"> <pre class="prettyprint highlight"><code>apiVersion: apisix.apache.org/v2 kind: ApisixRoute metadata: name: apisix-login-route namespace: default spec: http: - name: route-login match: paths: - /login backends: - serviceName: user-service servicePort: http</code></pre> </div> </div> <div class="paragraph"> <p>Ahora podemos probar a hacer un login con un usuario cualquiera:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>http localhost:8881/login username=jorgepayaso password=password { "access_token": "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJqb3JnZXBheWFzbyIsIm5iZiI6MTY4MDg4MjMwMCwicm9sZXMiOltdLCJpc3MiOiJtaWNyb25hdXRndWlkZSIsImV4cCI6MTY4MDg4NTkwMCwiaWF0IjoxNjgwODgyMzAwLCJrZXkiOiJtYWluIn0.ALYLxJFNPYE-jmalF0cBGjTBse7DZFwzfd5DMEN1JLs", "expires_in": 3600, "refresh_token": "eyJhbGciOiJIUzI1NiJ9.NjBlNTk3N2EtZjIyYi00MjFjLTk2MjktOGM5NzdjZTZkODE0.jysMcQJDEDHDTypmSOBnFA4YpkmyS-o3eqvmv_--c3U", "token_type": "Bearer", "username": "jorgepayaso" }</code></pre> </div> </div> <div class="paragraph"> <p>si validas ese <code>access_token</code> en jwt.io por ejemplo verás que el payload es:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>{ "sub": "jorgepayaso", "nbf": 1680882300, "roles": [], "iss": "micronautguide", "exp": 1680885900, "iat": 1680882300, "key": "main" }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="securizando_el_api">Securizando el API</h2> <div class="sectionbody"> <div class="paragraph"> <p>Una vez que tenemos un servicio y una ruta para obtener tokens vamos a "securizar" nuestro API haciendo que el APISIX valide que todas las peticiones incluyen una cabecera Authorization con un JWT válido (y así no tener que implementarlo en TODOS los servicios):</p> </div> <div class="paragraph"> <p>Para poder comparar con el post anterior vamos a configurar una nueva ruta <code>v2</code> que estará securizada, mientras que la del post anterior seguirá en "abierto"</p> </div> <div class="listingblock"> <div class="title"><a href="https://github.com/jagedn/apisix-example/blob/main/k3d/04-jwt/apisix-secure-whoami.yml" class="bare">https://github.com/jagedn/apisix-example/blob/main/k3d/04-jwt/apisix-secure-whoami.yml</a></div> <div class="content"> <pre class="prettyprint highlight"><code>apiVersion: apisix.apache.org/v2 kind: ApisixRoute metadata: name: apisix-whoami-route namespace: default spec: http: - name: route-1 match: paths: - /v2/* backends: - serviceName: whoami-service servicePort: http authentication: enable: true type: jwtAuth</code></pre> </div> </div> <div class="paragraph"> <p>Como puedes ver con este objeto kubernetes le estamos diciendo a Apisix que las peticiones a <code>/v2/*</code> se envíen a nuestro servicio <code>whoami</code> (como las de v1, simplemente es por no crear otros servicios) pero que primero valide que están autenticadas usando <code>jwtAuth</code></p> </div> <div class="paragraph"> <p>Tras aplicar este objeto veremos que <strong>toda peticion a v2 sin un JWT es rechazada</strong> por APISIX sin llegar a ejecutarse la llamada al servicio.</p> </div> <div class="paragraph"> <p>Ahora bien, APISIX puede comprobar que viene la cabecera e incluso parsear el JWT pero no tiene forma de validar que ha sido nuestro servicio <code>user-service</code> quien lo ha creado y que no es un intento de colarnos un JWT falso.</p> </div> <div class="paragraph"> <p>Para eso configuraremos el plugin JWTAuth indicando la clave a usar para verificarlo</p> </div> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="Warning"></i> </td> <td class="content"> En lugar de usar claves y passwords en claro como estoy haciendo en estos artículos, lo suyo es usar algún servicio de Secrets que ofrezca el cluster (y que soporte Apisix) </td> </tr> </table> </div> <div class="listingblock"> <div class="title"><a href="https://github.com/jagedn/apisix-example/blob/main/k3d/04-jwt/apisix-jwt-consumer.yml" class="bare">https://github.com/jagedn/apisix-example/blob/main/k3d/04-jwt/apisix-jwt-consumer.yml</a></div> <div class="content"> <pre class="prettyprint highlight"><code>apiVersion: apisix.apache.org/v2 kind: ApisixConsumer metadata: name: jwt-consumer spec: authParameter: jwtAuth: value: key: main <i class="conum" data-value="1"></i><b>(1)</b> secret: MY_APPLICATION_JWT_SECRET_KEY_DUMMY <i class="conum" data-value="2"></i><b>(2)</b></code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>key=main está "a pelo" en customer service. No sé muy bien porqué APISIX lo necesita</td> </tr> <tr> <td><i class="conum" data-value="2"></i><b>2</b></td> <td>MY_APPLICATION_JWT_SECRET_KEY_DUMMY es la clave que hemos usado en user-service para firmar los JWT</td> </tr> </table> </div> <div class="paragraph"> <p>Un ApisixConsumer representa a un cliente y APISIX maneja diferentes tipos de consumers. Por ejemplo basicAuth sirve para identificar a usuarios concretos mediante user+password, etc</p> </div> <div class="paragraph"> <p>Ahora ya podemos usar el JWT contra <code>v2</code></p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>$ TOKEN=$(http localhost:8881/login username=jorgepayaso password=password | jq -r .access_token) $ http localhost:8881/v2/soy/yo Authorization:"Bearer $TOKEN" HTTP/1.1 200 OK GET /v2/soy/yo HTTP/1.1 Host: localhost:8881</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="identificar_el_usuario">Identificar el usuario</h2> <div class="sectionbody"> <div class="paragraph"> <p>Si has seguido hasta aquí la explicación (y si yo he conseguido explicarme), tenemos implementado un api gateway que protege las rutas que digamos mediante una validación JWT generado por nosotros.</p> </div> <div class="paragraph"> <p>Sin embargo uno de los problemas comunes en una arquitectura microservicios es que la petición, al ser enrutada al servicio en cuestión, necesita en la mayoría de los casos ser "personalizada" con algún tipo de identificación del usuario que la está realizando.</p> </div> <div class="paragraph"> <p>En un "monolito" lo normal es que deleguemos en el framework en el que está implementado la autorización y la autentificación de tal forma que el framework ante cada petición comprueba la firma del JWT y extrayendo el sub (por ejemplo) del token puede ir a la base de datos y obtener toda la info del usuario en cuestión.</p> </div> <div class="paragraph"> <p>En microservicios lo "normal" es adjuntar en una cabecera especial el ID del usuario y dejar a cada servicio que lidie con ello. En la mayoría de los casos este ID es suficiente para que el servicio pueda realizar su trabajo. En otros usará este ID para invocar al servicio de usuarios y que le devuelva más información como la fecha de creación, si está al orden de pago, &#8230;&#8203;</p> </div> <div class="paragraph"> <p>En nuestro ejemplo lo que vamos a hacer es que APISIX, una vez validado el JWT, parsee el payload y nos incluya el <code>sub</code> en una cabecera X-USER-ID que enviará junto con la petición al microservicio</p> </div> <div class="paragraph"> <p>Para ello simplemente "enriqueceremos" la ruta protegida <code>v2</code> y añadiremos unas líneas de código en el lenguaje Lua que es el que usa Apisix:</p> </div> <div class="listingblock"> <div class="title"><a href="https://github.com/jagedn/apisix-example/blob/main/k3d/05-jwt-user-id/apisix-secure-whoami.yml" class="bare">https://github.com/jagedn/apisix-example/blob/main/k3d/05-jwt-user-id/apisix-secure-whoami.yml</a></div> <div class="content"> <pre class="prettyprint highlight"><code>apiVersion: apisix.apache.org/v2 kind: ApisixRoute metadata: name: apisix-whoami-route namespace: default spec: http: - name: route-1 match: paths: - /v2/* backends: - serviceName: whoami-service servicePort: http authentication: enable: true type: jwtAuth plugins: - name: "serverless-post-function" enable: true config: functions: - | -- probably this function can be placed in another file function parseJWTPayload(conf, ctx) -- Import neccessary libraries local core = require("apisix.core") local jwt = require("resty.jwt") -- Parse jwt local sub_str = string.sub local jwt_token = core.request.header(ctx, "authorization") local prefix = sub_str(jwt_token, 1, 7) if prefix == 'Bearer ' or prefix == 'bearer ' then jwt_token = sub_str(jwt_token, 8) end local jwt_obj = jwt:load_jwt(jwt_token) -- Set x-user-id header core.request.set_header(ctx, "X-USER-ID", jwt_obj.payload.sub) end -- this is the function to call return function(conf, ctx) return parseJWTPayload(conf, ctx) end</code></pre> </div> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Todavía tengo que investigar cómo/dónde ubicar la funcion parseJWTPayload para poderla reutilizar en otras rutas</p> </dd> </dl> </div> <div class="paragraph"> <p>Simplemente lo que hacemos es decirle a Apisix que una vez ejecutado el plugin jwtAuth nos ejecute otro de sus plugins, <code>serverless-post-function</code>, el cual puede acceder a los datos de la petición y modificarlos.</p> </div> <div class="paragraph"> <p>En nuestro caso por ejemplo "enriquecemos" el request añadiendo una nueva cabecera que el microservicio puede usar:</p> </div> <div class="paragraph"> <p><code>core.request.set_header(ctx, "X-USER-ID", jwt_obj.payload.sub)</code></p> </div> <div class="paragraph"> <p>Una vez aplicado en el cluster los cambios podemos observar que nuestro whoami servicio recibe una cabecera X-USER-ID diferente segun el usuario con el que generemos el token:</p> </div> <div class="listingblock"> <div class="title">username=jorgepayaso</div> <div class="content"> <pre class="prettyprint highlight"><code>$ TOKEN=$(http localhost:8881/login username=jorgepayaso password=password | jq -r .access_token) $ http localhost:8881/v2/soy/yo Authorization:"Bearer $TOKEN" HTTP/1.1 200 OK Content-Length: 729 Content-Type: text/plain; charset=utf-8 Date: Fri, 07 Apr 2023 16:21:22 GMT Server: APISIX/3.2.0 Hostname: whoami-deployment-5d4fc76b57-2h8pl IP: 127.0.0.1 IP: ::1 IP: 10.42.0.195 IP: fe80::d4f6:4dff:fe1f:75af RemoteAddr: 10.42.0.191:59322 GET /v2/soy/yo HTTP/1.1 Host: localhost:8881 User-Agent: HTTPie/2.6.0 Accept: */* Accept-Encoding: gzip, deflate Authorization: Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJqb3JnZXBheWFzbyIsIm5iZiI6MTY4MDg4NDQ4MCwicm9sZXMiOltdLCJpc3MiOiJtaWNyb25hdXRndWlkZSIsImV4cCI6MTY4MDg4ODA4MCwiaWF0IjoxNjgwODg0NDgwLCJrZXkiOiJtYWluIn0.o-yU9BSYyw314oPN_KZFLxgmqXOT2IQ9smDlfmC28Ss X-Forwarded-For: 10.42.0.1, 10.42.0.187 X-Forwarded-Host: localhost:8881 X-Forwarded-Port: 8881 X-Forwarded-Proto: http X-Forwarded-Server: traefik-7cd4fcff68-9ksw7 X-Real-Ip: 10.42.0.187 X-User-Id: jorgepayaso</code></pre> </div> </div> <div class="listingblock"> <div class="title">username=pepitopalotes</div> <div class="content"> <pre class="prettyprint highlight"><code>$ TOKEN=$(http localhost:8881/login username=pepitopalotes password=password | jq -r .access_token) $ http localhost:8881/v2/soy/yo Authorization:"Bearer $TOKEN" HTTP/1.1 200 OK Content-Length: 734 Content-Type: text/plain; charset=utf-8 Date: Fri, 07 Apr 2023 16:22:06 GMT Server: APISIX/3.2.0 Hostname: whoami-deployment-5d4fc76b57-2h8pl IP: 127.0.0.1 IP: ::1 IP: 10.42.0.195 IP: fe80::d4f6:4dff:fe1f:75af RemoteAddr: 10.42.0.191:59322 GET /v2/soy/yo HTTP/1.1 Host: localhost:8881 User-Agent: HTTPie/2.6.0 Accept: */* Accept-Encoding: gzip, deflate Authorization: Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJwZXBpdG9wYWxvdGVzIiwibmJmIjoxNjgwODg0NTI0LCJyb2xlcyI6W10sImlzcyI6Im1pY3JvbmF1dGd1aWRlIiwiZXhwIjoxNjgwODg4MTI0LCJpYXQiOjE2ODA4ODQ1MjQsImtleSI6Im1haW4ifQ.-uFlClK5kmjMYWK4F-jZFwRTwvM8vXQEuKl5OzkhRdY X-Forwarded-For: 10.42.0.1, 10.42.0.187 X-Forwarded-Host: localhost:8881 X-Forwarded-Port: 8881 X-Forwarded-Proto: http X-Forwarded-Server: traefik-7cd4fcff68-9ksw7 X-Real-Ip: 10.42.0.187 X-User-Id: pepitopalotes</code></pre> </div> </div> </div> </div> Securizando rutas Apisix con JWT Primeros pasos con Apisix en Kubernetes Jorge Aguilera 2023-03-28T00:00:00Z https://blog.jagedn.dev/blog/2023/apisix-1.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>A poco que la arquitectura de tu producto (no hablo de la de tu aplicación, sino de la del producto) se base en microservicios, bien porque así la diseñasteis desde el principio o bien porque estáis en proceso de migración, seguramente alguien de tu equipo se estará peleando con un Api Gateway</p> </div> <div class="paragraph"> <p>"An API Gateway is the traffic manager that interfaces with the actual backend service or data, and applies policies, authentication, and general access control for API calls to protect valuable data. An API gateway is the way you control access to your back-end systems and services, and it was designed to optimize communication between external clients and your backend services, giving your clients a seamless experience"</p> </div> <div class="paragraph"> <p>&#8201;&#8212;&#8201;<a href="https://www.tibco.com/reference-center/what-is-an-api-gateway" class="bare">https://www.tibco.com/reference-center/what-is-an-api-gateway</a></p> </div> <div class="paragraph"> <p>Un apigw es algo más que un simple proxy hacia los servicios de backend, pues también lo podemos usar para agregar varias llamadas a los servicios en una única respuesta, así como también se encarga de la autentificación, cache, etc.</p> </div> <div class="paragraph"> <p>Por otro lado, Kubernetes se ha convertido en el orquestador por excelencia en las soluciones de hoy en día sin importar el tamaño de la misma (aunque algunos verán una barbaridad usar kubernetes en una aplicación pequeña yo personalmente sí lo veo porque hoy en día existen implementaciones muy ligeras que te permitirán correr la aplicación y podrás aprovechar un montón de herramientas disponibles para este entorno)</p> </div> <div class="paragraph"> <p>Así pues en este post vamos a ver cómo "desplegar" una aplicación con microservicios en kubernetes <strong>en nuestro local</strong>, es decir, lo que pretendo es jugar con las herramientas disponibles para comprender cómo funcionan los diferentes componentes de la solución sin necesidad de invertir mucho tiempo (ni dinero). Más adelante, según disponibilidad, iré ampliando esta serie de post usando otras plataformas y explorando otras herramientas, <strong>siempre desde el punto de vista de aprender</strong></p> </div> </div> </div> <div class="sect1"> <h2 id="requisitos">Requisitos</h2> <div class="sectionbody"> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>Ignoro si todo lo que vamos a ver funcionaría en un Windows. En un Linux debería funcionar sin problema y probablemente en un Mac también</p> <div class="ulist"> <ul> <li> <p>docker (a estas alturas quién no tiene instalado docker en su máquina)</p> </li> <li> <p>kubectl, es una aplicacion de consola que se instala facilmente siguiendo <a href="https://kubernetes.io/docs/tasks/tools/install-kubectl-linux/" class="bare">https://kubernetes.io/docs/tasks/tools/install-kubectl-linux/</a></p> </li> <li> <p>k9s, un kubectl supervitaminado, yo no puedo vivir ya sin él</p> </li> <li> <p>k3d es una implementación muy ligera de kubernetes que se instala siguiendo <a href="https://k3d.io/v5.4.9/" class="bare">https://k3d.io/v5.4.9/</a></p> </li> <li> <p>helm, es una herramienta que "recubre" kubectl y mediante plantillas podemos personalizar y desplegar en el cluster aplicaciones muy complejas con un sólo comando</p> </li> </ul> </div> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="crear_el_cluster">Crear el cluster</h2> <div class="sectionbody"> <div class="paragraph"> <p>K3d (hay otras opciones igual de ligeras) nos va a servir para crear nuestro cluster en local. Sería como tener el gestor de contenedores de Amazon de EKS en tu local así que lo primero va a ser crear un cluster:</p> </div> <div class="paragraph"> <p><code>k3d cluster create example -p "8881:80@loadbalancer"</code></p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Voy a usar el puerto 8881 de <strong>mi maquina</strong> como puerto de acceso al balanceador que se encuentra <strong>dentro</strong> del cluster y acceder así a los servicios que despliegue en él. Si usas ese puerto para tus cosas usa otro que esté libre</p> </dd> </dl> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>INFO[0000] portmapping '8881:80' targets the loadbalancer: defaulting to [servers:*:proxy agents:*:proxy] INFO[0000] Prep: Network INFO[0000] Created network 'k3d-example' INFO[0000] Created image volume k3d-example-images INFO[0000] Starting new tools node... INFO[0000] Starting Node 'k3d-example-tools' INFO[0001] Creating node 'k3d-example-server-0' INFO[0001] Creating LoadBalancer 'k3d-example-serverlb' INFO[0001] Using the k3d-tools node to gather environment information INFO[0001] HostIP: using network gateway 172.20.0.1 address INFO[0001] Starting cluster 'example' INFO[0001] Starting servers... INFO[0001] Starting Node 'k3d-example-server-0' INFO[0005] All agents already running. INFO[0005] Starting helpers... INFO[0005] Starting Node 'k3d-example-serverlb' INFO[0011] Injecting records for hostAliases (incl. host.k3d.internal) and for 2 network members into CoreDNS configmap... INFO[0013] Cluster 'example' created successfully! INFO[0013] You can now use it like this: kubectl cluster-info</code></pre> </div> </div> <div class="paragraph"> <p>Comprobamos que el cluster efectivamente se ha creado y vemos el puerto que nos ha asignado (que seguramente NO coincidirá con el tuyo)</p> </div> <div class="paragraph"> <p><code>kubectl cluster-info</code></p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>Kubernetes control plane is running at https://0.0.0.0:39137 CoreDNS is running at https://0.0.0.0:39137/api/v1/namespaces/kube-system/services/kube-dns:dns/proxy Metrics-server is running at https://0.0.0.0:39137/api/v1/namespaces/kube-system/services/https:metrics-server:https/proxy To further debug and diagnose cluster problems, use 'kubectl cluster-info dump'.</code></pre> </div> </div> <div class="paragraph"> <p>Vamos a comprobar que accedemos al cluster:</p> </div> <div class="paragraph"> <p><code>curl -v localhost:8881</code></p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>* Trying 127.0.0.1:8881... * Connected to localhost (127.0.0.1) port 8881 (#0) &gt; GET / HTTP/1.1 &gt; Host: localhost:8881 &gt; User-Agent: curl/7.81.0 &gt; Accept: */* &gt; * Mark bundle as not supporting multiuse &lt; HTTP/1.1 404 Not Found &lt; Content-Type: text/plain; charset=utf-8 &lt; X-Content-Type-Options: nosniff &lt; Date: Tue, 28 Mar 2023 14:49:46 GMT &lt; Content-Length: 19 &lt; 404 page not found * Connection #0 to host localhost left intact</code></pre> </div> </div> <div class="paragraph"> <p>Digamos que si has llegado hasta aquí es como si te hubieras creado una cuenta en AWS y le hubieras dado al botón de crear un EKS</p> </div> </div> </div> <div class="sect1"> <h2 id="repositorio">Repositorio</h2> <div class="sectionbody"> <div class="paragraph"> <p>El código de este post lo puedes encontrar en <a href="https://github.com/jagedn/apisix-example/" class="bare">https://github.com/jagedn/apisix-example/</a> aunque también puedes ir copiando y pegando desde el post</p> </div> </div> </div> <div class="sect1"> <h2 id="monolito">Monolito</h2> <div class="sectionbody"> <div class="paragraph"> <p>Supongamos que tenemos nuestro monolito en una imagen docker tal que podemos desplegarla en nuestro cluster. Para este ejemplo nuestro monolito va a ser una imagen pública que simplemente nos devuelve información sobre el container donde se está ejecutando.</p> </div> <div class="paragraph"> <p>Creamos un fichero con la definición de nuestra aplicacion:</p> </div> <div class="listingblock"> <div class="title">whoami-deployment.yml</div> <div class="content"> <pre>apiVersion: apps/v1 kind: Deployment metadata: name: whoami-deployment spec: replicas: 1 selector: matchLabels: app: whoami template: metadata: labels: app: whoami spec: containers: - name: whoami-container image: containous/whoami</pre> </div> </div> <div class="paragraph"> <p>y la desplegamos en nuestro cluster:</p> </div> <div class="paragraph"> <p><code>kubectl apply -f whoami-deployment.yml</code></p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>deployment.apps/whoami-deployment created</code></pre> </div> </div> <div class="paragraph"> <p>Comprobamos que esta desplegada</p> </div> <div class="paragraph"> <p><code>kubectl get pods</code></p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>NAME READY STATUS RESTARTS AGE whoami-deployment-5d4fc76b57-2h8pl 1/1 Running 0 45s</code></pre> </div> </div> <div class="paragraph"> <p>Nuestra aplicación está "viva" y ejecutandose en el cluster pero NO tenemos forma de pedirle que haga nada (sin tener que hacer trucos) así que tenemos que crear y desplegar un servicio</p> </div> <div class="listingblock"> <div class="title">whoami-service.yml</div> <div class="content"> <pre class="prettyprint highlight"><code>apiVersion: v1 kind: Service metadata: name: whoami-service spec: ports: - name: http targetPort: 80 port: 80 selector: app: whoami</code></pre> </div> </div> <div class="paragraph"> <p><code>kubectl apply -f whoami-service.yml</code></p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Básicamente hemos creado un objeto en el cluster que se encargará de recibir peticiones en un <code>port</code> 80 y los reenviará al container al <code>targetPort</code> 80. Ahora mismo tenemos 1 pod y 1 service pero k8s nos permite que creemos más réplicas del deployment por lo que podriamos tener n pod y 1 service de tal forma que el service se encargaría de ir repartiendo las peticiones a cada pod</p> </dd> </dl> </div> <div class="paragraph"> <p>Sin embargo, seguimos sin poder acceder a nuestra aplicación "desde fuera". Para ello necesitamos desplegar un <em>Ingress</em></p> </div> <div class="listingblock"> <div class="title">whoami-ingress.yml</div> <div class="content"> <pre class="prettyprint highlight"><code>apiVersion: networking.k8s.io/v1 kind: Ingress metadata: name: whoami-ingress spec: rules: - http: paths: - path: / pathType: Prefix backend: service: name: whoami-service port: name: http</code></pre> </div> </div> <div class="paragraph"> <p><code>kubectl apply -f whoami-ingress.yml</code></p> </div> <div class="paragraph"> <p>Y ahora <strong>por fín</strong> ya podemos acceder a nuestro monolito</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>curl localhost:8881/mira/mama/un/monolito Hostname: whoami-deployment-5d4fc76b57-2h8pl IP: 127.0.0.1 IP: ::1 IP: 10.42.0.9 IP: fe80::6cc5:9aff:fe51:9a19 RemoteAddr: 10.42.0.8:40276 GET /mira/mama/un/monolito HTTP/1.1 Host: localhost:8881 User-Agent: curl/7.81.0 Accept: */* Accept-Encoding: gzip X-Forwarded-For: 10.42.0.1 X-Forwarded-Host: localhost:8881 X-Forwarded-Port: 8881 X-Forwarded-Proto: http X-Forwarded-Server: traefik-7cd4fcff68-9ksw7 X-Real-Ip: 10.42.0.1</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="apisix">APISIX</h2> <div class="sectionbody"> <div class="paragraph"> <p>Perfecto, ya tenemos nuestro producto en producción pero el nuevo arquitecto viene con otras ideas y preconiza que el monolito nos va a ralentizar por lo que debemos evolucionar a una arquitectura microservicios. Perfecto (estoy de acuerdo con él) así que mientras los programadores empiezan a crear nuevos servicios nosotros vamos a ir implementando un API Gateway que sirva para consumir sus endpoints (como ya hemos dicho sabemos que un simple proxy a los servicios no será suficiente)</p> </div> <div class="paragraph"> <p>Existen varias formas de instalar Apisix en nuestro cluster pero nosotros vamos a usar la más fácil (no por ello incompleta) usando el chart de Helm disponible</p> </div> <div class="paragraph"> <p>Si seguimos la página oficial, <a href="https://apisix.apache.org/docs/apisix/installation-guide/" class="bare">https://apisix.apache.org/docs/apisix/installation-guide/</a>, veremos que consiste en ejecutar 3 comandos, pero primero vamos a preparar un fichero de configuración adecuado para nuestro caso</p> </div> <div class="listingblock"> <div class="title">values.yml</div> <div class="content"> <pre class="prettyprint highlight"><code>gateway: type: NodePort ingress-controller: enabled: true config: apisix: serviceNamespace: apisix</code></pre> </div> </div> <div class="paragraph"> <p>Con este fichero le vamos a decir a Helm que nos instale Apisix "en modo NodePort" (necesario para que k3d luego pueda acceder a él sin problemas) y que también nos instale su <em>controller</em> para ingress. Este será el encargado de que podamos crear rutas y reglas en apisix usando ficheros de kubernetes de forma fácil (y versionada)</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>voy a usar el namespace <strong>apisix</strong> donde desplegar todos los artefactos relacionados con apisix, pero le puedes dar otro nombre o incluso usar el <em>default</em>, aunque lo veo un poco "guarro"</p> </dd> </dl> </div> <div class="paragraph"> <p>Básicamente ejecutaremos estos 3 comandos</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>helm repo add apisix https://charts.apiseven.com helm repo update helm install apisix apisix/apisix --create-namespace --namespace apisix -f values.yml</code></pre> </div> </div> <div class="paragraph"> <p>(Fíjate que indico el fichero "-f values.yml" que es como he llamado al fichero de configuración de helm para ajustar la ínstalación de Apisix a mi medida)</p> </div> <div class="paragraph"> <p>Si todo va bien, Apisix va a necesitar un minuto aprox para inicializar todas sus cosas. Vamos a utilizar <em>k9s</em> para comprobarlo. Ejecutamos en un terminal <code>k9s</code> y deberíamos ver todos los pods del cluster:</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2023/k9s_1.png" alt="k9s 1"> </div> </div> <div class="paragraph"> <p>Según vayan terminando de inicializarse cada componente iremos viendo que pasan de rojo a azul (en mi terminal al menos)</p> </div> <div class="paragraph"> <p>Una vez comprobado que todos han inicializado bien saldremos con &#8230;&#8203;. síiiiii "dos puntos q", al más puro estilo de vi</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Lo que ha hecho helm ha sido crear un montón de recursos nuevos en nuestro cluster, además de crearnos el namespace y desplegar en él los diferentes componentes.</p> </dd> </dl> </div> <div class="paragraph"> <p>A grandes rasgos la arquitectura de Apisix se divide:</p> </div> <div class="ulist"> <ul> <li> <p>componente stateful que guarda la configuración (etcd)</p> </li> <li> <p>componente admin que gestiona esta configuración</p> </li> <li> <p>componente gateway el encargado de gestionar las peticiones</p> </li> <li> <p>ingress controller, un operador que "convierte" nuestros recursos k8s en configuración apisix</p> </li> </ul> </div> <div class="paragraph"> <p><strong>Lo bueno de Apisix es que con esta arquitectura NO necesitas ninguna base de datos</strong></p> </div> <div class="paragraph"> <p>Comprobamos que nuestro "monolito" sigue funcionando (pues en principio no hemos hecho nada que le afecte)</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>curl localhost:8881/sigo/vivo Hostname: whoami-deployment-5d4fc76b57-2h8pl IP: 127.0.0.1 IP: ::1 IP: 10.42.0.9 IP: fe80::6cc5:9aff:fe51:9a19 RemoteAddr: 10.42.0.8:40276 GET /sigo/vivo HTTP/1.1 Host: localhost:8881 User-Agent: curl/7.81.0 Accept: */* Accept-Encoding: gzip X-Forwarded-For: 10.42.0.1 X-Forwarded-Host: localhost:8881 X-Forwarded-Port: 8881 X-Forwarded-Proto: http X-Forwarded-Server: traefik-7cd4fcff68-9ksw7 X-Real-Ip: 10.42.0.1</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="desplegando_rutas_en_nuestro_apisix">Desplegando rutas en nuestro Apisix</h2> <div class="sectionbody"> <div class="paragraph"> <p>Vamos a indicarle a Apisix que queremos enrutar todas las peticiones que lleguen a una determinada ruta (por ejemplo todas /*) hasta nuestro monolito:</p> </div> <div class="listingblock"> <div class="title">apisix-whoami.yml</div> <div class="content"> <pre class="prettyprint highlight"><code>apiVersion: apisix.apache.org/v2 kind: ApisixRoute metadata: name: apisix-whoami-route namespace: default spec: http: - name: route-1 match: paths: - /* backends: - serviceName: whoami-service servicePort: http</code></pre> </div> </div> <div class="paragraph"> <p><code>kubectl apply -f apisix-whoami.yml</code></p> </div> <div class="paragraph"> <p>Este recurso es detectado por el controller de Apisix (al ser un <code>kind ApisixRoute</code>) y lo aplica en su configuración de tal forma que <strong>todas</strong> las peticiones que cumplan la condición "match" se envíen al servicio <code>whoami-service</code></p> </div> <div class="paragraph"> <p>Como Apisix todavía no está recibiendo peticiones del exterior podemos aplicar esta configuración sin ningún problema.</p> </div> </div> </div> <div class="sect1"> <h2 id="activando_nuestro_apigw">Activando nuestro APIGW</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ha llegado el momento de "intercambiar" nuestro monolito por nuestro ApiGW. Como estamos en un cluster de ejemplo y nos podemos permitir un pequeño downtime simplemente quitaremos un ingress y lo sustituiremos por otros</p> </div> <div class="listingblock"> <div class="title">apisix-ingress.yml</div> <div class="content"> <pre class="prettyprint highlight"><code>apiVersion: networking.k8s.io/v1 kind: Ingress metadata: name: apisix-ingress namespace: apisix spec: rules: - http: paths: - path: / pathType: Prefix backend: service: name: apisix-gateway port: name: apisix-gateway</code></pre> </div> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>helm nos creó, en el namespace que le dijimos, un servicio llamado <code>apisix-gateway</code> el cual está escuchando en un puerto llamado <code>apisix-gateway</code></p> </dd> </dl> </div> <div class="paragraph"> <p>Quitamos el enrutado hacia el monolito</p> </div> <div class="paragraph"> <p><code>kubectl delete -f whoami-ingress.yml</code></p> </div> <div class="paragraph"> <p>Comprobamos que lo "hemos roto"</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>curl localhost:8881/sigo/vivo 404 page not found</code></pre> </div> </div> <div class="paragraph"> <p>y corremos a activar el del apigw</p> </div> <div class="paragraph"> <p><code>kubectl apply -f apisix-ingress.yml</code></p> </div> <div class="paragraph"> <p>Comprobamos que lo "hemos arreglado"</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>curl localhost:8881/sigo/vivo Hostname: whoami-deployment-5d4fc76b57-2h8pl IP: 127.0.0.1 IP: ::1 IP: 10.42.0.9 IP: fe80::6cc5:9aff:fe51:9a19 RemoteAddr: 10.42.0.19:58848 GET /sigo/vivo HTTP/1.1 Host: localhost:8881 User-Agent: curl/7.81.0 Accept: */* Accept-Encoding: gzip X-Forwarded-For: 10.42.0.1, 10.42.0.8 X-Forwarded-Host: localhost:8881 X-Forwarded-Port: 8881 X-Forwarded-Proto: http X-Forwarded-Server: traefik-7cd4fcff68-9ksw7 X-Real-Ip: 10.42.0.8</code></pre> </div> </div> <div class="paragraph"> <p>Si todo ha ido bien hemos "insertado" por delante del monolito una nueva pieza que será la que se encargue ahora de las peticiones desde el exterior y decidirá en base a su configuración cómo responder</p> </div> </div> </div> <div class="sect1"> <h2 id="configurando_rutas">Configurando rutas</h2> <div class="sectionbody"> <div class="paragraph"> <p>¿Cómo podemos estar seguros de que todo esto es cierto? Supongamos que en la nueva arquitectura queremos que la vieja aplicación siga ofreciendo servicios pero bajo una nueva ruta <code>/v1</code> por ejemplo</p> </div> <div class="paragraph"> <p>Reconfiguramos el ApisixRoute</p> </div> <div class="listingblock"> <div class="title">apisix-whoami.yml</div> <div class="content"> <pre class="prettyprint highlight"><code>apiVersion: apisix.apache.org/v2 kind: ApisixRoute metadata: name: apisix-whoami-route namespace: default spec: http: - name: route-1 match: paths: - /v1/* backends: - serviceName: whoami-service servicePort: http</code></pre> </div> </div> <div class="paragraph"> <p>(Fijate que el paths lo hemos cambiado a /v1)</p> </div> <div class="paragraph"> <p>y lo aplicamos <code>kubectl apply -f apisix-whoami.yml</code></p> </div> <div class="paragraph"> <p>Si ahora intentamos acceder a la aplicación veremos que no está disponible</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>curl localhost:8881/sigo/vivo {"error_msg":"404 Route Not Found"}</code></pre> </div> </div> <div class="paragraph"> <p>(Fíjate que el body de respuesta ha cambiado porque ahora es el Apisix el que lo está devolviendo)</p> </div> <div class="paragraph"> <p>Pero sin embargo tenemos a monolito escuchando en /v1</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>curl localhost:8881/v1/sigo/vivo Hostname: whoami-deployment-5d4fc76b57-2h8pl IP: 127.0.0.1 IP: ::1 IP: 10.42.0.9 IP: fe80::6cc5:9aff:fe51:9a19 RemoteAddr: 10.42.0.19:42206 GET /v1/sigo/vivo HTTP/1.1 Host: localhost:8881 User-Agent: curl/7.81.0 Accept: */* Accept-Encoding: gzip X-Forwarded-For: 10.42.0.1, 10.42.0.8 X-Forwarded-Host: localhost:8881 X-Forwarded-Port: 8881 X-Forwarded-Proto: http X-Forwarded-Server: traefik-7cd4fcff68-9ksw7 X-Real-Ip: 10.42.0.8</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="disclaimer">Disclaimer</h2> <div class="sectionbody"> <div class="paragraph"> <p>Obviamente este post es a modo de primeros pasos con Apisix y no pretende cubrir todos los aspectos del mismo. De hecho me faltan todavía muchos conocimientos y cosas a probar</p> </div> <div class="paragraph"> <p>Sin embargo, a diferencia de otros post que encontrarás en Internet, está enfocado totalmente a kubernetes mientras que casi todos los que he encontrado lo hacen usando Docker</p> </div> </div> </div> Probando a desplegar apisix en kubernetes Creando mapas con Notion y Github Jorge Aguilera 2023-03-12T00:00:00Z https://blog.jagedn.dev/blog/2023/notion-maps.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>"Notion es un software de gestión de proyectos y para tomar notas"</p> </div> <div class="paragraph"> <p>Continuando con la "serie" de post sobre Notion y aprovechando que un amigo ha publicado un componente web para crear maps usando LeafLet de forma realmente fácil voy a contar en este post cómo podemos usar Notion como backend para geolocalizar puntos y hacer que Github publique un mapa con ellos</p> </div> <div class="paragraph"> <p>En este post no voy a volver a contar cómo crearse cuenta o cómo crear una integración. Para ello te remito a los otros post del blog donde (espero) se explica. Así que para este post partimos de que tenemos una cuenta <strong>free</strong> en Notion y que hemos creado una integración</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Al final del post pongo un enlace al proyecto ejemplo que te puedes clonar para no tener que picarte el código</p> </dd> </dl> </div> <div class="paragraph"> <p>Aprovechando las capacidades de Notion de que cada página es una "base de datos" vamos a crear una donde vamos a crear las siguientes columnas:</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 50%;"> <col style="width: 50%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Name</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">String</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Presentación</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">String</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">GoogleMap</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">URL</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>y vamos a añadir algunas entradas:</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 25%;"> <col style="width: 25%;"> <col style="width: 25%;"> <col style="width: 25%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Madrid</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">1969</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Donde todo empezó</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><a href="https://www.google.com/maps/place/C.+Pescara,+28032+Madrid/@40.4253096,-3.6319141,14z/data=!4m5!3m4!1s0xd4225809d6376ef:0xbd6238a7e387bba!8m2!3d40.4152972!4d-3.6246032" class="bare">https://www.google.com/maps/place/C.+Pescara,+28032+Madrid/@40.4253096,-3.6319141,14z/data=!4m5!3m4!1s0xd4225809d6376ef:0xbd6238a7e387bba!8m2!3d40.4152972!4d-3.6246032</a></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Costa Rica</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">1999</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Primer viaje al extranjero</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><a href="https://www.google.com/maps/place/Tortuguero,+Lim%C3%B3n+Province,+Costa+Rica/@10.5445739,-83.5075092,16z/data=!3m1!4b1!4m5!3m4!1s0x8fa7560928a2e741:0x7b7e58e66658b6eb!8m2!3d10.5424838!4d-83.5023552" class="bare">https://www.google.com/maps/place/Tortuguero,+Lim%C3%B3n+Province,+Costa+Rica/@10.5445739,-83.5075092,16z/data=!3m1!4b1!4m5!3m4!1s0x8fa7560928a2e741:0x7b7e58e66658b6eb!8m2!3d10.5424838!4d-83.5023552</a></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Nepal</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">2004</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Nepal y Tibet, un viaje a otro universo</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><a href="https://www.google.com/maps/place/Kathmandu+44600,+Nepal/@27.7090319,85.2911134,13z/data=!3m1!4b1!4m13!1m7!3m6!1s0x3995e8c77d2e68cf:0x34a29abcd0cc86de!2sNepal!3b1!8m2!3d28.394857!4d84.124008!3m4!1s0x39eb198a307baabf:0xb5137c1bf18db1ea!8m2!3d27.7169653!4d85.3239441" class="bare">https://www.google.com/maps/place/Kathmandu+44600,+Nepal/@27.7090319,85.2911134,13z/data=!3m1!4b1!4m13!1m7!3m6!1s0x3995e8c77d2e68cf:0x34a29abcd0cc86de!2sNepal!3b1!8m2!3d28.394857!4d84.124008!3m4!1s0x39eb198a307baabf:0xb5137c1bf18db1ea!8m2!3d27.7169653!4d85.3239441</a></p></td> </tr> </tbody> </table> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Como puedes ver la idea es añadir tantos lugares como queramos, poner una descripcion y una url copiada directamente desde GoogleMaps la cual parsearemos para extraer las coordenadas. Esta es una de las <strong>gracias</strong> de este script, facilitar el añadir entradas sin tener que estar buscando las posiciones, sino usar una url donde aparezcan</p> </dd> </dl> </div> <div class="paragraph"> <p>Como ya expliqué en los post relativos a Notion, esta base de datos tiene un identificador que puedes ver en la propia URL de Notion y que usaremos para extraer la información desde Github</p> </div> </div> </div> <div class="sect1"> <h2 id="github">Github</h2> <div class="sectionbody"> <div class="paragraph"> <p>Vamos a usar un repositorio de Github para ejecutar un script que extraerá la información desde Notion y generará una página HTML+JS con un mapa mundi. Aprovecharemos la funcionalidad de Github pages para publicarlo en Internet.</p> </div> <div class="ulist"> <ul> <li> <p>Crearemos un repositorio, por ejemplo, "mis-andanzas"</p> </li> <li> <p>En settings añadiremos dos secrets:</p> <div class="ulist"> <ul> <li> <p>DATABASE, con el ID de nuestra página de Notion</p> </li> <li> <p>NOTION_TOKEN, con el token que nos proporció Notion a la hora de crear nuestra integration</p> </li> </ul> </div> </li> <li> <p>En settings configuraremos "Pages" indicando que el source será un Github Actions (no lo crees, ya te paso el código yo)</p> </li> </ul> </div> <div class="paragraph"> <p>Con esto tenemos preparado el repositorio Github (recuerda que al final del post te paso un enlace para que te lo clones si no quieres hacerlo desde cero)</p> </div> </div> </div> <div class="sect1"> <h2 id="script">Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>El script en sí es muy sencillo. Simplemente usará las librerías JS de notion para conectarse a la página de Notion y volcar en un fichero ".js" las filas como si fueran puntos de un mapa usando el formato GeoJSON. Como ya he comentado, la gracia del script es que parsea las URLs de GoogleMap para hacerlo más cómodo.</p> </div> <div class="listingblock"> <div class="title">notion2map.js</div> <div class="content"> <pre class="prettyprint highlight"><code>const { Client } = require("@notionhq/client"); const { env } = require('process'); require('dotenv').config(); // Initializing a client const notion = new Client({ auth: process.env.NOTION_TOKEN, }) const myPage = await notion.databases.query({ database_id: process.env.DATABASE }); ... myPage.results.forEach(i =&gt; { ... const title = i.properties['Name']; if (title.title.length == 0) return; const name = title.title[0].plain_text; const url = i.properties['GoogleMap'].url; const presentation = i.properties['Presentation'].rich_text.map(m =&gt; m.plain_text).join(' '); const coordinates = googlemapExpr.exec(url); const lat = coordinates[1]; const lng = coordinates[2]; ... fs.appendFileSync(GEO_FILE, `{ type: "Feature", geometry: { type: "Point", coordinates: [${lng}, ${lat}] ...</code></pre> </div> </div> <div class="paragraph"> <p>El script completo lo puedes ver en <a href="https://github.com/jagedn/mis-andanzas/blob/main/notion2map.js" class="bare">https://github.com/jagedn/mis-andanzas/blob/main/notion2map.js</a></p> </div> <div class="paragraph"> <p>Simplemente generamos un fichero Javascript "creado al vuelo" que contiene un array con los puntos</p> </div> </div> </div> <div class="sect1"> <h2 id="web_component">Web Component</h2> <div class="sectionbody"> <div class="paragraph"> <p>Miguel Pagola, <a href="https://github.com/migupl" class="bare">https://github.com/migupl</a>, se ha creado un componente web para generar mapas de forma muy simple, <a href="https://github.com/migupl/vanilla-js-web-component-leaflet-geojson" class="bare">https://github.com/migupl/vanilla-js-web-component-leaflet-geojson</a>, y muy bien documentado así que lo vamos a usarlo como "plantilla" para nuestro mapa, en lugar de complicarnos con los objetos de LeafLeft</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>&lt;html&gt; &lt;head&gt; ... &lt;script type="module" src="https://migupl.github.io/vanilla-js-web-component-leaflet-geojson/components/leaflet-map-component/leaflet-map.js"&gt;&lt;/script&gt; &lt;script src="data.js"&gt;&lt;/script&gt; ... &lt;body&gt; &lt;header&gt; &lt;div class="container"&gt; &lt;h1&gt;Mis Andanzas&lt;/h1&gt; &lt;/div&gt; &lt;/header&gt; &lt;section id="setting-up"&gt; &lt;leaflet-map id="notion-map" fitToBounds="true" flyToBounds="true"&gt;&lt;/leaflet-map&gt; &lt;/section&gt; &lt;/body&gt; &lt;script&gt; window.onload = (event) =&gt; { const map = document.getElementById('notion-map'); const eventBus = map.eventBus; eventBus.dispatch('x-leaflet-map-geojson-add', { leafletMap: map, geojson: features }); } &lt;/script&gt;</code></pre> </div> </div> <div class="paragraph"> <p>Simplemente cargamos su javascript junto con el generado por el script y una vez que se carga la página, le indicamos que nos muestre los puntos.</p> </div> <div class="paragraph"> <p><strong>No te tienes que preocupar por centrar el mapa, indicar zoom por defecto, ni nada parecido!!!</strong></p> </div> </div> </div> <div class="sect1"> <h2 id="github_action">Github Action</h2> <div class="sectionbody"> <div class="paragraph"> <p>Para terminar crearemos un github action ("static.yml" en mi proyecto) que ejecute el script y genere las páginas.</p> </div> <div class="paragraph"> <p>Para publicarlas usaremos un action disponible al que le dices la ruta que quieres publicar y Github las publica</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>jobs: # Single deploy job since we're just deploying deploy: environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} env: NOTION_TOKEN: ${{ secrets.NOTION_TOKEN }} DATABASE: ${{ secrets.DATABASE }} runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v3 - name: Setup Pages uses: actions/configure-pages@v3 - name: Use Node.js uses: actions/setup-node@v3 with: node-version: 14.21.3 - run: npm install - run: npm run generate - name: Upload artifact uses: actions/upload-pages-artifact@v1 with: # Upload entire repository path: 'docs' - name: Deploy to GitHub Pages id: deployment uses: actions/deploy-pages@v1</code></pre> </div> </div> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>Recuerda NO usar los tokens en claro en tus actions, sino usar secrets</p> </dd> </dl> </div> <div class="paragraph"> <p>Una vez ejecutado el pipeline Github publicará una página accesible desde Internet como</p> </div> <div class="paragraph"> <p><a href="https://jagedn.github.io/mis-andanzas/" class="bare">https://jagedn.github.io/mis-andanzas/</a></p> </div> </div> </div> <div class="sect1"> <h2 id="todo">TODO!!!</h2> <div class="sectionbody"> <div class="paragraph"> <p>Queda pendiente para próximas versiones algunas ideas que me han planteado/surgido:</p> </div> <div class="ulist"> <ul> <li> <p>Añadir imágenes en el tooltip</p> </li> <li> <p>Poder crear rutas en lugar de puntos sueltos</p> </li> <li> <p>&#8230;&#8203;</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="proyecto">Proyecto</h2> <div class="sectionbody"> <div class="paragraph"> <p>El proyecto está publicado en <a href="https://github.com/jagedn/mis-andanzas" class="bare">https://github.com/jagedn/mis-andanzas</a> y te lo puedes "forkear" o clonar y modificar a tu gusto. Si te fijas, los tokens y secretos están ocultos con lo que tu información está protegida</p> </div> </div> </div> creando un mapa mundicon Notion y Github Publicar en Linkedin con Groovy Jorge Aguilera 2023-02-14T00:00:00Z https://blog.jagedn.dev/blog/2023/groovy-linkedin.html <div id="preamble"> <div class="sectionbody"> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Si no has leído el articulo anterior sobre publicar en Linkedin usando Gmail, te animo a que lo hagas para tener más contexto</p> </dd> </dl> </div> <div class="paragraph"> <p>Linkedin, la plataforma del postureo, tiene un API que puedes usar, entre otras cosas, para publicar textos, artículos, imágenes, etc de tal forma que puedes usar herramientas externas o incluso hacerte tu propia integración. En este post vamos a investigar cómo podemos publicar en esta red usando un script en Groovy que podemos planificar</p> </div> <div class="paragraph"> <p>En concreto vamos a ver cómo publicar diariamente la efeméride del CalendarioCientificoEscolar (del cual ya he hablado en alguna otra entrada del blog)</p> </div> </div> </div> <div class="sect1"> <h2 id="requisitos">Requisitos</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Cuenta en Linkedin</p> </li> <li> <p>Groovy (y Java) instalados</p> </li> <li> <p>Un token de Linkedin (ver el post "Publicar en Linkedin desde Gmail" para saber cómo obtenerlo)</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="idea">Idea</h2> <div class="sectionbody"> <div class="paragraph"> <p>El CalendarioCientificoEscolar es un proyecto open source que mantiene en una serie de ficheros CSV una efemeride por día, con textos en diferentes idiomas y una imagen para cada una. La idea es parsear este fichero, buscar la efemeride del día asi como la imagen asociada y publicarlo en Linkedin usando un script un Groovy</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>En el blog ya he comentado en alguna entrada sobre este proyecto por si quieres conocer más de él</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="script">Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Este es el script a ejecutar. A continuación comentaré las partes más importantes</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="groovy">@Grab('io.github.http-builder-ng:http-builder-ng-core:1.0.4') @Grab(group='javax.mail', module='mail', version='1.4.7') import static groovyx.net.http.MultipartContent.multipart import static groovyx.net.http.HttpBuilder.configure import static groovyx.net.http.ContentTypes.JSON import groovyx.net.http.CoreEncoders import groovyx.net.http.* import static java.util.Calendar.* year = args.length &gt; 0 ? args[0] as int : new Date()[YEAR] month = args.length &gt; 1 ? args[1] as int : new Date()[MONTH]+1 day = args.length &gt; 2 ? args[2] as int : new Date()[DAY_OF_MONTH] println "Processing $year/$month/$day" author=System.getenv("LINKEDIN_USER") accessToken=System.getenv("LINKEDIN_TOKEN") if( !author || !accessToken ){ println "Necesito la configuracion de telegram" return } http = configure{ request.uri = "https://api.linkedin.com" request.contentType = JSON[0] request.headers['Authorization'] = "Bearer $accessToken" request.headers['X-Restli-Protocol-Version'] = '2.0.0' } html = "" img = "" ['es':'🇪🇸', 'en':'🏴󠁧󠁢󠁥󠁮󠁧󠁿', 'fra':'☫', 'arab':'🇸🇦', 'pt':'🇵🇹', 'gal':'🐙', 'astu':'🐮', 'eus':'🪨', 'cat':'🌊', 'arag':'⛰️', // 'epo':'🌍', ].each{ kv -&gt; String lang = kv.key String emoji = kv.value String[]found if( new File("source/csv/${year}/${lang}.tsv").exists() ){ new File("source/csv/${year}/${lang}.tsv").withReader{ reader -&gt; reader.readLine() String line while( (line=reader.readLine()) != null){ def fields = line.split('\t') if( fields.length != 5) continue if( fields[0] as int == day &amp;&amp; fields[1] as int == month &amp;&amp; fields[2] as int == year){ found = fields break } } } } if(!found){ println "not found $year/$month/$day" return } String title= found[4].split('\\.').first() String body= found[4].split('\\.').drop(1).join(' ') if( !img ){ img = "https://calendario-cientifico-escolar.gitlab.io/_/images/${year}/${found[3]}.png" } html +=""" $emoji $title $body """ } html += """ Fuente: Calendario Cientifico Escolar, https://t.me/CalendarioCientifico """ json = http.post{ request.uri.path = "/v2/assets" request.uri.query = ["action":"registerUpload"] request.body = [ "registerUploadRequest": [ "recipes": [ "urn:li:digitalmediaRecipe:feedshare-image" ], "owner": "urn:li:person:"+author, "serviceRelationships": [ [ "relationshipType": "OWNER", "identifier": "urn:li:userGeneratedContent" ] ], "supportedUploadMechanism":[ "SYNCHRONOUS_UPLOAD" ] ] ] } uploadUrl = json.value.uploadMechanism["com.linkedin.digitalmedia.uploading.MediaUploadHttpRequest"].uploadUrl someFile = File.createTempFile("img","png") someFile.bytes = img.toURL().bytes configure{ request.uri = uploadUrl request.contentType = 'image/png' request.headers['Authorization'] = "Bearer $accessToken" request.headers['X-Restli-Protocol-Version'] = '2.0.0' request.headers['Accept']='*/*' request.body = someFile request.encoder('image/png'){ ChainedHttpConfig config, ToServer req-&gt; req.toServer(new ByteArrayInputStream(someFile.bytes)) } }.put() post = [ "author": "urn:li:person:"+author, "lifecycleState":'PUBLISHED', "visibility": [ "com.linkedin.ugc.MemberNetworkVisibility":'PUBLIC' ], "specificContent":[ "com.linkedin.ugc.ShareContent":[ "shareCommentary":[ "text": html ], "shareMediaCategory" : "IMAGE", "media":[ [status:'READY',media: json.value.asset] ] ] ] ] http.post{ request.uri.path = "/v2/ugcPosts" request.body = post }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="calendario">Calendario</h2> <div class="sectionbody"> <div class="paragraph"> <p>Como he comentado el calendario se compone de varios ficheros cada uno con una efemeride en un idioma. Lo que hacemos es crear un mapa con los idiomas disponibles e ir concatenando en una cadena los diferentes textos. Cada idioma será un párrafo con un emoji al inicio:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>['es':'🇪🇸', 'en':'🏴󠁧󠁢󠁥󠁮󠁧󠁿', 'fra':'☫', 'arab':'🇸🇦', 'pt':'🇵🇹', 'gal':'🐙', 'astu':'🐮', 'eus':'🪨', 'cat':'🌊', 'arag':'⛰️', // 'epo':'🌍', ].each{ kv -&gt; String lang = kv.key String emoji = kv.value String[]found if( new File("source/csv/${year}/${lang}.tsv").exists() ){ new File("source/csv/${year}/${lang}.tsv").withReader{ reader -&gt; ... html +=""" $emoji $title $body """ }</code></pre> </div> </div> <div class="paragraph"> <p>Básicamente una vez ejecutado el bucle tenemos una cadena con el texto que queremos publicar.</p> </div> </div> </div> <div class="sect1"> <h2 id="librerías">Librerías</h2> <div class="sectionbody"> <div class="paragraph"> <p>Las dos primeras lineas del script nos sirven para indicar las dependencias que tiene el mismo. En este caso uso un proyecto <code>http-ng-builder</code> que me encanta aunque ya está abandonado (creo) y la librería standard de javax mail para poder subir la imagen.</p> </div> </div> </div> <div class="sect1"> <h2 id="linkedin">Linkedin</h2> <div class="sectionbody"> <div class="paragraph"> <p>Este proyecto nos proporciona un DSL muy intuitivo para interactuar con servicios remotos.</p> </div> <div class="ulist"> <ul> <li> <p>Preparamos un objeto <code>http</code> con el token de acceso:</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>http = configure{ request.uri = "https://api.linkedin.com" request.contentType = JSON[0] request.headers['Authorization'] = "Bearer $accessToken" request.headers['X-Restli-Protocol-Version'] = '2.0.0' }</code></pre> </div> </div> <div class="ulist"> <ul> <li> <p>Le decimos a Linkedin que queremos subir una imagen:</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>json = http.post{ request.uri.path = "/v2/assets" request.uri.query = ["action":"registerUpload"] request.body = [ "registerUploadRequest": [ "recipes": [ "urn:li:digitalmediaRecipe:feedshare-image" ], "owner": "urn:li:person:"+author, "serviceRelationships": [ [ "relationshipType": "OWNER", "identifier": "urn:li:userGeneratedContent" ] ], "supportedUploadMechanism":[ "SYNCHRONOUS_UPLOAD" ] ] ] } uploadUrl = json.value.uploadMechanism["com.linkedin.digitalmedia.uploading.MediaUploadHttpRequest"].uploadUrl</code></pre> </div> </div> <div class="ulist"> <ul> <li> <p>Linkedin nos proporciona una URL (uploadURL) donde subir nuestra imagen mediante el método <code>put</code>:</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>configure{ request.uri = uploadUrl request.contentType = 'image/png' request.headers['Authorization'] = "Bearer $accessToken" request.headers['X-Restli-Protocol-Version'] = '2.0.0' request.headers['Accept']='*/*' request.body = someFile request.encoder('image/png'){ ChainedHttpConfig config, ToServer req-&gt; req.toServer(new ByteArrayInputStream(someFile.bytes)) } }.put()</code></pre> </div> </div> <div class="ulist"> <ul> <li> <p>Publicamos el artículo indicando como atributo el ID de la imagen a adjuntar</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>post = [ "author": "urn:li:person:"+author, "lifecycleState":'PUBLISHED', "visibility": [ "com.linkedin.ugc.MemberNetworkVisibility":'PUBLIC' ], "specificContent":[ "com.linkedin.ugc.ShareContent":[ "shareCommentary":[ "text": html ], "shareMediaCategory" : "IMAGE", "media":[ [status:'READY',media: json.value.asset] ] ] ] ] http.post{ request.uri.path = "/v2/ugcPosts" request.body = post }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="conclusion">Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>Obviamente este script es muy específico para el caso del Calendario pero es muy fácil extraer las partes necesarias para poder crear uno que se adapte a nuestras necesidades y poder publicar en Linkedin de forma desatendida</p> </div> </div> </div> Siguiendo la saga de publicar automáticamente en Linkedin hoy vemos cómo hacerlo con un GroovyScript Onboarding Jorge Aguilera 2023-01-05T00:00:00Z https://blog.jagedn.dev/blog/2023/onboarding.html <div class="paragraph"> <p>Hoy, 5 de enero de hace justo un montón de años (pero que muchos), el vecino me consiguió un trabajillo de un día para poner las frutas escarchadas en los roscones de la pastelería donde él trabajaba.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Obviamente, eran otros tiempos y era en "negro", claro está.</p> </dd> </dl> </div> <div class="paragraph"> <p>Como buen JASP, (si eres de mi quita recordarás la referencia a joven aunque sobradamente preparado), me levanté superpronto y acudí dispuesto a darlo todo</p> </div> <div class="paragraph"> <p>"Aquí coges los roscones, aquí está la fruta y los metes en estas cajas. Los vas apilando aquí. No te entretengas que hay mucho currele" fue mi onboarding. Tal cual me dio las instrucciones, tal cual se fué a despachar</p> </div> <div class="paragraph"> <p>Pinpan pinpan fui sacando roscones a toda mecha como buen becario aplicado (admito que alguna frutilla caía en mi boca durante el proceso)</p> </div> <div class="paragraph"> <p>A media mañana, el pastelero con cara satisfecha y clientela casi despachada entro a supervisar la faena</p> </div> <div class="paragraph"> <p>Quiero recordar su cara enrojecida, pero sería mentir, mis recuerdos no llegan a tanto, pero sí recuerdo cuando me gritó</p> </div> <div class="paragraph"> <p>"pero qué estás haciendo????? En las de cuarto solo tienes que poner 4 frutillas y en las de medio 6!!!!!!" (Cifras inventadas porque no me acuerdo ya)</p> </div> <div class="paragraph"> <p>Sin niguna instrucción previa y simplemente usando mi intuición de lo que a mí me gustaría ver en un roscón había puesto frutitas a discreción.</p> </div> <div class="paragraph"> <p>Su cabreo y desesperación fue en aumento según abría cajas y veía que me había aplicado a conciencia.</p> </div> <div class="paragraph"> <p>Creo recordar que aún así, al terminar el día, me pagó lo que le había dicho a mi madre que me daría.</p> </div> <div class="paragraph"> <p>#onboarding</p> </div> Una anecdota #AbueloCebolleta acerca del onboarding Rutas por Madrid Jorge Aguilera 2022-12-30T00:00:00Z https://blog.jagedn.dev/blog/2022/rutas-por-madrid.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>RutasPorMadrid es una publicación cuasi-semanal de rutas aleatorias visitando edificios y monumentos de la ciudad (<a href="https://blog.rutas-por-madrid.es" class="bare">https://blog.rutas-por-madrid.es</a>)</p> </div> <div class="paragraph"> <p>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.</p> </div> <div class="paragraph"> <p>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í)</p> </div> <div class="paragraph"> <p>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.</p> </div> <div class="paragraph"> <p>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.</p> </div> <div class="paragraph"> <p>También aprendí, por ejemplo, que existe un formato GeoJSON definido por el W3C donde puedes especificar elementos (lineas, puntos, polígonos, &#8230;&#8203;) geo posicionados, etc</p> </div> <div class="paragraph"> <p>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</p> </div> <div class="paragraph"> <p>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.</p> </div> <div class="paragraph"> <p>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</p> </div> <div class="paragraph"> <p>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"</p> </div> <div class="paragraph"> <p>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)</p> </div> <div class="paragraph"> <p>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.</p> </div> <div class="paragraph"> <p>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</p> </div> <div class="paragraph"> <p>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)</p> </div> <div class="paragraph"> <p>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</p> </div> <div class="paragraph"> <p>Pero &#8230;&#8203; para crear la cuenta me piden un correo electrónico (obvio) y hombre, no era cuestión de usar el mío, así que &#8230;&#8203; efectivamente, registré el <code>dominio rutas-por-madrid.es</code>. Lo bueno es que era una oferta por unos pocos euros y encima con cuenta de correo incluida</p> </div> <div class="paragraph"> <p>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)</p> </div> <div class="paragraph"> <p>Así que bueno, más o menos todo automatizado desmenuzo las partes a continuación</p> </div> </div> </div> <div class="sect1"> <h2 id="stack_tecnológico">Stack tecnológico</h2> <div class="sectionbody"> <div class="paragraph"> <p>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</p> </div> <div class="paragraph"> <p>Para generar el mapa estático he usado un proyecto (<a href="https://github.com/flopp/go-staticmaps.git" class="bare">https://github.com/flopp/go-staticmaps.git</a>) que mediante comando de consola le puedes indicar todos los elementos y te crea un PNG</p> </div> <div class="paragraph"> <p>Para generar el pdf uso una utilidad de asciidoctor, <code>asciidoctor-web-pdf</code></p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>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í</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="choose">Choose</h2> <div class="sectionbody"> <div class="paragraph"> <p>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</p> </div> <div class="paragraph"> <p>El id elegido se guarda en un fichero <code>current.txt</code> y así es más fácil pasarselo al resto de procesos</p> </div> </div> </div> <div class="sect1"> <h2 id="build">Build</h2> <div class="sectionbody"> <div class="paragraph"> <p>La etapa de build es la que construye los diferentes artefactos a desplegar:</p> </div> <div class="sect2"> <h3 id="build_pdf">Build Pdf</h3> <div class="paragraph"> <p>Construir el Pdf lee la ruta elegida anteriormente, y usando un template construye el fichero asciidoctor que espera asciidoctor-web-pdf</p> </div> </div> <div class="sect2"> <h3 id="build_blog">Build Blog</h3> <div class="paragraph"> <p>Usando la misma técnica que en el Pdf creo una entrada markdown de Hugo</p> </div> </div> <div class="sect2"> <h3 id="build_map">Build Map</h3> <div class="paragraph"> <p>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</p> </div> </div> <div class="sect2"> <h3 id="build_letter">Build Letter</h3> <div class="paragraph"> <p>Así mismo preparo un html formateado para ser enviado por correo electrónico. Como TimyLetter no deja muchas florituras, el html es muy espartano</p> </div> </div> <div class="sect2"> <h3 id="build_telegram">Build Telegram</h3> <div class="paragraph"> <p>Por último un groovy script crea otro groovy script personalizado con la ruta listo para postear en Telegram</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="deploy">Deploy</h2> <div class="sectionbody"> <div class="paragraph"> <p>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</p> </div> </div> </div> <div class="sect1"> <h2 id="publish">Publish</h2> <div class="sectionbody"> <div class="paragraph"> <p>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)</p> </div> </div> </div> <div class="sect1"> <h2 id="notify">Notify</h2> <div class="sectionbody"> <div class="paragraph"> <p>En realidad, este no existe todavia y es el paso más manual que tengo.</p> </div> <div class="paragraph"> <p>Un script envia el html a TinyLetter y a la vez que confirmo que se publique, ejecuto el script que postea en Telegram</p> </div> </div> </div> <div class="sect1"> <h2 id="repo">Repo</h2> <div class="sectionbody"> <div class="paragraph"> <p>Todo el codigo así como el contenido del blog puedes consultarlo en <a href="https://gitlab.com/jorge-aguilera/rutas-por-madrid" class="bare">https://gitlab.com/jorge-aguilera/rutas-por-madrid</a></p> </div> </div> </div> Una ruta aleatoria por Madrid cada semana Changelog con Notion Jorge Aguilera 2022-12-12T00:00:00Z https://blog.jagedn.dev/blog/2022/notion-changelog.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>"Notion es un software de gestión de proyectos y para tomar notas"</p> </div> <div class="paragraph"> <p>En realidad Notion es un poco más que lo que dice su descripción oficial y se ha vuelto muy popular entre las empresas (y a nivel personal) para mantener la documentación corporativa.</p> </div> <div class="paragraph"> <p>Puedes crear páginas, organizarlas en árbol, tiene muchos emojis (demasiados) disponibles, bases de datos por páginas donde puedes estructurar tus datos como quieras y la página asociada los renderiza, etc.</p> </div> <div class="paragraph"> <p>En este post lo que voy a utilizar es la posibilidad de poder alimentar una base de datos de Notion para que muestre el changelog (el historial de commits) de un repo git</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>El concepto de base de datos de Notion es un poco diferente del tradicional (hasta donde he entendido). La idea es que puedes crear "bases de datos" y renderizar páginas usando los datos de la misma. De esta forma lo que tienes son muchas bases de datos diferentes, cada una asociada a una "sección", y en la que puedes guardar diferente contenido (textos, fechas, enlaces, etc) y crear páginas hijas</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="preparación">Preparación</h2> <div class="sectionbody"> <div class="paragraph"> <p>Como en el post <a href="notion-krokio.html">anterior</a> en primer lugar necesitamos crear una connection (obtener un token)</p> </div> <div class="paragraph"> <p>Para este caso además crearemos una base de datos en lugar de una página y le daremos permisos al connection.</p> </div> <div class="paragraph"> <p>Notion crea la base de datos con un par de campos por defecto. Nosotros vamos a usar:</p> </div> <div class="ulist"> <ul> <li> <p>Name (title)</p> </li> <li> <p>Created (date)</p> </li> <li> <p>Description (string)</p> </li> </ul> </div> <div class="imageblock"> <div class="content"> <img src="/images/2022/notion-bbdd-1.png" alt="notion bbdd 1"> </div> </div> </div> </div> <div class="sect1"> <h2 id="repositorio_git">Repositorio Git</h2> <div class="sectionbody"> <div class="paragraph"> <p>La idea es que tendremos un repositorio git en el que iremos subiendo cambios y cada cierto tiempo generaremos una release. Las buenas prácticas lo que nos dicen es que al generar la release creemos un <code>tag</code> de tal forma que se pueda saber qué código corresponde con cada release.</p> </div> <div class="paragraph"> <p>Así por ejemplo en un momento dado el historial de nuestro repo sería:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>$ git log --oneline f82c632 (HEAD -&gt; master) tres 270b4c9 dos cd4ed0b (tag: v0.0.1) commit 1</code></pre> </div> </div> <div class="paragraph"> <p>En este log vemos que tenemos 3 commits (ya, ya, pero es un ejemplo). El primero lo etiquetamos como release <code>v0.0.1</code> y ahora tenemos 2 cambios más y vamos a generar release <code>v0.0.2</code></p> </div> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>El nombre de los tags para este script le da igual pero es buena práctica seguir una nomenclatura semver</p> </dd> </dl> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>$ git tag -a v0.0.2 -m "esta es la release v0.0.2 con dos cambios"</code></pre> </div> </div> <div class="paragraph"> <p>Con lo que ahora tenemos master etiquetado como <code>v0.0.2</code></p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>$ git log --oneline f82c632 (HEAD -&gt; master, tag: v0.0.2) tres 270b4c9 dos cd4ed0b (tag: v0.0.1) commit 1</code></pre> </div> </div> <div class="paragraph"> <p>La idea sería tener una página de Notion asociada a nuestro repositorio donde poder ver de un vistazo que <code>v0.0.2</code> fue creada en una fecha, la descripcion con la que se creó así como una lista con los commits que se incluyeron (en nuestro ejemplo serían <code>270b4c9 dos</code> y <code>f82c632 tres</code>)</p> </div> </div> </div> <div class="sect1"> <h2 id="notion">Notion</h2> <div class="sectionbody"> <div class="paragraph"> <p>Una vez que ejecutemos el script nuestra página se actualizará automaticamente como en las imágenes siguientes</p> </div> <div class="paragraph"> <p>(La presentación se puede/debe mejorar pero se deja al lector como ejercicio ;) )</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2022/notion-bbdd-2.png" alt="notion bbdd 2"> </div> </div> <div class="imageblock"> <div class="content"> <img src="/images/2022/notion-bbdd-3.png" alt="notion bbdd 3"> </div> </div> </div> </div> <div class="sect1"> <h2 id="script">Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>El script ejecuta un par de comandos de git para obtener el historial y detalles de los commits realizados en el repo y simplemente usa el api de Notion para crear páginas hijas asociadas a la bbdd que se le configure</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>const fs = require('fs'); const path = require('path'); const {Client} = require("@notionhq/client") const {execSync} = require("child_process"); const process = require("process"); // Initializing a client require('dotenv').config(); ;(async () =&gt; { // tag list const tagsStr = execSync( "git tag -l --sort=-creatordate --format='%(refname:short)'",{ cwd: process.env.REPO_DIR }).toString(); const tags = tagsStr.split('\n') const last = tags[0] const prev = tags[1] // last tag history const history = execSync( `git log '${last}'...'${prev}' --pretty=format:"%cs%x09%s%x09%h"`,{ cwd: process.env.REPO_DIR }).toString().split('\n').slice(0, 30); // tag message const messageStr = execSync( `git tag -l --format='%(contents) | %(taggerdate:short) | %(creatordate:short)' ${last}`,{ cwd: process.env.REPO_DIR }).toString().replace(/(\r\n|\n|\r)/gm,'').split('|') const tagMsg = messageStr[0]; const tagDate = (messageStr[1].trim() != 0 ? messageStr[1].trim() : messageStr[2].trim() != 0 ? messageStr[2].trim() : '2001-01-01'); const blocks = [] for(h of history){ blocks.push({ "type": "paragraph", "paragraph": { "rich_text": [{ "type": "text", "text": { "content": `\n- ${h}\n`, "link": null } }] } }) } const payload = { parent: {type: "database_id", database_id: process.env.DB_ID}, properties: { Name: {type: "title", title: [{type: "text", text: {content: tags[0]}}]}, Created: {type: "date", date: {start: tagDate}}, Description: {rich_text: [{text: {content: tagMsg,},},],}, }, children: blocks } const notion = new Client({ auth: process.env.NOTION_TOKEN, }) const newpage = await notion.pages.create(payload); console.log(newpage) })()</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="conclusión">Conclusión</h2> <div class="sectionbody"> <div class="paragraph"> <p>La presentación de las páginas se pueden mejorar para incluir enlaces, negritas, etc y hacer más legible el changelog pero es un ejercicio interesante como prueba de integración de procesos externos y Notion para generar contenido de forma automática</p> </div> </div> </div> publicando el changelog de un repo en Notion DocAsCode con Notion Jorge Aguilera 2022-12-03T00:00:00Z https://blog.jagedn.dev/blog/2022/notion-krokio.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>"Notion es un software de gestión de proyectos y para tomar notas"</p> </div> <div class="paragraph"> <p>En realidad Notion es un poco más que lo que dice su descripción oficial y se ha vuelto muy popular entre las empresas (y a nivel personal) para mantener la documentación corporativa.</p> </div> <div class="paragraph"> <p>Puedes crear páginas, organizarlas en árbol, tiene muchos emojis (demasiados) disponibles, bases de datos por páginas donde puedes estructurar tus datos como quieras y la página asociada los renderiza, etc.</p> </div> <div class="paragraph"> <p>Sin embargo, lo mismo que pasaba con Confluence, la mayoría de nosotros lo usa a través de la interfaz web y acabamos teniendo mil páginas desactualizadas.</p> </div> <div class="paragraph"> <p>Siguiendo la propuesta de DocAsCode, donde la documentación deberíamos tratarla como el código (versionado, con revisiones y despliegues automatizados) y aprovechando que Notion tiene una API sencillo he desarrollado un pequeño script para mantener mi repositorio git, donde tengo los diagramas de arquitectura del proyecto, actualizado en Notion.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>Lo he desarrollado en javascript, porque sí, porque puedo</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="idea">Idea</h2> <div class="sectionbody"> <div class="paragraph"> <p>Lo típico en todos los proyectos (con suerte) es crear una página en Notion (antes se hacía en Confluence, y antes en un Wiki, y previamente en una carpeta compartida) donde describimos la arquitectura del proyecto, incluimos algún diagrama generado con alguna herramienta como Draw.io y con mucha suerte incluimos el enlace al código del diagrama en lugar de insertar el PNG generado, (pero esto es con mucha suerte. El 99.9999% de los casos incluimos el PNG porque claro, "la arquitectura no va a cambiar")</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Por otra parte, no niego la facilidad de uso y potencia que ofrece Notion para otro tipo de comunicaciones</p> </dd> </dl> </div> <div class="paragraph"> <p>Así la idea es tener una página de Notion "Arquitectura" y un repositorio git donde tendré mis diagramas C4 junto con explicaciones a los mismos. Cada vez que actualize el repo (tal vez mergeando en master, tal vez cada commit) un pipeline ejecutará mi script y reconstruirá la página con la última versión extraída del repo.</p> </div> <div class="paragraph"> <p>Quiero poder tener una estructura de carpetas y sub carpetas en mi repo de tal forma que se replique en Notion colgando de la página "Arquitectura"</p> </div> </div> </div> <div class="sect1"> <h2 id="preparación">Preparación</h2> <div class="sectionbody"> <div class="paragraph"> <p>En primer lugar, debemos tener un espacio ya creado en Notion (obvio) así como una página "master" de donde colgaremos las generadas. Esta página puede ser una principal o una hija. Así mismo, esta página puede contener el texto explicativo que queramos, pues el script lo que va a hacer es eliminar las hijas y recrearlas (así que no deberías crear hijas, pues el script las va a borrar)</p> </div> <div class="paragraph"> <p>En segundo lugar, necesitamos crear una "conection". Esto lo tiene que hacer el owner del espacio y básicamente es generar una aplicación privada y Notion nos devolverá un token a usar.</p> </div> <div class="paragraph"> <p>Una vez que tienes la "connection" hay que darle permisos para poder acceder a la página "master" (usando los tres puntitos arriba a la derecha)</p> </div> </div> </div> <div class="sect1"> <h2 id="repositorio">Repositorio</h2> <div class="sectionbody"> <div class="paragraph"> <p>Nuestro repositorio es un repositorio normal, donde puedes tener el código o lo que quieras, y simplemente vamos a usar una carpeta del mismo para tener nuestra documentación y diagramas (como código)</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>Esta versión es muy simple y la documentación la va a subir como texto. No negritas, no italica, no titulos, , quién sabe, tal vez en otra version lo mejore a un parseador de markdown a notion</p> </dd> </dl> </div> <div class="paragraph"> <p>Por ejemplo:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>|_ src |_ main |_ java |_ docs |_ 1.- Context |_ content.txt |_ content.puml |_ 2.- Applications |_ 1.- API |_ content.txt |_ content.puml |_ 2.- Cron |_ content.txt |_ content.puml</code></pre> </div> </div> <div class="paragraph"> <p>En principio el nombre de los ficheros da igual, solo importa que haya uno con una extensión .txt y otro con extension .puml, (pero puedes cambiarlo a tu gusto)</p> </div> <div class="paragraph"> <p>Los ficheros .puml contienen los diagramas en formato texto y casi todos los IDEs tienen un plugin para editarlos y renderizarlos. Por ejemplo Intellij o VsCode los tienen, por lo que puedes ir viendo el diagrama a la vez que los editas</p> </div> <div class="paragraph"> <p>Un ejemplo de un puml</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>@startuml !include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/C4_Context.puml LAYOUT_WITH_LEGEND() Person(pbc, "Customer", "A customer of our application.") System(api, "MyCompany", "Place orders.") System_Ext(es, "Exchange system", "Exchange systems.") System_Ext(nf, "Notifications system", "Notifications system") Rel(pbc, api, "Uses", "REST") Rel(api, es, "Uses") Rel(api, nf, "Uses") Rel(nf, pbc, "Sends notificaions") @enduml</code></pre> </div> </div> <div class="paragraph"> <p>Al ser texto plano es fácil versionarlo, ver las diferencias, crear PR, etc</p> </div> </div> </div> <div class="sect1"> <h2 id="script">Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Por último añadiremos a nuestro repo el siguiente script (en javascript, toma ya)</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>const fs = require('fs'); const path = require('path'); const { Client } = require("@notionhq/client") const pako = require("pako") require('dotenv').config(); // Initializing a client const notion = new Client({ auth: process.env.NOTION_TOKEN, }) async function removeSubPages( id ){ const page = await notion.blocks.children.list({ block_id: id }) const blocks = page.results.filter( (c)=&gt; c.type =='child_page' ).map( (c)=&gt; c.id) for(b of blocks){ console.log(`deleting ${b}`) const deleted = await notion.blocks.delete({ block_id: b }) } } async function processFolder(directory, parentId, title){ console.log(`Processing ${directory}`) const blocks = [] const files = fs.readdirSync(directory) const fcontent = files.filter( (f)=&gt;path.extname(f) ==".txt") const fuml = files.filter( (f)=&gt;path.extname(f)==".puml") if( fcontent.length == 1) { const content = fs.readFileSync(`${directory}/${fcontent[0]}`, { encoding: 'utf8', flag: 'r' }); blocks.push({ "type": "paragraph", "paragraph": { "rich_text": [{ "type": "text", "text": { "content": content, "link": null } }] } }) } if( fuml.length == 1) { const diagramSource = fs.readFileSync(`${directory}/${fuml[0]}`, { encoding: 'utf8', flag: 'r' }); const data = Buffer.from(diagramSource, 'utf8') const compressed = pako.deflate(data, {level: 9}) const result = Buffer.from(compressed) .toString('base64') .replace(/\+/g, '-').replace(/\//g, '_') blocks.push({ "type": "embed", "embed": { "url": "https://kroki.io/plantuml/png/" + result } }) } blocks.push({ "type": "paragraph", "paragraph": { "rich_text": [{ "type": "text", "text": { "content": `\n(No modify this page, it's generated automatically)\n`, "link": null } }] } }) const newpage = await notion.pages.create({ parent: { page_id: parentId }, properties: { title: [{ "text": { "content": title } }] }, children: blocks }) console.log(`Page ${newpage.id} created`) const folders = fs.readdirSync(directory); for( subdir of folders) { if( fs.statSync(`${directory}/${subdir}`).isDirectory() ) await processFolder( `${directory}/${subdir}`, newpage.id, subdir) } } ;(async () =&gt; { // clean page await removeSubPages(process.env.PAGE); const folders = fs.readdirSync('docs') const parentId = process.env.PAGE for( subdir of folders) { if( fs.statSync(`docs/${subdir}`).isDirectory() ) await processFolder( `docs/${subdir}`, parentId, subdir) } })()</code></pre> </div> </div> <div class="paragraph"> <p>Para no incluir el token en el código y así poder versional el script junto con nuestro código, usaremos un fichero <code>.env</code> donde pondremos los siguientes valores:</p> </div> <div class="listingblock"> <div class="title">.env</div> <div class="content"> <pre class="prettyprint highlight"><code>NOTION_TOKEN=secret_nN8Zxxxxxxxxxxxx PAGE=2f188xxxxxxxxxxxxxxxxx</code></pre> </div> </div> <div class="paragraph"> <p>Donde PAGE es la parte final de la url de notion de nuestra página master (los numeros despues del titulo)</p> </div> </div> </div> <div class="sect1"> <h2 id="ejecución">Ejecución</h2> <div class="sectionbody"> <div class="paragraph"> <p>Simplemente, necesitamos hacer un <code>npm install</code> una vez para que se bajen las dependencias y una vez bajadas ejecutaremos</p> </div> <div class="paragraph"> <p><code>node upload2notion.js</code></p> </div> <div class="paragraph"> <p>Si todo va bien verás como las páginas hijas de la master desaparecen (si había) y se van creando las nuevas.</p> </div> <div class="paragraph"> <p>Cada página hija contendrá un texto y/o una imagen (en realidad un enlace al servicio de kroki.io)</p> </div> </div> </div> <div class="sect1"> <h2 id="disclaimer">Disclaimer</h2> <div class="sectionbody"> <div class="paragraph"> <p>NO tengo ni idea de JavaScript asi que el código seguramente sea un atentado a ojos de gente con más experiencia</p> </div> </div> </div> publicando diagramas UML en Notion (gracias a Krokio) Publicar en Linkedin desde Gmail Jorge Aguilera 2022-11-20T00:00:00Z https://blog.jagedn.dev/blog/2022/gmail-linkedin.html <div id="preamble"> <div class="sectionbody"> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>23-11-2022. He actualizado el script de Google para mejorar el parseo del body</p> </dd> <dt class="hdlist1">WARNING</dt> <dd> <p>Para poder publicar en Linkedin necesitarás autentificar tu usuario y obtener un <code>acccess token</code>, una cadena de caracteres que te identifica y que NO debes compartir. NO es tu usuario y passsword (pero casi) y se necesita realizar un flujo "OAuth" para obtenerlo. En este post comparto tanto el código como una aplicación ya desplegada que podrás usar para ello.</p> </dd> </dl> </div> <div class="paragraph"> <p>Linkedin, la plataforma del postureo, tiene un API que puedes usar, entre otras cosas, para publicar textos, artículos, imágenes, etc de tal forma que puedes usar herramientas externas o incluso hacerte tu propia integración. En este post vamos a investigar cómo podemos publicar en esta red desde nuestra cuenta de Google de tal forma que al enviarnos un correo con un subject determinado, Google lo detecte y ejecute un script que publique el cuerpo del correo automáticamente</p> </div> <div class="paragraph"> <p>De esta forma un usuario no necesita entrar en la página de Linkedin y usar el interface que ofrece, sino que puede usar el editor del correo, programarlos, etc y de esta forma no perder el foco en lo que está realizando en ese momento.</p> </div> </div> </div> <div class="sect1"> <h2 id="requisitos">Requisitos</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Cuenta en Linkedin</p> </li> <li> <p>Cuenta Gmail</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="linkedin">Linkedin</h2> <div class="sectionbody"> <div class="paragraph"> <p>Como ya se ha comentado, Linkedin implementa una flujo OAuth para la autentificación del usuario. Esto quiere decir, por una parte, que se requiere de su intervención para generar un token que lo identifique y por otra parte, una aplicación que realize el flujo.</p> </div> <div class="sect2"> <h3 id="crear_la_aplicación">Crear la aplicación</h3> <div class="paragraph"> <p>En primer lugar crearemos una aplicación en <a href="https://developer.linkedin.com/" class="bare">https://developer.linkedin.com/</a></p> </div> <div class="paragraph"> <p>En este enlace puedes encontrar los pasos a realizar de forma detallada</p> </div> <div class="paragraph"> <p><a href="https://guides.micronaut.io/latest/micronaut-oauth2-linkedin-maven-java.html#create-a-linkedin-app" class="bare">https://guides.micronaut.io/latest/micronaut-oauth2-linkedin-maven-java.html#create-a-linkedin-app</a></p> </div> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="Warning"></i> </td> <td class="content"> Esta guía de Micronaut explica cómo usar Linkedin como sistema de autentificación por lo que en Products sólo se configura la parte de "Sign In with LinkedIn" pero nosotros queremos también poder publicar por lo que añadiremos "Share on LinkedIn" </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="identificarse_y_obtener_el_token">Identificarse y obtener el Token</h3> <div class="paragraph"> <p>Una vez realizados los pasos indicados obtendremos un par de claves (ClientId y ClientSecret) que servirán para identificar a nuestra aplicación. Esta pareja de claves hay que mantenerlas guardadas y <strong>no compartirlas</strong></p> </div> <div class="paragraph"> <p>Si sigues la guía al completo (no es necesario) al final tendrías una aplicación que te permitiría hacer login en la misma con tu cuenta de Linkedin &#8230;&#8203; y nada más. Así que he preparado esta aplicación , basada en este tutorial, que una vez te identificas en ella obtienes tu <strong>userId</strong> y un <strong>accessToken</strong></p> </div> <div class="paragraph"> <p><a href="https://gitlab.com/puravida-software/linkedin-accesstoken" class="bare">https://gitlab.com/puravida-software/linkedin-accesstoken</a></p> </div> <div class="paragraph"> <p>Básicamente esta aplicación permite al usuario autentificarse en Linkedin y obtener los datos necesarios para publicar un post en la red. Esta aplicación se ejecutaría en <strong>tu local</strong> por lo que si has seguido los pasos de la guia anterior y ejecutado esta aplicación, obtendrás estos datos <strong>de forma segura</strong> (el código de la aplicación es abierto así que puedes revisarlo para comprobarlo)</p> </div> <div class="paragraph"> <p>Si todo esto te resulta complicado (no es fácil pero es lo que hay) y confías en mí, he desplegado esta misma aplicación en</p> </div> <div class="paragraph"> <p><a href="https://linkedin-pvidasoftware.cloud.okteto.net/" class="bare">https://linkedin-pvidasoftware.cloud.okteto.net/</a></p> </div> <div class="paragraph"> <p>la cual te solicitará acceso a tu cuenta y que le des permisos para publicar en tu nombre. Obviamente aquí podría usar tus datos para liartela así que te corresponde a tí decidir qué hacer (La otra opción es que te pongas en contacto conmigo y hablemos 😉 )</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="gmail">Gmail</h2> <div class="sectionbody"> <div class="paragraph"> <p>La parte "fácil" es crear el script de Google. Para ello iremos a</p> </div> <div class="paragraph"> <p><a href="https://script.google.com/home" class="bare">https://script.google.com/home</a></p> </div> <div class="paragraph"> <p>y crearemos un nuevo proyecto (yo lo he llamado "Publicar en Linkedin")</p> </div> <div class="paragraph"> <p>Nos aparecerá un pequeño código que reemplazaremos por este:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>const author='NQxxxxxxx'; // Tu userId const accessToken='AQUg-xxxxxxx'; // El accessToken, una cadena superlarga const url = 'https://api.linkedin.com' const label = 'Publicar en Linkedin'; const lifecycleState='PUBLISHED'; const visibility = 'PUBLIC'; function checkEmail() { try{ unreadEmail() }catch(error){ Logger.log(error) } } function unreadEmail() { const ts = GmailApp.search(`subject:${label} is:unread to:me from:me`); ts.forEach(t =&gt; { t.getMessages().forEach(m =&gt; { processEmail(m); m.markRead(); }); }); } function processEmail(m) { const images = m.getAttachments(); let medias = []; if( images ){ images.forEach( (a)=&gt;{ medias.push(uploadImage(a))} ) } const body=html2text(m.getBody()) var payload = { "author": "urn:li:person:"+author, "lifecycleState":lifecycleState, "visibility": { "com.linkedin.ugc.MemberNetworkVisibility":visibility }, "specificContent":{ "com.linkedin.ugc.ShareContent":{ "shareCommentary":{ "text": body }, "shareMediaCategory" : medias.length ? "IMAGE" : "NONE", "media":medias } } }; var options = { 'method' : 'post', 'contentType': 'application/json', 'payload': JSON.stringify(payload), 'headers': { 'Authorization': `Bearer ${accessToken}`, 'X-Restli-Protocol-Version': '2.0.0' } }; Logger.log(options) const resp = UrlFetchApp.fetch(`${url}/v2/ugcPosts`, options); Logger.log(resp) } function html2text(body){ const ret = `${body}`.replaceAll('&lt;br&gt;','\n') .replaceAll('&lt;/div&gt;','\n') .replaceAll(/&lt;[^&gt;]+&gt;/g, '') .replaceAll("&amp;quot;",'"') .replaceAll("&amp;quota",'á') .replaceAll("&amp;quote",'é') .replaceAll("&amp;quoti",'í') .replaceAll("&amp;quoto",'ó') .replaceAll("&amp;quotu",'ú') return ret; } function uploadImage(attachment) { var imgPayload = { "registerUploadRequest": { "recipes": [ "urn:li:digitalmediaRecipe:feedshare-image" ], "owner": "urn:li:person:"+author, "serviceRelationships": [ { "relationshipType": "OWNER", "identifier": "urn:li:userGeneratedContent" } ], "supportedUploadMechanism":[ "SYNCHRONOUS_UPLOAD" ] } } var imgOptions = { 'method' : 'post', 'contentType': 'application/json', 'payload': JSON.stringify(imgPayload), 'headers': { 'Authorization': `Bearer ${accessToken}`, 'X-Restli-Protocol-Version': '2.0.0' } }; const resp = UrlFetchApp.fetch(`${url}/v2/assets?action=registerUpload`, imgOptions); Logger.log(resp); const json = JSON.parse(resp) const uploadUrl = json.value.uploadMechanism["com.linkedin.digitalmedia.uploading.MediaUploadHttpRequest"].uploadUrl; const mediaId = json.value.asset; var optionsImage = { method : "put", payload : attachment.copyBlob(), headers:{ 'Authorization': `Bearer ${accessToken}`, 'Accept':'*/*' } }; Logger.log(uploadUrl) var respImage = UrlFetchApp.fetch(uploadUrl, optionsImage).getContentText(); Logger.log(respImage) return { status:'READY', media: mediaId } }</code></pre> </div> </div> <div class="paragraph"> <p>Una vez salvado el código vamos a probar que funciona correctamente:</p> </div> <div class="ulist"> <ul> <li> <p>Envíate un correo a tí mismo con el subject "Publicar en Linkedin" (las mayusculas da igual) <strong>en formato texto plano</strong></p> </li> <li> <p><strong>NO</strong> lo abras</p> </li> <li> <p>En la parte superior del editor del script verás un listbox donde puedes seleccionar qué método ejecutar. Asegurate que se encuentra seleccionado <code>checkEmail</code></p> </li> <li> <p>Al lado de este listbox tienes el botón <code>Ejecutar</code>. Al pulsarlo aparecerán logs en la parte inferior de la pantalla y si no aparece ninguno de error tu correo habrá sido publicado en Linkedin. Puedes ir a tu cuenta y comprobarlo</p> </li> <li> <p>Comprueba que el email se ha marcado como leído</p> </li> </ul> </div> <div class="sect2"> <h3 id="automatización">Automatización</h3> <div class="paragraph"> <p>Una vez comprobado que el proceso funciona podemos decirle a Google que cada cierto ejecute este proceso:</p> </div> <div class="ulist"> <ul> <li> <p>En el menú de la izquierda pulsa en el reloj y seleciona "Activadores"</p> </li> <li> <p>Añadir un Activador (botón abajo a la derecha)</p> </li> <li> <p>Seleccionamos <code>checkEmail</code> como método a ejecutar y configuramos el temporizador a usar. Yo por ejemplo estoy usando cada hora</p> </li> <li> <p>Guardamos el activador</p> </li> </ul> </div> <div class="paragraph"> <p>Básicamente, cada hora Google ejecuta mi script en mi cuenta de gmail y comprueba si hay correos sin enviar con el subject "Publicar en Linkedin" y lo publica.</p> </div> </div> <div class="sect2"> <h3 id="tips">Tips</h3> <div class="paragraph"> <p>Este API permite publicar texto acompañado de fotos.</p> </div> <div class="paragraph"> <p>El problema es que si te envías el email en formato enriquecido hay que transformarlo (quitar los divs, span, &#8230;&#8203;.) por lo que lo más sencillo es mandarlo como texto plano.</p> </div> <div class="paragraph"> <p>Puedes adjuntar imágenes al email y el script lo detecta y las sube a Linkedin junto al texto. NO he probado el máximo que puedes adjuntar, sólo 3 ó 4. Todo es probar</p> </div> </div> </div> </div> Sabías que puedes publicar automáticamente en Linkedin desde tu correo electrónico (gmail en este caso). Te cuento cómo ApacheConf New Orleans Jorge Aguilera 2022-10-03T00:00:00Z https://blog.jagedn.dev/blog/2022/apacheconf-nola.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>La primera semana de Octubre he estado en la ApacheConf (Conferencias de la fundación Apache sobre Open Source) en New Orleans. En este post, voy a intentar resumir esta semana de experiencias</p> </div> </div> </div> <div class="sect1"> <h2 id="cómo_porqué">¿Cómo? ¿Porqué?</h2> <div class="sectionbody"> <div class="paragraph"> <p>En primer lugar, cómo he llegado a estar una semana en una conferencia tan lejos de casa (y no me refiero a que he venido en avión, sino a cómo lo he hecho)?</p> </div> <div class="paragraph"> <p>Buena pregunta. Como casi todo lo que hago, ha sido gracias a un "impulso". Allá por febrero, después del año y medio tan complicado que hemos pasado todos, ví en Twitter que la cuenta ApacheGroovy mencionaba que se abría el CFP (envío de propuestas de charlas) de la Apache Conf y buscaban propuestas relacionadas con Groovy, así que sin pensarlo mucho decidí enviar una.</p> </div> <div class="paragraph"> <p>La verdad que cada vez que veo a ciertas personas que sigo el que van a dar una charla en eventos por ahí pues como que me dá mucha envidia, así que esta vez no me lo pensé y desde el mismo móvil envié una propuesta.</p> </div> <div class="paragraph"> <p>Como ya he dado "algunas" de Groovy dudé un par de segundos cúal podría ser más interesante, pero en seguida me decanté por hablar de <strong>Groogle</strong> un proyecto que empecé para jugar un poco y que había dejado aparcado porque no despertó mucha curiosidad en mi "circulo de influencia" (vamos, que todos me preguntan que para qué sirve).</p> </div> <div class="paragraph"> <p>Groogle, es un DSL que te facilita el uso de las APIs de Google, pero más allá de lo técnico, es un proyecto que se me ocurrió "desde cero" y al que le he dedicado mucho rato, así que en cierta forma se merecía que le escogiera</p> </div> <div class="paragraph"> <p>Sorprendentemente, unos meses después, recibí un email de que mi charla había sido aceptada y me acordé de lo de "cuidado con lo que deseas que se puede cumplir". Es cuando comprendí que debía enfrentarme a uno de mis mayores enemigos y dar una charla en inglés y no te miento si te digo que a ratos pensé en buscar alguna excusa para decir que no podría ir.</p> </div> <div class="paragraph"> <p>La excusa más fácil era que costaba mucho dinero y blablabla pero la verdad que por suerte no me puedo quejar en ese aspecto y podría costearlo &#8230;&#8203; y entoncés Iván, un perro viejo en esto, me recordó que puedes solicitar ayuda para costear el viaje. Lo hicé y al poco recibí la contestación que ningún problema, que iba a gastos pagados.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>sé que esto es tema de debate y que mucha gente piensa que si vas a dar una charla por la que cobran, tú deberías cobrar. Yo tengo mi opinión y si quieres saberla tendrás que pagar las cervezas para que te las cuente.</p> </dd> </dl> </div> <div class="paragraph"> <p>En resumen, envié la propuesta en febrero, recibí la aceptación por junio y la confirmación de los gastos pagados sobre julio. Ya no había vuelta atrás y en octubre tenía una cita con la Apache Conf</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>He "descubierto" que existe un programa de voluntariado en el que, si te aceptan, puedes asistir a la conferencia a gastos pagados (billete y hotel e incluso manutención). La labor que hay que hacer es básicamente el primer día estar en recepción para dar las camisetas y luego ayudar en las charlas al ponente avisandole del tiempo que le queda etc. No sé si lo entendí bien pero suelen pillar a gente que no lo haya solicitado anteriormente. Creo que es una oportunidad para poder asistir, conocer gente y vivir una experiencia bastante enriquecedora.</p> </dd> </dl> </div> <div class="paragraph"> <p>A pesar de que estaba apuntado al voluntariado he podido asistir a casi todas las charlas que me interesaban (no sé si será siempre así pero habían unas 20 personas así que tenía tiempo para mí, aunque también es verdad que me escaqueé un poco)</p> </div> <div class="paragraph"> <p>Las Keynotes, alguna sobre Avro, Kasandra y sobre todo las de Groovy. Como mi charla era el último día he tenido la ventaja de ir conociendo a la gente, ganando un poco de confianza, viendo las demás, etc.</p> </div> </div> </div> <div class="sect1"> <h2 id="el_f_inglés">El f*** inglés</h2> <div class="sectionbody"> <div class="paragraph"> <p>Seguramente en este punto dirás "claro, es que eres muy extrovertido y te relacionas con todo el mundo, siendo tan alto y guapo lo tienes muy fácil. En mi caso es diferente porque esto y lo otro". Pues siento contradecirte</p> </div> <div class="paragraph"> <p>No soy extrovertido. Sí intento ser amable e ir con una sonrisa (eso abre muchas puertas) pero como casi todos, necesito tiempo para ir ganando confianza e ir soltándome. Más de una mañana, en el cafe inicial, deambulaba como haciendo que buscaba a alguien porque yo no voy a entrarle a nadie que no conozca &#8230;&#8203; y encima en un idioma que medio chapurreo y mal.</p> </div> <div class="paragraph"> <p>De hecho, los speakers estábamos invitados a una cena (en un sitio muy chulo) y en un alarde de valentía en lugar de sentarme en una mesa que no había nadie, ví una donde había un tío de mi edad más menos y me dije "amos allá". Como pude le dije si le molestaba que me sentara y nos pusimos a "hablar". Sinceramente, en este ambiente y con gente de todos los sitios, el inglés pasa a segundo plano y la peña hace por entenderte y que les entiendas. El problema me vino cuando llegaron sus amigos y empezaron a tomar velocidad. Me costó 10 minutos darme cuenta que estaban hablando del cambio de licencia de ElasticSearch y cuando me preparaba para poder aportar algo (preguntar alguna cosa, porque del tema no tengo ni papa) vino la vicepresidenta ejecutiva de Apache (cágate lorito) y se puso a contarnos historias de su retoño y ya me sentí fuera de lugar e hice mutis como pude.</p> </div> <div class="paragraph"> <p>Al día siguiente, 3 de las personas que estaban en esa mesa, al pasar al lado mío me saludaron e intercambiamos alguna frase hecha. A donde voy con todo esto? que mira, nadie te va a comer por no saber expresarte, que te vas a sentir en algun momento fuera de lugar, vale, y? en peores plazas hemos toreado</p> </div> <div class="paragraph"> <p>Como contrapartida, los assistant, al habernos conocido antes y tener "un objetivo común", empezabamos a contarnos nuestras movidas: como es nuestro país, nuestro trabajo, etc. He conocido a un turco que no sabía (literalmente) ni una palabra de inglés, 3 indios, 1 chica de Kazahistan, 1 argentino, 1 uruguallo &#8230;&#8203;</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2022/cena.jpg" alt="cena"> </div> <div class="title">Figure 1. Cenando con la cúpula de Apache sin saberlo</div> </div> </div> </div> <div class="sect1"> <h2 id="la_conferencia">La conferencia</h2> <div class="sectionbody"> <div class="paragraph"> <p>Sobre la conferencia y las charlas pues poca cosa que contar. Me ha sorprendido que esta no es la típica movida americana, a pesar de haber sido en el Serathon Hotel. Las charlas eran en salitas no muy grandes, como para 20-25 personas, salvo alguna que usaban la sala más grande.</p> </div> <div class="paragraph"> <p>Por lo demás muy normal. La comida era asunto tuyo (no había, vamos) pero las pausas del café muy bien, los tiempos entre charlas bien medidos, un ambiente muy ameno y buen rollo.</p> </div> <div class="paragraph"> <p>Como en todos estos tipos de eventos donde hay 6-7 charlas a la vez más de una te planteas si has acertado con la correcta (he estado en 2 que me hubiera cargado al ponente si no fuera por el sueño que estaba dando). Obviamente las de Groovy, las mejores, pero no quiero dejar de pasar una en concreto.</p> </div> <div class="paragraph"> <p>El ponente explicaba cómo empezó con una idea de crear un protocolo para la industria de IoT, lo propuso a la fundación, las peleas con los mentores, crear comunidad, ganar atracción en el proyecto, etc que me dieron ganas de ponerme en pie para aplaudir al finalizar su charla.</p> </div> <div class="paragraph"> <p><a href="https://plc4x.apache.org/" class="bare">https://plc4x.apache.org/</a></p> </div> <div class="paragraph"> <p>Lo que sí he hecho ha sido, cual Paco Martínez Soria, arrasar con todos los stands cogiendo pegatinas, camisetas, botellas, &#8230;&#8203;</p> </div> <div class="paragraph"> <p>Por ejemplo, esta foto era del segundo día</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2022/apacheconf.jpg" alt="apacheconf"> </div> </div> </div> </div> <div class="sect1"> <h2 id="groogle">Groogle</h2> <div class="sectionbody"> <div class="paragraph"> <p>No te voy a mentir. En mi opinión "bordé la charla"</p> </div> <div class="paragraph"> <p>No, mi inglés seguía siendo justito, de hecho el temido turno de preguntas, como esperaba, no supe qué me estaba preguntando la chica aquella (pongo como excusa que llevaba la mascarilla) y me tuvieron que echar un capote.</p> </div> <div class="paragraph"> <p>Pero la bordé. Primero porque el proyecto "es mío" y aunque es técnica lo que cuento es vivido en primera persona, no es un framework que trabajas con él ni nada de eso (sin querer desmerecer esas charlas, que yo también las hago)</p> </div> <div class="paragraph"> <p>Segundo, porque había buscado unas semanas antes unos entornos amigables donde practicarla: primero en remoto para los compas de la empresa, casi todos de habla inglesa, y luego en un meetup en MadridGUG donde la gente pudo darme su feedback al finalizar (y menudo feedback!! me hizo cambiar casi toda la charla a falta de 2 semanas)</p> </div> <div class="paragraph"> <p>En tercer lugar, la suerte de que fuera los últimos días y hubiera tenido tiempo de hacer amistades y relajarme. Ver que las salas eran pequeñas, que a nadie le importa Groovy e ibamos a ir los de siempre (al final se apuntó más gente), crearon un ambiente más relajado y me sentí como en casa.</p> </div> <div class="paragraph"> <p>Y bueno, el que fuera tan bien pues me ha animado para seguir mejorando el proyecto e incluirle más cositas que tenía en el tintero y que iremos sacando poco a poco.</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2022/nola1.jpeg" alt="nola1"> </div> </div> <div class="imageblock"> <div class="content"> <img src="/images/2022/nola2.jpeg" alt="nola2"> </div> </div> </div> </div> <div class="sect1"> <h2 id="new_orleans">New Orleans</h2> <div class="sectionbody"> <div class="paragraph"> <p>Como "premio" pues te puedes imaginar. Conseguimos que un familiar se quedara la semana al cargo del heredero y mi pareja y yo nos pillamos un apartamento cerca del hotel (tranqui, mi habitación la usó otro ponente) así que por las tardes, una vez terminadas las charlas, nos ibamos a recorrer las calles del barrio francés, cementerio, etc</p> </div> <div class="paragraph"> <p>Como este no es un blog de viajes, sólo diré que, en mi opinión, te tiene que gustar mucho la música y el salir de copeo por las noches para sacarle todo el partido a #NOLA</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2022/nola3.jpg" alt="nola3"> </div> </div> <div class="imageblock"> <div class="content"> <img src="/images/2022/nola4.jpg" alt="nola4"> </div> </div> </div> </div> <div class="sect1"> <h2 id="conclusión">Conclusión</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pues obviamente, ahora mismo estoy de subidón. No sólo he sobrevivido sino que he conocido gente y lugares (bueno NOLA ya la habíamos visitado pero hacía mucho y sólo un par de días), así que a cualquiera que me pregunte le diría sin dudar que intente hacerlo.</p> </div> <div class="paragraph"> <p>Que el no controlar inglés puede ser tu barrera pero también tu aliado echándole un poco de morro</p> </div> <div class="paragraph"> <p>Que seguro tienes algo que contar que a otros les puede interesar</p> </div> <div class="paragraph"> <p>Que las ayudas económicas se buscan y seguro encuentras alguien que te eche una mano</p> </div> <div class="paragraph"> <p>Que seguro que para el año que viene, si todo sigue igual, envío propuestas hasta para darlas en Marte</p> </div> </div> </div> una semana en NewOrleans en la ApacheConf Nextflow: Mezclando multiples lenguajes Jorge Aguilera 2022-09-27T00:00:00Z https://blog.jagedn.dev/blog/2022/python-java.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Una vez hecha la introducción a Nextflow (ver artículo <a href="process.html">anterior</a>) vamos a empezar a explorar algunas de las funcionalides que nos ofrece.</p> </div> <div class="paragraph"> <p>Supongamos que tenemos un flujo de trabajo que requiere que ciertas partes se realicen usando un programa (o lenguaje de programación) y otras partes otros.</p> </div> <div class="paragraph"> <p>Por ejemplo existe una librería Python que realiza unos cálculos y tenemos otra en Java que realiza otros.</p> </div> <div class="paragraph"> <p>Probablemente usaríamos un bash donde ejecutaríamos cada fase, usando las salidas de unos como entradas de otros.</p> </div> <div class="paragraph"> <p>El problema es que esto nos obliga a tener instalados los diferentes programas (o runtimes) con el engorro de controlar versiones, instalaciones, etc. Una forma de mitigar este problema sería usando, por ejemplo, Docker, montando volumenes, compartiendo ficheros, etc.</p> </div> </div> </div> <div class="sect1"> <h2 id="caso_de_uso">Caso de uso</h2> <div class="sectionbody"> <div class="paragraph"> <p>En este ejemplo vamos a desarrollar un pipeline tal que un Python va a crear un número indeterminado de ficheros ( le pasaremos por párametro cuántos queremos generar), cada uno de ello va a ser leído y "modificado" por un comando bash y por último un proceso Java va a pasar a mayúsculas cada fichero (como ves, un ejemplo sin mucha utilidad)</p> </div> <div class="paragraph"> <p>La "gracia" va a ser que:</p> </div> <div class="ulist"> <ul> <li> <p>cada fichero se va a tratar de forma paralela e independiente</p> </li> <li> <p>vamos a usar Docker "sin manos" y hacer que cada proceso se ejecute en una imagen de Docker diferente (Python y Java)</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="procesos">Procesos</h2> <div class="sectionbody"> <div class="paragraph"> <p>Para usar la capacidad de ejecutar containers necesitamos activar docker. Para ello crearemos el fichero de configuración <code>nextflow.config</code> con el siguiente contenido:</p> </div> <div class="listingblock"> <div class="title">nextflow.config</div> <div class="content"> <pre class="prettyprint highlight"><code>docker{ enabled = true }</code></pre> </div> </div> <div class="sect2"> <h3 id="generar_ficheros_python">Generar ficheros (Python)</h3> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>process generarFicheros { container 'python:latest' input: val size output: path 'example.*' """ #!/usr/bin/env python import sys total = int($size) for x in range(0, total): with open('example.'+str(x), 'w') as f: f.write('line 1 '+str(x)+'\\n') f.write('line 2 '+str(x)+'\\n') f.write('line 3 '+str(x)+'\\n') """ }</code></pre> </div> </div> <div class="paragraph"> <p>El proceso <code>generarFicheros</code> se va a ejecutar en un container usando la imagen <code>python:latest</code></p> </div> <div class="paragraph"> <p>Va a recibir un párametro de entrada <code>size</code> que usará en el programa a ejecutar (<code>total=int($size)</code>)</p> </div> <div class="paragraph"> <p>Cada fichero consistirá en 3 lineas que contendrán entre otras cosas, el índice del fichero simplemente a modo de demostrar que se están procesando en paralelo</p> </div> <div class="paragraph"> <p>Por cada fichero que se cree con el nombre <code>example.XXX</code> el proceso emitirá un output</p> </div> </div> <div class="sect2"> <h3 id="limpieza_de_fichero_bash">Limpieza de fichero (bash)</h3> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>process eachFile{ input: path file output: stdout """ head -n 1 $file """ }</code></pre> </div> </div> <div class="paragraph"> <p>El proceso <code>eachFile</code> recibe un fichero y simplemente muestra su contenido por consola.</p> </div> <div class="paragraph"> <p>Supongamos que este proceso fuera por ejemplo una limpieza del fichero, quitar líneas mal formateadas, etc. En nuestro ejemplo simplemente va a mostrar la primera línea de cada uno (es decir mostrará "line 1 XX" donde XX es el índice del fichero que generó el proceso Python)</p> </div> </div> <div class="sect2"> <h3 id="procesado_java">Procesado (Java)</h3> <div class="paragraph"> <p>Por último vamos a ejecutar por cada fichero un Java que lo único que hace es pasar a mayusculas el argumento proporcionado:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>import java.util.stream.Collectors; import java.util.stream.Stream; class MyJava{ public static void main(String[]args){ System.out.println( Stream.of(args).collect(Collectors.joining(" ")).toUpperCase()); } }</code></pre> </div> </div> <div class="paragraph"> <p>En un proyecto típico, este código lo compilaríamos y generaríamos un Jar para ejecutarlo con <code>java -jar myproject.jar</code></p> </div> <div class="paragraph"> <p>Para este ejemplo lo que vamos a usar es JBang, una funcionalidad de Java que permite que le pasemos el código y él se encarga de compilarlo y ejecutarlo directamente.</p> </div> <div class="paragraph"> <p>Así pues el proceso a definir en nuestro pipeline quedaría como:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>process toUpperString{ container 'jbangdev/jbang-action' containerOptions "--volume $projectDir:/ws" input: val str output: stdout """ jbang /ws/src/MyJava.java $str """ }</code></pre> </div> </div> <div class="paragraph"> <p>En este process usamos una característica más de Nextflow. Además de indicarle la imagen que queremos usar en el process, podemos proporcionar una cadena de configuración con <code>containerOptions</code> que usaremos para montar el directorio de trabajo</p> </div> <div class="paragraph"> <p>Nextflow se encarga de descargar, montar volumenes y ejecutar en el container creado el comando</p> </div> <div class="paragraph"> <p><code>jbang /ws/src/MyJava.java $str</code> donde <code>$str</code> va a ser una cadena que se reciba como input</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="workflow">Workflow</h2> <div class="sectionbody"> <div class="paragraph"> <p>Por último nos queda definir el workflow que une a estos tres process</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>workflow{ generarFicheros(params.size).flatMap() | eachFile | toUpperString | view }</code></pre> </div> </div> <div class="paragraph"> <p>El workflow llama en primer lugar a <code>generarFicheros</code> y mediante el operador <code>flatMap</code> convertimos la salida (una lista de ficheros) en una emisión en paralelo</p> </div> <div class="paragraph"> <p>Cada fichero será procesado por eachFile y cada salida de eachFile se enviará a una instancia de toUpperString</p> </div> </div> </div> <div class="sect1"> <h2 id="pipeline">Pipeline</h2> <div class="sectionbody"> <div class="paragraph"> <p>El pipeline queda pues de esta forma:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>process generarFicheros { container 'python' input: val size output: path 'example.*' """ #!/usr/bin/env python import sys size = int($size) for x in range(0, size): with open('example.'+str(x), 'w') as f: f.write('line 1 '+str(x)+'\\n') f.write('line 2 '+str(x)+'\\n') f.write('line 3 '+str(x)+'\\n') """ } process eachFile{ input: path file output: stdout """ head -n 1 $file """ } process toUpperString{ container 'jbangdev/jbang-action' containerOptions "--volume $projectDir:/ws" input: val str output: stdout """ jbang /ws/src/MyJava.java $str """ } workflow{ generarFicheros(params.size).flatMap() | eachFile | toUpperString | view }</code></pre> </div> </div> <div class="paragraph"> <p>Y lo ejecutaremos:</p> </div> <div class="paragraph"> <p><code>nextflow run ./multilang.nf --size=5</code></p> </div> <div class="paragraph"> <p>Si todo va bien iremos viendo por consola las primeras lineas de los ficheros convertidas a mayúsculas.</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>N E X T F L O W ~ version 22.04.5 Launching `./multilang.nf` [hungry_laplace] DSL2 - revision: bd507594b6 executor &gt; local (11) [2a/65dd40] process &gt; generarFicheros [100%] 1 of 1 ✔ [79/0c4662] process &gt; eachFile (2) [100%] 5 of 5 ✔ [94/01790c] process &gt; toUpperString (2) [100%] 5 of 5 ✔ LINE 1 0 LINE 1 4 LINE 1 3 LINE 1 1 LINE 1 2</code></pre> </div> </div> <div class="paragraph"> <p>Es interesante observar en esta salida cómo generarFicheros se ha ejecutado <code>1 of 1</code> mientras que las otras tareas se han ejecutado <code>5 of 5</code> (ya que indicamos size=5 como parámetro de ejecución)</p> </div> </div> </div> <div class="sect1"> <h2 id="conclusión">Conclusión</h2> <div class="sectionbody"> <div class="paragraph"> <p>En este post hemos visto cómo usar los process para ejecutar aplicaciones diversas, como en este caso Python y Java, así como el procesado en paralelo de las tareas</p> </div> <div class="paragraph"> <p>Así mismo hemos visto cómo podemos usar Docker incluso con imágenes diferentes en cada proceso junto con una pequeña introducción al fichero de configuración <code>nextflow.config</code> el cual explicaré en un futuro post en más detalle</p> </div> </div> </div> Explorando cómo usar diferentes lenguajes en los procesos Groogle: preparacion entorno Jorge Aguilera 2022-09-23T00:00:00Z https://blog.jagedn.dev/blog/2023/inicio.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Groogle es un conjunto de DSL (domain specific language) para trabajar con las APIs de Google</p> </div> <div class="paragraph"> <p>Lo que quiere decir, es que siguiendo una sintáxis sencilla puedes programar pequeños (al principio) programas que interactúen con tu cuenta de Google.</p> </div> <div class="paragraph"> <p>Por ejemplo puedes enviar un correo usando tu cuenta de Gmail con sólo unas pocas lineas, o acceder a una hoja de cálculo y leer/escribir en ella usando una sintaxis muy fácil.</p> </div> </div> </div> <div class="sect1"> <h2 id="groovy">Groovy</h2> <div class="sectionbody"> <div class="paragraph"> <p>Groogle está implementado en Groovy por lo que necesitarás instalarlo. Groovy puede correr en máquinas Windows, Linux y Mac.</p> </div> <div class="paragraph"> <p>Sigue los pasos de la página oficial e instala la versión <strong>3.0.10</strong> :</p> </div> <div class="paragraph"> <p><a href="https://groovy-lang.org/install.html" class="bare">https://groovy-lang.org/install.html</a></p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>También puedes usar las imágenes de Docker que se encuentran disponibles pero para este tutorial vamos a usar la versión instalable.</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="google">Google</h2> <div class="sectionbody"> <div class="paragraph"> <p>Una vez que tengas instalado Groovy tienes que crear un proyecto en la consola de Google</p> </div> <div class="paragraph"> <p><a href="https://console.cloud.google.com/" class="bare">https://console.cloud.google.com/</a></p> </div> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>Te va a solicitar que proporciones una tarjeta de crédito, pero tienes unos meses de prueba y puedes cancelarlo cuando quieras. De todas formas la capa gratuita es suficiente, al menos para el uso que yo hago, y yo no he incurrido todavía en ningún cargo.</p> </dd> </dl> </div> <div class="paragraph"> <p>El nombre del proyecto no importa, yo he elegido Groogle.</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/google_cloud.png" alt="google cloud"> </div> </div> </div> </div> <div class="sect1"> <h2 id="credenciales">Credenciales</h2> <div class="sectionbody"> <div class="paragraph"> <p>Por ahora los scripts que vamos a ejecutar usarán tu cuenta de Google por lo que tenemos que crear unas credenciales "OAuth":</p> </div> <div class="ulist"> <ul> <li> <p>en el menu principal (la hamburgesa de arriba a la izquierda)</p> </li> <li> <p>selecciona "API y servicios"</p> </li> <li> <p>submenu "Pantalla de consentimiendo OAuth"</p> </li> </ul> </div> <div class="paragraph"> <p>Vamos a crear una pantalla donde se le informará al usuario (a tí mismo) que vas a otorgar acceso a una aplicación (hecha por tí):</p> </div> <div class="ulist"> <ul> <li> <p>Nombre, <strong>NO</strong> pongas Google, Drive, o algo similar a productos de Google o dará un error que no dice nada y te volverás loco. Yo la he llamado "Quickstart"</p> </li> <li> <p>email, el mismo de la cuenta</p> </li> <li> <p>no necesitas autorizar dominios</p> </li> </ul> </div> <div class="paragraph"> <p>Una vez guardada crearemos las credenciales OAuth:</p> </div> <div class="ulist"> <ul> <li> <p>en el menu de la izquierda</p> </li> <li> <p>selecciona "Credenciales"</p> </li> <li> <p>en la parte superior "+ Crear credenciales"</p> </li> <li> <p>Id de cliente OAuth</p> </li> </ul> </div> <div class="paragraph"> <p>En tipo de aplicacion vamos a seleccionar "App de escritorio" pues en este tutorial nos vamos a centrar en desarrollar scripts de consola. El nombre de las credenciales no importa mucho pero si es descriptivo mejor, por ejemplo "Pruebas Groogle".</p> </div> <div class="paragraph"> <p>OJO: Descargar fichero del dialogo que aparece. Si lo cierras sin guardar tendrás que volver a empezar.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>El nombre con el que se guarda es un tanto enfarragoso, lo puedes renombrar por el que quieras, por ejemplo "cliente_groogle.json"</p> </dd> </dl> </div> <div class="paragraph"> <p>Este fichero habrá que copiarlo/usarlo en los scripts, tenlo a mano en alguna ruta fácil de recordar</p> </div> </div> </div> <div class="sect1"> <h2 id="habilitar_apis">Habilitar APIs</h2> <div class="sectionbody"> <div class="paragraph"> <p>El script que vamos a programar va a ser para enviar un correo electrónico usando nuestra cuenta de Gmail por lo que lo primero que hay que hacer es habilitar esta Api en el proyecto:</p> </div> <div class="ulist"> <ul> <li> <p>En el menu de la izquierda "Biblioteca"</p> </li> <li> <p>Buscar Gmail</p> </li> <li> <p>Habilitar</p> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Si quieres, en este punto puedes habilitar otras APIs con las que trabajaremos y así no tienes que volver a esta pantalla. Por ejemplo puedes probar a activar Drive y Sheet</p> </dd> </dl> </div> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="primer_script">Primer script</h2> <div class="sectionbody"> <div class="paragraph"> <p>En una carpeta de tu máquina crea un directorio, por ejemplo, "groogle"</p> </div> <div class="paragraph"> <p>Crea un fichero <code>test.groovy</code> y copia este contenido</p> </div> <div class="listingblock"> <div class="title">test.groovy</div> <div class="content"> <pre class="prettyprint highlight"><code>@Grab("com.puravida-software.groogle:groogle-gmail:3.1.1") import com.google.api.services.gmail.GmailScopes import com.puravida.groogle.GmailService import com.puravida.groogle.GmailServiceBuilder import static com.puravida.groogle.GroogleBuilder.build build { withOAuthCredentials { applicationName 'test' withScopes GmailScopes.GMAIL_SEND usingCredentials "client_secret.json" storeCredentials true } register GmailServiceBuilder.build(), GmailService } with { service GmailService sendEmail{ from "me" to "jorge.aguilera@puravida-software.com" subject "Hi" body """ Hi Oye, estoy probando Groogle y mola mucho a seguir dandole """.stripIndent() } }</code></pre> </div> </div> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>Copia en este directorio el fichero con las credenciales y llamalo "client_secret.json" (o como hayas puesto en el <code>usingCredentials</code>)</p> </dd> </dl> </div> <div class="paragraph"> <p>Básicamente este script:</p> </div> <div class="ulist"> <ul> <li> <p>declara un artefacto para bajarse de Internet</p> </li> <li> <p>declara unos cuantos imports necesarios para decir qué vamos a usar</p> </li> <li> <p>creamos una instancia de Groogle (llamando a <code>build</code> ) configurando qué credenciales y scopes va a usar, así como qué servicios va a manejar (Gmail en este caso)</p> </li> <li> <p>una vez creada la instancia, buscamos el servicio GmailService y componemos un email&#8201;&#8212;&#8201;from , es una direccion de correo. "me" es una palabra reservada por Google para indicar la cuenta de usuario&#8201;&#8212;&#8201;to , la cuenta de correo a la que estamos escribiendo&#8201;&#8212;&#8201;etc</p> </li> </ul> </div> <div class="paragraph"> <p>Body es una cadena de texto. En Groovy las cadenas de texto se pueden escribir de varias formas:</p> </div> <div class="paragraph"> <p>Si vas a escribir una sola linea, puedes usar una comilla simple: 'Hola pepe'</p> </div> <div class="paragraph"> <p>O una doble: "Hola pepe"</p> </div> <div class="paragraph"> <p>Así puedes meter una de ellas dentro de la otra: "Hola pepe, 'bicho' " (o a la inversa 'Hola pepe, "bicho" ')</p> </div> <div class="paragraph"> <p>Si quieres escribir varias lineas, puedes hacer lo mismo pero usando 3 comillas</p> </div> <div class="paragraph"> <p>""" una linea otra """</p> </div> <div class="paragraph"> <p>Groovy tiene una funcion muy util en las cadenas llamada <code>stripIndent</code> que lo que hace es quitar los tabulados de cada linea de tal forma, que al escribirla en el script podemos meter tabulados para hacerlo legible y al enviarlo se quitan</p> </div> </div> </div> <div class="sect1"> <h2 id="ejecutando_el_script">Ejecutando el script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Simplemente ejecutaremos en una consola:</p> </div> <div class="paragraph"> <p><code>groovy test.groovy</code></p> </div> <div class="paragraph"> <p>Si todo ha ido bien, nos mostrará por consola una URL para abrir en un navegador (o tal vez se te abra automáticamente, depende del sistema y del navegador) y autorizar a la aplicación.</p> </div> <div class="paragraph"> <p>Esta es la pantalla de autorización que vería un usuario al usar tu aplicación si fuera publica. Puedes aceptar la petición puesto que es una aplicacion desarrollada por tí mismo.</p> </div> <div class="paragraph"> <p>Una vez aceptada, si no ha habido errores, yo debería recibir un correo a los pocos segundos (o al usuario que hayas puesto como destinatario)</p> </div> </div> </div> <div class="sect1"> <h2 id="conclusion">Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>Este es un primer script muy simple, pero si has llegado hasta aqui, tienes ya montado casi todo el proyecto para siguientes scripts</p> </div> <div class="paragraph"> <p>En proximos articulos veremos cómo acceder a nuestro Drive y crear carpetas, subir documentos (o bajarlos), acceder a una hoja de cálculo, etc y con pocas lineas de programación les iremos dotando de funcionalidades &#8230;&#8203;. o eso espero</p> </div> </div> </div> Preparación del entorno para ejecutar scripts de Groogle Introduccion a Nextflow: Process Jorge Aguilera 2022-09-17T00:00:00Z https://blog.jagedn.dev/blog/2022/process.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>En el artículo <a href="channels.html">anterior</a> vimos una introducción al concepto de Channel. En este, vamos a profundizar un poco más en el concepto de process</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>Como ya dijimos un process es la unidad básica en el DSL de Nextflow y usamos los canales para conectarlos, por lo que parecería lógico empezar explicandolos primero. Sin embargo he optado por explicar primero los canales porque así ahora podemos hacer cosas más interesantes con ellos</p> </dd> </dl> </div> <div class="paragraph"> <p>El process es la parte del DSL mediante la que definimos una entrada, una salida y una ejecución de sistema. Es decir, Nextflow es agnóstico de lo que quieras procesar (sólo requiere que se pueda ejecutar en Linux). Tú compones el/los comando(s) a ejecutar y él se encarga de orquestar las ejecuciones</p> </div> <div class="paragraph"> <p>De esta forma tu pipeline puede ser tan simple como buscar una cadena en un fichero (básicamente ejecutar un grep) hasta leer un fichero de gigas y procesarlos de forma paralela, ejecutando un Python por cada línea, etc y todo ello con la ventaja de que el mismo pipeline puedes ejecutarlo en tu local, en un contenedor docker, usando AWS Batch, Google, etc</p> </div> </div> </div> <div class="sect1"> <h2 id="contando_lineas_de_un_fichero">Contando lineas de un fichero</h2> <div class="sectionbody"> <div class="paragraph"> <p>Vamos a empezar definiendo un proceso simple:</p> </div> <div class="listingblock"> <div class="title">uno.nf</div> <div class="content"> <pre class="prettyprint highlight"><code>process example { input: path 'entrada' output: stdout "wc -l $entrada" } workflow{ example( params.param1 ) | view }</code></pre> </div> </div> <div class="paragraph"> <p>Ejecutamos el pipeline</p> </div> <div class="paragraph"> <p><code>nextflow run uno.nf --param1 $(pwd)/uno.nf</code></p> </div> <div class="paragraph"> <p>y veremos que la salida nos dice el número de líneas del fichero <code>uno.nf</code></p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>N E X T F L O W ~ version 22.04.5 Launching `uno.nf` [exotic_jones] DSL2 - revision: c79a922618 executor &gt; local (1) [28/a1eb27] process &gt; example [100%] 1 of 1 ✔ 12 input</code></pre> </div> </div> <div class="paragraph"> <p>Como vemos, el proceso <code>example</code> requiere un fichero de entrada (dentro de su ejecución va a crear una variable <code>entrada</code> que podremos referenciarla dentro de la misma), y que va a emitir una salida tomándola del stdout del comando que va a ejecutar. Más adelante veremos qué otras posibilidades podemos usar</p> </div> </div> </div> <div class="sect1"> <h2 id="comando">Comando</h2> <div class="sectionbody"> <div class="paragraph"> <p>El comando a ejecutar se puede definir de varias formas:</p> </div> <div class="ulist"> <ul> <li> <p>La más simple es con un string al final de la definición del proceso</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>process example{ .. ... ... 'echo hola' }</code></pre> </div> </div> <div class="paragraph"> <p>El comando que ejecutará <code>example</code> será un simple <code>echo hola</code></p> </div> <div class="ulist"> <ul> <li> <p>Un string multilinea, usando triple comillas</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>process example{ .. .. ... ''' echo hola &gt; f echo hi &gt;&gt; f echo ciao &gt;&gt; f cat f ''' }</code></pre> </div> </div> <div class="paragraph"> <p>Así mismo el comando a ejecutar puede ser "personalizado" usando los inputs del process (atención al uso de comillas dobles en lugar de simples!!) como en el caso de <code>uno.nf</code>:</p> </div> <div class="paragraph"> <p><code>"wc -l $entrada"</code></p> </div> <div class="paragraph"> <p>En este caso Nextflow ejecutará un <code>wc</code> sobre un fichero cuya ruta no está predefinida, sino que se usará la que se le proporcione al process. Esto es así por el uso de comillas dobles que lo que hace es que la cadena sea "compilada" y se use el resultado</p> </div> </div> </div> <div class="sect1"> <h2 id="uniendo_procesos">Uniendo procesos</h2> <div class="sectionbody"> <div class="paragraph"> <p>Como puedes imaginar, podemos "concatenar" process uniendo las salidas de uno con las entradas de otro (en realidad usando canales)</p> </div> <div class="listingblock"> <div class="title">dos.nf</div> <div class="content"> <pre>process lines { input: path 'input' output: stdout // wc es un programa de la shell "wc -l $input" } process cut { input: val lines output: stdout // cut es un programa de la shell // indicamos que use el espacio como delimitador y extraiga el primer campo // le pasamos una cadena con espacios como entrada, por eso la entrecomillamos "cut -d ' ' -f 1 &lt;&lt;&lt; '$lines'" } workflow{ lines( params.param1 ) | cut | view }</pre> </div> </div> <div class="paragraph"> <p>En este caso el workflow creará dos procesos, <code>lines</code> y <code>cut</code>. Este último permanecerá a la espera de recibir valores por su canal de entrada (espera recibir un simple objeto <code>val</code> y lo llamará 'line' ). Por su parte <code>lines</code> (el proceso, no confundir con la variable del proceso cut) permanecerá a la espera de recibir un fichero de entrada (al declarar un <code>path</code> como entrada)</p> </div> <div class="paragraph"> <p>Mediante el caracter pipe "|" indicamos al workflow cómo unir estos procesos de tal forma que la salida de uno sea la entrada de otro</p> </div> <div class="paragraph"> <p>Una vez que se inicia el worflow, Nextflow alimenta el canal <code>params</code> lo que hace que <code>lines</code> se ejecute y su salida alimente a <code>cut</code></p> </div> </div> </div> <div class="sect1"> <h2 id="paralelización_divide_y_vencerás">Paralelización. Divide y vencerás</h2> <div class="sectionbody"> <div class="paragraph"> <p>El ejemplo anterior muestra cómo definimos los procesos así como el "flujo de trabajo". Como lines emite un sólo valor (el stdout generado por wc) el worflow es lineal.</p> </div> <div class="paragraph"> <p>En el ejemplo siguiente vamos a ver la capacidad de definir ejecuciones de procesos en paralelo. El ejemplo va a consistir en generar un fichero de N líneas, y por cada línea ejecutaremos un process que "haga algo" con ella (simplemente imprimirla por su stdout). Para poder comprobar la paralelización cada ejecución realizará primero una espera aleatoria mediante un random</p> </div> <div class="listingblock"> <div class="title">tres.nf</div> <div class="content"> <pre>process generarFicheroEntrada { input: val size output: path 'origin.txt' // el script puede ser multilinea // y podemos "mezclar" variables del proceso con las del script a ejecutar // si es variable del proceso no la escapamos con una barra: $size // si es variable del script la escapamos con la barra: \$x """ for x in {0..$size} do echo \$x &gt;&gt; origin.txt done """ } process simulate{ input: val value output: stdout """ sleep \$((RANDOM % 10)) echo $value """ } workflow{ simulate( generarFicheroEntrada(params.size).splitText() ) | view }</pre> </div> </div> <div class="paragraph"> <p>Si por ejemplo ejecutas</p> </div> <div class="paragraph"> <p><code>nextflow run tres.nf --size=10</code></p> </div> <div class="paragraph"> <p>repetidas veces verás que la salida es diferente en cada ejecución. Esto es debido a que el proceso <code>simulate</code> es ejecutado en paralelo (en realidad todos los valores en paralelo a la vez no, sino en bloques que puedes definir como parametro de splitText)</p> </div> <div class="paragraph"> <p>El workflow de este ejemplo es sencillo de leer pero por detrás se están ejecutando conceptos bastante importantes:</p> </div> <div class="ulist"> <ul> <li> <p>se crea un process <code>simulate</code> que permanecerá a la espera de que se vayan generando valores en su canal de entrada. Mientras no reciba un EOF en el canal, el proceso se ejecutará repetidamente por cada valor en el mismo.</p> </li> <li> <p>generarFicheroEntrada leerá de su canal de entrada un valor y enviará por el de salida un Path (no el contenido, sino un objeto Path que apunta al fichero).</p> </li> <li> <p>splitText es un operador que actua sobre los valores emitidos por un canal. Lee sobre el canal de entrada (en este caso un Path) y emite valores, uno por cada linea</p> </li> </ul> </div> <div class="paragraph"> <p>La definición del workflow es en realidad una Closure, un bloque de código, lo que permite definir el worflow de muchas formas. Por ejemplo el mismo workflow puede escribirse:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>workflow{ def fichero = generarFicheroEntrada(params.size) def split = fichero.splitText() simulate( split ).view() }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="conclusión">Conclusión</h2> <div class="sectionbody"> <div class="paragraph"> <p>En este post hemos visto cómo usar los process para ejecutar comandos de sistema dentro de un workflow. Básicamente su función es generar y ejecutar un fichero .sh con el comando que definas, integrando dicha ejecución en el flujo de trabajo permitiendo unir y controlar todas las ejecuciones.</p> </div> <div class="paragraph"> <p>También hemos visto una pequeña introducción al concepto de workflow el cual trataremos más adelante</p> </div> </div> </div> Introducción al concepto de Procesos en Nextflow Introduccion a Nextflow: Channels Jorge Aguilera 2022-09-12T00:00:00Z https://blog.jagedn.dev/blog/2022/channels.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>En el artículo <a href="basic.html">anterior</a> vimos los conceptos básicos de Nextflow (process, channel y workflow). En este, vamos a profundizar un poco más en el concepto de canales (channel)</p> </div> <div class="paragraph"> <p>El Channel es el medio por el que "hacemos llegar" datos a los procesos.</p> </div> <div class="paragraph"> <p>Existen múltiples formas de crear un canal. Algunos ejemplos:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>ch1 = Channel.create() ch1 &lt;&lt; 1 ch1 &lt;&lt; 'hola' ch2 = Channel.of( 1, 3, 5, 7 ) ch3 = Channel.fromPath( '/data/some/*.txt' ) ch4 = Channel.watchPath( '/path/*.fa' )</code></pre> </div> </div> <div class="paragraph"> <p>y el canal irá emitiendo los elementos disponibles según se vayan consumiendo (es decir, el canal es una cola no bloqueante que conecta consumidores)</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>También existe el tipo de Channel <code>value</code> que emite siempre el mismo valor y que puede ser leído mútiples veces. Por ejemplo <code>chn = Channel.value('hi')</code> crea un canal que siempre emitirá el string <code>hi</code> cuando se lea de él.</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="operadores">Operadores</h2> <div class="sectionbody"> <div class="paragraph"> <p>Los canales disponen de un conjunto de operadores (extensibles, puedes añadir los tuyos mediante el mecanismo de plugins que hablaremos en otro post) que permiten modificar los valores emitidos por estos (por ejemplo, un canal emite todos los ficheros de un directorio pero queremos filtrar por un criterio diferente al nombre)</p> </div> <div class="paragraph"> <p>Algunos de los operadores disponibles:</p> </div> <div class="ulist"> <ul> <li> <p>filter (filtra por una expresion regular o por una lógica tuya, por ejemplo <code>channel.of(1,2,3).filter{ it % 2 == 1 }.view()</code></p> </li> <li> <p>unique</p> </li> <li> <p>first, last</p> </li> <li> <p>until</p> </li> <li> <p>map</p> </li> <li> <p>collect</p> </li> <li> <p>toSortedList</p> </li> <li> <p>&#8230;&#8203; (la lista completa de los operadores por defecto está en <a href="https://www.nextflow.io/docs/latest/operator.html#" class="bare">https://www.nextflow.io/docs/latest/operator.html#</a>)</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="ejemplo">Ejemplo</h2> <div class="sectionbody"> <div class="paragraph"> <p>Como caso "práctico" vamos a crear un pipeline que descargue un CSV del Ayuntamiento de Madrid, filtre algunos registros y los muestre</p> </div> <div class="paragraph"> <p>El csv en concreto es la relacion de accidentes de trafico ocurridos durante el último año, donde se especifican, entre otros, el distrito y si hubo rastros de alcohol (campos 6 y 17 respectivamente) y el tipo de accidente (campo 7)</p> </div> <div class="paragraph"> <p><a href="https://datos.madrid.es/portal/site/egob/menuitem.c05c1f754a33a9fbe4b2e4b284f1a5a0/?vgnextoid=7c2843010d9c3610VgnVCM2000001f4a900aRCRD&amp;vgnextchannel=374512b9ace9f310VgnVCM100000171f5a0aRCRD&amp;vgnextfmt=default">La página del catálogo de datos</a></p> </div> <div class="listingblock"> <div class="title">parsecsv.nf</div> <div class="content"> <pre class="prettyprint highlight"><code>workflow { Channel.fromPath( "https://datos.madrid.es/egob/catalogo/300228-24-accidentes-trafico-detalle.csv" ) | splitCsv(sep:';') | filter{ row -&gt; // distrito &amp;&amp; alchohol row[6] == 'MORATALAZ' &amp;&amp; row[17] == 'S' } | map { row -&gt; // tipo row[7] } | view }</code></pre> </div> </div> <div class="paragraph"> <p>Si ejecutas este pipeline obtendras algo como:</p> </div> <div class="listingblock"> <div class="content"> <pre>nextflow run ./parsecsv.nf N E X T F L O W ~ version 22.04.5 Launching `./parsecsv.nf` [shrivelled_meninsky] DSL2 - revision: 93c84a05a0 Atropello a persona Vuelco Colisión múltiple Colisión múltiple Choque contra obstáculo fijo Vuelco Choque contra obstáculo fijo Choque contra obstáculo fijo Colisión fronto-lateral Alcance Choque contra obstáculo fijo Vuelco Colisión fronto-lateral Alcance Choque contra obstáculo fijo Vuelco Choque contra obstáculo fijo Choque contra obstáculo fijo Choque contra obstáculo fijo</pre> </div> </div> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>la utilidad real de los canales, y en realidad de Nextflow, va mucho más allá de este ejemplo pero creo que estos pequeños ejercicios nos sirven para ir aproximandonos al lenguaje e ir intuyendo su potencial</p> </dd> <dt class="hdlist1">INFO</dt> <dd> <p>Como puedes observar el DSL permite concatenar operadores mediante el uso del pipe "|"</p> <div class="ulist"> <ul> <li> <p>Al ejecutar este pipeline, Nextflow creará un canal (anónimo) que emitirá un elemento <code>path</code> (Nextflow es capaz de manejar URLs como si fueran ficheros locales, como en este caso)</p> </li> <li> <p>Este <code>path</code> será consumido por el operador <code>splitCSV</code> el cual a su ve emitirá las líneas del CSV parseadas como una lista</p> </li> <li> <p>Cada línea será filtrada por la ejecución de una closure que devolverá <code>true</code> o <code>false</code> para indicar si el elemento tiene que ser emitido o no</p> </li> <li> <p>El operador <code>map</code> recibe una lista de elementos (por cada linea filtrada) y emite un sólo campo de esta lista</p> </li> <li> <p>Por último usamos un operador <code>view</code> que simplemente muestra por consola lo que lee por su canal</p> </li> </ul> </div> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="conclusión">Conclusión</h2> <div class="sectionbody"> <div class="paragraph"> <p>Como se puede intuir, los canales son una herramienta imprescindible para diseñar nuestros pipelines. Su naturaleza asíncrona y capacidad de paralelizar el envío de los mensajes nos ofrecen una potencia para realizar tareas complejas muy interesante.</p> </div> </div> </div> Introducción al concepto de Channel en Nextflow Conceptos básicos Jorge Aguilera 2022-08-23T00:00:00Z https://blog.jagedn.dev/blog/2022/basic.html <div id="preamble"> <div class="sectionbody"> <div class="literalblock"> <div class="content"> <pre>Nextflow enables scalable and reproducible scientific workflows using software containers. It allows the adaptation of pipelines written in the most common scripting languages. Its fluent DSL simplifies the implementation and the deployment of complex parallel and reactive workflows on clouds and clusters.</pre> </div> </div> <div class="paragraph"> <p><a href="https://www.nextflow.io/" class="bare">https://www.nextflow.io/</a></p> </div> <div class="paragraph"> <p>En el artículo <a href="intro.html">anterior</a> vimos una introducción a Nextflow. En este vamos a profundizar un poco más en los conceptos básicos de este lenguaje</p> </div> </div> </div> <div class="sect1"> <h2 id="pipeline">Pipeline</h2> <div class="sectionbody"> <div class="paragraph"> <p>Podemos definir el pipeline como el conjunto de tareas que tiene que realizar Nextflow. Básicamente es asociarlo con el fichero (y sus includes) a ejecutar</p> </div> </div> </div> <div class="sect1"> <h2 id="process">Process</h2> <div class="sectionbody"> <div class="paragraph"> <p>El proceso, process, es la unidad básica a ejecutar. Podemos asociarlo con el comando de sistema a ejecutar para completar una tarea. Dicho comando tendrá unos parámetros de entrada y generará una salida.</p> </div> <div class="paragraph"> <p>Así mismo los procesos son independientes y no comparten un estado común sino que se comunican entre sí mediante colas (o canales)</p> </div> </div> </div> <div class="sect1"> <h2 id="channel">Channel</h2> <div class="sectionbody"> <div class="paragraph"> <p>Un canal es el mecanismo por el cual los procesos se intercambian datos. Cuando definimos un proceso declaramos su input pero no especificamos de donde leer este input. Es mediante los canales (y sus operadores) donde realizamos esta interconexión o dependencia</p> </div> </div> </div> <div class="sect1"> <h2 id="flujo_de_trabajo">Flujo de trabajo</h2> <div class="sectionbody"> <div class="paragraph"> <p>Como ya he mencionado, los procesos son unidades "atómicas" e independientes que lo único que necesitan para su ejecución es disponer de los datos de entrada que definan (y producir unos datos de salida también definidos por el propio proceso).</p> </div> <div class="paragraph"> <p>Así pues, podemos pensar que al inicio de nuestro pipeline todos los procesos se encuentran creados y a la espera de "ser alimentados". Dicha alimentación se realiza a través de los diferentes operadores que ofrece un Channel:</p> </div> <div class="listingblock"> <div class="title">hola.nf</div> <div class="content"> <pre class="prettyprint highlight"><code>process goodbye { input: path name output: stdout """ cat $name """ } process hi { input: val name output: path "name.txt" """ echo Hi $name &gt; name.txt """ } workflow { Channel.of( 'Jorge' ) | hi | goodbye | view }</code></pre> </div> </div> <div class="paragraph"> <p>En este ejemplo podemos ver dos procesos definidos (goodbye y hi)</p> </div> <div class="ulist"> <ul> <li> <p>goodbye recibe un fichero como entrada (<code>path</code>) y en su contexto lo vamos a referenciar como <code>name. Su ejecución va a consistir en volcar (`cat</code>) dicho fichero por la consola, emitiendo la salida</p> </li> <li> <p>hi por su parte recibe una cadena (<code>val</code>) y en su contexto la vamos a referenciar como <code>name</code> (no confundir con el de goodbye). Dicho proceso va a concatenar una cadena fija con el parámetro de entrada para generar un fichero <strong>de trabajo</strong> <code>name.txt</code> y emitirá la ruta de este fichero</p> </li> </ul> </div> <div class="paragraph"> <p>Por último definimos el flujo de trabajo:</p> </div> <div class="ulist"> <ul> <li> <p>Un canal emitirá una cadena fija, que será enviada al proceso <code>hi</code>. La salida de este será enviada por el canal al proceso <code>goodbye</code> y por ultimo la salida de este será volcada por consola (<code>view</code>)</p> <div class="literalblock"> <div class="content"> <pre>Este ejemplo, aunque no hace nada de utilidad, nos muestra los diferentes componentes de un pipeline.</pre> </div> </div> </li> </ul> </div> <div class="paragraph"> <p>Como podemos intuir, el orden de ejecución de los procesos no viene determinado por su posición en el fichero sino por la composición del flujo de trabajo. De esta manera Nextflow nos permitirá definir (y reutilizar) procesos en diferentes ficheros y componerlos a nuestro antojo</p> </div> <div class="literalblock"> <div class="content"> <pre>En los siguientes artículos iremos viendo, entre otras cosas, cómo ejecutar procesos en paralelo</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="executor">Executor</h2> <div class="sectionbody"> <div class="paragraph"> <p>Mientras que el proceso define el comando a ejecutar, el executor es el que define cómo se ejecutará dicho comando.</p> </div> <div class="paragraph"> <p>El executor por defecto es la máquina donde se está ejecutando el pipeline pero, sin modificar este, podemos indicarle a Nextflow qué executor usar como por ejemplo un cluster SLURM, un container de Amazon o de Google, etc</p> </div> <div class="paragraph"> <p>Así por ejemplo, cuando le indicamos a Nextflow que un pipeline lo ejecute, por ejemplo, en AWS él se encargará de aprovisionar la instancia, esperar a que se encuentre lista y ejecutar el script en esta (en realidad usando las APIs del executor en concreto)</p> </div> </div> </div> <div class="sect1"> <h2 id="programación">Programación</h2> <div class="sectionbody"> <div class="paragraph"> <p>La idea principal de Nextflow es que con la sintaxis que ofrece se disponga prácticamente de todas las herramientas para definir pipelines complejos, pero aun así permite incluir scripts con toda la complejidad que se desee.</p> </div> <div class="paragraph"> <p>Al estar desarrollado en Groovy es posible incluir scripts en el propio pipeline que nos ayuden a ampliar el lenguaje. Así mismo permite la inclusión de librerías Java (jar) simplemente colocándolas en la carpeta <code>lib</code></p> </div> <div class="listingblock"> <div class="title">random.nf</div> <div class="content"> <pre class="prettyprint highlight"><code>def cadenaRandom(){ new Random().with {(1..9).collect {(('a'..'z')).join()[ nextInt((('a'..'z')).join().length())]}.join()} } process hi { input: val name output: stdout """ echo $name is a random string """ } workflow { Channel.of( cadenaRandom() ) | hi | view }</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>nextflow run ./random.nf N E X T F L O W ~ version 22.04.5 Launching `./dos.nf` [friendly_fourier] DSL2 - revision: d0b1349f31 executor &gt; local (1) [65/ee7786] process &gt; hi (1) [100%] 1 of 1 ✔ lswwkzafv is a random string</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="conclusion">Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>En este artículo hemos visto las piezas básicas que componen un flujo de trabajo así como una breve introducción a la definición y ejecución de los procesos</p> </div> </div> </div> Conceptos básicos en Nextflow Introduccion a Nextflow Jorge Aguilera 2022-08-17T00:00:00Z https://blog.jagedn.dev/blog/2022/intro.html <div id="preamble"> <div class="sectionbody"> <div class="literalblock"> <div class="content"> <pre>Nextflow enables scalable and reproducible scientific workflows using software containers. It allows the adaptation of pipelines written in the most common scripting languages. Its fluent DSL simplifies the implementation and the deployment of complex parallel and reactive workflows on clouds and clusters.</pre> </div> </div> <div class="paragraph"> <p><a href="https://www.nextflow.io/" class="bare">https://www.nextflow.io/</a></p> </div> <div class="paragraph"> <p>Nextflow es un proyecto OpenSource muy usado sobre todo por la comunidad bioinformática (debido a que sus creadores trabajaban en esta área,) pero que puede ser usado en otros ámbitos y que básicamente permite definir procesos que puedan ser ejecutados de forma paralela tanto en local como en cloud sin tener que cambiarlos.</p> </div> <div class="paragraph"> <p>Para ello se ha creado un DSL (un lenguaje específico) en donde defines los procesos, con sus entradas, salidas, etc, y el flujo de llamadas entre los mismos. Este "pipeline" es ejecutado por Nextflow en el entorno que le digas y él se encarga de aprovisionar los recursos necesarios para ejecutarlo y vigilar su ejecución.</p> </div> <div class="paragraph"> <p>El DSL es agnóstico a lo que tú quieras ejecutar. Es decir, puedes definir un proceso que recibe la ruta de un fichero como parámetro de entrada y tú decides qué hacer con él: que Python lo ejecute, volcarlo a la salida con un <code>cat</code>, ejecutar un programa de procesado de imágenes, &#8230;&#8203; Lo único que "necesita" Nextflow es que el <code>exitStatus</code> del programa le diga si ha ido bien o no para poder continuar con el resto de tareas</p> </div> <div class="paragraph"> <p>Vamos a verlo con un <code>hello-world</code></p> </div> <div class="listingblock"> <div class="title">main.nf</div> <div class="content"> <pre class="prettyprint highlight"><code>process sayHello { input: val x output: stdout script: """ echo '$x world!' """ } workflow { sayHello('hola') | view }</code></pre> </div> </div> <div class="paragraph"> <p>En este pipeline creamos un proceso <code>sayHello</code> que recibe un <code>String</code>, su retorno va a ser un volcado de la ejecución, y que lo que va a ejecutar es un comando de bash <code>echo</code></p> </div> <div class="paragraph"> <p>Por otra parte, se define el workflow del proceso, el qué ejecutar y en qué orden. En este ejemplo simplemente vamos a ejecutar el proceso anterior y vamos a volcar su salida por pantalla</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="console">nextflow run ./hola.nf N E X T F L O W ~ version 22.04.5 Launching `./hola.nf` [jolly_shaw] DSL2 - revision: 3df369f295 executor &gt; local (1) [9a/eed166] process &gt; sayHello [100%] 1 of 1 ✔ hola world!</code></pre> </div> </div> <div class="paragraph"> <p>Podríamos ejecutar el mismo proceso vía Docker:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="console">nextflow run ./hola.nf -with-docker -process.container=ubuntu N E X T F L O W ~ version 22.04.5 Launching `./hola.nf` [fervent_wescoff] DSL2 - revision: 3df369f295 executor &gt; local (1) [bf/f66b2d] process &gt; sayHello [100%] 1 of 1 ✔ hola world!</code></pre> </div> </div> <div class="paragraph"> <p>Obviamente al ser un simple echo no hay diferencia, pero la idea es que podrías ejecutar el comando usando la imagen que te venga bien sin tener que instalar nada en tu equipo (más que Docker)</p> </div> <div class="paragraph"> <p>Además de Docker, puedes ejecutar el proceso contra numerosos servicios de cloud como AWS, Google, Azure, Kubernetes , &#8230;&#8203;</p> </div> </div> </div> <div class="sect1"> <h2 id="instalación">Instalación</h2> <div class="sectionbody"> <div class="paragraph"> <p>Nextflow requiere tener instalada una versión de Java moderna, aunque también corre con la versión 11.</p> </div> <div class="paragraph"> <p>Para instalarlo simplemente ejecutaremos:</p> </div> <div class="paragraph"> <p><code>curl -s <a href="https://get.nextflow.io" class="bare">https://get.nextflow.io</a> | bash</code></p> </div> <div class="paragraph"> <p>(para más detalle consultar la página oficial <a href="https://www.nextflow.io/" class="bare">https://www.nextflow.io/</a>)</p> </div> <div class="paragraph"> <p>Si todo ha ido bien y creas el fichero anterior deberías poder ejecutar el comando tal como se muestra en el apartado anterior.</p> </div> </div> </div> <div class="sect1"> <h2 id="canales">Canales</h2> <div class="sectionbody"> <div class="paragraph"> <p>Hasta ahora solamente hemos visto cómo ejecutar un proceso, pero una de las capacidades de Nextflow es poder definir varios procesos y expresar cómo queremos que se ejecuten (paralelo, dependientes entre sí).</p> </div> <div class="paragraph"> <p>Para ello usa el concepto de <code>Channel</code> y <code>operators</code>. Un channel podemos verlo como el <code>main</code> de un flujo de procesos y donde "concatenamos" la ejecución de los mismos</p> </div> <div class="paragraph"> <p>Vamos a modificar el ejemplo anterior:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>process sayHello { input: val x output: stdout script: """ echo '$x world!' """ } workflow { Channel.of('Bonjour', 'Ciao', 'Hello', 'Hola') | sayHello | view }</code></pre> </div> </div> <div class="paragraph"> <p><code>Channel.of</code> recibe una lista de objetos y por cada uno de ellos invoca al proceso <code>sayHello</code> mostrando la salida de cada uno</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>N E X T F L O W ~ version 22.04.5 Launching `./hola.nf` [golden_panini] DSL2 - revision: 68e7da3913 executor &gt; local (4) [ea/bb9b4b] process &gt; sayHello (2) [100%] 4 of 4 ✔ Bonjour world! Hola world! Hello world! Ciao world!</code></pre> </div> </div> <div class="paragraph"> <p><code>of</code> es sólo uno de los muchos operadores que ofrece <code>Channel</code> (con el añadido de que puedes crear los tuyos si echas en falta alguno). Hay operadores para filtrar, transformar, combinar, paralelizar, etc</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>Channel .from( 'a', 'b', 'aa', 'bc', 3, 4.5 ) .filter( Number ) .view() Channel .from( 1, 2, 3, 4, 5 ) .filter { it % 2 == 1 } .view() Channel .from(1,2,3,40,50) .branch { small: it &lt; 10 large: it &gt; 10 } .set { result }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="conclusion">Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>En próximos post espero poder ir explicando más funcionalidades y casos de uso. Por ahora basta deecir que &#8230;&#8203; está implementado en Groovy y que formo parte del equipo de desarrollo</p> </div> </div> </div> Introducción a Nextflow Tootear desde Google Sheet Jorge Aguilera 2022-05-17T00:00:00Z https://blog.jagedn.dev/blog/2022/google-sheet-mastodon.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>A estas alturas no creo que haga mucha falta explicar qué es Mastodon pero por si acaso simplemente decir que es una aplicación para el microblogging similar a Twitter aunque con algunas (muchas) diferencias.</p> </div> <div class="paragraph"> <p>A diferencia de Twitter un usuario de Mastodon lo primero que tiene que elegir es a qué instancia quiere pertenecer, entiendo instancia como una "comunidad", "grupo de usuarios con algo en común", y es esa instancia la que se federa con otras instancias tejiendo una red de instancias de tal forma que el toot (equivalente a tweet) se puede propagar entre la red.</p> </div> <div class="paragraph"> <p>El API de Mastodon es bastante simple (aunque totalmente funcinoal) y con un simple POST podemos enviar toots.</p> </div> <div class="paragraph"> <p>En este post vamos a ver cómo mantener en una hoja de Google Sheet una lista de refranes preparados que se enviarán de forma aleatoria cada día a una hora determinada por nosotros</p> </div> </div> </div> <div class="sect1"> <h2 id="mastodon">Mastodon</h2> <div class="sectionbody"> <div class="paragraph"> <p>Una vez que estás dado de alta en una instancia puedes crear un API Token desde tu perfil, en opciones de Desarrollo</p> </div> <div class="paragraph"> <p>Crear una nueva aplicación con el nombre que quieras y marcando la opción de <code>write</code></p> </div> <div class="paragraph"> <p>Te generará una token (una cadena de caracteres y simbolos raros).</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>No compartas este token pues sirve para tootear en tu nombre</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="google_sheet">Google Sheet</h2> <div class="sectionbody"> <div class="paragraph"> <p>La estructura de la hoja va a ser supersimple:</p> </div> <div class="ulist"> <ul> <li> <p>en la primera fila tendremos una cabecera con dos columnnas, Estado y Refrán</p> </li> <li> <p>en las siguientes filas vamos a escribir tantos refranes como queremos, uno por fila dejando la primera columna vacía si queremos que el refrán se envíe o con el texto "NO ENVIAR" si por alguna razón no queremos que sea enviado</p> </li> </ul> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 50%;"> <col style="width: 50%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">Estado</th> <th class="tableblock halign-left valign-top">Refrán</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Perro ladrador, poco mordedor</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Sabe más el diablo por viejo que por diablo</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">NO ENVIAR</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">No me mires de reojo &#8230;&#8203; buscar como continuaba</p></td> </tr> </tbody> </table> </div> </div> <div class="sect1"> <h2 id="script">Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>En el menú de Google Sheet seleccionamos <code>Extensiones</code>, <code>Apps Script</code> y se nos abrirá una ventana nueva</p> </div> <div class="paragraph"> <p>De forma predeterminada te habrá escrito un par de líneas de código a modo de ejemplo que no nos interesa. Las borramos y las sustituimos por este código:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>var instancia = 'mastodon.madrid'; var bootToken = '1d04U1Wnc0h-xxxxxxXXXX-_YYYY'; function sendMastodon() { var ss = SpreadsheetApp.getActiveSpreadsheet(); var sheet = ss.getActiveSheet(); const rows = sheet.getRange(2,1,100,2).getValues() var candidates = [] for( var r=0; r&lt;rows.length; r++){ const row = rows[r]; if( row[0].toString() !== ""){ continue; } if( row[1].toString().trim().length == 0){ continue; } candidates.push(row[1]) } const toot = candidates[Math.floor(Math.random() * candidates.length)]; var payload = { 'status': toot, } var options = { 'method' : 'post', 'contentType': 'application/json', 'payload': JSON.stringify(payload), 'headers': { 'Authorization': `Bearer ${bootToken}` }, 'muteHttpExceptions':true }; Logger.log(payload) var url = `https://${instancia}/api/v1/statuses`; const resp = UrlFetchApp.fetch(url, options); Logger.log(resp) }</code></pre> </div> </div> <div class="paragraph"> <p>En las dos primeras tienes que personalizar con los datos de tu usuario:</p> </div> <div class="ulist"> <ul> <li> <p>la instancia es el nombre del servidor (por ejemplo mi servidor es <a href="https://mastodon.madrid/" class="bare">https://mastodon.madrid/</a> así que la variable es <code>mastodon.madrid</code>)</p> </li> <li> <p>el token que generamos al principio</p> </li> </ul> </div> <div class="paragraph"> <p>Básicamente el script lo que hace es recuperar las 100 primeras filas y filtrar aquellas que la primera columna está "limpia" (si tuviera texto no se envia) y la segunda columna tiene algo (el refran a enviar)</p> </div> <div class="paragraph"> <p>Una vez filtrados los refranes posibles se elige una de forma aleatoria y se prepara un POST para enviar</p> </div> <div class="ulist"> <ul> <li> <p>el payload es un json con un solo campo <code>status</code> que contiene el toot</p> </li> <li> <p>headers contiene una autorizacion con el token</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="probando">Probando</h2> <div class="sectionbody"> <div class="paragraph"> <p>Para probar que todo está bien ejecutaremos el script (que nos pedirá permisos para poder ejecutar en nuestra cuenta)</p> </div> <div class="paragraph"> <p>Simplemente nos aseguraremos que la funcion <code>sendMastodon</code> se encuentra en el listbox del menú superior, junto al botón <code>Ejecutar</code>. Pulsaremos el botón <code>Ejecutar</code> y si todo ha ido bien habremos envíado un toot a nuestra instancia</p> </div> </div> </div> <div class="sect1"> <h2 id="scheduler">Scheduler</h2> <div class="sectionbody"> <div class="paragraph"> <p>Podemos pulsar el botón ejecutar tantas veces como queramos pero para hacerlo de forma desatendida usaremos la capacidad de planificar una llamada que nos ofrece Google Sheet:</p> </div> <div class="paragraph"> <p>En el menú vertical de la izquierda buscaremos <code>Activadores</code> (icono de un reloj despertador) y crearemos un nuevo activador</p> </div> <div class="ulist"> <ul> <li> <p>seleccionamos la funcion <code>sendMastodon</code></p> </li> <li> <p>fuente de evento <code>Según tiempo</code></p> </li> <li> <p>temporizador por dias</p> </li> <li> <p>a las 09:00</p> </li> </ul> </div> <div class="paragraph"> <p>(obviamente tú seleccionarás la frecuencia y hora a la que quieres ejecutarlo, esto es un ejemplo)</p> </div> </div> </div> cómo tootear en Mastodon de forma desatendida desde Google Sheet Docker-compose con Gradle Jorge Aguilera 2022-04-13T00:00:00Z https://blog.jagedn.dev/blog/2022/gradle-docker-compose.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Probablemente este post a los puristas del TDD les resulte una aberración porque lo que deberías es fomentar el uso de los test para guiar el desarrollo de tu aplicación.</p> </div> <div class="paragraph"> <p>En esta idea una de las batallas que tienes que lidiar suele ser el tema de cómo preparar una infraestructura para estos test. Por ejemplo, tu aplicación requiere una base de datos y te toca usar un H2, pero puede ser más complicado y requerir además un Redis, un RabbitMQ etc por lo que terminas usando <code>test-containers</code> (todo un acierto)</p> </div> <div class="paragraph"> <p>Todo eso está muy bien pero a veces el desarrollo no puede, o no quieres, que sea guiado por los test. A veces tienes que montar todo el entorno y tirar de depurador para reproducir un comportamiento extraño, por ejemplo. Y casi siempre esto lo resuelves montando un docker-compose donde configuras toda la infra y/o servicios requeridos por tu aplicación, donde tienes que lidiar con puertos, persistencia , levantar los servicios etc</p> </div> <div class="paragraph"> <p>En este post vamos a ver cómo podemos "integrar" este docker-compose con nuestro <code>build.gradle</code> de tal forma que podamos levantar esos servicios e integrarlos en nuestra app de forma cómoda integrandola en nuestras task. Para ello vamos a usar el plugin <code>com.avast.gradle.docker-compose</code></p> </div> </div> </div> <div class="sect1"> <h2 id="docker_compose">Docker-compose</h2> <div class="sectionbody"> <div class="paragraph"> <p>Supongamos que nuestra arquitectura requiere de una base de datos MySQL, un Redis y un servicio propio tuyo (distinto del que estás trabajando). Probablemente nuestro docker-compose de desarrollo sería algo como:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>version: "3.5" services: mysql: image: mysql:5.6 ports: - 3306 environment: MYSQL_ALLOW_EMPTY_PASSWORD: "yes" cache: image: redis:6.2-alpine restart: always ports: - 6379 command: redis-server --save 20 1 --loglevel warning --requirepass tupwd business: image: pvidasoftware/greatapp ports: - 8080</code></pre> </div> </div> <div class="paragraph"> <p>Probablmente tu docker-compose tenga una configuracion distinta para los puertos y mapees un puerto del contenedor con un puerto fijo de tu maquina para poder así acceder al servicio. No es mala idea pero al final es un infierno de configuración cuando el proyecto es compartido entre varios miembros y hay que ponerse de acuerdo en qué puertos usamos para qué cosas</p> </div> </div> </div> <div class="sect1"> <h2 id="gradle">Gradle</h2> <div class="sectionbody"> <div class="paragraph"> <p>En primer lugar vamos a incluir el plugin de <code>avast</code> en nuestro build:</p> </div> <div class="listingblock"> <div class="title">build.gradle</div> <div class="content"> <pre class="prettyprint highlight"><code>plugins { id "java" <i class="conum" data-value="1"></i><b>(1)</b> .... id "com.avast.gradle.docker-compose" version "0.15.2" <i class="conum" data-value="2"></i><b>(2)</b> }</code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>Si es un proyecto java sueles tener este plugin, pero no es necesario para este post</td> </tr> <tr> <td><i class="conum" data-value="2"></i><b>2</b></td> <td>Añadimos el pluign de Avast, la ultima version a día de hoy</td> </tr> </table> </div> <div class="paragraph"> <p>Esto nos va añadir una serie de <code>tasks</code> en el grupo <code>docker</code> como por ejemplo <code>composeUp</code> y <code>composeDown</code> que obviamente sirven para gestionar un docker-compose que le indiquemos</p> </div> <div class="paragraph"> <p>En segundo lugar vamos a indicarle al plugin donde reside nuestro docker-compose</p> </div> <div class="listingblock"> <div class="title">build.gradle</div> <div class="content"> <pre class="prettyprint highlight"><code>dockerCompose { useComposeFiles.add("infra/docker-compose.yml") isRequiredBy(tasks.run) }</code></pre> </div> </div> <div class="paragraph"> <p>En este ejemplo le estamos diciendo que tenemos un docker-compose en el directorio <code>infra</code> y que la tarea que está interesada en controlar el estado del docker-compose es <code>run</code> (tipica tarea para correr el java)</p> </div> <div class="paragraph"> <p>Por último vamos a "enlazar" los servicios del docker con nuestra tarea que ejecuta la aplicación mediante variables de entorno:</p> </div> <div class="listingblock"> <div class="title">build.gradle</div> <div class="content"> <pre class="prettyprint highlight"><code>run.doFirst { dockerCompose.exposeAsEnvironment(run) def mysqlInfo = dockerCompose.servicesInfos.mysql.firstContainer <i class="conum" data-value="1"></i><b>(1)</b> def redisInfo = dockerCompose.servicesInfos.cache.firstContainer <i class="conum" data-value="2"></i><b>(2)</b> def businessInfo = dockerCompose.servicesInfos.business.firstContainer <i class="conum" data-value="3"></i><b>(3)</b> environment "JDBC_URL", "mysql://${mysqlInfo.host}:${mysqlInfo.ports[3306]}/" environment "REDIS_HOST", redisInfo.host environment "REDIS_PORT", redisInfo.ports[6379] environment "SERVICE_API_URL", "http://${businessInfo.host}:${businessInfo.ports[8080]}/api/" }</code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>servicesInfos.mysql obtiene info del servicio llamado mysql en el docker-compose</td> </tr> <tr> <td><i class="conum" data-value="2"></i><b>2</b></td> <td>servicesInfos.cache obtiene info del servicio llamado cache en el docker-compose</td> </tr> <tr> <td><i class="conum" data-value="3"></i><b>3</b></td> <td>servicesInfos.business obtiene info del servicio llamado business en el docker-compose</td> </tr> </table> </div> <div class="paragraph"> <p>El plugin se encarga de levantar los servicios y proporcionarnos información sobre los puertos donde está escuchando cada uno, información que usamos para configurar nuestra tarea. En este ejemplo configuramos un jdbc, un host y un puerto y una url a un api que son las variables que se supone requiere nuestra aplicacion para poder ejecutarse correctamente.</p> </div> <div class="paragraph"> <p>Cuando ejecutemos la tarea <code>run</code>, los servicios se levantan, se ejecuta nuestra aplicación y cuando paramos la tarea, el plugin se encarga de parar el docker-compose (alguna vez me ha fallado y me ha tocado pararlos a mano usando la tarea <code>composeDown</code>)</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">NOTE</dt> <dd> <p>Este plugin tiene unas cuantas configuraciones interesantes adicionales que iré investigando</p> </dd> </dl> </div> </div> </div> cómo gestionar un docker-compose desde Gradle Gradle Configuration Jorge Aguilera 2022-03-14T00:00:00Z https://blog.jagedn.dev/blog/2022/gradle-new-configuration.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Seguro que ya lo sabes, pero por si acaso, Gradle es una herramienta para construir artefactos de software. Es una alternativa al archifamoso Maven que en lugar de basarse en una definición de las tareas en XML, com hace este, ha desarrollado su propio DSL siendo el fichero <code>build.gradle</code> el "punto de entrada" donde se definen las tareas, dependencias, etc.</p> </div> <div class="paragraph"> <p>En Gradle una <code>configuration</code> es un conjunto de artefactos junto con sus dependencias. Así por ejemplo, en un proyecto típico de Java, Gradle ofrece de por sí dos configuraciones, <code>main</code> y <code>test</code>, representadas cada una por sus respectivos directorios.</p> </div> <div class="paragraph"> <p>Así cuando ubicamos un fichero .java en el directorio <code>src/main/java</code> estamos asignandolo a la configuración <code>main</code>, por lo que se usarán las dependencias configuradas en <code>main</code> sobre él, mientras que si ubicamos el fichero en el directorio <code>test</code> se aplicarán otras dependencias.</p> </div> <div class="paragraph"> <p>Esto es útil para poder indicar de forma sencilla qué dependencias van en cada <code>configuration</code>. Por ejemplo, las dependencias anotadas con <code>testImplementation</code> no se utilizan en construir los artefactos ubicados en <code>main</code></p> </div> <div class="paragraph"> <p>Lo bueno de Gradle es que podemos extender este modelo para incluir nuevas configuraciones de una forma sencilla.</p> </div> </div> </div> <div class="sect1"> <h2 id="objetivo">Objetivo</h2> <div class="sectionbody"> <div class="paragraph"> <p>Queremos incluir en nuestro proyecto un nuevo tipo de Tests con unas necesidades específicas y queremos que se integren dentro del resto de tareas pudiendo definir sus depencias, etc.</p> </div> <div class="paragraph"> <p>Por necesidades específicas puedes entender cualquier cosa: unos tests que sólo se pueden ejecutar en un entorno dockerizado concreto, con unas variables de entorno particulares, requieren un software instalado previamente, etc</p> </div> <div class="paragraph"> <p>La solución habitual es etiquetarlos con algún tipo de condición de tal forma que si no se cumplen los requisitos, el test se ignore, pero al final terminamos teniendo una mezcla de tests que dificulta su ejecución e incluso depuración.</p> </div> <div class="paragraph"> <p>En este ejemplo lo que vamos a crear es una configuración específica para testear una imagen nativa creada por el proyecto usando GraalVM. <strong>Estos tests van a ejecutar la aplicación nativa y comprobar su funcionamiento como si fueran un usuario ejecutandola desde consola</strong></p> </div> </div> </div> <div class="sect1"> <h2 id="nativeclitest">nativeCliTest</h2> <div class="sectionbody"> <div class="paragraph"> <p>Como ya hemos dicho, vamos a ubicar los test en un nuevo directorio, a la misma altura que el directorio <code>test</code> (y <code>main</code>) . Una vez terminada la configuración, nuestro editor lo va a reconocer como uno más.</p> </div> <div class="imageblock"> <div class="content"> <span class="alt">Diagram</span> </div> </div> </div> </div> <div class="sect1"> <h2 id="build_gradle">Build.gradle</h2> <div class="sectionbody"> <div class="paragraph"> <p>Para incluir este nuevo directorio como una nueva configuración en gradle, modificaremos el <code>build.gradle</code></p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>def nativeCliTest = sourceSets.create('nativeCliTest') configurations[nativeCliTest.implementationConfigurationName].extendsFrom(configurations.testImplementation) configurations[nativeCliTest.runtimeOnlyConfigurationName].extendsFrom(configurations.testRuntimeOnly)</code></pre> </div> </div> <div class="paragraph"> <p>Con estas líneas estamos creando una nueva configuración igual a la de <code>test</code></p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>dependencies{ api '....' implementation '....' testImplementation '.....' nativeCliTestImplementation project nativeCliTestImplementation "org.codehaus.groovy:groovy-sql:3.0.9" }</code></pre> </div> </div> <div class="paragraph"> <p>Le indicamos a gradle que los artefactos bajo la nueva configuración requieren de las dependencias del proyecto.</p> </div> <div class="paragraph"> <p>Si para estos tipos de test requerimos alguna dependencia extra podemos indicarla como en el ejemplo (groovy-sql) y así no estaremos "contaminando" a las otras configuraciones (es decir, en este ejemplo los artefactos de <code>main</code> ni de <code>test</code> no ven esta nueva dependencia)</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>def nativeCliTestTask = tasks.register('nativeCliTest', Test) { description = 'Runs nativeCli tests.' group = 'verification' useJUnitPlatform() testClassesDirs = nativeCliTest.output.classesDirs classpath = configurations[nativeCliTest.runtimeClasspathConfigurationName] + nativeCliTest.output dependsOn nativeCompile environment 'NATIVE_BINARY_PATH', "$buildDir/native/nativeCompile/miaplicacion" } tasks.named('check') { dependsOn(nativeCliTestTask) }</code></pre> </div> </div> <div class="paragraph"> <p>Creamos una nueva tarea <code>nativeCliTestTask</code> (o como quieras llamarla), que extiende <code>Test</code> y la configuramos para que use las dependencias de <code>nativeCliTest</code></p> </div> <div class="paragraph"> <p>Así mismo la incluimos dentro de las tareas necesarias para completar la tarea <code>check</code>, es decir, cuando le indiquemos a Gradle que queremos ejecutar la tarea <code>check</code>, gradle ejecutará :</p> </div> <div class="ulist"> <ul> <li> <p>compileXXXX</p> </li> <li> <p>build</p> </li> <li> <p>test</p> </li> <li> <p>integrationTest (si lo hubiera)</p> </li> <li> <p>nativeCompile</p> </li> <li> <p>nativeCliTestTask</p> </li> <li> <p>check</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="test">Test</h2> <div class="sectionbody"> <div class="paragraph"> <p>Con esta configuración cualquier test que creemos en la carpeta <code>nativeCliTest</code> dispondrá de una variable de entorno <code>NATIVE_BINARY_PATH</code> con la ruta a la imagen nativa generada previamente</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">TIP</dt> <dd> <p>Obviamente este es mi caso particular. En el tuyo lo que hacen particulares a estos test puede ser cualquier otra variable de entorno, ejecutable, etc</p> </dd> </dl> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>import groovy.sql.Sql import org.testcontainers.containers.MySQLContainer import spock.lang.Specification import spock.lang.Timeout class MysqlTest extends Specification { static MySQLContainer container static { container = new MySQLContainer("mysql:5.6") container.start() } @Timeout(30) def 'should run native binary' () { given: def BIN = System.getenv('NATIVE_BINARY_PATH') def CLI = [BIN, '-u', container.username, '-p', container.password, '--url', container.jdbcUrl, '--driver', 'com.mysql.cj.jdbc.Driver', '--dialect', 'mysql' ] when: def proc = new ProcessBuilder() .command(CLI) .redirectErrorStream(true) .start() and: def result = proc.waitFor() then: result == 0 and: Sql.newInstance(container.jdbcUrl, container.username, container.password) .rows("SELECT * FROM mytable") } }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="ide">IDE</h2> <div class="sectionbody"> <div class="paragraph"> <p>(Al menos con Intellij) Al configurar un nuevo sourceSet el IDE es capaz de reconecer qué tipo es y qué dependencias necesita, etc y nos permite ejecutar y depurar cada test de forma independiente si lo desamos</p> </div> </div> </div> <div class="sect1"> <h2 id="conclusion">Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>En este post me he centrado en añadir un nuevo tipo de test al estilo de <code>integrationTest</code> o <code>functionalTest</code> pero puedes extenderlo a cualquier otro tipo de artefactos que requieran unas dependencias especiales</p> </div> </div> </div> cómo crear una nueva configuracion en Gradle Builders Jorge Aguilera 2022-03-03T00:00:00Z https://blog.jagedn.dev/blog/effective-java/2-builders.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>En el <a href="1-constructors.html">post</a> anterior vimos cómo usar Factorias y las ventajas que estas pueden aportar sobre los constructores</p> </div> <div class="paragraph"> <p>En este post vamos a ver otra forma de construir objetos, los Builders.</p> </div> </div> </div> <div class="sect1"> <h2 id="consider_a_builder_when_faced_with_many_constructor_parameters">"Consider a builder when faced with many constructor parameters"</h2> <div class="sectionbody"> <div class="paragraph"> <p>Tanto el uso de factorías como el de constructores tienen un problema cuando el número de parámetros para construir una clase empieza a ser elevado</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">NOTE</dt> <dd> <p>Y cúando es elevado? pues cada cual tendrá su opinión pero en mi opinión más de tres parámetros ya es una señal de que esa clase va a necesitar más bien pronto que tarde otro parámetro más y sería buena idea aplicar un Builder</p> </dd> <dt class="hdlist1">INFO</dt> <dd> <p>Cuando te encuentras creando métodos similares a los que le vas añadiendo un parámetro cada vez se le llama "telescoping constructor"</p> </dd> </dl> </div> <div class="listingblock"> <div class="title">telescoping constructor</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="java">class Person{ public static Person newInstance(){ return new Person(); } public static Person newInstance(String nombre){ return new Person(nombre); } public static Person newInstance(String nombre, int edad){ return new Person(nombre, edad...); } public static Person newInstance(String nombre, int edad, Date nacimiento){ return new Person(nombre, edad...); } public static Person newInstance(String nombre, int edad, Date nacimiento, Ciudad ciudad){ return new Person(nombre, edad...); } ... }</code></pre> </div> </div> <div class="paragraph"> <p>Otra forma típica de inicializar objetos cuando el número de parámetros es numeroso es aplicando la aproximación de <code>JavaBeans</code> creando métodos get/set para cada propiedad de la instancia:</p> </div> <div class="listingblock"> <div class="title">java beans</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="java">class Person{ String nombre; int edad; Ciudad ciudad; ... getters/setters } Person p = new Person(); p.setNombre("nombre"); p.setEdad(12); p.setXXX</code></pre> </div> </div> <div class="paragraph"> <p><strong>Sin embargo esta forma tiene muchos problemas</strong> como por ejemplo la validación de que todos los parámetros han sido proporcionados, es muy "verbose", dificil de seguir y <strong>no puede crear objetos inmutables</strong>.</p> </div> </div> </div> <div class="sect1"> <h2 id="builder">Builder</h2> <div class="sectionbody"> <div class="paragraph"> <p>Por todo ello el otro patrón que se aplica es creando un <code>Builder</code></p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="java">class Person{ private final String nombre; public int getNombre() { return nombre;} // NO tenemos metodo setNombre public static class Builder{ private final String nombre; public Builder(){} public Builder nombre(String nombre){ nombre = nombre; return this;} ... public Person build(){ // validar que tenemos todos los parametros necesarios return new Person(this); } } private Person(Builder builder){ nombre = builder.nombre; ... } }</code></pre> </div> </div> <div class="paragraph"> <p>y el código para crear una instancia Person sería:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="java">Person a = new Person.Builder().nombre("pepe").build();</code></pre> </div> </div> <div class="dlist"> <dl> <dt class="hdlist1">TIP</dt> <dd> <p>Si por ejemplo la clase requiere de unos parámetros requeridos es fácil pedirlos en el constructor del Builder y declarar así explicitamente que son necesarios.</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="the_builder_pattern_is_well_suited_to_class_hierarchies">"The Builder pattern is well suited to class hierarchies"</h2> <div class="sectionbody"> <div class="paragraph"> <p>Esta capacidad del patrón Builder no es fácil de ver de primeras (al menos a mí) pero es muy potente</p> </div> <div class="paragraph"> <p>Cuando tenemos una jerarquía de objetos tipo clase base "A" y otras clases que extienden de ella, "B" y "C", podemos aplicar el patrón Builder usando genéricos de tal forma que reutilizemos al máximo los builders</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="java">public abstract class Person{ abstract static class Builder&lt;T extends Builder&lt;T&gt;&gt;{ public Builder(){ } public T nombre(int nombre){ this.nombre = nombre; return self(); } abstract Person build(); protected abstract T self(); } private Person(Builder&lt;?&gt; builder){ this.nombre = builder.nombre; } String nombre; }</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="java">public class Cliente extends Person{ public static class Builder extends Person.Builder&lt;Builder&gt;{ public Builder(){ } @Override public CLiente build(){ return new Cliente(this) } int codigo; public T codigo(int codigo){ this.codigo=codigo; return self(); } @Override protected Builder self(){ return this;} } int codigo; private Cliente(Builder builder){ this.codigo = builder.codigo; } }</code></pre> </div> </div> <div class="paragraph"> <p>El "truco" se encuentra en el Generic de la clase A: <code>Builder&lt;T extends Builder&lt;T&gt; &gt;</code> así como en el método <code>self</code>. Este es usado internamente por el builder para permitir al compilador poder concatenar las llamadas</p> </div> <div class="paragraph"> <p><code>Person person = new Cliente.Builder().nombre("pepe").codigo(2).build()</code></p> </div> </div> </div> Apuntes sobre el libro Effective Java. Capitulo dedicado a usar builders para construir objetos Private Constructor Jorge Aguilera 2022-03-03T00:00:00Z https://blog.jagedn.dev/blog/effective-java/3-private-constructor.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>En el <a href="1-constructors.html">post</a> anterior vimos cómo usar Factorias y las ventajas que estas pueden aportar sobre los constructores mientras que en el segundo <a href="2-builders.html">post</a> veíamos cómo usar el patrón Builder a la hora de construir objetos</p> </div> <div class="paragraph"> <p>En este post (corto) vamos a ver las ventajas que tiene y cuándo aplicar un constructor privado.</p> </div> </div> </div> <div class="sect1"> <h2 id="enforce_noninstantiability_with_a_private_constructor">"Enforce noninstantiability with a private constructor"</h2> <div class="sectionbody"> <div class="paragraph"> <p>Muchas veces nos encontramos con la típica clase <code>Util</code> que lo único que contiene son un buen puñado de funciones y campos privados, "atentando" contra todo diseño orientado a objetos. Sin entrar en tantas exquisitices estas clases sí son útiles cuando consiguen agrupar un número de funciones comunes (el caso más común podría ser la clase <code>java.util.Math</code>)</p> </div> <div class="paragraph"> <p>La característica principal de estas clases es el que no tienen por objetivo ser instanciable. No tienen sentido como objetos tal cual y lo que pretendemos es usar los métodos static directamente. <strong>Sin embargo</strong>, si una clase no tiene un constructor Java crea uno por defecto sin parámetro y <strong>público</strong> con lo que cualquiera que vaya a usar esta clase puede estar tentado a instanciar uno objeto de esta clase.</p> </div> <div class="paragraph"> <p>En muchos casos, para evitar esto, se define la clase como <strong>abstract</strong> para evitar su instanciación pero el problema es que se podría crear una clase que la heredera y esta ofrecer el constructor.</p> </div> <div class="paragraph"> <p>Por eso, cuando lo que queremos es tener una clase <code>Util</code> es aconsejable añadirle un constructor sin parámetros con visibiilidad <code>private</code></p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="java">public class CalculosHacienda{ private CalculosHacienda(){ throw new AssertionError(); // no es necesario pero así reforzamos que no se puede crear el objeto } }</code></pre> </div> </div> <div class="paragraph"> <p>Como bola extra, el crear el método privado hace que la clase no pueda ser extendidas por otras pues el constructor que estas implementaran NO podría llamar al de la clase padre al ser private</p> </div> </div> </div> Apuntes sobre el libro Effective Java. Capitulo dedicado a usar builders para construir objetos Factorias vs Constructores Jorge Aguilera 2022-02-23T00:00:00Z https://blog.jagedn.dev/blog/effective-java/1-constructors.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>El tema de los constructores de objetos es prácticamente lo primero que se aprende cuando empiezas a usar el paradigma OOP (programación orientada a objetos).</p> </div> <div class="paragraph"> <p>Yo lo tuve que aprender en el paso de C a C plus plus (en el cual supongo que se inspiró luego Java y otros) y recuerdo que me explotó la cabeza cuando por fín más o menos lo entendí, teniendo en cuenta que además C plus plus permite la herencia múltiple, por lo que las llamadas entre constructores de la clase instanciada y las heredadas era todo un laberinto.</p> </div> <div class="paragraph"> <p>En Java el método que se llame como la clase es el constructor, y puedes tener más de uno simplemente definiendo diferentes parámetros de entrada:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="java">class Person{ Person(){} Person(String nombre) Person(String nombre, int edad) Person(String nombre, int edad, String pais) Person(String nombre, int edad, String pais, String moneda) }</code></pre> </div> </div> <div class="paragraph"> <p>Todos hemos hecho estos constructores (y de hecho me consta que seguimos haciendolos, no me escondo) y sufrido por ello. Effective Java propone una serie de consejos para mejorar la construcción de objetos:</p> </div> </div> </div> <div class="sect1"> <h2 id="consider_static_factory_methods_instead_of_constructors">"Consider static factory methods instead of constructors"</h2> <div class="sectionbody"> <div class="paragraph"> <p>Además de los constructores típicos (o en lugar de), el autor propone usar métodos estáticos que sirvan para construir los objetos. Por ejemplo:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="java">class Person{ public static Person newInstance(){ return new A(); } public static Person newInstanceWithName(String nombre){ return new A(nombre); } public static Person newInstanceWithNameAndAge(String nombre, int edad){ return new A(nombre, edad); } ... }</code></pre> </div> </div> <div class="paragraph"> <p>Aunque nada te obliga a seguir haciendo los constructores públicos, la propuesta es hacerlos "invisibles" al resto de clases en favor de los métodos factory</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">TIP</dt> <dd> <p>a diferencia del constructor (que tiene que llamarse como la clase), los métodos pueden tener nombre. No es lo mismo "new A(arg0, arg1)" que "A.newInstanceWithNameAndAge( name, age)"</p> </dd> </dl> </div> <div class="paragraph"> <p>Cuando el número de parámetros en el constructor no ayuda en elegir cual de ellos usar, pero un factory método sí pude hacerlo.</p> </div> <div class="paragraph"> <p><strong>Si tienes un objeto con uno o varios constructores, o si el número de parámetros para invocarlo es "grande" o "confuso", hazlos privados o mejor aún, eliminalos, y conviertélos en métodos static factory</strong></p> </div> <div class="dlist"> <dl> <dt class="hdlist1">TIP</dt> <dd> <p>otra ventaja es que a diferencia del constructor, que siempre crea un objeto nuevo, el método no tiene porqué.</p> </dd> </dl> </div> <div class="paragraph"> <p>Puedes entonces jugar con Caches o instancias construidas como static, etc que te permitan reutilizar objetos ya construidos</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">TIP</dt> <dd> <p>no estás sujeto a devolver una instancia de esa clase</p> </dd> </dl> </div> <div class="paragraph"> <p>Puedes devolver objetos que la extiendan, etc sin necesidad de que el que llame al método tenga que hacer casteos ni preocuparse por conversiones</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">TIP</dt> <dd> <p>flexibilidad para cambios futuros en las clases devueltas.</p> </dd> </dl> </div> <div class="paragraph"> <p>Derivado del comentario anterior, si el objeto sólo se puede construir a través de metódos estáticos, puedes cambiar en una versión futura el objeto devuelto sin afectar a quien lo llama. Por ejemplo, clases que se deprecan pueden dejar de ser utilizadas cambiando simplemente el factory</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">TIP</dt> <dd> <p>permite construir clases "al vuelo"</p> </dd> </dl> </div> <div class="paragraph"> <p>Aunque parece algo "para nota", el método factory puede usar la potencia de Java y obtener la implementación a devolver en el momento en el que se le llame (por ejemplo usando <code>service provider framework</code>, descargando el jar de un repositorio remoto, etc)</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>si sólo tienes métodos static factory, la clase no puede contener subclases</p> </dd> <dt class="hdlist1">WARNING</dt> <dd> <p>tienes que usar nombres de métodos claros que indiquen que son factoria</p> </dd> </dl> </div> <div class="paragraph"> <p>Todos los programadores, y el IDE; saben buscar el constructor de una clase pero al usar ahora métodos "no oficiales" hay que facilitar al que los va a usar el encontrarlos por lo que es bueno usar nombres de métodos reconocidos por las buenas prácticas y/o descriptivos ( como por ejemplo <code>from</code>, <code>valueOf</code>, <code>newInstance</code>, &#8230;&#8203;)</p> </div> </div> </div> Apuntes sobre el libro Effective Java. Capitulo dedicado a usar factoria para construir objetos Effective Java, apuntes Jorge Aguilera 2022-02-22T00:00:00Z https://blog.jagedn.dev/blog/effective-java/intro.html <div class="imageblock"> <div class="content"> <img src="/images/effective-java/portada.jpg" alt="portada"> </div> </div> <div class="paragraph"> <p>Hace mucho tiempo (demasiado) me leí la primera edición de este libro, imprescindible para todo programador Java y tengo que admitir que cayó en el olvido, pero más por mi culpa que por el libro. Muchos de los consejos que se recogen en él los vas aprendiendo después de enfrentarte a situaciones y no saberlas resolver e ir viendo cómo otros las han resuelto de forma elegante, cuando en realidad podía haberlas aplicado yo mismo si hubiera leido con antención en su momento.</p> </div> <div class="paragraph"> <p>Creo que parte de olvidar muchas de las cosas que leemos (técnicas) es que no las ponemos en práctica inmediatamente, así que esta vez que ha caído la tercera edición en mis manos voy a intentar ir "tomando apuntes" y escribiendo por aquí los resúmenes</p> </div> <div class="paragraph"> <p>Así que este primer post es más un compromiso de subir futuros artículos que uno en sí mismo, lo admito.</p> </div> <div class="paragraph"> <p>A modo de guía, y fusilando por completo el índice del libro, iré desmenuzando:</p> </div> <div class="ulist"> <ul> <li> <p>Capitulo 1, creando y destruyendo objetos&#8201;&#8212;&#8201;<a href="1-constructors.html">Factorias vs Constructores</a>&#8201;&#8212;&#8201;<a href="2-builders.html">Builders vs Constructores</a>&#8201;&#8212;&#8201;<a href="3-private-constructor.html">Private constructor</a></p> </li> <li> <p>Capítulo 2, Métodos comunes&#8201;&#8212;&#8201;los dichosos equals, hashCode y toString</p> </li> <li> <p>Capítulo 3, Clases e Interfaces&#8201;&#8212;&#8201;Interfaces (aquí hay tela marinera)&#8201;&#8212;&#8201;Composicion vs herencia</p> </li> <li> <p>Capítulo 4, Genéricos</p> </li> <li> <p>Capítulo 5, Enums</p> </li> <li> <p>Capítulo 6, Lambdas y Streams,&#8201;&#8212;&#8201;aquí usaré probablemente otro libraco que viene muy bien explicado</p> </li> <li> <p>Capítulo 7, Metodos&#8201;&#8212;&#8201;parametros, varargs, etc</p> </li> <li> <p>Capítulo 8, Programación en general</p> </li> <li> <p>Capítulo 9, Excepciones. Nadie sabemos usarlas de verdad</p> </li> <li> <p>Capítulo 10, Concurrencia. Nota mental, desmenuzar GPars</p> </li> <li> <p>Capítulo 11, Serializacion, me da que esto ya casi nadie habla de ello</p> </li> </ul> </div> Apuntes sobre el libro Effective Java Cerrando la cuenta personal de Twitter Jorge Aguilera 2021-12-01T00:00:00Z https://blog.jagedn.dev/blog/2021/chapo-twitter.html <div class="paragraph"> <p>Pues después de unos cuantos años (no muchos, no era de los más veteranos) usando Twitter al final he cerrado la cuenta personal aunque sigo manteniendo, por eso de quien no está en Twitter no está, la de @pvidasoftware.</p> </div> <div class="paragraph"> <p>Tras haber desinstalado la app en el móvil hace ya muchos meses y usar sólo el navegador, después de haberme hecho extensiones de Chrome para auto-reducirme el consumo y las funcionalidades (Chrome extension no-more-twitter) e incluso hacerme firmes propósitos de usar la cuenta personal para cosas positivas, al final me es imposible y la he cerrado.</p> </div> <div class="paragraph"> <p>Que podía ser un cierre temporal ? pues claro, pero mira, muerto el perro se acabo la rabia.</p> </div> <div class="paragraph"> <p>La pega es que ya no puedo hacer uso de esta plataforma para notificar cuando hay nuevos post así que te pediría que si por un casual lees este post te pases el canal de Telegram y mandes un saludo (no hace falta que te quedes si no quieres)</p> </div> he cerrado la cuenta personal de twitter y aqui me explico los motivos Amigo invisible con GoogleSheet Jorge Aguilera 2021-11-07T00:00:00Z https://blog.jagedn.dev/blog/2021/googlesheet-amigo-invisible.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Siguiendo los post sobre GoogleSheet en este vamos a usarlo para enviar correos electrónicos a usuarios creando una hoja de cálculo para el amigo invisible</p> </div> <div class="paragraph"> <p>Todos los años en nuestra familia nos hacemos el amigo invisible. Ya sabes, nos reunimos, escribimos el nombre de cada uno en un papelito, los juntamos todos y vamos repartiendolos en secreto. Si a alguien le toca así mismo tiene que decirlo y volvemos a empezar.</p> </div> <div class="paragraph"> <p>En este post vamos a hacer un script simple que lo haga por nosotros y envie un correo a cada uno con un mensaje indicando quién le ha tocado (con un poco más de trabajo podríamos hacer que cada uno pudiera incluso una lista de cosas que le gustaría que le regalaran, etc)</p> </div> </div> </div> <div class="sect1"> <h2 id="preparación">Preparación</h2> <div class="sectionbody"> <div class="paragraph"> <p>Para el sorteo vamos a necesitar los nombres y correos electrónicos de cada participante, los cuales los pondremos en filas en el rango A2:B20, poniendo en la columna A los nombres y en la B los correos</p> </div> <div class="paragraph"> <p>Como los otros script, simplemente necesitaremos una hoja de Google y acceder al editor de secuencias de comandos. Reemplazaremos el código que nos propone por este otro:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>function shuffleArray(array) { for (var i = array.length - 1; i &gt; 0; i--) { var j = Math.floor(Math.random() * (i + 1)); var temp = array[i]; array[i] = array[j]; array[j] = temp; } } function equalList(a, b){ for(var i=0; i&lt;a.length; i++){ if( a[i]===b[i]) return true; } return false; } const subject = "Tu amigo invisible" function repartir() { const sheet = SpreadsheetApp.getActiveSheet() const range = sheet.getRange(2,1,20,3).getValues() const friends = []; let availables = [] for( var r = 0; r &lt; range.length; r++){ if( !range[r][0] ) continue; friends.push( range[r][0]) availables.push( range[r][0]) } for( var retry=0; retry&lt;10; retry++){ shuffleArray(availables) Logger.log(availables) if( equalList(friends, availables) == false) break } for( var r=0; r&lt;availables.length; r++){ range[r][2] = availables[r]; const message = `Hola ${range[r][0]} \n En el sorteo del amigo invisible te ha tocado: ${range[r][2]}` MailApp.sendEmail(range[r][1], subject, message); } }</code></pre> </div> </div> <div class="paragraph"> <p>Básicamente vamos a tener dos funciones de apoyo (una para randomizar una lista de nombres y otra para comparar dos listas y si algun elemento se encuentra repetido en la misma posición marcarlas como "iguales")</p> </div> <div class="paragraph"> <p>La lógica principal reside en la funcion repartir, que simplemente leerá la hoja de Google, randomizará la lista de participantes y comprobará que ninguno se ha tocado así mismo (si así fuera, randomizamos de nuevo)</p> </div> <div class="paragraph"> <p>Una vez asignados iremos enviando un correo a cada uno de los participantes indicandoles quién le ha tocado como amigo invisible.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Lógicamente, el usuario que ejecute el script podrá saber a quién le ha tocado cada uno simplemente mirando la bandeja de salida, así que pídete tú ser quien lo organizará este año</p> </dd> </dl> </div> <div class="paragraph"> <p>Simplemente falta añadir un botón o disparador de la función al estilo de los otros post sobre GoogleSheet y ejecutarlo para que cada miembro de la lista reciba su correo</p> </div> </div> </div> un ejemplo sencillo de cómo usar GoogleSheet para enviar correos Primeros pasos con k3s Jorge Aguilera 2021-11-03T00:00:00Z https://blog.jagedn.dev/blog/2021/k3s.html <div id="preamble"> <div class="sectionbody"> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>En Internet hay ahora mismo muchos post mejores que este sobre cómo instalar y desplegar apliaciones en k3s, pero pocos en español y sobre todo actualizados a la última versión <code>v1.21.5+k3s2</code></p> </dd> </dl> </div> <div class="paragraph"> <p>K3s es la distribución ligera de kubernetes de Rancher (<a href="https://rancher.com/docs/k3s/latest/en/" class="bare">https://rancher.com/docs/k3s/latest/en/</a>)</p> </div> <div class="paragraph"> <p>Es super fácil de instalar (al menos en Linux):</p> </div> <div class="paragraph"> <p><code>curl -sfL <a href="https://get.k3s.io" class="bare">https://get.k3s.io</a> | sh -</code></p> </div> <div class="paragraph"> <p>y si tienes ya instalado <code>kubectl</code>, el comando docker de kubernetes, puedes desplegar aplicaciones simplemente configurando tu variable de entorno KUBECONFIG=/etc/rancher/k3s/k3s.yaml o importando el fichero a tu $HOME/.kube/config</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>puedes tener múltiples clusters, usuarios, etc en tu fichero .kube/config, por ejemplo apuntando a tu recien instlado k3s y además a tu cluster en Okteto y/o diferentes namespaces. Simplemente cuando ejecutes el comando <code>kubectl</code> tienes que indicarle el contexto contra el que ejecutarse</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="objetivo">Objetivo</h2> <div class="sectionbody"> <div class="paragraph"> <p>Desplegar un simple "hello-world" en el cluster (de una sóla máquina) y poder acceder a ella mediante algo parecido a "http://localhost:xxxx/hello-world"</p> </div> <div class="paragraph"> <p>Una vez conseguido podremos continuar desplegando otras aplicaciones en diferentes rutas de tal forma que podamos ofrecer a los usuarios de nuestra red un único sitio en el que encontrar las aplicaciones si tener que andar preocupandonos por puertos, etc y a la vez tener un sitio centralizado donde desplegarlas</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>Una vez instalado k3s en mi local estuve leyendo multitud de post sobre cómo hacer que la aplicación tuviera su ruta y prácticamente todos hablaban de desinstalar <code>traefik</code> e instalar una versión nueva que lo permitía. El caso es que la versión actual de k3s YA LA INCLUYE y no hay que hacer nada , sólo "atinar" con la configuración correcta</p> </dd> </dl> </div> <div class="paragraph"> <p>Para esta prueba vamos a desplegar una aplicacion <code>WhoAmI</code> que simplemente devuelve información sobre el container donde está corriendo, para lo que usaremos la imagen <code>containous/whoami:latest</code></p> </div> <div class="paragraph"> <p>Para ir paso a paso voy a usar diferentes ficheros de despliegue pero puedes "juntarlos" todos en uno sólo y desplegarlo en un sólo paso</p> </div> </div> </div> <div class="sect1"> <h2 id="deployment">Deployment</h2> <div class="sectionbody"> <div class="paragraph"> <p>En este fichero describimos la aplicacion que queremos desplegar (en nuestro caso la imagen mencionada anteriormente)</p> </div> <div class="listingblock"> <div class="title">deployment.yml</div> <div class="content"> <pre class="prettyprint highlight"><code>apiVersion: apps/v1 kind: Deployment metadata: name: whoami-deployment labels: app: whoami spec: replicas: 3 selector: matchLabels: app: whoami template: metadata: labels: app: whoami spec: containers: - name: whoami image: containous/whoami:latest ports: - containerPort: 80</code></pre> </div> </div> <div class="paragraph"> <p>En este ejemplo vamos a correr 3 replicas (por probar)</p> </div> <div class="paragraph"> <p><code>kubectl apply -f deployment.yml</code></p> </div> <div class="paragraph"> <p><code>kubectl get pods</code></p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>NAME READY STATUS RESTARTS AGE whoami-deployment-67446995f4-ccfjv 1/1 Running 1 2m</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="service">Service</h2> <div class="sectionbody"> <div class="paragraph"> <p>Si todo ha ido bien, nuestros pods están corriendo en el cluster pero no se pueden acceder a ellos, para lo que desplegamos un servicio:</p> </div> <div class="listingblock"> <div class="title">service.yml</div> <div class="content"> <pre class="prettyprint highlight"><code>apiVersion: v1 kind: Service metadata: name: whoami-service spec: selector: app: whoami ports: - protocol: TCP port: 80 targetPort: 80</code></pre> </div> </div> <div class="paragraph"> <p>Fijate cómo enlazamos el nombre del deployment <code>whoami</code> con el selector, así como mapeamos los puertos</p> </div> <div class="paragraph"> <p><code>kubectl apply -f service.yml</code></p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>kubectl get services NAME TYPE CLUSTER-IP EXTERNAL-IP PORT(S) AGE kubernetes ClusterIP 10.43.0.1 &lt;none&gt; 443/TCP 37h whoami-service ClusterIP 10.43.110.224 &lt;none&gt; 80/TCP 2m</code></pre> </div> </div> <div class="paragraph"> <p>Con este servicio k3s nos crea una IP y un puerto con el que poder acceder a nuestros pods, pero lo que queremos es no tener que manejar tantas IPs y puertos, así que lo que necesitamos es definir una ruta en nuestro cluster que nos permita crear una ruta hacia nuestro servicio</p> </div> </div> </div> <div class="sect1"> <h2 id="ingress">Ingress</h2> <div class="sectionbody"> <div class="paragraph"> <p>Precisamente, mediante este fichero, le podemos decir a k3s que haga ese routeo.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Esta configuración usa la última versión que es precisamente lo que no encontraba en todos los post que trataban el tema</p> </dd> </dl> </div> <div class="listingblock"> <div class="title">ingress.yml</div> <div class="content"> <pre class="prettyprint highlight"><code>apiVersion: networking.k8s.io/v1 kind: Ingress metadata: name: whoami-ingress spec: rules: - http: paths: - path: /quiensoy pathType: Prefix backend: service: name: whoami-service port: number: 80</code></pre> </div> </div> <div class="paragraph"> <p>Aplicando este fichero le estamos diciendo a k3s (en realidad a traefik que es el encargado de realizar el routeo) que las peticiones a <code>/quiensoy</code> las rediriga al servicio <code>whoami-service</code></p> </div> <div class="paragraph"> <p>Una vez aplicado el fichero podemos navegar a</p> </div> <div class="paragraph"> <p><a href="http://localhost/quiensoy" class="bare">http://localhost/quiensoy</a></p> </div> <div class="paragraph"> <p>y la página nos contestará algo como:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>Hostname: whoami-deployment2-746cf888d5-ss2f9 IP: 127.0.0.1 IP: ::1 IP: 10.42.0.58 IP: fe80::80af:5dff:fe12:6e48 RemoteAddr: 10.42.0.43:51310 GET /quiensoy HTTP/1.1 Host: 192.168.1.126 User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:94.0) Gecko/20100101 Firefox/94.0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8 Accept-Encoding: gzip, deflate Accept-Language: es-ES,es;q=0.8,en-US;q=0.5,en;q=0.3 Cache-Control: max-age=0 Upgrade-Insecure-Requests: 1 X-Forwarded-For: 10.42.0.1 X-Forwarded-Host: 192.168.1.126 X-Forwarded-Port: 80 X-Forwarded-Proto: http X-Forwarded-Server: traefik-97b44b794-8xfp7 X-Real-Ip: 10.42.0.1</code></pre> </div> </div> <div class="paragraph"> <p>Fijate, que como desplegamos varias réplicas, puedes refrescar la página y cada vez dará información diferente del container (cambia Hostname)</p> </div> </div> </div> instalando y desplegando una primera app en k3s Enviar imágenes y texto a Telegram desde GoogleSheet Jorge Aguilera 2021-10-24T00:00:00Z https://blog.jagedn.dev/blog/2021/googlesheet-telegram2.html <div id="preamble"> <div class="sectionbody"> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Un lector ha pedido si sería posible modificar el script para enviar primero la imagen y luego el texto, así que he aprovechado para crear otro post y engordar el blog.</p> </dd> </dl> </div> <div class="paragraph"> <p>Este post es simplemente otra forma de enviar mensajes a Telegram desde GoogleSheet parecido al del post <a href="googlesheet-telegram.html" class="bare">googlesheet-telegram.html</a>, así que básicamente copiare el codigo nuevo sin muchas explicaciones</p> </div> <div class="paragraph"> <p>Como este post se basa exactamente en el post comentado los requisitos son los mismos así como la preparación y entorno de ejecución. Simplemente vamos a usar otra disposición de las celdas y en lugar de enviar a muchos grupos vamos a suponer que queremos mandar a uno sólo</p> </div> </div> </div> <div class="sect1"> <h2 id="hoja_excel">Hoja Excel</h2> <div class="sectionbody"> <div class="paragraph"> <p>El script se va a basar en la disposición de celdas reflejadas en la imagen siguiente:</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2021/telegramgoogle/sheet2.png" alt="sheet2"> </div> </div> <div class="paragraph"> <p>Como puedes ver la idea ahora es poner en filas los mensajes que queremos enviar y asociar una imagen a cada uno (así mismo fíjate que podemos formatear el texto con negritas, subrayados, etc usando un subset de Markdown)</p> </div> <div class="paragraph"> <p>La "clave" para que el script se ejecute correctamente es la primera columna "Estado" donde el script irá mirando si queremos enviar esa fila. <strong>Aquellas filas que estado sea <code>enviar</code> serán enviadas al grupo</strong></p> </div> <div class="paragraph"> <p>Así mismo, a modo de control, el script usará esta columna para indicar si ha podido enviar el mensaje y cuando lo ha hecho y de esta forma facilitar el poder ejecutar el script sin repetir mensajes</p> </div> <div class="paragraph"> <p><strong>El script sólo leerá las primeras 100 filas</strong>, así que de vez en cuando haz limpieza de estas borrando/moviendo las que ya no te interesen</p> </div> </div> </div> <div class="sect1"> <h2 id="script">Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>El script es muy parecido al anterior así que simplemente comentar:</p> </div> <div class="ulist"> <ul> <li> <p>ahora recorremos filas de un rango (A5:C100)</p> </li> <li> <p>enviamos un primer mensaje a Telegram llamando al endpoint <code>/sendPhoto</code></p> </li> <li> <p>enviamos un segundo mensaje con el texto a modo de explicación de la foto</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>var ui = SpreadsheetApp.getUi(); var ss = SpreadsheetApp.getActiveSpreadsheet(); var sheet = ss.getActiveSheet(); var rangeData = sheet.getDataRange(); var lastColumn = rangeData.getLastColumn(); var lastRow = rangeData.getLastRow(); function sendTelegrams() { const bootToken = sheet.getRange(1,3).getValue() const group = sheet.getRange(2,3).getValue() const rows = sheet.getRange(5,1,100,5).getValues() for( var r=0; r&lt;rows.length; r++){ const row = rows[r]; if( row[0].toString().toLowerCase() !== "enviar"){ continue; } const caption = (row[2]||'')+'\n'+(row[3]||'')+'\n'+(row[4]||''); var payload = { 'chat_id':group, 'photo': row[1], 'caption': caption, 'parse_mode':'MarkdownV2', 'disable_web_page_preview':false } var options = { 'method' : 'post', 'contentType': 'application/json', 'payload': JSON.stringify(payload), 'muteHttpExceptions':true }; var url = 'https://api.telegram.org/bot'+bootToken+'/sendPhoto'; const respImage = UrlFetchApp.fetch(url, options); Logger.log(payload) Logger.log(respImage) sheet.getRange(5+r,1).setValue(respImage.getResponseCode()==200?"Enviado "+new Date():respImage.getContentText()) } }</code></pre> </div> </div> <div class="paragraph"> <p>Y ya estaría. Cada vez que pulsemos el botón "Enviar", el script se ejecutará (si seguiste los pasos del post anterior) recorriendo las filas y enviando aquellas que estén marcadas como "enviar"</p> </div> </div> </div> un ejemplo práctico de cómo enviar mensajes de Telegram usando GoogleSheet Primeros pasos en programación reactiva, IV Jorge Aguilera 2021-10-11T00:00:00Z https://blog.jagedn.dev/blog/2021/reactivex/reactivex-4.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>En esta serie de post acerca de programación reactiva voy a ir contando los pasos que estoy dando para ir practicando con esta forma de programación y más en concreto su uso en aplicaciones HTTP con Micronaut</p> </div> <div class="paragraph"> <p>En el post anterior (<a href="reactivex-3.html" class="bare">reactivex-3.html</a>) nos centramos en la parte consumidora viendo cómo podemos usar el modelo reactivo en la construcción de un API que consuma endpoints remotos.</p> </div> <div class="paragraph"> <p>En este post lo que vamos a tratar es el caso de una llamada a una función de negocio que puede fallar y cómo realizar reintentos dentro de un contexto asíncrono.</p> </div> </div> </div> <div class="sect1"> <h2 id="servicio">Servicio</h2> <div class="sectionbody"> <div class="paragraph"> <p>Supongamos que tenemos un microservicio que dada una cadena la convierte a mayusculas, ordenas los caracteres por orden alfabético y devuelve la cadena resultante y que queremos llamar de forma asíncrona</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>@Get("/{word}") Single&lt;String&gt; reverse(final String word) { ... }</code></pre> </div> </div> <div class="paragraph"> <p>Usando Java Stream la "lógica de negocio" podría ser algo así</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>List&lt;Character&gt; list = word.chars().mapToObj(c -&gt; (char) c) .map(Character::toUpperCase) .collect(Collectors.toList()) .stream() .sorted() .collect(Collectors.toList()); list .stream() .map(c -&gt; c.toString()) .collect(Collectors.joining())</code></pre> </div> </div> <div class="paragraph"> <p>Para simular que la llamada a nuestra función de negocio puede fallar, vamos a incluir un random usando el instante de ejecución y si los milisegundos son pares lanzamos una exception, con lo que nuestra función de negocio completa sería algo así:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>private String logicaNegocio(String word) { if ((System.currentTimeMillis() % 2) == 0) { System.out.println("Vamos a simular una exception de negocio"); throw new RuntimeException("Milis es par"); } List&lt;Character&gt; list = word.chars().mapToObj(c -&gt; (char) c) .map(Character::toUpperCase) .collect(Collectors.toList()) .stream() .sorted() .collect(Collectors.toList()); return list .stream() .map(c -&gt; c.toString()) .collect(Collectors.joining()); }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="problema">Problema</h2> <div class="sectionbody"> <div class="paragraph"> <p>La primera implementación que haríamos probablemente de nuestro microservicio haría algo parecido a:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>@Controller("/") public class EchoReverseController { @Get("/{word}") Single&lt;String&gt; reverse(final String word) { return Single.create(emitter -&gt; { emitter.onSuccess( logicaNegocio(word) ) } } }</code></pre> </div> </div> <div class="paragraph"> <p>Y si la lógica de negocio falla devolveríamos un error a quien nos ha llamado para que vuelva a reintentarlo o lo que estime oportuno.</p> </div> <div class="paragraph"> <p>Sin embargo, digamos que lo que queremos es que el servicio sea lo más "robusto" posible y pueda contemplar estas excepciones y actuar en consecuencia siendo el caso que queremos ver hacer un reintento sin salir del contexto de la llamada.</p> </div> </div> </div> <div class="sect1"> <h2 id="solución">Solución</h2> <div class="sectionbody"> <div class="paragraph"> <p>Para resolver esta situación lo primero que se nos ocurrirá (a mí al menos), es hacer el típico bucle <code>for</code> con <code>n</code> reintentos y capturar las excepciones dentro de él. Obviamente esto no es la solución más elegante cuando las excepciones son debidas a problemas con recursos puesto que las estás invocando de forma cuasi instantáneas en cada vuelta del bucle.</p> </div> <div class="paragraph"> <p>Lo que queremos hacer es que mientras el servicio que nos ha llamado está esperando que se resuelva la llamada, nosotros poder invocar a la función con un delay de milisegundos-segundos-minutos-horas &#8230;&#8203; y todo de forma asíncrona. Para ello usaremos el método <code>defer</code> de un Observable junto con <code>retryWhen</code></p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>@Get("/{word}") Single&lt;String&gt; reverse(final String word) { return Single.create(emitter -&gt; { Observable .defer( () -&gt; Observable.just(logicaNegocio(word)) ) .retryWhen( f -&gt; f.take(3).delay(new Random().nextInt(8), TimeUnit.SECONDS)) .subscribe( str -&gt; emitter.onSuccess(str), err -&gt; emitter.onError(err) ); }); }</code></pre> </div> </div> <div class="paragraph"> <p>Utilizando los métodos de reactive lo que estamos haciendo es:</p> </div> <div class="ulist"> <ul> <li> <p>devolver a Micronaut un Single para que lo ejecute de forma asíncrona</p> </li> <li> <p>Crear un observable sobre nuestra lógica de negocio</p> </li> <li> <p>Se ejecutará hasta 3 veces (<code>f.take(3)</code>) con un delay de entre 0 y 8 segundos</p> </li> <li> <p>a la primera ejecución que vaya bien emitiremos el resultado</p> </li> <li> <p>si no va bien despues de intentarlo n veces, emitiremos un error</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="resumen">Resumen</h2> <div class="sectionbody"> <div class="paragraph"> <p>Con un poco de esfuerzo podemos extender la programación reactiva no sólo a las capas de "entrada" sino a las propias llamadas de negocio</p> </div> </div> </div> primeros pasos con reactivex TypeConverter en Micronaut Jorge Aguilera 2021-10-05T00:00:00Z https://blog.jagedn.dev/blog/2021/micronaut-typeconverter.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Recientemente he tenido que implementar una movida para uno de mis proyectos en la que había que persistir en base de datos no sólo los datos típicos del cliente-usuario, sino que también tenía que guardar el <code>Plan</code> de subscripción en el que se encontraba.</p> </div> <div class="paragraph"> <p>La solución por la que optado está bien explicada en las guías de Micronaut pero me he decidido a escribirla aquí por el matiz de "negocio" que creo que puede ser interesante para otras situaciones.</p> </div> </div> </div> <div class="sect1"> <h2 id="modelo">Modelo</h2> <div class="sectionbody"> <div class="paragraph"> <p>Digamos que tenemos una tabla donde persistimos los datos de un <code>Customer</code> tipo:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>@MappedEntity public class Customer { @Id private Long id; private String nombre; private String plan; ... }</code></pre> </div> </div> <div class="paragraph"> <p>Donde <code>plan</code> era un string donde se iba a almacenar algun tipo de constante. Como no había nada en concreto para ello (ni se le esperaba) la idea era un mantenimiento a mano en la base de datos y en lugar de optar por valores numéricos que no dicen mucho se optó por un String que era más representativo, con lo que en la bbdd encontramos registros tipo</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>1, jorge, free 2, pepe, basic 3, manolito, free</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="problema">"Problema"</h2> <div class="sectionbody"> <div class="paragraph"> <p>Obviamente una vez que lo tienes funcionando y empiezas a guardar esos valores llega un momento en el que tienes que hacer algo con ese campo que no sea meramente guardarlo.</p> </div> <div class="paragraph"> <p>Así que lo primero que uno piensa es "codificar" los posibles valores de una forma más decente en lugar de los típicos <code>static final String FREE="free";</code> y cambiar el tipo del atributo a un enum</p> </div> </div> </div> <div class="sect1"> <h2 id="solucion">"Solucion"</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>public enum Plan{ FREE("free") BASIC("basic"), PREMIUM("premium"); private final String name; Plan(final String name) { this.name = name; } public String getName(){ return name; } @Override public String toString() { return name; } }</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>@MappedEntity public class Customer { @Id private Long id; private String nombre; private Plan plan; ... }</code></pre> </div> </div> <div class="paragraph"> <p>Básicamente con esto Micronaut ya es capaz de guardar y recuperar registros de la bbdd asignando al atributo <code>plan</code> el enum correspondiente (y dando error si en la bbdd algún valor no está en el enum) SIN TENER QUE TOCAR LA BASE DE DATOS</p> </div> </div> </div> <div class="sect1"> <h2 id="problema_2">"Problema"</h2> <div class="sectionbody"> <div class="paragraph"> <p>Digamos que el "problema" al que me enfrentaba ahora era que, una vez recuperado un customer de la base de datos, debía conocer en qué plan se encontraba para poder sugerirle los siguientes planes (por ejemplo). En mi caso era tan "simple" como una serie de ifes pero el añadir nuevos planes, por ejemplo <code>SUPER</code>, haría que tuviera que revisar esos ifes</p> </div> </div> </div> <div class="sect1"> <h2 id="solucion_2">"Solucion"</h2> <div class="sectionbody"> <div class="paragraph"> <p>Una de las posibles soluciones, tal vez la más sencilla, sería convertir al enum en un enum complejo tipo</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>public enum Plan { FREE("free", 1) BASIC("basic", 2), PREMIUM("premium", 3); private final String name; private final int level; Plan(String name, int level) { this.name = name; this.level = level; } public String getName() { return name; } public int getLevel() { return level; } }</code></pre> </div> </div> <div class="paragraph"> <p>De esta forma ordenar planes en base a su "prioridad" es tan sencillo como ordenar por <code>level</code> y así puedes saber qué funcionalidades puede optar, etc.</p> </div> </div> </div> <div class="sect1"> <h2 id="problema_3">"Problema"</h2> <div class="sectionbody"> <div class="paragraph"> <p>Micronaut (y supongo que otros frameworks) NO saben (sin ayuda) convertir estos valores y al intentar recuperar de la base de datos algún Customer tendrás errores tipo:</p> </div> <div class="paragraph"> <p>"io.micronaut.data.exceptions.DataAccessException: Cannot convert type [class java.lang.String] with value [] to target type: Plan plan. Consider defining a TypeConverter bean to handle this case."</p> </div> </div> </div> <div class="sect1"> <h2 id="solucion_3">"Solucion"</h2> <div class="sectionbody"> <div class="paragraph"> <p>Como bien nos dice Micronaut, tenemos que añadir un algo que le diga cómo convertir de un String a un Plan y viceversa (que es el objetivo de este post) para lo que hay que seguir estos pasos:</p> </div> <div class="ulist"> <ul> <li> <p>Anotaremos al enum <code>Plan</code> con un TypeDef</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>@TypeDef(type= DataType.STRING) <i class="conum" data-value="1"></i><b>(1)</b> public enum Plan { ... }</code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>Puesto que partimos de un string en el modelo inicial <div class="ulist"> <ul> <li> <p>Crearemos un Factory que cree dos ayudantes Singleton, uno para cada direccion de conversion</p> </li> </ul> </div></td> </tr> </table> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>@Factory public class PlanConverter { @Singleton TypeConverter&lt;Plan, String&gt; planStringTypeConverter(){ return ((object, targetType, context) -&gt; Optional.of(object.name())); } @Singleton TypeConverter&lt;String, Plan&gt; stringPlanTypeConverter(){ return ((object, targetType, context) -&gt; Arrays.stream(Plan.values()) .filter(p-&gt;p.getName().equals(object)) .findFirst() ); } }</code></pre> </div> </div> <div class="paragraph"> <p>Básicamente el primero dado un Plan devuelve un String y el segundo a la inversa, busca en el array de Plan aquel que coincida su nombre con el String proporcionado</p> </div> </div> </div> <div class="sect1"> <h2 id="conclusión">Conclusión</h2> <div class="sectionbody"> <div class="paragraph"> <p>Todo esto viene explicado en la guía de Micronaut Data pero el caso de uso que emplean para explicarlo no me decía mucho pero una vez leído y aplicado a mi problema me ha parecido interesante compartirlo</p> </div> </div> </div> Cómo persistir un enum "complejo" con Micronaut Data Proteger con password un site estático Jorge Aguilera 2021-09-27T00:00:00Z https://blog.jagedn.dev/blog/2021/antora-password.html <div id="preamble"> <div class="sectionbody"> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="Warning"></i> </td> <td class="content"> En este post voy a centrarme en un site generado con Antora pero puedes extenderlo a cualquier otro site tipo Gatsby, Hugo, etc o incluso a un simple html </td> </tr> </table> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> Puedes descargar un repo de ejemplo en <a href="https://gitlab.com/puravida-asciidoctor/antora-skeleton" class="bare">https://gitlab.com/puravida-asciidoctor/antora-skeleton</a> y/o acceder al ejemplo en <a href="https://antora-password-protected.herokuapp.com/" class="bare">https://antora-password-protected.herokuapp.com/</a> con el usuario test/test </td> </tr> </table> </div> <div class="paragraph"> <p>Una vez que tienes tu contenido generado en HTML, una de las preguntas que te surge es cómo puedo restringuir su acceso a sólo algunos usuarios.</p> </div> <div class="paragraph"> <p>En este post vamos a ver alguna de las alternativas que podrías usar dependiende de si los lectores serían internos (por ejemplo otros equipos en la intranet de la empresa) o externos y en este caso si cuentas con infraestructura propia o quieres usar un proveedor externo. Así mismo puedes plantearte si lo que quieres es proteger una simple página o todo un site</p> </div> </div> </div> <div class="sect1"> <h2 id="simple_página_html">Simple página HTML</h2> <div class="sectionbody"> <div class="paragraph"> <p>Preparando este post encontré un script en node, staticrypt, que encripta una página html con una password que le proporcionas generando así un html con un interface para pedir la password y poder desencriptar la página</p> </div> <div class="paragraph"> <p>Digamos que tienes un Asciidoctor donde tienes documentado un API y quieres publicarlo pero que sólo lo puedan leer los que tengan la clave:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>= My API this is my api blablablab</code></pre> </div> </div> <div class="paragraph"> <p>Generamos el html:</p> </div> <div class="paragraph"> <p><code>$asciidoctor api.adoc</code></p> </div> <div class="paragraph"> <p>y obtenemos <code>api.html</code></p> </div> <div class="paragraph"> <p>Lo encriptamos con staticrypt</p> </div> <div class="paragraph"> <p><code>$staticrypt api.html la_clave_para_desencriptar -o api.html</code></p> </div> <div class="paragraph"> <p>y ya tenemos un fichero <code>api.html</code> protegido que se puede publicar en Gitlab Pages, Github, etc</p> </div> <div class="paragraph"> <p>Sin embargo esta solución no funciona cuando tu documentación contiene varios ficheros porque, aunque puedes encriptar todos los ficheros, el usuario tendrá que proporcionar la página en cada una. Así que necesitamos algo que mantenga la sesión</p> </div> </div> </div> <div class="sect1"> <h2 id="site_alojado_en_s3">Site alojado en S3</h2> <div class="sectionbody"> <div class="paragraph"> <p>Como existe mucha documentación tanto de AWS como tutoriales sobre cómo crear un Bucket de S3 y proteger su contenido no voy a explicarlo aquí. Simplemente lo menciono por si no lo habías tenido en cuenta</p> </div> </div> </div> <div class="sect1"> <h2 id="site_alojado_en_bucket_ggp">Site alojado en Bucket GGP</h2> <div class="sectionbody"> <div class="paragraph"> <p>Lo mismo para un bucket de Google Cloud Platform, y en realidad por extensión a todos los compatibles con estos</p> </div> </div> </div> <div class="sect1"> <h2 id="site_alojado_por_nuestros_medios">Site alojado por nuestros medios</h2> <div class="sectionbody"> <div class="paragraph"> <p>Una de las formas de proteger un site web es usando un fichero <code>.htpasswd</code> que puede ser manejado por Apache o por Nginx. En este post vamos a usar este último pues es mucho más fácil y ligero que Apache</p> </div> <div class="paragraph"> <p>Para crear el fichero seguiremos cualquier tutorial de Internet pero básicamente es ejecutar un comando tipo <code>httpass</code> o usar una de las muchas páginas online que lo generan</p> </div> <div class="paragraph"> <p>Siguiendo cualquiera de las dos opciones, vamos a crear el usuario <code>test</code> con password <code>test</code></p> </div> <div class="listingblock"> <div class="title">httpasswd</div> <div class="content"> <pre class="prettyprint highlight"><code>test:$apr1$yofaxwjl$xw.u6dmKy2qYiayuEnWW1. <i class="conum" data-value="1"></i><b>(1)</b></code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>Obviamente puedes crear tantos usuarios como quieras, uno por cada linea <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>El fichero esperado es con un punto al inicio pero yo lo uso sin punto para que me aparezca cuando listo el directorio y luego lo copio al contenedor con el nombre esperado</p> </dd> </dl> </div></td> </tr> </table> </div> <div class="sect2"> <h3 id="site_interno_con_nginx">Site interno con NGINX</h3> <div class="paragraph"> <p>Supongamos que en nuestra empresa contamos con una infraestructura y disponemos de al menos un servidor con espacio y con Docker instalado (obviamente Docker es opcional pero así podemos aislar aplicaciones unas de otras).</p> </div> <div class="paragraph"> <p>Supongamos que hemos creado nuestro site Antora pero no queremos que cualquier usuario pueda acceder a ello (yo que sé porqué) sino sólo aquellos que dispongan del usuario y password creados anteriormente.</p> </div> <div class="paragraph"> <p>En nuestro proyecto Antora, crearemos un directorio <code>nginx</code> y ubicaremos en él el fichero <code>htpasswd</code></p> </div> <div class="paragraph"> <p>Así mismo crearemos en este directorio un fichero mínimo de configuración de Nginx</p> </div> <div class="listingblock"> <div class="title">default.conf</div> <div class="content"> <pre class="prettyprint highlight"><code>server { listen 80; listen [::]:80; server_name localhost; location / { root /usr/share/nginx/html; index index.html index.htm; auth_basic "Restricted Content"; auth_basic_user_file /etc/nginx/.htpasswd; } }</code></pre> </div> </div> <div class="paragraph"> <p>y en el root de nuestro proyecto crearemos un docker-compose similar a</p> </div> <div class="listingblock"> <div class="title">docker-compose.yml</div> <div class="content"> <pre class="prettyprint highlight"><code>version: "3" services: antora: image: "ggrossetie/antora-lunr:2.3.4" volumes: - .:/antora entrypoint: /bin/ash command: /antora/custom-antora.sh <i class="conum" data-value="1"></i><b>(1)</b> nginx: image: "nginx" volumes: - ./nginx/.htpasswd:/etc/nginx/.htpasswd - ./nginx/default.conf:/etc/nginx/conf.d/default.conf - ./public:/usr/share/nginx/html ports: - "9080:80"</code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>El contenido de este fichero escapa a este post pero basicamente construye un site antora</td> </tr> </table> </div> <div class="paragraph"> <p>Con este docker-compose podemos generar el site mediante <code>docker-compose run antora</code> lo cual nos genera la documentaacion en <code>public</code></p> </div> <div class="paragraph"> <p>Una vez generada y revisada en local podemos compartirla vía nginx con <code>docker-compose up -d nginx</code> y nuestros usuarios internos podrán acceder a ella vía el puerto <code>9080</code></p> </div> </div> <div class="sect2"> <h3 id="site_publico_con_heroku">Site publico con Heroku</h3> <div class="paragraph"> <p>Usando la capa gratuita de Heroku podemos desplegar nuestro site junto con el servicio Nginx anterior de tal forma que podríamos publicarlo en Internet y protegido mediante usuario/password de la misma forma</p> </div> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="Warning"></i> </td> <td class="content"> Para este paso necesitas tener una cuenta gratuita en Heroku y el comando de consola instalado , así como haber hecho login con el mismo. </td> </tr> </table> </div> <div class="paragraph"> <p>La idea es muy similar y lo que vamos a aprovechar es la capacidad de poder subir una imagen a Heroku construida por nosotros y correr una instancia de la misma. En la capa gratuita, Heroku para los containers transcurrido un tiempo (creo que 30 minutos) y lo vuelve a levantar ante una petición. Como nuestro servicio es realmente ligero, este tiempo de espera es casi inmediato para el usuario</p> </div> <div class="paragraph"> <p>Uno de los requisitos de Heroku es que él nos indica en tiempo de arranque el puerto en el que va a escuchar el contenedor por lo que el fichero nginx anterior no nos sirve. Usaremos para ello este otro</p> </div> <div class="listingblock"> <div class="title">change.default.conf</div> <div class="content"> <pre class="prettyprint highlight"><code>server { listen $PORT; listen [::]:$PORT; location / { root /usr/share/nginx/html; index index.html index.htm; auth_basic "Restricted Content"; auth_basic_user_file /etc/nginx/.htpasswd; } }</code></pre> </div> </div> <div class="paragraph"> <p>Junto con este <code>Dockerfile</code></p> </div> <div class="listingblock"> <div class="title">Dockerfile</div> <div class="content"> <pre class="prettyprint highlight"><code>FROM nginx COPY nginx/htpasswd /etc/nginx/.htpasswd COPY nginx/change.default.conf /etc/nginx/conf.d/default.conf COPY public /usr/share/nginx/html CMD /bin/bash -c "envsubst '\$PORT' &lt; /etc/nginx/conf.d/default.conf &gt; /etc/nginx/conf.d/default.conf" &amp;&amp; cat /etc/nginx/conf.d/default.conf &amp;&amp; nginx -g 'daemon off;' <i class="conum" data-value="1"></i><b>(1)</b></code></pre> </div> </div> <div class="paragraph"> <p>&lt;1&gt;Es una sóla linea muy larga, supongo que se puede partir en varias pero no lo he investigado</p> </div> <div class="paragraph"> <p>Básicamente vamos a construir una imagen de nginx cambiando en el arranque la configuracion del puerto antes de ejecutar el servicio</p> </div> <div class="paragraph"> <p>Con todo ello preparamos nuestra aplicación en Heroku</p> </div> <div class="paragraph"> <p><code>heroku container:push web -a TU-APPLICATION</code></p> </div> <div class="paragraph"> <p>Y si todo ha ido bien, la desplegamos</p> </div> <div class="paragraph"> <p><code>heroku container:release web -a TU-APPLICATION</code></p> </div> <div class="paragraph"> <p>y eso es todo. Ahora tu documentación estaría expuesta en Internet pero protegida por usuario/password</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="conclusión">Conclusión</h2> <div class="sectionbody"> <div class="paragraph"> <p>Obviamente no es la forma más robusta y completa de desplegar una documentación, pero es sencilla, barata y si lo automatizas puedes incluso ir rotando los usuarios y/o sus claves de una forma sencilla</p> </div> </div> </div> Métodos para proteger un site estático con password Microservicios con Okteto stack Jorge Aguilera 2021-09-10T00:00:00Z https://blog.jagedn.dev/blog/2021/okteto-stack.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>En este blog ya he escrito algunas entradas sobre la plataforma de Okteto (<a href="http://okteto.com" class="bare">http://okteto.com</a>) y cómo utilizarla para desplegar pequeños proyectos (de forma gratuita) en Kubernetes de una forma simple.</p> </div> <div class="paragraph"> <p>Básicamente Okteto son dos productos diferentes pero relacionados:</p> </div> <div class="ulist"> <ul> <li> <p>una herramienta a "instalar" en tu Kubernetes que permite al desarrollador sincronizar su proyecto en un pod del cluster así como poder depurar la aplicación directamente en el mismo (entre otras cosas)</p> </li> <li> <p>un servicio kubernetes con diferentes planes de precios incluida una capa gratuita con suficientes recursos como para desplegar servicios básicos en real (ideal en mi opinión para el aprendizaje de k8s)</p> </li> </ul> </div> <div class="paragraph"> <p>En estos post he descrito cómo puedes desplegar desde un static site de fotos (sí, soy culpable, pero a cambio aprendí el concepto de volumenes y cómo definirlos y gestionarlos en k8s), una aplicación Grails (o SpringBoot) etc. todos ellos usando el descriptor propio de k8s (que es bastante verbose) .Así mismo, en todos estos ejemplos siempre ha sido desplegar una aplicación simple y en algunos casos usar una instancia Postgre desplegada mediante el interface gráfico.</p> </div> <div class="paragraph"> <p>En este post voy a contar otra de las funcionalidades con las que cuenta este servicio, okteto stack, y que es propia de él, es decir, no es válida para otro cluster k8s que no sea Okteto, al menos hasta donde yo se.</p> </div> <div class="paragraph"> <p>Okteto stack es muy parecido a un docker-compose (de hecho salvo algunas particularidades podrías usar un docker-compose) donde podemos definir las características principales de nuestro(s) servicio(s) e incluso generar la imagen al estilo de este. La ventaja que tiene es que nos permite desplegar en el cluster de kubernetes servicios sin necesidad de la verbosidad de este (ficheros de cientos de líneas de kubernetes se convierten en unas pocas con Okteto stack).</p> </div> </div> </div> <div class="sect1"> <h2 id="objetivo">Objetivo</h2> <div class="sectionbody"> <div class="paragraph"> <p>Para verlo en su conjunto vamos a hacer el ejercicio de desplegar 2 microservicios en el mismo namespace de tal forma que:</p> </div> <div class="ulist"> <ul> <li> <p>uno de ellos, API, va a realizar la labor de hacer de ApiGateway, enrutando las llamadas al otro servicio.</p> </li> <li> <p>el otro servicio, Customer-Service, va a persistir entidades en una base de datos "bajo su control"</p> </li> </ul> </div> <div class="paragraph"> <p>Vamos a usar lo menos posible características propias de Kubernetes, aunque se podría usar. La idea es no añadir más complejidad en este ejemplo</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">NOTE</dt> <dd> <p>He creado un repositorio donde puedes bajarte el código e intentar desplegarlo en tu cluster. Simplemente descargarlo de <a href="https://gitlab.com/jorge-aguilera/okteto-stack" class="bare">https://gitlab.com/jorge-aguilera/okteto-stack</a> y sigue las instrucciones del README</p> </dd> <dt class="hdlist1">INFO</dt> <dd> <p>Para poder ejecutar y desplegar este ejemplo vas a necesitar una cuenta en Okteto así como la herramienta de consola <code>okteto-cli</code></p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="customer_service">Customer Service</h2> <div class="sectionbody"> <div class="paragraph"> <p>Customer service es un microservicio destinado a guardar y devolver entidades de Customer para lo que usará una base de datos PostgreSQL.</p> </div> <div class="paragraph"> <p>En un proyecto típico de Docker tendriamos un docker-compose similar a:</p> </div> <div class="listingblock"> <div class="title">okteto-stack.yml</div> <div class="content"> <pre class="prettyprint highlight"><code>services: dbcustomers: image: okteto.dev/dbcustomers build: context: . dockerfile: DockerDatabase args: - DATABASE_NAME - DATABASE_USERNAME - DATABASE_PASSWORD ports: - 5432 volumes: - data_customers:/var/lib/postgresql/data/ customer-service: image: okteto.dev/customer-service build: context: . dockerfile: DockerApp ports: - 8080 environment: - DATABASE_HOST - DATABASE_NAME - DATABASE_USERNAME - DATABASE_PASSWORD depends_on: dbcustomers: condition: service_healthy volumes: data_customers:</code></pre> </div> </div> <div class="paragraph"> <p>y lo podríamos desplegar mediante <code>docker-compose build &amp;&amp; docker-compose up -d</code></p> </div> <div class="paragraph"> <p>Como puedes observar el build requiere de dos ficheros de docker: DockerDatabase y DockerApp</p> </div> <div class="listingblock"> <div class="title">DockerDatabase</div> <div class="content"> <pre class="prettyprint highlight"><code>FROM postgres:latest ARG DATABASE_NAME ARG DATABASE_USERNAME ARG DATABASE_PASSWORD ENV POSTGRES_HOST_AUTH_METHOD=trust ENV POSTGRES_PASSWORD=${DATABASE_PASSWORD} ENV POSTGRES_DB=${DATABASE_NAME} ENV POSTGRES_USER=${DATABASE_USERNAME} ENTRYPOINT ["docker-entrypoint.sh"] EXPOSE 5432 CMD ["postgres"]</code></pre> </div> </div> <div class="listingblock"> <div class="title">DockerApp</div> <div class="content"> <pre class="prettyprint highlight"><code>FROM gradle:7.2.0-jdk11 AS build COPY . /home/gradle RUN gradle build -x check FROM openjdk:16-alpine WORKDIR /home/app COPY --from=build /home/gradle/build/docker/layers/libs /home/app/libs COPY --from=build /home/gradle/build/docker/layers/resources /home/app/resources COPY --from=build /home/gradle/build/docker/layers/application.jar /home/app/application.jar EXPOSE 8080 ENTRYPOINT ["java", "-jar", "/home/app/application.jar"]</code></pre> </div> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Obviamente todo esto puede ser más simplificado, por ejemplo no necesitarias construir una imagen para Postgre y podrías usar la standard. Así mismo tampoco necesitarías el DockerApp si construyes y subes la imagen a tu repo mediante las herramientas que uses habitualmente.</p> </dd> </dl> </div> <div class="paragraph"> <p>Si en el directorio del servicio customer ejecutamos:</p> </div> <div class="paragraph"> <p><code>okteto deploy stack</code></p> </div> <div class="paragraph"> <p>y todo va bien, habrás desplegado un stack <code>customers</code> donde se está ejecutando dos pods: un postgresql y un servicio</p> </div> </div> </div> <div class="sect1"> <h2 id="api">API</h2> <div class="sectionbody"> <div class="paragraph"> <p>Api sigue el mismo principio pero su fichero es más simple puesto que no necesita base de datos. Sin embargo su okteto-stack.yml ya no es compatible con docker-compose porque vamos a incluir una funcionalidad propia de esta plataforma:</p> </div> <div class="listingblock"> <div class="title">okteto-stack.yml</div> <div class="content"> <pre class="prettyprint highlight"><code>services: api: image: okteto.dev/api build: context: . dockerfile: DockerApp ports: - 8080 endpoints: - path: / service: api port: 8080</code></pre> </div> </div> <div class="paragraph"> <p>Si en el proyecto <code>api</code> ejecutamos:</p> </div> <div class="paragraph"> <p><code>okteto stack deploy</code></p> </div> <div class="paragraph"> <p>veremos que aparece un nuevo stack <code>api`en nuestro namespace con un sólo pod el cual además ofrece un endpoint abierto a internet en `https://api-TUNAMESPACE.cloud.okteto.net/</code></p> </div> </div> </div> <div class="sect1"> <h2 id="probando">Probando</h2> <div class="sectionbody"> <div class="paragraph"> <p>Si hemos conseguido desplegar los dos stacks ahora podriamos ejecutar peticiones REST a API el cual las enrutará a Customer (yo utilizo <code>httpie</code> pero puedes usar curl, postman o la herramienta que uses habitualmente)</p> </div> <div class="paragraph"> <p><code>http <a href="https://api-TUNAMESPACE.cloud.okteto.net/api" class="bare">https://api-TUNAMESPACE.cloud.okteto.net/api</a> name=test</code></p> </div> <div class="paragraph"> <p><code>http <a href="https://api-TUNAMESPACE.cloud.okteto.net/api" class="bare">https://api-TUNAMESPACE.cloud.okteto.net/api</a></code></p> </div> <div class="paragraph"> <p>Si no hay ningún error el primer comando habrá creado un customer con el name igual a test y la segunda llamada nos devolverá una lista de un sólo elemento</p> </div> </div> </div> <div class="sect1"> <h2 id="actualizando">Actualizando</h2> <div class="sectionbody"> <div class="paragraph"> <p>Una vez validado que nuestros dos stacks se encuentran funcionando y hablan entre sí, vamos a realizar un cambio en uno de ellos y redesplegarlo sin necesidad de actualizar el otro.</p> </div> <div class="paragraph"> <p>Por ejemplo, vamos a editar <code>CustomerController.java</code> en el proyecto de <code>customer-service</code> y vamos a cambiar la línea 27</p> </div> <div class="paragraph"> <p><code>return customerRepository.save(customerEntity);</code></p> </div> <div class="paragraph"> <p>por</p> </div> <div class="paragraph"> <p><code>return customerEntity;</code></p> </div> <div class="paragraph"> <p>(Simplemente vamos a hacer que ya no se puedan añadir más customers pero sin devolver un error)</p> </div> <div class="paragraph"> <p>Para redesplegar la actualización ejecutaremos desde el proyecto de <code>customer-service</code>:</p> </div> <div class="paragraph"> <p><code>okteto stack deploy --build</code></p> </div> <div class="paragraph"> <p>Lo cual va a volver a generar y subir la imagen actualizada para después redesplegar el servicio. Una vez desplegado podremos repetir los pasos de intentar añadir un nuevo customer</p> </div> <div class="paragraph"> <p><code>http <a href="https://api-TUNAMESPACE.cloud.okteto.net/api" class="bare">https://api-TUNAMESPACE.cloud.okteto.net/api</a> name=otro</code></p> </div> <div class="paragraph"> <p><code>http <a href="https://api-TUNAMESPACE.cloud.okteto.net/api" class="bare">https://api-TUNAMESPACE.cloud.okteto.net/api</a></code></p> </div> <div class="paragraph"> <p>y deberíamos ver que aunque el post para crear el customer "otro" no ha dado error en realidad no ha sido guardado y el get nos sigue devolviendo una lista con un sólo elemento.</p> </div> <div class="paragraph"> <p>Lo interesante de este cambio es ver que API no ha sido afectado y seguía ejecutándose.</p> </div> </div> </div> <div class="sect1"> <h2 id="microservicios">Microservicios</h2> <div class="sectionbody"> <div class="paragraph"> <p>Si abrimos la configuración de API (application.yml) podemos ver que este está enrutando las llamadas a un servicio del que sólo sabe el nombre:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>micronaut: application: name: api http: services: customers: url: http://customer-service:8080</code></pre> </div> </div> <div class="paragraph"> <p>Es decir, API hará de proxy hacia un host que responda a <code>customer-service</code> el cual corresponde con el del stack customer. En una solución más compleja se podría usar sistemas de descubrimiento de servicios pero para este ejemplo es suficiente.</p> </div> <div class="paragraph"> <p>Otra de las ventajas de esta aproximación es que podemos agrupar los servicios por dependencias (por ejemplo customer-service y su base de datos) pudiendo actualizar un stack sin tener que actuar en los otros.</p> </div> </div> </div> <div class="sect1"> <h2 id="conclusión">Conclusión</h2> <div class="sectionbody"> <div class="paragraph"> <p>En un petproject en el que estoy trabajando he empezado a usar esta funcionalidad y me está siendo muy valiosa para poder tener separados los diferentes servicios a la vez que defino en cada uno las dependencias. Así por ejemplo tengo unos stacks de infraestructura (Kafka y Databases) y otros para cada servicio</p> </div> <div class="sect2"> <h3 id="kafka">Kafka</h3> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>name: kafka services: kafdrop: image: obsidiandynamics/kafdrop:3.28.0-SNAPSHOT ports: - 9000 environment: - KAFKA_BROKERCONNECT=kafka:9092 - JVM_OPTS=-Xms16M -Xmx48M -Xss180K -XX:-TieredCompilation -XX:+UseStringDeduplication -noverify zookeeper: image: docker.io/bitnami/zookeeper:3-debian-10 ports: - 2181 volumes: - data_zookeeper:/bitnami environment: - ALLOW_ANONYMOUS_LOGIN=yes kafka: image: docker.io/bitnami/kafka:2-debian-10 ports: - 9092 volumes: - data_kafka:/bitnami environment: - KAFKA_CFG_ZOOKEEPER_CONNECT=zookeeper:2181 - ALLOW_PLAINTEXT_LISTENER=yes - KAFKA_ADVERTISED_LISTENERS=PLAINTEXT://kafka:9092 volumes: data_zookeeper: driver_opts: size: 1Gi data_kafka: driver_opts: size: 2Gi</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="databases">Databases</h3> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>name: databases services: dbcustomer: environment: - POSTGRES_HOST_AUTH_METHOD=trust image: okteto.dev/dbcustomer build: context: . dockerfile: DockerfileCustomer args: - USERNAME=$USERNAME - PASSWORD=$PASSWORD ports: - 5432 volumes: - data_customer:/var/lib/postgresql/data/ dbcore: environment: - POSTGRES_HOST_AUTH_METHOD=trust image: okteto.dev/dbcore build: context: . dockerfile: DockerfileCore args: - USERNAME=$USERNAME - PASSWORD=$PASSWORD ports: - 5432 volumes: - data_core:/var/lib/postgresql/data/ volumes: data_customer: driver_opts: size: 1Gi data_core: driver_opts: size: 1Gi</code></pre> </div> </div> </div> </div> </div> desplegando microservicios con Okteto Stack Primeros pasos en programación reactiva, III Jorge Aguilera 2021-07-12T00:00:00Z https://blog.jagedn.dev/blog/2021/reactivex/reactivex-3.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>En esta serie de post acerca de programación reactiva voy a ir contando los pasos que estoy dando para ir practicando con esta forma de programación y más en concreto su uso en aplicaciones HTTP con Micronaut</p> </div> <div class="paragraph"> <p>En el post anterior (<a href="reactivex-2.html" class="bare">reactivex-2.html</a>) nos centramos en la parte servidora y vimos cómo crear un <code>Single</code> (y devolverlo como retorno de la función) para así delegar en el subsistema la ejecución de nuestro código de forma asíncrona.</p> </div> <div class="paragraph"> <p>En este post nos vamos a centrar en la parte consumidora viendo cómo podemos usar el modelo reactivo en la construcción de un API que consuma endpoints remotos. Para ello vamos a usar los siguientes recursos públicos:</p> </div> <div class="ulist"> <ul> <li> <p><a href="http://api.open-notify.org/astros.json" class="bare">http://api.open-notify.org/astros.json</a> que devuelve un detalle de los astronautas que hay ahora mismo en el espacio</p> </li> <li> <p><a href="http://api.open-notify.org/iss-now.json" class="bare">http://api.open-notify.org/iss-now.json</a> que devuelve la posición de la estación ISS en el momento de la petición</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="modelos">Modelos</h2> <div class="sectionbody"> <div class="paragraph"> <p>Vamos a construir el modelo que representa a cada uno de los endpoints</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>public class Astronaut { public String name; public String craft; @Override public String toString(){ return name+" "+craft; } } public class Astros { public String message; public int number; public List&lt;Astronaut&gt;people; }</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>public class IssPosition { public double latitude; public double longitude; public String toString(){ return "lat:"+latitude+" log:"+longitude; } } public class Iss { public IssPosition iss_position; public String toString(){ return "current position "+iss_position; } }</code></pre> </div> </div> <div class="paragraph"> <p>Así como el modelo que va a devolver nuestra API, que no es más que la unión de ambos</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>public class Nasa { public Astros astros; public Iss iss; public Nasa astros(Astros astros){ this.astros=astros; return this; } public Nasa iss(Iss iss){ this.iss=iss; return this; } }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="clients">ClientS</h2> <div class="sectionbody"> <div class="paragraph"> <p>Por otra parte vamos a definir nuestros interfaces Client Micronaut que nos permiten recuperar dichos modelos</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>@Client("http://api.open-notify.org/") public interface AstrosClient { @Get("/astros.json") Single&lt;Astros&gt;getAstros(); }</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>@Client("http://api.open-notify.org/") public interface IssClient { @Get("iss-now.json") Single&lt;Iss&gt; getIss(); }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="service">Service</h2> <div class="sectionbody"> <div class="paragraph"> <p>Para recuperar ambos modelos (ISS y Astros) y devolverlos como uno sólo (Nasa) vamos a crear un servicio <code>NasaService</code> el cual va a ofrecer 3 formas diferentes de hacerlo:</p> </div> <div class="ulist"> <ul> <li> <p><code>block</code>, primero va a llamar a uno de los endpoints de forma bloqueante y después al otro de la misma forma</p> </li> <li> <p><code>chain</code>, primero va a llamar a uno de lso endpoints de forma reactiva y cuando se complete la llamada se llamará al segundo endpoint de la misma forma</p> </li> <li> <p><code>zip</code>, vamos a llamar a ambos endpoints a la vez de forma reactiva y cuando se completen ambos devolveremos el resultado</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>@Singleton public class NasaService { @Inject IssClient issClient; @Inject AstrosClient astrosClient; public Single&lt;Nasa&gt; blockingGet() { ... } public Single&lt;Nasa&gt;chain() { ... } public Single&lt;Nasa&gt;zip(){ ... } }</code></pre> </div> </div> <div class="sect2"> <h3 id="blocking">Blocking</h3> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code> public Single&lt;Nasa&gt; blockingGet() { return Single.create(emitter -&gt; { Nasa nasa = new Nasa(); nasa.astros = astrosClient.getAstros().blockingGet(); nasa.iss = issClient.getIss().blockingGet(); emitter.onSuccess(nasa); }); }</code></pre> </div> </div> <div class="paragraph"> <p>En este modo, el servicio construye un objeto Nasa de respuesta y lo va completando según se van obteniendo las respuestas de los endpoints remotos. Una vez terminados se emite el objeto resultante</p> </div> <div class="paragraph"> <p>Como podemos intuir, este método será el más lento y propenso a errores pues en el mejor de los casos el total del tiempo necesario será la suma de ambas llamadas. Además, al esperar la respuesta de ambas llamadas estamos bloqueando el hilo por lo que otras solicitudes se quedarán encoladas.</p> </div> </div> <div class="sect2"> <h3 id="chain">Chain</h3> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code> BiFunction&lt;Nasa, SingleEmitter&lt;Nasa&gt;, Disposable&gt; issFunc = (nasa, emitter)-&gt; issClient.getIss().subscribe( iss -&gt; emitter.onSuccess(nasa.iss(iss)) , err-&gt; emitter.onError(err) ); BiFunction&lt;Nasa, SingleEmitter&lt;Nasa&gt;, Disposable&gt; astrosFunc = (nasa, emitter)-&gt; astrosClient.getAstros().subscribe( astros -&gt; issFunc.apply(nasa.astros(astros), emitter) , err-&gt; emitter.onError(err) ); public Single&lt;Nasa&gt;chain() { return Single.create( emitter -&gt; astrosFunc.apply(new Nasa(), emitter) ); }</code></pre> </div> </div> <div class="dlist"> <dl> <dt class="hdlist1">NOTE</dt> <dd> <p>Para ayudar en la legibilidad de este método vamos a usar <code>BiFunction</code> aunque podríamos seguir usando clases anónimas lambdas</p> </dd> </dl> </div> <div class="paragraph"> <p>Básicamente definimos un método <code>chain</code> que crea un <code>Single</code> (como en caso block) y lo que hace es aplicar una función <code>astrosFunc</code>. Esta función simplemente se subscribe a la llamada asíncrona que recupera los astronautas del espacio y cuando se complete encadena a su vez otra subscripción al endpoint de la ISS. Cuando este segundo endpoint se completa se devuelve el resultado al <code>emitter</code> "original"</p> </div> <div class="paragraph"> <p>La idea es muy parecida al método anterior (aunque el código parece un poco más complicado) en el sentido de que vamos a llamar a dos funciones de forma seguida, por lo que el tiempo total será aproximadamente igual. Sin embargo, al no bloquear el hilo podremos aceptar más solicitudes.</p> </div> </div> <div class="sect2"> <h3 id="zip">Zip</h3> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code> public Single&lt;Nasa&gt;zip(){ return Single.zip(astrosClient.getAstros(), issClient.getIss(), (astros, iss) -&gt; new Nasa().astros(astros).iss(iss)); }</code></pre> </div> </div> <div class="paragraph"> <p>Mediante <code>zip</code> un <code>Single</code> es capaz de poder llamar de forma simultánea a un número de observables y ejecutar una función con el resultado de todos ellos.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>La lista de observables a ejecutar puede ser "fija", como en este caso, o una lista de ellos. En caso de fija podemos especificar hasta 10 (creo) observables y en la función a ejecutar recibiremos los resultados de forma explícita. En el caso de una lista, lo que obtendremos en la función es un array de Object y nos toca a nosotros interpretarlos</p> </dd> </dl> </div> </div> </div> </div> <div class="sect1"> <h2 id="controller">Controller</h2> <div class="sectionbody"> <div class="paragraph"> <p>Básicamente el controller es un simple punto de entrada para cada tipo que llama directamente al servicio</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>@Controller("/nasa") public class NasaController { @Inject NasaService service; @Get("/blocking") Single&lt;Nasa&gt;blockingGet() { return service.blockingGet(); } @Get("/chain") Single&lt;Nasa&gt;chain() { return service.chain(); } @Get("/zip") Single&lt;Nasa&gt;zip(){ return service.zip(); } }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="jmeter">JMeter</h2> <div class="sectionbody"> <div class="paragraph"> <p>Con estos 3 endpoints he preparado una prueba de carga usando JMeter y he ejecutado 100 peticiones simultáneas contra cada uno.</p> </div> <div class="sect2"> <h3 id="blocking_2">Blocking</h3> <div class="paragraph"> <p>Obtenemos una tasa de error muy elevada</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2021/reactivex/SummaryReportBlock.png" alt="SummaryReportBlock"> </div> </div> </div> <div class="sect2"> <h3 id="chain_2">Chain</h3> <div class="paragraph"> <p>Conseguimos no bloquear el hilo de llamada reduciendo los errores a cero</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2021/reactivex/SummaryReportChain.png" alt="SummaryReportChain"> </div> </div> </div> <div class="sect2"> <h3 id="zip_2">Zip</h3> <div class="paragraph"> <p>No sólo conseguimos reducir los errores a cero sino que la diferencia de tiempo respecto de chain es significativa (casi la mitad)</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2021/reactivex/SummaryReportZip.png" alt="SummaryReportZip"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="resumen">Resumen</h2> <div class="sectionbody"> <div class="paragraph"> <p>Por el lado del consumidor vemos que utilizar programación reactiva nos ayuda a optimizar los recursos y mejorar los tiempos de respuesta</p> </div> </div> </div> primeros pasos con reactivex Primeros pasos en programación reactiva, II Jorge Aguilera 2021-07-12T00:00:00Z https://blog.jagedn.dev/blog/2021/reactivex/reactivex-2.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>En esta serie de post acerca de programación reactiva voy a ir contando los pasos que estoy dando para ir practicando con esta forma de programación y más en concreto su uso en aplicaciones HTTP con Micronaut</p> </div> <div class="paragraph"> <p>En el post anterior (<a href="reactivex-1.html" class="bare">reactivex-1.html</a>) vimos mediante un par de ejemplos sencillos cómo un Controller puede ofrecer recursos de forma reactiva en lugar de bloqueante. En este segundo post simplemente vamos a estructurar un poco mejor el código usando un Service y dejar así el Controller más "limpio"</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>@Controller("/numbers") public class NumberGeneratorController { @Inject NumberGeneratorService service; @Get("/list{?size}") Single&lt;int[]&gt; list(Optional&lt;Integer&gt; size){ return service.list( size.orElse(99+1) ); } }</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>@Singleton public class NumberGeneratorService { Single&lt;int[]&gt; list( Integer size) { Random rnd = new Random(); return Single.just( IntStream. range(1, size). map(i -&gt; Math.abs(rnd.nextInt())). toArray() ); } }</code></pre> </div> </div> <div class="dlist"> <dl> <dt class="hdlist1">NOTE</dt> <dd> <p>Como puedes ver, simplemente hemos movido el código al servicio y hacemos que el controlador lo invoque directamente.</p> </dd> </dl> </div> <div class="paragraph"> <p>Hasta ahora el código era devolver una lista de números que generamos con una línea de código (partida en varias para mejorar su lectura, pero una línea de código al fín y al cabo). Sin embargo muchas veces la lógica a implementar requerirá de algo más complejo, por lo que un simple <code>just</code> no nos servirá. Crearemos entonces un Single que emitirá el resultado (o fallo) cuando se complete dicha lógica</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>Recuerda que además de Single, existen otros tipos reactivos interesantes como FLowable o Maybe. Por ahora seguiremos trabajando con Single el cual nos permite notificar un resultado o un error.</p> </dd> </dl> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code> Single&lt;int[]&gt; listWithBoundControl( Integer size){ return Single.create( emitter -&gt;{ if( size &gt; 100){ emitter.onError(new ArrayIndexOutOfBoundsException()); return; } Random rnd = new Random(); int[] ret = new int[size]; for(int i=0; i&lt;size; i++){ ret[i] = Math.abs(rnd.nextInt()); } emitter.onSuccess(ret); }); }</code></pre> </div> </div> <div class="paragraph"> <p>En este ejemplo vemos que podemos notificar un error (si por ejemplo el tamaño que nos piden a generar excede un límite), ejecutar código en una lambda (o llamando a una función privada, etc) y notificar que hemos terminado proporcionando un resultado.</p> </div> <div class="paragraph"> <p>La "magia" en este código es que tanto el controller como el servicio lo que devuelven en las llamadas es un <code>Single</code> el cual el framework, micronaut en este caso, va a manejar para ejecutarlo y devolver el resultado cuando se ejecute.</p> </div> <div class="paragraph"> <p>La segunda "magia" (que a mí particularmente me fascina) es la capacidad del compilador de comprobar que realmente estamos devolviendo lo que dice la firma del método que devolvemos. Es decir, si pruebas a cambiar el objeto que devolvemos en <code>onSuccess</code> por un String, por ejemplo, el compilador lo detecta y no compila.</p> </div> </div> </div> <div class="sect1"> <h2 id="resumen">Resumen</h2> <div class="sectionbody"> <div class="paragraph"> <p>En este segundo, y corto, post hemos visto cómo ejecutar una lógica de negocio más compleja y notificar el resultado mediante el uso de <code>emitter</code></p> </div> </div> </div> primeros pasos con reactivex Primeros pasos en programación reactiva, I Jorge Aguilera 2021-07-11T00:00:00Z https://blog.jagedn.dev/blog/2021/reactivex/reactivex-1.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>En esta serie de post acerca de programación reactiva voy a ir contando los pasos que estoy dando para ir practicando con esta forma de programación y más en concreto su uso en aplicaciones HTTP con Micronaut</p> </div> <div class="paragraph"> <p>Básicamente mediante la programación reactiva lo que conseguimos es evitar el bloqueo de los hilos de ejecución mientras se espera a que se complete una tarea.</p> </div> <div class="paragraph"> <p>Esta forma de programación se puede realizar en ambos lados del diálogo, es decir:</p> </div> <div class="ulist"> <ul> <li> <p>Podemos hacer que el cliente invoque llamadas al servidor y continue con sus cosas hasta recibir una respuesta de este.</p> </li> <li> <p>Podemos usarlo en el servidor de tal forma que este pueda aceptar múltiples peticiones sin bloquear el hilo http, ejecutar la solicitud en otro hilo y responder al cliente cuando se complete.</p> </li> </ul> </div> <div class="paragraph"> <p>Casi todos los lenguajes tienen una forma u otra de permitir esta programación, así como diferentes librerías o frameworks. En estos post vamos a usar Micronaut el cual usa RxJava2 (hasta la versión 3 en la que se ha migrado a Reactor) y lo vamos a ver tanto en el cliente como en el servidor</p> </div> </div> </div> <div class="sect1"> <h2 id="servicio_bloqueante">Servicio bloqueante</h2> <div class="sectionbody"> <div class="paragraph"> <p>A continuación podemos ver un <code>controller</code> típico:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>@Controller("/numbers") public class NumberGeneratorController { @Get("/list{?size}") int[] list(Optional&lt;Integer&gt; size){ Random rnd = new Random(); return IntStream. range(1,size.orElse(99)+1). map( i-&gt; Math.abs(rnd.nextInt())). toArray(); } }</code></pre> </div> </div> <div class="paragraph"> <p>Simplemente definimos un Controller con un método <code>/list</code> al que se le puede pasar un parámetro opcional, <code>size</code>, y que genera una lista de números de forma aleatoria</p> </div> <div class="paragraph"> <p>Este endoint probablemente no bloquee demasiado el thread y no veamos la diferencia con un reactivo pero es un buen punto de inicio.</p> </div> </div> </div> <div class="sect1"> <h2 id="servicio_reactivo">Servicio reactivo</h2> <div class="sectionbody"> <div class="paragraph"> <p>La versión reactiva más simple y parecida, sería algo como:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>@Controller("/numbers") public class NumberGeneratorController { @Get("/list{?size}") Single&lt;int[]&gt; list(Optional&lt;Integer&gt; size){ Random rnd = new Random(); return Single.just( IntStream. range(1,size.orElse(99)+1). map( i-&gt; Math.abs(rnd.nextInt())). toArray(); ); } }</code></pre> </div> </div> <div class="paragraph"> <p>Simplemente hemos cambiado el tipo de retorno (recubriéndolo con un <code>Single</code>) por lo que devolvemos un objeto de ese tipo que lo único que hace es ejecutar el mismo código. La diferencia entre ambos es que Micronaut, cuando devolvemos un objeto de este tipo, lo que hace es utilizar la librería reactiva para que sea ella la que lo complete. En el caso simple, por el contrario, se está ejecutando en el mismo hilo que hace la petición y si recibimos muchas peticiones, a este u otro endpoint, se terminará bloqueando.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Lo mejor de este ejemplo es que para el cliente que invoca la petición ambas implementaciones son iguales en cuanto a la forma de invocarlas se refiere.</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="descargar_imagen_de_forma_reactiva">Descargar Imagen de forma reactiva</h2> <div class="sectionbody"> <div class="paragraph"> <p>Cuando la tarea a ejecutar por el servidor es más pesada, como servir una imagen por ejemplo, la programación reactiva nos permite optimizar su ejecución. Por ejemplo, a continuación se muestra un Controller que permite descargar un Gif. En lugar de leer todo el fichero y enviarlo como un array de bytes en la misma petición lo que va a usar es un <code>Flowable</code></p> </div> <div class="paragraph"> <p>Un objeto del tipo <code>Flowable</code> nos va a permitir ir enviando bloques de información al cliente según vayamos obteniéndola. Una vez completada la tarea notificaremos al <code>Flowable</code> que ya se ha completado y esto terminará el diálogo con el cliente:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>@Controller("/test") class FileController{ @Get(value = "/{file}", produces = MediaType.IMAGE_GIF) Flowable&lt;byte[]&gt; image(@PathVariable String file) { Flowable.create({ emitter -&gt; new File(file).withInputStream{ inputStream -&gt; int size=1024 byte[]buff = inputStream.readNBytes(size) while( buff.length == size){ emitter.onNext(buff) buff = inputStream.readNBytes(size) } emitter.onNext(buff) emitter.onComplete() } }, BackpressureStrategy.BUFFER) } }</code></pre> </div> </div> <div class="paragraph"> <p>En este ejemplo, el cliente solicita un fichero y lo que devuelve el controller es un objeto <code>Flowable</code>. Cuando el subsistema se encuentre preparado se subscribirá a este y le proporcionará un objeto <code>emitter</code> el cual nos va a servir para ir enviando "chunks" de información:</p> </div> <div class="ulist"> <ul> <li> <p>abrimos el fichero y vamos leyendo bloques de 1024 bytes</p> </li> <li> <p>se los vamos pasando al emitter mediante <code>onNext</code>. El subsistema es el encargado de ir enviándolos a su vez usando la estrategia que hayamos especificado (BUFFER en este caso)</p> </li> <li> <p>una vez enviados los últimos bytes notificamos que hemos terminado con <code>onComplete</code></p> </li> </ul> </div> <div class="paragraph"> <p>Mediante esta técnica podemos servir ficheros pesados a multitud de clientes sin bloquear las llamadas. (He empleado este bot en una página donde podías descargar las imágenes de tráfico de la DGT y una simple aplicación era capaz de servir cientos de imágenes de forma fluida)</p> </div> </div> </div> <div class="sect1"> <h2 id="resumen">Resumen</h2> <div class="sectionbody"> <div class="paragraph"> <p>El resumen de este primer post es:</p> </div> <div class="ulist"> <ul> <li> <p>la programación reactiva nos ayuda a optimizar los recursos</p> </li> <li> <p>a un nivel básico no añaden más complejidad</p> </li> <li> <p>nuevos jugadores como Single, Flowable y Emitter</p> </li> </ul> </div> </div> </div> primeros pasos con reactivex Publicar artefactos en MavenCentral Jorge Aguilera 2021-05-09T00:00:00Z https://blog.jagedn.dev/blog/2021/publicar-maven.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Algunos de mis proyectos (librerías Java) los he publicado usando Bintray, un servicio que tenía una capa gratuíta que te permitía crear tus repositorios y subir tus "artefactos" de una forma fácil. Además gestionaban por tí el publicarlos y sincronizarlos tanto en JCenter como en MavenCentral</p> </div> <div class="paragraph"> <p>Sin embargo hace poco, por las razones que fueran, la empresa ha dejado de ofrecer este servicio dejando JCenter como sólo lectura ( <a href="https://jfrog.com/blog/into-the-sunset-bintray-jcenter-gocenter-and-chartcenter/" class="bare">https://jfrog.com/blog/into-the-sunset-bintray-jcenter-gocenter-and-chartcenter/</a>) y siendo imposible ya crear nuevos artefactos.</p> </div> <div class="paragraph"> <p>De las alternativas que se ofrecen me he decantado por publicar "directamente" en MavenCentral a través de Sonatype que al fín y al cabo son los creadores.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Si no lo había hecho antes es porque recordaba que cuando lo miré hace años el proceso era bastante complicado y se podía tardar varios días en que te aprobaran la cuenta, etc. Sin embargo siguiendo varios tutoriales he podido completar el proceso y (re)-publicar mis dos primeras extensiones en una tarde</p> </dd> </dl> </div> <div class="paragraph"> <p>Como uso principalmente Gradle, en este post voy a explicar los pasos y configuración que he usado para publicarlo en MavenCentral</p> </div> </div> </div> <div class="sect1"> <h2 id="requisitos">Requisitos</h2> <div class="sectionbody"> <div class="paragraph"> <p>Básicamente el único requisito que vas a tener es que seas el "propietario" del dominio con el que pretendes publicar tus artefactos.</p> </div> <div class="paragraph"> <p>En mi caso, con Bintray este requisito no era necesario y yo publicaba bajo <code>com.puravida</code> (me pareció más sencillo que <code>com.puravida-software</code>) pero como no soy el dueño de ese dominio ahora me toca migrar todos los proyectos a <code>com.puravida-software</code> el cual sí es mío.</p> </div> <div class="paragraph"> <p>Así mismo vas a necesitar acceso a la gestión de DNS que básicamente todos los proveedores de dominio te ofrecen de una forma u otra. Como contaré más adelante, una de las formas más rápidas y cómodas de validar que eres el propietario del dominio es creando un registro TXT a través de la consola de tu proveedor.</p> </div> <div class="paragraph"> <p>El segundo requisito es tener una cuenta de correo, que en principio no tiene porqué ser de ese dominio.</p> </div> </div> </div> <div class="sect1"> <h2 id="cuenta_sonatype">Cuenta SonaType</h2> <div class="sectionbody"> <div class="paragraph"> <p>En primer lugar hay que crearse una cuenta en Sonatype (<a href="https://issues.sonatype.org/secure/Signup!default.jspa" class="bare">https://issues.sonatype.org/secure/Signup!default.jspa</a>)</p> </div> <div class="paragraph"> <p>Una vez que te hayas registrado crearemos un ticket (Botón "Crear" en el menú superior) y nos aseguraremos que es del tipo "New Project"</p> </div> <div class="paragraph"> <p>En el cuerpo del ticket yo he puesto:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>Hi I want to create the `com.puravida-software` groupId where host several OSS I've developed</code></pre> </div> </div> <div class="paragraph"> <p>Y a los pocos minutos (5-8) alguien de soporte ha contestado en el ticket:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>Do you own the domain puravida-software.com? If so, please verify ownership via one of the following methods: * Add a TXT record to your DNS referencing this JIRA ticket: OSSRH-XXXXX (Fastest) * Setup a redirect to your Github page (if it does not already exist) You can find more information here: https://central.sonatype.org/publish/</code></pre> </div> </div> <div class="paragraph"> <p>Como comentaba al principio, crear una entrada TXT en el DNS es muy fácil en el panel de administración de mi proveedor. Simplemente creo una entrada tipo TXT con la clave el código del ticket y el valor la URL al tocket:</p> </div> <div class="paragraph"> <p><code>TXT OSSRH-XXXXX <a href="https://issues.sonatype.org/browse/OSSRH-XXXX" class="bare">https://issues.sonatype.org/browse/OSSRH-XXXX</a></code></p> </div> <div class="paragraph"> <p>y una vez creada he comentado en el ticket que ya estaba creada. Si es necesario o no, ni idea, pero a los pocos minutos el ticket se marca como resuelto con un texto:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>Central OSSRH resuelta OSSRH-XXXXX. ----------------------------------- Resolución: Solucionada com.puravida-software has been prepared, now user(s) jorge.aguilera can: Publish snapshot and release artifacts to https://s01.oss.sonatype.org Have a look at this section of our official guide for deployment instructions: https://central.sonatype.org/publish/publish-guide/#deployment Please comment on this ticket when you've released your first component(s), so we can activate the sync to Maven Central. Depending on your build configuration, this might happen automatically. If not, you can follow the steps in this section of our guide: https://central.sonatype.org/publish/release/</code></pre> </div> </div> <div class="paragraph"> <p>Ahora podremos ir a la consola Nexus de SonaType <a href="https://s01.oss.sonatype.org/#welcome" class="bare">https://s01.oss.sonatype.org/#welcome</a> y crear un API token el cual copiaremos en lugar seguro antes de cerrar el diálogo. (Aquí <a href="https://blog.solidsoft.pl/2015/09/08/deploy-to-maven-central-using-api-key-aka-auth-token/" class="bare">https://blog.solidsoft.pl/2015/09/08/deploy-to-maven-central-using-api-key-aka-auth-token/</a> puedes ver cómo crear el token)</p> </div> <div class="paragraph"> <p>Tanto el username como el token lo guarderemos en nuestro fichero de configuración global <code>gradle.properites</code>:</p> </div> <div class="listingblock"> <div class="title">$HOME/.gradle/gradle.properties</div> <div class="content"> <pre class="prettyprint highlight"><code>sonatypeUsername=XXXXX sonatypePassword=XXXXXXXXXXXXXXXXXXXXXXXXXXXxx</code></pre> </div> </div> <div class="paragraph"> <p>Perfecto. Ahora ya tenemos un sitio donde subir nuestros artefactos y si pasan todas las validaciones se sincronizarán con Maven Central.</p> </div> </div> </div> <div class="sect1"> <h2 id="firma_de_artefactos">Firma de artefactos</h2> <div class="sectionbody"> <div class="paragraph"> <p>Uno de los requisitos de Maven Central es que todos los artefactos que quieras subir tienen que ir firmados asi que ahora lo que toca es crear y publicar una firma gpg (también podía ser el primero puesto que son independientes).</p> </div> <div class="paragraph"> <p>Yo he seguido los pasos de está página <a href="https://weibeld.net/java/publish-to-maven-central.html" class="bare">https://weibeld.net/java/publish-to-maven-central.html</a> que se resumen en:</p> </div> <div class="ulist"> <ul> <li> <p>Crearemos una clave si no la tenemos</p> </li> </ul> </div> <div class="paragraph"> <p><code>$ gpg --gen-key</code></p> </div> <div class="paragraph"> <p>e introduciremos los detalles que nos pregunta, tipo nombre, organizacion, etc.</p> </div> <div class="ulist"> <ul> <li> <p>Publicaremos la clave</p> </li> </ul> </div> <div class="paragraph"> <p><code>$ gpg --keyserver hkp://pool.sks-keyservers.net --send-keys XXXXXXXXXXXXXXX</code></p> </div> <div class="paragraph"> <p>Yo también la he publicado en este otro servidor porque durante una de las ejecuciones me dió un error que no lo encontraba ahí:</p> </div> <div class="paragraph"> <p><code>$ gpg --keyserver hkp://keyserver.ubuntu.com --send-keys XXXXXXXXXXXXXXX</code></p> </div> <div class="ulist"> <ul> <li> <p>Configuramos Gradle con los datos de la firma, siguiendo los pasos que recomienda la web mencionada.</p> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>Esto quiere decir que cuando quiera publicar un artefacto tendré que hacerlo desde un ordenador que tenga la clave (?)</p> </dd> </dl> </div> </li> </ul> </div> <div class="listingblock"> <div class="title">$HOME/.gradle/gradle.properties</div> <div class="content"> <pre class="prettyprint highlight"><code>signing.keyId=XXXXXX signing.password=&lt;YOUR-PASSWORD&gt; signing.secretKeyRingFile=/home/jorge/.gnupg/secring.gpg</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="proyecto_java">Proyecto Java</h2> <div class="sectionbody"> <div class="paragraph"> <p>Supongamos que lo que queremos publicar es una simple librería. En mi caso una librería java standard para crear Gif animados a partir de un array de imágenes (en fichero o en memoria).</p> </div> <div class="paragraph"> <p>En sí el proyecto Gradle es algo como</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>plugins{ id 'java-library' } repositories { mavenCentral() } group 'com.puravida-software.gif' sourceCompatibility = '1.8' targetCompatibility = '1.8' dependencies { // Use the latest Groovy version for Spock testing testCompile 'org.codehaus.groovy:groovy-all:2.5.4' // Use the awesome Spock testing and specification framework even with Java testCompile 'org.spockframework:spock-core:1.2-groovy-2.5' testCompile 'junit:junit:4.12' } javadoc { title = "$project.description" } java { withJavadocJar() withSourcesJar() }</code></pre> </div> </div> <div class="paragraph"> <p>Básicamente podemos construir la libreria con <code>./gradlew build</code> y la tendremos disponible en el directorio <code>build/libs</code>.</p> </div> <div class="paragraph"> <p>La idea ahora es poder publicarla en Maven Central por lo que añadiremos una serie de plugins que nos facilitarán la labor</p> </div> </div> </div> <div class="sect1"> <h2 id="plugins_de_gradle">Plugins de Gradle</h2> <div class="sectionbody"> <div class="paragraph"> <p>Los plugins que vamos a incluir en nuestro <code>gradle.build</code> son tres:</p> </div> <div class="ulist"> <ul> <li> <p>maven-publish</p> </li> <li> <p>io.github.gradle-nexus.publish-plugin</p> </li> <li> <p>signing</p> </li> </ul> </div> <div class="paragraph"> <p>El primero va a preparar nuestro proyecto para poder generar ficheros requeridos por maven (pom.xml, etc), mientras que el segundo es el encargado de subir al Nexus de SonaType los binarios y preparar la release. Por último signing se va a encargar de utilizar la clave gpg que hemos configurado para firmarlos</p> </div> <div class="paragraph"> <p>Así pues nuestro <code>gradle.build</code> se queda como:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>plugins{ id 'java-library' id 'maven-publish' id "io.github.gradle-nexus.publish-plugin" version '1.1.0' id 'signing' } repositories { mavenCentral() } group 'com.puravida-software' archivesBaseName ='gif-generator' sourceCompatibility = '1.8' targetCompatibility = '1.8' dependencies { // Use the latest Groovy version for Spock testing testCompile 'org.codehaus.groovy:groovy-all:2.5.4' // Use the awesome Spock testing and specification framework even with Java testCompile 'org.spockframework:spock-core:1.2-groovy-2.5' testCompile 'junit:junit:4.12' } javadoc { title = "$project.description" } java { withJavadocJar() withSourcesJar() } publishing { publications { mavenJava(MavenPublication) { from(components.java) pom { name = 'PuraVida Software GifGenerator' description = 'A gif generator from an array of images' url = 'https://gitlab.com/puravida-software/gif-generator' properties = [:] licenses { license { name = 'The Apache License, Version 2.0' url = 'http://www.apache.org/licenses/LICENSE-2.0.txt' } } developers { developer { id = 'jorge' name = 'Jorge Aguilera' email = 'jorge.aguilera@puravida-software.com' } } scm { connection = 'scm:git:git://puravida-software/gif-generator.git' developerConnection = 'scm:git:ssh://puravida-software/gif-generator.git' url = 'https://gitlab.com/puravida-software/gif-generator' } } } } } signing { sign publishing.publications.mavenJava } nexusPublishing { repositories { sonatype { //only for users registered in Sonatype after 24 Feb 2021 nexusUrl.set(uri("https://s01.oss.sonatype.org/service/local/")) snapshotRepositoryUrl.set(uri("https://s01.oss.sonatype.org/content/repositories/snapshots/")) } } }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="proceso">Proceso</h2> <div class="sectionbody"> <div class="paragraph"> <p>Para comprobar que todo es correcto y que podemos subir la libreria al Nexus ejecutaremos:</p> </div> <div class="paragraph"> <p><code>$ ./gradlew build publishToSonatype</code></p> </div> <div class="paragraph"> <p>Lo cual, si todo va bien, nos firmará la libreria y demás archivos y las subirá a nuestra área de <strong>staging</strong> (es decir, no hemos publicado nada en Maven, tranquilidad) donde podremos revisar si todo está bien.</p> </div> <div class="paragraph"> <p>En la salida del comando anterior te muestra la url, que en mi caso es <a href="https://s01.oss.sonatype.org/service/local/repositories/compuravida-software-XXXXXX/content/" class="bare">https://s01.oss.sonatype.org/service/local/repositories/compuravida-software-XXXXXX/content/</a></p> </div> <div class="dlist"> <dl> <dt class="hdlist1">NOTE</dt> <dd> <p>Cada vez que ejecutas una subida el identificador XXXXX irá incrementándose</p> </dd> </dl> </div> <div class="paragraph"> <p>Puedes acceder a tu repositorio para verificar las subidas en <a href="https://s01.oss.sonatype.org/#stagingRepositories" class="bare">https://s01.oss.sonatype.org/#stagingRepositories</a></p> </div> <div class="paragraph"> <p>Seleccionando el elemento subido, puedes revisar la actividad del mismo y si presenta algún error que te impida publicarlo en Maven. Como ahora mismo sólo hemos hecho una subida, simplemente nos dirá que la actividad de subida ha ido bien.</p> </div> <div class="paragraph"> <p>A continuación lo que pretendemos es subir el artefacto y que se ejecuten todas las acciones que validen si nuestro artefacto puede ser desplegado en Maven Central:</p> </div> <div class="paragraph"> <p><code>$ ./gradlew publishToSonatype closeSonatypeStagingRepository</code></p> </div> <div class="paragraph"> <p>Y revisamos en la consola de Nexus la actividad de la última subida:</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2021/publicar-maven/nexus-gif-generator.png" alt="nexus gif generator"> </div> </div> <div class="paragraph"> <p>Si no has puesto bien una descripcion para el pom, autores, la licencia, etc puede que este paso te muestre errores. Por eso es recomendado ejecutarlo la primera vez de esta forma, para poder revisarlo y repetirlo hasta tener el ok de las validaciones. A mí me ha fallado la firma (tuve que publicar la firma en el servidor de ubuntu), mal puestas las urls al repo git, etc</p> </div> <div class="paragraph"> <p>Una vez que tengamos la subida y sus validaciones pasadas podemos liberar la primera versión simplemente pulando el icono de "Release" lo cual enviará nuestra librería a Maven Central en unos minutos (en el search aparecerá más tarde)</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">NOTA</dt> <dd> <p>Si recuerdas, en los pasos de creación de tickets nos decían que una vez hayamos hecho la primera release lo comentaramos en el ticket para ejecutar la sync con Maven. A mí no me dió tiempo!!! en cuestión de unos minutos había recibido el correo de que ya estaba publicada la release.</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="desplegando_sin_manos">Desplegando sin manos</h2> <div class="sectionbody"> <div class="paragraph"> <p>Una vez que hemos liberado nuestra primera versión de una forma cuasi-manual ya podremos liberar las siguientes ejecutando simplemente</p> </div> <div class="paragraph"> <p><code>$./gradlew publishToSonatype closeAndReleaseSonatypeStagingRepository</code></p> </div> <div class="paragraph"> <p>Lo cual ejecutará los dos pasos anteriores de forma automática</p> </div> </div> </div> <div class="sect1"> <h2 id="control_de_versiones">Control de versiones</h2> <div class="sectionbody"> <div class="paragraph"> <p>Como tema tangencial voy a incluir un apartado sobre el control de versiones.</p> </div> <div class="paragraph"> <p>En mis proyectos personales intento aplicar (dentro de mi caos mental) <code>semver</code> , ya sabes, pasar de versión 1.2.0 a 1.3.0 cuando añado alguna funcionalidad nueva, y de versión 1.3.0 a 1.3.1 cuando arreglo algún defecto, etc</p> </div> <div class="paragraph"> <p>Si eres una persona cuidadosa o sigues una metodología probablemente no tengas muchos problemas. Yo personalmente uso un plugin (de los cientos que hay) que utiliza el estado de git para determinar la versión en la que te encuentras, de tal forma que no necesitas codificarla en ningún fichero</p> </div> <div class="paragraph"> <p>En mi caso uso el plugin <code>reckon</code> (<a href="https://github.com/ajoberstar/reckon" class="bare">https://github.com/ajoberstar/reckon</a>) de tal forma que cuando estoy en disposición de liberar una versión (o parche) a Maven primero "cierro" la versión ejecutando:</p> </div> <div class="paragraph"> <p><code>$./gradlew build -Preckon.scope=minor -Preckon.stage=final reckonTagCreate</code></p> </div> <div class="paragraph"> <p>Este plugin comprueba que mi repositorio git se encuentra "limpio", con todos los commits hechos, y en base a los tags que existan y al <code>stage</code> que le indico determina la versión. Así mismo, si todo está correcto, me crea el tag correspondiente en el repo</p> </div> </div> </div> <div class="sect1"> <h2 id="bolas_extras">Bolas extras</h2> <div class="sectionbody"> <div class="paragraph"> <p>Andrés Almiray ha publicado JReleaser (<a href="https://jreleaser.org/" class="bare">https://jreleaser.org/</a>) que promete publicar artefactos Java sin esfuerzo y al que hay que seguir de cerca porque viendo la documentación el proceso de liberar versiones suena muy fácil</p> </div> </div> </div> <div class="sect1"> <h2 id="referencias">Referencias</h2> <div class="sectionbody"> <div class="paragraph"> <p>A continuación algunas páginas que me ha ayudado durante el proceso:</p> </div> <div class="ulist"> <ul> <li> <p><a href="https://andresalmiray.com/publishing-to-maven-central-using-apache-maven/" class="bare">https://andresalmiray.com/publishing-to-maven-central-using-apache-maven/</a></p> </li> <li> <p><a href="https://github.com/gradle-nexus/publish-plugin" class="bare">https://github.com/gradle-nexus/publish-plugin</a></p> </li> <li> <p><a href="https://weibeld.net/java/publish-to-maven-central.html" class="bare">https://weibeld.net/java/publish-to-maven-central.html</a></p> </li> <li> <p><a href="https://blog.solidsoft.pl/2015/09/08/deploy-to-maven-central-using-api-key-aka-auth-token/" class="bare">https://blog.solidsoft.pl/2015/09/08/deploy-to-maven-central-using-api-key-aka-auth-token/</a></p> </li> </ul> </div> </div> </div> cómo publicar en MavenCentral usando gradle Enviar a grupos de Telegram desde GoogleSheet Jorge Aguilera 2021-01-18T00:00:00Z https://blog.jagedn.dev/blog/2021/googlesheet-telegram.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Enviar mensajes a un grupo de Telegram es realmente fácil pues con una simple llamada HTTP puedes enviarlos. En este post vamos a utilizar la capacidad de GoogleSheet de ejecutar scripts para hacer esta llamada a una serie de grupos de Telegram con un simple click.</p> </div> </div> </div> <div class="sect1"> <h2 id="preparación">Preparación</h2> <div class="sectionbody"> <div class="paragraph"> <p>Vamos a necesitar:</p> </div> <div class="ulist"> <ul> <li> <p>Una hoja de cálculo de GoogleSheet</p> </li> <li> <p>El token de un bot de Telegram que obtendremos desde @BotFather</p> </li> <li> <p>Los IDs de los grupos a los que queremos enviar el mensaje y en los que el admin de cada grupo habrá dado permisos para ello al bot</p> </li> </ul> </div> <div class="sect2"> <h3 id="bot_de_telegram">Bot de Telegram</h3> <div class="paragraph"> <p>Crear un bot de Telegram es realmente fácil y no lleva más de un minuto y unos pocos clicks (obviamente necesitas tener una cuenta de Telegram). Bien sea desde la aplicación del móvil, la versión web o la versión de escritorio (sí, Telegram tiene 3 formas de usarlo) buscaremos en los contactos a @BotFather</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2021/telegramgoogle/botfather.png" alt="botfather"> </div> </div> <div class="paragraph"> <p>Una vez empecemos el diálogo con BotFather seleccionaremos /newbot y seguiremos los pasos que nos va guiando el bot</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2021/telegramgoogle/newbot.png" alt="newbot"> </div> </div> <div class="paragraph"> <p>Al final del proceso tendremos nuestro bot listo y podremos consultar su API token (siempre puedes consultarlo así que no necesitas guardarlo pero allá donde lo vayas a usar ten cuidado de no compartirlo o versionarlo en algún repo donde pueda acceder gente que no quieras que lo vean)</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2021/telegramgoogle/token.png" alt="token"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="grupos_de_telegram">Grupos de telegram</h2> <div class="sectionbody"> <div class="paragraph"> <p>Una vez que tengas el bot creado el admin del grupo al que quieres enviar mensajes le tiene que añadir como admin para que pueda escribir en el grupo.</p> </div> <div class="paragraph"> <p>Así mismo tienes que saber el ID del grupo. Si es público es simplemente su nombre (con la arroba) pero si es un grupo privado tienes que "adivinar" su id. La forma más fácil de buscarlo es con el cliente web (<a href="https://web.telegram.org" class="bare">https://web.telegram.org</a>) fijándote en la url una vez que seleccionas el grupo:</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2021/telegramgoogle/groupid.png" alt="groupid"> </div> </div> <div class="paragraph"> <p>El id del grupo privado es "-100" más la parte subrayada de la imagen (a mí no me mires, es cosa de Telegram)</p> </div> </div> </div> <div class="sect1"> <h2 id="sheet">Sheet</h2> <div class="sectionbody"> <div class="paragraph"> <p>Con todo ello vamos a preparar en una hoja de GoogleSheet una serie de celdas para que nos sea cómodo poder especificar:</p> </div> <div class="ulist"> <ul> <li> <p>el token</p> </li> <li> <p>el titulo</p> </li> <li> <p>el mensaje</p> </li> <li> <p>una imagen (opcional)</p> </li> <li> <p>una lista de grupos</p> </li> <li> <p>una lista de celdas donde ir poniendo si el envío ha sido correcto o no.</p> </li> </ul> </div> <div class="paragraph"> <p>El diseño que he hecho corresponde al de la imagen siguiente y el código adjunto será en base a estas posiciones:</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2021/telegramgoogle/sheet.png" alt="sheet"> </div> </div> <div class="ulist"> <ul> <li> <p>A1: un dibujo de un boton y que tiene asociado el script <code>sendTelegrams</code> cuando se le pincha (usar el boton derecho sobre la imagen)</p> </li> <li> <p>B2: el Token</p> </li> <li> <p>B3: el titulo</p> </li> <li> <p>B4: una url a una imagen en internet</p> </li> <li> <p>B5-N: recorreremos todas las celdas y las concatenaremos para hacer le mensaje</p> </li> <li> <p>C3-N: una lista de ids de grupos privados o públicos</p> </li> </ul> </div> <div class="paragraph"> <p>Desde Herramientas seleccionaremos "Editor de secuencias de comandos" y en el editor que nos aparece sustituieremos lo que nos crea por defecto por el siguiente código:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>var ui = SpreadsheetApp.getUi(); var ss = SpreadsheetApp.getActiveSpreadsheet(); var sheet = ss.getActiveSheet(); var rangeData = sheet.getDataRange(); var lastColumn = rangeData.getLastColumn(); var lastRow = rangeData.getLastRow(); function sendTelegrams() { const title = sheet.getRange(3,2).getValue() const image = sheet.getRange(4,2).getValue() let message = sheet.getRange(5,2,10,1).getValues().join('\n') const bootToken = sheet.getRange(1,3).getValue() if( image != ""){ message+="\n[​​​​​​​​​​​]("+image+")" } const groups = sheet.getRange(3,3,100,1).getValues() for( var g=0; g&lt;groups.length; g++){ if(!groups[g][0]){ continue } var payload = { 'chat_id':groups[g][0], 'text': title+'\n'+message, 'parse_mode':'MarkdownV2', 'disable_web_page_preview':false } var options = { 'method' : 'post', 'contentType': 'application/json', 'payload': JSON.stringify(payload), 'muteHttpExceptions':true }; var url = 'https://api.telegram.org/bot'+bootToken+'/sendMessage'; const resp = UrlFetchApp.fetch(url, options); sheet.getRange(3+g,4).setValue(resp.getResponseCode()==200) } }</code></pre> </div> </div> <div class="paragraph"> <p>El script es realmente simple:</p> </div> <div class="ulist"> <ul> <li> <p>accedemos a los objetos de GoogleSheet</p> </li> <li> <p>leemos los valores de las celdas de interés</p> </li> <li> <p>concatenamos todas las celdas de mensajes con retornos de carro (\n)</p> </li> <li> <p>si queremos ḿandar una imagen la incluimos en formato markdown</p> </li> <li> <p>recorremos el rango destinado a los ids de grupo y para cada uno construimos un payload según lo quiere Telegram y un options según lo quiere Google</p> </li> <li> <p>enviamos el mensaje con <code>UrlFetchApp</code> y vamos escribiendo si ha ido bien o mal</p> </li> <li> <p>chimpun</p> <div class="dlist"> <dl> <dt class="hdlist1">NOTE</dt> <dd> <p>Como ves para no complicar el ejemplo he optado por usar MarkdownV2 aunque también se puede usar HTML (en realidad un subconjunto del mismo) simplemente cambiando <code>parse_mode</code> a <code>html</code></p> </dd> </dl> </div> </li> </ul> </div> <div class="paragraph"> <p>Guardamos el script y volvemos a la hoja de cálculo donde podemos añadir un dibujo (Insertar/Dibujo) de un botón por ejemplo y con el botón derecho sobre él asignarle que ejecute la función:</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2021/telegramgoogle/boton1.png" alt="boton1"> </div> </div> <div class="imageblock"> <div class="content"> <img src="/images/2021/telegramgoogle/boton2.png" alt="boton2"> </div> </div> </div> </div> <div class="sect1"> <h2 id="escribir_mensajes">Escribir mensajes</h2> <div class="sectionbody"> <div class="paragraph"> <p>Por último simplemente nos resta redactar nuestro mensaje usando formato markdown</p> </div> <div class="paragraph"> <p>La idea es que puedas escribir de forma cómoda usando las celdas de Google de tal forma que no hace falta que lo escribas todo en una única celda, sino aprovechar que, si le das al enter, Google te lleva a la celda inferior. El scritp concatenará todas estas celdas en una cadena con retornos de carro. De esta forma, si dejas una celda en blanco podrás formatear mejor los mensajes</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">NOTE</dt> <dd> <p>He puesto un límite de 100 celdas, más que suficientes para un mensaje</p> </dd> </dl> </div> <div class="paragraph"> <p>Una vez que tengas preparado el mensaje puedes, por ejemplo, quitar (o mover) todos los ids salvo uno de pruebas y pulsar el botón para que se ejecute el script. Si todo ha ido bien y el mensaje es de tu gusto, puedes volver a poner en las celdas de los ids los mismos y volver a pulsar el botón.</p> </div> <div class="paragraph"> <p>Para cada grupo indicado el script escribirá un TRUE o FALSE si ha podido enviar el mensaje en ese canal o no</p> </div> </div> </div> un ejemplo práctico de cómo enviar mensajes de Telegram usando GoogleSheet Colaboración Calendario Científico Escolar Jorge Aguilera 2021-01-18T00:00:00Z https://blog.jagedn.dev/blog/2021/calendario-cientifico.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>El Calendario Científico Escolar (<a href="https://twitter.com/CalCientifico" class="bare">https://twitter.com/CalCientifico</a>) es un proyecto dedicado a publicar una efeméride científica cada día del año. Actualmente van por su segunda edición. Además de publicar la efeméride proponen una serie de actividades para ser realizadas en las aulas .</p> </div> <div class="paragraph"> <p>Aunque creo recordar que el proyecto me sonaba de algo de la edición pasada, la verdad es que no habría reparado en este proyecto sino fuera porque un amigo de Twitter (@ArbolIdeas) me mencionó por si había alguna manera de pasar un fichero plano a formato calendario ics</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2021/calendario/1.png" alt="1"> </div> </div> <div class="paragraph"> <p>Y evidentemente piqué el anzuelo</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2021/calendario/2.png" alt="2"> </div> </div> <div class="paragraph"> <p>Así que tras unos mensajitos por Twitter y otros por Telegram llegamos a "concretar" una lista de funcionalidades que se podrían hacer de forma fácil:</p> </div> <div class="ulist"> <ul> <li> <p>tuitear todos los días la efeméride que tocara. Preferiblemente un tweet por cada idioma y si el texto era más largo de lo que permite Twitter enviarlo en forma de hilo. Obviamente adjuntando la imagen de la efeméride</p> </li> <li> <p>un canal de Telegram donde enviar todos los días un mensaje con todos los idiomas (en lugar de varios canales por nombre)</p> </li> <li> <p>unos ficheros iCal para ser importados en un calendario. Se crearía además un calendario público en Google por cada idioma</p> </li> <li> <p>una web mínima donde tener las imágenes de forma aislada para poder ser adjuntada en cada mensaje accesible desde internet.</p> </li> </ul> </div> <div class="paragraph"> <p>Para ello la lista de requisitos en realidad no era muy exigente: los ficheros con los textos y las imágenes de los personajes de forma individual. Ninguna de las dos cosas era problema pues los ficheros estaban publicados de forma abierta (ya les había echado un ojo antes para ver dónde me metía) y las imágenes las proporcionaría la diseñadora.</p> </div> <div class="paragraph"> <p>Por otra parte indagué sobre los sistemas que se estaban empleando en ese momento siendo en realidad bastante simples: sólo se utilizaba la web del organismo patrocinador y cualquier enlace a descargas debería apuntar a esta web pues es donde se encuentra el sistema de estadística. Por lo demás teníamos barra libre.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>aunque pueda parecer a priori una lista con bastante cosas a hacer en realidad casi todas ellas ya las tenía de una forma u otra hechas de otros proyectos como enviar la calidad del aire de Madrid todos los días a Twitter, publicar actividades de las bibliotecas en Telegram y cosas así.</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="origen_de_datos">Origen de datos</h2> <div class="sectionbody"> <div class="paragraph"> <p>Como documentos origen contábamos principalmente con unos PDFs (uno por cada 5 idiomas) enmaquedaos con la imagen de la efeméride y el texto del día, así como una serie de Docx con los textos de cada día en párrafos. Existen ficheros planos pero como no los tenía al alcance y los documentos Docx estaban bien estructurados decidí usarlos como los textos origen a utilizar.</p> </div> </div> </div> <div class="sect1"> <h2 id="ficheros_csv">Ficheros CSV</h2> <div class="sectionbody"> <div class="paragraph"> <p>En primer lugar deberíamos convertir los textos a un formato más manejable tipo CSV. Como quería incluir la imagen del día y los ficheros planos tenían otro formato, decidí crear unos nuevos.</p> </div> <div class="paragraph"> <p>Mediante GoogleSheet definí un documento que tuviera las columnas:</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 20%;"> <col style="width: 20%;"> <col style="width: 20%;"> <col style="width: 20%;"> <col style="width: 20%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">dia</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">mes</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">año</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">personaje</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">frase</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">1</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">1</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">2021</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">1</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">-------</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">2</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">1</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">2021</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">2</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">-------</p></td> </tr> <tr> <td class="tableblock halign-left valign-top" colspan="5"><p class="tableblock">---</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">31</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">12</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">2021</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">365</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">-------</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Básicamente asigné un identificador correlativo a cada personaje en función del día que le tocaba puesto que en principio cada día sería uno diferente (tal vez el personaje coincidiera pero no la imagen)</p> </div> <div class="paragraph"> <p>Formatear los documentos de párrafos a lineas en el GoogleSheet fue una tarea simple que una vez pillado el truco no me llevo más de una hora importar todos los idiomas.</p> </div> <div class="paragraph"> <p>Al comprobar que muchos de los textos contenían caracteres como la coma, o el pipe opté por volcar cada tab en ficheros TSV (es decir usar el tabulador).</p> </div> <div class="paragraph"> <p>Así mismo, mientras esperaba que me pasaran las imágenes separadas, opté por hacer algunos recortes de pantalla y generarme unas cuantas imágenes de personajes para probar la idea.</p> </div> </div> </div> <div class="sect1"> <h2 id="primeros_scripts">Primeros scripts</h2> <div class="sectionbody"> <div class="paragraph"> <p>Como la motivación inicial de @ArbolIdeas era disponer de las efemérides en su calendario (supongo que para que su agenda automática le avise) lo primero que hice fue un script que "convirtiera" estos csv a iCal (ficheros de eventos de calendarios). Para ello existe una librería en Java muy fácil de usar y el script queda tan sencillo como:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>@Grab(group='org.mnode.ical4j', module='ical4j', version='3.0.21') import net.fortuna.ical4j.model.* import net.fortuna.ical4j.model.property.DtStamp if( args.length != 3){ println "necesito lang, entrada, salida" return } new File(args[1]).withReader{ r-&gt; r.readLine() def builder = new ContentBuilder() def calendar = builder.calendar() { prodid '-//Ben Fortuna//iCal4j 1.0//EN' version '2.0' def line while( (line=r.readLine())!= null){ def fields = line.split('\t') def title = fields[4].split('\\.').first() vevent { uid String.format('%04d%02d%02d-%s', fields[2] as int, fields[1] as int, fields[0] as int, args[0]) dtstamp new DtStamp() dtstart String.format('%04d%02d%02d', fields[2] as int, fields[1] as int, fields[0] as int), parameters: parameters { value('DATE') } summary title description fields[4] action 'DISPLAY' } } } new File(args[2]).text = calendar.toString() }</code></pre> </div> </div> <div class="paragraph"> <p>Básicamente le das un lenguaje, un csv de entrada y un ical de salida y va leyendo línea a línea el fichero de entrada generando al final el fichero ical</p> </div> <div class="paragraph"> <p><code>$ groovy scripts/ical.groovy es static/data/csv/2021_es.csv static/data/ical/2021_es.ical</code></p> </div> <div class="paragraph"> <p>Ejecutando este script por cada idioma dispuse al momento de un calendario por idioma. Importarlo a tu agenda es tan fácil (al menos con Google Calendar que es con lo que lo he probado) como ir a tu cuenta, crear un calendario e importar el fichero de tu interés.</p> </div> <div class="paragraph"> <p>Así por ejemplo un colegio, organización o grupo de interés puede crear un calendario, o añadir a uno existente, con estos eventos y todos tener su notificación.</p> </div> </div> </div> <div class="sect1"> <h2 id="telegram">Telegram</h2> <div class="sectionbody"> <div class="paragraph"> <p>Para poder visualizar la idea que tenía me decanté en primer lugar por publicar un mensaje en un canal privado de Telegram, principalmente porque es super sencillo y rápido. Puedes crear el canal, tanto público como privado, en cuestión de segundos así como obtener un token para publicar en él de forma desatendida.</p> </div> <div class="paragraph"> <p>El primer script con #groovy fue a grandes rasgos algo como leer uno de los csv y buscar el día, mes y año en curso y realizar un http-post usando las claves de Telegram. Al final el script ha quedado en algo como este:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>@Grab('io.github.http-builder-ng:http-builder-ng-core:1.0.4') import static groovyx.net.http.HttpBuilder.configure import static groovyx.net.http.ContentTypes.JSON import groovyx.net.http.* import static java.util.Calendar.* year = args.length &gt; 0 ? args[0] as int : new Date()[YEAR] month = args.length &gt; 1 ? args[1] as int : new Date()[MONTH]+1 day = args.length &gt; 2 ? args[2] as int : new Date()[DAY_OF_MONTH] println "Processing $year/$month/$day" TELEGRAM_CHANNEL=System.getenv("TELEGRAM_CHANNEL") TELEGRAM_TOKEN=System.getenv("TELEGRAM_TOKEN") if( !TELEGRAM_CHANNEL || !TELEGRAM_TOKEN ){ println "Necesito la configuracion de telegram" return } http = configure{ request.uri = "https://api.telegram.org" request.contentType = JSON[0] } html = '' ['es','astu','cat','eus','gal','en'].each{ lang -&gt; String[]found new File("static/data/csv/${year}_${lang}.tsv").withReader{ reader -&gt; reader.readLine() String line while( (line=reader.readLine()) != null){ def fields = line.split('\t') if( fields.length != 5) continue if( fields[0] as int == day &amp;&amp; fields[1] as int == month &amp;&amp; fields[2] as int == year){ found = fields break } } } if(!found){ println "not found $year/$month/$day" return } if( !html ){ html = """Tal día como hoy &lt;a href="https://calendario-cientifico-escolar.github.io/images/personajes-min/${found[3]}.png"&gt; &lt;/a&gt; """ } html +="""${found[4]} ------- """ } html += """ &lt;i&gt;Proyecto FECYT FTC-2019-15288&lt;/i&gt; &lt;a href="http://www.igm.ule-csic.es/calendario-cientifico"&gt;Puedes descargar el calendario y la guía didáctica en nuestra web&lt;/a&gt; """ http.post{ request.uri.path = "/bot$TELEGRAM_TOKEN/sendMessage" request.body = [ chat_id: TELEGRAM_CHANNEL, text: html, parse_mode: 'HTML', disable_web_page_preview: false, ] }</code></pre> </div> </div> <div class="paragraph"> <p>Que seguramente se pueda hacer más bonito y óptimo pero este sea sencillo y funciona. Simplemente para cada idioma, recorre las líneas del fichero buscando las del dia que se le haya pasado por argumento y va concatenando en un string las diferentes traducciones. Una vez completados todos los idiomas añade un pie de mensaje y realiza un http post.</p> </div> <div class="paragraph"> <p>La "gracia" aquí es adjuntar una imagen en un mensaje de telegram. En principio el api NO lo permite pero existe un truco añadiendo un href con la imagen y habilitando el preview de las páginas web</p> </div> <div class="paragraph"> <p>El resultado final es algo como:</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2021/calendario/3.png" alt="3"> </div> </div> <div class="paragraph"> <p><em>(Seguiré buscando un diseño más atractivo para el mensaje)</em></p> </div> <div class="paragraph"> <p>Como todavía no tenía un repositorio decente donde poner las imágenes utilicé un <em>ngrok</em> mediante el cual puedes servir páginas en tu local a través del túnel que te crea. Como solución temporal para hacer unas pruebas no está mal y funciona.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Como puedes ver en el script anterior ya contamos con un repositorio en Github donde poder acceder a las imágenes.</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="repositorio_git">Repositorio Git</h2> <div class="sectionbody"> <div class="paragraph"> <p>Una vez validada la idea y mostrado el resultado procedimos a crear el repositorio público git. Gracias a la predisposición por compartir el proyecto la verdad es que fue fácil el convencer de los beneficios que puede aportar un repositorio así. Además las operaciones que íbamos a realizar sobre este no iban a ser tan contínuas como en un proyecto típico de software y con el interface web que ofrecen estos servicios consideramos que sería suficiente para los miembros menos técnicos del equipo.</p> </div> <div class="paragraph"> <p>Así pues la "decisión" se centraba entre usar Gitlab (el cual vengo usando desde hace años con muy buenos resultados) o Github, más conocido y usado por la gente. Github me ofrecía la oportunidad de tener un caso real para probar el tema de Github Actions, sobre los que había leído pero no probado, así que de forma totalmente egoísta decidí usarlo como repositorio.</p> </div> </div> </div> <div class="sect1"> <h2 id="github">Github</h2> <div class="sectionbody"> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Como ya he mencionado, para mí Gitlab no es sólo una alternativa mejor "filosóficamente" hablando, sino que tiene funcionalidades que Github no ha tenido hasta hace poco, como Github Actions que viene siendo el Pipeline de Gitlab y que llevo usando ya desde hace varios años.</p> </dd> </dl> </div> <div class="paragraph"> <p>Github es un servicio que permite el trabajo colaborativo con control de versiones git integrado muy popular y que ya es usado por ambientes muy diferentes al del desarrollo de software. Así pues, y tras comentar las ventajas de disponer de un repositorio en dicho servicio lo creé y añadí como owners a las personas interesadas.</p> </div> <div class="paragraph"> <p>La intención inicial del repositorio era alojar en él tantos los csv como las imágenes (y así lo use al principio) aunque luego hemos añadido un site estático basado en Hugo.</p> </div> <div class="paragraph"> <p>Simplemente creé una organización "calendario-cientifico-escolar.github" y un repositorio "calendario-cientifico-escolar.github.io" en dicha organización. Al coincidir el nombre del repositorio con la cuenta y terminarlo con "github.io" Github te permite publicar un static site bajo ese nombre. De esta forma ya tenemos un site en Internet en <a href="https://calendario-cientifico-escolar.github.io/" class="bare">https://calendario-cientifico-escolar.github.io/</a></p> </div> <div class="paragraph"> <p>Tras crear la organización y repositorio, un miembro del proyecto se creó una cuenta y le añadí como owner del mismo. De esta forma según fueran recibiendo nuevas actualizaciones de las imágenes podrían subirlas directamente sin necesidad de mi intermediación (además de que el proyecto es suyo, yo sólo estoy colaborando)</p> </div> <div class="paragraph"> <p>Con este repositorio en marcha pudimos empezar a "jugar" con la idea de ejecutar tareas de forma programada usando Github Actions</p> </div> </div> </div> <div class="sect1"> <h2 id="github_actions">Github ACtions</h2> <div class="sectionbody"> <div class="paragraph"> <p>Como ya he comentado, Github Actions es la nueva propuesta de Github para ejecutar pipelines cuando subes un cambio o también de forma planificada. Por ejemplo, si tienes un static site puedes planificar un action para que cuando actualizas el contenido se ejecute una tarea que publique el site o que a cierta hora ejecute un "algo", en nuestro caso los scripts para enviar a las redes sociales la efeméride del día.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Gitlab tiene esta funcionalidad desde hace muchos años y en mi opinión mucho mejor integrada.</p> </dd> </dl> </div> <div class="paragraph"> <p>Más allá de los detalles técnicos que puedes encontrar en la docu, algunas notas mías:</p> </div> <div class="ulist"> <ul> <li> <p>recuerda que las actions se definen en el directorio <code>.github/workflows</code></p> </li> <li> <p>puedes tener muchas actions y las defines cada una en un fichero</p> </li> <li> <p>en Gitlab puedes usar cualquier imágen de Docker, aquí hasta donde he visto sólo puedes usar las que tienen, por ejemplo <code>ubuntu-18.04</code></p> </li> <li> <p>existen un monton de <code>actions</code> (pasos a ejecutar en tu pipeline) predefinidas que te pueden simplificar la vida. Por aquí es por donde va el tema, saber cúales hay cómo crearte la tuya.</p> </li> <li> <p>el schedule se define en UTC (vamos que NO planifiques según tu horario local) y en base a mi experiencia, no programes una operación a corazón abierto con él (vamos, que más o menos se ejecuta a esa hora pero&#8230;&#8203;)</p> </li> </ul> </div> <div class="paragraph"> <p>Además de forma desatendida puedes configurar un action para que se ejecute manualmente incluso pasándole parámetros vía web, lo cual fue muy útil para hacer las primeras pruebas. Por ejemplo, el script de envío de Telegram (y luego el de Twitter) permiten pasar por argumentos un día, mes y año y si no se pasan el script toma los del día actual.</p> </div> <div class="paragraph"> <p>Así por ejemplo el action de Telegram se configuraría:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>name: telegram on: schedule: # * is a special character in YAML so you have to quote this string - cron: '0 7 * * *' workflow_dispatch: inputs: year: description: 'Year' required: true default: '2021' month: description: 'Month' required: true day: description: 'Day' required: true jobs: check-groovy: runs-on: ubuntu-latest env: GROOVY_VERSION: 3.0.5 TELEGRAM_CHANNEL: ${{ secrets.TELEGRAM_CHANNEL }} TELEGRAM_TOKEN: ${{ secrets.TELEGRAM_TOKEN }} steps: - uses: actions/checkout@v2 - id: install shell: bash run: | curl -s "https://get.sdkman.io" | bash source "$HOME/.sdkman/bin/sdkman-init.sh" sdk install groovy $GROOVY_VERSION groovy scripts/telegram.groovy ${{ github.event.inputs.year }} ${{ github.event.inputs.month }} ${{ github.event.inputs.day }}</code></pre> </div> </div> <div class="paragraph"> <p>Como ves, defino dos formas de ejecutarlo, programada y manual (con parámetros introducidos por el usuario). Uso la última imagen de ubuntu e instalo sobre ella Groovy para poder ejecutar el script.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>en Gitlab sería más simple pues puede indicar que use la imagen <code>groovy:3.0.5</code> por ejemplo sin necesidad de tener que hacer todos esos pasos. Hasta donde yo sé no existe (aún) un action adecuado para Groovy</p> </dd> </dl> </div> <div class="paragraph"> <p>Cuando queremos enviar el telegram de un día concreto simplemente es ir a la sección de <code>actions</code> y proporcionar los parámetros:</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2021/calendario/4.png" alt="4"> </div> </div> </div> </div> <div class="sect1"> <h2 id="github_secrets">Github Secrets</h2> <div class="sectionbody"> <div class="paragraph"> <p>Para poder autentificar a los scripts vamos a tener que proporcionar en la mayoría de los casos (siempre) las credenciales correspondientes en cada servicio. En el caso de Telegram por ejemplo necesitamos el canal y el token del bot que va a realizar la acción.</p> </div> <div class="paragraph"> <p>Crear un canal de Telegram es instantáneo y sólo requiere que no exista uno con ese nombre. Así mismo el canal puede ser privado o público (el primero se identifica con un número y el segundo con el nombre que le des). Por otra parte crear un bot para publicar en este canal es igualmente fácil y utilizando el bot BotFather de Telegram puedes crearlo y obtener su token al momento.</p> </div> <div class="paragraph"> <p>Para las primeras pruebas de integración utilicé un canal privado así como un bot que tengo de Puravida Software por lo que sólo falta hacerle "llegar" al script estas credenciales de forma segura para lo que se usa los <em>secrets</em> de Github</p> </div> <div class="paragraph"> <p>Puedes crear diferentes secretos por entornos (entorno de desarrollo, test, blablabbla) pero en nuestro caso no lo necesitamos así que tenemos simplemente secretos de repositorio.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Obviamente una vez probado y validado el script sobre el canal privado simplemente creamos un canal público @CalendarioCientifico y actualizamos el secret correspondiente</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="twitter">Twitter</h2> <div class="sectionbody"> <div class="paragraph"> <p>Con toda esta infraestructura probada y funcionando introducir un nuevo script junto con su action y secrets para Twitter es realmente fácil.</p> </div> <div class="paragraph"> <p>Como queríamos tuitear desde la cuenta oficial, la persona que la lleva rellenó el formulario para crear una app y obtener las ApiKey y Secrets de twitter (el proceso llevo sólo un par de horas de espera hasta obtenerlas)</p> </div> <div class="paragraph"> <p>Este script va a ser muy similar al de Telegram pero con algunas diferencias:</p> </div> <div class="ulist"> <ul> <li> <p>un tweet por idioma (en lugar de un sólo mensaje)</p> </li> <li> <p>adjuntar la imagen en el primer tweet de cada idioma</p> </li> <li> <p>controlar si el texto excede el límite de un tweet y si es así enviarlo como hilo.</p> </li> <li> <p>un hashtag diferente por cada idioma</p> </li> </ul> </div> <div class="paragraph"> <p>Por lo demás usará los mismos ficheros csv, imágenes, parámetros etc. quedando el script:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>@Grab(group='org.twitter4j', module='twitter4j-core', version='4.0.6') import twitter4j.TwitterFactory import twitter4j.StatusUpdate import static java.util.Calendar.* year = args.length &gt; 0 ? args[0] as int : new Date()[YEAR] month = args.length &gt; 1 ? args[1] as int : new Date()[MONTH]+1 day = args.length &gt; 2 ? args[2] as int : new Date()[DAY_OF_MONTH] println "Processing $year/$month/$day" [ 'es':'#CalendarioCientifico', 'astu':'#CalendariuCientificu', 'cat':'#CalendariCientífic', 'eus':'#ZientziaEskolaEgutegia', 'gal':'#CalendarioCientifico', 'en':'#ScientificCalendar', ].each{ kv -&gt; String lang = kv.key String hashtag = kv.value String[]found new File("static/data/csv/${year}_${lang}.tsv").withReader{ reader -&gt; reader.readLine() String line while( (line=reader.readLine()) != null){ def fields = line.split('\t') if( fields.length != 5) continue if( fields[0] as int == day &amp;&amp; fields[1] as int == month &amp;&amp; fields[2] as int == year){ found = fields break } } } if(!found){ println "not found $year/$month/$day" return } String title= found[4].split('\\.').first() String body= found[4].split('\\.').drop(1).join(' ') String link = "" String hashtags = "${hashtag}" long inReply = 0 def tweets = splitText("$title\n$body", "$link\n$hashtags") tweets.eachWithIndex{ str, i -&gt; String page = tweets.size() == 1 ? "" : "${i+1}/${tweets.size()}" StatusUpdate status = new StatusUpdate("$str\n$page").inReplyToStatusId(inReply) if( i == 0 ){ def bytes = "https://calendario-cientifico-escolar.github.io/images/personajes/${found[3]}.png".toURL().bytes println "image con $bytes.length" status.media "${found[3]}", new ByteArrayInputStream(bytes) } inReply = TwitterFactory.singleton.updateStatus(status).id println status.status } } def splitText( String text, String suffix ){ def ret = [] def words = text.split(' ') def current = '' words.eachWithIndex{ w, i -&gt; if( current.length() &gt; 180 ){ ret.add current current = '' } current+= "$w " } current += "\n$suffix" ret.add current ret }</code></pre> </div> </div> <div class="paragraph"> <p>Y su action de forma muy parecida al de Telegram cambiando simplemente cúando ejecutarlo y los tokens que este requiere. De esta forma podemos, de forma manual, enviar un tweet de un día cualquiera</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>name: twitter on: schedule: # * is a special character in YAML so you have to quote this string - cron: '0 5 * * *' workflow_dispatch: inputs: year: description: 'Year' required: true default: '2021' month: description: 'Month' required: true day: description: 'Day' required: true jobs: check-groovy: runs-on: ubuntu-latest env: GROOVY_VERSION: 3.0.5 CONSUMERKEY: ${{ secrets.CONSUMERKEY }} CONSUMERSECRET: ${{ secrets.CONSUMERSECRET }} ACCESSTOKEN: ${{ secrets.ACCESSTOKEN }} ACCESSTOKENSECRET: ${{ secrets.ACCESSTOKENSECRET }} steps: - uses: actions/checkout@v2 - id: install shell: bash run: | curl -s "https://get.sdkman.io" | bash source "$HOME/.sdkman/bin/sdkman-init.sh" sdk install groovy $GROOVY_VERSION groovy \ -Dtwitter4j.oauth.consumerKey=${CONSUMERKEY} \ -Dtwitter4j.oauth.consumerSecret=${CONSUMERSECRET} \ -Dtwitter4j.oauth.accessToken=${ACCESSTOKEN} \ -Dtwitter4j.oauth.accessTokenSecret=${ACCESSTOKENSECRET} \ scripts/twitter.groovy ${{ github.event.inputs.year }} ${{ github.event.inputs.month }} ${{ github.event.inputs.day }}</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="static_site">Static Site</h2> <div class="sectionbody"> <div class="paragraph"> <p>Por último (por ahora) y teniendo todo funcionando decidímos crear un site sobre el mismo repositorio que ayude en la localización de los ficheros.</p> </div> <div class="paragraph"> <p>Básicamente sobre el proyecto mismo creé un site con <code>Hugo</code> el cual permite usar ficheros Markdown para editar el contenido de las páginas y él se encarga de renderizarlo. La elección de este generador fue por su cuasi-simplicidad y cómo no por tener una excusa para probarlo (yo uso para mi blog JBake pero el diseño por defecto requiere mucho tuneo y así investigaba otros generadores).</p> </div> <div class="paragraph"> <p>Una vez creado el site y editadas las páginas de inicio y enlaces, la labor fue conseguir un <em>action</em> para generar y publicar el site de forma desatendida.</p> </div> <div class="paragraph"> <p>El action al final ha quedado tal que:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>name: site on: push: branches: - main jobs: deploy: runs-on: ubuntu-18.04 steps: - name: Git checkout uses: actions/checkout@v2 - name: Update theme run: git submodule update --init --recursive - name: Setup hugo uses: peaceiris/actions-hugo@v2 with: hugo-version: "0.70.0" - name: Build run: hugo --minify - name: Deploy uses: peaceiris/actions-gh-pages@v3 with: deploy_key: ${{secrets.ACTIONS_DEPLOY_KEY}} external_repository: calendario-cientifico-escolar/calendario-cientifico-escolar.github.io publish_dir: ./public user_name: Jorge Aguilera user_email: jagedn@gmail.com publish_branch: gh-pages</code></pre> </div> </div> <div class="paragraph"> <p>Lo único de interés en este action es que hay que crear una clave pública/privada para poder autentificar a este action en el proyecto y que pueda publicar el directorio <code>public</code> generado por Hugo en el branch <code>gh-pages</code> que es el que hemos configurado en la consola de Github como rama donde reside el site a publicar.</p> </div> <div class="paragraph"> <p>Con esto, ante cualquier commit en main (anteriormente conocido como master) el action genera y publica el site en Internet.</p> </div> <div class="paragraph"> <p>Utilizando el directorio de Hugo <code>static</code> podemos ubicar los ficheros que los script (o cualquiera con otra idea) usaran para su ejecución.</p> </div> </div> </div> <div class="sect1"> <h2 id="conclusiones">Conclusiones</h2> <div class="sectionbody"> <div class="paragraph"> <p>Aunque parezca mucho trabajo en realidad no es tanto, y más si tenemos en cuenta que ya tenía los scripts casi de otros proyectos. Simplemente era tener clara la idea de lo que se pretendía, a saber:</p> </div> <div class="ulist"> <ul> <li> <p>disponer de un repositorio donde ubicar ficheros a consumir</p> </li> <li> <p>probar unos scripts en local</p> </li> <li> <p>jugar con la automatización de tareas de Github Actions</p> </li> <li> <p>pelearse con la configuración de los tokens para no publicarlos y mantenerlos secretos</p> </li> <li> <p>como bola extra jugar con la idea de tener un site o blog para poder poner los enlaces sin más pretensiones (el site actual es feo como él solo)</p> </li> </ul> </div> <div class="paragraph"> <p>Por mi parte la excusa, autoimpuesta, de tener que usar Github para automatizar tareas o probar Hugo (creo que migraré el blog del chaval a Hugo) me ha sido muy gratificante. Si le añadimos el poder colaborar en proyectos de divulgación científica (mira mamá, soy casi divulgador científico!!!) pues mayor placer aún.</p> </div> </div> </div> notas sobre mi colaboración con el proyecto Calendario Científico escolar Resumen 2020 Jorge Aguilera 2020-12-21T00:00:00Z https://blog.jagedn.dev/blog/2020/resumen.html <div id="preamble"> <div class="sectionbody"> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> Vaya por delante mis condolencias para todos aquellos que han perdido a algún ser querido así como mucho ánimo para seguir con lo que nos espera, porque no nos engañemos, esto no termina el 31 de diciembre. En mi entorno familiar, por suerte, aunque ha habido casos no han sido nada graves. </td> </tr> </table> </div> <div class="paragraph"> <p>Termina un año tan complicado como 2020 y es tiempo de escribir el penúltimo post del año a modo de resumen y porqué no, un poco de autobombo.</p> </div> </div> </div> <div class="sect1"> <h2 id="blog">Blog</h2> <div class="sectionbody"> <div class="paragraph"> <p>Hace un año y poco que empecé el blog, por lo que podemos decir que este ha sido su primer año. Por si no lo sabes, (aunque hay un post donde lo explico) en este blog me he creado un sistema de estadísticas totalmente manual de tal forma que cuando lees un artículo del mismo se crea una entrada en una hoja GoogleSheet en la que simplemente guardo la url y la fecha y con ello tengo todo el sistema de estadísticas que necesito, que viene siendo saber qué post es el más leído y ya.</p> </div> <div class="paragraph"> <p>En cifras, este año he escrito 28 entradas (con esta) con unas 2680 visitas. Los post que han generado más interés han sido:</p> </div> <table class="tableblock frame-all grid-all stretch"> <caption class="title">Table 1. Post 2020</caption> <colgroup> <col style="width: 50%;"> <col style="width: 50%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">URL</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Visitas</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><a href="https://blog.jagedn.dev/blog/2020/plantuml-c4.html" target="_blank" rel="noopener">C4</a></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">464</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><a href="https://blog.jagedn.dev/blog/2020/telegram-bot-netlify.html" target="_blank" rel="noopener">Telegram Bot</a></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">343</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><a href="https://blog.jagedn.dev/blog/2020/intro-asciidoctor-1.html" target="_blank" rel="noopener">Asciidoctor 1</a></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">230</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><a href="https://blog.jagedn.dev/blog/2020/intro-asciidoctor-3.html" target="_blank" rel="noopener">Asciidoctor 3</a></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">212</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><a href="https://blog.jagedn.dev/blog/2020/intro-asciidoctor-4.html" target="_blank" rel="noopener">Asciidoctor 4</a></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">149</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><a href="https://blog.jagedn.dev/blog/2020/intro-asciidoctor-2.html" target="_blank" rel="noopener">Asciidoctor 2</a></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">125</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><a href="https://blog.jagedn.dev/blog/2020/intro-antora.html" target="_blank" rel="noopener">Antora</a></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">122</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><a href="https://blog.jagedn.dev/blog/2020/intro-asciidoctor-5.html" target="_blank" rel="noopener">Asciidoctor 5</a></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">111</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Aunque un par de post del 2019 siguen estando entre los más leídos</p> </div> <table class="tableblock frame-all grid-all stretch"> <caption class="title">Table 2. Post 2019</caption> <colgroup> <col style="width: 50%;"> <col style="width: 50%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><a href="https://blog.jagedn.dev/blog/2019/postureo.html" target="_blank" rel="noopener">Postureo</a></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">203</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><a href="https://blog.jagedn.dev/blog/2019/okteto-gallery.html" target="_blank" rel="noopener">Okteto Picture Gallery</a></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">176</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><a href="https://blog.jagedn.dev/blog/2019/okteto-grails.html" target="_blank" rel="noopener">Okteto Grails</a></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">114</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>A estas alturas, la mayoría de los que me leen saben por mi preferencia de Asciidoctor como herramienta no sólo para documentar sino para escribir sea lo que sea, y eso se nota en los artículos que he escrito. Viendo el interés que generó C4 (el primer sorprendido soy yo mismo) creo que debería sacar un rato para profundizar más sobre este y sobre alguna de las herramientas que se están creando a su alrededor</p> </div> <div class="paragraph"> <p>A mitad de año se me ocurrió crear un grupo de Telegram, así como un canal, ambos con el mismo nombre que el blog, donde anunciar, algo así como a modo de exclusiva, la url del último post y que esté orientado a que la peña suscribita comentar sobre lo que quieran, preferiblemente sobre qué les ha parecido algún post, si no se entiende, etc. Por ahora somos pocos pero han surgido algunas cosas interesantes, espero que siga así.</p> </div> </div> </div> <div class="sect1"> <h2 id="salto_sin_red_otro">Salto sin red (otro)</h2> <div class="sectionbody"> <div class="paragraph"> <p>Echando la vista atrás me encontraba a principios de año trabajando para eDreams en un equipo pequeño (unas 6 personas) desarrollando una aplicación interna de backoffice en Grails (mi framework favorito) donde estaba aprendiendo sobre todo a aplicar Kanban y a trabajar en un entorno bastante Agile. Es un grupo que este tema ya llevaban un tiempo probando qué era lo que mejor les funcionaba y aunque la aplicación tenía sus cosas la verdad es que en este tema aprendí bastante.</p> </div> <div class="paragraph"> <p>Sin embargo soy una persona que tiene que estar más en "el barro", necesito tener la posibilidad de desarrollar y probar ideas nuevas sin mucha ceremonia, tanto en herramientas como en arquitectura, y la verdad es que en este sitio no veía la posibilidad de conseguirlo al menos en el corto plazo (no soy muy paciente para estas cosas, I know it) así que en un meetup al que asistí tuve la oportunidad de retomar unas conversaciones con un asiduo a los MadridGUG y me animó a unirme a Tymit, una startup FinTech con un producto actualmente funcionando en UK.</p> </div> <div class="paragraph"> <p>Me despedí de mis compas de eDreams tal que un 18 de Marzo para empezar el siguiente lunes 23, cuando ese mismo fin de semana nos confinaron, por lo que he estado desde el primer día trabajando en remoto hasta ahora. En Tymit se tomó la decisión de que a pesar de que ya se permitía volver a las oficinas sólo lo hiciera quién quisiera, y sinceramente en mi caso al menos el remoto ha funcionado bien y por ahora no siento la necesidad de una oficina (salvo algún momento puntual)</p> </div> <div class="paragraph"> <p>Como en toda buena startup, estos meses han sido muy intensos. Como muestra decir que nuestro proveedor de medios de pago, Wirecard, de la noche a la mañana tuvo que cerrar porque 1.9 <strong>Billones</strong> de euros habían desaparecido (<a href="https://en.wikipedia.org/wiki/Wirecard_scandal" class="bare">https://en.wikipedia.org/wiki/Wirecard_scandal</a>), aunque no todas las movidas han sido por factores externos. El tener un producto ya en marcha y la necesidad de consolidarlo requiere atender muchas áreas, desacoplar sistemas, aprender a toda marcha, explicar las cosas como si hubieras crecido con ellas, &#8230;&#8203; En fín, un reto en el que no te aburres.</p> </div> <div class="paragraph"> <p>A modo de resumen el esfuerzo por mi parte creo que lo resumo en:</p> </div> <div class="ulist"> <ul> <li> <p>Trabajo en remoto. Hemos probado muchas herramientas, desde el típico Slack como herramienta oficial, a Mumble, Discord, ahora Teams, alguna prueba con el plugin de Intellij CodeWithMe, mejorar los commits y las PR, empezamos a trabajar orientado a la feature y no a la issue, forzarnos a escribir en los chats en inglés, &#8230;&#8203;</p> </li> <li> <p>Trabajo en equipo. A mí me cuesta trabajar en equipo. Yo creo que tengo la capacidad de visualizar cómo debería quedar lo que quiero pero no la de planificar paso a paso cómo llegar, sino que llego "por aproximación" lo que no le cuadra a todo el mundo. En estos meses he tenido que ir trabajando en ello pero me queda mucho camino aún.</p> </li> <li> <p>Trabajo de empresa. Después de muchos años llevando mi empresa (unipersonal) y siendo una especie de mercenario me cuesta identificarme con los objetivos de la empresa siendo además en algunos casos muy difícil el hacerlo. Uno de los esfuerzos que he hecho este año ha sido, en la medida de lo posible, identificarme con la empresa y ser parte de ella. Ayuda el participar en los procesos de selección de los nuevos fichajes, tener canales distendidos donde poder expresarte (el post sobre random-place lo pude practicar en nuestro canal #random)</p> </li> </ul> </div> <div class="paragraph"> <p>Obviamente el mayor esfuerzo para mí sigue siendo el tema del inglés, en el que sé que nunca alcanzaré el nivel mínimo que creo que debería tener y que hace que en ciertas propuestas al final tenga que ir al remolque por no poder "liderar" mi punto de vista.</p> </div> </div> </div> <div class="sect1"> <h2 id="charlas">Charlas</h2> <div class="sectionbody"> <div class="paragraph"> <p>Si bien este año no ha sido el mejor para acudir a eventos tampoco tenía la intención de presentar charlas en eventos "multitudinarios". Tenía en mi radar dar la de #DocAsCode en @esLibre_ así como un taller sobre Telegram en el @Greachconf y poco más, aunque sí que tenía intención de presentar alguna en el grupo de MadridGUG para ir contando las tonterías que iba investigando, como la utilizar @Oktetohq como plataforma para desplegar aplicaciones kubernetes.</p> </div> <div class="paragraph"> <p>Como al final el evento de @esLibre_ (sobre el que ya escribí mi resumen en este blog) se hizo de forma virtual pude dar mi charla que a mí particularmente me gustó mucho.</p> </div> <div class="paragraph"> <p>Y sin previo aviso un día recibo un mensaje de la peña de @hatthieves que si quiero hablar sobre mis movidas con #OpenData. Claro, a eso uno no se puede resistir, así que preparé otra charla virtual, sobre la que también encontrarás su entrada en este blog.</p> </div> </div> </div> <div class="sect1"> <h2 id="ideas">Ideas</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="tlgconf">TlgConf</h3> <div class="paragraph"> <p>Parece que fue hace milenios pero empezaba el año ilusionado con desarrollar un bot para manejar las agendas de los eventos. Incluso llegó a funcionar en el WeCodeFest &#8230;&#8203; para luego ver cómo todos los eventos que tenía en el radar se iban cancelando. Cierto que tanto la idea como el bot se pueden adaptar a los tiempos de charlas virtuales pero el parón que hubo me hizo guardarlo en un cajón</p> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> Aquí la documentación del proyecto <a href="https://puravida-software.gitlab.io/tlg-conf/" target="_blank" rel="noopener">Tlg-Confg</a> </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="telegram_workshop">Telegram Workshop</h3> <div class="paragraph"> <p>Para el workshop de Telegram había desarrollado una librería que se integraba con Micronaut aunque ya ha quedado algo obsoleta porque Sergio del Amo ha creado una mucho más potente.</p> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> Aquí las notas para el workshop <a href="https://puravida-software.gitlab.io/mn-telegram-workshop/" target="_blank" rel="noopener">Workshop</a> </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="googlesheet">GoogleSheet</h3> <div class="paragraph"> <p>Algunos pinitos en Google Sheet como adaptar la aplicación para sortear regalos a esta plataforma (correcto, hay post sobre ello). Alguien me comentó que lo probarían en su clase del colegio, pero no sé si llegaron a probarlo.</p> </div> </div> <div class="sect2"> <h3 id="bar_el_rambo">Bar el Rambo</h3> <div class="paragraph"> <p>Al estilo de más gente que intentaba ayudar al pequeño comercio a adaptarse a la nueva situación, hice un planteamiento (no muy currado la verdad sea dicha) para que un bar pueda publicar de forma gratis y cómoda el menú diario en un site</p> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> <a href="https://gitlab.com/jorge-aguilera/bar-el-rambo" target="_blank" rel="noopener">Bar el rambo</a> </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="bots_para_slack">Bots para Slack</h3> <div class="paragraph"> <p>En este blog encontrarás info sobre cómo usar Netlify para crearte bots para Slack con poco esfuerzo y sin coste.</p> </div> <div class="paragraph"> <p>Tienes descrito algunos como /hastalapolla, /urls y /version</p> </div> </div> <div class="sect2"> <h3 id="serversendevent_con_rust">ServerSendEvent con Rust</h3> <div class="paragraph"> <p>Desde hace tiempo tengo ganas de aprender Rust así que he aprovechado algunos días de vacaciones para practicar con él y he creado un site donde se van publicando cada segundo un represaliado por la dictadura franquista</p> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> El código en <a href="https://gitlab.com/jorge-aguilera/represaliados-api" target="_blank" rel="noopener">Represaliados</a> y la app funcionando en <a href="https://sse-pvidasoftware.cloud.okteto.net/static/index.html" target="_blank" rel="noopener">Represaliados</a> </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="easyfeedback">EasyFeedback</h3> <div class="paragraph"> <p>Ahora mismo estoy madurando la idea de EasyFeedback, una app para que los conferenciantes puedan obtener feedback rápido de los asistentes, tal vez durante su charla.</p> </div> <div class="paragraph"> <p>Está en fase de incubación pero puedes ver un vídeo en <a href="https://twitter.com/jagedn/status/1340928959035416577" class="bare">https://twitter.com/jagedn/status/1340928959035416577</a></p> </div> </div> </div> </div> <div class="sect1"> <h2 id="fracasos">Fracaso(s)</h2> <div class="sectionbody"> <div class="paragraph"> <p>Realmente no puedo quejarme del 2020. A nivel profesional el trabajo está siendo intenso e interesante y me deja tiempo para seguir evolucionando y desarrollar mis tonterías.</p> </div> <div class="paragraph"> <p>Sin embargo, aunque llegué a montar un static site con la documentación usando #DocAsCode, no he conseguido hacer ver al equipo las ventajas que tiene esta metodología y se ha terminado usando Confluence para toda la documentación. Desde mi punto de vista es un retroceso (sin negar que Confluence tiene sus cosas buenas creo que es un engorro en ciertos aspectos y que no promueve la colaboración) y me siento como un impostor hablando de #DocAsCode cuando no he sabido "venderlo".</p> </div> <div class="paragraph"> <p>Si a esto le sumamos que mi chaval decidió al tercer post de su blog que le aburría y que ya no iba a escribir más pues el sentimiento de impostor se acrecienta enormemente.</p> </div> </div> </div> <div class="sect1"> <h2 id="planes_futuros">Planes Futuros</h2> <div class="sectionbody"> <div class="paragraph"> <p>A grandes rasgos yo no hago planes para el siguiente año. Al igual que con el código, tengo una visión de cómo me gustaría que fuera el producto final, pero no una ruta para llegar a él, porque años como el presente nos demuestran que hacer planes a un año vista sirven de bien poco. Así que como mucho a un futuro inmediato, creo que voy a dedicarle algo de esfuerzo a #EasyFeedback y ver hasta dónde puede llegar la idea sin perder de vista cualquier otra cosa que me pueda emocionar por el camino.</p> </div> </div> </div> Un resumen personal del 2020 Netlify Jorge Aguilera 2020-12-04T00:00:00Z https://blog.jagedn.dev/blog/2020/netlify.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Netlify es una plataforma que ofrece hosting y servicios de backend para aplicaciones web y sitios "estáticos"</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Por sitios estáticos entendemos aquellas aplicaciones donde el código (si lo hay) se ejecuta en el cliente, sin necesidad de una aplicación que genere la página tipo php, java, ruby, etc. Simplemente se alojan páginas html, css, javascript y el navegador del cliente las descarga y muestra.</p> </dd> </dl> </div> <div class="paragraph"> <p>En lo relativo a Netlify, con "servicios de backend para aplicaciones web" me refiero a que podemos desplegar en nuestro site funciones javascript y/o Go (por ahora) que se ejecutan en el backend al ser invocadas por el front, así como algunas funcionalidades tipo tratamiento de formularios enviados por el usuario, un sistema de autentificación, etc.</p> </div> <div class="paragraph"> <p>En esta especie de tutorial voy a contar cómo lo utilizo yo, no queriendo decir esto que sea la forma correcta (aunque a mí me funciona) ni que use todas las funcionalidades.</p> </div> <div class="paragraph"> <p>Así mismo, para lo que lo uso me sirve la capa gratuita por lo que no contaré nada que no esté incluida en ella. Con esta capa puedes crear tantos sites como quieras e incluso si tienes un dominio podrás asociarlo a uno de ellos</p> </div> <div class="paragraph"> <p>Una vez que hayas creado una cuenta con tu correo o con tu cuenta Gitlab/Github podrás ir "completando" las diferentes secciones que mostraré a continuación</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2020/netlify/netlify1.png" alt="netlify1"> </div> <div class="title">Figure 1. dashboard</div> </div> </div> </div> <div class="sect1"> <h2 id="hello_world">Hello World</h2> <div class="sectionbody"> <div class="paragraph"> <p>El primer ejemplo es desplegar un simple "Hello World".</p> </div> <div class="ulist"> <ul> <li> <p>crea un directorio "helloworld"</p> </li> <li> <p>crea un fichero <code>index.html</code></p> </li> </ul> </div> <div class="listingblock"> <div class="title">index.html</div> <div class="content"> <pre class="prettyprint highlight"><code>&lt;html&gt; &lt;body&gt; Hello World &lt;/body&gt; &lt;/html&gt;</code></pre> </div> </div> <div class="ulist"> <ul> <li> <p>selecciona en el dashboard el menú "sites"</p> </li> <li> <p>arrastra la carpetea a la parte central de la página de Netlify (similar al de la imagen)</p> </li> </ul> </div> <div class="imageblock"> <div class="content"> <img src="/images/2020/netlify/netlify2.png" alt="netlify2"> </div> </div> <div class="paragraph"> <p>Eso es todo. A los pocos segundos estará disponible en Internet, bajo un nombre aleatorio generado por Netlify.</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2020/netlify/netlify3.png" alt="netlify3"> </div> </div> <div class="paragraph"> <p>En la seccion de "site details" podremos cambiar el nombre por uno más adecuado, siempre que se encuentre libre. Como puedes ver lo que no puedes cambiar, por ahora, es el dominio <code>netlify.app</code></p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2020/netlify/netlify4.png" alt="netlify4"> </div> </div> <div class="paragraph"> <p>Cuando se encuentre desplegado el site (con el único index.html) podremos actualizarlo repitiendo la misma operación pero sobre el site creado.</p> </div> </div> </div> <div class="sect1"> <h2 id="hello_vuejs">Hello VueJS</h2> <div class="sectionbody"> <div class="paragraph"> <p>Podemos complicar un poco más el <code>hello world</code> y crear una aplicación VueJS (por ejemplo).</p> </div> <div class="paragraph"> <p>Tras instalar el CLI de Vue ejecutaremos:</p> </div> <div class="paragraph"> <p><code>$ vue create hellowvue</code></p> </div> <div class="paragraph"> <p>y una vez que tengamos la aplicación a nuestro gusto, generaremos la versión a distribuir</p> </div> <div class="paragraph"> <p><code>$ npm run build</code></p> </div> <div class="paragraph"> <p>Para desplegar el aplicativo seguiremos los mismos pasos que en el caso anterior seleccionando esta vez la carpeta <code>dist</code> que nos generó el build.</p> </div> </div> </div> <div class="sect1"> <h2 id="netlify_cli">Netlify CLI</h2> <div class="sectionbody"> <div class="paragraph"> <p>Netlifiy proporciona un cliente de consola con el que podemos desplegar desde la la terminal nuestra aplicación sin necesidad de usar el drag&amp;drop del explorador. Para ello necesitaremos tener instalado el <code>node</code> en nuestro sistema</p> </div> <div class="paragraph"> <p><code>$ npm install netlify-cli -g</code></p> </div> <div class="paragraph"> <p>y cuando se complete la instalación haremos login desde la consola</p> </div> <div class="paragraph"> <p><code>$ netlify login</code></p> </div> <div class="paragraph"> <p>lo cual nos abrirá un navegador para autentificarnos en Netlify</p> </div> <div class="paragraph"> <p>Una vez configurado y autentificado podremos usar el CLI para desplegar la aplicación desde la línea de consola bien a un site existente o a uno nuevo</p> </div> <div class="paragraph"> <p><code>$ netlify init</code></p> </div> <div class="paragraph"> <p>donde podremos indicarle que queremos un site nuevo, por ejemplo, o uno ya existente.</p> </div> <div class="paragraph"> <p>Así mismo podremos correr la aplicación VueJS anterior como si se estuviera ejecutando en Netlify desde el directorio donde hemos creado la aplicación Vue:</p> </div> <div class="paragraph"> <p><code>$ netlify dev</code></p> </div> <div class="paragraph"> <p>O incluso crear una URL temporal que podremos compartir para que se pueda acceder a ella desde Internet</p> </div> <div class="paragraph"> <p><code>$ netlify dev --live</code></p> </div> </div> </div> <div class="sect1"> <h2 id="aws_lambda_en_nuestro_site">AWS Lambda en nuestro site</h2> <div class="sectionbody"> <div class="paragraph"> <p>La capa gratuita nos permite desplegar también funciones javascript (o Go) que se ejecutan en el backend cloud asociado a nuestro site, de tal forma que por ejemplo el front pueda hacer peticiones GET o POST a una URL del site para que se ejecuten procesos que no se pueden correr en el cliente. Por ejemplo yo lo he usado para:</p> </div> <div class="ulist"> <ul> <li> <p>cada vez que alguien visita una página se invoca una función backend que manda un mensaje a un canal de Telegram. Como las credenciales no pueden ser públicas, esta ejecución corre en un entorno back donde las credenciales son proporcionadas como variables de entorno</p> </li> <li> <p>acceder a una hoja GoogleSheet y leer o escribir en ella ante ciertos eventos. Por ejemplo renderizar un json con unas celdas determinadas que el front parsea y muestra formateado.</p> </li> <li> <p>un bot de Slack que reacciona ante ciertos comandos</p> </li> <li> <p>un bot de Telegram</p> </li> <li> <p>etc</p> </li> </ul> </div> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="Warning"></i> </td> <td class="content"> La capa gratuita te permite tener tantas functions como quieras con un máximo de 125K invocaciones al mes (para mis cosas me sobran). OJO que no son tareas en background, para eso necesitarás la siguiente capa de pago, sino funciones con un timeout definido. </td> </tr> </table> </div> <div class="paragraph"> <p>En primer lugar configuraremos nuestro site con un fichero <code>netlify.toml</code> donde le indicaremos en qué directorio residen nuestras funciones (además de otras configuraciones como por ejemplo qué directorio queremos publicar como frontend)</p> </div> <div class="listingblock"> <div class="title">netlify.toml</div> <div class="content"> <pre class="prettyprint highlight"><code>[build] publish = "dist" functions = "functions/"</code></pre> </div> </div> <div class="paragraph"> <p>Crearemos el directorio <code>functions/hellovue</code> y crearemos en él el fichero <code>hellowvue.js</code> siguiente:</p> </div> <div class="listingblock"> <div class="title">helloowvue.js</div> <div class="content"> <pre class="prettyprint highlight"><code>exports.handler = async function(event, context) { return { statusCode: 200, body: JSON.stringify({message: "Hello World"}) }; }</code></pre> </div> </div> <div class="paragraph"> <p>y ahora podremos desplegar desde línea de comandos tanto nuestro frontend como nuestras funciones simplemente ejecutando:</p> </div> <div class="paragraph"> <p><code>$netlify deploy</code></p> </div> <div class="paragraph"> <p>Una vez desplegado el site tendremos bajo el subdominio creado un URI al que podremos invocar, tal que <code><a href="https:///XXXXXXXX.netlify.app/.netlify/functions/hellowvue" class="bare">https:///XXXXXXXX.netlify.app/.netlify/functions/hellowvue</a></code> :</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>$ curl https://5fcca9be43cd1713632cbf4d--xxxxxxxx.netlify.app/.netlify/functions/hellowvue {"message":"Hello World"}</code></pre> </div> </div> <div class="paragraph"> <p>A continuación un ejemplo más elaborado de lo que podría ser una function de Netlify. En este ejemplo en cada invocación se creará un nuevo registro en una hoja GooglSheet</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>var GoogleSpreadsheet = require('google-spreadsheet'); var async = require('async'); // spreadsheet key is the long id in the sheets URL var doc = new GoogleSpreadsheet(process.env.GOOGLE_SHEET); var sheet; exports.handler = function(event, context, callback) { var obj = JSON.parse(event.body); obj.when = new Date().toISOString(); async.series([ function setAuth(step) { var creds_json = { client_email: process.env.GOOGLE_CLIENT_EMAIL, private_key: process.env.GOOGLE_PRIVATE_KEY.replace(new RegExp("\\\\n", "\g"), "\n") } doc.useServiceAccountAuth(creds_json, step); }, function getInfoAndWorksheets(step) { doc.getInfo(function(err, info) { sheet = info.worksheets[0]; step(); }); }, function addRow(step) { sheet.addRow( obj, function( err, rows ){ step(); }); } ], function(err){ if( err ) { console.log('Error: '+err); } callback(null, { statusCode: 200, body: "OK" }); }); }</code></pre> </div> </div> <div class="paragraph"> <p>Básicamente nos identificamos ante Google, recuperamos la primera hoja y añadimos una Row nueva con el json recibido más la fecha de ejecución.</p> </div> <div class="paragraph"> <p>Para que este ejemplo funcione deberemos haber creado unas variables de entorno a través de la consola de Netlify y darle los valores adecuados a</p> </div> <div class="ulist"> <ul> <li> <p>GOOGLE_SHEET</p> </li> <li> <p>GOOGLE_CLIENT_EMAIL</p> </li> <li> <p>GOOGLE_PRIVATE_KEY</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="ci_con_netlify">CI con Netlify</h2> <div class="sectionbody"> <div class="paragraph"> <p>En lugar de desplegar desde tu local, puedes conectar tu cuenta de Github o Gitlab con Netlify y asociar proyectos alojados en ellos con sites creados en este, de tal forma que ante un commit en tu repo se ejecute un build en Netlify para publicar el site.</p> </div> <div class="paragraph"> <p>Así por ejemplo, siguiendo con el caso anterior, puedes crear un repo en Gitlab <code>hellowvue</code> y desde Netlify crear un site nuevo desde él seleccionando "New site from Git" desde el dashbaord:</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2020/netlify/netlify1.png" alt="netlify1"> </div> <div class="title">Figure 2. gitlab</div> </div> <div class="paragraph"> <p>Una vez seleccionado el repo que queremos asociar se ejecutará el build en el cloud de Netlify y nos lo desplegará. A partir de aquí, cada commit que realizemos en <code>master</code> (configurable) ejecutará de nuevo el pipeline y el despliegue.</p> </div> </div> </div> <div class="sect1"> <h2 id="pipeline_de_gitlab">Pipeline de Gitlab</h2> <div class="sectionbody"> <div class="paragraph"> <p>En algunas ocasiones nuestro proyecto consistirá en algo más complejo que simplemente publicar un site, como por ejemplo compilar una librería Java, publicarla en Maven y actualizar la documentación. Para estos casos yo uso el pipeline de Gitlab el cual no sólo permite separar esos pasos en <code>stages</code> sincronizados de una forma muy potente, sino que también permite publicar la docu de la misma forma que Netlify, esta vez bajo el dominio <code>gitlab.io</code></p> </div> <div class="paragraph"> <p>Como Gitlab no ofrece las características de Netlify como la de functions (y otras como envío de formularios, etc) podemos delegar la publicación del site a Netlify mientras el pipeline de Gitlab sigue realizando los otros pasos (de forma resumida: Gitlab ejecuta la parte pesada y Netlify la publicación del site).</p> </div> <div class="paragraph"> <p>Para ello simplemente deberemos crear un <code>step</code> en nuestro pipeline de Gitlab que invoque la publicación en Netlify. Este step va a requerir de dos variables extraídas de este proveedor: el ApiToken y el AppId del repo</p> </div> <div class="paragraph"> <p>El ApiToken lo obtenemos desde nuestro perfil en Netlify</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2020/netlify/netlify5.png" alt="netlify5"> </div> <div class="title">Figure 3. ApiToken</div> </div> <div class="paragraph"> <p>y el AppId del propio site</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2020/netlify/netlify4.png" alt="netlify4"> </div> <div class="title">Figure 4. AppId</div> </div> <div class="paragraph"> <p>Estos dos valores los deberemos configurar en nuestro repo Gitlab. Como el ApiToken es el mismo para todos los sites de Netlify, puesto que es el personal, y lo único que cambia en cada proyecto es el AppId yo tengo puesto el ApiToken a nivel de grupo y así sólo configuro el de proyecto:</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2020/netlify/gitlab1.png" alt="gitlab1"> </div> <div class="title">Figure 5. gitlab</div> </div> <div class="paragraph"> <p>Una vez configurado, ya puedo ejecutar mi pipeline de Gitlab (bien de forma manual, en cada commit, o de forma planificada) y publicar en Netlify automáticamente. Este sería un ejemplo de pipeline en mi proyecto Gitlab:</p> </div> <div class="listingblock"> <div class="title">.gitlab-ci.yml</div> <div class="content"> <pre class="prettyprint highlight"><code>stages: - build - staging - deploy groovy: stage: build image: name: groovy:2.5.9 script: - groovy dump.groovy - cp estaciones.json docs artifacts: paths: - docs antora: stage: staging image: name: jagedn/antora-with-extensions entrypoint: [/bin/sh, -c] variables: ASCIIDOC_COPY_TO_CLIPBOARD: "true" DOCSEARCH_ENABLED: "true" DOCSEARCH_ENGINE: "lunr" NODE_PATH: "$$(yarn global dir)/node_modules" dependencies: - groovy script: - ls -lhat docs/modules/ROOT/pages - antora --generator antora-site-generator-lunr estaciones.yml - mv docs/estaciones.json build/main/final artifacts: paths: - build netlify: stage: deploy image: node:10.15.3 script: - npm i -g netlify-cli - netlify deploy --site $NETLIFY_SITE_ID --auth $NETLIFY_AUTH_TOKEN --prod dependencies: - antora only: - master</code></pre> </div> </div> <div class="paragraph"> <p>Este pipeline corresponde al proyecto "Estaciones de servicio" que de forma diaria se descarga los precios de todas las gasolineras de España, genera un site estático y lo publica en Netlify aplicando la técnica descrita (<a href="https://gitlab.com/jorge-aguilera/estaciones-de-servicio/" class="bare">https://gitlab.com/jorge-aguilera/estaciones-de-servicio/</a>).</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Otra cosa "chula" que puedes hacer es usar la funcionalidad de Gitlab para publicar la documentación de tu proyecto mientras que despliegas el proyecto en sí mismo en Netlify</p> </dd> </dl> </div> <div class="paragraph"> <p>Aquí puedes ver el resultado final:</p> </div> <div class="paragraph"> <p><a href="https://estaciones-de-servicio.netlify.app/" class="bare">https://estaciones-de-servicio.netlify.app/</a></p> </div> </div> </div> <div class="sect1"> <h2 id="blog">Blog</h2> <div class="sectionbody"> <div class="paragraph"> <p>Por último, otra funcionalidad que he probado en Netlify es la de asociar un site con un dominio propio.</p> </div> <div class="paragraph"> <p>Por ejemplo este blog que estás leyendo se encuentra alojado en Netlify bajo el nombre jorge-aguilera-blog.netlify.app pero también está asociado al nombre blog.jagedn.dev</p> </div> <div class="paragraph"> <p>Para ello, en primer lugar tuve que comprar el dominio <code>aguilera.soy</code> a través de un proveedor de servicios (hasta donde sé puedes usar cualquiera, Good Dady, ConfigBox, Google, Arsys, &#8230;&#8203;) y simplemente configurar en él los servidores DNS que Netlify me indicaba.</p> </div> <div class="paragraph"> <p>Una vez configurado (y tras una espera que puede ser de varios minutos a algunas horas) Netlify detecta que sus servidores están asociados a ese dominio y entonces ya puedes crear el subdominio que quieras en el site.</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2020/netlify/netlify6.png" alt="netlify6"> </div> <div class="title">Figure 6. domain</div> </div> </div> </div> <div class="sect1"> <h2 id="resumen">Resumen</h2> <div class="sectionbody"> <div class="paragraph"> <p>Aún quedan otras funcionalidades que no he investigado como probar el CMS (Content Management System, un Wordpress, vamos) , recibir un correo cuando un usuario rellena un formulario y alguna otra cosa. A modo de resumen las cosas que hago con la capa gratuita son:</p> </div> <div class="ulist"> <ul> <li> <p>publicar un blog usando JBake con mi propio dominio</p> </li> <li> <p>enviar mensajes a un canal de Telegram cuando hay visitas en una página</p> </li> <li> <p>escribir en una hoja Google</p> </li> <li> <p>alojar Bots simples de Slack o Telegram</p> </li> <li> <p>generar sites y publicarlos de forma diaria</p> </li> <li> <p>divertirme</p> </li> </ul> </div> </div> </div> Especie de tutorial de cómo uso Netlify para desplegar sites (y algún bot) Slack Bot para Spring Info Actuator Jorge Aguilera 2020-11-13T00:00:00Z https://blog.jagedn.dev/blog/2020/slack-bot-info-actuator.html <div id="preamble"> <div class="sectionbody"> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>Este post se puede considerar una continuación a <a href="mi-primer-slack-bot.html" class="bare">mi-primer-slack-bot.html</a>, de hecho sólo voy a contar la parte de código de interés porque todo lo demás ya se explica en ese post</p> </dd> </dl> </div> <div class="paragraph"> <p>Si tu aplicación usa el framework Spring o Grails entonces dispones de la funcionalidad Spring Actuator, que te permite monitorizar y obtener información sobre tu aplicación en tiempo real a través de unos endpoints, como el típico <code>/health</code> , <code>/env</code> o <code>/info</code></p> </div> <div class="paragraph"> <p>En concreto <code>/info</code> ofrece información como el nombre de la aplicacion, version de la misma, o del java, etc. Además si encuentra un fichero <code>git.properties</code> es capaz de adjuntar la información del mismo en la response</p> </div> <div class="paragraph"> <p>Poder acceder a esta información de forma fácil puede ser una gran utilidad. Por ejemplo poder consultar qué versión de API está corriendo en el entorno de desarrollo puede servirle al desarrollador de front para comprobar si es la correcta contra la que quiere probar sus desarrollos.</p> </div> </div> </div> <div class="sect1"> <h2 id="aplicación">Aplicación</h2> <div class="sectionbody"> <div class="paragraph"> <p>En el caso en concreto que vamos a ver en este post, se trata de una aplicación Grails la cual incluye por defecto tanto la dependencia a spring actuator como una configuración mínima para exportar estos endpoints (más info en <a href="http://docs.grails.org/3.3.4/guide/spring.html#actuators" class="bare">http://docs.grails.org/3.3.4/guide/spring.html#actuators</a> )</p> </div> <div class="paragraph"> <p>Así mismo, como norma básica, el acceso a dicho endpoint estará protegido con Spring Security por lo que primero habrá que hacer un login para obtener tokens de acceso para poder acceder al endpoint indicado.</p> </div> <div class="paragraph"> <p>Por último, para poder ofrecer la máxima cantidad de información al usuario (por ejemplo el mensaje del último commit), especificaremos que el endpoint use el formato <code>full</code> (<a href="https://docs.spring.io/spring-boot/docs/current/reference/html/production-ready-features.html#production-ready-application-info-git" class="bare">https://docs.spring.io/spring-boot/docs/current/reference/html/production-ready-features.html#production-ready-application-info-git</a>)</p> </div> </div> </div> <div class="sect1"> <h2 id="conectividad">Conectividad</h2> <div class="sectionbody"> <div class="paragraph"> <p>Dependiendo de dónde se encuentre alojada la aplicación, así como el bot, tendrás que lidiar con diferentes aspectos de conectividad.</p> </div> <div class="paragraph"> <p>En este caso en concreto el bot se va a alojar en Netlify, el cual lo expone mediante una url pública en Internet. Así mismo la aplicación es abierta (pero protegida) al público, por lo que también cuenta con una url pública. Por último, para este ejemplo vamos a contar con que los 3 entornos, dev, staging y prod, están accesibles desde Internet</p> </div> <div class="paragraph"> <p>Si no fuera así, por ejemplo tu api de prod está abierta al público, pero los entornos de desarrollo están en una red interna, tendrías que buscar una forma de unir los 3 "mundos": slack &#8594; bot &#8594; aplicación</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/1781159839817.svg" alt="" width="800" height="600"> </div> </div> </div> </div> <div class="sect1"> <h2 id="creación_del_proyecto">Creación del proyecto</h2> <div class="sectionbody"> <div class="paragraph"> <p>Para la creación del proyecto y su publicación te remito al post <a href="mi-primer-slack-bot.html" class="bare">mi-primer-slack-bot.html</a> donde se explica de forma detallada. De hecho si has conseguido seguirlo y publicar tu primer bot puedes reutilizarlo pues lo que vamos a hacer es añadir una función nueva (y algunas variables de entorno)</p> </div> <div class="sect2"> <h3 id="nueva_function">Nueva function</h3> <div class="paragraph"> <p>Siguiendo los pasos del post anterior crearemos una nueva <code>function</code> git-status:</p> </div> <div class="paragraph"> <p><code>netlify function:create</code></p> </div> <div class="paragraph"> <p>(O simplemente ya que tenemos todo montado crearemos un nuevo subdirectorio dentro de <code>functions</code> y añadiremos el código siguiente)</p> </div> <div class="listingblock"> <div class="title">git-status.js</div> <div class="content"> <pre class="prettyprint highlight"><code>const querystring = require("querystring"); const axios = require("axios"); const { SLACK_BOT_TOKEN } = process.env; const { REPO_GIT } = process.env; const handler = async (event) =&gt; { try { if (event.httpMethod !== "POST") { return { statusCode: 405, body: "Method Not Allowed" }; } const params = querystring.parse(event.body); const environment = params.command.toUpperCase().substring(1) const REMOTE_API = process.env[`${environment}_API`]; const REMOTE_USERNAME = process.env[`${environment}_USERNAME`]; const REMOTE_PASSWORD = process.env[`${environment}_PASSWORD`]; let login = await axios.post(`${REMOTE_API}/api/login`,{ username:REMOTE_USERNAME, password:REMOTE_PASSWORD, }) let access_token = login.data.access_token let version = await axios.get(`${REMOTE_API}/info`,{ headers:{ 'Authorization':`Bearer ${access_token}` } }) const data = { text: ` *${environment}* *${version.data.git.commit.message.short} Version *${version.data.app.version}* Cooked at *${version.data.git.commit.time}* last commit: *${version.data.git.commit.id}* ${REPO_GIT}/${version.data.git.commit.id} `, channel: params.channel_id, as_user: true }; const result = await axios.post('https://slack.com/api/chat.postMessage', data, { headers:{ 'Authorization': `Bearer ${SLACK_BOT_TOKEN}`, 'X-Slack-User': params.user_id } }) return { statusCode: 200 } } catch (error) { console.log(error) return { statusCode: 500, body: error.toString() } } } module.exports = { handler }</code></pre> </div> </div> <div class="paragraph"> <p>Como puedes ver el código es muy similar al del comando anterior. Simplemente usaremos el comando que nos envía el usuario para detectar que entorno es el que nos está pidiendo. Así por ejemplo si el usuario ejecuta el comando /prod pasaremos a mayusculas esta cadena y quitaremos el primer caracter</p> </div> <div class="paragraph"> <p><code>const environment = params.command.toUpperCase().substring(1)</code></p> </div> <div class="paragraph"> <p>y usaremos la constante <code>environment</code> como prefijo para buscar las credenciales y url a invocar</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>const REMOTE_API = process.env[`${environment}_API`]; const REMOTE_USERNAME = process.env[`${environment}_USERNAME`]; const REMOTE_PASSWORD = process.env[`${environment}_PASSWORD`];</code></pre> </div> </div> <div class="paragraph"> <p>Básicamente realizaremos un login y obtendremos el access_token para poder invocar al endpoint de Spring Actuator.</p> </div> <div class="paragraph"> <p>Por último renderizamos toda la información como una cadena Markdown:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>const data = { text: ` *${environment}* *${version.data.git.commit.message.short} Version *${version.data.app.version}* Cooked at *${version.data.git.commit.time}* last commit: *${version.data.git.commit.id}* ${REPO_GIT}/${version.data.git.commit.id} `,</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="netlify">Netlify</h2> <div class="sectionbody"> <div class="paragraph"> <p>Por la parte del bot simplemente resta configurar todas las variables de entorno en Netlify:</p> </div> <div class="paragraph"> <p><code>PROD_API=http://xxxxx.com/</code></p> </div> <div class="paragraph"> <p><code>STAGING_API=http://yyyyy.com/</code></p> </div> <div class="paragraph"> <p><code>DEV_API=http://zzzzz.com/</code></p> </div> <div class="paragraph"> <p>etc</p> </div> </div> </div> <div class="sect1"> <h2 id="slack">Slack</h2> <div class="sectionbody"> <div class="paragraph"> <p>Por último habilitamos nuevos comandos desde la consola de nuestra App de Slack apuntando a la nueva <code>function</code> creada (los 3 comandos apuntan a la misma url pues en base a el comando la <code>function</code> ya sabe qué ejecutar)</p> </div> </div> </div> un bot de Slack para saver qué versión corre en cada entorno Mi primer bot en Slack Jorge Aguilera 2020-11-12T00:00:00Z https://blog.jagedn.dev/blog/2020/mi-primer-slack-bot.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Slack es una herramienta de comunicación de equipos muy utilizada tanto en proyectos abiertos como en entornos laborales. Aunque las comunidades que conozco lo han ido abandonando por otras soluciones más ligeras, creo que la presencia en entornos labores es aún muy importante.</p> </div> <div class="paragraph"> <p>Entre las características típicas de mensajería de uno a uno, en grupo, canales, videollamadas, etc se añade un ecosistema de aplicaciones muy amplio. Permite integrar procesos propios de la empresa en él de tal forma que podamos crear nuestras propias aplicaciones que actúen como un miembro más del equipo reaccionando ante eventos, escribiendo en los canales, etc.</p> </div> <div class="paragraph"> <p>En este post voy a explicar de forma resumida cómo podemos hacer un bot que responda a un comando enviado por los usuarios. En Internet hay tutoriales muy completos y la propia documentación de Slack es bastante extensa con ejemplos y herramientas de testeo, por lo que aquí vamos a ver algo muy sencillo pero que podrás instalar y adaptar en el workspace de vuestro slack (si tenéis permisos para ello)</p> </div> <div class="paragraph"> <p>Por otra parte, como el bot tiene que ejecutarse en algún sitio, voy a contar cómo podemos usar Netlify para alojarlo. Netlify proporciona diferentes tipos de cuenta donde alojar tus proyectos, siendo la gratuita muy interesante:</p> </div> <div class="ulist"> <ul> <li> <p>ilimitados proyectos de contenido estático</p> </li> <li> <p>integración con los principales repositorios (Github, Gitlab,&#8230;&#8203;)</p> </li> <li> <p>despliegues automáticos (o manuales con posibilidad de revisión previa)</p> </li> <li> <p>ejecución de funciones Serverless (Lambdas de Amazon) 125.000 al mes</p> </li> <li> <p>formularios inteligentes (ni idea, no los he probado todavía)</p> </li> </ul> </div> <div class="paragraph"> <p>Así pues para este post vamos a necesitar:</p> </div> <div class="ulist"> <ul> <li> <p>Una cuenta en Netlify, la gratuita nos sirve de sobra</p> </li> <li> <p>Un workspace en Slack (prueba primero en un workspace nuevo y si te mola instalas el bot en el de la empresa)</p> </li> <li> <p>Node para desarrollar.</p> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Como bola extra podríamos enlazar la cuenta de Netlify con nuestra cuenta en Gitlab/Github para desplegar automáticamente cuando actualicemos el repo. Por ahora lo haremos manualmente)</p> </dd> </dl> </div> </li> </ul> </div> <div class="paragraph"> <p>Además para desarrollar en nuestro local vamos a tener instalado <code>npm</code> y el cli de Netlify <code>netlify-cli</code> (<a href="https://docs.netlify.com/cli/get-started/" class="bare">https://docs.netlify.com/cli/get-started/</a>)</p> </div> <div class="paragraph"> <p>Por último <code>ngrok</code> es una herramienta muy útil para probar en local nuestro bot antes de subirlo a producción. La cuenta gratuita es suficiente, con el único inconveniente de que cada vez que mates el proceso <code>ngrok</code> te cambia la url y tienes que reconfigurar en slack donde está tu bot.</p> </div> </div> </div> <div class="sect1"> <h2 id="politicamente_correcto_bot">Politicamente Correcto Bot</h2> <div class="sectionbody"> <div class="paragraph"> <p>El bot a desarrollar es realmente sencillo y servirá para que ante solicitudes por parte de algún compañero para realizar alguna tarea podamos soltar un exabrupto y que el bot nos lo cambie por una frase políticamente correcta.</p> </div> <div class="paragraph"> <p>Básicamente cuando escribamos el comando <code>/hastalapolla</code> (o el que quieras implementar) el bot se activará y en lugar de este comando se mandará al canal una frase más adecuada seleccionada aleatoriamente de una lista de candidatas.</p> </div> <div class="paragraph"> <p>La utilidad del bot es más bien poca salvo para servir como punto de partida de algunas funcionalidades más complejas que se te puedan ocurrir</p> </div> <div class="paragraph"> <p>Así mismo debido a la simplicidad del bot no requeriremos de ninguna librería ni framework extra de las existentes.</p> </div> </div> </div> <div class="sect1"> <h2 id="arquitectura">Arquitectura</h2> <div class="sectionbody"> <div class="imageblock"> <div class="content"> <img src="/images/1781159838209.svg" alt="" width="800" height="600"> </div> </div> </div> </div> <div class="sect1"> <h2 id="entorno">Entorno</h2> <div class="sectionbody"> <div class="paragraph"> <p>Debemos asegurarnos que tenemos npm instalado:</p> </div> <div class="paragraph"> <p><code>npm -v</code></p> </div> <div class="paragraph"> <p>así como que hemos instalado el cliente de Netlify:</p> </div> <div class="paragraph"> <p><code>netlify -v</code></p> </div> <div class="paragraph"> <p>y hemos hecho login a nuestra cuenta con él</p> </div> <div class="paragraph"> <p><code>netlify login</code></p> </div> </div> </div> <div class="sect1"> <h2 id="creando_proyecto">Creando proyecto</h2> <div class="sectionbody"> <div class="paragraph"> <p>En un directorio limpio inicializaremos el proyecto:</p> </div> <div class="paragraph"> <p><code>npm init</code></p> </div> <div class="paragraph"> <p>proporcionando un nombre, version, etc por defecto (si vas publicar el código tal vez sí te interese rellenar esta parte más detenidamente)</p> </div> <div class="paragraph"> <p>con lo que tendremos un fichero <code>package.json</code> parecido a:</p> </div> <div class="listingblock"> <div class="title">package.json</div> <div class="content"> <pre class="prettyprint highlight"><code>{ "name": "test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" &amp;&amp; exit 1" }, "author": "", "license": "ISC" }</code></pre> </div> </div> <div class="paragraph"> <p>así mismo crearemos un subdirectorio <code>public</code> donde crearemos un fichero <code>index.html</code> con el contenido que quieras (si quieres hacer un landing page para tu bot, este es tu directorio)</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>public/index.html</p> </li> </ol> </div> <div class="listingblock"> <div class="content"> <pre>&lt;html&gt;&lt;body&gt;HastaLaPolla Slack bot&lt;/body&gt;&lt;/html&gt;</pre> </div> </div> <div class="paragraph"> <p>Y por último crearemos un fichero <code>netlify.toml</code> para configurar a netlify:</p> </div> <div class="listingblock"> <div class="title">netlify.toml</div> <div class="content"> <pre class="prettyprint highlight"><code>[build] functions = "functions" publish = "public"</code></pre> </div> </div> <div class="paragraph"> <p>Ejecutaremos <code>netlify</code> para comprobar que tenemos la infra preparada</p> </div> <div class="paragraph"> <p><code>netlify dev</code></p> </div> <div class="paragraph"> <p>lo cual nos abrirá la página <code>index.html</code> en un navegador</p> </div> <div class="paragraph"> <p>Paramos el proceso y procedemos a crear la función para nuestro bot</p> </div> </div> </div> <div class="sect1"> <h2 id="function">Function</h2> <div class="sectionbody"> <div class="paragraph"> <p>Crearemos nuestra primera función</p> </div> <div class="paragraph"> <p><code>netlify function:create</code></p> </div> <div class="ulist"> <ul> <li> <p>seleccionamos hello-world (total, luego lo vamos a cambiar por nuestro código)</p> </li> <li> <p>como nombre especificaremos <code>hastalapolla</code></p> </li> </ul> </div> <div class="paragraph"> <p>lo cual nos creará un subdirectorio y un fichero JS en él</p> </div> <div class="paragraph"> <p>y procedemos a probar de nuevo que vamos bien</p> </div> <div class="paragraph"> <p><code>netlify dev</code></p> </div> <div class="paragraph"> <p>y desde el navegador accederemos a <code><a href="http://localhost:8888/.netlify/functions/hastalapolla" class="bare">http://localhost:8888/.netlify/functions/hastalapolla</a></code></p> </div> </div> </div> <div class="sect1"> <h2 id="ngrok">Ngrok</h2> <div class="sectionbody"> <div class="paragraph"> <p>Una vez que te hayas creado una cuenta en ngrok y descargado el ejecutable podemos crear un tunel entre el <code>netlify</code> que está corriendo en tu máquina con el mundo exterior:</p> </div> <div class="paragraph"> <p><code>ngrok http PUERTO_NETLIFY_FUNCTION</code></p> </div> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>Como no estoy seguro que Netlify siempre escuche en el mismo puerto para ejecutar las funciones te toca revisar el que te muestre a tí. En mi caso es el 37947</p> </dd> </dl> </div> <div class="paragraph"> <p><code>ngrok</code> te muestra dos URLs (http y https) que son diferentes cada vez que lo ejecutes. Copia la direccion https y prueba a cambiarla por localhot:8888 en la prueba anterior, por ejempo <a href="https://a9123123xxxxx.ngrok.io/.netlify/functions/hastalapolla" class="bare">https://a9123123xxxxx.ngrok.io/.netlify/functions/hastalapolla</a></p> </div> </div> </div> <div class="sect1"> <h2 id="slack">Slack</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ahora avanzaremos un poco por el lado de Slack.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Lo mejor es crearse un workspace en blanco donde poder instalar y depurar el bot antes de intentarlo en el de la empresa.</p> </dd> </dl> </div> <div class="sect2"> <h3 id="app">App</h3> <div class="paragraph"> <p>Lo primero que haremos será crear una App desde <a href="https://api.slack.com/apps" class="bare">https://api.slack.com/apps</a> donde deberemos indicar el nombre y workspace donde queremos crearla.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>Desconozco todas las funcionalidades que ofrece una App de Slack (espero irlas descubriendo) pero para este bot vamos a necesitar lo mínimo</p> </dd> </dl> </div> </div> <div class="sect2"> <h3 id="command">Command</h3> <div class="paragraph"> <p>Nuestro bot es tan simple que lo único que va a hacer (por ahora) es reaccionar a un comando <code>/hastalapolla</code> por lo que lo daremos de alta en la seccion <code>Slash Commands</code> y rellenaremos los campos que nos pide:</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2020/slack/hastalapolla1.png" alt="hastalapolla1"> </div> <div class="title">Figure 1. formulario.png</div> </div> <div class="paragraph"> <p>En Request URL prestaremos especial atención para poner la URL que nos generó ngrok (<strong>la https</strong>)</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="workspace">Workspace</h2> <div class="sectionbody"> <div class="paragraph"> <p>Una vez configurado el comando podemos proceder a probarlo desde el workspace donde lo hemos instalado, por ejemplo ejecutando el comando en el canal #random</p> </div> <div class="paragraph"> <p><code>/hastalapolla</code></p> </div> <div class="paragraph"> <p>Si todo está bien configurado, Slack nos debería ir completando el comando según lo escribes y se enviaría al canal tal cual</p> </div> </div> </div> <div class="sect1"> <h2 id="hastalapolla">Hastalapolla</h2> <div class="sectionbody"> <div class="paragraph"> <p>Es hora de añadir un poco de código a nuestra function</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>No cortes <code>ngrok</code> o te tocará volver a lanzarlo y reconfigurar la URL en Slack</p> </dd> </dl> </div> <div class="paragraph"> <p>Sustituiermos la funcion <code>hastalapolla.js</code> por esta:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>const querystring = require("querystring"); <i class="conum" data-value="1"></i><b>(1)</b> const axios = require("axios"); const { SLACK_BOT_TOKEN } = process.env; <i class="conum" data-value="2"></i><b>(2)</b> const list = [ ':thumbsup: no te preocupes, ahora mismo me pongo con ello', 'vale, termino una cosa :watch: y me pongo con ello asap', 'uff, bueno, lo miro y te digo algo', 'ahora mismo me pillas un poco ocupado, pero en cuanto pueda te cuento', 'Genial, no te preocupes, ya te cuento luego', ] const handler = async (event) =&gt; { if (event.httpMethod !== "POST") { return { statusCode: 405, body: "Method Not Allowed" }; } const params = querystring.parse(event.body); const selected = list[Math.floor(Math.random() * list.length)]; <i class="conum" data-value="3"></i><b>(3)</b> const data = { text: selected, channel: params.channel_id, as_user: true }; const result = await axios.post('https://slack.com/api/chat.postMessage', data, { <i class="conum" data-value="4"></i><b>(4)</b> headers:{ 'Authorization': `Bearer ${SLACK_BOT_TOKEN}`, 'X-Slack-User': params.user_id } }) return { statusCode: 200 <i class="conum" data-value="5"></i><b>(5)</b> } } module.exports = { handler }</code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>Las únicas dependencias que usaremos</td> </tr> <tr> <td><i class="conum" data-value="2"></i><b>2</b></td> <td>No hemos visto todavia el token ni para que sirve, lo haremos a continuación</td> </tr> <tr> <td><i class="conum" data-value="3"></i><b>3</b></td> <td>La frase aleatoria a enviar</td> </tr> <tr> <td><i class="conum" data-value="4"></i><b>4</b></td> <td>Con un "simple" post enviaremos la frase políticamente correcta al canal en nombre del usuario</td> </tr> <tr> <td><i class="conum" data-value="5"></i><b>5</b></td> <td>con un 200 le decimos a Slack que hemos ejecutado su comando. Si añades texto lo leerá el sólo el usuario</td> </tr> </table> </div> <div class="paragraph"> <p>Como puedes ver son 15 líneas excasas de Javascript donde lo más interesante es que utilizamos un paquete de node muy popular para enviar el post (podíamos haberlo hecho usando puro node)</p> </div> <div class="paragraph"> <p>Simplemente instalaremos las dependencias indicadas:</p> </div> <div class="paragraph"> <p><code>npm install --save axios</code></p> </div> <div class="paragraph"> <p><code>npm install --save querystring</code></p> </div> <div class="paragraph"> <p>lo cual nos modifica nuestro <code>package.json</code> tal que:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>{ "name": "test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" &amp;&amp; exit 1" }, "author": "", "license": "ISC", "dependencies": { "axios": "^0.21.0", "querystring": "^0.2.0" } }</code></pre> </div> </div> <div class="paragraph"> <p>Y podremos probar de nuevo a enviar el comando desde nuestro workspace de Slack. Si todo va bien NO veremos NADA en el canal mientras que en la consola donde está corriendo Netlify veremos que ha llegado la petición.</p> </div> <div class="paragraph"> <p>Simplemente es que estamos intentando enviar un mensaje a un canal sin estar autentificados.</p> </div> </div> </div> <div class="sect1"> <h2 id="token">Token</h2> <div class="sectionbody"> <div class="paragraph"> <p>Para que el bot pueda escribir en un canal hay que darle permisos. Para ello iremos a "OAuth&amp;Permissions" y añadiremos los scopes que muestra la imagen (como bot los scopes <code>chat:write</code> y <code>commands</code> y como user <code>chat:write</code>)</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2020/slack/hastalapolla2.png" alt="hastalapolla2"> </div> <div class="title">Figure 2. scopes.png</div> </div> <div class="paragraph"> <p>Así mismo copiaremos el token de bot que se nos muestra al principio <code>xoxb-XXXXXXXXXXXXXXXXXXXXXx</code></p> </div> <div class="paragraph"> <p>Vamos a proceder a ejecutar de nuevo la consola de <code>netlify</code> pero ahora proporcionandole el token copiado para que el bot pueda escribir en el canal. (Desconozco cómo se hace en Window$)</p> </div> <div class="paragraph"> <p><code>SLACK_BOT_TOKEN=xoxb-XXXXXXXXXXX netlify dev</code></p> </div> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="Warning"></i> </td> <td class="content"> Seguramente tendrás que reconfigurar de nuevo <code>ngrok</code> y la consola de la app con la nueva url generada. Ten en cuenta que esto es así porque vamos paso a paso incrementando la aplicación, una vez lo tengamos todo no sería necesario más que una vez. </td> </tr> </table> </div> <div class="paragraph"> <p>Y probamos de nuevo a enviar el comando /hastalapolla</p> </div> <div class="paragraph"> <p>Si todo ha ido bien ahora tendremos un mensaje políticamente correcto en el canal.</p> </div> </div> </div> <div class="sect1"> <h2 id="deploy">Deploy</h2> <div class="sectionbody"> <div class="paragraph"> <p>Es hora de subir nuestra aplicación a Netlify y dejar que se ejecute en la capa gratuita (recuerda, tienes hasta 125K llamadas al mes)</p> </div> <div class="paragraph"> <p><code>netlify deploy</code></p> </div> <div class="paragraph"> <p>y crearemos un nuevo site donde desplegar la aplicacion. Netlify elegirá un nombre aleatorio lo cual es bueno para nuestro bot, aunque si lo prefieres luego lo puedes cambiar por otro que este libre.</p> </div> <div class="paragraph"> <p>Simplemente resta configurar el nuevo site creado con la variable SLACK_BOT_TOKEN para lo que desde la consola de Netlify iremos a build, environment y crearemos la variable con el valor del token (de la misma forma que hicimos por consola en el paso anterior)</p> </div> <div class="paragraph"> <p>Una vez configurado deberemos realizar un nuevo deploy para que tome la variable creada. Simplemente desde la consola de Netlify iremos a build y seleccionamos redeploy.</p> </div> <div class="paragraph"> <p>Por ultimo sólo resta decirle a Slack dónde encontrar ahora el bot para el comando tal como hacíamos con 'ngrok'</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">TIP</dt> <dd> <p>Yo lo que hago es tener un comando "test" que apunta al entorno local con <code>ngrok</code> y el "oficial" que apunte a Netlify</p> </dd> </dl> </div> <div class="paragraph"> <p>Si todo ha ido bien, una vez configurado, cada vez que ejecutes el comando /hastalapolla estarás invocando a la función alojada en Netlify por lo que no necesitas ya tu entorno de desarrollo levantado.</p> </div> </div> </div> <div class="sect1"> <h2 id="bola_extra">Bola extra</h2> <div class="sectionbody"> <div class="paragraph"> <p>Puedes alojar tu proyecto en un repot git en Gitlab o Github y "enlazarlo" con Netlify de tal forma que cada vez que hagas un push se despliegue automáticamente, pero eso es para otro post (Si estás interesado simplemente comentamelo y lo vemos)</p> </div> </div> </div> un bot de Slack simple corriendo en el AWS de Netlify Cuando el diablo no sabe que hacer, programa en Node Jorge Aguilera 2020-10-23T00:00:00Z https://blog.jagedn.dev/blog/2020/random-place.html <div id="preamble"> <div class="sectionbody"> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>Detrás de ese título "provocador" sólo pretendo decir que YO no soy un programador con experiencia en este lenguaje sin entrar a valorar sus ventajas o desventajas. Simplemente se me ocurrió una tontería y quise ponerla en práctica usandolo y así practicar un poco de paso.</p> </dd> </dl> </div> <div class="paragraph"> <p>Una (si no la única) afición que tengo es la de viajar, y cuanto más lejos y menos visitado sea el sitio mejor. Obviamente con la situación actual de la Covid19 esto es imposible así que lo único que me queda es abrir de vez en cuando Google Maps y seleccionar un sitio al azar (vale, también reviso muchos sitios donde he estado).</p> </div> <div class="paragraph"> <p>Por una asociación de ideas recordé un juego que usa Google Street Maps para mostrarte un sitio random y hay que adivinar donde es en un tiempo corto, simplemente moviendote por las calles sin poder hacer zoom y buscándolo encontré <code>random.earth</code> un site que me fascinó. Muestra luegares random usando imágenes de Google Maps, con la posibilidad de que la gente las vote.</p> </div> <div class="paragraph"> <p>Como ni tengo el tiempo ni la capacidad de hacer algo parecido se me ocurrió hacerme mi versión sencilla y en este post voy a contar cómo lo he hecho (y ya te digo que el código tendrá una calidad regulinchi y ójala una horda de trolls puedan venir a explicarme cómo hacerlo mejor porque así aprenderemos algo)</p> </div> <div class="paragraph"> <p>La idea es simple:</p> </div> <div class="ulist"> <ul> <li> <p>tener un comando que ejecutar al iniciar sesión que seleccione unas coordenadas random del planeta</p> </li> <li> <p>construir la url en random.earth con esas coordenadas</p> </li> <li> <p>descargar unos cuantos pantallazos de ese lugar aplicando diferente diferentes zoom desde el más lejano hasta el de máxima resolución</p> </li> <li> <p>crear un gif animado con la secuencia de imágenes</p> </li> <li> <p>subirlo a Mastodon (donde también tengo cuenta como @jagedn)</p> </li> </ul> </div> <div class="paragraph"> <p>El resultado final es tener algo parecido a</p> </div> <div class="paragraph"> <p><span class="image"><img src="/images/2020/random-place.gif" alt="random place"></span></p> </div> <div class="paragraph"> <p>Al principio jugué con la idea de hacerlo sólo mediante herramientas disponibles en la shell ( <code>curl</code>, <code>httpie</code>, <code>wget</code>, etc ) Asi encontré algunas herramientas en Tk que permiten indicarle una URL y hacen la captura del navegador, trasteé con la shell para generar números random, hice un bash que lo unificaba todo&#8230;&#8203;. pero al final cambié de opinión y me decidí por hacerlo en un único lenguaje y opté por Node (sí, podía haberlo hecho en Groovy pero no quiero que me acusen de encasillarme)</p> </div> </div> </div> <div class="sect1"> <h2 id="instalar_node">Instalar Node</h2> <div class="sectionbody"> <div class="paragraph"> <p>Lo primero es instalar Node. No sé si es dificil o no para Windows, pero para Linux no tiene mucha historia.</p> </div> <div class="paragraph"> <p><a href="https://nodejs.org/es/download/package-manager/#debian-and-ubuntu-based-linux-distributions-enterprise-linux-fedora-and-snap-packages" class="bare">https://nodejs.org/es/download/package-manager/#debian-and-ubuntu-based-linux-distributions-enterprise-linux-fedora-and-snap-packages</a></p> </div> <div class="paragraph"> <p>Básicamente instalar <code>Nvm</code> y con él instalar la versión que nos interese de Node</p> </div> </div> </div> <div class="sect1"> <h2 id="proyecto">Proyecto</h2> <div class="sectionbody"> <div class="paragraph"> <p>En un directorio limpio crearemos el proyecto</p> </div> <div class="paragraph"> <p><code>npm init</code></p> </div> <div class="paragraph"> <p>Como el proyecto no lo voy a publicar como paquete simplemnte he ido aceptando las opciones por defecto que se ofrecen.</p> </div> <div class="paragraph"> <p>Al final tienes un fichero <code>package.json</code> que puedes luego ajustar a mano si te interesa</p> </div> </div> </div> <div class="sect1"> <h2 id="dependencias">Dependencias</h2> <div class="sectionbody"> <div class="paragraph"> <p>Para este proyecto voy a usar las siguientes dependencias:</p> </div> <div class="ulist"> <ul> <li> <p>capture-website</p> </li> <li> <p>dotenv</p> </li> <li> <p>get-image-colors</p> </li> <li> <p>gif-creation-service</p> </li> <li> <p>mastodon</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>$ npm install --save capture-website $ npm install --save dotenv $ npm install --save get-image-colors $ npm install --save gif-creation-service $ npm install --save mastodon</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="index_js">Index.js</h2> <div class="sectionbody"> <div class="paragraph"> <p>El script va a residir en un único fichero (luego he hecho algunas variantes) <code>index.js</code> que iré exponiendo a continuación por partes:</p> </div> <div class="sect2"> <h3 id="inicialización">Inicialización</h3> <div class="listingblock"> <div class="title">index.js</div> <div class="content"> <pre class="prettyprint highlight"><code>const dotenv = require("dotenv"); dotenv.config(); const fs = require("fs"); const captureWebsite = require("capture-website"); const GifCreationService = require("gif-creation-service"); const path = require("path"); const getColors = require("get-image-colors"); const Masto = require("mastodon"); function getRndInteger(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } (async()=&gt;{ // El código })();</code></pre> </div> </div> <div class="paragraph"> <p>Básicamente cargamos las dependencias que vamos a usar así como creamos una función de utilidad que parece que Javascript no tiene por defecto.</p> </div> <div class="paragraph"> <p>Vamos a usar la capacidad de Javascript de llamar a funciones de forma asíncrona mediante <code>await</code> así que el código estará embebida en una función de <code>async</code></p> </div> </div> <div class="sect2"> <h3 id="elegir_un_lugar_random">Elegir un lugar random</h3> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>const outputGifFile = "output.gif"; let pngImages = []; //vamos a buscar un sitio random pero puede ser agua que no interesa //así que lo intentaremos varias veces hasta encontrar tierra let doIt = false; for (var j = 0; j &lt; 20; j++) { let lat = getRndInteger(-89, 89); let latprec = getRndInteger(0, 9999); let log = getRndInteger(0, 179); let logprec = getRndInteger(0, 9999); let west = getRndInteger(0, 1) == 0 ? 1 : -1; log = log * west; // tendriamos por ejemplo 32.3430,-113.4350 // añadimos al array una serie de urls con distinto zoom: ${i}z // asociado a un nombre de png pngImages = []; for (let i = 1; i &lt;= 19; ) { pngImages.push([ `https://random.earth/@${lat}.${latprec},${log}.${logprec},${i}z,2t`, `screenshot${i}.png`, ]); // borramos el fichero si existe try { fs.unlinkSync(`screenshot${i}.png`); } catch (e) {} // según el número de steps que usemos tendremos un gif con mayor peso i += 3; } // detectar si es tierra ... }</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="detectar_si_es_tierra">Detectar si es tierra</h3> <div class="paragraph"> <p>Una vez inicializado el array de urls a descargar vamos a descargar la penúltima foto que tiene un un zoom elevado y ver si corresponde a tierra o mar analizando su paleta de colores.</p> </div> <div class="paragraph"> <p>Descargamos la imagen en <code>check.png</code> quitando el elemento HTML <code>#map</code> para que no meta ruido:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>await captureWebsite.file(pngImages[pngImages.length - 2][0], "check.png", {element:"#map"});</code></pre> </div> </div> <div class="paragraph"> <p>El elemento #map es un objeto DOM que está en la página propia de random.earth, es decir, que si estás descargando otra página ese elemento no lo tendrás seguramente.</p> </div> <div class="paragraph"> <p>Una vez descargada vamos a analizar su paleta:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>doIt = false; await getColors(path.join(__dirname, "check.png")).then((colors) =&gt; { if (("" + colors).startsWith("#e3e3dc") == false) { doIt = true; } });</code></pre> </div> </div> <div class="paragraph"> <p>La idea es utilizar una librería que nos permite recuperar la paleta de colores de la imagen y ver si nos interesa. A parte de que el código que he usado es muy feo lo que he hecho ha sido comprobar que cuando es mar, la imagen descargada tiene una paleta de colores muy básica que siempre empieza por #e3e3dc, así que básicamente si es diferente he encontrado una imagen interesante.</p> </div> <div class="paragraph"> <p>Al cambiar el valor de doIt a true consigo que se salga del bucle inmediatamente marcando además que hemos encontradao la imagen.</p> </div> </div> <div class="sect2"> <h3 id="descargar_todas_las_imagenes">Descargar todas las imagenes</h3> <div class="paragraph"> <p>Para descargar las imágenes simplemente llamamos a la librería con el array que habiamos preparado al principio, quitando algunos elementos del DOM para dejar las imágenes lo más limpias posibles</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>await Promise.all( pngImages.map(([url, filename]) =&gt; { return captureWebsite.file(url, filename, { scaleFactor: 0.75, hideElements: [ '#address','#search-box','#top-menu','#controls-box','#prev','#next' ] }); }) );</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="generar_el_gif">Generar el Gif</h3> <div class="paragraph"> <p>De igual manera, generar el gif es tan sencillo como llamar a la libreria que lo hace:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>GifCreationService.createAnimatedGifFromPngImages( pngImages.map((obj) =&gt; { return obj[1]; }), outputGifFile, { repeat: true, fps: 1, quality: 10 } ).then((outputGifFile) =&gt; { console.log( `Alright, GIF ${outputGifFile} created for ${pngImages[5][0]}!` ); })</code></pre> </div> </div> <div class="paragraph"> <p>Una vez generado el gif muestro con una traza la URL usada para saber el lugar elegido.</p> </div> </div> <div class="sect2"> <h3 id="subir_a_mastodon">Subir a Mastodon</h3> <div class="paragraph"> <p>Subir la imagen con un mensaje a Mastodon es tan fácil como haber creado un token de aplicación y apuntar a la instancia donde tienes la cuenta, en mi caso en <a href="https://mastodon.madrid" class="bare">https://mastodon.madrid</a></p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code> var M = new Masto({ access_token: process.env.MASTODON, timeout_ms: 60 * 1000, api_url: "https://mastodon.madrid/api/v1/", }); var id; M.post("media", { file: fs.createReadStream(outputGifFile) }).then( (resp) =&gt; { id = resp.data.id; M.post("statuses", { status: "Un sitio random cada día", media_ids: [id], }); } );</code></pre> </div> </div> <div class="paragraph"> <p>Para no tener el token en el código simplemente se crea un fichero <code>.env</code> y se añade como clave-valor</p> </div> <div class="paragraph"> <p>Este código, sube la imagen Gif y una vez subida crea un Toot con un texto y el id de la imagen subida</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="ejecución">Ejecución</h2> <div class="sectionbody"> <div class="paragraph"> <p>Una vez tenemos index.js simplemente invocamos</p> </div> <div class="paragraph"> <p><code>node index.js</code></p> </div> <div class="paragraph"> <p>y si todo va bien, tendremos un toot subido con un gif animado adjunto</p> </div> </div> </div> <div class="sect1"> <h2 id="variantes">Variantes</h2> <div class="sectionbody"> <div class="paragraph"> <p>Una vez he tenido el script completo he creado dos "variantes":</p> </div> <div class="ulist"> <ul> <li> <p>norandom.js, es una copia de index.js pero en lugar de buscar un sitio random utiliza los argumentos proporcionados en la linea de comandos como latitud y longitud</p> </li> <li> <p>social.js, al final he separado en dos la lógica de crear el gif y la de subirlo a Mastodon, de tal forma que primero genero la imagen y si me gusta llamo al social.js para que la suba</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="utilidad">Utilidad</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ninguna, pero me he divertido subiendo algún sitio aleatorio y haciendo encuestas para intentar adivinar de donde es, para una vez finalizada la encuesta subir el gif animado que muestre el lugar</p> </div> </div> </div> <div class="sect1"> <h2 id="link_al_código">Link al código</h2> <div class="sectionbody"> <div class="paragraph"> <p>Si quieres, puedes descargar el código completo de todos los scripts desde</p> </div> <div class="paragraph"> <p><a href="https://gitlab.com/-/snippets/2029648" class="bare">https://gitlab.com/-/snippets/2029648</a></p> </div> </div> </div> <div class="sect1"> <h2 id="conclusión">Conclusión</h2> <div class="sectionbody"> <div class="paragraph"> <p>Mi objetivo con este post NO es crear un tutorial de cómo usar Node, pues como se puede observar ni tengo conocimientos ni el código tiene una calidad mínima.</p> </div> <div class="paragraph"> <p>Digamos que me gustaría sirviera para demostrar que hay una gran cantidad de librerías que hacen las cosas más insospechadas, y que es bastante sencillo crearnos utilidades con ellas.</p> </div> </div> </div> Título clickbait para explicar un ejemplo sencillo de una aplicación en Node Filtrando y respondiendo tweets "sin manos" Jorge Aguilera 2020-10-13T00:00:00Z https://blog.jagedn.dev/blog/2020/twitter-sin-manos.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Para reproducir este post necesitarás:</p> </div> <div class="ulist"> <ul> <li> <p>docker y docker-compose instalado en una máquina (puede ser una RaspberryPi)</p> </li> <li> <p>Claves OAuth de aplicación de Twitter que tienes que obtener rellenando un formulario en <a href="https://developer.twitter.com/en/apps" class="bare">https://developer.twitter.com/en/apps</a></p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="objetivo">Objetivo</h2> <div class="sectionbody"> <div class="paragraph"> <p>Vamos a lanzar un proceso desatendido que va a estar atento a todos los tweets que se vayan produciendo en la red social y que contenga una o varias palabras claves de nuestro interés, por ejemplo "PuraVida"</p> </div> <div class="paragraph"> <p>Cuando se detecte un tweet con esta(s) palabras claves realizaremos un segundo filtrado para comprobar si la palabra está en un "contexto" que nos interesa. Por ejemplo vamos a buscar que el texto del tweet contenga "Costa Rica" y cuando se encuentre vamos a contestar con un tweet predefinido, por ejemplo "PuraVida mae" (una expresión tica que me enamoró cuando la escuché por primera vez)</p> </div> </div> </div> <div class="sect1"> <h2 id="arquitectura">Arquitectura</h2> <div class="sectionbody"> <div class="paragraph"> <p>Para conseguir que la parte que lee eventos de Twitter no se demore con procesos de búsqueda de texto en el mensaje, envío de un tweet, etc vamos a crear dos procesos independientes donde uno va a estar escuchando los eventos de Twitter y enviándolos a una cola de Rabbit mientras que otro proceso va a leer de esta cola y enviará el tweet si procede</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/diag-12a8c0611a9708a1c6fe4e6488778702.png" alt="Diagram" width="192" height="300"> </div> </div> <div class="paragraph"> <p>De esta forma aseguramos una lectura fluida de los eventos producidos en la red y los guardamos en una cola interna listos para ir siendo procesados</p> </div> <div class="paragraph"> <p>(Esta misma arquitectura podemos ampliarla para escanear por más de un concepto y redirigir a diferentes colas según cada uno)</p> </div> </div> </div> <div class="sect1"> <h2 id="oauth">Oauth</h2> <div class="sectionbody"> <div class="paragraph"> <p>En primer lugar tendremos que rellenar el formulario indicado al principio y obtener unas claves (4). Este proceso puede demorar algunos días e incluso pueden rechazarte la petición si no lo rellenaste con la suficiente información.</p> </div> <div class="paragraph"> <p>Una vez que los tengas crearemos un fichero tal como este en el directorio que vayamos a usar para este proyecto.</p> </div> <div class="listingblock"> <div class="title">twitterj4.properties</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="java">oauth.consumerKey=xxxxxxxxx oauth.consumerSecret=xxxxxxxxxxxxxxxxxxxxxx oauth.accessToken=yyyyyyy-zzzzzzzzzzzzz oauth.accessTokenSecret=zzzzzzzzzzzzzzzzzzzzz</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="configuración">Configuración</h2> <div class="sectionbody"> <div class="paragraph"> <p>La configuración va a consistir en un fichero <code>.env</code> (ojo que el nomre del fichero empieza en punto):</p> </div> <div class="listingblock"> <div class="title">.env</div> <div class="content"> <pre class="prettyprint highlight"><code>SEARCH=puravida FILTER='Costa Rica' ANSWER='PuraVida mae' IGNORE=jagedn</code></pre> </div> </div> <div class="paragraph"> <p>Es decir: vamos a buscar por la palabra <code>puravida</code>, vamos a filtrar aquellos que lleven la frase <code>Costa Rica</code> y a los que cumplan las condiciones les contestaremos con un RT <code>PuraVida mae</code>.</p> </div> <div class="paragraph"> <p>Para evitar "una recursividad" ignoraremos aquella cuenta cuyo autor sea nuestra propia cuenta</p> </div> </div> </div> <div class="sect1"> <h2 id="docker">Docker</h2> <div class="sectionbody"> <div class="paragraph"> <p>Los tres componentes de la solución (rabbitmq, scan y reply) van a trabajar de forma conjunta mediante un <code>docker-compose</code>:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>version: '3' services: rabbitmq: image: 'rabbitmq:3-management' ports: - '5672:5672' - '15672:15672' healthcheck: test: [ "CMD", "nc", "-z", "localhost", "5672" ] interval: 10s timeout: 10s retries: 5 scan: image: groovy volumes: - .:/home/groovy environment: - SEARCH command: "groovy scan.groovy rabbitmq $SEARCH" depends_on: - rabbitmq reply: image: groovy volumes: - .:/home/groovy environment: - IGNORE - FILTER - ANSWER command: "groovy react.groovy rabbitmq $IGNORE $FILTER $ANSWER" depends_on: - rabbitmq</code></pre> </div> </div> <div class="paragraph"> <p>Como rabbit tarda unos segundos en arrancar la primera vez que se ejecuta, lo lanzaremos en primer lugar y le dejaremos unos 10 segundos hasta que este preparado para recibir mensajes. Existen técnicas más sofisticadas para ello, pero en este post no vamos a complicarnos:</p> </div> <div class="paragraph"> <p><code>docker-compose up -d rabbitmq</code></p> </div> <div class="paragraph"> <p>Si queremos ver los logs y comprobar que el servicio arranca sin problemas:</p> </div> <div class="paragraph"> <p><code>docker-compose logs -f</code></p> </div> <div class="paragraph"> <p>Cuando veamos que el servicio se encuentra levantado cortamos el proceso con Ctrl+C</p> </div> </div> </div> <div class="sect1"> <h2 id="scan">Scan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Una vez que Rabbit está listo podríamos lanzar los otros dos componentes simplemente ejecutando</p> </div> <div class="paragraph"> <p><code>docker-compose up -d</code></p> </div> <div class="paragraph"> <p>y ambos componentes empezarían a trabajar de forma coordinada.</p> </div> <div class="paragraph"> <p>Sin embargo para explicar cada uno de ellos lo vamos a ejecutar por ahora por separado:</p> </div> <div class="paragraph"> <p><code>docker-compose up -d scan</code></p> </div> <div class="paragraph"> <p><code>docker-compose logs -f scan</code></p> </div> <div class="paragraph"> <p>En consola deberemos ver cómo van apareciendo una serie de puntos según se vayan produciendo en Twitter. Obviamente si tu palabra a buscar no es muy popular a lo mejor tardas en verlo así que puedes empezar con algún término de rabiosa actualidad del momento (por ejemplo Ayuso)</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="groovy">@Grab('org.twitter4j:twitter4j-stream:4.0.7') @Grab(group='com.rabbitmq', module='amqp-client', version='3.1.2') import com.rabbitmq.client.* import groovy.json.* import twitter4j.* exchangeName="groovy-script" queueName="grabbit" routingKey='#' factory = new ConnectionFactory() factory.username='guest' factory.password='guest' factory.virtualHost='/' factory.host= args[0] factory.port=5672 conn = factory.newConnection() <i class="conum" data-value="1"></i><b>(1)</b> channel = conn.createChannel() channel.exchangeDeclare(exchangeName, "direct", true) channel.queueDeclare(queueName, true, false, false, null) channel.queueBind(queueName, exchangeName, routingKey) <i class="conum" data-value="2"></i><b>(2)</b> tweetFilterQuery = new FilterQuery() tweetFilterQuery.track(args[1].split(',')) tweetFilterQuery.language('es') <i class="conum" data-value="3"></i><b>(3)</b> stream = new TwitterStreamFactory().instance .addListener([ onStatus:{ status-&gt; String json = JsonOutput.toJson([ statusId: status.id, name: status.user.screenName, text: status.text ]) <i class="conum" data-value="4"></i><b>(4)</b> channel.basicPublish(exchangeName, routingKey, null, json.bytes) println "." }, onException:{ }, onDeletionNotice:{}, onTrackLimitationNotice:{}, onScrubGeo:{}, onStallWarning:{}, ] as StatusListener) .filter(tweetFilterQuery)</code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>Creamos una factoria de rabbit</td> </tr> <tr> <td><i class="conum" data-value="2"></i><b>2</b></td> <td>Creamos y nos adjuntamos a una cola de rabbit</td> </tr> <tr> <td><i class="conum" data-value="3"></i><b>3</b></td> <td>Creamos los criterios de búsqueda</td> </tr> <tr> <td><i class="conum" data-value="4"></i><b>4</b></td> <td>Cada vez que recibimos un mensaje lo enviamos a la cola</td> </tr> </table> </div> <div class="paragraph"> <p>Como puedes ver casi todo el código es de infraestructura siendo lo más relevante cómo configuramos el <code>FilterQuery</code> y cómo convertimos un <code>status</code> de twitter a un mensaje en la cola de rabbitmq</p> </div> <div class="paragraph"> <p>Básicamente podemos indicar una lista de palabras (en nuestro caso si el argumento SEARCH lo separamos con comas), por idioma, geoposición, etc</p> </div> <div class="paragraph"> <p>En la cola simplemente guardaremos el <code>id</code>, el usuario y el texto del tweet</p> </div> </div> </div> <div class="sect1"> <h2 id="react">React</h2> <div class="sectionbody"> <div class="paragraph"> <p>Una vez que tenemos el proceso escaneando Twitter y enviando mensajes a nuestro rabbit es hora de consumirlos</p> </div> <div class="paragraph"> <p>Como rabbit va guardando los mensajes hasta que los consumamos podemos ejecutar el proceso de react después del scan:</p> </div> <div class="paragraph"> <p><code>docker-compose up -d react</code></p> </div> <div class="paragraph"> <p><code>docker-compose logs -f react</code></p> </div> <div class="paragraph"> <p>React, como scan, se conectará a la cola de rabbit e irá leyendo json con el id, autor y texto del tweet. Simplemente buscará sin en dicho texto aparece la cadena indica en FILTER y si es el caso comprobará a su vez si la cuenta que originó el tweet es diferente a IGNORE. Si es así enviará un <code>status</code> como RT al original con el texto indicado</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="groovy">@Grab('org.twitter4j:twitter4j-stream:4.0.7') @Grab(group='com.rabbitmq', module='amqp-client', version='3.1.2') import com.rabbitmq.client.* import groovy.json.* import twitter4j.* exchangeName="groovy-script" queueName="grabbit" routingKey='#' factory = new ConnectionFactory() factory.username='guest' factory.password='guest' factory.virtualHost='/' factory.host= args[0] factory.port=5672 conn = factory.newConnection() channel = conn.createChannel() channel.exchangeDeclare(exchangeName, "direct", true) channel.queueDeclare(queueName, true, false, false, null) channel.queueBind(queueName, exchangeName, routingKey) twitter = TwitterFactory.singleton jsonSlurper = new JsonSlurper() autoAck = true; ignore = args[1] msg = args[2] answer = args.drop(3).join(' ') println msg println answer channel.basicConsume(queueName, autoAck, new DefaultConsumer(channel) { public void handleDelivery(String consumerTag,Envelope envelope,AMQP.BasicProperties properties,byte[] body) throws IOException{ String line = new String(body) json = jsonSlurper.parseText(line) if( json.text.toLowerCase().indexOf(msg) != -1 ){ println "$json.name:\n$json.text\n-------" if( answer &amp;&amp; json.name != ignore ){ stat= new StatusUpdate("@$json.name $answer") stat.inReplyToStatusId = json.statusId as long twitter.updateStatus(stat) } } } });</code></pre> </div> </div> <div class="paragraph"> <p>El código es muy simpilar al de scan a la hora de conectarse a rabbitmq y lo que hace es simplemente consumir eventos de la cola</p> </div> <div class="paragraph"> <p>Para cada mensaje que llegue se comprueba si contiene la cadena a filtar y se envía un tweet con <code>inReplyToStatusId</code></p> </div> </div> </div> <div class="sect1"> <h2 id="bots">Bots</h2> <div class="sectionbody"> <div class="paragraph"> <p>Usando estos dos scripts puedes hacer bots que realicen acciones ante ciertos tweets:</p> </div> <div class="ulist"> <ul> <li> <p>hacer un retweet ante una palabra</p> </li> <li> <p>guardar cuentas de usuario que mencionen una frase</p> </li> <li> <p>etc</p> </li> </ul> </div> <div class="paragraph"> <p>Por ejemplo podrías "tomar el pulso" a Twitter filtrando por una serie de palabras y actualizando en tiempo real una aplicación web donde se mostrara el número de veces que se están usando esas palabras</p> </div> </div> </div> Escanear Twitter y reaccionar a una frase determinada contestando con un tweet Asciidoctor extension for JBake Jorge Aguilera 2020-10-06T00:00:00Z https://blog.jagedn.dev/blog/2020/asciidoctor-jbake.html <div id="preamble"> <div class="sectionbody"> <div class="dlist"> <dl> <dt class="hdlist1">NOTE</dt> <dd> <p>English is not my mother language so if some part of this post is not clear don&#8217;t hesitate and let me know and I&#8217;ll try to explain better</p> </dd> </dl> </div> <div class="paragraph"> <p>JBake is an static site generator written in Java (there are a lot of similar static site generator written in Python, Javascript, Ruby &#8230;&#8203;). As a Java/Groovy developer point of view it has a lot of interesting features as:</p> </div> <div class="ulist"> <ul> <li> <p>run into the JVM machine, so you can integrate into your Java project</p> </li> <li> <p>different template engines (freemarker, groovy, thymeleaf, jade&#8230;&#8203;)</p> </li> <li> <p>markdown and asciidoctor support</p> </li> <li> <p>open source</p> </li> <li> <p>gradle plugins</p> </li> </ul> </div> <div class="paragraph"> <p>As an example, this full blog is written in Asciidoctor and rendered by JBake as a static site who doesn&#8217;t require database, php, etc so I can deploy it in a lot of free platform as Github, Gitlab, Netlify, &#8230;&#8203;</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>I use Gradle as build tool because it allows me to write code and customize the build process. Not sure if this post can be or how to adapted to Maven for example.</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="asciidoctor">Asciidoctor</h2> <div class="sectionbody"> <div class="paragraph"> <p>I like write post in asciidoctor because I can maintain the focus in the content of the post an forget the presentation.</p> </div> <div class="paragraph"> <p>For example, I can write in a post at some part of it:</p> </div> <div class="literalblock"> <div class="content"> <pre>img::image/path1/path2/image.png[]</pre> </div> </div> <div class="paragraph"> <p>and Asciidoctor+Jbake will render the HTML similar to</p> </div> <div class="literalblock"> <div class="content"> <pre>&lt;image src="image/path1/path2/image.png"&gt;</pre> </div> </div> <div class="paragraph"> <p>Img is part of asciidoctor&#8217;s specification. Also you can use paragraphs, links, tables, etc but always from a semantic point of view, I mean, you don&#8217;t need to pay attention about "visual" details</p> </div> </div> </div> <div class="sect1"> <h2 id="asciidoctor_extension">Asciidoctor extension</h2> <div class="sectionbody"> <div class="paragraph"> <p>One of the best features of Asciidoctor is the capabilitie of write extension. You can write extension in Ruby, Java or Javascript for example and "attach" these extensions to the Asciidoctor engine and use it into your document.</p> </div> <div class="paragraph"> <p>I&#8217;ve written some simple extensions in Java as a Discuss block, a Google Analitycs preprocessor or a QRCode generator. For example, with the QRCode extension you can write into your blog:</p> </div> <div class="literalblock"> <div class="content"> <pre>barcode:qrcode[https://puravida-software.gitlab.io/asciidoctor-extensions/,300,300]</pre> </div> </div> <div class="paragraph"> <p>and the extensión will generate the image and include the required code into the document to visualize them.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>You can find it at <a href="https://puravida-asciidoctor.gitlab.io/asciidoctor-barcode/" class="bare">https://puravida-asciidoctor.gitlab.io/asciidoctor-barcode/</a></p> </dd> </dl> </div> <div class="paragraph"> <p><span class="image"><img src="/images/barcode-afcfab40278c9cc9c29db6d0a0e3c702.png" alt="https://puravida-software.gitlab.io/asciidoctor-extensions/" width="300" height="300"></span></p> </div> </div> </div> <div class="sect1"> <h2 id="asciidoctor_extension_jbake">Asciidoctor extension + Jbake</h2> <div class="sectionbody"> <div class="paragraph"> <p>If you want to use some Asciidoctor extension, for example the previous barcode extension, you need to include it into the classpath.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p><strong>Pay attention</strong> you need to include them into the <code>buildScript</code> dependencies section because the <code>dependencies</code> section in Gradle is dedicated to <strong>compile</strong></p> </dd> </dl> </div> <div class="paragraph"> <p>As I use Gradle this is how my <code>build.gradle</code> looks :</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="groovy">buildscript { repositories { jcenter() maven{ url "http://dl.bintray.com/puravida-software/repo" } } dependencies { classpath 'org.scilab.forge:jlatexmath:1.0.7' classpath 'org.asciidoctor:asciidoctorj-diagram:2.0.5' classpath 'org.asciidoctor:asciidoctorj:2.2.0' classpath 'com.puravida.asciidoctor:asciidoctor-barcode:2.4.1' } } plugins { id 'org.jbake.site' version '5.2.0' } dependencies { } bakePreview { port = '8090' } bakePreview.dependsOn bake jbake{ version = "2.6.5" configuration['asciidoctor.option.requires'] = "asciidoctor-diagram" configuration['asciidoctor.attributes'] = [ "stem=", "icons=font", "imagesoutdir="+file('build/jbake/images').absolutePath, "imagesdir=/images", "source-highlighter=prettify", ].join(',') } build.dependsOn bake</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="your_own_asciidoctor_extension">Your own Asciidoctor extension</h2> <div class="sectionbody"> <div class="dlist"> <dl> <dt class="hdlist1">INFO</dt> <dd> <p>Full code are available at <a href="https://gitlab.com/jorge-aguilera/blog/-/tree/master/buildSrc/src/main/groovy/jorge/aguilera/soy" class="bare">https://gitlab.com/jorge-aguilera/blog/-/tree/master/buildSrc/src/main/groovy/jorge/aguilera/soy</a></p> </dd> </dl> </div> <div class="paragraph"> <p>It&#8217;s great when someone has been written and published an usefull extension and you can use it into your blog without more effort that include it into the `build.gradle`file, but sometimes you want to write your own extension without the complexity of create a repo (maybe in Bintray), versioning, publishing, etc when all you want is to use the extension into the same blog</p> </div> <div class="paragraph"> <p>For this situation I&#8217;ll explain how I manage to write custom extensions only accesible in the blog and versioned together.</p> </div> <div class="paragraph"> <p>This extension will render a calendar for an specified month as an HTML table and looks as:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code> .Agenda 2020/10 [calendar,year=2020, month=10] ---- 1 Arrive 2 Keynotes 6 Visit to Madrid 9 Close and party ----</code></pre> </div> </div> <div class="paragraph"> <p>It&#8217;s a block with an unique identifier (<code>calendar</code>) with two attributes (<code>year</code> and <code>month</code>) where every line will start with a number followed by a String. The extension will parse this block and generate a table similar to</p> </div> <div class="openblock"> <div class="content"> <table class="tableblock frame-all grid-all stretch"> <caption class="title">Table 1. Agenda 2020/10</caption> <colgroup> <col style="width: 14.2857%;"> <col style="width: 14.2857%;"> <col style="width: 14.2857%;"> <col style="width: 14.2857%;"> <col style="width: 14.2857%;"> <col style="width: 14.2857%;"> <col style="width: 14.2858%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">L</th> <th class="tableblock halign-left valign-top">M</th> <th class="tableblock halign-left valign-top">X</th> <th class="tableblock halign-left valign-top">J</th> <th class="tableblock halign-left valign-top">V</th> <th class="tableblock halign-left valign-top">S</th> <th class="tableblock halign-left valign-top">D</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"></td> <td class="tableblock halign-left valign-top"></td> <td class="tableblock halign-left valign-top"></td> <td class="tableblock halign-left valign-top"><p class="tableblock">1</p> <p class="tableblock"> Arrive</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">2</p> <p class="tableblock"> Keynotes</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">3</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">4</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">5</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">6</p> <p class="tableblock"> Visit to Madrid</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">7</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">8</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">9</p> <p class="tableblock"> Close and party</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">10</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">11</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">12</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">13</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">14</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">15</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">16</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">17</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">18</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">19</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">20</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">21</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">22</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">23</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">24</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">25</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">26</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">27</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">28</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">29</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">30</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">31</p></td> <td class="tableblock halign-left valign-top"></td> </tr> </tbody> </table> </div> </div> <div class="sect2"> <h3 id="buildsrc">buildSrc</h3> <div class="paragraph"> <p>Our extension will reside into the <code>buildSrc/src/main/groovy/jorge/aguilera/soy</code> folder and we&#8217;ll follow the steps indicate into the guide <a href="https://github.com/asciidoctor/asciidoctorj" class="bare">https://github.com/asciidoctor/asciidoctorj</a></p> </div> <div class="paragraph"> <p>Briefly these steps are:</p> </div> <div class="ulist"> <ul> <li> <p>Create a CalendarBlock</p> </li> </ul> </div> <div class="listingblock"> <div class="title">CalendarBlock.groovy</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="groovy">package blog.jagedn.dev // a lot of imports @Name("calendar") @Contexts([Contexts.LISTING]) public class CalendarBlock extends BlockProcessor { @Override public Object process(StructuralNode parent, Reader reader, Map&lt;String, Object&gt; attributes) { // main logic to parse and render } ]</code></pre> </div> </div> <div class="paragraph"> <p>Basically the extension will read the lines and parse all of them following the specified structure.</p> </div> <div class="paragraph"> <p>It will instantiate a Calendar object with the year and month set in the attributes (required) and <code>navigate</code> accross the month adding strings to an array in order to have an "asciidoctor table" as if the user written it.</p> </div> <div class="paragraph"> <p>At the end the extension will call to the asciidoctor engine to render an array os strings similar to</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code> |=== | | | 30 | 1 | 2 | 3 a line | 4 another line |===</code></pre> </div> </div> <div class="paragraph"> <p>using the method <code>parseContent</code>:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code> Block block = createBlock(parent, "open", (String) null); parseContent(block, content); return block;</code></pre> </div> </div> <div class="ulist"> <ul> <li> <p>register the extension using the <code>JorgeExtensionRegistry.groovy</code></p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="groovy">package blog.jagedn.dev // some imports class JorgeExtensionRegistry implements ExtensionRegistry { void register(Asciidoctor asciidoctor) { asciidoctor.javaExtensionRegistry().with{ block 'calendar', CalendarBlock } } }</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="dependencies">Dependencies</h3> <div class="paragraph"> <p>We will include the dependencies required by our extension into the <code>buildSrc/build.gradle</code> file. Pay attention is not the <code>build.gradle</code> file in the root of the project.</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="groovy">repositories { jcenter() } dependencies { compile 'org.asciidoctor:asciidoctorj:2.2.0' }</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="build">Build</h2> <div class="sectionbody"> <div class="paragraph"> <p>Now when Gradle will run the <code>build</code> task it will compile and use the buildSrc as classpath dependency so when JBake instantiate the Asciidoctor engine will have all the artifacts required to understand your new extension</p> </div> <div class="paragraph"> <p>Simple execute</p> </div> <div class="paragraph"> <p><code>./gradlew build bakePreview</code></p> </div> <div class="paragraph"> <p>and preview your blog at localhost:8090</p> </div> </div> </div> <div class="sect1"> <h2 id="sparql_extension">SPARQL extension</h2> <div class="sectionbody"> <div class="paragraph"> <p>I&#8217;m playing with a new idea for a SPARQL asciidoctor-extension how execute a sentence and dump the results as a table (similar to the native capability of asciidoctor to render a CSV file for example)</p> </div> <div class="paragraph"> <p>The idea is to have a new block where you write the sentence and specify wich fields you want to dump.</p> </div> <div class="paragraph"> <p>You can see it in action at <a href="sparql.html" class="bare">sparql.html</a></p> </div> </div> </div> <div class="sect1"> <h2 id="others_extensions">Others extensions</h2> <div class="sectionbody"> <div class="paragraph"> <p>In this way you can have more extensions as:</p> </div> <div class="ulist"> <ul> <li> <p>write some content in yellow to remark some ideas</p> </li> <li> <p>encript some parts of your post and reveal it with a key</p> </li> <li> <p>create a quizz with questions and answers</p> </li> <li> <p>&#8230;&#8203;</p> </li> </ul> </div> </div> </div> How to create a custom extension for your JBake blog Sparql Jorge Aguilera 2020-10-05T00:00:00Z https://blog.jagedn.dev/blog/2020/sparql.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Playing with a new #asciidoctor extension for the blog querying Wikidata (or Dbpedia) using SPARQL</p> </div> </div> </div> <div class="sect1"> <h2 id="wikidata">Wikidata</h2> <div class="sectionbody"> <div class="literalblock"> <div class="content"> <pre>.List of Pokemons [sparql, fields="pokemon,pokemonLabel,pokedexNumber"] ---- SELECT DISTINCT ?pokemon ?pokemonLabel ?pokedexNumber WHERE { ?pokemon wdt:P31/wdt:P279* wd:Q3966183 . ?pokemon p:P1685 ?statement. ?statement ps:P1685 ?pokedexNumber; pq:P972 wd:Q20005020. FILTER (! wikibase:isSomeValue(?pokedexNumber) ) SERVICE wikibase:label { bd:serviceParam wikibase:language "[AUTO_LANGUAGE],en" } } ORDER BY (?pokedexNumber) LIMIT 30 ----</pre> </div> </div> <div class="literalblock"> <div class="content"> <pre>.Cats [sparql, provider="wikidata", fields="item,itemLabel,pic"] ---- SELECT ?item ?itemLabel ?pic WHERE { ?item wdt:P31 wd:Q146 . ?item wdt:P18 ?pic SERVICE wikibase:label { bd:serviceParam wikibase:language "[AUTO_LANGUAGE],en" } } LIMIT 10 ----</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="dbpedia">Dbpedia</h2> <div class="sectionbody"> <div class="literalblock"> <div class="content"> <pre>.People who were born in Berlin before 1900 [sparql, provider="dbpedia", fields="name,birth,death,person"] ---- PREFIX dbo: &lt;http://dbpedia.org/ontology/&gt; PREFIX xsd: &lt;http://www.w3.org/2001/XMLSchema#&gt; PREFIX foaf: &lt;http://xmlns.com/foaf/0.1/&gt; PREFIX : &lt;http://dbpedia.org/resource/&gt; SELECT ?name ?birth ?death ?person WHERE { ?person dbo:birthPlace :Berlin . ?person dbo:birthDate ?birth . ?person foaf:name ?name . ?person dbo:deathDate ?death . FILTER (?birth &lt; "1900-01-01"^^xsd:date) . } ORDER BY ?name LIMIT 30 ----</pre> </div> </div> <div class="literalblock"> <div class="content"> <pre>.Jugadores de Futbol nacidos en Madrid [sparql, provider="dbpedia", fields='athlete,number'] ---- SELECT * WHERE { ?athlete a dbo:SoccerPlayer; dbo:birthPlace [rdfs:label "Madrid"@en]; dbo:number ?number. } LIMIT 30 ----</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="custom_endpoint">Custom endpoint</h2> <div class="sectionbody"> <div class="paragraph"> <p>You can specify the endpoint using the <code>provider</code> attribute:</p> </div> <div class="literalblock"> <div class="content"> <pre>[sparql, provider="https://es.dbpedia.org/sparql", fields="torero,cantante"] ---- PREFIX dbpedia-owl: &lt;http://dbpedia.org/ontology/&gt; PREFIX dcterms: &lt;http://purl.org/dc/terms/&gt; SELECT ?torero ?cantante WHERE{ ?torero rdf:type dbpedia-owl:BullFighter . ?torero dbpedia-owl:spouse ?cantante . ?cantante dcterms:subject &lt;http://es.dbpedia.org/resource/Categoría:Cantantes_de_coplas&gt; } ----</pre> </div> </div> <div class="openblock"> <div class="content"> <table class="tableblock frame-all grid-all stretch"> <caption class="title">Table 1. Toreros y Tonadilleras</caption> <colgroup> <col style="width: 50%;"> <col style="width: 50%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">torero</th> <th class="tableblock halign-left valign-top">cantante</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><a href="http://es.dbpedia.org/resource/José_Ortega_Cano" class="bare">http://es.dbpedia.org/resource/José_Ortega_Cano</a></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><a href="http://es.dbpedia.org/resource/Rocío_Jurado" class="bare">http://es.dbpedia.org/resource/Rocío_Jurado</a></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><a href="http://es.dbpedia.org/resource/José_Ortega_Cano" class="bare">http://es.dbpedia.org/resource/José_Ortega_Cano</a></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><a href="http://es.dbpedia.org/resource/Rocío_Jurado" class="bare">http://es.dbpedia.org/resource/Rocío_Jurado</a></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><a href="http://es.dbpedia.org/resource/Curro_Romero" class="bare">http://es.dbpedia.org/resource/Curro_Romero</a></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><a href="http://es.dbpedia.org/resource/Concha_Márquez_Piquer" class="bare">http://es.dbpedia.org/resource/Concha_Márquez_Piquer</a></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><a href="http://es.dbpedia.org/resource/Curro_Romero" class="bare">http://es.dbpedia.org/resource/Curro_Romero</a></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><a href="http://es.dbpedia.org/resource/Concha_Márquez_Piquer" class="bare">http://es.dbpedia.org/resource/Concha_Márquez_Piquer</a></p></td> </tr> </tbody> </table> </div> </div> </div> </div> Jugando con sparql Mi resumen de @esLibre_ 2020 Jorge Aguilera 2020-09-22T00:00:00Z https://blog.jagedn.dev/blog/2020/eslibre.html <div id="preamble"> <div class="sectionbody"> <div class="admonitionblock tip"> <table> <tr> <td class="icon"> <i class="fa icon-tip" title="Tip"></i> </td> <td class="content"> "esLibre es un encuentro de personas interesadas en las tecnologías libres, enfocado a compartir conocimiento y experiencia alrededor de las mismas (<a href="https://eslib.re/)"" class="bare">https://eslib.re/)"</a> </td> </tr> </table> </div> <div class="paragraph"> <p>Por segundo año consecutivo he asistido al congreso esLibre y por segundo año he podido dar una charla.</p> </div> <div class="paragraph"> <p>El año pasado, en Granada, pude contar mis movidas con #OpenSource #OpenData (bots consumiendo datasets y cosas así) así como la de #DocAsCode, la cual he repetido (con variaciones) este año.</p> </div> <div class="paragraph"> <p>Este año iba a ser en Madrid (bueno, en realidad Fuenlabrada que parece ser que es de la Comunidad de Madrid aunque yo me saqué el pasaporte por si acaso), pero por culpa del bichito la organización le dió un giro de 180º y se arriesgó a hacer un evento totalmente online y en mi opinión y a la vista del resultado fue un acierto completo.</p> </div> </div> </div> <div class="sect1"> <h2 id="docascode">DocAsCode</h2> <div class="sectionbody"> <div class="paragraph"> <p>Aunque parezca egocéntrico voy a comentar primero sobre mi charla pero con la intención de quitarmelo cuanto antes y poder pasar al evento en sí que lo considero más interesante.</p> </div> <div class="paragraph"> <p>Cuando ví que se organizaba una nueva edición me lancé a enviar mi propuesta sobre #DocAsCode (bueno, miento, estuve dudando los primeros 5 minutos) pues la había estado dando vueltas y quería hacerla en plan "teatrillo". Quería hacer una versión online donde crearía desde cero un proyecto y publicaría la documentación en directo.</p> </div> <div class="paragraph"> <p>Todo sonaba perfecto en mi cabeza hasta que comprobé al ser aceptada que el tiempo que se disponía era de 30 minutos. Y el pánico se apoderó de mí cuando dicho tiempo fue reducido a 20 tras organizar todas las propuestas.</p> </div> <div class="paragraph"> <p>Acostumbrado a charlas de 40-45 minutos reducirla a la mitad se me hacía una locura. Iba a ser materialmente posible contar nada en 20 minutos.</p> </div> <div class="paragraph"> <p>Pues bien, tras darme cuenta que en realidad en una charla se trata de contar lo importante no de contar todo lo que quieres hasta aburrir me dispuse a hacer recortes y optimizar mi teatro:</p> </div> <div class="paragraph"> <p>Sabía por experiencia que publicar en Netlify es cuestión de segundos mientras que en Gitlab puede llevar varios minutos así que investigué cómo enlazarlos y publicar automáticamente (algo más para la mochila y sobre lo que escribiré en otro post)</p> </div> <div class="paragraph"> <p>Se me ocurrió que la mejor manera de crear el proyecto en Netlify era inventarme unas slides que desplegar manualmente y evitar asi el proceso "administrativo" de configurarlos</p> </div> <div class="paragraph"> <p>Mientras Gitlab ejecutaba el pipeline yo podía estar creando otra rama y trabajar sobre ella. Corría el peligro de hacerlo confunso así que intenté repetir varias veces lo que se estaba viendo en pantalla, espero haberlo conseguido.</p> </div> <div class="paragraph"> <p>Tuve que eliminar, por ejemplo, la parte de código pero a cambio podía detenerme unos segundos en explicar un poco mejor la idea en cada paso, o, una vez más, es lo que espero haber conseguido.</p> </div> <div class="paragraph"> <p>Obviamente tuve que repetir muchas veces la charla pues no iba a tener slides sobre las que apoyarme y el tiempo tan escaso obligaba a tenerlo todo encadenado.</p> </div> <div class="paragraph"> <p>Al final creo que la charla salió bien e incluso hubo preguntas muy interesantes después y me pasaron algún enlace relacionado para investigar.</p> </div> </div> </div> <div class="sect1"> <h2 id="organización">Organización</h2> <div class="sectionbody"> <div class="paragraph"> <p>Quede claro que yo no he participado en la organización y sólo puedo hablar de lo que he podido ver/oir.</p> </div> <div class="paragraph"> <p>No puedo imaginarme todo el esfuerzo de coordinación, discusiones, trabajo y horas que la gente le tiene que dedicar a un evento de este tipo y más en estas condiciones.</p> </div> <div class="paragraph"> <p>En mi opinión la organización ha sido im pe ca ble. Transmitiendo la información de una forma clara y transparente en todo momento, con unos medios que han funcionado de lujo &#8230;&#8203; y (casi)todo Software Libre.</p> </div> <div class="paragraph"> <p>De todos los aspectos de la organización yo me quedo con el proceso de aceptar las charlas mediante un Merge Request (como el Pull Request de Github pero en Gitlab que es Open Source, como debe ser):</p> </div> <div class="paragraph"> <p>Cualquiera podía clonar el repo, crear una propuesta y solicitar un MR para su aprobación. Así mismo los comentarios tanto con propuestas de mejoras, o solicitando aclaraciones, o las aprobaciones al MR se realizan de forma transparente usando Gitlab, de tal forma que todo el mundo puede ver el proceso de selección de charlas.</p> </div> <div class="paragraph"> <p>Para mí esto es un hecho diferenciador de muchas otras conferencias de renombre (y que no por ello dejo de admirar como GreachConf, CommitConf o Codemotion). Es cierto que en algunas de estas se solicita la "ayuda" de ciertas comunidades para votar pero el concepto de transparencia del esLibre lo peta.</p> </div> <div class="paragraph"> <p>Por otra parte, cuando salga el video os animo a que veais el mensaje final de Germán, @germaaan_, donde (machaconamente) remarca que es un evento de "la gente para la gente". Pero es que es así. No hay marcas comerciales, no hay empresas, no hay captación de CVs, sino gente queriendo compartir libremente cosas con la gente.</p> </div> <div class="paragraph"> <p>Y esto me lleva a otro tema que creo que este evento puede ofrecer: NO pretende restringuirse en el área del Software Libre típico sino que se busca abarcar otras áreas de la cultura donde compartir de forma abierta (música, literatura, cualquier expresión de arte&#8230;&#8203;) o eso es lo que yo he entendido, claro.</p> </div> </div> </div> <div class="sect1"> <h2 id="medios_y_dinámica">Medios y dinámica</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ni idea de los medios que han hecho posible el evento. Sé que los van a publicar pero yo sólo me he quedado con que han puesto medios para asegurar que no hubiera problemas. Al ser el primer evento de este tipo supongo que se ha tirado la casa por la ventana pero en la clausura se habían sacado conclusiones y estimaciones para eventos futuros.</p> </div> <div class="paragraph"> <p>La dinámica ha sido mucho más fluida de lo que yo creía en un primer momento. Se habilitaron una serie de tracks, cada uno con una sala en BigBlueButton y con un canal de RocketChat asociado para poder hacer preguntas. Porqué ? pues su razones tendrían. Yo creo que por ejemplo el sistema de preguntas de BBB es un poco peor y además al ir encadenadas las charlas se permitía comenzar una nueva mientras todavía se estaba chateando en RocketChat.</p> </div> <div class="paragraph"> <p>El formato de las charlas a 20 minutos, como ya he comentado, me ha parecido un acierto. Al ponente le parece un stress de primeras pero una vez que centras tu charla creo que es mucho mejor. Simplificas el mensaje, vas a lo importante, al no ver las caras del público te obligas a seguir tu hilo, &#8230;&#8203; me ha gustado en resumen.</p> </div> <div class="paragraph"> <p>Como oyente se favorece el que puedas estar entrando y saliendo de las charlas sin molestar. Tengo que admitir que en más de una charla estuve compaginandola con otra. Obvio no atiendes a las 2 de forma completa pero en conjunto sí pude aprender lecciones de ellas a pesar de simultanearlas.</p> </div> </div> </div> <div class="sect1"> <h2 id="charlas">Charlas</h2> <div class="sectionbody"> <div class="paragraph"> <p>Como no soy muy bueno haciendo resúmenes tendremos que esperar a que @luiyo haga el suyo de las charlas.</p> </div> <div class="paragraph"> <p>Yo por mi parte flipé con el proyecto SoftwareHeritage (y que hayan hecho una copia de TelotraigodemiPueblo, mi TFC), trasteé con GodotEngine y ya le estoy dando vueltas a ver qué juego simple puedo hacer, o mis primeros pasitos con Raku (mucho más interesante que Python) entre otras muchas</p> </div> <div class="paragraph"> <p>Mención especial claro está a la de @MiguelRuGa sobre Groovy, que ha sido su primera charla y casi tras ponerle una pistola en la cabeza</p> </div> </div> </div> <div class="sect1"> <h2 id="futura_edición">Futura Edición</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ni idea de si tal como está el patio habrá próxima edición, ni donde estaremos, obviamente, pero el mensaje que yo saqué es que hay muchas ganas de repetir y si puede ser con más temas</p> </div> <div class="paragraph"> <p>Si sirve de algo mi modesta opinión, yo creo que es un evento que no me perdería y si te interesa el tema de "Libre" en cualquiera de sus vertientes estoy seguro que van a encontrar una forma de que puedas compartir lo que quieras contar.</p> </div> </div> </div> Impresiones tras asistir al esLibre 2020 Pruebas de selección Jorge Aguilera 2020-09-18T00:00:00Z https://blog.jagedn.dev/blog/2020/pruebas-seleccion.html <div id="preamble"> <div class="sectionbody"> <div class="admonitionblock tip"> <table> <tr> <td class="icon"> <i class="fa icon-tip" title="Tip"></i> </td> <td class="content"> Este post surge a raiz de artículo escrito por @Ari_Reinventada en Medium (<a href="https://medium.com/@AriJDB/procesos-de-selecci%C3%B3n-agobio-estr%C3%A9s-y-aprendizaje-2c761bf36207" class="bare">https://medium.com/@AriJDB/procesos-de-selecci%C3%B3n-agobio-estr%C3%A9s-y-aprendizaje-2c761bf36207</a>) donde comenta su paso por diferentes procesos de selección. Como "contrapartida" en este post voy a hablar de mi experiencia estando al "otro lado" </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="aquellos_maravillosos_años">Aquellos maravillosos años</h2> <div class="sectionbody"> <div class="paragraph"> <p>Durante todos estos años de aplastar teclas he tenido que pasar por muchas y variadas formas de entrevistas para optar a algún puesto de trabajo.</p> </div> <div class="paragraph"> <p>Desde aquellas pruebas psicotécnicas de los 90 donde tenías que completar secuencias de fichas de domino (me apuesto el cuello que todavía se hacen en algún sitio) hasta la de tener que instalar un software que medía tus tecleos, si consultabas páginas de Internet y cosas así para resolver un problema algorítmico en 2 horas (que obviamente no pasé)</p> </div> <div class="paragraph"> <p>De muchas de ellas, tras el rechazo a mi candidatura, pude ver en qué había fallado (aunque eso no implique que aprendiera de ello y lo corrigiera) pero una en especial sí me llegó al alma.</p> </div> </div> </div> <div class="sect1"> <h2 id="mala_experiencia">Mala experiencia</h2> <div class="sectionbody"> <div class="paragraph"> <p>Tras ponerse en contacto conmigo alguien de RRHH de una empresa tecnológica y pasar los preliminares me enviaron la dichosa prueba de código. No era complicada, efectivamente, algo así como un servicio REST al que se le actualizaban precios por un lado y los mostraba por otro, y me puse manos a la obra.</p> </div> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="Warning"></i> </td> <td class="content"> Hay mucha "literatura" al respecto de hacer pruebas de código. Gente que no quiere dedicar su tiempo libre en ella, o que piden que se le remunere, etc. Para mí son posturas totalmente válidas pero en mi caso no me importa pues las veo como retos a resolver, si bien es verdad que nunca me han planteado una prueba que parezca que es para resolverles un marrón. </td> </tr> </table> </div> <div class="paragraph"> <p>Creé el servicio (en Gradle, Groovy y Micronaut por supuesto) lo más sencillo posible y para completarlo le añadí lo que me pareció lo mínimo que se debía crear para un proyecto:</p> </div> <div class="ulist"> <ul> <li> <p>unos test mínimos</p> </li> <li> <p>docker-compose para levantar la base de datos y el servicio</p> </li> <li> <p>repositorio en Gitlab</p> </li> <li> <p>pipeline en Gitlab para construir el proyecto</p> </li> <li> <p>documentación (obvio) con Asciidoctor incluida en el build del proyecto</p> </li> <li> <p>README explicando cómo construir el proyecto y donde encontrar la documentación</p> </li> </ul> </div> <div class="paragraph"> <p>Vamos, una oportunidad donde poder demostrar que tocas varios palos y poder discutir sobre ello.</p> </div> <div class="paragraph"> <p>A las 2 horas de haberles enviado la url al repo recibí la negativa ("muchas gracias pero no has usado el patrón sampitopato") y realmente estuve cagándome en sus muelas durante unos cuantos días.</p> </div> <div class="paragraph"> <p>Me parecía increíble que alguien les enviara una propuesta tan completa, como a mi me parecía, al día siguiente de proponerla y la despacharan con ese argumento. Pero lo más alucinante es que <strong>ni tan siquiera ofrecieran la oportunidad de discutir mi propuesta</strong>. Según me había comentado la persona que se puso en contacto conmigo tenían la intención de contratar a <strong>200 técnicos en un año!!!</strong></p> </div> <div class="paragraph"> <p>Lo repito: no es que me sintiera ofendido porque no aceptaran mi propuesta. Es que pienso en el coste en el que estaban incurriendo para captar talento y lo desperdiciaban simplemente porque no usabas un patrón !!</p> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> La parte buena de esta experiencia fue que me piqué con el patrón sanpitopato y a partir de ahí me líe a hacer una serie de bots para Telegram &#8230;&#8203; donde seguí sin aplicar el patrón sanpitopato. </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="tymit">Tymit</h2> <div class="sectionbody"> <div class="paragraph"> <p>Tiempo después, y gracias a contactos que te avisan de oportunidades que surgen, me "enfrenté" a la de Tymit la cual me gustó bastante y sobre la que, una vez que formé parte del equipo, hemos ido trabajando para mejorarla, al menos en nuestro entender.</p> </div> <div class="paragraph"> <p>Básicamente el proceso completo, que a priori puede parecer largo, se divide en una serie de entrevistas:</p> </div> <div class="ulist"> <ul> <li> <p>una charla corta con RRHH para conocerte y explicarte la vacante y el proceso</p> </li> <li> <p>una charla corta, 1/2 hora aprox, con dos miembros del equipo con los que no necesariamente vas a trabajar codo con codo. Sirve principalmente para resolver dudas de cómo es la compañía, explicarte el producto y forma de trabajar por encima, y que te pueda servir para ver si estarías cómodo trabajando en la empresa (y para qué mentir, sirve para ver si encajarías en la misma)</p> </li> <li> <p>una charla técnica de 1h aprox con otros dos técnicos diferentes (si se puede). Se trata de que el candidato conozca tanta gente como sea posible del equipo así como a la inversa. Es en esta charla donde me voy a centrar pues obviamente es la principal</p> </li> <li> <p>una charla "corta" para conocer al CTO. Como buen CTO si le das pie puede estar horas hablando contigo.</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="prueba_técnica_backend">Prueba técnica (backend)</h2> <div class="sectionbody"> <div class="paragraph"> <p>En mi opinión, en Tymit no vas a encontrar a grandes gurús tecnológicos capaces de hacer el algoritmo cuántico del momento, (obviamente si así fuera yo no habría pasado la prueba) por lo que la prueba no consiste en resolver ningún algoritmo, aplicar un patrón, y por supuesto nada de trabajar sobre una hoja en blanco (Me da el flato de la risa de pensar en la pobre @Ari_Reinventada haciendo HTML en una hoja).</p> </div> <div class="paragraph"> <p>La prueba la hemos dividido en una serie de preguntas "incrementales":</p> </div> <div class="ulist"> <ul> <li> <p>elegir entre dos trozos de código Java (no más de 10 líneas cada uno) y comentarnos qué hace, que problemas le ves, etc.</p> </li> <li> <p>dado un problema mundano con unas especificaciones supersimples, cómo plantearías los tests. Ni spock, ni junit, ni cucumber, &#8230;&#8203; lo que tú harías, si bajas a pseudocódigo bien, si no tendrás que explicarte de viva voz.</p> </li> <li> <p>un día a día con Git</p> </li> <li> <p>algo de docker super fácil</p> </li> <li> <p>elegir una pregunta entre dos sobre un API Rest y charlamos sobre ello.</p> </li> <li> <p>idem de microservicios</p> </li> <li> <p>una pregunta bastante rebuscada sobre arquitectura.</p> </li> </ul> </div> <div class="paragraph"> <p>Y sí, solamente tenemos este documento para cualquier nivel al que se opte por dos razones:</p> </div> <div class="ulist"> <ul> <li> <p>no necesitas saber de todo, si de algo no sabes no se busca que te lo inventes sino que lo digas sin tapujos. Lo bueno es que muchas veces la gente te sorprende y alguien que opta a un nivel medio se ha peleado con algún tema más raro y así tiene la oportunidad de hablar de ello.</p> </li> <li> <p>somos tan vagos que para qué vamos a hacer dos versiones.</p> </li> </ul> </div> <div class="paragraph"> <p>Lo que se busca en este prueba no es tanto que demuestres tus conocimientos resolviendo el problema del siglo sino que discutamos y puedas expresar tus puntos de vista, forma de hacer las cosas, en definitva <strong>conocernos</strong>.</p> </div> <div class="paragraph"> <p>Se procura en cada apartado no sólo escuchar al candidato sino poder aportarle algo. Por ejemplo puede que no hayas tenido que tocar nada de Docker y tengas interés en saber qué se buscaba en esa pregunta.</p> </div> <div class="paragraph"> <p>Al final de la entrevista (que alguna vez se ha alargado mucho más de la hora) se procura reservar unos minutos para resolver las dudas que se puedan tener principalmente sobre la forma de trabajar, organizarnos, etc e inmediatamente le trasladamos nuestras impresiones a RRHH para que se pongan en contacto con la persona que opta cuanto antes y le traslade si continúa o no.</p> </div> <div class="paragraph"> <p><em>Hemos evaluado en este punto si deberíamos enviarle nuestro feedback pero al menos a día de hoy creemos que la entrevista es tan abierta y se comentan todos los puntos que creemos que es suficiente</em>.</p> </div> </div> </div> <div class="sect1"> <h2 id="conclusiones">Conclusiones</h2> <div class="sectionbody"> <div class="paragraph"> <p>El principal problema que le veo a esta "metodología" es que no "escala".</p> </div> <div class="paragraph"> <p>Quiero decir con ello que es un proceso que requiere su tiempo así como esfuerzo por parte del equipo técnico que tiene que aparcar sus tareas durante un buen rato (lo bueno es que la hemos hecho ya algunas veces, rotandonos entre nosotros, y ya tenemos claro lo que buscamos y cómo plantearla)</p> </div> <div class="paragraph"> <p>Por parte de la persona que opta también es un esfuerzo obviamente pero a cambio obtiene el conocer, de forma gradual, a mucha parte del equipo con el que vas a trabajar. Creo que en estos tiempos de teletrabajo es una buena manera porque ya no se puede hacer una reunión física con el equipo (reunión que por otra parte no servía de mucho porque todo el mundo intenta ser políticamente correcto y poco más)</p> </div> <div class="paragraph"> <p>Por el contrario la principal ventaja es que se han propiciado al menos 2-3 entrevistas para conocernos y una de ellas con temas tan diversos que se ha favorecido tanto el poder detectar si la persona se adaptaría al equipo como que la persona piense si podrá trabajar con el equipo. O esa es la idea</p> </div> </div> </div> (Mi) experiencia en la selección de personal técnico Static Site Estaciones de Servicio Jorge Aguilera 2020-08-22T00:00:00Z https://blog.jagedn.dev/blog/2020/estaciones-servicio-antora.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>El Ministerio de Industria y Consumo publica de forma diaria un dataset con los precios de todas las gasolineras de España. En este post voy a explicar cómo, de forma autónoma, se ejecuta un script que lo descarga y crea un site para poder navegar entre las más de 14.000 estaciones y consultar los precios del día.</p> </div> <div class="paragraph"> <p>El resultado final lo puedes ver aquí: <a href="https://estaciones-de-servicio.netlify.app/main/final/index.html" class="bare">https://estaciones-de-servicio.netlify.app/main/final/index.html</a></p> </div> <div class="dlist"> <dl> <dt class="hdlist1">NOTE</dt> <dd> <p>Tal vez te pueda interesar el post <a href="estaciones-servicio-bot.html" class="bare">estaciones-servicio-bot.html</a> donde detallo cómo hacer un bot de Telegram para consumir dichos datos.</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="open_data">Open Data</h2> <div class="sectionbody"> <div class="paragraph"> <p>El site se basa en un conjunto de datos abiertos del Ministerio de Industria y Consumo donde se muestran los precios de las estaciones de servicio de España: <a href="https://sedeaplicaciones.minetur.gob.es/ServiciosRESTCarburantes/PreciosCarburantes/EstacionesTerrestres/" class="bare">https://sedeaplicaciones.minetur.gob.es/ServiciosRESTCarburantes/PreciosCarburantes/EstacionesTerrestres/</a></p> </div> <div class="paragraph"> <p>En este xml (o json) se listan todas las estaciones con su nombre, dirección, marca, geoposición así como los diferentes precios para gasolina 95, 98, los diferentes tipos de diesel, bios, etc.</p> </div> <div class="paragraph"> <p>Estos precios se actualizan al menos una vez al día (realmente no recuerdo donde leí cuando se realiza, ni la periodicidad)</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>&lt;PreciosEESSTerrestres xmlns="http://schemas.datacontract.org/2004/07/ServiciosCarburantes" xmlns:i="http://www.w3.org/2001/XMLSchema-instance"&gt; &lt;Fecha&gt;06/08/2020 21:31:14&lt;/Fecha&gt; &lt;ListaEESSPrecio&gt; &lt;EESSPrecio&gt; &lt;C.P.&gt;02250&lt;/C.P.&gt; &lt;Dirección&gt;AVENIDA CASTILLA LA MANCHA, 26&lt;/Dirección&gt; &lt;Horario&gt;L-D: 07:00-22:00&lt;/Horario&gt; &lt;Latitud&gt;39,211417&lt;/Latitud&gt; &lt;Localidad&gt;ABENGIBRE&lt;/Localidad&gt; &lt;Longitud_x0020__x0028_WGS84_x0029_&gt;-1,539167&lt;/Longitud_x0020__x0028_WGS84_x0029_&gt; &lt;Margen&gt;D&lt;/Margen&gt; &lt;Municipio&gt;Abengibre&lt;/Municipio&gt; &lt;Precio_x0020_Biodiesel/&gt; &lt;Precio_x0020_Bioetanol/&gt; &lt;Precio_x0020_Gas_x0020_Natural_x0020_Comprimido/&gt; &lt;Precio_x0020_Gas_x0020_Natural_x0020_Licuado/&gt; &lt;Precio_x0020_Gases_x0020_licuados_x0020_del_x0020_petróleo/&gt; &lt;Precio_x0020_Gasoleo_x0020_A&gt;1,039&lt;/Precio_x0020_Gasoleo_x0020_A&gt; &lt;Precio_x0020_Gasoleo_x0020_B&gt;0,569&lt;/Precio_x0020_Gasoleo_x0020_B&gt; &lt;Precio_x0020_Gasoleo_x0020_Premium/&gt; &lt;Precio_x0020_Gasolina_x0020_95_x0020_E10/&gt; &lt;Precio_x0020_Gasolina_x0020_95_x0020_E5&gt;1,149&lt;/Precio_x0020_Gasolina_x0020_95_x0020_E5&gt; &lt;Precio_x0020_Gasolina_x0020_95_x0020_E5_x0020_Premium i:nil="true"/&gt; &lt;Precio_x0020_Gasolina_x0020_98_x0020_E10/&gt; &lt;Precio_x0020_Gasolina_x0020_98_x0020_E5/&gt; &lt;Precio_x0020_Hidrogeno/&gt; &lt;Provincia&gt;ALBACETE&lt;/Provincia&gt; &lt;Remisión&gt;dm&lt;/Remisión&gt; &lt;Rótulo&gt;Nº 10.935&lt;/Rótulo&gt; &lt;Tipo_x0020_Venta&gt;P&lt;/Tipo_x0020_Venta&gt; &lt;_x0025__x0020_BioEtanol&gt;0,0&lt;/_x0025__x0020_BioEtanol&gt; &lt;_x0025__x0020_Éster_x0020_metílico&gt;0,0&lt;/_x0025__x0020_Éster_x0020_metílico&gt; &lt;IDEESS&gt;4375&lt;/IDEESS&gt; &lt;IDMunicipio&gt;52&lt;/IDMunicipio&gt; &lt;IDProvincia&gt;02&lt;/IDProvincia&gt; &lt;IDCCAA&gt;07&lt;/IDCCAA&gt; &lt;/EESSPrecio&gt; &lt;!-- más estaciones--&gt; &lt;/ListaEESSPrecio&gt;</code></pre> </div> </div> <div class="paragraph"> <p>A diferencia del bot en este caso lo que nos interesa es organizar todas las estaciones por provincias y municipios y para cada una de ellas mostrar la dirección, un enlace a su ubicación y los diferentes precios que tiene (no todas tienen todos los tipos de carburante).</p> </div> <div class="paragraph"> <p>El objetivo va a ser generar un site de "puro HTML" de tal forma que pueda ser publicado en alguno de los numerosos servicios que ofrecen de forma gratuita su publicación, en nuestro caso Gitlab/Netlify (Github es otra opción pero no lo uso)</p> </div> </div> </div> <div class="sect1"> <h2 id="tools">Tools</h2> <div class="sectionbody"> <div class="paragraph"> <p>Para tener listo el site vamos a utilizar las siguientes herramientas. De todas ellas la que puede varíar en tu caso es la que te ayude a generar los ficheros partiendo de los datos, en mi caso un script de groovy.</p> </div> <div class="sect2"> <h3 id="groovy_script">Groovy Script</h3> <div class="paragraph"> <p>Gracias a que con Groovy es muy fácil descargar e interpretar un XML (o un JSON) así como trabajar con ficheros de texto, lo usaremos para particionar y generar los ficheros</p> </div> </div> <div class="sect2"> <h3 id="antoraasciidoctor">Antora/Asciidoctor</h3> <div class="paragraph"> <p>El script va a generar ficheros <code>adoc</code> (asciidoctor) que no es más que ficheros planos con un lenguaje de marcado que será interpretado por Antora para generar la versión HTML correspondiente</p> </div> <div class="paragraph"> <p>Baśicamente serán ficheros muy sencillos con un título para el nombre de la provincia, subtitulo para los municipios, apartados para las gasolineras, enlaces, etc.</p> </div> <div class="paragraph"> <p>Esta es la pieza fundamental para que funcione el sistema y la que nos va a marcar qué estructura de ficheros tenemos que generar así como una serie de configuración</p> </div> </div> <div class="sect2"> <h3 id="gitlab">Gitlab</h3> <div class="paragraph"> <p>El proyecto va a estar alojado en mi cuenta gratuita de Gitlab como repositorio git. Una de las características de Gitlab es que te permite ejecutar código en sus sistemas incluso de una forma recurrente mediante jobs programados lo cual nos va a servir para tener actualizado el site todos los días.</p> </div> </div> <div class="sect2"> <h3 id="netlify">Netlify</h3> <div class="paragraph"> <p>Gitlab nos permite publicar el contenido estático generado en el paso anterior pero para este post vamos a integrar el repositorio con otra herramienta con capa gratuita que permite de igual forma publicar contenido estático más alguna otra funcionalidad, que es Netlify (este paso te lo puedes saltar y utilizar Gitlab. La única diferencia es que Netlify a mi parecer tiene mejor velocidad de descarga)</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="preparación">Preparación</h2> <div class="sectionbody"> <div class="paragraph"> <p>En primer lugar es importante entender la estructura de directorios que requiere Antora así como alguno de los ficheros necesarios.</p> </div> <div class="paragraph"> <p>Antora espera una estructura similar a la que se muestra en la imagen:</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/diag-b8bfe90db36d2cdd516cd6d9f75da107.png" alt="Diagram" width="157" height="328"> </div> </div> <div class="paragraph"> <p>En primer lugar crearemos esta estructura de directorios y los ficheros excepto los que van en el directorio <code>pages</code> que serán creados por el script. Por ello este directorio se encuentra excluido en el .gitignore pues no hace falta versionarlos al cambiar cada vez que ejecutemos el script). Por la misma razón <code>nav.adoc</code> tampoco se versiona pues el script se encargará de crear la navegación.</p> </div> <div class="listingblock yml"> <div class="content"> <pre>name: main title: Estaciones de Servicio version: final nav: - modules/ROOT/nav.adoc</pre> </div> </div> <div class="paragraph"> <p>Este fichero le indica a Antora qué modulos queremos cargar, en nuestro caso únicamente el ROOT</p> </div> <div class="listingblock yml"> <div class="content"> <pre>site: title: Estaciones de Servicio url: https://estaciones-de-servicio.netlify.com start_page: main::index.adoc keys: google_analytics: 'UA-XXXXX-XX' content: sources: - url: ./ branches: HEAD start_path: docs ui: bundle: url: ui/ui.zip supplemental_files: antora-lunr/supplemental_ui output: clean: true dir: ./build destinations: - provider: archive asciidoc: extensions: - ./lib/tabs-block/extension.js</pre> </div> </div> <div class="paragraph"> <p>Este fichero es lo que en Antora se conoce como un playbook y sirve para indicarle de donde obtener los repositorios (Antora puede unir múltiples repositorios para generar un único site), la presentación a usar (ui.zip), extensiones, etc</p> </div> <div class="paragraph"> <p>En nuestro caso le estamos indicando que entre otras características utilice el directorio <code>docs</code> como origen para la documentación junto con una serie de extras que nos van a ayudar a que nuestro site sea más funcional como una extensión para mostrar multiples tabs, un buscador incluido (lunr)</p> </div> </div> </div> <div class="sect1"> <h2 id="script">Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Para generar las páginas que va a usar Antora como fuente, el script simplemente va a :</p> </div> <div class="ulist"> <ul> <li> <p>descargarse el XML y parsearlo. Con groovy esto se puede hacer con una simple linea</p> </li> </ul> </div> <div class="paragraph"> <p><code>new XmlParser().parseText(new InputStreamReader(url.toURL().openStream(), 'UTF-8').text).ListaEESSPrecio</code></p> </div> <div class="ulist"> <ul> <li> <p>recorrer cada estación, extraer la información de interés de cada una e ir añadiendolas a un "mapa de mapas" por provincia, municipios y localidades de tal forma que al terminar tenemos en memoria todas las estaciones agrupadas</p> </li> </ul> </div> <div class="paragraph"> <p><code>[ Albacete : [Abengibre: [ [ Estacion1:[ precio95:1.23, precio98:1.33] ] ] ] ]</code></p> </div> <div class="ulist"> <ul> <li> <p>utilizando este mapa, el script genera el fichero de navegación:</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="groovy">nav = new File('docs/modules/ROOT/nav.adoc') nav.text = "" map.each{ kvp -&gt; provincia = kvp.value nav &lt;&lt; "* xref:${kvp.key}.adoc[$provincia.name]\n" provincia.municipios.each{ kvm -&gt; municipio = kvm.value nav &lt;&lt; "** xref:${kvp.key}.adoc#${municipio.name.toLowerCase().replaceAll(' ','_')}[$municipio.name]\n" } }</code></pre> </div> </div> <div class="dlist"> <dl> <dt class="hdlist1">NOTE</dt> <dd> <p>Añadir líneas a un fichero de texto en groovy es tan fácil como <code>file &lt;&lt; "una cadena"</code></p> </dd> </dl> </div> <div class="paragraph"> <p>Básicamente indicamos que tendremos un fichero por cada provincia (01.adoc, 02.adoc, &#8230;&#8203;) y que dentro de él tendremos secciones con el nombre de cada municipio. Para facilitar la navegación usaremos el nombre del municipio en minúsculas y cambiaremos los espacios en blanco por guiones bajos</p> </div> <div class="paragraph"> <p>Lo que nos genera un fichero parecido a:</p> </div> <div class="listingblock"> <div class="title">nav.adoc</div> <div class="content"> <pre>* xref:02.adoc[ALBACETE] ** xref:02.adoc#abengibre[Abengibre] ** xref:02.adoc#albacete[Albacete] ... ** xref:50.adoc#villarroya_de_la_sierra[Villarroya de la Sierra] ** xref:50.adoc#zaragoza[Zaragoza] ** xref:50.adoc#zuera[Zuera]</pre> </div> </div> <div class="ulist"> <ul> <li> <p>después el script vuelve a recorrer el mapa para ir generando los ficheros de cada provincia:</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="groovy">map.each{ kvp -&gt; provincia = kvp.value file = new File("docs/modules/ROOT/pages/${kvp.key}.adoc") <i class="conum" data-value="1"></i><b>(1)</b> file.parentFile.mkdirs() file.text ="= $provincia.name\n:tabs:\n\n" <i class="conum" data-value="2"></i><b>(2)</b> ... }</code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>Creamos un fichero por provincia</td> </tr> <tr> <td><i class="conum" data-value="2"></i><b>2</b></td> <td>Lo inicializamos con una cabecera asciidoctor con su titulo y el atributo :tabs:</td> </tr> </table> </div> <div class="paragraph"> <p>Para cada provincia recorremos sus municipios y localidades</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="groovy">map.each{ kvp -&gt; ... provincia.municipios.each{ kvm -&gt; municipio = kvm.value file &lt;&lt; "[#${municipio.name.toLowerCase().replaceAll(' ','_')}]\n" file &lt;&lt; "== $municipio.name \n\n" municipio.localidades.each{ kvl -&gt; kvl.value.sort{it.direccion}.each{ estacion -&gt; file &lt;&lt; "=== $estacion.direccion \n\n" file &lt;&lt; "*$estacion.rotulo* $estacion.horario \n\n" file &lt;&lt; "https://www.openstreetmap.org/?mlat=$estacion.latitud&amp;mlon=$estacion.longitud#map=17/$estacion.latitud/$estacion.longitud[Ver en mapa,window=_blank]\n\n" file &lt;&lt; "[TIP]\n====\n" estacion.precios.findAll{ it.value }.each{ file &lt;&lt; "* _${it.key}_ a *${it.value}* €\n" } file &lt;&lt; "====\n\n" } } } ... }</code></pre> </div> </div> <div class="paragraph"> <p>Como se puede adivinar, simplemente vamos concatenando al fichero de la provincia texto en formato asciidoc hasta que llegamos a una estación donde volcamos sus datos.</p> </div> <div class="paragraph"> <p>Para cada provincia se genera un fichero similar a:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>= ARABA/ÁLAVA :tabs: [#alegría-dulantzi] == Alegría-Dulantzi === CALLE GASTEIZBIDEA 59 *ES DULANTZI REPSOL* L-D: 07:00-22:00 https://www.openstreetmap.org/?mlat=42.842917&amp;mlon=-2.519194#map=17/42.842917/-2.519194[Ver en mapa,window=_blank] [TIP] ==== * _95 E5_ a *1.239* € * _Gasoleo A_ a *1.139* € ==== (más estaciones)</code></pre> </div> </div> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>El script actual genera algo más de código por cada provincia como una serie de tabs con las estaciones más baratas al inicio del fichero. En este post no voy a explicarlo pero si te interesa es muy fácil de seguir.</p> <div class="ulist"> <ul> <li> <p>por último el script copia un fichero <code>index.adoc</code> que se encuentra en el raiz del proyecto al raiz del pages del módulo. De esta forma puedo cambiar la página principal sin liar más el script.</p> </li> </ul> </div> </dd> </dl> </div> <div class="paragraph"> <p>Para generar las páginas simplemente ejecuto:</p> </div> <div class="paragraph"> <p><code>groovy dump.groovy</code></p> </div> <div class="dlist"> <dl> <dt class="hdlist1">NOTE</dt> <dd> <p>Este script será ejecutado por el pipeline de Gitlab por lo que al final no necesitarías ni tener Groovy instalado en tu local, aunque sería bueno tenerlo para probarlo primero antes de pasar a publicarlo.</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="generar_el_site">Generar el site</h2> <div class="sectionbody"> <div class="paragraph"> <p>Una vez ejecutado el script y las páginas generadas podemos proceder a ejecutar Antora para que nos genere el site. Puedes instalarlo y ejecutarlo desde una consola o utilizar un docker-compose como el siguiente para evitarlo:</p> </div> <div class="paragraph"> <p>docker-compose.yml</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>version: "2.1" services: antora: image: "antora/antora" volumes: - .:/antora</code></pre> </div> </div> <div class="paragraph"> <p>y ejecutarlo mediante</p> </div> <div class="paragraph"> <p><code>docker-compose run antora estaciones.yml</code></p> </div> <div class="paragraph"> <p>Este docker usaría la imagen oficial de antora, básica pero suficiente para generar un site en el directorio <code>build</code> que podrías revisar con un navegador.</p> </div> <div class="paragraph"> <p>Sin embargo esta imagen no incluye ciertas extensiones que me interesan como el buscador javascript por lo que habría que instalarlo y configurarlo, así que yo me he creado mi propia imagen donde ya se encuentra instalado y este es el docker-compose que utilizo:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>version: "2.1" services: antora: image: "jagedn/antora-with-extensions" environment: - DOCSEARCH_ENABLED=true - DOCSEARCH_ENGINE=lunr - NODE_PATH="$$(yarn global dir)/node_modules" volumes: - .:/antora</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="ejecución_diaria">Ejecución diaria</h2> <div class="sectionbody"> <div class="paragraph"> <p>Como he comentado, una de las características de Gitlab es que puedes programar la ejecución de pipelines, no sólo cuando realizas cambios en el código y los subes al repositorio sino de forma programada.</p> </div> <div class="paragraph"> <p>Nuestro pipeline consistirá en 3 pasos consecutivos:</p> </div> <div class="listingblock"> <div class="title">gitlab-ci.yml</div> <div class="content"> <pre class="prettyprint highlight"><code>stages: - build - staging - deploy groovy: stage: build image: name: groovy:2.5.9 script: - groovy dump.groovy artifacts: paths: - docs antora: stage: staging image: name: jagedn/antora-with-extensions entrypoint: [/bin/sh, -c] variables: ASCIIDOC_COPY_TO_CLIPBOARD: "true" DOCSEARCH_ENABLED: "true" DOCSEARCH_ENGINE: "lunr" NODE_PATH: "$$(yarn global dir)/node_modules" dependencies: - groovy script: - antora --generator antora-site-generator-lunr estaciones.yml artifacts: paths: - build pages: stage: deploy dependencies: - antora script: - mkdir -p public - cp -R build/* public/ artifacts: paths: - public</code></pre> </div> </div> <div class="paragraph"> <p>Si todo va bien, Gitlab nos ofrecerá una url donde publicará el site generado por antora. En este caso en <a href="https://jorge-aguilera.gitlab.io/estaciones-de-servicio" class="bare">https://jorge-aguilera.gitlab.io/estaciones-de-servicio</a></p> </div> </div> </div> <div class="sect1"> <h2 id="netlify_2">Netlify</h2> <div class="sectionbody"> <div class="paragraph"> <p>Netlify es otro servicio de hosting con características muy interesantes que integra fácilmente con Gitlab (y otros) de tal forma que podemos delegar en este segundo la ejecución de nuestro pipeline mientras que utilizamos a Netlify como plataforma donde desplegarlo.</p> </div> <div class="paragraph"> <p>Para ello simplemente:</p> </div> <div class="ulist"> <ul> <li> <p>crearemos un proyecto en Netlify</p> </li> <li> <p>obtendremos su NETLIFY_SITE_ID</p> </li> <li> <p>desde la página del perfil crearemos un NETLIFY_AUTH_TOKEN</p> </li> <li> <p>crearemos en Gitlab dos variables de entorno nuevas en la seccion CD/CI con estos valores</p> </li> <li> <p>sustituiremos el último paso del fichero .gitlab-ci.yml por este otro (o si quieres publicar en los dos sitios lo puedes mantener, simplemente estarás publicando en los dos URLs a la vez)</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>netlify: stage: deploy image: node:10.15.3 script: - npm i -g netlify-cli - netlify deploy --site $NETLIFY_SITE_ID --auth $NETLIFY_AUTH_TOKEN --prod dependencies: - antora only: - master</code></pre> </div> </div> </div> </div> Partiendo de un XML, cómo crear un static site con los precios de las gasolineras en Antora Enviar alertas de Kibana a Telegram Jorge Aguilera 2020-08-15T00:00:00Z https://blog.jagedn.dev/blog/2020/kibana-telegram.html <div id="preamble"> <div class="sectionbody"> <div class="quoteblock"> <blockquote> Lo que no se define no se puede medir. Lo que no se mide, no se puede mejorar. Lo que no se mejora, se degrada siempre </blockquote> <div class="attribution"> &#8212; William Thomson Kelvin </div> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> Este post no es continuación de <a href="logs-metricas.html" class="bare">logs-metricas.html</a> pero están muy relacionados. De hecho sin el primero no se me habría ocurrido este otro, sin embargo como ya he dicho son independientes. </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="kibana_elk">Kibana (ELK)</h2> <div class="sectionbody"> <div class="paragraph"> <p><em>Kibana es una interfaz de usuario gratuita y abierta que te permite visualizar los datos de Elasticsearch y navegar en el Elastic Stack. Realiza lo que desees, desde rastrear la carga de búsqueda hasta comprender la forma en que las solicitudes fluyen por tus apps</em> (<a href="https://www.elastic.co/es/kibana" class="bare">https://www.elastic.co/es/kibana</a>)</p> </div> <div class="paragraph"> <p>Kibana es el interface que usamos para visualizar los datos (como por ejemplo logs) que Elasticsearch ingesta de diferentes fuentes.</p> </div> <div class="paragraph"> <p>Un uso típico puede ser el ver de forma centralizada todos los logs que va generando un stack de servicios de tal forma que podamos dar un contexto único a los mismos, realizar búsquedas complejas e incluso diseñar diagramas explotando dichos datos. Así en el post <a href="logs-metricas.html" class="bare">logs-metricas.html</a> contaba cómo hacer una anotación para servicios Grails tal que añadieran información en el contexto del log sobre la duración del método junto con los parámetros recibidos en el mismo. Esta meta-información puede llegar al Kibana de tal forma que no sólo puedas realizar búsquedas en el texto sino en esta meta-información.</p> </div> <div class="paragraph"> <p>Visualmente, esto sería un ejemplo de una línea de log en la consola web de Kibana junto con su meta-información:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>t @containerId rm26xpdn3qyx4i0ugphtplq8o/43b08f1b4da4 t @id 35625187335574879357932181753924573842110613149578166277 t @log_group docker-logs t @log_stream service_1.2.rm26xpdn3qyx4i0ugphtplq8o/43b08f1b4da4 t @message {"timestamp":"2020-08-15T10:50:49.748+0000","level":"INFO","thread":"http-apr-8080-exec-4","logger":"{...}"} t @owner 602122916959 t @payload.className com.puravida.service.HelloController # @payload.duration 1,680 t @payload.methodName hello t @replica 2 t @service service_1 @timestamp Aug 15, 2020 @ 10:50:49.748 t _id 35625187335574879357932181753924573842110613149578166277 t _index cwl-2020.08.15 # _score - t _type docker-logs-production t context default t correlationId 8f9b465a-d08c-4d95-b65b-82398d3dc127 t level INFO t logger com.puravida.service.HelloController t message com.puravida.service.HelloController.hello: duration=1680 ms; t thread http-apr-8080-exec-4 timestamp Aug 15, 2020 @ 10:50:49.748 t userId - not logged -</code></pre> </div> </div> <div class="paragraph"> <p>Como puedes ver en este registro de Elasticsearch no sólo tenemos el <code>message</code> generado sino una serie de meta-campos extras como el <em>@payload</em> generado por nuestra anotación.</p> </div> <div class="paragraph"> <p>Gracias al motor de búsqueda de Elasticsearch desde Kibana puedes filtrar logs que contengan un valor de interés en estos metacampos, por ejemplo puedes filtrar:</p> </div> <div class="paragraph"> <p><code>@payload.className:HelloController</code></p> </div> <div class="paragraph"> <p>y obtener todos los logs generados por este controller y extraer de ellos el campo <code>@payload.duration</code></p> </div> <div class="paragraph"> <p>Realizar gráficas que usen este campo junto, en un intervalo de tiempo definido en <em>@timestamp</em> es cuestión de minutos.</p> </div> </div> </div> <div class="sect1"> <h2 id="telegram">Telegram</h2> <div class="sectionbody"> <div class="paragraph"> <p>A día de hoy asumo que prácticamente todo el mundo conoce Telegram (si estás leyendo este post probablemente es porque incluso eres usuario de este sistema de mensajería).</p> </div> <div class="paragraph"> <p>Una de las características de Telegram sobre otros sistemas es la posibilidad de crear canales y bots de forma simple (y gratuita) incluso privados.</p> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> En <a href="https://core.telegram.org/bots#6-botfather" class="bare">https://core.telegram.org/bots#6-botfather</a> tienes la documentación oficial sobre cómo crear bots </td> </tr> </table> </div> <div class="paragraph"> <p>En primer lugar (y siendo usuarios de esta plataforma) crearemos un <em>bot</em> mediante el <em>BotFather</em> (el bot de Telegram que nos sirve para crear y gestionar nuestros bots):</p> </div> <div class="ulist"> <ul> <li> <p>buscar desde la aplicación "botfather" y comenzar un diálogo con él</p> </li> <li> <p>crear un bot siguiendo los pasos (dar un nombre y un id terminado en "bot" básicamente)</p> </li> <li> <p>obtener el <code>token</code>. No hace falta guardarlo en lugar seguro pues podremos consultarlo en cualquier momento, pero no lo compartas más que con gente de confianza y ojo <strong>no guardarlo en un repositorio git público</strong>.</p> </li> </ul> </div> <div class="paragraph"> <p>En segundo lugar crearemos un canal privado, por ejemplo "Puravida Alerts" y añadir al bot como administrador del canal . Puedes restringir sus permisos para que solamente pueda publicar mensajes. Así mismo hay que añadir a otros usuarios que puedan estar interesados en las alarmas.</p> </div> <div class="paragraph"> <p>Como el canal será privado (a no ser que quieras que cualquiera pueda suscribirse y ver las alertas) necesitaremos conocer su ID, que a diferencia del público donde es el @nombre_del_canal. Para ello tendremos que usar el interface web de Telegram (desconozco si se puede con el móvil, yo no lo he conseguido). Simplemente navegaremos hasta el canal creado con el navegador y nos fijaremos en la url que tiene asignada el canal:</p> </div> <div class="paragraph"> <p><code><a href="https://web.telegram.org/#/im?p=cXXXXXXX_yyyyyyyyy" class="bare">https://web.telegram.org/#/im?p=cXXXXXXX_yyyyyyyyy</a></code></p> </div> <div class="paragraph"> <p>El id del canal será "XXXXXXX", es decir el número comprendido entre <code>c</code> y <code>_</code> en la URL</p> </div> </div> </div> <div class="sect1"> <h2 id="alertas">Alertas</h2> <div class="sectionbody"> <div class="paragraph"> <p>El stack ELK (Kibana+Elasticsearch) cuenta con un ecosistema de plugins bastante extenso del cual vamos a usar para las alarmas el de <strong>opendistro</strong> (<a href="https://opendistro.github.io/for-elasticsearch/" class="bare">https://opendistro.github.io/for-elasticsearch/</a>)</p> </div> <div class="paragraph"> <p>Si quieres probarlo primero antes de instalarlo en tu stack, puedes usar este docker-compose como punto de partida:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code><i class="conum" data-value="1"></i><b>(1)</b> version: '3' services: odfe-node1: image: amazon/opendistro-for-elasticsearch:1.9.0 container_name: odfe-node1 environment: - cluster.name=odfe-cluster - node.name=odfe-node1 - discovery.seed_hosts=odfe-node1,odfe-node2 - cluster.initial_master_nodes=odfe-node1,odfe-node2 - bootstrap.memory_lock=true # along with the memlock settings below, disables swapping - "ES_JAVA_OPTS=-Xms512m -Xmx512m" # minimum and maximum Java heap size, recommend setting both to 50% of system RAM ulimits: memlock: soft: -1 hard: -1 nofile: soft: 65536 # maximum number of open files for the Elasticsearch user, set to at least 65536 on modern systems hard: 65536 volumes: - odfe-data1:/usr/share/elasticsearch/data ports: - 9200:9200 - 9600:9600 # required for Performance Analyzer networks: - odfe-net odfe-node2: image: amazon/opendistro-for-elasticsearch:1.9.0 container_name: odfe-node2 environment: - cluster.name=odfe-cluster - node.name=odfe-node2 - discovery.seed_hosts=odfe-node1,odfe-node2 - cluster.initial_master_nodes=odfe-node1,odfe-node2 - bootstrap.memory_lock=true - "ES_JAVA_OPTS=-Xms512m -Xmx512m" ulimits: memlock: soft: -1 hard: -1 nofile: soft: 65536 hard: 65536 volumes: - odfe-data2:/usr/share/elasticsearch/data networks: - odfe-net kibana: image: amazon/opendistro-for-elasticsearch-kibana:1.9.0 container_name: odfe-kibana ports: - 5601:5601 expose: - "5601" environment: ELASTICSEARCH_URL: https://odfe-node1:9200 ELASTICSEARCH_HOSTS: https://odfe-node1:9200 networks: - odfe-net volumes: odfe-data1: odfe-data2: networks: odfe-net:</code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>Sí, es el mismo que viene en la web de opendistro pero así hago este post más extenso</td> </tr> </table> </div> <div class="paragraph"> <p>Básicamente levanta dos nodos de Elasticsearch y uno de Kibana con los plugins configurados. Una vez levantado puedes acceder a <code>localhost:9200</code> y usar <code>admin:admin</code> para logearte.</p> </div> <div class="paragraph"> <p>La idea principal va a consistir en crear:</p> </div> <div class="ulist"> <ul> <li> <p>un <em>monitor</em> que inspeccione los registros cada cierto tiempo</p> </li> <li> <p>un <em>trigger</em> que se ejecute dentro de este <em>monitor</em> cuando los registros cumplan una condicion</p> </li> <li> <p>un <em>destination</em> a donde enviar la alarma</p> </li> </ul> </div> <div class="sect2"> <h3 id="destination">Destination</h3> <div class="paragraph"> <p>En primer lugar crearemos un <em>destination</em> (objetivo principal de este post) <code>Puravida Telegram</code>:</p> </div> <div class="ulist"> <ul> <li> <p>name: Puravida Telegram</p> </li> <li> <p>type: Custom</p> </li> <li> <p>custom attributes:</p> <div class="ulist"> <ul> <li> <p>host: api.telegram.org</p> </li> <li> <p>path: botELTOKENDELBOT-INCLUIDO-LOS-DOS-PUNTOS/sendMessage</p> </li> </ul> </div> </li> <li> <p>header information:</p> <div class="ulist"> <ul> <li> <p>Content-Type: application/json</p> </li> </ul> </div> </li> </ul> </div> <div class="paragraph"> <p>Es importante escribir bien la url: - texto fijo "bot" - el token obtenido con BotFather incluidos los dos puntos, tal que XXXXXXX:YYYYYYYYYY - terminar en <em>/sendMessage</em></p> </div> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="Warning"></i> </td> <td class="content"> Así mismo es necesario añadir un header con el Content-Type como application/json </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="monitor">Monitor</h3> <div class="paragraph"> <p>A continuación crearemos un <em>Monitor</em></p> </div> <div class="ulist"> <ul> <li> <p>name: Slow HelloWorld</p> </li> <li> <p>schedule: every 10 mnts</p> </li> </ul> </div> <div class="paragraph"> <p>y usando el interface visual definiremos el <em>monitor</em>:</p> </div> <div class="ulist"> <ul> <li> <p>index: cwl-* (o el que hayas definido)</p> </li> <li> <p>time field: @timestamp</p> </li> </ul> </div> <div class="paragraph"> <p>crearemos una expresión para indicar el filtro a aplicar sobre los documentos:</p> </div> <div class="paragraph"> <p><span class="image"><img src="/images/2020/elk/kibana-monitor.png" alt="kibana monitor"></span></p> </div> <div class="paragraph"> <p>En este ejemplo le estamos indicando que seleccione la duración máxima del <em>@payload.duration</em> en los registros de la última hora.</p> </div> </div> <div class="sect2"> <h3 id="trigger">Trigger</h3> <div class="paragraph"> <p>Podemos definir tantos triggers como queramos con diferente severidad y a diferentes <em>destinations</em>. En nuestro caso vamos a crear un trigger de severidad 1 al <code>PuraVida Telegram</code> <em>destination</em> creado anteriormente</p> </div> <div class="paragraph"> <p>Lo único que tenemos que hacer es darle un nombre, establecer una severidad e indicar la condición de disparo, por ejemplo:</p> </div> <div class="paragraph"> <p><code>IS ABOVE 500</code></p> </div> <div class="paragraph"> <p>lo cual enviará la alarma cuando la ejecución de <code>HelloController</code> sea superior a 500 mills</p> </div> <div class="paragraph"> <p>Añadiremos un <code>action</code> indicando un <em>name</em> a usar y seleccionando el <em>destination</em> <code>PuraVida Telegram</code>. Así mismo nos interesará personalizar el mensaje a enviar incluyendo por ejemplo la duración que ha hecho disparar la alarma por lo que cambiaremos el texto propuesto por defecto:</p> </div> <div class="listingblock"> <div class="title">Message</div> <div class="content"> <pre class="prettyprint highlight"><code>{ "chat_id":"-100EL_ID_DEL_CHAT", "text": "{{ctx.monitor.name}} alert\n Some HelloWorld takes {{#ctx.results}}{{#aggregations}}{{when.value}}{{/aggregations}}{{/ctx.results}} millisecs to be completed" }</code></pre> </div> </div> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="Warning"></i> </td> <td class="content"> Fíjate que el canal se compone de <code>-100</code> y el id extraído de la URL del mismo </td> </tr> </table> </div> <div class="paragraph"> <p>Mediante el uso de <code>{{`y `}}</code> (handlebars) podremos incluir información relativa al evento. En este caso vamos a enviar el valor del <code>aggregation: when</code></p> </div> <div class="paragraph"> <p>Para otro tipo de alarmas tienes que buscar qué información puedes extraer del contexto, básicamente inspeccionando la propiedad <code>hits</code> del mismo.</p> </div> <div class="paragraph"> <p>Desde esta consola puedes realizar una prueba de envío usando el enlace que aparece debajo <code>Send test message</code>. Si todo está bien configurado recibirás una notificación en el canal indicado.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="conclusión">Conclusión</h2> <div class="sectionbody"> <div class="paragraph"> <p>Si todo lo anterior ha ido correctamente a partir de ahora tendrás un job que se ejecutará según le hayas programado y si se cumple alguna de las condiciones impuestas recibirás un mensaje en el canal.</p> </div> <div class="paragraph"> <p>Obviamente el <em>destination</em> puede ser un canal de #Slack por ejemplo, pero con los cientos de canales que tengo abiertos ahí al final no les presto atención a ninguno.</p> </div> </div> </div> <div class="sect1"> <h2 id="todo">TODO</h2> <div class="sectionbody"> <div class="paragraph"> <p>Con el API de Telegram es muy fácil enviar stickers así que me anoto como tarea pendiente en lugar de enviar un mensaje de texto, definir varios niveles de criticidad y enviar un sticker diferente para cada nivel</p> </div> </div> </div> Cómo enviar alertas de Kibana a un canal de Telegram Bot Estaciones de Servicio Jorge Aguilera 2020-08-06T00:00:00Z https://blog.jagedn.dev/blog/2020/estaciones-servicio-bot.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>El bot "EstacionesServico" es un bot de Telegram que te permite saber el precio de la gasolinera más cercana, así como ubicarla en un mapa además de recibir una notificación si cambia el precio de la gasolinera que marques como favorita.</p> </div> <div class="paragraph"> <p>En este post voy a destripar (a grandes rasgos) cómo funciona el bot por si te da alguna idea de cómo hacer el tuyo o algún otro caso de uso de los datos.</p> </div> </div> </div> <div class="sect1"> <h2 id="open_data">Open Data</h2> <div class="sectionbody"> <div class="paragraph"> <p>El bot se basa en un conjunto de datos abiertos del Ministerio de Industria y Consumo donde se muestran los precios de las estaciones de servicio de España: <a href="https://sedeaplicaciones.minetur.gob.es/ServiciosRESTCarburantes/PreciosCarburantes/EstacionesTerrestres/" class="bare">https://sedeaplicaciones.minetur.gob.es/ServiciosRESTCarburantes/PreciosCarburantes/EstacionesTerrestres/</a></p> </div> <div class="paragraph"> <p>En este xml (o json) se listan todas las estaciones con su nombre, dirección, marca, geoposición así como los diferentes precios para gasolina 95, 98, los diferentes tipos de diesel, bios, etc.</p> </div> <div class="paragraph"> <p>Estos precios se actualizan al menos una vez al día (realmente no recuerdo donde leí cúando se realiza ni la periodicidad)</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>&lt;PreciosEESSTerrestres xmlns="http://schemas.datacontract.org/2004/07/ServiciosCarburantes" xmlns:i="http://www.w3.org/2001/XMLSchema-instance"&gt; &lt;Fecha&gt;06/08/2020 21:31:14&lt;/Fecha&gt; &lt;ListaEESSPrecio&gt; &lt;EESSPrecio&gt; &lt;C.P.&gt;02250&lt;/C.P.&gt; &lt;Dirección&gt;AVENIDA CASTILLA LA MANCHA, 26&lt;/Dirección&gt; &lt;Horario&gt;L-D: 07:00-22:00&lt;/Horario&gt; &lt;Latitud&gt;39,211417&lt;/Latitud&gt; &lt;Localidad&gt;ABENGIBRE&lt;/Localidad&gt; &lt;Longitud_x0020__x0028_WGS84_x0029_&gt;-1,539167&lt;/Longitud_x0020__x0028_WGS84_x0029_&gt; &lt;Margen&gt;D&lt;/Margen&gt; &lt;Municipio&gt;Abengibre&lt;/Municipio&gt; &lt;Precio_x0020_Biodiesel/&gt; &lt;Precio_x0020_Bioetanol/&gt; &lt;Precio_x0020_Gas_x0020_Natural_x0020_Comprimido/&gt; &lt;Precio_x0020_Gas_x0020_Natural_x0020_Licuado/&gt; &lt;Precio_x0020_Gases_x0020_licuados_x0020_del_x0020_petróleo/&gt; &lt;Precio_x0020_Gasoleo_x0020_A&gt;1,039&lt;/Precio_x0020_Gasoleo_x0020_A&gt; &lt;Precio_x0020_Gasoleo_x0020_B&gt;0,569&lt;/Precio_x0020_Gasoleo_x0020_B&gt; &lt;Precio_x0020_Gasoleo_x0020_Premium/&gt; &lt;Precio_x0020_Gasolina_x0020_95_x0020_E10/&gt; &lt;Precio_x0020_Gasolina_x0020_95_x0020_E5&gt;1,149&lt;/Precio_x0020_Gasolina_x0020_95_x0020_E5&gt; &lt;Precio_x0020_Gasolina_x0020_95_x0020_E5_x0020_Premium i:nil="true"/&gt; &lt;Precio_x0020_Gasolina_x0020_98_x0020_E10/&gt; &lt;Precio_x0020_Gasolina_x0020_98_x0020_E5/&gt; &lt;Precio_x0020_Hidrogeno/&gt; &lt;Provincia&gt;ALBACETE&lt;/Provincia&gt; &lt;Remisión&gt;dm&lt;/Remisión&gt; &lt;Rótulo&gt;Nº 10.935&lt;/Rótulo&gt; &lt;Tipo_x0020_Venta&gt;P&lt;/Tipo_x0020_Venta&gt; &lt;_x0025__x0020_BioEtanol&gt;0,0&lt;/_x0025__x0020_BioEtanol&gt; &lt;_x0025__x0020_Éster_x0020_metílico&gt;0,0&lt;/_x0025__x0020_Éster_x0020_metílico&gt; &lt;IDEESS&gt;4375&lt;/IDEESS&gt; &lt;IDMunicipio&gt;52&lt;/IDMunicipio&gt; &lt;IDProvincia&gt;02&lt;/IDProvincia&gt; &lt;IDCCAA&gt;07&lt;/IDCCAA&gt; &lt;/EESSPrecio&gt; &lt;!-- unas 10500 estaciones--&gt; &lt;/ListaEESSPrecio&gt;</code></pre> </div> </div> <div class="paragraph"> <p>Como puedes ver hay bastante información pero la que le interesa al bot son básicamente los diferentes precios, el nombre y la latitud+longitud</p> </div> </div> </div> <div class="sect1"> <h2 id="parseo">Parseo</h2> <div class="sectionbody"> <div class="paragraph"> <p>El bot al arrancar se descarga el xml y lo parsea. Como utilizo Groovy, el parseo de un XML o un JSON es inmediato. Además cuenta con clases que permiten realizar el parseo de ficheros tan grandes sin consumir muchos recursos. Así mismo, cada hora, realiza una actualización del fichero volviendoselo a bajar.</p> </div> <div class="paragraph"> <p>Para poder disponer de los precios de forma inmediata se mantiene una lista en memoria con los precios de cada estación.</p> </div> <div class="paragraph"> <p>Esta parte es fundamental según diseñes tu bot. Si diseñas un bot stateless deberás contar con algún proceso que realize este parseo y te deje preparados los datos de alguna forma más óptima. Por ejemplo una versión de este bot la hice en Google Cloud Run y aquí el tiempo de ejecución del bot es importante pues no puedes exceder de un tiempo determinado (y además si tu bot tiene muchas visitas podrias sobrepasar la capa generosa grautita de Google)</p> </div> <div class="paragraph"> <p>En mi caso, como el bot va a estar desplegado en un servicio que me deja correr la aplicación 24h puedo permitirme el mantenerla en memoria.</p> </div> </div> </div> <div class="sect1"> <h2 id="sesión">Sesión</h2> <div class="sectionbody"> <div class="paragraph"> <p>Otra de las características de este bot es que mantiene una sesión por cada usuario con el que dialoga para poder saber qué tipo de carburante usa así como la estación favorita y el precio último para poder avisarle de cambios en el mismo.</p> </div> <div class="paragraph"> <p>La persistencia de las sesiones en este caso es una simple carpeta de un volumen persistente. La versión Google Cloud Run usaba por ejemplo un Datastore de Google, pero también se podría usar otras soluciones de base de datos como un mysql u otros servicios con capa gratuita como FaunaDB.</p> </div> <div class="paragraph"> <p>Sin embargo una vez más el servicio donde se encuentra desplegado me permite crear volúmenes persistentes de tal forma que los datos no se pierden aunque destruya el contenedor (para desplegar nuevas versiones por ejemplo). Así que en este caso la persistencia es un fichero por cada chat con el que el bot dialoga</p> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> Aunque Telegram ofrece en el api conocer algunos datos del usuario en este caso prefiero NO guardar ningún dato que no sea imprescindible y que mantenga el ananimato del usuario. Así simplemente guardo el id del chat (que no del usuario) así como el id de la gasolinera, el tipo y el precio del carburante elegido. </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="diálogo">Diálogo</h2> <div class="sectionbody"> <div class="paragraph"> <p>Cada vez que el usuario interacciona con el bot a través de Telegram, recibimos un json mediante un POST al controller que hayamos configurado.</p> </div> <div class="paragraph"> <p>En este json viene o bien el texto que ha introducido el usuario o bien datos asociados a cada botón que hayamos mostrado o bien un mensaje con la localización del usuario (cuando este la envía usando el clip del móvil)</p> </div> <div class="paragraph"> <p>Básicamente los comandos que acepta el bot son:</p> </div> <div class="ulist"> <ul> <li> <p>/start, inicio del diálogo. Preparamos un fichero <code>chat_id</code> para mantener la sesion</p> </li> <li> <p>/carburante , enviamos un teclado con los diferentes tipos de carburante admitidos</p> </li> <li> <p>/favorita, muestra el precio actual de la estación guardadas en la sesion</p> </li> </ul> </div> <div class="paragraph"> <p>Así mismo mediante los datos asociados a los botones de teclado podemos recibir del usuario:</p> </div> <div class="ulist"> <ul> <li> <p>info_estacion xxxxx, cuando el usuario ha seleccionado la estación XXXX la buscamos y mostramos su precio</p> </li> <li> <p>send_localizacion xxxxx, cuando el usuario selecciona "ver en mapa" la estaacion XXXXX buscamos sus coordenadas y le indicamos al movil que abra un mapa con las mismas</p> </li> <li> <p>save_estacaion xxxx, actualizamos la sesion del usuario con el id de la estacion</p> </li> <li> <p>algunas otras como <code>back</code> y <code>cancel</code> para gestionar los menús emergentes</p> </li> </ul> </div> <div class="paragraph"> <p>Por su parte cuando el usuario nos envia su localización, lo recibimos en una estructura del mensaje y procedemos a actualizar la sesion con estas coordenadas.</p> </div> <div class="paragraph"> <p>Así cuando el bot recibe un mensaje y dispone de una estación o localizacion así como un carburante de interés para el usuario puede realizar la búsqueda y filtrar aquellas estaciones de interés</p> </div> </div> </div> <div class="sect1"> <h2 id="búsqueda_y_filtrado">Búsqueda y filtrado</h2> <div class="sectionbody"> <div class="paragraph"> <p>La búsqueda de estaciones de interes es realmente fácil si sabemos cómo calcular la distancia esntre dos puntos geográficos:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>static float metersTo(float lat1, float lng1, float lat2, float lng2) { double radioTierra = 6371; double dLat = Math.toRadians(lat2 - lat1); double dLng = Math.toRadians(lng2 - lng1); double sindLat = Math.sin(dLat / 2); double sindLng = Math.sin(dLng / 2); double va1 = Math.pow(sindLat, 2) + Math.pow(sindLng, 2) * Math.cos(Math.toRadians(lat1)) * Math.cos(Math.toRadians(lat2)); double va2 = 2 * Math.atan2(Math.sqrt(va1), Math.sqrt(1 - va1)); double meters = radioTierra * va2; meters as float; }</code></pre> </div> </div> <div class="paragraph"> <p>Básicamente el servicio de búsqueda recibe unas coordenadas de donde se encuentra el usuario así que ordena la base de datos (una lista en memoria) en función de la distancia a las mismas de cada gasolinera y se queda con las n primeras a las que ordena por el precio de interés más barato</p> </div> </div> </div> <div class="sect1"> <h2 id="chequeo_y_notificación">Chequeo y notificación</h2> <div class="sectionbody"> <div class="paragraph"> <p>Para realizar un chequeo diario se podía haber creado un Job en la propia aplicación que se ejecutara una vez al día. Sin embargo me pareció más interesante tener un <code>endpoint</code> al que invocar para que realizar la comprobación. Este endpoint puede recibir un id de sessión y realizar el chequeo sólo para esta (útil para el modo debug o si hubiera un plan premium por ejemplo) o si no recibe sesion realiza el chequeo para todas.</p> </div> <div class="paragraph"> <p>El chequeo es simplemente para cada estación comprobar el último precio guardado en cada sesioón con el precio de la base de datos y enviar un mensaje al chat del usuario</p> </div> </div> </div> <div class="sect1"> <h2 id="tecnología">Tecnología</h2> <div class="sectionbody"> <div class="paragraph"> <p>Para este bot he usado</p> </div> <div class="ulist"> <ul> <li> <p>groovy, como lenguaje de programación. Soy un fanático de este lenguaje y la facilidad de parsear xml es un plus. La performance y el compilado estático que tienen generan una aplicación bastante ligera y funcional.</p> </li> <li> <p>Micronaut, como framework de desarrollo. La facilidad para crear controllers, services, etc es increíble. El mismo bot lo he desplegado en Heroku, Google AppEngine (Flex), Kubernetes o Google Cloud Run (con ligeras adaptaciones)</p> </li> <li> <p>Kubernetes. Las primeras versiones eran un simple Docker corriendo en Heroku pero tras descubrir Okteto y su SAAS para desplegar pequeños proyectos la adaptación a un kubernetes sencillo fue muy fácil y así de paso aprendo algo de esta tecnología</p> </li> </ul> </div> <div class="paragraph"> <p>Obviamente, estas son las herramientas que yo he elegido por mis motivos, pero no son las únicas.</p> </div> </div> </div> Destripando el bot de estaciones de servicio PlantUML y C4 Jorge Aguilera 2020-07-18T00:00:00Z https://blog.jagedn.dev/blog/2020/plantuml-c4.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Desde hace muchos años, el mundo del desarrollo del software cuenta con lenguajes de modelado de sistemas, tipo UML, ArchiMate o SysML, usados para definir la arquitectura mediante diagramas que ayuden a la comprensión del mismo. Sin embargo en la práctica (al menos la que yo he vivido) poca gente conoce y mucha menos usa algunos de estos lenguajes. Probablemente son tan completos que al final resultan demasiado complejos y con demasiados detalles por lo que se termina optando por diagramas con solo cajas y líneas sin mucho sentido e incongruentes entre sí.</p> </div> </div> </div> <div class="sect1"> <h2 id="c4">C4</h2> <div class="sectionbody"> <div class="paragraph"> <p>El modelo C4 pretende simplificar la forma de explicar la arquitectura software mediante una "aproximación" al detalle dividida en 4 pasos, o zooms:</p> </div> <div class="ulist"> <ul> <li> <p>Contexto</p> </li> <li> <p>Contenedores (nada que ver con Docker)</p> </li> <li> <p>Componentes</p> </li> <li> <p>Código</p> </li> </ul> </div> <div class="paragraph"> <p>Podemos ver el primer nivel, Contexto, como el diagrama que representa al más alto nivel la solución que tratamos de explicar. A su vez, el siguiente nivel de Contenedores (repetimos, nada que ver con contenedores Docker) muestra bloques software de alto nivel mientras que el de Componentes explica contenedor a contenedor qué partes componen cada uno. Por último quien busca el detalle más exhaustivo acude al diagrama de Código donde podemos representar las clases, interfaces, etc y sus relaciones internas.</p> </div> <div class="imageblock"> <div class="content"> <img src="https://c4model.com/img/c4-overview.png" alt="c4 overview"> </div> </div> <div class="paragraph"> <p>C4 busca la simplicidad así que trabaja simplemente con:</p> </div> <div class="ulist"> <ul> <li> <p>Person, el típico actor, role, persona, etc en definitiva un humano usando el software</p> </li> <li> <p>Contenedor, entendido como una aplicación o una base de datos. Algo que tiene que se tiene que ejecutar, por ejemplo: un war corriendo en un Tomcat o un Node, una aplicación que se ejecuta en el desktop del cliente, una base de datos o un simple script.</p> </li> <li> <p>Componente, en este contexto se entiende como un grupo de funcionalidades relacionadas con un interface común. Lo normal es que un conjunto de componentes que comparten un contenedor se ejecutan en el mismo espacio de trabajo</p> </li> </ul> </div> <div class="paragraph"> <p>En este post vamos a ver cómo podemos aplicar este modelo en nuestra documentación usando PlantUML (y/o Asciidoctor).</p> </div> </div> </div> <div class="sect1"> <h2 id="plantuml">PlantUML</h2> <div class="sectionbody"> <div class="paragraph"> <p>PlantUML es una herramienta para generar diagramas de software (y otros) partiendo de texto. La idea es muy potente porque te permite tener tus diagramas versionados como si fueran parte del código pudiendo versionarlos en un repositorio, fomentar la revisión, etc. Unido a herramientas como Asciidoctor, donde tu documentación sigue el mismo principio de ser texto y que la herramienta genere el resultado visual, disponemos de una forma cómoda y potente de tener nuestra documentación al día y visualmente atractiva.</p> </div> <div class="paragraph"> <p>PlantUML (<a href="https://www.plantuml.com" class="bare">https://www.plantuml.com</a>) te permite generar diagramas:</p> </div> <div class="ulist"> <ul> <li> <p>de clases</p> </li> <li> <p>de actividad</p> </li> <li> <p>secuencia</p> </li> <li> <p>componentes</p> </li> <li> <p>etc</p> </li> </ul> </div> <div class="paragraph"> <p>Así mismo cuenta con un sistema para poder extender sus capacidades pudiendo incluir iconos, otros tipos de diagramas, etc que es lo que vamos a usar en este post para demostrar cómo documentar una arquitectura software con C4.</p> </div> <div class="paragraph"> <p>Básicamente la idea es que puedas adjuntar junto a tus explicaciones en Asciidoctor, bloques de texto como los que se muestran a continuación, de tal forma que no necesites herramientas externas ni incluir imágenes que no puedas volver a editar cuando quieras añadir o quitar información.</p> </div> </div> </div> <div class="sect1"> <h2 id="contexto">Contexto</h2> <div class="sectionbody"> <div class="paragraph"> <p>El primer diagrama que generaremos es un diagrama de Contexto donde mostraremos la foto general sin mucho detalle. Mostraremos las Persons principales así como sistemas externos. En este diagrama no buscamos mostrar tecnología, sino relaciones entre las personas y los sistemas</p> </div> <div class="listingblock"> <div class="title">context.adoc</div> <div class="content"> <pre class="prettyprint highlight"><code>[plantuml] ---- !include &lt;c4/C4_Context.puml&gt; !include &lt;office/Users/user.puml&gt; !include &lt;office/Users/mobile_user.puml&gt; title Te lo traigo de mi Pueblo LAYOUT_TOP_DOWN LAYOUT_WITH_LEGEND() Person(customer, "&lt;$user&gt;\nCliente", "Un cliente de TelotraigodemiPueblo.") Enterprise_Boundary(c0, "Te lo traigo de mi Pueblo") { Person(csa, "&lt;$mobile_user&gt;\nCustomer Service Agent", "Help Desk.") System(ecommerce, "E-commerce System", "Registro, planificacion y suscripcion.") } System_Ext(banco, "PasarelaPago", "Pagos de pedidos.") Rel_D(customer, csa, "Soporte", "Telefono") Rel_D(customer, ecommerce, "Crea viajes y realiza pedidos") Rel_D(ecommerce, banco, "Procesa pago") ----</code></pre> </div> </div> <div class="imageblock"> <div class="content"> <img src="/images/context.png" alt="Diagram" width="490" height="736"> </div> <div class="title">Figure 1. Context</div> </div> <div class="paragraph"> <p>En el diagrama de contexto simplemente reflejamos Personas (Cliente y Help Desk) e indicamos qué partes pertenecen al dominio a representar y cuales son externas ( <code>System</code> vs <code>System_Ext</code> )</p> </div> <div class="paragraph"> <p>La extensión nos permite de forma muy simple indicar cómo queremos ubicar los elementos entre sí: <code>Rel(a,b)</code> una relación entre a y b normal, <code>Rel_D(a,b)</code> una relación top-down mientras que <code>Rel_U(a,b)</code> hace que la relación sea down-top. Podemos usar <code>Rel_L</code> y <code>Rel_R</code> para izquierda y derecha</p> </div> </div> </div> <div class="sect1"> <h2 id="container">Container</h2> <div class="sectionbody"> <div class="paragraph"> <p>Como hemos dicho, un container es un backend, una página web, una aplicación mobile, en resumen una unidad "ejecutable"</p> </div> <div class="paragraph"> <p>En nuestro ejemplo vamos a disponer de 3 containers: un Single Page Application como front que a través de llamadas http comunicará con otro container Backend, el cual usa una base de datos para guardar la información. ( En nuestro ejemplo por simplicidad, el backend se comunicará con la pasarela de pago directamente aunque podríamos crear otros containers especializados)</p> </div> <div class="listingblock"> <div class="title">Container.adoc</div> <div class="content"> <pre class="prettyprint highlight"><code>[plantuml] ---- !include &lt;c4/C4_Container.puml&gt; !include &lt;office/Users/user.puml&gt; !include &lt;office/Users/mobile_user.puml&gt; !include https://raw.githubusercontent.com/jagedn/mn-plantuml-sprites/master/sprites/grails.puml title Te lo traigo de mi Pueblo LAYOUT_TOP_DOWN LAYOUT_WITH_LEGEND() Person_Ext(anonymous_user, "Anonymous User") Person(aggregated_user, "Aggregated User") Person(administration_user, "Administration User") System_Boundary(c1, "telotraigodemipueblo"){ Container(web_app, "Web Application", "Vue.js", "Permite ver amigos, viajes, realizar pedidos, etc") Container(api, "Api", "&lt;$grails&gt;", "Permite ver amigos, viajes, realizar pedidos, etc") ContainerDb(rel_db, "Relational Database", "MySQL 5.5.x", "Guarda viajes, pedidos, pagos, etc.") Container(filesystem, "File System", "FAT32", "Imágenes de productos organizadas por carpetas") } System_Ext(pasarela, "Pasarela Pagos") Rel(anonymous_user, web_app, "Uses", "HTTPS") Rel(aggregated_user, web_app, "Uses", "HTTPS") Rel(administration_user, web_app, "Uses", "HTTPS") Rel_D(web_app, api, "Uses", "HTTPS") Rel(api, rel_db, "Reads from and writes to", "SQL/JDBC, post 3306") Rel(web_app, filesystem, "Reads from") Rel_D(api, pasarela, "JSON/Https", "SSL point to point") Lay_R(rel_db, filesystem) ----</code></pre> </div> </div> <div class="imageblock"> <div class="content"> <img src="/images/container.png" alt="Diagram" width="731" height="1053"> </div> <div class="title">Figure 2. Container</div> </div> <div class="paragraph"> <p>Como podemos ver en este nivel especificamos tecnología (MySQL, Vue, Grails), así como tratamos por igual diferentes tipos de Containers, tanto aplicaciones como base de datos o ficheros. Mediante <code>ContainerDb</code> la librería nos permite personalizar mejor el container para especificar su naturaleza. Así mismo podemos ver que PlantUML nos permite añadir elementos visuales que mejoren la comprensión del sistema como por ejemplo el icono de <code>Grails</code> (usando una librería propia publicada en Github con iconos para Grails, Micronaut y Groovy)</p> </div> </div> </div> <div class="sect1"> <h2 id="component">Component</h2> <div class="sectionbody"> <div class="paragraph"> <p>El tercer nivel de zoom dentro del modelo C4 detalla cada Componente o varios en el mismo diagrama si así se desea, plasmando las diferentes partes de aquel.</p> </div> <div class="paragraph"> <p>Por ejemplo en nuestro caso vamos a representar el Container <code>Api</code> mostrando sus diferentes partes y cómo se relacionan entre sí.</p> </div> <div class="listingblock"> <div class="title">single_page.adoc</div> <div class="content"> <pre class="prettyprint highlight"><code>[plantuml] ---- !include &lt;c4/C4_Component.puml&gt; title Api Backend de TelotraigodemiPueblo Container(spa, "Single Page Application", "Vue.js", "Realiza peticiones en nombre del usuario.") Container_Boundary(api, "API Application") { Component(sign, "Sign In Controller", "MVC Rest Controlle", "Allows users to sign in to the internet banking system") Component(accounts, "Accounts Summary Controller", "MVC Rest Controlle", "Provides customers with a summory of their bank accounts") Component(orders, "Orders Controller", "MVC Rest Controlle", "Provides customers with a summory of their orders") Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.") Component(accounts_srv, "Accounts Service", "Spring Bean", "Provides functionality related to accounts.") Component(gwfacade, "Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.") } ContainerDb(rel_db, "Relational Database", "MySQL 5.5.x", "Guarda viajes, pedidos, pagos, etc.") System_Ext(pasarela, "Pasarela Pagos", "Realiza el cobro de pedidos.") Rel(spa, sign, "Uses", "JSON/HTTPS") Rel(spa, accounts, "Uses", "JSON/HTTPS") Rel(spa, orders, "Uses", "JSON/HTTPS") Rel(sign, security, "Uses") Rel(security, rel_db, "Read &amp; write to", "JDBC") Rel(accounts, accounts_srv, "Uses") Rel(accounts_srv, rel_db, "Read &amp; write to", "JDBC") Rel(orders, gwfacade, "Uses") Rel(gwfacade, pasarela, "Uses", "XML/HTTPS") ----</code></pre> </div> </div> <div class="imageblock"> <div class="content"> <img src="/images/single_page.png" alt="Diagram" width="789" height="975"> </div> </div> </div> </div> <div class="sect1"> <h2 id="code">Code</h2> <div class="sectionbody"> <div class="paragraph"> <p>El último nivel de detalle propuesto por C4 correspondería al de código en el cual el detalle baja hasta especificar las clases, interfaces, relaciones entre ellos etc, en un típico diagrama UML</p> </div> <div class="listingblock"> <div class="title">security_service.adoc</div> <div class="content"> <pre class="prettyprint highlight"><code>[plantuml] ---- title Login Service package "com.puravida.telotraigo.security" #DDDDDD { class SpringUserService class UserDetails class UserNotFoundException SpringUserService -- UserDetails : create SpringUserService - UserNotFoundException : throws } UserService ()-- SpringUserService ----</code></pre> </div> </div> <div class="imageblock"> <div class="content"> <img src="/images/security_service.png" alt="Diagram" width="456" height="329"> </div> </div> </div> </div> <div class="sect1"> <h2 id="conclusión">Conclusión</h2> <div class="sectionbody"> <div class="paragraph"> <p>La idea fundamental que subyace sobre todo esto es por un lado el demostrar mediante un ejemplo sencillo las posibilidades de realizar diagramas de arquitectura mediante texto versionable y por otra acercarnos a un modelo simple pero potente como es el modelo C4 donde prima la sencillez y una aproximación top-bottom</p> </div> </div> </div> Una guía básica sobre modelado de componentes software usando C4 Abuelo cebolleta Jorge Aguilera 2020-06-27T00:00:00Z https://blog.jagedn.dev/blog/2020/abuelo-cebolleta.html <div id="preamble"> <div class="sectionbody"> <div class="imageblock"> <div class="content"> <img src="/images/2020/abuelo_cebolleta.jpg" alt="abuelo cebolleta"> </div> </div> <div class="paragraph"> <p>Hace unas semanas contactaron conmigo por si quería colaborar para un artículo en Xataka dando mi opinión como programador viejuno sobre como ha cambiado en todos estos años la industria del software y dando algún consejo a alguien que abandonara hace 20 años la programación y quisiera volver.</p> </div> <div class="paragraph"> <p>Como el artículo incluía a otros programadores recojo aquí alguna de mis respuestas, añadiendo algunos comentarios que por no venir a cuento no incluí en su momento.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">NOTE</dt> <dd> <p>El artículo en cuestión lo puedes leer en <a href="https://www.xataka.com/otros/20-anos-despues-quiero-volver-a-programar-que-grandes-cambios-ha-habido-donde-empezar" class="bare">https://www.xataka.com/otros/20-anos-despues-quiero-volver-a-programar-que-grandes-cambios-ha-habido-donde-empezar</a> junto con las opiniones de otros 3 programadores</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="presentación">Presentación</h2> <div class="sectionbody"> <div class="paragraph"> <p>Soy Jorge Aguilera, un Senior Software Engineer, actualmente trabajando en Tymit, con unos 25 años trabajando en el sector del desarrollo de software.</p> </div> <div class="paragraph"> <p>(<em>Repasando luego mi vida laboral descubrí que el mes que viene hare 28 años</em>)</p> </div> <div class="paragraph"> <p>Como muchos de mi generación mi adolescencia se vio marcada por la aparición de aquellas consolas que te dejaban hacer alguna cosa más que las máquinas de marcianos y siempre sentí atracción por ellas. Pero cuando decidí dar el salto fue cuando empezamos a usar Multiplan (una hoja de cálculo) en la carrera de Económicas, y ví que me saltaba las clases de todas las asignaturas por estar diseñando funciones estadísticas en el aula de informática.</p> </div> </div> </div> <div class="sect1"> <h2 id="inicios">Inicios</h2> <div class="sectionbody"> <div class="paragraph"> <p>Gracias a un amigo ( _ Merchán, @jmerespi, amigo desde el colegio y al que le debo un huevo de cosas_) me apunté a un programa de becas de aquella época: 3 meses a media jornada y hasta me pagaban!!!</p> </div> <div class="paragraph"> <p>(<em>La beca fue de 3 meses durante el verano y la compaginé con un trabajo de vigilante los fines de semana, así que esos meses gané una pasta gansa, unas 40.000 pesetas al mes. Recuerdo que eramos unos 20 y de muy diversos perfiles y allí conocí a quien sería mi mentor durante muchos años</em>)</p> </div> <div class="paragraph"> <p>Por aquellos tiempos, y creo que todavía de alguna manera en estos, la evolución normal era que estuvieras unos años de junior, otros de senior, analista, jefe de proyecto &#8230;&#8203; y debo admitir que en aquellos días lo veía como la evolución normal. De hecho llegué a montar una empresa donde ejercí como director técnico.</p> </div> <div class="paragraph"> <p>(<em>Releo esto y veo que no venía muy a cuento pero tenía que decirlo</em>)</p> </div> <div class="paragraph"> <p>Por suerte y gracias a buenos consejeros opté hace muchos años por la vía "arriesgada" y decidí dedicarme al desarrollo como tal y desde entonces no me arrepiento ni me veo cambiando el rumbo.</p> </div> <div class="paragraph"> <p>(<em>Ahora veo que esto era el meollo de la cuestión: cómo por buenos consejos, suerte e introspección conseguí escapar de la corriente del momento y dedicarme únicamente a programar que era lo que me gustaba</em>)</p> </div> </div> </div> <div class="sect1"> <h2 id="trayectoria">Trayectoria</h2> <div class="sectionbody"> <div class="paragraph"> <p>Echando la vista atrás veo que mientras antes podías abarcar prácticamente todo el espectro de un desarrollo hoy en día eso es imposible. Salvo honrosas excepciones nadie puede abarcar todos los conocimientos, herramientas y técnicas para desarrollar un producto. El tan manido término "fullstack" es una quimera. Podrás conocer muchas herramientas de todas las capas pero no podrás dedicarte a todas ellas pues las soluciones de hoy en día son muchísimo más complejas y requieren de mucho esfuerzo y dedicación.</p> </div> <div class="paragraph"> <p>A lo largo de todos estos años uno piensa que ha usado muchos lenguajes y herramientas asociadas, y probablemente es verdad, pero creo que no es tanto la cantidad de lenguajes que hayas usado sino cómo te hayas sentido identificado con ellos.</p> </div> <div class="paragraph"> <p>Yo, por ejemplo, en un momento dado usé Rexx en un proyecto pero a parte de la satisfacción de que sirviera para lo que se necesitaba no me siento identificado como programador Rexx (y no porque sea malo).</p> </div> <div class="paragraph"> <p>Por ello, para mí, hay 3 o 4 lenguajes que me marcaron en cada época:</p> </div> <div class="ulist"> <ul> <li> <p>mis comienzos con C y el momento en que fuí capaz de explicar los punteros (<em>llegue a dar unos cuantos cursos de C</em>)</p> </li> <li> <p>C++ como paso a eso que se empezaba a conocer como OOP (<em>aún recuerdo explicando que un objeto es como una librería y una estructura de datos, todo junto</em>)</p> </li> <li> <p>Java y su posibilidad de emplearlo tanto en el cliente como en el servidor</p> </li> <li> <p>Groovy, el cual descubrí casi por casualidad y con el que mi productividad se multiplicó por 1k y por ello lo uso a diario</p> </li> </ul> </div> <div class="paragraph"> <p>Como ya he comentado una etapa (de bastantes años) de mi vida profesional fue como director de una empresa de servicios que monté junto con un socio. Probablemente lo peor de mi carrera haya venido de cuando una de tantas crisis me hizo ver que o estaba en una cosa o en otra, pero no en las dos. Así que, tras casi quedar en quiebra, opté por el rumbo de técnico y a partir de ahí todo ha sido más fácil.</p> </div> <div class="paragraph"> <p>Algunas veces pienso que <strong>lo que más echo de menos de aquella época era la emoción de estar haciendo algo por donde "nadie había pasado"</strong>. Sin Internet, casi todo te parecía que lo tenías que hacer o inventar tú (luego descubres que alguien lo había hecho y mejor). Hoy es a la inversa: parece como que todo está inventando , pero por suerte siempre descubres algo nuevo que te vuelve a traer esa emoción.</p> </div> </div> </div> <div class="sect1"> <h2 id="mayor_avance_de_la_industria">Mayor avance de la industria</h2> <div class="sectionbody"> <div class="paragraph"> <p>Después de más una década como autodidacta decidí sacarme la ingeniería y creo que es donde tomé conciencia de lo realmente difícil que es hoy en día programar. Tal vez la industria está madurando y especializándose pero también se está diversificando de una manera increíble y alguien que termina la carrera no es realmente consciente de la cantidad de herramientas, técnicas y procedimientos que tiene que emplear en el día a día.</p> </div> <div class="paragraph"> <p>Ya no es sólo saber compilar un programa y copiarlo en un sitio. Hay que diseñar y programar test que aseguren la calidad, hay que trabajar con un equipo usando herramientas colaborativas como git, hacer code reviews, despliegues continuos, y un sinfín más de pasos.</p> </div> <div class="paragraph"> <p>Pero casi todo esto es producto de la madurez de la profesión y en mi opinión Git es un claro exponente de esto. De todas las herramientas o lenguajes con los que haya podido trabajar en todo este tiempo, Git ha sido el mayor cambio que he sufrido.</p> </div> <div class="paragraph"> <p>Podías venir de herramientas como CSV o SVN pero las posibilidades que ofrece Git para que un equipo de trabajo cree software son inmensas.</p> </div> </div> </div> <div class="sect1"> <h2 id="volver_a_programar">Volver a programar</h2> <div class="sectionbody"> <div class="paragraph"> <p>A pesar de toda esta ingente cantidad de herramientas y lenguajes que parece que hay que emplear para todo, lo que creo es que se siguen necesitando muchas manos (y alguna cabeza). Cualquiera que se haya dedicado a esta profesión puede actualizarse sin problema si acude con una mentalidad abierta. Tiene que entender que las cosas han evolucionado, que no todo es como se hacía antes, probablemente por esa especialización, pero que en el fondo el asunto sigue siendo el mismo: resolver una necesidad de la forma más adecuada en el momento . Lo que sí le digo es que tiene que estar dispuesto a aceptar el cambio constante que le caracteriza a esta profesión</p> </div> <div class="paragraph"> <p>Si hay algo que no debería desanimarte a la hora de optar por ser programador, es la edad. Creo que a diferencia de otras profesiones, en esta, la gente no siente tanto recelo a personas mayores, pero eso sí tienes que estar dispuesto a convivir con gente de la que puede que no entiendas sus aficiones y a la que no puedes ver como tus hijos.</p> </div> </div> </div> <div class="sect1"> <h2 id="por_donde_empezar">Por donde empezar</h2> <div class="sectionbody"> <div class="paragraph"> <p>Estoy prácticamente seguro que lo primero que piensa una persona que hace 20 años programara y quisiera retomarlo sería algo parecido a "esto ha crecido demasiado y ahora hay muchísimas cosas y herramientas que antes no había, no voy a llegar a entenderlas nunca". Siendo esto cierto, lo que tenemos que ver, es que ya no tenemos que estar en todas las partes como pasaba antes. Ahora hay más especialización, incluso los mal llamados full-stack no llegan a cubrir todas las áreas.</p> </div> <div class="paragraph"> <p>No sólo es cuestión de backend vs frontent.</p> </div> <div class="paragraph"> <p>Existen los QA que también tienen que programar test, los Business Analytics que tienen que programar cargas de datos y consultas, etc</p> </div> <div class="paragraph"> <p>Sí creo que hay ciertas herramientas o lenguajes que debes aprender cuanto antes aunque sea a un nivel básico:</p> </div> <div class="ulist"> <ul> <li> <p><strong>Git</strong>, es imprescindible. Hace 20 años con suerte el control de versiones era una carpeta compartida. Hoy en día Git y todo el ecosistema que se ha generado alrededor lo ha cambiado todo. Es la manera de trabajar con tus compañeros y de no pisarles el trabajo, así que los conceptos básicos y cierta soltura es imprescindible.</p> </li> <li> <p><strong>Python</strong> (que conste que yo no sé Python) creo que es un lenguaje que no envejece y se está reinventando muy bien. A día de hoy se está aplicando en muchas áreas diferentes y podrás encontrar una que te guste. Administración de sistemas, despliegues en la nube, análisis matemático, &#8230;&#8203;</p> </li> <li> <p>Si te gusta más la parte visual y crees HTML y Javascript es sencillo, prepárate porque la explosión que ha tenido de frameworks, herramientas y áreas es enorme. Te abrumará la cantidad de cosas que hay que aprender así que lo mejor será acotarlas. Busca un framework pequeño y centrate en él. Hay suficiente demanda como para que encuentres tu hueco. Yo por ejemplo <strong>no te recomendaría que empezaras con Angular</strong> pues es un monstruo y te puede sobrepasar. <strong>Comienza con VueJS</strong> por ejemplo, mucho más asequible y con mucho tirón.</p> </li> </ul> </div> <div class="paragraph"> <p>En resumen, en mi opinión hay mucha demanda en todas las áreas y no por haber estado 20 años fuera no vas a aportar nada. Sí creo que necesitarás una formación mínima en un área determinada probablemente de unos cuantos meses (tal vez 6), es decir, olvidate el "yo lo aprendo por mi cuenta" porque no va a funcionar.</p> </div> </div> </div> <div class="sect1"> <h2 id="conclusión">Conclusión</h2> <div class="sectionbody"> <div class="paragraph"> <p>En verdad es un tema sobre el que llevo los últimos años hablando con algunos managers.</p> </div> <div class="paragraph"> <p>Se centran en los juniors y no saben ver el potencial que aporta alguien que pasa los 40 sin conocimientos de programación. Madurez, responsabilidad, fidelidad, ganas de mejorar, &#8230;&#8203;</p> </div> <div class="paragraph"> <p>Probablemente alguien de 45 años y que se está reciclando no vaya a captar todos los detalles (tampoco un Junior lo hace , lo único que este pueda tener más reciente los estudios o últimas tendencias del mercado), pero probablemente será alguien que pueda aportar cuidado en el detalle y algo de cabeza crítica.</p> </div> </div> </div> Apuntes tomados para la entrevista en Xataka "20 años después quiero volver a programar: qué grandes cambios ha habido y por dónde empezar" Semestre 1/2020 Jorge Aguilera 2020-06-27T00:00:00Z https://blog.jagedn.dev/blog/uoc/s1-2020.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Este semestre ha sido el segundo haciendo el "Grado de Ciencia de Datos Aplicada" por la UOC (<a href="https://estudios.uoc.edu/es/grados/data-science/presentacion" class="bare">https://estudios.uoc.edu/es/grados/data-science/presentacion</a>).</p> </div> <div class="paragraph"> <p>No he escrito ningún post sobre el primer semestre que cursé el año pasado así que hago un resumen rápido sobre este:</p> </div> <div class="ulist"> <ul> <li> <p>Fundamentos de programación, básicamente iniciación a Python</p> </li> <li> <p>Introducción ciencia de datos, ubicar la figura del data science, sus roles, etc</p> </li> <li> <p>Métodos numéricos, matématicas aplicadas con Python</p> </li> </ul> </div> <div class="paragraph"> <p>De las 3 asignaturas no pude completar Métodos numéricos. Si bien la primera PEC fue asequible, rápidamente la segunda crece en complejidad y necesitas de más dominio de Python, así que la tercera no supe ni por donde abordarla. Las otras dos son realmente sencillas, aunque Introducción a la ciencia de datos es bastante aburrida.</p> </div> <div class="paragraph"> <p>Este semestre me he enfrentado a:</p> </div> <div class="ulist"> <ul> <li> <p>Programación en scripting, bash, awk, curl, etc</p> </li> <li> <p>Tipología y Fuentes de datos, semántica de datos, etc</p> </li> <li> <p>Bases de datos analíticas, diseño de bases de datos con herramientas Micro$oft</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="programación_en_scripting_notable">Programación en scripting (Notable)</h2> <div class="sectionbody"> <div class="paragraph"> <p>Si bien no tiene mucha dificultad y los materiales están bastante completos, hay que dedicarle su rato para resolver los ejercicios de una forma decente.</p> </div> <div class="paragraph"> <p>Entre otras te enfrentas a ejercicios para usar curl, leer json o xml, crear algunos bash, etc.</p> </div> <div class="paragraph"> <p>Después de muchísimos años sin haber tocado AWK me ha sido muy placentero volver a usarlo y tener que esforzarme en hacer alguna cosa más allá del buscar y reemplazar algún carácter, usando <code>BEGIN</code>, <code>END</code>, funciones internas, arrays , etc. (aquí mi <a href="s1-2020/AguileraGonzalezJorge_pec3.pdf">PEC3</a> que ya te digo que no fue de las más brillantes)</p> </div> <div class="paragraph"> <p>La última práctica es un ejercicio libre donde elegimos un dataset cualquiera en Internet y debemos tratarle con herramientas bash para generar un report HTML incluyendo algunos plots sobre los datos.</p> </div> <div class="paragraph"> <p>Yo he analizado los accidentes en la M30 durante los años 2016 al 2019 (<a href="https://datos.madrid.es/sites/v/index.jsp?vgnextoid=6e1ce0f3e8e22610VgnVCM1000001d4a900aRCRD&amp;vgnextchannel=374512b9ace9f310VgnVCM100000171f5a0aRCRD" class="bare">https://datos.madrid.es/sites/v/index.jsp?vgnextoid=6e1ce0f3e8e22610VgnVCM1000001d4a900aRCRD&amp;vgnextchannel=374512b9ace9f310VgnVCM100000171f5a0aRCRD</a>) generando al final un report de resumen semanal buscando qué día y hora son los peores, utilizando únicamente bash, awk y gnuplot</p> </div> <div class="paragraph"> <p><span class="image"><img src="/images/uoc/s1-2020/5.png" alt="5"></span></p> </div> <div class="paragraph"> <p><em>En resumen una asignatura muy interesante y divertida. Si bien en el día a día seguramente uses herramientas más complejas, tener un dominio básico de estas otras te podrá ahorrar muchas horas</em></p> </div> </div> </div> <div class="sect1"> <h2 id="tipología_y_fuentes_de_datos_aprobado">Tipología y Fuentes de datos (Aprobado)</h2> <div class="sectionbody"> <div class="paragraph"> <p>En esta asignatura tengo sentimientos encontrados. Como con muchas asignaturas, ves que tienen mucho que contar pero la mayoría de ello no consigue despertar mi interés.</p> </div> <div class="paragraph"> <p>La teoría de cómo usar los metadatos, la nomenclatura Dublin Core (que por cierto no viene de la capital de Irlanda, sino de una ciudad de EEUU), etc no me llega a despertar mucho interés.</p> </div> <div class="paragraph"> <p>Sin embargo los últimos ejercicios sobre cómo atacar Wikidata mediante SPARQL me han dejado tocado. Tras la curva inicial para entender cómo se realizan las sentencias SQL (la cual no he terminado de superar y terminé en un estado de prueba-error) me quedé impresionado con las posibilidades que ofrece.</p> </div> <div class="paragraph"> <p>Poder consultar infinidad de datos, no sólo los típicos sobre películas y actores, sino política, geografía, espacio y un largo etc desde la línea de consola y obtener unos datos estructurados para su tratamiento me parece bestial.</p> </div> <div class="listingblock"> <div class="content"> <pre>Soccer players, who are born in a country with more than 10 million inhabitants, who played as goalkeeper for a club that has a stadium with more than 30.000 seats and the club country is different from the birth country</pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>PREFIX dbo: &lt;http://dbpedia.org/ontology/&gt; SELECT distinct ?soccerplayer ?countryOfBirth ?team ?countryOfTeam ?stadiumcapacity { ?soccerplayer a dbo:SoccerPlayer ; dbo:position|dbp:position &lt;http://dbpedia.org/resource/Goalkeeper_(association_football)&gt; ; dbo:birthPlace/dbo:country* ?countryOfBirth ; #dbo:number 13 ; dbo:team ?team . ?team dbo:capacity ?stadiumcapacity ; dbo:ground ?countryOfTeam . ?countryOfBirth a dbo:Country ; dbo:populationTotal ?population . ?countryOfTeam a dbo:Country . FILTER (?countryOfTeam != ?countryOfBirth) FILTER (?stadiumcapacity &gt; 30000) FILTER (?population &gt; 10000000) } order by ?soccerplayer</code></pre> </div> </div> <div class="paragraph"> <p>Por otra parte, esta asignatura cuenta con muchos ejercicios a realizar en Python, usando la plataforma de Google <a href="https://colab.research.google.com/" class="bare">https://colab.research.google.com/</a> donde puedes crear y ejecutar programas en Python complejos.</p> </div> <div class="paragraph"> <p><strong>Durante toda mi carrera profesional me he tenido que aprender muchos lenguajes y Python no es de los más complejos en absoluto, pero tal vez porque ya no tengo los mismos reflejos y dedicación de antes no termina de enamorarme. Le encuentro un lenguaje <em>guarro</em> , pero es una opinión personal sin ningún fundamento</strong> De todas formas es un lenguaje básico en este Grado así que tocará poco a poco ir usándolo cada vez más.</p> </div> </div> </div> <div class="sect1"> <h2 id="bases_de_datos_analíticas_no_presentado">Bases de datos analíticas (No presentado)</h2> <div class="sectionbody"> <div class="paragraph"> <p>Sobre esta asignatura poco que decir pues a mitad de curso sucedieron dos cosas:</p> </div> <div class="ulist"> <ul> <li> <p>cambio de trabajo, con toda la presión que conlleva ponerte a un nivel aceptable donde puedas aportar</p> </li> <li> <p>covid19 y todo lo que supuso. Probablemente para algunos esta situación les ofreciera oportunidad para poder dedicarse a estudiar pero en mi caso fue a la inversa.</p> </li> </ul> </div> <div class="paragraph"> <p>A todo ello se une que la asignatura me pareció de lo más aburrida y no por tener que usar Microsoft SQLServer en un escritorio remoto, sino porque el tipo de ejercicios eran de lo más insulsos y la teoría tampoco acompañaba a hacerlo más interesante.</p> </div> <div class="paragraph"> <p>Así que juntando todas las circunstancias decidí sacrificar esta asignatura pues era la que menos me aportaba, y la dejaremos para más adelante cuando las circunstancias y ganas cambien.</p> </div> <div class="paragraph"> <p>Hasta donde realicé de la asignatura, la teoría era de lo más simple sin representar ninguna complicación. Sin embargo el tener que usar un escritorio remoto representó un montón de problemas de cabeza pues no estaba muy fino ni explicado. Usar herramientas como Pentaho y guardar tus ficheros y que se perdieran tras cerrar sesión nos traía de cabeza, atinar a configurar las conexiones con SQLServer, &#8230;&#8203;</p> </div> </div> </div> <div class="sect1"> <h2 id="próximo_semestre">Próximo semestre</h2> <div class="sectionbody"> <div class="paragraph"> <p>Para el próximo semestre he optado por retomar Métodos numéricos unicamente. No hay prisa y de esta forma espero poder dedicarme en exclusiva a ella para enterarme bien y prestar más atención al Python necesario</p> </div> </div> </div> Resumen del semestre 1/2020 de la carrera Data Science en la UOC Logs y métricas Jorge Aguilera 2020-06-16T00:00:00Z https://blog.jagedn.dev/blog/2020/logs-metricas.html <div id="preamble"> <div class="sectionbody"> <div class="quoteblock"> <blockquote> Lo que no se define no se puede medir. Lo que no se mide, no se puede mejorar. Lo que no se mejora, se degrada siempre </blockquote> <div class="attribution"> &#8212; William Thomson Kelvin </div> </div> <div class="paragraph"> <p>En este post voy a hablar sobre un caso real que hace poco hemos tenido en <a href="https://tymit.io">Tymit</a> relativo a la importancia de poder medir la ejecución de tu software.</p> </div> <div class="paragraph"> <p>Sin entrar en muchos detalles, porque seguramente muchos os sentiréis identificados, en Tymit tenemos un proceso de negocio crítico donde intervienen varios componentes (llámalos microservicios, aplicaciones, librerías) y que de vez en cuando tardaba algo más de lo esperado generando los problemas típicos (timeouts, reintentos, consumo de recursos, etc).</p> </div> <div class="paragraph"> <p>Por supuesto contamos con toda la infraestructura necesaria para no perder ni una sola línea de logs, capacidad para asumir los reintentos y demás mecanismos para mantener el nivel de servicio &#8230;&#8203; actual. Pero ¿qué pasaría ante un incremento de la demanda de dicha funcionalidad? Obviamente era un flujo de trabajo que había que revisar y mejorar.</p> </div> <div class="paragraph"> <p>Como ya he comentado, todo el flujo se encuentra debidamente traceado y todos los logs son capturados y enviados a un ELK (ElasticSearch y Kibana) para su supervisión de tal forma que es relativamente fácil saber cuando comienza un flujo y los pasos principales por donde va pasando.</p> </div> <div class="paragraph"> <p>Sin embargo el problema principal es que esta línea de seguimiento de logs suele estar pensaba para que el desarrollador pueda identificar los pasos por los que ha transcurrido una transacción (casi siempre comparándolo con el código fuente e identificando las decisiones tomadas en función de la traza que veamos). Obviamente cuanto mayor información se disponga en el log más fácil será identificar las decisiones tomadas por el código</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">WARNING</dt> <dd> <p>No, tracear un método con "entra aquí" o "paso 1", no te va a sacar del apuro</p> </dd> </dl> </div> <div class="paragraph"> <p>Como es obvio, en esta situación un desarrollador puede ir realizando un seguimiento de cómo se comporta su código en producción pero el sistema sigue adoleciendo de algunas deficiencias:</p> </div> <div class="ulist"> <ul> <li> <p>Negocio y QA, en el mejor de los casos tienen una curva de aprendizaje elevada en el aprendizaje de lo que están viendo</p> </li> <li> <p>Se asume que como cada línea de log incluye su marca de tiempo seremos capaces de extraer información sobre el tiempo empleado en resolver cada paso, lo cual puede ser cierto en el mejor de los casos, pero la realidad es que o se dispone de un sistema robusto o el análisis se hace con un coste de análisis elevado</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="traceo_básico">Traceo básico</h2> <div class="sectionbody"> <div class="paragraph"> <p>Una primera aproximación puede ser la de tracear la entrada a cada método de interés así como todos los posibles retornos que se puedan producir dentro del método.</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="groovy">int calculoCostoso( int param1, String param2){ log.info "calculoCostoso:enter "+new Date().time if( !param2 ){ log.info "calculoCostoso:exit "+new Date().time return -1 } int ret = param1*10 log.info "calculoCostoso:exit "+new Date().time return ret }</code></pre> </div> </div> <div class="paragraph"> <p>Obviamente esta es una solución rápida pero costosa y propensa a error. Así mismo delegamos en el sistema de explotación de los logs el cálculo de cuánto ha tardado la función en ejecutarse.</p> </div> <div class="paragraph"> <p>Una posible mejora podría ser tomar tiempos de entrada y de salida y tracear la diferencia:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="groovy">int calculoCostoso( int param1, String param2){ Date start = new Date() if( !param2 ){ log.info "calculoCostoso:duration "+ (new Date().time-start.time) return -1 } int ret = param1*10 log.info "calculoCostoso:duration "+ (new Date().time-start.time) return ret }</code></pre> </div> </div> <div class="paragraph"> <p>A parte de lo tedioso y propenso a error del sistema, existen otras situaciones que no estaríamos contemplando como por ejemplo si se producen excepciones dentro del método, por lo que podríamos reescribir cada método de interés con algo parecido a:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="groovy">int calculoCostoso( int param1, String param2){ Date start = new Date() try{ if( !param2 ){ return -1 } int ret = param1*10 return ret }finally{ log.info "calculoCostoso:duration "+ (new Date().time-start.time) } }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="slf4j_y_mdc">Slf4j y MDC</h2> <div class="sectionbody"> <div class="paragraph"> <p>Log4j y Logback ofrecen, además del traceo básico, la posibilidad de utilizar MDC (Mapped Diagnostic Context)</p> </div> <div class="paragraph"> <p>Con MDC puedes "enriquecer" el sistema de traceo con otros tipos de datos además de la línea a tracear. Un caso típico puede ser por ejemplo añadir un id de contexto al inicio del flujo de tal forma que todos los logs que se generen en ese thread compartirán este <code>correlation Id</code> facilitando su agrupación.</p> </div> <div class="paragraph"> <p>Estos campos pueden ser utilizados en sistemas tipo ELK (ElasticSearch-Logstack-Kibana) para mejorar los sistemas de búsqueda y filtrado así como generar gráficas en tiempo real, etc.</p> </div> <div class="paragraph"> <p>Nosotros podemos aprovechar esta funcionalidad para añadir una pequeña carga de información en el log. Así por ejemplo podríamos mejorar nuestro método:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="groovy">int calculoCostoso( int param1, String param2){ Date start = new Date() log.info "calculoCostoso:enter" try{ if( !param2 ){ return -1 } int ret = param1*10 return ret }finally{ MDC.put("payload", JsonOutput.toJson([className: 'BussinesService', methodName: 'calculoCostoso', duration: new Date().time-start.time])) log.info "calculoCostoso:exit" MDC.remove("payload") } }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="metermethod">MeterMethod</h2> <div class="sectionbody"> <div class="paragraph"> <p>MeterMethod es una clase muy simple destinada a medir el tiempo desde su creación hasta que se invoca el método <code>toString</code> . Además permite incluir en la cadena a generar una lista de key-value (<code>tags</code>) así como el incluir/remover en el MDC un <code>payload</code> con la información de interés</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">NOTE</dt> <dd> <p>payload puede llamarse como quieras, es un campo que se añade en el contexto de la traza y simplemente debes buscar un nombre que no "pise" a alguno ya existente. La idea es que estos campos del MDC lleguen al ELK y puedan ser indexados para su búsqueda y explotación</p> </dd> </dl> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="groovy">class MeterMethod { long start Map&lt;String, String&gt; tags = [:] String methodName String className MeterMethod(String className, String methodName) { this.className = className this.methodName = methodName start = Calendar.instance.timeInMillis } long getDuration() { Calendar.instance.timeInMillis - start } void addTag(String key, Object value) { tags[key] = '' + value } @Override String toString() { String args = tags.size() ? tags.collect { "$it.key=$it.value" }.join(';') : '' "$className.$methodName: duration=$duration ms;$args" } void addPayload() { MDC.put("payload", JsonOutput.toJson([className: className, methodName: methodName, duration: duration])) } void removePayload() { MDC.remove("payload") } }</code></pre> </div> </div> <div class="paragraph"> <p>Un posible ejemplo de su uso sería:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>int calculoCostoso( int param1, String param2){ def meterMethod = new MeterMethdo(this.class.Name, 'calculoCostoso') meterMethod.addTag('param1', param1) try{ if( !param2 ){ return -1 } int ret = param1*10 return ret }finally{ meterMethod.addPayload() log.info meterMethod.toString() meterMethod.removePayload() } }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="anotación_tymittrace">Anotación TymitTrace</h2> <div class="sectionbody"> <div class="dlist"> <dl> <dt class="hdlist1">NOTE</dt> <dd> <p>El stack tecnológico que utilizamos en Tymit es Groovy&amp;Grails pero no debería ser difícil adaptar esta anotación a Java.</p> </dd> </dl> </div> <div class="paragraph"> <p>Con todas estas ideas y teniendo en cuenta que ya disponemos de toda una infraestructura capaz de realizar la ingesta (me gusta esta palabra) de los logs y su visualización en Kibana, nos planteamos usar esta estrategia para poder disponer de unas métricas básicas pero evitando el tener que tocar en la medida de lo posible un código que estaba funcionando, por lo que hemos creado una anotación a nivel de método que aplique la técnica descrita anteriormente.</p> </div> <div class="sect2"> <h3 id="tymittrace">TymitTrace</h3> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="groovy">@Local( value = TymitTraceTransformation, applyTo = Local.TO.METHOD) @interface TymitTrace { /** * A list of variables to trace, i.e 'a,b,c' * @return */ String value() }</code></pre> </div> </div> <div class="paragraph"> <p>Para usar dicha anotación, simplemente anotaremos los métodos de interés:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="groovy">@TymitTrace int calculoCostoso( int param1, String param2){ if( !param2 ){ return -1 } int ret = param1*10 return ret }</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="dando_vida_a_la_anotación">Dando vida a la anotación</h3> <div class="paragraph"> <p>Una anotación en sí no es nada más que una declaración de buenas intenciones entre el que la usa y el que la implementa. Es un contrato, de ahí que sea una interface, que hay que implementar. Dicha implementación en el mundo de las anotaciones corresponderá a un código que inyecta código en otro código (qué vértigo!!)</p> </div> <div class="paragraph"> <p>Cuando el compilador encuentre una anotación, bien sea de clase, de propiedad o de método buscará la clase que se encuentra indicada en dicha anotación y <em>le cederá el turno</em> en el proceso de generar código.</p> </div> <div class="paragraph"> <p>Así pues deberemos crear la clase <em>TymitTraceTransformation</em> que implementará dicha anotación tal como indicamos en la anotación de la anotación (doble vértigo!!)</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">NOTE</dt> <dd> <p>Gracias a la librería de @marioggar (grooviter/asteroid) implementar una anotación para Groovy es bastante fácil.</p> </dd> <dt class="hdlist1">NOTE</dt> <dd> <p>Gracias a @ilopmar por publicar un Gist (<a href="https://gist.github.com/ilopmar/6037796" class="bare">https://gist.github.com/ilopmar/6037796</a>) que me sirvió para inspirarme en esta anotación</p> </dd> </dl> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="groovy">@CompileStatic @Phase(CompilePhase.SEMANTIC_ANALYSIS) class TymitTraceTransformation extends AbstractLocalTransformation&lt;TymitTrace, MethodNode&gt; { static private List pool = ['a'..'z', 'A'..'Z', '0'..'9', '_'].flatten() @Override void doVisit(final AnnotationNode annotation, final MethodNode methodNode) { def oldCode = methodNode.code def className = methodNode.declaringClass.name def methodName = methodNode.name def parameters = Utils.NODE.get(annotation, 'value', String) ?: '' def rand = new Random(System.currentTimeMillis()) def randomVariableName = '_' + (0..10).collect { pool[rand.nextInt(pool.size())] }.join('') methodNode.code = blockS( declareMeterMethod(randomVariableName, className, methodName), declareClosure(randomVariableName, parameters.split(','), meter), tryCatchSBuilder() .tryStmt( oldCode ) .finallyStmt( callFinish(randomVariableName) ) .build() ) } // generamos código similar a // def _a12BadF123 = new MeterMethod('BusinessService', 'calculoCostoso') Statement declareMeterMethod(String randomVariableName, String className, String methodName) { stmt(varDeclarationX(randomVariableName, MeterMethod, newX(MeterMethod, constX(className), constX(methodName)) )) } // generamos código similar a /** def _a12BadF123Closure = { _a12BadF123.addTag('param1', param1) _a12BadF123.addPayload() log.info _a12BadF123.toString() _a12BadF123.removePayload() }*/ Statement declareClosure(String randomVariableName, String[] parameters, Boolean meter) { String closureStr = parameters.findAll { it }.collect { String p -&gt; "${randomVariableName}.addTag('$p',$p)" }.join('\n') closureStr += """ ${randomVariableName}.addPayload() log.info ${randomVariableName}.toString() ${randomVariableName}.removePayload() """ Statement closure = blockSFromString(closureStr) stmt(varDeclarationX(randomVariableName + 'Closure', Closure, closureX(closure))) } // generamos código similar a : // _a12BadF123Closure.call() Statement callFinish(String randomVariableName) { stmt(callX(varX("${randomVariableName}Closure"), 'call')) } }</code></pre> </div> </div> <div class="paragraph"> <p>Básicamente lo que hacemos es EN TIEMPO DE COMPILACIÓN recubrir nuestro método con un try-finally:</p> </div> <div class="ulist"> <ul> <li> <p>Cambiamos el código del nodo por uno nuevo:</p> <div class="ulist"> <ul> <li> <p>declaramos una variable <code>randomVariableName</code> del tipo MeterMethod</p> </li> <li> <p>creamos una Closure para ser llamada al final</p> </li> <li> <p>recubrimos el método original con un try-finally donde en el try llamaremos al método original y en el finally invocaremos nuestra closure. Al ser un try-finally el retorno de la función seguirá siendo el que realice el método original</p> </li> </ul> </div> </li> </ul> </div> <div class="paragraph"> <p>La Closure que ejecutamos en el finally es la encargada de recabar, una vez ejecutado el método original, la información necesaria para el traceo (<code>duration</code>, <code>tags</code> y preparar el MDC). Como puede verse la hemos implementado con un "simple" String de tal forma que es más fácil de entender.</p> </div> </div> <div class="sect2"> <h3 id="resultado_final">Resultado final</h3> <div class="paragraph"> <p>Con todo ello podremos proceder a anotar nuestros métodos con <em>TymitTrace</em> . Si lo hacemos en el ejemplo inicial de esta manera:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>@TymitTrace('param1,param2') <i class="conum" data-value="1"></i><b>(1)</b> int calculoCostoso( int param1, String param2){ if( !param2 ){ return -1 } int ret = param1*10 return ret }</code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>Simplemente añadimos esta línea sin tocar el código original</td> </tr> </table> </div> <div class="paragraph"> <p>A grandes rasgos el código final que se genera EN TIEMPO DE COMPILACIÓN podría ser parecido a:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>int calculoCostoso( int param1, String param2){ MeterMethod _123aAdfkl123lf = new MeterMethod( 'BusinessService', 'calculoCostoso') try{ if( !param2 ){ return -1 } int ret = param1*10 return ret }finally{ _123aAdfkl123lf.addTag('param1', param1) _123aAdfkl123lf.addTag('param2', param2) _123aAdfkl123lf.addPayload() log.info _123aAdfkl123lf.toString() _123aAdfkl123lf.removePayload() } }</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="log">Log</h2> <div class="sectionbody"> <div class="paragraph"> <p>Si simplemente usas la consola (o un volcado a fichero de la misma) esta anotación te proporciona información "en bruto" valiosa pues tendrás trazas como:</p> </div> <div class="paragraph"> <p><code>2020-06-18 12:00:00 INFO:BusinessService BusinessService.calculoCostoso: duration=123 ms;1,hola</code></p> </div> <div class="paragraph"> <p>Pero si conectas el sistema de logs con un ELK podrás acceder a los campos del payload y obtener la información de forma más cómoda y práctica, pudiendo realizar por ejemplo gráficas en tiempo real.</p> </div> <div class="paragraph"> <p>En nuestro caso, por ejemplo, queríamos poder medir las mejoras que íbamos realizando al proceso pesado y que no quedara en un <code>parece que ahora bien</code> así que una vez implementando este sistema de traceo-métrica pudimos ir abordando las mejoras al proceso y obtener este gráfico donde se veía el antes y el después del despliegue de una de las versiones</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2020/elk/15-06-2020.png" alt="15 06 2020"> </div> </div> </div> </div> Cómo usar los logs para obtener métricas en los métodos Charla OpenData en HatThieves Jorge Aguilera 2020-05-17T00:00:00Z https://blog.jagedn.dev/blog/2020/opendata-hatthieves.html <div class="sect1"> <h2 id="hatthieves">HatThieves</h2> <div class="sectionbody"> <div class="paragraph"> <p>HatThieves, "el placer de hacer", es un grupo de personas que he descubierto hace relativamente poco gracias a la red social Mastodon y que se están dedicando a organizar eventos todos los domingos por la tarde (#domingosNegros)</p> </div> <div class="paragraph"> <p>En esta red soy realmente muy novato, pues apenas llevo unos meses usándola pero es cierto que desde el principio adapté el plugin que uso para publicar en canales de Telegram y en la cuenta de Twitter @madrid_data para poder publicar también en Mastodon (@OpenDataMadrid.mastodon.madrid) de forma diaria eventos de la ciudad.</p> </div> <div class="paragraph"> <p>El caso es que también he ido publicando algunos de los gifs animados que crean los bots de las cámaras de tráfico, etc y de alguna manera tuve que captar la atención de este grupo que al final me propusieron dar una charla sobre el tema de OpenData. Como a mí sólo me tienes que tocar las palmas pues acepté en seguida y más teniéndola ya preparada del año pasado en el Codemotion de Madrid.</p> </div> <div class="paragraph"> <p>Tras una pequeña revisión para reestructurarla tras lo aprendido de la última charla así como quitar y poner algún nuevo desarrollo la charla estaba lista y ahora sólo me tocaba enfrentarme a una charla "sin público", pues la idea era retransmitirla en directo por streaming y no en un chat tipo Zoom, Jitsi, etc en el que podría verle la cara al menos a alguno de los asistentes y poder captar así el nivel de aburrimiento que estaba generando.</p> </div> <div class="paragraph"> <p>Sin embargo, independientemente del nivel de interés que despertara, me sentí bastante cómodo. Ayudó mucho que la gente de HatTieves unos días antes estuviera al tanto para que hicieramos prueba de sonido hasta conseguir eliminar ese ruido del que se quejaban en mi curro, así como practicar un poco antes de la charla. Así mismo el haber pactado que no había tiempo límite, sólo la recomendación de no sobrepasar la hora, hizo que pudiera explicar tranquilamente cada punto.</p> </div> <div class="paragraph"> <p>Pero lo mejor de la experiencia sin duda fue el debate que se organizó después donde la gente se podía conectar a una dirección para hablar (o escribir si eras capaz de encontrar la caja de texto) y hacer preguntas. Para mí fue una experiencia fantástica. Sin ser un orador habitual he podido dar algunas charlas (siempre técnicas) y en todas la gente ha participado en mayor o menor medida pero en esta la predisposición a debatir fue abrumadora y surgieron muchas ideas o temas que ni me había planteado.</p> </div> </div> </div> <div class="sect1"> <h2 id="charla">Charla</h2> <div class="sectionbody"> <div class="paragraph"> <p>La charla fue "OpenData: datos por el pueblo y para el pueblo" (sí, un poco clickbait) y la puedes ver en <a href="https://www.hatthieves.es/2020/05/12/domingos-negros-0x04-opendata-data-por-el-pueblo-para-el-pueblo/" class="bare">https://www.hatthieves.es/2020/05/12/domingos-negros-0x04-opendata-data-por-el-pueblo-para-el-pueblo/</a></p> </div> <div class="paragraph"> <p>Básicamente es una charla "demo" donde no enseño nada de teoría (básicamente porque no soy quién para ello) sino que muestro algunos de los pet-projects que he estado haciendo jugando con catálogos de datos abiertos tanto de Madrid como del Gobierno de España (por no aburrir no enseñé todos, sino los que creo más relevantes) y que me gusta ver como "inspiradores" para gente inquietudes y que no sepan por donde empezar.</p> </div> <div class="paragraph"> <p>Está dividida en 3 apartados:</p> </div> <div class="ulist"> <ul> <li> <p>publicar en canales o redes sociales</p> </li> <li> <p>ejemplos de bots</p> </li> <li> <p>little data</p> </li> </ul> </div> <div class="paragraph"> <p>Cada uno de ellos con ejemplos y explicaciones de donde ejecutarlos de forma económica</p> </div> </div> </div> <div class="sect1"> <h2 id="medios">Medios</h2> <div class="sectionbody"> <div class="paragraph"> <p>Para la captura y retransmisión, sin poder entrar en detalles porque los desconozco, HatThieves han montado un servidor con un software llamado BigBlueButton el cual permite realizar conferencias (parece ser que de hasta cientos de personas simultáneas) y/o clases virtuales. Básicamente tras darme acceso yo use la funcionalidad de compartir una ventana y el audio</p> </div> <div class="paragraph"> <p>INFO: Solo funcionó bien con Firefox</p> </div> <div class="paragraph"> <p>Detrás de ello, la gente de HatThieves montaron la historia para capturarlo y transmitirlo con un delay de un par de segundos.</p> </div> <div class="paragraph"> <p>Una vez terminada la charla procedimos a parar la emisión y pasarnos a usar una instancia de Mumble para poder hacer el debate. Mumble es una aplicación muy ligera orientada al audio donde puedes tener diferentes salas que te permite hablar mientras haces otras tareas (jugar, programar, ver películas, &#8230;&#8203;). Se han currado un sistema de turnos de tal forma que la peña va pidiendo la vez y el sistema va asignando quien le toca hablar</p> </div> </div> </div> <div class="sect1"> <h2 id="conclusiones">Conclusiones</h2> <div class="sectionbody"> <div class="paragraph"> <p>La primera, como ya he comentado, fue el debate. Por un lado los asistentes tenían un dominio e inquietudes del tema muy fuerte para un simple programador for-fun como yo. Ideas interesantes que surgieron, que recuerde, podrían ser:</p> </div> <div class="ulist"> <ul> <li> <p>qué nivel de datos no quieren publicar los organismos</p> </li> <li> <p>qué podemos hacer y cómo para controlarlo</p> </li> <li> <p>existirá algún control de calidad interno/externo, tipo auditoria, que puntúe los datasets</p> </li> <li> <p>dónde está el límite a la legalidad de publicar datos que debían ser públicos pero que se ocultan</p> </li> <li> <p>conseguirá el Covid19 hacernos ver que realmente NO contamos con una madurez suficiente del dato</p> </li> <li> <p>&#8230;&#8203;</p> </li> </ul> </div> <div class="paragraph"> <p>Mumble, me ha creado la necesidad de que quiero instalarlo para la empresa. Ahora mismo estamos todos en remoto y hay gente inglesa, italiana y españoles. Creo que además de ayudar a la productividad sin tener que tirar tanto de Slack me ayudaría a practicar el inglés</p> </div> <div class="paragraph"> <p>En resumen, ha sido una experiencia genial y muy oportuna para estos tiempos tan raros que nos toca vivir</p> </div> </div> </div> Impresiones tras la charla de OpenSource OpenData con la gente de HatThieves El blog de Dani Jorge Aguilera 2020-04-30T00:00:00Z https://blog.jagedn.dev/blog/2020/dani-blog.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Dani, para los que no lo saben, es mi chaval y tiene 9 años (y medio).</p> </div> <div class="paragraph"> <p>Es un chaval, como todos, inquieto, divertido, alegre y, como todos, pasa de lo que le diga su padre. Para nada le interesa la programación y la tecnología que no sea jugar con la tablet y hablar por videoconferencia con sus amigos de cromos, aunque las pocas veces que le he dicho de sentarse conmigo a trastear con Scratch o AppInventor lo ha hecho. Incluso se inventó un juego de cromos</p> </div> <div class="paragraph"> <p>Quiero decir con esto, que creo que es un chico normal. No tiene inquietudes tecnológicas más allá de la diversión inmediata que le pueda reportar.</p> </div> <div class="paragraph"> <p>Por eso me sorprendió que, tras varios meses sin comentarle que podía tener un blog donde contar sus cosas, esta vez me dijera que sí con buen ánimo. Probablemente sea cosa del confinamiento pero como no hay que dejar pasar las oportunidades me dispuse a crearle la infraestructura mínima y guiarle en el proceso de publicar su blog.</p> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> A día de hoy ha publicado 3 post y aunque no me hago ilusiones, espero que sean los primeros de muchos más. </td> </tr> </table> </div> <div class="paragraph"> <p>Así pues he pensado que tal vez, si andas queriendo tener un blog simple y totalmente gratis, esta guía te sirva. <em>Piensa que si un niño de 9 años es capaz de hacerlo no veo porqué tú no</em>.</p> </div> </div> </div> <div class="sect1"> <h2 id="objetivo">Objetivo</h2> <div class="sectionbody"> <div class="paragraph"> <p>Publicar un blog de forma sencilla y cómoda, con un diseño agradable y personalizable pero simple. Que se pueda escribir texto (obvio), imágenes y/o vídeos.</p> </div> <div class="paragraph"> <p>Gastándose lo mínimo, rayando el cero.</p> </div> <div class="paragraph"> <p>Sin necesidad de conocimientos informáticos</p> </div> <div class="paragraph"> <p>NO se pretende tener un carrito de la compra, ni miles de widgets de integración con nada.</p> </div> <div class="paragraph"> <p>En esta fase no se permitirá que los lectores dejen comentarios o likes, pero sí querremos saber el impacto de las publicaciones</p> </div> </div> </div> <div class="sect1"> <h2 id="requisitos">Requisitos</h2> <div class="sectionbody"> <div class="paragraph"> <p>Tener una cuenta de correo electrónico</p> </div> <div class="paragraph"> <p>Crearse una cuenta en Gitlab. El usuario con el que crees la cuenta será parte de la url de tu blog, así por ejemplo para Dani creamos la cuenta de Gitalb <code>danidorami</code> y su blog se encuentra en <code><a href="http://danidorami.gitlab.io/" class="bare">http://danidorami.gitlab.io/</a></code></p> </div> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="Warning"></i> </td> <td class="content"> Existen 1000 formas diferentes de conseguir tener un blog con 1000 herramientas diferentes. En este post voy a contar las que he usado y comentaré brevemente porqué pero no quiere decir que sea la mejor ni la única. </td> </tr> </table> </div> <div class="paragraph"> <p>Prefiero Gitlab sobre otras herramientas como el famoso Github principalmente porque Gitlab es open source (a la mayoría eso os dará igual) y porque desde antes que Github o similares ya ofrecía desde hacer muchos años una cuenta gratuita con funcionalidades como ejecutar pipelines y publicar páginas estáticas (justo las dos funcionalidades que vamos a usar en este caso)</p> </div> </div> </div> <div class="sect1"> <h2 id="pasos">Pasos</h2> <div class="sectionbody"> <div class="paragraph"> <p>Lo primero es crear un proyecto desde la consola web de Gitlab.</p> </div> <div class="paragraph"> <p>El proyecto deberá llamarse <code>TUSUARIO.gitlab.io</code> , en el caso de Dani <code>danidorami.gitlab.io</code></p> </div> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="Warning"></i> </td> <td class="content"> el proyecto debe incluir <code>gitlab.io</code>. La primera vez que lo intenté creí que esa parte no había que ponerla, sólo el nombre del usuario y no funcionó </td> </tr> </table> </div> <div class="paragraph"> <p>Seleccionar <strong>Crear desde plantilla</strong> (Create from template) y elegir de la lista <strong>Pages/Hugo</strong></p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2020/pages_hugo1.png" alt="pages hugo1"> </div> </div> <div class="paragraph"> <p>Gitlab te creará un proyecto completo usando <em>Hugo</em> un generador de blog estático, lo cual no quiere decir que tu blog no pueda modificarse, sino que generará páginas HTML puras sin necesidad de un motor que las genere, base de datos etc por lo que Gitlab podrá servirlas sin problema ni requisitos extras como sucede por ejemplo con WordPress</p> </div> <div class="paragraph"> <p>Una vez que se haya generado el proyecto (unos segundos), tu consola web será algo parecido a</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2020/pages_hugo2.png" alt="pages hugo2"> </div> </div> <div class="paragraph"> <p>Y desde ahí seleccionaremos <code>Web Ide</code> para acceder al interface de Gitlab que te permite añadir y editar ficheros de una forma cómoda (y de un sólo commit, lo cual veremos más adelante que significa)</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2020/pages_hugo3.png" alt="pages hugo3"> </div> </div> </div> </div> <div class="sect1"> <h2 id="configuración">Configuración</h2> <div class="sectionbody"> <div class="paragraph"> <p>En primer lugar vamos a configurar algunas cosas como el título. Seleccionamos el fichero <code>config.toml</code> y cambiamos algunos valores (ajusta a los tuyos):</p> </div> <div class="ulist"> <ul> <li> <p>baseurl= "https://danidorami.gitlab.io"</p> </li> <li> <p>title= "Blog de Dani"</p> </li> <li> <p>subtitle= "DaniDorami"</p> </li> </ul> </div> <div class="paragraph"> <p>y eliminamos algunas secciones de <a id="menu.main"></a> con <code>url</code> igual a <code>page/xxxxx</code> dejando unicamente la principal, about y tags</p> </div> <div class="paragraph"> <p>En la sección Author he quitado un montón de RRSS porque no las vamos a usar por ahora, pero tú puedes configurar las tuyas a tu gusto. Las que no tengas puedes eliminar la clave-valor</p> </div> </div> </div> <div class="sect1"> <h2 id="estructura_y_formato">Estructura y formato</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>content es el directorio de contenidos, donde crearemos los post&#8201;&#8212;&#8201;content/post será donde crearemos nuestros artículos&#8201;&#8212;&#8201;content/_index.md es el fichero destinado para la página principal</p> </li> <li> <p>static es el directorio donde pondremos elementos como imágenes&#8201;&#8212;&#8201;static/post será el directorio donde crearemos directorios para las imágenes</p> </li> </ul> </div> <div class="paragraph"> <p>A grandes rasgos trabajaremos de forma cotidiana en los subdirectorios <code>content/post</code> y <code>static/post</code></p> </div> <div class="paragraph"> <p>De <code>content/post</code> borraremos todos los ficheros que vienen de ejemplo (si quieres puedes estudiarlo primero y verás que son muy sencillos de seguir)</p> </div> <div class="paragraph"> <p>El formato principal a usar es Markdown. Este formato es texto plano con marcadores para que el interprete sepa qué queremos expresar. Así de esta forma, en las primeras líneas del fichero podemos añadir, por ejemplo, una sección de atributos entre dos líneas con <code>+</code> donde pondremos el título, fecha y el estado del post (preview o publicado) o bien mediante una sintáxis determinada indicar que queremos que incluya una imagen, cree una lista de elementos, etc.</p> </div> </div> </div> <div class="sect1"> <h2 id="primer_post">Primer post</h2> <div class="sectionbody"> <div class="paragraph"> <p>En <code>content/post</code> crearemos un fichero <code>primerpost.md</code> (mediante un desplegable que aparece al lado del directorio <code>post</code>) y escribiremos:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>+++ title="Mi primer post" date="2020-04-25" +++ Hola, esta frase es la que se verá en la lista de post y sirve para indicar de qué vas a hablar &lt;!--more--&gt; El texto anterior, sirve para que el interprete sepa donde cortar la introducción. A partir de aqui puedes escribir todo lo que quieras. Mira un tutorial de Markdown para aprender su sintaxis E intentaremos poner una imagen con esta sintaxis {{&lt;figure src="primerpost.jpg"&gt;}}</code></pre> </div> </div> <div class="paragraph"> <p>Nosotros nos hemos puesto esta chuleta frente al ordenador para recordar lo básico:</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2020/pages_hugo5.jpeg" alt="pages hugo5"> </div> </div> <div class="paragraph"> <p>En <code>static/post</code> subiremos un jpg <code>primerpost.jpg</code> usando el menu desplegable que aparece al lado del nombre del directorio</p> </div> <div class="paragraph"> <p>Una vez tengamos nuestro post a nuestro gusto, "subiremos" nuestros cambios haciendo "commit" (botón azul, abajo a la izquierda). Hasta que se coja soltura con los conceptos de git realizaremos un commit a la <code>master</code> en lugar de crear una rama nueva</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2020/pages_hugo4.png" alt="pages hugo4"> </div> </div> <div class="paragraph"> <p>en cuanto hagamos el commit, veremos un mensaje en la barra inferior donde aparecerá un reloj en azul indicándonos que Gitlab ha comenzado a crear nuestro site con los últimos cambios.</p> </div> <div class="paragraph"> <p>Si todo ha ido bien dispondremos de nuestro blog en la url que se comentaba al principio (<a href="https://usuario.gitlab.io" class="bare">https://usuario.gitlab.io</a>)</p> </div> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="Warning"></i> </td> <td class="content"> La primera vez tu web no estará disponible hasta pasados unos 10 minutos, mientras Gitlab aprovisiona el nombre, etc, pero las siguientes veces el cambio será casi inmediato (entre unos pocos segundos a menos de un minuto según la capacidad de los servidores de Gitlab en ese momento. Recuerda que estás usando una cuenta gratuita) </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="día_a_día">Día a día</h2> <div class="sectionbody"> <div class="paragraph"> <p>Obviamente los primeros post he ayudado a Dani a encontrar dónde crear los ficheros, subir la imágen, nombre del fichero , etc. pero una vez que teníamos preparado el fichero le he dejado escribir a su manera (me sigo preguntando si debería revisarle todas las faltas de ortografía. Por ahora sólo intervengo si me pregunta o si la falta es demasiado escandalosa)</p> </div> <div class="paragraph"> <p>En el tercer post ya recuerda cómo hacer commit y esperar a que el pipeline indique que ha terminado para ir a su post y leerlo.</p> </div> </div> </div> <div class="sect1"> <h2 id="pendientes">Pendientes</h2> <div class="sectionbody"> <div class="paragraph"> <p>A todos nos gusta escribir para que nos lean (creo) y una de las primeras cosas que se echan en falta es un sistema donde los usuarios puedan reaccionar a nuestros artículos. Existen muchas herramientas pero por ahora no las voy a incluir para intentar que escriba por el placer de escribir y que la familia, amigos y allegados puedan leerle, pero si te interesa saber el impacto de tus artículos una forma fácil de saberlo es habilitando en el fichero <code>config.toml</code> el id de una cuenta de Google Analytics que crees y así tener reports de visitas, países, etc</p> </div> <div class="paragraph"> <p>Aunque el editor web de Gitlab es muy sencillo pero potente me gustaría que comenzara a usar un editor local para tener mayor control de cuando y qué publicar, poder revisar en local antes, etc</p> </div> </div> </div> <div class="sect1"> <h2 id="conclusión">Conclusión</h2> <div class="sectionbody"> <div class="paragraph"> <p>Si realmente quieres tener un blog sencillo pero potente existen muchas formas de tenerlo sin tener que ceder el control a terceros como Medium, o usando formatos propietarios como WordPress. Siguiendo estos pasos todo tu blog te pertenece en todo momento y podrás ir migrandolo a otros sistemas más potentes de una forma (más o menos) sencilla</p> </div> <div class="paragraph"> <p>Por la parte de Dani no sé cuanto podré hacer que le dure las ganas de contaros sus movidas pero con un poco de interés no veo porqué no vas a poder crear algo parecido. Y SI TU CHAVAL/CHAVALA se anima a tener el suyo que no dude en preguntarle a Dani para que le asesore ;)</p> </div> </div> </div> Dani (9) ha comenzado su blog, o primeros pasos para montar el tuyo Introducción a Antora Jorge Aguilera 2020-04-11T00:00:00Z https://blog.jagedn.dev/blog/2020/intro-antora.html <div id="preamble"> <div class="sectionbody"> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="Warning"></i> </td> <td class="content"> Creo que para aprovechar al máximo esta entrada, puede resultar de interés la serie de post sobre asciidoc (<a href="intro-asciidoctor-1.html" class="bare">intro-asciidoctor-1.html</a>]) </td> </tr> </table> </div> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="Warning"></i> </td> <td class="content"> Este post es una breve introducción a Antora y no sirve como guía completa. Simplemente intenta dar una visión general de qué es, para qué sirve y las líneas generales de cómo usarlo. Para un mayor detalle recomiendo la documentación del proyecto, generada con el propio Antora (<a href="https://docs.antora.org/" class="bare">https://docs.antora.org/</a>) </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="antora">Antora</h2> <div class="sectionbody"> <div class="paragraph"> <p>Antora es un generador de sites estáticos (static-site) destinado, principalmente, a la documentación de proyectos con múltiples repositorios y/o versiones de desarrollo.</p> </div> <div class="paragraph"> <p>A diferencia, o mejor dicho, como añadido, a usar simplemente Asciidoctor en un proyecto es que mientras que este último toma los fuentes de un proyecto en un momento dado, Antora da un paso más y permite centralizar la documentación de múltiples repositorios así como utilizar diferentes ramas de cada uno de ellos.</p> </div> <div class="paragraph"> <p>Para entenderlo mejor veamos un caso de uso bastante común.</p> </div> <div class="paragraph"> <p>Supongamos que tenemos un producto muy molón donde participan tres equipos:</p> </div> <div class="ulist"> <ul> <li> <p>servicios, mantienen una aplicación REST que ofrece endpoints al core del negocio</p> </li> <li> <p>admin, usando los endpoints y otras fuentes de datos mantienen un dashboard de administración</p> </li> <li> <p>front, equipo que desarrolla el aplicativo que los clientes consumen en su día a día</p> </li> </ul> </div> <div class="paragraph"> <p>Cada equipo trabaja en un repositorio diferente y tiene a su vez diferentes ciclos de vida (con todas sus dependencias y problemas que esto pueda llevar) y cada uno tiene, dentro de su repositorio, su apartado de documentación. Como son gente que se preocupa por ella usan #doc-as-code como filosofía y tanto la documentación como el código residen en el mismo repo, se revisa que cada pull request lleve su documentación actualizada, etc. e incluso despliegan a un servidor cada proyecto despues de cada despliegue.</p> </div> <div class="paragraph"> <p>Pero el problema es que cada site es independiente del otro siendo la única forma de tenerlos enlazados el alojarlos en el mismo servidor pero en diferentes directorios. Así mismo tienen un infierno para mantener la documentación de las diferentes versiones del producto.</p> </div> <div class="paragraph"> <p>Es en estas situaciones donde Antora puede ayudarnos a centralizar en un único sitio la documentación de todos ellos como un único site.</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2020/multi-branch.svg" alt="Multibranch"> </div> <div class="title">Figure 1. <a href="https://antora.org/" class="bare">https://antora.org/</a></div> </div> </div> </div> <div class="sect1"> <h2 id="repo_central">Repo central</h2> <div class="sectionbody"> <div class="paragraph"> <p>Vamos a crear un proyecto que servirá como aglutinador del resto. Por simplicidad en este repo vamos a poner la documentación común a todos los demás, como puede ser documentación corporativo, un glosario de términos de negocio, etc</p> </div> <div class="paragraph"> <p>Crearemos la siguiente estructura de directorios y ficheros:</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/diag-00797abd87ecb9a2b8902248106df8c5.png" alt="Diagram" width="176" height="251"> </div> </div> <div class="paragraph"> <p>En <code>pages</code> va a residir nuestra documentación. Para este ejemplo va a consistir en simples páginas sin reutilizar partes, ni imágenes, etc y son documentos asciidoctor típicos, donde puedes incluir tus secciones, diagramas, etc. Así mismo puedes enlazar una página con otra pero en lugar de usar la macro <code>link</code> usaremos una nueva macro de Antora, <code>xref</code> la cual podemos ver como una extensión a aquella y que nos servirá más adelante para enlazar con otros módulos</p> </div> <div class="paragraph"> <p><code>nav.adoc</code> es un fichero asciidoctor destinado a customizar el menú de navegación de este módulo:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>* xref:index.adoc[Home] * xref:glossary.adoc[Glosario]</code></pre> </div> </div> <div class="paragraph"> <p><code>antora.yml</code> es el fichero que configura el módulo en cuestión. Cuando "apuntamos" al generador sobre un proyecto, este buscara de forma recursiva ficheros <code>antora.yml</code> y donde lo encuentre asumirá que se trata de un módulo de antora. De esta forma podemos tener múltiples módulos en un repo y en el directorio que queramos sin estar estado a uno determinado por Antora. El contenido de este fichero es simple:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>name: main title: Welcome to XXXX version: final nav: - modules/ROOT/nav.adoc</code></pre> </div> </div> <div class="paragraph"> <p>donde lo más destacado es el atributo <code>name</code> que da un nombre al módulo para ser encontrado cuando usemos <code>xref</code>. Versión es un identificador de texto y sirve para cualificar aún más cuando usemos <code>xref</code></p> </div> <div class="paragraph"> <p><code>public.yml</code> es el fichero de configuración principal y en donde decimos qué repositorios, ramas, diseño, etc vamos a usar para generar un site. Puede tener el nombre que quieras y puedes tener incluso varios cada uno de ellos destinado a generar un site diferente (por ejemplo <code>public.yml</code> para unir un moódulo de marketing junto con un modulo de tu API, y otro <code>private.yml</code> donde documentas la arquitectura interna, junto con código, etc)</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>site: title: My Site url: https://blog.jagedn.dev start_page: main::index.adoc content: sources: - url: ./ start_path: docs branches: HEAD - url: https://gitlab.org/jorge-aguilera/product-api.git start_path: src/docs branches: [develop, 1.0] ui: bundle: url: https://gitlab.com/antora/antora-ui-default/-/jobs/artifacts/master/raw/build/ui-bundle.zip?job=bundle-stable snapshot: true asciidoc: extensions: - asciidoctor-plantuml attributes: plantuml-server-url: 'http://www.plantuml.com/plantuml' plantuml-fetch-diagram: true output: clean: true dir: ./build/public destinations: - provider: archive</code></pre> </div> </div> <div class="paragraph"> <p>Básicamente le indicamos a antora qué repositorios queremos utilizar (en este ejemplo el propio repositorio más otro que se aloja en gitlab.org llamado product-api dentro del grupo jorge-aguilera). Además le indicamos de cada repositorio qué branch queremos usar. Puedes indicar varios branch separandolos por coma.</p> </div> <div class="paragraph"> <p>También le indicamos qué diseño usar (ui.zip) el cual tiene que ser una url a un fichero zip (local o una URL de donde obtenerlo). Por ahora vamos a usar un bundle público por defecto de Antora alojado en gitlab.com</p> </div> <div class="paragraph"> <p>Mediante <code>output</code> configuraremos el directorio de salida (recuerda que al poder tener varios ficheros yml puedes hacer que cada uno de ellos genere en un directorio diferente)</p> </div> </div> </div> <div class="sect1"> <h2 id="servicios">Servicios</h2> <div class="sectionbody"> <div class="paragraph"> <p>Por otra parte el equipo de Servicios ha creado una estructura similar en un directorio de su proyecto (por ejemplo <code>src/docs</code> tal como indicamos en <code>public.yml</code> en el apartado anterior)</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/diag-854b30c22709ee167251cda2d50d7e86.png" alt="Diagram" width="226" height="385"> </div> </div> <div class="paragraph"> <p>Recuerda que el directorio puede estar donde te interese en este proyecto y lo único que tenemos que especificarlo en el <code>yaml</code> que une los repositorios.</p> </div> <div class="paragraph"> <p>En este ejemplo hemos creado dos módulos: ROOT e internal pero sólo vamos a incluir el primero como parte de la documentación pública mientras que el otro lo podríamos usar en uno para cosas internas</p> </div> <div class="paragraph"> <p>Así mismo este proyecto tiene al menos 2 branches: <code>develop</code> y <code>1.0</code>. Para cada una de ellas Antora generará la documentación que contengan de forma separada <strong>permitiendo al lector cambiar entre ambas versiones</strong> en el mismo site</p> </div> </div> </div> <div class="sect1"> <h2 id="build">Build</h2> <div class="sectionbody"> <div class="paragraph"> <p>Para construir el site podemos instalar Antora y ejecutarla en local o bien si dispones de docker ejecutar el siguiente comando:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>ANTORA_IMAGE=jagedn/antora-plantuml docker run -u $UID --privileged -v $(pwd):/antora --rm -it $ANTORA_IMAGE --cache-dir=./.cache/antora public.yml</code></pre> </div> </div> <div class="paragraph"> <p>ANTORA_IMAGE es una imagen que he generado usando el Dockerfile oficial pero añadiendo la extensión de diagramas (no incluida por defecto). Si quieres usar la imagen oficial simplemente cambialo por <code>antora/antora</code></p> </div> <div class="paragraph"> <p>Como puedes ver el comando monta el directorio actual como un directorio <code>/antora</code> y le indica el yaml que queremos usar. Tras ejecutarse el propio docker borra el contenedor con --rm.</p> </div> <div class="paragraph"> <p>Así mismo como usamos repositorios externos podemos bajarlos una sola vez y mantenerlos en una cache o quitar esta opción si queremos que cada vez que ejecutemos el build se vuelva a bajar (recomendado al principio cuando estás haciendo muchos cambios en ambos proyectos)</p> </div> <div class="paragraph"> <p>Si todo ha ido bien únicamente resta publicar el contenido generado mediante algún sistema tipo Apache, Nginx, Github Pages, etc copiando el directorio <code>build/public</code> generado por el comando.</p> </div> </div> </div> <div class="sect1"> <h2 id="referencias">Referencias</h2> <div class="sectionbody"> <div class="paragraph"> <p>Algunos sites generados con Antora:</p> </div> <div class="ulist"> <ul> <li> <p>El propio Antora (<a href="https://docs.antora.org" class="bare">https://docs.antora.org</a>)</p> </li> <li> <p>Fedora (<a href="https://docs.fedoraproject.org/en-US/" class="bare">https://docs.fedoraproject.org/en-US/</a>)</p> </li> <li> <p>Couchbase (<a href="https://docs.couchbase.com/home/contribute/index.html" class="bare">https://docs.couchbase.com/home/contribute/index.html</a>)</p> </li> <li> <p>Puravida Software (<a href="https://puravida-software.gitlab.io/main/index.html" class="bare">https://puravida-software.gitlab.io/main/index.html</a>)</p> </li> </ul> </div> </div> </div> Breve introducción a Antora, un static site generator para proyectos multi-repositorio Groogle Raffle Jorge Aguilera 2020-03-22T00:00:00Z https://blog.jagedn.dev/blog/2020/mn-raffle-idea.html <div class="sect1"> <h2 id="idea">Idea</h2> <div class="sectionbody"> <div class="paragraph"> <p>mn-raffle es (otra) implementación de un sistema para sortear premios entre una serie de participantes, como por ejemplo los asistentes a una charla (presencial o virtual) usando GoogleSheet como repositorio para guardar los datos de los participantes y del sorteo</p> </div> <div class="paragraph"> <p>A diferencia de la implementación <a href="google-raffle.html" class="bare">google-raffle.html</a>, puramente en javascript y embebida en una hoja GoogleSheet, en esta ocasión vamos a usar una aplicación web, desarrollada en Micronaut para el backend y Vue para el frontend</p> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> El código del proyecto se encuentra alojado en <a href="https://gitlab.com/groogle/mn-raffle" class="bare">https://gitlab.com/groogle/mn-raffle</a> </td> </tr> </table> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> La aplicación desplegada se encuentra en <a href="https://mn-raffle-pvidasoftware.cloud.okteto.net/" class="bare">https://mn-raffle-pvidasoftware.cloud.okteto.net/</a> </td> </tr> </table> </div> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="Warning"></i> </td> <td class="content"> En este post NO voy a describir exhaustivamente paso a paso cómo se ha desarollado la aplicación, sino las partes que considero más interesantes </td> </tr> </table> </div> <div class="paragraph"> <p>Básicamente, un usuario organizador de un sorteo accederá a la aplicación vía web la cual, a través de llamadas REST solicitará datos de participantes, premios, etc contra el backend.</p> </div> <div class="paragraph"> <p>El backend a su vez no tendrá nada de persistencia sino que delegará en Google Sheet la misma. El usuario deberá haberse identificado ante el sistema usando así mismo el mecanismo de autentificación de Google.</p> </div> </div> </div> <div class="sect1"> <h2 id="arquitectura">Arquitectura</h2> <div class="sectionbody"> <div class="imageblock"> <div class="content"> <img src="/images/diag-67519beae77171541f4ee0c6d2ca22d3.png" alt="Diagram" width="228" height="612"> </div> </div> <div class="paragraph"> <p>Como se puede ver en el diagrama, la aplicación se divide en los siguientes componentes:</p> </div> <div class="ulist"> <ul> <li> <p>Una aplicación Vue (Javascript y HTML) que correrá en el navegador del usuario</p> </li> <li> <p>Un backend REST en Micronaut que devuelve la lista de participantes, premios y al que se le indica quién ha ganado qué.</p> </li> <li> <p>Google: GoogleSheet como persistencia y GoogleAuth como autentificación de usuarios ( para futuras funcionalidades que lo requieran)</p> </li> </ul> </div> <div class="paragraph"> <p>La aplicación constará de 2 módulos (client y server) que podrán ser desarrollados de forma independiente pero que se empaquetarán como un artefacto único para ser desplegado.</p> </div> </div> </div> <div class="sect1"> <h2 id="proyecto">Proyecto</h2> <div class="sectionbody"> <div class="paragraph"> <p>Como ya se ha mencionado, el proyecto va a ser un multi-module de Gradle, client y backend.</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/diag-ad7f45157c449483bc979bea9c6444d1.png" alt="Diagram" width="102" height="175"> </div> </div> <div class="sect2"> <h3 id="client">Client</h3> <div class="paragraph"> <p>Para la parte cliente (Vue) lo normal es usar gulp, o herramientas similares para construirlo, sin embargo gracias a los plugins <code>npm</code> que tenemos en gradle, vamos a usarlo tanto para construir la parte cliente como la parte server y de esta forma tener una única tarea capaz de construir ambos y juntarlos en un único artefacto a desplegar.</p> </div> <div class="paragraph"> <p>Por lo demás el proyecto semilla lo crearemos mediante <code>vue-cli</code> siguiendo los tutoriales disponibles en la página oficial de Vue siendo relevante que usaremos:</p> </div> <div class="ulist"> <ul> <li> <p>bootstrap-vue para la parte visual</p> </li> <li> <p>route para enrutar las diferentes partes de la aplicación</p> </li> <li> <p>vuex para gestionar el estado de la misma</p> </li> </ul> </div> <div class="paragraph"> <p>Así mismo crearemos un interface <code>service</code> que sirva para dialogar con el backend con una implementación <code>fake</code> a usar en el desarrollo del cliente y evitar la necesidad de tener el backend levantado</p> </div> </div> <div class="sect2"> <h3 id="backend">Backend</h3> <div class="paragraph"> <p>El server será una aplicación micronaut típica con los siguientes componentes:</p> </div> <div class="ulist"> <ul> <li> <p>micronaut security, en concreto usaremos Google para la autentificación</p> </li> <li> <p>groogle-sheet, un DSL que nos permite acceder a una hoja Google de forma fácil</p> </li> </ul> </div> <div class="paragraph"> <p>Debido a que el backend accederá a servicios remotos en Google, deberemos de crear un proyecto en Google Cloud Platform para obtener unas credenciales de servicio. Descargaremos el fichero JSON que las contiene pero nos aseguraremos que <strong>NO se versiona junto al código</strong></p> </div> <div class="paragraph"> <p>Para ejecutar el server y poder acceder a la hoja de cálculo que nos indique el usuario deberemos tener una variable de entorno GOOGLE_APPLICATION_CREDENTIALS apuntando a la ruta completa del fichero JSON anterior.</p> </div> </div> <div class="sect2"> <h3 id="google">Google</h3> <div class="paragraph"> <p>La persistencia se va a realizar utilizando GoogleSheet.</p> </div> <div class="paragraph"> <p>El organizador del sorteo podrá crear tantos documentos y hojas como desee, correspondiendo cada una de ellas a un sorteo.</p> </div> <div class="paragraph"> <p>En la hoja el organizador dispondrá de los nombres de los participantes en una columna, los premios a sortear en otra junto con la cantidad de cada uno de ellos y el sistema anotará a qué participante le ha tocado qué premio.</p> </div> <div class="paragraph"> <p>Si se desea se puede proporcionar un email por cada participante para notificarle vía correo que ha sido agraciado con un premio.</p> </div> <div class="paragraph"> <p>La imagen siguiente es un ejemplo con las filas y columnas a utilizar en cada hoja:</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2020/mn-raffle.png" alt="mn raffle"> </div> </div> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="Warning"></i> </td> <td class="content"> Para que el backend pueda acceder al documento este deberá ser compartido con la cuenta de servicio que se creó en Google Cloud Console. </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="backend_2">Backend</h2> <div class="sectionbody"> <div class="paragraph"> <p>Como se ha comentado el backend será una aplicación Micronaut ofreciendo un API:</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/diag-43163a1c8a858e3fb35210a7a9243b74.png" alt="Diagram" width="909" height="125"> </div> </div> <div class="paragraph"> <p>Mediante <code>UserController</code> el front podrá obtener detalles del organizador del sorteo (previa autentificación del mismo usando Google como proveedor de autentificación) como el nombre y el email. Sólo se usa para para fines estadísticos de uso.</p> </div> <div class="paragraph"> <p><code>RaffleController</code> es el encargado de ofrecer la lista de participantes así como de precios disponibles en cada momento. Requiere para ello que se le indique el <code>id</code> de la hoja de Google así como el nombre del tab que se quiere usar para ese sorteo.</p> </div> <div class="paragraph"> <p>Así mismo acepta que tras un sorteo se le indique quién ha salido ganador y aceptado el premio o bien si no está presente para no volver a ofrecerlo en la lista de participantes.</p> </div> <div class="paragraph"> <p>Para que el backend pueda acceder a la hoja indicada el propietario de esta deberá haberla compartido con una cuenta de servicio creada para ello a través de las opciones de compartir disponible en la propia hoja de GoogleSheet.</p> </div> <div class="paragraph"> <p>Raffle usa el DSL 'Groogle' para leer y escribir en la hoja. Por ejemplo, para leer la lista de participantes:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="groovy">List&lt;Participant&gt; loadParticipants(String sheetId, String tabId){ List people = [] sheetService.withSpreadSheet sheetId, { withSheet tabId, { writeRange"A3", "C99", { get().eachWithIndex{ def entry, int i -&gt; <i class="conum" data-value="1"></i><b>(1)</b> if( entry[0] &amp;&amp; !entry[1]) people.add new Participant(name:entry[0], email: entry[2]) } } } } people.sort { Math.random() } }</code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>Leemos un rango de filas-columnas y rellenamos un array con aquellas que tienen datos</td> </tr> </table> </div> <div class="paragraph"> <p>Para escribir en la hoja, por ejemplo si un participante no ha acudido y no volver a ofrecerlo, el código sería:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="groovy"> Boolean notPressent(String sheetId, String tabId, String name){ sheetService.withSpreadSheet sheetId, { withSheet tabId, { List&lt;List&lt;String&gt;&gt; range = writeRange("A3", "C99").get() <i class="conum" data-value="1"></i><b>(1)</b> List&lt;String&gt; rwinner = range.find{ it[0] &amp;&amp; it[0] == name} rwinner[1] = "NOT PRESSENT" writeRange("A3","C99").set(range) <i class="conum" data-value="2"></i><b>(2)</b> } } true }</code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>Leemos un rango determinado</td> </tr> <tr> <td><i class="conum" data-value="2"></i><b>2</b></td> <td>escribimos un array en la hoja</td> </tr> </table> </div> <div class="paragraph"> <p>Como se ha mencionado, el backend contendrá a su vez el build del client como recursos incluidos en el propio jar. De esta forma evitamos requerir otro componente para servir la parte html+javascript</p> </div> </div> </div> <div class="sect1"> <h2 id="client_2">Client</h2> <div class="sectionbody"> <div class="paragraph"> <p>El client va a consistir en una aplicación Vue (con route+state y bootstrap-vue para la parte visual)</p> </div> <div class="paragraph"> <p>Al ser un submodulo del proyecto Gradle, podemos usar el mismo IDE a la vez que mantenemos alineados los dos proyectos.</p> </div> <div class="paragraph"> <p>Lo único que neceitamos para ello es establecer "un puente" entre Gradle y npm para lo que usaremos el plugin <code>org.ysb33r.nodejs.npm</code> de Gradle y crearemos unas task especificas para construir y ejecutar la parte cliente</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>plugins { id 'org.ysb33r.nodejs.base' version '0.6.2' id 'org.ysb33r.nodejs.npm' version '0.6.2' } task npmInstall( type : org.ysb33r.gradle.nodejs.tasks.NpmTask ) { group 'build' description = 'Install dependencies' command 'install' } task start( type : org.ysb33r.gradle.nodejs.tasks.NpmTask ) { group 'build' description = 'Run the client app' command 'run' cmdArgs 'serve' } //others task</code></pre> </div> </div> <div class="sect2"> <h3 id="state">State</h3> <div class="paragraph"> <p>La aplicación va a consistir en unos estados muy simples</p> </div> <div class="listingblock"> <div class="title">src/store/index.ts</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="javascript">class State { busy = false; user = { name:'', email:'' }; googleForm = { sheetId:'', tabId:'' }; participants = []; prizes = []; winner = ''; prize = ''; }</code></pre> </div> </div> <div class="paragraph"> <p>con unas actions también simples:</p> </div> <div class="listingblock"> <div class="title">src/store/index.ts</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="javascript"> actions: { //.... fetchParticipants( context ){ return api .loadParticipants(context.state.googleForm) .then((participants: any) =&gt; context.commit('participants', participants)) }, //.... raffle( context, prize ){ const arr = context.state.participants const winner = arr[Math.floor(Math.random() * arr.length)] context.commit('prize', prize) context.commit('winner', winner['name']) }, acceptWinner( context){ return api .winner( context.state.googleForm, context.state.prize, context.state.winner) .then( () =&gt; context.dispatch('fetchPrizes') ) .then( () =&gt; context.dispatch('fetchParticipants') ) }, notPressent(context){ return api .notPressent( context.state.googleForm, context.state.winner) .then( () =&gt; context.dispatch('fetchParticipants') ) } },</code></pre> </div> </div> <div class="paragraph"> <p>Usando la configuración por entorno de Vue podremos indicar al store qué implementación de API usar:</p> </div> <div class="listingblock"> <div class="title">env.development</div> <div class="content"> <pre class="prettyprint highlight"><code>VUE_APP_API_CLIENT = 'mock'</code></pre> </div> </div> <div class="listingblock"> <div class="title">env.production</div> <div class="content"> <pre class="prettyprint highlight"><code>VUE_APP_API_CLIENT = 'server'</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="service">Service</h3> <div class="paragraph"> <p>Para poder desarrollar el front sin depender de tener corriendo el backend, vamos a usar un <code>mock</code> que devolverá datos de pruebas contenidos en un JSON con un cierto retraso, simulando que se está realizando una petición http:</p> </div> <div class="listingblock"> <div class="title">src/services/mock/index.ts</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="javascript">const user = mock.user const prizes = mock.prizes const vparticipants = mock.participants const mockFetchData = (mockData: any, time = 0) =&gt; { return new Promise((resolve) =&gt; { setTimeout(() =&gt; { resolve(mockData) }, time) }) } export default new class { loadParticipants(groogleData: any){ return mockFetchData(vparticipants, 1000) // wait 1s before returning posts } // others methods }</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="componentes">Componentes</h3> <div class="paragraph"> <p>Por último tendremos una serie de componentes aislados entre sí y desacoplados del api mediante el <code>store</code> anterior</p> </div> <div class="paragraph"> <p>Así un componente como el de capturar la hoja y tab a usar, <code>SheetInput</code>, simplemente se adjunta al <code>state</code> y cuando el usuario rellena el formulario este se actualiza automaticamente.</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="html"> &lt;b-input id="inline-form-input-tab" v-model="$store.state.googleForm.tabId" class="mb-2 mr-sm-2 mb-sm-0" required placeholder="Sheet 1"&gt; &lt;/b-input&gt;</code></pre> </div> </div> <div class="paragraph"> <p>Cuando el usuario pulsa el botón de cargar, el componente ejecutará un <code>action</code> del <code>store</code> que cargue los participantes y premios:</p> </div> <div class="listingblock"> <div class="title">SheetInput.vue</div> <div class="content"> <pre class="prettyprint highlight"><code> ... &lt;b-form @submit="load" v-if="$store.state.user.name" inline&gt; ... @Component export default class SheetInput extends Vue { private busy = false load() { this.$store.dispatch('fetchPrizes') this.$store.dispatch('fetchParticipants') } }</code></pre> </div> </div> <div class="paragraph"> <p>Así mismo <code>WinnerModal</code> es un componente que mostrará un diálogo modal cuando el sistema eliga un ganador de un premio para que el organizador pueda indicar si lo quiere o no o incluso si no está presente. Para ello se subscribe como un listener del <code>$store</code> esperando a que se produzca una mutación del <code>winner</code> momento en el cual simplemente mostrará el diálogo:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>created(){ this.$store.subscribe( (mutation, state) =&gt;{ if( mutation.type === 'winner'){ this.lastWinner = state.winner this.$bvModal.show('modal-winner') } }) }</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="build_and_deploy_okteto">Build and deploy (Okteto)</h2> <div class="sectionbody"> <div class="paragraph"> <p>Una vez que queramos desplegar una nueva versión simplemente ejecutaremos <code>./gradlew assembleServerAndClient</code> la cual preparará un jar con los dos componentes.</p> </div> <div class="paragraph"> <p>Así mismo mediante el plugin <code>jib</code> de Gradle podremos generar y subir una imagen Docker con la aplicación a DockerHub (o a tu repositorio).</p> </div> <div class="paragraph"> <p>Como plataforma donde desplegar la aplicación he elegido Okteto (<a href="https://okteto.com" class="bare">https://okteto.com</a>) el cual cuenta con un plan gratuito muy generoso donde ejecutar este tipo de aplicaciones usando Kubernetes.</p> </div> <div class="paragraph"> <p>Para kubernetizar la aplicación simplemente usamos el fichero que nos creó micronaut (con algunos ajustes)</p> </div> <div class="listingblock"> <div class="title">k8s.yml</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="yaml">apiVersion: apps/v1 kind: Deployment metadata: name: "mn-raffle" spec: selector: matchLabels: app: "mn-raffle" template: metadata: labels: app: "mn-raffle" spec: volumes: - name: google-cloud-key secret: secretName: mn-raffle-key containers: - name: "mn-raffle" image: "jagedn/mn-raffle" imagePullPolicy: "Always" volumeMounts: - name: google-cloud-key mountPath: /var/secrets/google env: - name: GOOGLE_APPLICATION_CREDENTIALS value: /var/secrets/google/client_secret.json - name: MICRONAUT_SECURITY_OAUTH2_CLIENTS_GOOGLE_CLIENT_SECRET valueFrom: configMapKeyRef: name: mn-raffle key: google_client_secret - name: MICRONAUT_SECURITY_OAUTH2_CLIENTS_GOOGLE_CLIENT_ID valueFrom: configMapKeyRef: name: mn-raffle key: google_client_id ports: - name: http containerPort: 8080 readinessProbe: httpGet: path: /health port: 8080 initialDelaySeconds: 5 timeoutSeconds: 3 livenessProbe: httpGet: path: /health port: 8080 initialDelaySeconds: 5 timeoutSeconds: 3 failureThreshold: 10 --- apiVersion: v1 kind: Service metadata: name: "mn-raffle" annotations: dev.okteto.com/auto-ingress: "true" spec: selector: app: "mn-raffle" type: ClusterIP ports: - port: 8080 protocol: TCP targetPort: 8080</code></pre> </div> </div> <div class="paragraph"> <p>mediante el comando `kubectl apply -f k8s.yml</p> </div> <div class="paragraph"> <p>(como se puede observar las credenciales se encuentran guardadas en un configMap dentro del kubernetes)</p> </div> </div> </div> <div class="sect1"> <h2 id="ejemplo">Ejemplo</h2> <div class="sectionbody"> <div class="paragraph"> <p>A continuación se muestran algunas pantallas de cómo sería un sorteo</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2020/mn-raffle-1.png" alt="mn raffle 1"> </div> <div class="title">Figure 1. FormEntry</div> </div> <div class="imageblock"> <div class="content"> <img src="/images/2020/mn-raffle-2.png" alt="mn raffle 2"> </div> <div class="title">Figure 2. PariticpantsAndPrizes</div> </div> <div class="imageblock"> <div class="content"> <img src="/images/2020/mn-raffle-3.png" alt="mn raffle 3"> </div> <div class="title">Figure 3. Winner</div> </div> <div class="imageblock"> <div class="content"> <img src="/images/2020/mn-raffle-4.png" alt="mn raffle 4"> </div> <div class="title">Figure 4. DiscountPrizeAfterWinner</div> </div> </div> </div> Groogle Raffle, una aplicación para sorteo de premios entre participantes basada en Google Sheet Introducción a Asciidoc y Asciidoctor (5): diagramas Jorge Aguilera 2020-02-25T00:00:00Z https://blog.jagedn.dev/blog/2020/intro-asciidoctor-5.html <div id="preamble"> <div class="sectionbody"> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> Este post es la continuación a <a href="intro-asciidoctor-4.html" class="bare">intro-asciidoctor-4.html</a> </td> </tr> </table> </div> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="Warning"></i> </td> <td class="content"> Yo utilizo sistemas Linux por lo que los comando que indico para instalar software estan orientados a este. Si tienes interés en saber cómo hacerlo en Windows, escribeme y lo investigaré </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="objetivo">Objetivo</h2> <div class="sectionbody"> <div class="paragraph"> <p>En este post veremos cómo crear diferentes tipos de diagramas usando sólo un editor de texto.</p> </div> <div class="paragraph"> <p>Los tipos de diagramas son variados y de diferentes ámbitos como:</p> </div> <div class="ulist"> <ul> <li> <p>Diagramas de clases, relaciones, actividades, etc tipicos de UML</p> </li> <li> <p>Diagramas de arquitectura software</p> </li> <li> <p>Diagramas Gant para organización de proyectos, tareas, equipos, etc</p> </li> <li> <p>Representación de componentes UI (textbox, listbox, buttons, checks, etc)</p> </li> <li> <p>Gramatica, para representar partes de una sintaxis por ejemplo</p> </li> <li> <p>Otros</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="requisitos">Requisitos</h2> <div class="sectionbody"> <div class="paragraph"> <p>El primer requisito que necesitamos es tener instalado asciidoctor, tal como se ha explicado en los post anteriores de esta serie.</p> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> Para este post vamos a usar asciidoctorj </td> </tr> </table> </div> <div class="paragraph"> <p><code>$sdk man install asciidoctorj</code></p> </div> <div class="paragraph"> <p>La instalacion de asciidoctorj incluye por defecto el segundo requisito que necesitaremos para dotar a nuestros documentos de diagramas, <code>asciidoctor-diagram</code></p> </div> <div class="paragraph"> <p>En caso de que estés usando la versión ruby deberás instalar la gema correspondiente:</p> </div> <div class="paragraph"> <p><code>$ gem install asciidoctor-diagram</code></p> </div> <div class="paragraph"> <p>En realidad <em>asciidoctor_diagram</em> por si mismo NO genera ningun diagrama, sino que podriamos decir que es el "pegamento" entre <em>asciidoctor</em> y los diferentes generadores de diagramas. En la página oficial podemos ver los tipos soportados:</p> </div> <div class="literalblock"> <div class="content"> <pre>The extensions supports the AsciiToSVG, BlockDiag (BlockDiag, SeqDiag, ActDiag, NwDiag), Ditaa, Erd, GraphViz, Mermaid, Msc, PlantUML, Shaape, SvgBob, Syntrax, UMLet, Vega, Vega-Lite and WaveDrom syntax.</pre> </div> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> Esta lista no es exclusiva, pudiendo incorporar nuevos interpretes gracias al modelo de extensiones de Asciidoctor. Yo mismo he hecho alguna extension en Java y es realmente fácil </td> </tr> </table> </div> <div class="paragraph"> <p>Si utilizamos el método indicado anteriormente para la instalación de Asciidoctor (AsciidoctorJ) tendremos incluidos por defecto los diagramas Ditaa y PlantUML (tal vez algun otro) asi que si vamos a usar algun otro tipo tendremos que tener instalado el ejecutable correspondiente.</p> </div> <div class="paragraph"> <p>De forma generica, y como consejo, yo siempre instalo Graphviz puesto que muchos de estos generadores lo usan</p> </div> <div class="paragraph"> <p><code>$sudo apt-get install graphviz</code></p> </div> <div class="sect2"> <h3 id="mermaid">Mermaid</h3> <div class="paragraph"> <p>Si por ejemplo queremos generar diagramas usando Mermaid tendremos que ejecutar:</p> </div> <div class="paragraph"> <p><code>$ npm install -g mermaid.cli</code></p> </div> <div class="paragraph"> <p>o si usamos yarn</p> </div> <div class="paragraph"> <p><code>$ yarn global add mermaid.cli</code></p> </div> </div> <div class="sect2"> <h3 id="syntrax">Syntrax</h3> <div class="paragraph"> <p>Por su parte, syntrax esta desarrollado en python por lo que tendremos que tener instalado este software y ejecutar</p> </div> <div class="paragraph"> <p><code>$pip install --upgrade syntrax</code></p> </div> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="Warning"></i> </td> <td class="content"> Efectivamente, como has podido adivinar te toca conocer la sintaxis de cada generador que quieras utilizar. Asciidoctor-diagram solo sirve como puente entre tu documento y el generador </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="sintaxis">Sintaxis</h2> <div class="sectionbody"> <div class="paragraph"> <p>La potencia de poder adjuntar a nuestra documentacion diagramas definidos en formato texto es inmensa, pudiendo aprovechar todas las caracteristicas propias de la filosofía "doc-as-code", es decir, crear y manejar nuestra documentación igual que lo hacemos con el código: editores de texto, versionable, mergear ramas, aprovaciones, despliegues continuos, etc</p> </div> <div class="sect2"> <h3 id="include_implícito">Include implícito</h3> <div class="paragraph"> <p>Asi pues la sintaxis para definir un diagrama a lo largo de nuestra documentación consiste simplemente en crear un bloque donde se especifique el tipo de diagrama que vamos a usar e incluir el cuerpo del diagrama dentro del mismo:</p> </div> <div class="paragraph"> <p>Por ejemplo:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="asciidoctor">Este parrafo es parte de nuestra documentacion, donde queremos poner a continuacion un diagrama de clases plantuml::fichero_mi_diagrama.txt[]</code></pre> </div> </div> <div class="paragraph"> <p>donde <em>fichero_mi_diagrama.txt</em> puede ser un fichero de texto como el siguiente:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>class Car Driver - Car : drives &gt; Car *- Wheel : have 4 &gt; Car -- Person : &lt; owns</code></pre> </div> </div> <div class="paragraph"> <p>De tal forma que nuestro documento se veria como:</p> </div> <div class="literalblock"> <div class="content"> <pre>Este parrafo es parte de nuestra documentación, donde queremos poner a continuación un diagrama de clases</pre> </div> </div> <div class="imageblock"> <div class="content"> <img src="/images/diag-ce10eaf325fe034a3c9fe082d7ae5d2e.png" alt="Diagram" width="376" height="193"> </div> </div> </div> <div class="sect2"> <h3 id="bloques">Bloques</h3> <div class="paragraph"> <p>Si no quieres crear más ficheros también puedes usar bloques para incluir tus diagramas junto con la documentacion:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>Este parrafo es parte de nuestra documentación, donde queremos poner a continuación un diagrama de clases [plantuml] ++++ class Car Driver - Car : drives &gt; Car *- Wheel : have 4 &gt; Car -- Person : &lt; owns ++++</code></pre> </div> </div> <div class="paragraph"> <p>Y el resultado sería el mismo.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="ejemplos">Ejemplos</h2> <div class="sectionbody"> <div class="paragraph"> <p>A continuacion algunos diagramas de ejemplos generados con Ditaa, PlantUML, Mermaid y Syntrax</p> </div> <div class="sect2"> <h3 id="diseño_software">Diseño Software</h3> </div> <div class="sect2"> <h3 id="procesos">Procesos</h3> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>[ditaa] .... +-------------+ | Asciidoctor |-------+ | diagram | | +-------------+ | PNG out ^ | | ditaa in | | v +--------+ +--------+----+ /---------------\ | | --+ Asciidoctor +--&gt; | | | Text | +-------------+ | Beautiful | |Document| | !magic! | | Output | | {d}| | | | | +---+----+ +-------------+ \---------------/ : ^ | Lots of work | +-----------------------------------+ ....</code></pre> </div> </div> <div class="imageblock"> <div class="content"> <img src="/blog/2020/diagram/ditaa.png" alt="Ditaa box"> </div> </div> </div> <div class="sect2"> <h3 id="uml">UML</h3> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>(incluir complex.txt)</code></pre> </div> </div> <div class="imageblock"> <div class="content"> <img src="/blog/2020/diagram/complex.png" alt="Clases"> </div> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>(incluir parallel.txt)</code></pre> </div> </div> <div class="imageblock"> <div class="content"> <img src="/blog/2020/diagram/parallel.png" alt="Activiy Parallel"> </div> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>(incluir conditional.txt)</code></pre> </div> </div> <div class="imageblock"> <div class="content"> <img src="/blog/2020/diagram/conditional.png" alt="Activiy Conditional"> </div> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>[mermaid] ++++ classDiagram Animal &lt;|-- Duck Animal &lt;|-- Fish Animal &lt;|-- Zebra Animal : +int age Animal : +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() } ++++</code></pre> </div> </div> <div class="imageblock"> <div class="content"> <img src="/blog/2020/diagram/mermaid.png" alt="Clases con Mermaid"> </div> </div> </div> <div class="sect2"> <h3 id="arquitectura">Arquitectura</h3> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>[plantuml] ++++ !define SPRITESURL https://raw.githubusercontent.com/rabelenda/cicon-plantuml-sprites/v1.0/sprites !includeurl SPRITESURL/tomcat.puml !includeurl SPRITESURL/kafka.puml !includeurl SPRITESURL/java.puml !includeurl SPRITESURL/cassandra.puml !includeurl SPRITESURL/python.puml !includeurl SPRITESURL/redis.puml title Cloudinsight sprites example skinparam monochrome true rectangle "&lt;$tomcat&gt;\nwebapp" as webapp queue "&lt;$kafka&gt;" as kafka rectangle "&lt;$java&gt;\ndaemon" as daemon rectangle "&lt;$python&gt;\ndaemon2" as daemon2 database "&lt;$cassandra&gt;" as cassandra database "&lt;$redis&gt;" as redis webapp -&gt; kafka kafka -&gt; daemon kafka -&gt; daemon2 daemon --&gt; cassandra daemon2 --&gt; redis ++++</code></pre> </div> </div> <div class="imageblock"> <div class="content"> <img src="/blog/2020/diagram/arquitectura.png" alt="Arquitectura software"> </div> </div> </div> <div class="sect2"> <h3 id="gestion_proyectos">Gestion proyectos</h3> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>[mermaid] ++++ gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2014-01-01, 30d Another task :after a1 , 20d section Another Task in sec :2014-01-12 , 12d another task : 24d ++++</code></pre> </div> </div> <div class="imageblock"> <div class="content"> <img src="/blog/2020/diagram/grant.png" alt="Grant"> </div> </div> </div> <div class="sect2"> <h3 id="uiux">UI/UX</h3> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>(incluir salt.txt)</code></pre> </div> </div> <div class="imageblock"> <div class="content"> <img src="/blog/2020/diagram/salt.png" alt="UI"> </div> </div> <div class="imageblock"> <div class="content"> <img src="/blog/2020/diagram/salt2.png" alt="UI"> </div> </div> <div class="imageblock"> <div class="content"> <img src="/blog/2020/diagram/salt3.png" alt="UX"> </div> </div> </div> <div class="sect2"> <h3 id="sintaxis_2">Sintaxis</h3> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>(incluir syntrax1.txt)</code></pre> </div> </div> <div class="imageblock"> <div class="content"> <img src="/blog/2020/diagram/syntrax1.png" alt="Railroad"> </div> </div> </div> <div class="sect2"> <h3 id="otros">Otros</h3> <div class="paragraph"> <p><a href="https://gitlab.com/snippets/1779830/raw">Source Tabla periódica</a></p> </div> <div class="imageblock"> <div class="content"> <img src="/blog/2020/diagram/tablaperiodica.png" alt="Tabla periodica"> </div> </div> </div> </div> </div> Breve introducción al lenguaje de marcado asciidoc y su ecosistema, parte 5 Build a Telegram Bot using Netlify Jorge Aguilera 2020-02-01T00:00:00Z https://blog.jagedn.dev/blog/2020/telegram-bot-netlify.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>In this post I&#8217;ll show you how to build a (simple) bot for Telegram using Netlify lambda functions for execution.</p> </div> </div> </div> <div class="sect1"> <h2 id="tocamos_a_bot_divide_an_expense">"Tocamos a&#8230;&#8203;" bot (divide an expense)</h2> <div class="sectionbody"> <div class="paragraph"> <p>@tocamosbot is an <code>inline</code> Bot who accepts a number (a bill for example), ask for how many participants are in the group and returns the division or how much every participant needs to pay (a simple division)</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2020/tocamos1.png" alt="tocamos1"> </div> </div> <div class="dlist"> <dl> <dt class="hdlist1">NOTE</dt> <dd> <p>Yes, you can do the same with a calculator but whit @tocamosbot the result is posted in the Chat ;)</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="requirements">Requirements</h2> <div class="sectionbody"> <div class="paragraph"> <p>We&#8217;ll need:</p> </div> <div class="ulist"> <ul> <li> <p>a Telegram account in your mobile phone</p> </li> <li> <p>a Netlify account (free tier) where host our bot</p> </li> <li> <p>a Github/Gitlab/Bitbucket repository where upload our code. Netlify will read from there</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="first_steps">First steps</h2> <div class="sectionbody"> <div class="paragraph"> <p>Firstly we&#8217;ll use the @BotFather bot (from Telegram) to create our bot, so find this bot and start a <em>conversation</em> with it.</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2020/tocamos2.png" alt="tocamos2"> </div> </div> <div class="paragraph"> <p>And after you can customize your bot:</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2020/tocamos3.png" alt="tocamos3"> </div> </div> <div class="paragraph"> <p>The most <strong>IMPORTANT</strong> thing in this conversation is <strong>NOT TO SHARE THE API TOKEN</strong>. Be sure you don&#8217;t store it into your code, use Environment variables to access it.</p> </div> </div> </div> <div class="sect1"> <h2 id="coding">Coding</h2> <div class="sectionbody"> <div class="paragraph"> <p>In an empty directory create following files:</p> </div> <div class="listingblock"> <div class="title">package.json</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="json">{ "name": "tocamosbot", "version": "1.0.0", "description": "", "main": "functions/tocamos.js", "dependencies": { "netlify-lambda": "^2.0.1", "telegraf": "^3.36.0" }, "scripts": { "postinstall": "netlify-lambda install", "buildNetlify": "netlify-lambda build functions", "test": "echo \"Error: no test specified\" &amp;&amp; exit 1", "devNetlify": "netlify-lambda serve functions" }, "keywords": [], "author": "", "license": "ISC" }</code></pre> </div> </div> <div class="listingblock"> <div class="title">netlify.toml</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="yaml">[build] publish = "build" command = "find . -name \*.mjs -type f -delete; npm run buildNetlify" functions = "build/functions"</code></pre> </div> </div> <div class="paragraph"> <p>Create a <code>functions</code> subdirectory and create following file into it:</p> </div> <div class="listingblock"> <div class="title">functions/tocamosa.js</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="javascript">const Telegraf = require('telegraf'); const startAction = require('./tocamosa/start') const inlineAction = require('./tocamosa/inline') const bot = new Telegraf(process.env.TOCAMOSA_BOT_TOKEN); bot.start(ctx =&gt; { return startAction(ctx) }) bot.on('inline_query', (ctx) =&gt; { return inlineAction(ctx) }) exports.handler = async event =&gt; { await bot.handleUpdate(JSON.parse(event.body)); return { statusCode: 200, body: '' }; }</code></pre> </div> </div> <div class="paragraph"> <p>Create another subdirectory <code>functions/tocamosa</code> and put these files:</p> </div> <div class="listingblock"> <div class="title">functions/tocamosa/start.js</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="javascript">module.exports = async (ctx, porciento) =&gt; { return ctx.reply(`Hi`) // better explain what the bot does }</code></pre> </div> </div> <div class="listingblock"> <div class="title">functions/tocamos/inline.js</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="javascript">module.exports = async (ctx) =&gt; { const search = (ctx.inlineQuery.query || "") if ( search==="" || isNaN(search)) { return } else { const answer = [] const tocamos = [2,3,4,5,6,7,8,9,10] tocamos.forEach(function(tocamos) { answer.push({ id: tocamos, title: tocamos+" ("+search+" entre "+tocamos+")", type: 'article', input_message_content: { message_text: "Tocais cada uno a " + (Math.round(search/tocamos)*100)/100+" ("+search+" entre "+tocamos+")", parse_mode: 'HTML' } }) }) return ctx.answerInlineQuery(answer) } }</code></pre> </div> </div> <div class="paragraph"> <p>The code is very simple:</p> </div> <div class="paragraph"> <p><code>tocamosa.js</code> is the entry point to our bot and we prepare all available commands to redirect to the right function.</p> </div> <div class="paragraph"> <p><code>start.js</code> is a simple response when an user start a conversation with the bot</p> </div> <div class="paragraph"> <p><code>inline.js</code> has the main logic. It&#8217;s called every time the user use the bot in an inline way and Telegram calls the bot providing an argument with the text written by the user in <code>ctx.inlineQuery.query</code></p> </div> <div class="paragraph"> <p>After check if the argument is a number we prepare a menu with 10 entries (more than 10 is a wedding and the fathers pay) putting in an array 10 elements.</p> </div> <div class="paragraph"> <p>Every element has an <code>index</code> (required but you can use whatever you want as Id), a <code>title</code> to show and a message_text to show in case the element is selected.</p> </div> </div> </div> <div class="sect1"> <h2 id="commit_and_push">Commit and push</h2> <div class="sectionbody"> <div class="paragraph"> <p>You need to commit and push all files into your git repository. For example, after created the repo into your Git provider:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="console">git init git repository add [url-to-your-repository] git commit -a -m "First commit, as usual" git push</code></pre> </div> </div> <div class="paragraph"> <p>Check against your Git provider that all the files are uploaded and they follow the right structure</p> </div> </div> </div> <div class="sect1"> <h2 id="netlify">Netlify</h2> <div class="sectionbody"> <div class="paragraph"> <p>Once you have a Netlify account you need to create a new <code>site</code> from your Git repository using <code>New site from Git</code> and linked it with your repository (you&#8217;ll need to authorize the access)</p> </div> <div class="paragraph"> <p>From now, every push you do in your repository will fire a <code>build</code> and <code>deploy</code> process into Netlify.</p> </div> <div class="paragraph"> <p>In the last steps (or once deploy into the Build section) you can provide the API TOKEN of your bot using the Environment section.</p> </div> <div class="paragraph"> <p>As we are using in our code <code>const bot = new Telegraf(process.env.TOCAMOSA_BOT_TOKEN);</code> we need to set a new environment <code>TOCAMOSA_BOT_TOKEN</code> with the token obtained from the BotFather</p> </div> <div class="paragraph"> <p>If all was deployed ok you&#8217;ll find in the <code>Functions</code> section the url of your bot. Something similar to <code><a href="https://a-random-name-choosen-by-netlify.netlify.com/.netlify/functions/tocamosa" class="bare">https://a-random-name-choosen-by-netlify.netlify.com/.netlify/functions/tocamosa</a></code> , grab this URL and go to this URL:</p> </div> <div class="paragraph"> <p><a href="https://api.telegram.org/botYOURBOT:API_TOKEN_HERE/setWebhook?url=YOUR_NETLIFY_URL" class="bare">https://api.telegram.org/botYOURBOT:API_TOKEN_HERE/setWebhook?url=YOUR_NETLIFY_URL</a></p> </div> <div class="paragraph"> <p>(for example <a href="https://api.telegram.org/bot123123:AAG12bdbsdfdsHXqBOBPACmXKnz6mBLHmGY/setWebhook?url=https://a-random-name-choosen-by-netlify.netlify.com/.netlify/functions/tocamosa" class="bare">https://api.telegram.org/bot123123:AAG12bdbsdfdsHXqBOBPACmXKnz6mBLHmGY/setWebhook?url=https://a-random-name-choosen-by-netlify.netlify.com/.netlify/functions/tocamosa</a>)</p> </div> <div class="paragraph"> <p>With this URL what we&#8217;re doing is to notify to Telegram where can locate our bot</p> </div> <div class="paragraph"> <p>Now you can test your bot in a chat and if all it&#8217;s ok the bot will answer with the menu.</p> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> With the free tier of Netlify we have 125K request per month </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="conclusion">Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>In this post we are see many things:</p> </div> <div class="ulist"> <ul> <li> <p>How to create, develop and configure a simple bot</p> </li> <li> <p>How to answer with a simple message and how to build an inline menu</p> </li> <li> <p>How to deploy automatically in Netlify a Git repository</p> </li> <li> <p>Keep secret our TOKEN using environment variables</p> </li> </ul> </div> </div> </div> Learnt how to build a simple Telegram bot and deploy it using Netlify lambda functions Build a Raffle with Google Sheet Jorge Aguilera 2020-02-01T00:00:00Z https://blog.jagedn.dev/blog/2020/google-raffle.html <div id="preamble"> <div class="sectionbody"> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="Warning"></i> </td> <td class="content"> This post was published in Dev.to (<a href="https://dev.to/jagedn/build-a-raffle-with-google-sheet-part-2-1n1a" class="bare">https://dev.to/jagedn/build-a-raffle-with-google-sheet-part-2-1n1a</a>) </td> </tr> </table> </div> <div class="paragraph"> <p>In this post we&#8217;ll see how to build a simple application using Google Sheet.</p> </div> <div class="paragraph"> <p>The application consists in a raffle from a list of assistant to an event from we have the names and surnames in a sheet:</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2020/google-raffle1.png" alt="google raffle1"> </div> </div> </div> </div> <div class="sect1"> <h2 id="raffle_the_idea">Raffle, the idea</h2> <div class="sectionbody"> <div class="paragraph"> <p>After installing our raffle function, a new option&#8217;ll appear in the main menu of the sheet called Raffle with a sub-item Raffle.</p> </div> <div class="paragraph"> <p>When the user select this item a sidebar&#8217;ll appear with a (customizable) interface with a button to start a raffle:</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2020/google-raffle2.png" alt="google raffle2"> </div> </div> <div class="paragraph"> <p>At this moment the application will choose a random element from the sheet and show it. If the participant is present (and want the prize) the user will click at yepes or nopes it the user reject the prize:</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2020/google-raffle3.png" alt="google raffle3"> </div> </div> <div class="paragraph"> <p>In both case the application will mark the participant as "used" to avoid pick him again.</p> </div> <div class="paragraph"> <p>The admin can repeat the raffle as many times he want meanwhile remain participants.</p> </div> </div> </div> <div class="sect1"> <h2 id="coding_the_ui">Coding the UI</h2> <div class="sectionbody"> <div class="paragraph"> <p>Select Tools / Script commands from main menu and create a new file called <code>Client.html</code> and another file called <code>Dialog.html</code> plus the default <code>Code.gs</code> file.</p> </div> <div class="listingblock"> <div class="title">Client.html</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;base target="_top"&gt; &lt;link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css"&gt; &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;&lt;?!= LanguageApp.translate('Bienvenido','',Session.getActiveUserLocale()) ?&gt;&lt;/h1&gt; &lt;div&gt; &lt;p&gt; &lt;?!= LanguageApp.translate('Total Participantes activos','',Session.getActiveUserLocale()) ?&gt; &lt;/p&gt; &lt;p&gt; &lt;?!= totalRemains ?&gt; &lt;/p&gt; &lt;/div&gt; &lt;? for(var i in prizes){ ?&gt; &lt;div&gt; &lt;? for(var c=0; c &lt; prizes[i][1]; c++){ ?&gt; &lt;p&gt; &lt;input type="button" value="&lt;?!=prizes[i][0]?&gt;" onclick="google.script.run.raffle('&lt;?!=prizes[i][0]?&gt;')"/&gt; &lt;/p&gt; &lt;? } ?&gt; &lt;/div&gt; &lt;? } ?&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> </div> </div> <div class="paragraph"> <p>This will render the sidebar once the user select the Raffle option in the menu.</p> </div> <div class="paragraph"> <p>We&#8217;ll show how many participants remains to participate and we&#8217;ll build a list of buttons, once per prize. In this way the admin can choose what prize to raffle in every moment</p> </div> <div class="paragraph"> <p>As you can see, when the admin click a prize button we&#8217;ll call a remote function sending the prize selected.</p> </div> <div class="listingblock"> <div class="title">Dialog.html</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="html">&lt;script&gt; var suertudoIdx = &lt;?=suertudo[0]?&gt;; var prize = '&lt;?=prize?&gt;'; function yepes(){ google.script.run.withSuccessHandler(google.script.host.close).yepes(suertudoIdx,prize) } function nopes(){ google.script.run.withSuccessHandler(google.script.host.close).nopes(suertudoIdx,prize) } function notPresent(){ google.script.run.withSuccessHandler(google.script.host.close).notPresent(suertudoIdx,prize) } &lt;/script&gt; &lt;h1&gt; Congratulations &lt;?=suertudo[1]+" "+suertudo[2]?&gt; &lt;/h1&gt; &lt;p&gt; &lt;image src="https://media.giphy.com/media/11sBLVxNs7v6WA/giphy.gif"/&gt; &lt;/p&gt; &lt;p&gt; &lt;div&gt; &lt;input type="button" value="Yepes" onclick="yepes()" /&gt; &amp;nbsp; &lt;input type="button" value="Nopes" onclick="nopes()" /&gt; &amp;nbsp; &lt;input type="button" value="No Present" onclick="notPresent()" /&gt; &lt;/div&gt; &lt;/p&gt;</code></pre> </div> </div> <div class="paragraph"> <p>This file is the template to render the winner of a prize and let to choose an action (accept, denied, and not present)</p> </div> <div class="paragraph"> <p>Once the admin click one of buttons following actions happen:</p> </div> <div class="ulist"> <ul> <li> <p>the dialog call a remote function to notify the action selected</p> </li> <li> <p>when the remote function is executed the dialog is closed.</p> </li> </ul> </div> <div class="paragraph"> <p>For example if the winner accept the prize the dialog will execute this:</p> </div> <div class="paragraph"> <p><code>google.script.run.withSuccessHandler(google.script.host.close).yepes(suertudoIdx,prize)</code></p> </div> <div class="paragraph"> <p>where yepes is a remote function</p> </div> </div> </div> <div class="sect1"> <h2 id="coding_the_business">Coding the Business</h2> <div class="sectionbody"> <div class="paragraph"> <p>Paste this code into the <code>Code.gs</code></p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="javascript">//Called by Google Sheet function onOpen(e) { var ui = SpreadsheetApp.getUi(); ui.createAddonMenu().addItem('Raffle', 'raffleUI').addToUi(); } // Read G3:H999 searching prizzes (title and quantity) function getPrizzes(){ var ss = SpreadsheetApp.getActiveSpreadsheet(); var sheet = ss.getActiveSheet(); var ret = []; for(var i=3; i&lt;ss.getLastRow()+1; i++){ var row = ss.getRange("G"+i+":H"+i).getValues()[0]; if( !row[0] ){ break } // extract the title and the quantity ret.push( [row[0],row[1]] ) } return ret; } // Write the G3:H999 range with new prizzes status function updatePrizzes(prizzes){ var ss = SpreadsheetApp.getActiveSpreadsheet(); var sheet = ss.getActiveSheet(); ss.getRange("G3:H"+(2+prizzes.length)).setValues(prizzes) } // Search particpants without prizzes in range A3:D999 function getRemains(){ var ss = SpreadsheetApp.getActiveSpreadsheet(); var sheet = ss.getActiveSheet(); var ret = []; for(var i=3; i&lt;ss.getLastRow()+1; i++){ var row = ss.getRange("A"+i+":D"+i).getValues()[0]; if( !row[0] ){ break } if( !row[3] ){ // rowIndex, name and surname ret.push( [i,row[0],row[1]] ) } } return ret; } // The winner accept the prize: // update their cell and decrement the prize function yepes(idx, prize){ var ss = SpreadsheetApp.getActiveSpreadsheet(); var sheet = ss.getActiveSheet(); var cell = sheet.getRange("D"+idx); cell.setValue("winner of "+prize); var prizzes = getPrizzes(); for(var i in prizzes){ if( prizzes[i][0] === prize ){ prizzes[i][1]--; updatePrizzes(prizzes) break; } } raffleUI(); } // the winner decline the prize: do nothing function nopes(idx, prize){ raffleUI(); } // the winner is not pressent: bad guy function notPresent(idx){ var ss = SpreadsheetApp.getActiveSpreadsheet(); var sheet = ss.getActiveSheet(); var cell = sheet.getRange("D"+idx); cell.setValue("no present"); raffleUI(); } // Show the winner and ask if they want the prize function raffle(prize){ var remains = getRemains(); var suertudoIndex = Math.floor(Math.random()*remains.length); var suertudo = remains[suertudoIndex]; var template = HtmlService.createTemplateFromFile('Dialog'); template.suertudo = suertudo; template.prize = prize; var html = template.evaluate(); var htmlOutput = HtmlService .createHtmlOutput(html) .setWidth(640) .setHeight(480); SpreadsheetApp.getUi().showModalDialog(htmlOutput, 'Wooaaaaa'); } // main: prepare a sidebar with prizzes function raffleUI(){ var remains = getRemains(); var template = HtmlService.createTemplateFromFile('Client'); template.totalRemains = remains.length; template.prizzes = getPrizzes(); var html = template.evaluate(); html.setTitle("Raffle") .setSandboxMode(HtmlService.SandboxMode.IFRAME) .setWidth(300); SpreadsheetApp.getUi().showSidebar(html); }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="prepare_your_raffle">Prepare your Raffle</h2> <div class="sectionbody"> <div class="paragraph"> <p>In a clean tab write the participants and the prizes following this screen:</p> </div> <div class="paragraph"> <p>Pay attention to use the same rows and columns or if you want to use different ranges remember to adjust them into the <code>Code.gs</code> file</p> </div> </div> </div> <div class="sect1"> <h2 id="see_in_action">See in action</h2> <div class="sectionbody"> <div class="paragraph"> <p>In this video you can see the raffle in action</p> </div> <div class="videoblock"> <div class="content"> <iframe src="https://www.youtube.com/embed/F8isRNpUJoU?rel=0" frameborder="0" allowfullscreen></iframe> </div> </div> </div> </div> Learnt how to build a simple Raffle using Google Sheet Introducción a Asciidoc y Asciidoctor (4): crear una presentacion Jorge Aguilera 2020-01-25T00:00:00Z https://blog.jagedn.dev/blog/2020/intro-asciidoctor-4.html <div id="preamble"> <div class="sectionbody"> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> Este post es la continuación a <a href="intro-asciidoctor-3.html" class="bare">intro-asciidoctor-3.html</a> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="objetivo">Objetivo</h2> <div class="sectionbody"> <div class="paragraph"> <p>En este post veremos cómo crear una presentación usando sólo un editor de texto (y asciidoctor por supuesto).</p> </div> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="Warning"></i> </td> <td class="content"> El objetivo es poder exponer de forma rápida y sencilla cualquier idea que tengas y quieras transmitir, tanto a un público "cercano", como compañeros, tu jefe, tu profesor, etc o publicarlo en Internet bien como un documento HTML o incluso como un pdf en Slides o similar. </td> </tr> </table> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> <a href="revealjs/charla.html">Aquí</a> para ver la versión HTML y aquí puedes ver <a href="revealjs/charla.adoc">aquí</a> el fichero para construirlo (texto plano) </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="instalación_sólo_1_vez">Instalación (sólo 1 vez)</h2> <div class="sectionbody"> <div class="paragraph"> <p>En el primer post indicamos algunas de las formas que puedes usar para ejecutar asciidoctor, bien sea usando la versión <code>ruby</code> (la más popular), bien usando la versión <code>java</code> (que puedes integrar en tu aplicación como librería), etc.</p> </div> <div class="paragraph"> <p>Para este ejemplo vamos a usar la versión <code>ruby</code> por lo que tendrás que tener instalada esta versión. Por ejemplo si usas una distribución Linux con apt puedes ejecutar:</p> </div> <div class="paragraph"> <p><code>$ sudo apt-get install asciidoctor</code></p> </div> <div class="paragraph"> <p>Lo siguiente, en el directorio que reservemos para nuestras presentaciones crearemos un fichero <code>Gemfile</code> para descargar las dependencias necesarias para poder crear presentaciones:</p> </div> <div class="listingblock"> <div class="title">Gemfile</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="ruby">source 'https://rubygems.org' gem 'asciidoctor-revealjs'</code></pre> </div> </div> <div class="paragraph"> <p>y preparemos nuestro directorio</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="console">$ bundle config --local github.https true $ bundle --path=.bundle/gems --binstubs=.bundle/.bin</code></pre> </div> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> Si por ejemplo optas por usar AsciidoctorJ (Java), existe un plugin para Maven y otro para Gradle que hace que todo esto sea innecesario y mucho más sencillo. </td> </tr> </table> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> Aún más sencillo. Aunque no tengas conocimientos de programación, si tienes java instalado en tu máquina, puedes descargarte esta plantilla con todo lo necesario para empezar a crear tus presentaciones: <a href="https://gitlab.com/jorge-aguilera/presentation-template" class="bare">https://gitlab.com/jorge-aguilera/presentation-template</a> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="reveal_js">Reveal JS</h2> <div class="sectionbody"> <div class="paragraph"> <p>El backend de presentaciones revealjs, como su nombre indica, lo que va a usar es este famoso framework Javascript para , partiendo de un documento .adoc, generar un .html con el javascript necesario incluido en él, pero sin necesidad de tener ningún conocimiento de maquetación, html, css o javascript. Simplemente escribiendo en un fichero de texto y usando los atributos asciidoctor del documento, podremos configurar el resultado, etc</p> </div> </div> </div> <div class="sect1"> <h2 id="estructura">Estructura</h2> <div class="sectionbody"> <div class="paragraph"> <p>La idea básica del backend revealjs es que cada sección del documento corresponderá a una slide y el contenido de cada sección será renderizado en esta, siendo la primera sección reservada a la slide de presentación</p> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> Recuerda que una sección se crea comenzando una línea con '=' tantas veces repetidos como nivel de profundidad queramos </td> </tr> </table> </div> <div class="paragraph"> <p>Básicamente en una slide insertaremos:</p> </div> <div class="ulist"> <ul> <li> <p>Párrafos de textos</p> </li> <li> <p>Listas ordenadas o desordenadas de items</p> </li> <li> <p>image, video</p> </li> <li> <p>tabla con datos</p> </li> <li> <p>una imagen de fondo</p> </li> </ul> </div> <div class="paragraph"> <p>Así mismo querremos que nuestra presentación sea un poco amena y que las transiciones entre slides tengan algún efecto</p> </div> <div class="paragraph"> <p>A continuación vamos a ir viendo cada uno de estos elementos paso a paso.</p> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> Según vayas practicando a crear presentaciones irás descubriendo que cada vez pierdes menos tiempo en "cómo queda" y más en estructurar y mejorar el contenido. </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="primera_iteración_la_portada">Primera iteración, la portada</h2> <div class="sectionbody"> <div class="paragraph"> <p>Lo primero que vamos a hacer es crear la primera slide de presentación. Nuestra charla va a ser sobre XXXXXX por lo que crearemos al inicio del documento la primera sección:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="asciidoctor">= XXXXX : YYYYY jorge.aguilera@puravida-software.com #elije uno de: beige, black, league, night, serif, simple, sky, solarized, white :revealjs_theme: league</code></pre> </div> </div> <div class="paragraph"> <p>y generamos nuestra primera iteración:</p> </div> <div class="paragraph"> <p><code>bundle exec asciidoctor-revealjs -a revealjsdir=https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.7.0 charla.adoc</code></p> </div> <div class="paragraph"> <p>(donde charla.adoc es el nombre del fichero que estés creando para tu charla)</p> </div> <div class="paragraph"> <p>Si todo ha ido bien tendrás un fichero HTML que puedes abrir con el navegador, y ver algo así <a href="revealjs/uno.html" class="bare">revealjs/uno.html</a></p> </div> <div class="paragraph"> <p>Prueba a cambiar el atributo <code>revealjs_theme</code> del documento con alguno de los valores indicados y vuelve a generar la presentación. Verás que el tema se aplica y siendo la misma presentación el diseño cambia</p> </div> </div> </div> <div class="sect1"> <h2 id="slides_y_subslides">Slides y "subslides"</h2> <div class="sectionbody"> <div class="paragraph"> <p>Como hemos mencionado antes, cada slide se define por una sección con '=='. Además RevealJS nos permite crear "subslides", o slides verticales, usando subsecciones con '==='. De esta forma podemos organizar los conceptos a exponer de forma anidada, navegando entre los conceptos principales con las flechas derecha-izquierda y los subconceptos con las flechas arriba-abajo.</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>= Titulo : subtitulo :stem: == Introducción aqui la introducción == Concepto 1 Concepto1 lo podemos explicar en subslides === Primera parte Primera parte de concepto 1 - planificar - definir - revisar - morir de inanicción === Segunda parte Segunda parte de concepto 1 stem:[x^2=y^2] == Concepto 2 .Una tabla |=== |Column heading 1 |Column heading 2 | Un texto a|latexmath:[a^2+b^2=c^2]. | Otro texto a|latexmath:[k_{n+1} = n^2 + k_n^2 - k_{n-1}]. |===</code></pre> </div> </div> <div class="paragraph"> <p>Aquí como se vería esta presentación <a href="revealjs/dos.html" class="bare">revealjs/dos.html</a></p> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> prueba a pulsar <em>Esc</em> en la presentación y verás lo que pretendo transmitirte </td> </tr> </table> </div> <div class="paragraph"> <p>El contenido de las slides puede ser muy variado. Desde párrafos de textos, listas, tablas, imágenes, e incluso fórmulas matemáticas, como puedes ver en el ejemplo anterior</p> </div> </div> </div> <div class="sect1"> <h2 id="funcionalidades">Funcionalidades</h2> <div class="sectionbody"> <div class="paragraph"> <p>Una vez vista la idea principal de cómo generar slides con asciidoctor + revealjs vamos a enumerar alguna de las funcionalidades que se pueden hacer</p> </div> <div class="sect2"> <h3 id="notas_para_el_orador">Notas para el orador</h3> <div class="paragraph"> <p>Podemos añadir notas visibles en una ventana aparte mediante un bloque <code>.notes</code></p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>== Concepto Este concepto es muy denso para explicarlo [.notes] -- Lo que va entre estos guiones solo lo ve el orador en una venta aparte --</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="slides_sin_título">Slides sin título</h3> <div class="paragraph"> <p>Algunas veces queremos que la slide no contenga título, tal vez porque queremos poner una foto a pantalla completa.</p> </div> <div class="paragraph"> <p>Simplemente etiquetamos el título con <code>%notitle</code></p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>[%notitle] == Esta slide va sin titulo</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="listas_animadas">Listas animadas</h3> <div class="paragraph"> <p>Muchas veces queremos mostrar una lista de pasos a ejecutar, ideas, etc pero queremos ir explicando una a una para que el público nos preste atención y no se pongan a leer todas de una vez. Para ello usaremos <code>%step</code></p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>== Mis ideas para el 2020 [%step] - Aparece la primera y no se ven las siguientes - Al pulsar una tecla aparezco con una animación - Si sigues pulsando teclas aparezco yo</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="más_funcionalidades">Más funcionalidades</h3> <div class="paragraph"> <p>En esta página encontrarás todas las funcionalidades posibles con este backend: <a href="https://asciidoctor.org/docs/asciidoctor-revealjs/#syntax-examples" class="bare">https://asciidoctor.org/docs/asciidoctor-revealjs/#syntax-examples</a></p> </div> </div> </div> </div> <div class="sect1"> <h2 id="ejemplos_completos">Ejemplos completos</h2> <div class="sectionbody"> <div class="paragraph"> <p>En esta presentación puedes encontrar (casi) todos los elementos y efectos que puedes hacer con una presentación Asciidoctor (lo cual no quiero decir que haya que hacerlo. Ya sabes, a veces menos, es más):</p> </div> <div class="paragraph"> <p><a href="https://bentolor.github.io/java9to13/#/" class="bare">https://bentolor.github.io/java9to13/#/</a></p> </div> <div class="paragraph"> <p>O esta otra más minimalista:</p> </div> <div class="paragraph"> <p><a href="https://puravida-software.gitlab.io/slides/doc-as-code.html#/" class="bare">https://puravida-software.gitlab.io/slides/doc-as-code.html#/</a></p> </div> </div> </div> Breve introducción al lenguaje de marcado asciidoc y su ecosistema, parte 4 Despliega tu aplicación Grails/Spring en un cluster Kubernetes, made easy Jorge Aguilera 2020-01-18T00:00:00Z https://blog.jagedn.dev/blog/2019/okteto-grails.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Hace poco escríbi un post técnico donde contaba cómo puedes desarrollar, depurar y terminar desplegando una aplicación Grails, SpringBot, o cualquier otro tipo de framework similar en un cluster Kubernetes, con la particularidad de que en lugar de usar el típico entorno en local con <code>minikube</code> , usaba un servicio cloud de <a href="https://okteto.com">Okteto</a></p> </div> <div class="paragraph"> <p>Con el servicio que ofrece Okteto no necesitaremos tener instalado en nuestra máquina prácticamente nada salvo un pequeño programa (okteto cli) que será el que nos conecte con nuestro namespace remoto. Además de <strong>ofrecer un entorno de desarrollo</strong> puramente kubernetes, este servicio <strong>nos permitirá desplegar la aplicación</strong> en un cluster real del que no necesitaremos saber grandes detalles, haciéndolo ideal para dar los primeros pasos de iniciación a Kubernetes.</p> </div> <div class="paragraph"> <p>El post completo, con todos los pasos y explicaciones lo puedes encontrar en <a href="https://okteto.com/blog/develop-and-deploy-a-grails-application-in-okteto-cloud/" class="bare">https://okteto.com/blog/develop-and-deploy-a-grails-application-in-okteto-cloud/</a> así que en este post simplemente escribiré algunas indicaciones y mis impresiones después de unos meses "jugando" con él.</p> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> Sí, como has adivinado, el post que les envíe fue revisado y corregido por la gente de Okteto hasta darle una calidad excepcional. </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="okteto">Okteto</h2> <div class="sectionbody"> <div class="paragraph"> <p>La primera vez que oí de Okteto fue hace unos meses, en una charla en el Codemotion de Madrid, donde <a href="https://twitter.com/micael_gallego">Micael Gallego</a> y <a href="https://twitter.com/pchico83">Pablo Chico</a>, y me pareció una herramienta muy buena para empezar a dar esos primeros pasos en Kubernetes que había intentando dar con Google Cloud Heroku, o Digital Ocean, con la ventaja de que Okteto me ofrecía un cluster de prestaciones "majas" de forma gratuíta</p> </div> <div class="paragraph"> <p>Puedes verla completa en:</p> </div> <div class="videoblock"> <div class="content"> <iframe src="https://www.youtube.com/embed/Q2-QjQ0KIW0?rel=0" frameborder="0" allowfullscreen></iframe> </div> </div> </div> </div> <div class="sect1"> <h2 id="idea">Idea</h2> <div class="sectionbody"> <div class="paragraph"> <p>Supongamos que tienes una idea para una aplicación semi-sencilla y que tu entorno de programación es Grails o SpringBot si no llegas a ser lo suficientemente bueno para usar Grails ;)</p> </div> <div class="paragraph"> <p>Sabes cómo desarrollarla en local, tienes tu PostgreSQL corriendo en tu máquina e incluso has dockerizado la aplicación pero sabes que subirla a producción es otra cosa. Dónde desplegar, cómo depurar, etc se vuelve arduo y a veces hay que poner una cantidad de dinero (pequeña pero hay que dar la tarjeta de crédito)</p> </div> <div class="paragraph"> <p>Como ya he dicho antes, con este servicio lo que vas a poder tener es un cluster en la nube manejado por Okteto donde poder desarrollar e incluso depurar tu aplicación y liberar versiones en producción</p> </div> </div> </div> <div class="sect1"> <h2 id="pasos">Pasos</h2> <div class="sectionbody"> <div class="paragraph"> <p>Los pasos a seguir para crear un entorno desarrollo serían, de forma resumida:</p> </div> <div class="ulist"> <ul> <li> <p>Tener una cuenta en Github</p> </li> <li> <p>Crear una cuenta en Okteto (usa Github como autentificador, por eso la cuenta anterior)</p> </li> <li> <p>Instalar en local el cliente <code>okteto cli</code></p> </li> <li> <p>hacer login con el comando <code>okteto login</code> el cual baja las credenciales para poder conectarse a nuestra cuenta</p> </li> <li> <p>crear un directorio vacío, copiar el fichero <code>okteto.ini</code> y ejecutar <code>okteto up</code> para crear un entorno de desarrollo en el cluster</p> </li> <li> <p>crear nuestra aplicación desde la shell que se crea. El servicio de Okteto lo que irá haciendo es sincronizar todos los ficheros remotos con nuestro local, de tal forma que cualquier cambio en un entorno se refleje en el otro</p> </li> <li> <p>desarrollar nuestra aplicación con el añadido de que podemos acceder a ella vía <code>localhost</code> o vía Intenet</p> </li> <li> <p>una vez tenemos una versión para desplegar podemos dockerizarla directamente con <code>okteto build</code> y aplicarla al cluster con <code>kubectl apply</code></p> </li> </ul> </div> <div class="paragraph"> <p>Es decir: crear un entorno de desarrollo en el cluster, desarrollar y depurar en él nuestra aplicación como siempre y desplegarla (en Okteto o en otro proveedor de kubernetes)</p> </div> </div> </div> <div class="sect1"> <h2 id="problemas_a_k_a_retos">Problemas a.k.a Retos</h2> <div class="sectionbody"> <div class="paragraph"> <p>Probablemente tu aplicación va a requerir cierta infraestructura como base de datos, un sistema de ficheros donde leer o escribir, etc y lamentablemente el post publicado en el blog de Okteto, al ser una guía de primeros pasos, NO cubre nada de esto.</p> </div> <div class="paragraph"> <p>Por suerte desplegar una base de datos PostgreSQL en Okteto es sencillo y se puede hacer vía web con un par de clicks o bien vía comando <code>kubectl</code> y con ayuda de Internet para ver ejemplos.</p> </div> <div class="paragraph"> <p>Actualmente NO se pueden crear volumenes persistentes vía web, aunque parece que está muy próxima una actualización que lo permitirá, así que la reserva de volúmenes hay que hacerlo via <code>kubectl</code> por lo que te tocará aprender cómo definir uno. Por ejemplo, aplicando este fichero tendrías un volumen <code>my-volume</code> que puedes adjuntar a un pod:</p> </div> <div class="listingblock"> <div class="title">storage.yml</div> <div class="content"> <pre class="prettyprint highlight"><code>--- apiVersion: v1 kind: PersistentVolumeClaim metadata: name: my-volume spec: storageClassName: standard accessModes: - ReadWriteOnce resources: requests: storage: 30Gi</code></pre> </div> </div> <div class="paragraph"> <p>y aplicarlo con `kubectl apply -f storage.yml'</p> </div> <div class="paragraph"> <p>Así mismo para no tener claves, passwords o api keys metidas en el código, necesitarás crear <code>ConfigMap</code> y <code>SecretMap</code> , como por ejemplo:</p> </div> <div class="listingblock"> <div class="title">secret.yml</div> <div class="content"> <pre class="prettyprint highlight"><code>apiVersion: v1 kind: Secret metadata: name: my-secret type: Opaque stringData: TELEGRAM_TOKEN: "783725094:AAAAAAAAAAAAAAAAAAAAAAAAAA"</code></pre> </div> </div> <div class="paragraph"> <p>y aplicarlo con `kubectl apply -f secret.yml'</p> </div> </div> </div> <div class="sect1"> <h2 id="conclusión">Conclusión</h2> <div class="sectionbody"> <div class="paragraph"> <p>El desarrollar directamente en un cluster te ofrece la oportunidad de ir avanzando la aplicación a la vez que vas definiendo la arquitectura (k8s) de la misma. Además el poder depurarla en este te permite afinar esas situaciones complicadas de definir mediante tests (lo cual no quiere decir que no tengas que seguir desarrollando test)</p> </div> <div class="paragraph"> <p>Así mismo, aunque no lo he podido probar, puede ser una buena forma de trabajar en un equipo.</p> </div> <div class="paragraph"> <p>Por último creo que es un entorno que te permite practicar de forma directa muchos conceptos de kubernetes para ir adquiriendo experiencia. Yo mismo, por ejemplo, tras este par de meses usándolo he comenzado un curso online de Kubernetes y prácticamente la mitad de los conceptos que se explican me he tenido que pelear con ellos.</p> </div> </div> </div> primeros pasos para despegar una aplicación Grails o Springbot en un cluster kubernetes Introducción a Asciidoc y Asciidoctor (3): artículo académico Jorge Aguilera 2020-01-15T00:00:00Z https://blog.jagedn.dev/blog/2020/intro-asciidoctor-3.html <div id="preamble"> <div class="sectionbody"> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> Este post es la continuación a <a href="intro-asciidoctor-2.html" class="bare">intro-asciidoctor-2.html</a> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="objetivo">Objetivo</h2> <div class="sectionbody"> <div class="paragraph"> <p>En este post veremos cómo crear un artículo "académico" en Pdf.</p> </div> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="Warning"></i> </td> <td class="content"> Por académico quiero decir que desarrollaremos un texto que contendrá diferente contenido como gráficos (inventados), formulas matemáticas (sin ningún sentido) etc, que den una idea de lo que sería un caso real. </td> </tr> </table> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> <a href="articulo.html">Aquí</a> para ver la versión HTML, o <a href="articulo.pdf">aquí</a> para ver la versión PDF del documento final. Ambas versiones parten del mismo documento adoc que analizaremos a continuación y que puedes ver <a href="articulo.adoc">aquí</a> (texto plano) </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="cabecera">Cabecera</h2> <div class="sectionbody"> <div class="paragraph"> <p>En un documento .adoc las primeras líneas hasta encontrar una en blanco, contienen numerosa información respecto del mismo. Así, por ejemplo:</p> </div> <div class="ulist"> <ul> <li> <p>La primera línea comienza con un <code>=</code> y es donde indicamos el título del documento, y si en esa misma línea incluimos <code>: otro texto</code>, entonces <code>otro texto</code> es el subtítulo.</p> </li> <li> <p>La siguiente línea está reservada para indicar el autor</p> </li> <li> <p>En la tercera indicamos la fecha</p> </li> </ul> </div> <div class="paragraph"> <p>Estas tres líneas son opcionales, aunque aconsejo por lo menos indicar el título.</p> </div> <div class="paragraph"> <p>Antes de llegar a la primera línea en blanco que indicaría fín de cabecera, podemos especificar numerosos atributos del documento, como por ejemplo si queremos que tenga una tabla de contenidos, la posición de esta, qué tipo de documento es, variables globales, si queremos iconos, y un largo etcetera</p> </div> <div class="paragraph"> <p>Así pues nuestro artículo tendrá las primeras líneas:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="asciidoc">= Título del artículo aqui.tu@email.com v0.0.0.0.1, 2020-01-18 :toc: :icons: font :stem: latexmath</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="secciones">Secciones</h2> <div class="sectionbody"> <div class="paragraph"> <p>A continuación comenzaría nuestro artículo, el cual iremos organizando en secciones, párrafos, etc.</p> </div> <div class="paragraph"> <p>Una sección se indica mediante el signo `=' concatenado tantas veces como nivel de sección queramos crear. Por ejemplo</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="asciidoc">== Seccion 1 === SubSeccion 1.1 ==== Subseccion 1.1.1 == Seccion 2</code></pre> </div> </div> <div class="paragraph"> <p>Como el título es el nivel 1 es el que lleva un único <code>=</code></p> </div> <div class="paragraph"> <p>Las secciones son importantes para organizar el texto y son marcadores para la generación de la tabla de contenido (TOC)</p> </div> </div> </div> <div class="sect1"> <h2 id="texto_y_elementos">Texto y elementos</h2> <div class="sectionbody"> <div class="paragraph"> <p>En este post no voy a describir todos los elementos que puedes usar en el texto. Te remito a la página principal donde están explicados completamente y con ejemplos: <a href="https://asciidoctor-docs.netlify.com/asciidoc/1.5/" class="bare">https://asciidoctor-docs.netlify.com/asciidoc/1.5/</a></p> </div> <div class="paragraph"> <p>A modo de resumen indicar que:</p> </div> <div class="ulist"> <ul> <li> <p>podemos remarcar texto en negrita, subrayado, itálica, etc</p> </li> <li> <p>embeber imágenes, vídeos, etc</p> </li> <li> <p>crear enlaces a documentos tanto internos como externos</p> </li> <li> <p>crear tablas con una libertad absoluta sobre tamaños, formatos y contenido</p> </li> <li> <p>&#8230;&#8203;</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="stem">Stem</h2> <div class="sectionbody"> <div class="paragraph"> <p>Como nuestro artículo va a contener fórmulas es necesario activarlo en la cabecera del documento mediante el atributo <code>:stem:</code> . Asciidoctor tiene un par de procesadores para fórmulas: LaTex y AsciiMath y en este caso vamos a usar por defecto LaTex indicandolo en el atributo <code>:stem: latexmath</code></p> </div> <div class="paragraph"> <p>Para incluir una formula en nuestro documento podremos hacerlo mediante un bloque <code>inline</code> (en el mismo párrafo) o con un bloque individual si queremos indicar varias líneas de fórmulas:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="console"> La solución a stem:[a*x^2 + b*x +c = 0] se obtiene ... (bloque inline) [stem] ---- k_{n+1} = n^2 + k_n^2 - k_{n-1} x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} ----</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="generación">Generación</h2> <div class="sectionbody"> <div class="paragraph"> <p>Una vez que tenemos nuestro documento preparado sólo tenemos que generar el documento final (en realidad este proceso lo repetirás muchísimas veces hasta tener soltura)</p> </div> <div class="paragraph"> <p>En una consola donde esté el documento ejecutaremos:</p> </div> <div class="paragraph"> <p><code>asciidoctor articulo.adoc</code> y obtendremos en ese mismo directorio un fichero <em>articulo.html</em> completo, tal que puedes abrirlo con el navegador sin necesitar ningún otro archivo.</p> </div> <div class="paragraph"> <p>Para generar la versión pdf ejecutaremos:</p> </div> <div class="paragraph"> <p><code>asciidoctor -b pdf articulo.adoc</code> y obtendremos un fichero <em>articulo.pdf</em></p> </div> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="Warning"></i> </td> <td class="content"> El backend de pdf necesita tener instaladas una serie de dependencias si vas a usar fórmulas como en este ejemplo. Si estás interesado no dudes en decirmelo y lo explico en más detalle. </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="conclusión">Conclusión</h2> <div class="sectionbody"> <div class="paragraph"> <p>Generar un artículo de opinión, redacción o una revisión de un producto, por poner unos ejemplos, de calidad tanto HTML como Pdf es realmente fácil con Asciidoctor y cuentas con todas las ventajas que ya hemos visto (texto plano, versionable, revisable, trabajo en grupo, etc)</p> </div> </div> </div> Breve introducción al lenguaje de marcado asciidoc y su ecosistema, parte 3 Introducción a Asciidoc y Asciidoctor (2) Jorge Aguilera 2020-01-08T00:00:00Z https://blog.jagedn.dev/blog/2020/intro-asciidoctor-2.html <div id="preamble"> <div class="sectionbody"> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> Este post es la continuación a <a href="intro-asciidoctor-1.html" class="bare">intro-asciidoctor-1.html</a> </td> </tr> </table> </div> <div class="paragraph"> <p>Probablemente, tras leer el post anterior, te sigas preguntando por qué deberías usar asciidoc y su ecosistema como herramienta para tu documentación.</p> </div> <div class="paragraph"> <p>De forma resumida destacaría los siguientes puntos:</p> </div> <div class="ulist"> <ul> <li> <p>formato abierto</p> </li> <li> <p>texto plano. Te centras en escribir y te olvidas de si las páginas encajan, si las imágenes de descolocan los parráfos, etc</p> </li> <li> <p>versionable, revisable, mergeable por cualquier sistema de control de versiones</p> </li> </ul> </div> <div class="paragraph"> <p>Todos ellos compartidos con Mardkown y otros. Pero además con asciidoc tienes:</p> </div> <div class="ulist"> <ul> <li> <p>una <strong>única sintaxis</strong>, a diferencia de los miles de sabores (incompatibles?) que tiene Markdown</p> </li> <li> <p>un mismo texto puede generar diferentes outputs, como el típico caso de tener un .adoc y convertirlo a html y pdf</p> </li> <li> <p>es semántico, está orientado a la documentación no a la presentación. Cuando lees asciidoc, lees el sentido que se le está dando a un parrafo (esto es importante, eso es un párrafo, esto es un ejemplo, etc)</p> </li> <li> <p>un ecosistema supercompleto donde se han integrado multitud de herramientas: escribir fórmulas matemáticas en LaTex o AsciiMath, diagramas de secuencia, clase, actividades, grant,</p> </li> <li> <p>al ser abierto existen muchos "backends": html, pdf, manpages, revealjs</p> </li> <li> <p>si eres programador y usas Maven o Gradle, puedes integrarlo en tu proyecto fácilmente</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="casos_de_uso">Casos de uso</h2> <div class="sectionbody"> <div class="paragraph"> <p>Estos son algunos casos de uso donde yo lo he usado (no es por autobombo, es que así me ahorro tener que citar autores):</p> </div> <div class="ulist"> <ul> <li> <p>Artículo</p> </li> </ul> </div> <div class="paragraph"> <p>Presentar una redacción o un artículo corto para la universidad.</p> </div> <div class="paragraph"> <p><a href="http://uoc.gitlab.io/2016/AdminRedesSO/AGUILERA_GONZALEZ_JORGE-ARSO/Modulo_6/ArticuloFontsecaBreach.pdf" class="bare">http://uoc.gitlab.io/2016/AdminRedesSO/AGUILERA_GONZALEZ_JORGE-ARSO/Modulo_6/ArticuloFontsecaBreach.pdf</a></p> </div> <div class="ulist"> <ul> <li> <p>Trabajo Fin de Grado</p> </li> </ul> </div> <div class="paragraph"> <p>Presentar algo más complejo que una redacción, con capítulos, revisión de historial, diagramas, fórmulas, etc</p> </div> <div class="paragraph"> <p><a href="https://telotraigodemipueblo.gitlab.io/tfg/pdf/memoria.pdf" class="bare">https://telotraigodemipueblo.gitlab.io/tfg/pdf/memoria.pdf</a></p> </div> <div class="ulist"> <ul> <li> <p>Documentar un proyecto</p> </li> </ul> </div> <div class="paragraph"> <p>Documentar un proyecto, explicando funcionalidades, ejemplos, etc,</p> </div> <div class="paragraph"> <p><a href="https://puravida-asciidoctor.gitlab.io/asciidoctor-extensions/" class="bare">https://puravida-asciidoctor.gitlab.io/asciidoctor-extensions/</a></p> </div> <div class="ulist"> <ul> <li> <p>Página comercial de una empresa</p> </li> </ul> </div> <div class="paragraph"> <p>Crear la landing page de una empresa/producto</p> </div> <div class="paragraph"> <p><a href="https://puravida-software.gitlab.io/main/index.html" class="bare">https://puravida-software.gitlab.io/main/index.html</a></p> </div> <div class="ulist"> <ul> <li> <p>Un blog</p> </li> </ul> </div> <div class="paragraph"> <p>Este mismo, por ejemplo, sin necesidad de bases de datos, editores complejos, etc y alojado sin coste en cualquiera de los numerosos sistemas que ofrecen páginas estáticas</p> </div> <div class="ulist"> <ul> <li> <p>Blog multiformato</p> </li> </ul> </div> <div class="paragraph"> <p>Este blog publica en html, pdf y epub el mismo contenido</p> </div> <div class="paragraph"> <p><a href="https://groovy-lang.gitlab.io/101-scripts/" class="bare">https://groovy-lang.gitlab.io/101-scripts/</a></p> </div> <div class="paragraph"> <p><a href="https://groovy-lang.gitlab.io/101-scripts/101-groovy-scripts-pdf.pdf" class="bare">https://groovy-lang.gitlab.io/101-scripts/101-groovy-scripts-pdf.pdf</a></p> </div> <div class="paragraph"> <p><a href="https://groovy-lang.gitlab.io/101-scripts/101-groovy-scripts-epub.epub" class="bare">https://groovy-lang.gitlab.io/101-scripts/101-groovy-scripts-epub.epub</a></p> </div> <div class="ulist"> <ul> <li> <p>Presentación de una charla</p> </li> </ul> </div> <div class="paragraph"> <p>Uso de RevealJs para presentar la charla y después se exporta a SlideShare para compartirlas</p> </div> <div class="videoblock"> <div class="content"> <iframe src="https://www.youtube.com/embed/WpHt5ku9xAs?rel=0" frameborder="0" allowfullscreen></iframe> </div> </div> <div class="paragraph"> <p>Slides:</p> </div> <div class="paragraph"> <p><a href="https://www.slideshare.net/JorgeAguilera12/write-gradle-plugins" class="bare">https://www.slideshare.net/JorgeAguilera12/write-gradle-plugins</a></p> </div> <div class="ulist"> <ul> <li> <p>Libro digital en Amazon</p> </li> </ul> </div> <div class="paragraph"> <p>Puedes usar el backend de ePub para generar un libro compatible con la plataforma de publicación de Amazon</p> </div> <div class="paragraph"> <p><a href="https://www.amazon.es/Tutorial-Asciidoctor-b%C3%A1sica-Jorge-Aguilera-ebook/dp/B07518QBR4" class="bare">https://www.amazon.es/Tutorial-Asciidoctor-b%C3%A1sica-Jorge-Aguilera-ebook/dp/B07518QBR4</a></p> </div> <div class="paragraph"> <p>(tengo pendiente hacer una revisión y publicarlo actualizado)</p> </div> </div> </div> <div class="sect1"> <h2 id="ventajas">Ventajas</h2> <div class="sectionbody"> <div class="paragraph"> <p>Al ser sólo texto puedes editarlo desde muchos dispositivos y situaciones. Por ejemplo he revisado y corregido numerosos errores desde el metro con el móvil e incluso al tener el proyecto integrado con un proceso de despliegue contínuo, llegar a publicar las correcciones directamente.</p> </div> <div class="paragraph"> <p>Como ya he comentado anteriormente, al centrarte en lo que quieres decir y no en cómo va a quedar te vuelves más productivo. No te engaño, en tu primer intento vas a querer cambiar la presentación del documento y te vas a desesperar porque no es fácil.</p> </div> <div class="paragraph"> <p>Al poder integrarlo en la construcción de un producto (no hace falta que sea software) favoreces el trabajo en equipo, revisión, etc</p> </div> <div class="paragraph"> <p>Hablé sobre todo esto en un par de artículos en el blog de Panel Sistemas:</p> </div> <div class="paragraph"> <p><a href="https://www.panel.es/blog/aproximacion-documentacion-continua-parte-i/" class="bare">https://www.panel.es/blog/aproximacion-documentacion-continua-parte-i/</a> <a href="https://www.panel.es/blog/aproximacion-documentacion-continua-parte-ii/" class="bare">https://www.panel.es/blog/aproximacion-documentacion-continua-parte-ii/</a></p> </div> </div> </div> <div class="sect1"> <h2 id="siguiente">Siguiente</h2> <div class="sectionbody"> <div class="paragraph"> <p>En el próximo post, una vez que tenemos instalado asciidoctor y hemos visto casos de uso, intentaré explicar paso a paso un ejemplo sencillo pero completo</p> </div> </div> </div> Breve introducción al lenguaje de marcado asciidoc y su ecosistema, parte 2 Introducción a Asciidoc y Asciidoctor (1) Jorge Aguilera 2020-01-08T00:00:00Z https://blog.jagedn.dev/blog/2020/intro-asciidoctor-1.html <div id="preamble"> <div class="sectionbody"> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="Warning"></i> </td> <td class="content"> Aunque todo el ecosistema de Asciidoctor funciona también en Windows yo no lo uso, así que en esta entrada todo lo que explique sobre instalación, ejemplos y demás será bajo Linux </td> </tr> </table> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> He añadido un pequeño comentario sobre cómo usarlo en Windows 10. </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="ecosistema">Ecosistema</h2> <div class="sectionbody"> <div class="paragraph"> <p><strong>Asciidoc</strong> es un formato para documentos de texto usado para escribir notas, articulos, libros, páginas web, manpages, blogs, presentaciones orientado a su transformación en html, pdf, epub, etc ( <a href="http://asciidoc.org" class="bare">http://asciidoc.org</a> )</p> </div> <div class="paragraph"> <p>Con esta definición lo primero que pensarás es que es otro <strong>Markdown</strong> y que para eso ya te quedas con este que es muy usado y lo soporta Github. Sin embargo, aunque ambos, como algún otro, están orientados a documentar en texto plano las <strong>diferencias son enormes</strong>.<sup class="footnote">[<a id="_footnoteref_1" class="footnote" href="#_footnotedef_1" title="View footnote.">1</a>]</sup></p> </div> <div class="paragraph"> <p>Se podría decir que <strong>Asciidoc</strong> define las reglas sintácticas sobre los elementos del documento pues especifica dónde va el título, el autor, los párrafos, etc</p> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> Si te suena o has usado <strong>reStructuredText</strong> entonces puedes ver a <strong>asciidoc</strong> como otra alternativa a este. </td> </tr> </table> </div> <div class="paragraph"> <p><strong>Asciidoctor</strong> (<a href="https://asciidoctor.org" class="bare">https://asciidoctor.org</a>) es una <strong>implementación</strong> , un programa, un ejecutable, que es capaz de leer documentos <em>asciidoc</em> y conventirlos a html5, docbook, pdf, etc. Como ves son parecidos, e incluso confusos, pero son dos cosas diferentes: uno podríamos verlo como las especificaciones y al otro como un traductor</p> </div> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="Warning"></i> </td> <td class="content"> Para complicar más la cosa, existe una implementación llamada <strong>asciidoc</strong> , igual que las especificaciones, pero que su última actualización es del 2013. Así, cuando en este documento hable de <strong>asciidoc</strong> estaré hablando de las especificaciones y no de esta implementación. </td> </tr> </table> </div> <div class="paragraph"> <p>La implementación <strong>asciidoctor</strong> está desarrollada en Ruby pero existen otras implementaciones como:</p> </div> <div class="ulist"> <ul> <li> <p>asciidoctorJ, un jar de java que puedes ejecutar desde la línea de comando o integrarlo en tu aplicación</p> </li> <li> <p>asciidoctor-js, un paquete Node en javascript al estilo del de Java</p> </li> </ul> </div> <div class="paragraph"> <p>Estas 3 implementaciones (y a lo mejor alguna más que no conozca) son fáciles de instalar y están destinadas a ser ejecutadas por línea de comando o integradas en un proceso de construcción de software.</p> </div> </div> </div> <div class="sect1"> <h2 id="instalación">Instalación</h2> <div class="sectionbody"> <div class="paragraph"> <p>Si usas Ruby, Asciidoctor se puede instalar como una gema:</p> </div> <div class="paragraph"> <p><code>gem install asciidoctor</code></p> </div> <div class="paragraph"> <p>O bien puedes instalarlo como paquete del sistema operativo:</p> </div> <div class="paragraph"> <p><code>sudo apt-get install asciidoctor</code></p> </div> <div class="paragraph"> <p>Si no quieres instalar dependencias de Ruby y prefieres utilizar la implementación en Java puedes descargar el <em>jar</em> de su web o si tienes SdkMan como gestor de aplicaciones, puedes instalarlo fácilmente:</p> </div> <div class="paragraph"> <p><code>sdk install asciidoctorj</code></p> </div> <div class="sect2"> <h3 id="windows_10">Windows 10</h3> <div class="paragraph"> <p>Si utilizas Windows 10 existe una forma de instalar <code>asciidoctorj</code> mediante Chocolatey (<a href="https://chocolatey.org/" class="bare">https://chocolatey.org/</a>), un gestor de paquetes para este sistema operativo.</p> </div> <div class="paragraph"> <p>En primer lugar deberás instalar Chocolatey mediante una consola PowerShell como administrador y ejecutar:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="console">`Set-ExecutionPolicy Bypass -Scope Process -Force; ` iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))</code></pre> </div> </div> <div class="paragraph"> <p>Después de cerrar y volver a abrir la consola PowerShell (como administrador) podrás instalar asciidoctorj ejecutando</p> </div> <div class="paragraph"> <p><code>choco install asciidoctorj</code></p> </div> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="Warning"></i> </td> <td class="content"> NO uses Notepad de Windows para editar los ficheros .adoc (y mucho menos Word) pues añaden caracteres de control al inicio del fichero incompatibles con asciidoctor. Usa Notepad++ , VSCode, Atom, o similar </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="ejemplo_básico">Ejemplo básico</h2> <div class="sectionbody"> <div class="paragraph"> <p>Abre un editor de texto plano (recuerda ni Word ni LibreOffice son editores de texto plano) como notepad, gedit, vi o nano y escribe:</p> </div> <div class="listingblock"> <div class="title">ejemplo.adoc</div> <div class="content"> <pre class="prettyprint highlight"><code>= El titulo : el subtitulo jorge.aguilera@puravida-software.com (debes dejar un espacio en blanco entre el email y esta linea) == Una sección *Todo* lo que ven tus ojos algún día _sera_ tuyo</code></pre> </div> </div> <div class="paragraph"> <p>Guarda el documento como <code>ejemplo.adoc</code> y desde una línea de comando nos situamos donde esté el documento y ejecutamos:</p> </div> <div class="paragraph"> <p><code>asciidoctor ejemplo.adoc</code> ( o <code>asciidoctorj ejemplo.doc</code> si usamos la versión java)</p> </div> <div class="paragraph"> <p>Si todo ha ido bien debería haberse generado un documento <code>ejemplo.html</code> que puedes abrir con un navegador y comprobar que es un documento html5 completo y que se ha generado sin necesidad de tener conocimientos de maquetar html</p> </div> </div> </div> <div class="sect1"> <h2 id="editores">Editores</h2> <div class="sectionbody"> <div class="paragraph"> <p>La sintáxis de asciidoc es muy completa y extensa pero a la vez muy sencilla por lo que una vez practicado con ella serás capaz de memorizar gran parte de ella así que no deberías necesitar más que un editor plano.</p> </div> <div class="paragraph"> <p>Sin embargo hay editores y/o plugins para diferentes IDEs que nos pueden ayudar a escribir en asciidoc. A modo de ejemplo dispones:</p> </div> <div class="ulist"> <ul> <li> <p>AsciidocFX (requiere Java)</p> </li> <li> <p>IntelliJ (requiere instalar un plugin)</p> </li> <li> <p>VSCode (requiere instalar un plugin)</p> </li> </ul> </div> <div class="paragraph"> <p>De forma general, y aunque estos editores tengan la opción de generar el html (o el pdf, etc) es importante entender que estos editores trabajan sobre el <code>adoc</code> y que nosotros podremos ejecutar la generación del documento utilizando todas las opciones que ofrecen.</p> </div> </div> </div> <div id="footnotes"> <hr> <div class="footnote" id="_footnotedef_1"> <a href="#_footnoteref_1">1</a>. <a href="https://asciidoctor.org/docs/asciidoc-vs-markdown/" class="bare">https://asciidoctor.org/docs/asciidoc-vs-markdown/</a> </div> </div> Breve introducción al lenguaje de marcado asciidoc y su ecosistema Resumen 2019 Jorge Aguilera 2019-12-15T00:00:00Z https://blog.jagedn.dev/blog/2019/resumen.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Termina el 2019 y es tiempo de echar un ojo a lo que me ha pasado durante este año.</p> </div> </div> </div> <div class="sect1"> <h2 id="puravida_software">PuraVida Software</h2> <div class="sectionbody"> <div class="paragraph"> <p>Una de las cosas más difíciles de explicar a aquellos que no me conocen (y a muchos que sí) es mi perfil profesional , sobre todo por la existencia de PuraVida Software.</p> </div> <div class="paragraph"> <p>PuraVida Software es una empresa como tal, con su CIF, razón social, etc que creé hace ya unos 10 años y con la que ofrecía mis servicios como desarrollador. Sin embargo, durante este tiempo han surgido proyectos interesantes donde ,por las razones que fuera, la empresa prefería tener a alguien en nómina por lo que digamos de alguna forma PuraVida Software pasaba a estar "congelada". Sé que esto a veces genera cierta desconfianza porque da un aire de temporalidad pero si lo piensas bien, en nuestro sector lo único que hace que algo sea duradero es que el proyecto sea interesante y apoyes a la gente que participa en él, no la figura jurídica que se adopte.</p> </div> <div class="paragraph"> <p>Por otra parte, independientemente de la situación fiscal de PuraVida Software, yo he seguido usando su paragüas para seguir haciendo aquellas cosas personales que me apetecen, como:</p> </div> <div class="ulist"> <ul> <li> <p>publicar proyectos OpenSource</p> </li> <li> <p>patrocinios de comunidades como <a href="https://www.madridgug.com/">MadridGUG</a></p> </li> <li> <p>sponsors de eventos como <a href="https://greachconf.com">Greachconf</a></p> </li> <li> <p>charlas en diferentes eventos</p> </li> <li> <p>etc</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="la_q_en_qa">La Q en QA</h2> <div class="sectionbody"> <div class="paragraph"> <p>Este año he tenido la suerte (?) de poder trabajar en un equipo multidisciplinar como integrante del QA (quality assurance) y sufrir en mis propias carnes la poca valoración que se ha tenido (he tenido) a esta parte del desarrollo.</p> </div> <div class="paragraph"> <p>El proyecto era para una mega-empresa en un mega-proyecto con decenas de equipos que tras dejar atrás el monolito ya se habían adentrado en el agile y con sus más y sus menos iba dando sus frutos. Tras probar diferentes organizaciones ahora tenían grupos (pods que dirían los spotiferos, creo) con front, back, qa, su product owner, etc</p> </div> <div class="paragraph"> <p>Mi participación en este proyecto tenía una fecha fin muy concreta, de 3 meses, y como objetivo el intentar ver en qué forma podía ayudar a los QA a mejorar como reutilizar scripts, mejorar el uso de SoapUI, documentación, y cosas así a la vez que hacía labores propias del QA.</p> </div> <div class="paragraph"> <p>De este período creo que debería acuñar el término "Síndrome del último mono" o del QA que asume que su papel es probar las mierdas de los otros. Un QA debe hacer ver al resto del equipo que TODO debe pasar por ellos: desde que se está haciendo la planificación, mientras se está desarrollando las funcionalidades, hasta que se hace la demo al product owner. Y esto lo tiene que hacer ver desde el minuto cero.</p> </div> <div class="paragraph"> <p>Básicamente en todos los pods he visto que sólo se cuenta con los QAs para las pruebas finales, con escaso tiempo antes de la entrega y que estos lo asumían como algo normal.</p> </div> <div class="paragraph"> <p><strong>La Q de QA significa Calidad</strong>. Si quisieramos que sólo se dedicaran a hacer test los llamaríamos TA.</p> </div> <div class="paragraph"> <p>A título personal lo que sí les diría a los QA es que dejaran a un lado el maldito SoapUI que es el chocolate del loro. Mediante un interface gráfico (bastante feo) y a base de cajitas te hacen creer que estás automatizando tareas de test y lo que estás es cavando en un agujero donde no existe la reutilización ni el compartir. Refuerza a tus QA en programación (sobre todo en Groovy que es perfecto para este entorno), obligales a usar Git y que sean parte de los code review y que automatizen todo. Si además consigues que dejen de lado Confluence como sistema para documentar sabrás que estás en el camino correcto</p> </div> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="Warning"></i> </td> <td class="content"> Si estás pensando que la solución es NO tener el equipo QA y delegar en el equipo, no te preocupes también tengo algunos cachitos de historia que contar delante de unas cervezas. </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="la_k_de_kubernetes">La K de Kubernetes</h2> <div class="sectionbody"> <div class="paragraph"> <p>Después de estar jugando con la idea de Kubernetes, y una vez que Docker para lo que yo lo necesito está en mi día a día, este año he decidido dar unos primeros pasos con él.</p> </div> <div class="paragraph"> <p>Muy temerariamente estuve "asesorando" a una empresa amiga que se estaban moviendo hacia k8s, siempre conscientes de que eran nuestros primeros pasos. Por suerte no sólo contaban con mis nulos conocimientos sino que los estaban haciendo de la mano de una empresa de servicios con experiencia en el tema.</p> </div> <div class="paragraph"> <p>Por mi parte estuve probando a desplegar alguna de mis ideas en diferentes plataformas: Digital Ocean, AWS Fargate y Google Cloud. Me puse un presupuesto limitado de unos 10-15 euros al mes que pocas veces superé (creo que rondaron los 10€) durante los 3 ó 4 meses. Con diferencia, para lo poco que sabía me quedaría con Google Cloud</p> </div> <div class="paragraph"> <p>Sin embargo, tras una charla de <a href="https://twitter.com/pchico83">@pchico83</a> y <a href="https://twitter.com/micael_gallego">@micael_gallego</a> en el <a href="https://twitter.com/CodemoMadrid">@CodemoMadrid</a> sobre <a href="https://twitter.com/oktetohq">@oktetohq</a> he descubierto una plataforma perfecta para el aprendizaje de Kubernetes. Con sólo una cuenta en Github para identificarte dispones de un cluster con 5 namespaces, 8GB y mogollón de disco en cada namespace para desplegar tus servicios.</p> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> Tanto como con Docker (y tantas herramientas) antes de usar un entorno gráfico utiliza la línea de consola. Kubernetes tiene <code>kubectl</code> y te permite administrar todos tus cluster desde la línea de comando. De esta forma aprenderás los conceptos y sufrirás todas las dificultades existentes para saber valorar luego qué aportan toda la pléyade de herramientas que hay alrededor </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="la_b_de_bots">La B de Bots</h2> <div class="sectionbody"> <div class="paragraph"> <p>Algunos piensan que este año ha sido mi año de los Bots (de Telegram). Razón no les falta. Lo que empezó como una pataleta por una prueba de código a una oferta de trabajo fallida me llevó a publicar unos 5 bots, un par de canales de Telegram y un plugin para Gradle <code>Social Network</code> (el cual había creado a finales del 2018 pero ha sido este donde lo he usado de forma intensiva)</p> </div> <div class="paragraph"> <p>El bot de las cámaras de tráfico de Madrid, el de Barcelona o el de Granada, el localizador de fuentes públicas, en este verano tan caluroso, para Madrid, Barcelona, Granada y Cáceres, o el de los precios de las estaciones de servicio (gaolineras) con un sistema de diálogo un poco más elaborado han aportado, sin ser ninguno nada del otro mundo, muchas cosas para la mochila (material para charlas, conocer gente, descubrir nuevos canales de negocio, &#8230;&#8203;)</p> </div> <div class="paragraph"> <p>Tal vez de las cosas más interesantes que ha surgido de este tema, ha sido ver cómo alguien de Twitter, <a href="https://twitter.com/Garciolo">@Garciolo</a>, le gustó la idea de las fuentes y empezamos a chatear para incluir Granada en el bot. Como no lo encontrábamos para Granada <strong>se movilizó e intentó que el ayuntamiento le proporcionara los datos</strong>. Tras varios intentos y en vista de que no iba a ser posible, se hizo un repositorio Github y <strong>geolocalizó un buen número de ellas "a mano" para que las incluyera en el bot</strong></p> </div> </div> </div> <div class="sect1"> <h2 id="la_c_de_charlas">La C de Charlas</h2> <div class="sectionbody"> <div class="paragraph"> <p>Echando la vista atrás he visto con sorpresa que este año no he presentado ninguna charla a <a href="https://www.madridgug.com/">MadridGUG</a>. Si bien soy consciente de que tras las vacaciones de verano me dije de apoyar a gente que querían dar alguna en lugar de presentarlas yo, creía que al principio de año habría dado alguna.</p> </div> <div class="paragraph"> <p>Tengo varias ideas que me rondan:</p> </div> <div class="ulist"> <ul> <li> <p>Cómo hacer una app micronaut-desktop y controlarla vía web, al estilo de Torrent</p> </li> <li> <p>Revisar la prueba conceptual que hice de Micronaut y Ethereum y mostrar cómo unir Java con blockchain</p> </li> <li> <p>Primeros pasos de Kubernetes en Okteto</p> </li> </ul> </div> <div class="paragraph"> <p>y alguna otra que todavía no tienen forma</p> </div> <div class="paragraph"> <p>A cambio de no proponer nada en <a href="https://www.madridgug.com/">MadridGUG</a> he tenido otras experiencias bastante interesantes:</p> </div> <div class="paragraph"> <p>En Mayo me despierto con un mensaje de Picolini, <a href="https://twitter.com/francjp">@francjp</a>, proponiendome dar una 1/2 charla para un Meetup "la semana que viene sobre el tema que tú quieras". En estos temas si me tocan las palmas pues yo bailo así que le propuse "DocAsCode, una aproximación a la documentación contínua" algo sobre lo que luego hablaré. En su inconsciencia Fran pretendía llevar a dos ponentes para dos charlas cortas (de ahí lo de 1/2 charla) y obviamente al final tuvo dos charlas megalargas.</p> </div> <div class="paragraph"> <p>El tema de DocAsCode me tiene muy enganchado desde que descubrí <a href="https://twitter.com/asciidoctor">@asciidoctor</a> y personalmente me sentí muy cómodo con la charla pues además da muchas posibilidades de meterse con Word y Confluence. Señal de que no fue mal es que un par de asistentes, al terminar, me comentaran que les había parecido muy buena por hablar de un tema que nadie habla.</p> </div> <div class="paragraph"> <p>Tras ver un tweet de <a href="https://twitter.com/jjmerelo">@jjmerelo</a> anunciando que el C4P para <a href="https://twitter.com/esLibre_">@esLibre_</a> (conferencias sobre Software Libre en Granada) estaba abierto creo que dude 1 minuto en enviar la propuesta de "OpenSource para un mundo OpenData" y un poco después la de "DocAsCode". La verdad es que me apetecía salir de Madrid (visitar las provincias) y era una excusa perfecta. El proceso abierto, usando Pull Request de Github, tanto de enviar como de aceptar las charlas me encantó y creo que otras comunidades deberían plantearselo.</p> </div> <div class="paragraph"> <p>Ahora me doy cuenta que tenía que haber hecho un resumen en aquel momento más detallado de las charlas que asistí pero recuerdo a dos chavales de no más de 25 años hablando sobre Inteligencia Artificial y Programación Cuántica que me hicieron sentir muy viejo a la vez que ilusionado. También recuerdo el debate sobre el estado del OpenSource en España de miembros muy activos de este movimiento (confieso que a muchos de ellos los tuve que buscar después, pero eso es porque no soy de quedarme con los nombres)</p> </div> <div class="paragraph"> <p>De mis dos charlas la verdad es que no salí todo lo satisfecho que me hubiera gustado, probablemente por culpa del troll que llevo dentro:</p> </div> <div class="ulist"> <ul> <li> <p>En la de OpenData me sentí como que estaba fardando de lo que había hecho con los datos abiertos del Ayuntamiento de Madrid, cuando nada más lejos de la realidad. Mi intención era "si un programador normal como yo puede hacerlo, cualquiera puede. Sólo hay que echarle tiempo y ganas"</p> </li> <li> <p>La de DocAsCode creo que podría haberla hecho más amena o tal vez es que la comparo demasiado con la que había dado en el Meetup. En cualquier caso sí dió para discutir sobre ello con un par de interesados así que me quedo conque el tema tiene mucha chicha que contar</p> </li> </ul> </div> <div class="paragraph"> <p>Por último @CodemoMadrid me confirmó que la charla de "OpenSource para un mundo OpenData" había sido elegida y tras la experiencia de haberla podido dar en @esLibre_ pude replantearla y personalmente salir muy satisfecho. Después de la charla pude hablar con un par de personas sobre ella y creo que algo de inquietud en el tema sí caló.</p> </div> </div> </div> <div class="sect1"> <h2 id="otra_k_de_kanban">Otra K de Kanban</h2> <div class="sectionbody"> <div class="paragraph"> <p>Llevo unos pocos meses en un equipo de trabajo donde se usa Kanban y la verdad que no está mal. Focalizar el esfuerzo en tirar de los tickets en lugar de empujarlos, sin sprints sino con entregas cuasi-contínuas y cosas así hace que si las cosas van medio bien uno se sienta productivo</p> </div> <div class="paragraph"> <p>Sin embargo, por mucho que quiera, Kanban no se escapa a la constante universal de que <strong>negocio te impondrá siempre lo urgente por encima de lo importante</strong></p> </div> </div> </div> <div class="sect1"> <h2 id="resumen">Resumen</h2> <div class="sectionbody"> <div class="paragraph"> <p>Aunque no lo creas, este post había tenido una versión previa muchísimo más negativa y pesimista. Este año, como tantos otros, ha tenido sus "palos", sus cosas malas, decepcionantes y desagradables y me encontré escribiendo sobre ellas más que sobre lo que el año me había aportado.</p> </div> <div class="paragraph"> <p>Sin saber nada de medicina sospecho que debemos segregar algún tipo de compuesto químico que nos produce cierto placer , un revolcarnos en el barro, un cavar en un hoyo, que nos impide levantarnos y seguir adelante. Por suerte @montalegos estuvo al tanto y lo he reescrito. Con ello no quiero tapar las cosas "malas" y sólo mostrar las buenas sino que, partiendo que principalmente escribo para mí, opto por estas antes que por aquellas</p> </div> <div class="paragraph"> <p>A diferencia de otros referentes que tengo, yo no hago planes para el año que viene, lo más a 3 meses vista por lo que por ahora sólo tengo como tema a hacer el Workshop sobre Bot que voy a dar en el @Greachconf 2020. <strong>Son 3 horas y en inglés, por lo que las risas y momentos difíciles están asegurados</strong></p> </div> </div> </div> null Kubernetes, Jobs (3) Jorge Aguilera 2019-11-30T00:00:00Z https://blog.jagedn.dev/blog/prestamos-bibliotecas/k8s-3.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>This is the third part of a series of posts about how I&#8217;ll develop an application in Kubernetes (k8s)</p> </div> <div class="ulist"> <ul> <li> <p>first post: Idea (<a href="https://blog.jagedn.dev/blog/prestamos-bibliotecas/k8s-1.html" class="bare">https://blog.jagedn.dev/blog/prestamos-bibliotecas/k8s-1.html</a>)</p> </li> <li> <p>second post: Infraestructure (<a href="https://blog.jagedn.dev/blog/prestamos-bibliotecas/k8s-2.html" class="bare">https://blog.jagedn.dev/blog/prestamos-bibliotecas/k8s-2.html</a>)</p> </li> <li> <p>third post: Job (<a href="https://blog.jagedn.dev/blog/prestamos-bibliotecas/k8s-3.html" class="bare">https://blog.jagedn.dev/blog/prestamos-bibliotecas/k8s-3.html</a>)</p> </li> </ul> </div> <div class="paragraph"> <p>The main ot these posts is to document the process of deploying a solution in k8s at the same time I&#8217;m writting the application so probably all posts will have a lot of errors and mistakes that I need to correct in the next post.</p> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> Be aware that I&#8217;m a very nobel with Kubernetes and these are my first steps with it. I hope to catch up the attention of people with more knowledge than me and maybe they can review these posts and suggest to us some improvements. </td> </tr> </table> </div> <div class="admonitionblock tip"> <table> <tr> <td class="icon"> <i class="fa icon-tip" title="Tip"></i> </td> <td class="content"> I&#8217;ve created a git repository at <a href="https://gitlab.com/puravida-software/k8s-bibliomadrid" class="bare">https://gitlab.com/puravida-software/k8s-bibliomadrid</a> with the code of the application </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="gradle_multiproject">Gradle multiproject</h2> <div class="sectionbody"> <div class="paragraph"> <p>I&#8217;ve splitted the application into a multimodule Gradle projects with:</p> </div> <div class="ulist"> <ul> <li> <p>com-puravida-biblios-model as a Micronaut jar library with the model and the repository. Also this library will have the liquidbase files to update the database schema</p> </li> <li> <p>com-puravida-biblios-etl as a Micronaut cli application who takes a year and a month as arguments to download the csv file and import it into the database.</p> </li> </ul> </div> <div class="paragraph"> <p>These are typical project created with the cli as:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>mn create-app --lang groovy --profile cli com.puravida.biblios.etl</code></pre> </div> </div> <div class="paragraph"> <p>As at some point I&#8217;ll need a database (PostgreSQL) I use Okteto&#8217;s hability to develop an application into a kubernetes cluster with a PostgreSQL deployed (see step2) in a similar way as if I use a local instance of PostgreSQL or TestContainer,etc.</p> </div> <div class="admonitionblock tip"> <table> <tr> <td class="icon"> <i class="fa icon-tip" title="Tip"></i> </td> <td class="content"> For this use case, Okteto doesn&#8217;t add a lot of value because I have only a database dependency that I can solve with local solutions. If the application requires more artifacts as specific services, databases or tools that are difficult to install and maintain in every developer desktop, Okteto can be a good solution to develop directly in a kubernetes cluster. </td> </tr> </table> </div> <div class="paragraph"> <p>So basically I&#8217;ve created an okteto.ini file in the root of the gradle proyect</p> </div> <div class="listingblock"> <div class="title">okteto.ini</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="yaml">name: gradle image: gradle:latest command: - bash volumes: - /home/gradle/.gradle forward: - 8080:8080 - 8088:8088 environment: - POSTGRES_PASSWORD=okteto - POSTGRES_USER=okteto - POSTGRES_DB=okteto - POSTGRESQL_SERVICE_HOST=10.0.7.172</code></pre> </div> </div> <div class="paragraph"> <p>And when I want to develop directly in the cluster I only need to execute:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code>$ okteto up groovy:groovy$ ./gradlew build</code></pre> </div> </div> <div class="paragraph"> <p>With <code>okteto up</code> I created a new Pod called <code>gradle</code> with the gradle docker image where I can run commands as <code>build</code>, <code>run</code>, etc.</p> </div> <div class="paragraph"> <p>Also I can edit files in my local disk and okteto will synchronize them with the remote pod. In the same way I can run the application in the pod and connect to it with my IntelliJ in order to debug it as if it was running in my laptop</p> </div> <div class="paragraph"> <p>As you can see I&#8217;ve injected some environment values related to my Postgre database so the application can works against it (insert records at develop time, etc)</p> </div> </div> </div> <div class="sect1"> <h2 id="model">Model</h2> <div class="sectionbody"> <div class="paragraph"> <p>By the moment the model is very simple with only two Domain Object and two repositories:</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/diag-b400011773409541dc44cf1c3de0b70d.png" alt="Diagram" width="342" height="398"> </div> </div> </div> </div> <div class="sect1"> <h2 id="job">Job</h2> <div class="sectionbody"> <div class="paragraph"> <p>Once I had the <code>etl</code> ready, able to download a file and parse and insert into the database I wanted to have a kubernetes way to run it using differents years and months.</p> </div> <div class="paragraph"> <p>One posibility is to have a pod and via command line or with a web endpoint invoque the import process but in this case I&#8217;ve used a Job.</p> </div> <div class="paragraph"> <p>Kubernetes has the possibility to run a container via a Job in a lot of different scenaries (one-shot, with a chron, rety if fails, etc). For my purpose I want to run a single Job, and launch it mannualy (once I verified a new file is ready in the portal of OpenData).</p> </div> <div class="paragraph"> <p>This job needs to connect to the database so I&#8217;ll need to use the ConfigMap where I saved the connection details (host, user, password and database). Also I need to indicate the year and month to process (via arguments command line)</p> </div> <div class="paragraph"> <p>After some reseachs (trial and error) I learnt some lessons:</p> </div> <div class="ulist"> <ul> <li> <p>When you run a Job (with <code>kubectl apply -f job-file.yaml</code> for example), kubernetes creates a new pod and meanwhile you don&#8217;t remove it with <code>kubectl delete name-of-the-job-id</code> it remains into your cluster (as finished). This can be usefull to inspect the logs for example</p> </li> <li> <p>You can run a Job multiple times and kubernetes will create new pods every time but you need to inspect what&#8217;s the last executed.</p> </li> <li> <p>Once executed a Job you <strong>CAN&#8217;T</strong> modify the spec and try again to run it. You&#8217;ll have a <strong>field inmmutable</strong> error. To solve it simple delete the old job and retry</p> </li> </ul> </div> <div class="paragraph"> <p>As I want to run a job using different arguments (year and month) I can&#8217;t use a single yaml file without deleting jobs previously executed, so I ended with a template, and using <code>sed</code> command I replace some variables to produce final yaml files:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="yaml">apiVersion: batch/v1 kind: Job metadata: name: com-puravida-biblios-etl-$YEAR-$MONTH labels: jobgroup: etl spec: backoffLimit: 0 template: spec: containers: - name: com-puravida-biblios-etl image: jagedn/k8s-bibliomadrid-etl:$VERSION args: [ "-y", "$YEAR", "-m", "$MONTH"] envFrom: - configMapRef: name: postgres-config restartPolicy: Never terminationGracePeriodSeconds: 0</code></pre> </div> </div> <div class="paragraph"> <p>as you can see we have 3 variables (YEAR, MONTH and VERSION) to replace</p> </div> <div class="listingblock"> <div class="title">etl-tpl.yaml</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="console">$ sed -e 's/$YEAR/2019/g' -e 's/$MONTH/04/g' -e 's/$VERSION/0.1/g' k8s/etl-tpl.yaml &gt; k8s/jobs/etl-2019-04.yaml $ kubectl apply -f k8s/jobs/etl-2019-04.yaml $ kubectl logs -f com-puravida-biblios-etl-2019-06-fdx6f</code></pre> </div> </div> <div class="paragraph"> <p>In this way not only I&#8217;ll have one file per year-month that I can run in every namespace I had (dev and prod) but also I&#8217;ll have in the repo all files versioned</p> </div> </div> </div> <div class="sect1"> <h2 id="next_step">Next step</h2> <div class="sectionbody"> <div class="paragraph"> <p>Once we have some datas into our database we can develop a new service able to serve them via REST (or maybe GrapQL?) to Internet</p> </div> </div> </div> <div class="sect1"> <h2 id="acknowledgment">Acknowledgment</h2> <div class="sectionbody"> <div class="paragraph"> <p>Thanks to Pablo Chico de Guzman, @pchico83, to confirm a Job is a good alternative to do a ETL</p> </div> <div class="paragraph"> <p>Thanks to JJ Merelo, @jjmerelo, for suggesting me to use Celery (<a href="https://twitter.com/jjmerelo/status/1199935927931592705" class="bare">https://twitter.com/jjmerelo/status/1199935927931592705</a>) Another tool to learn!!!</p> </div> <div class="paragraph"> <p>Thanks to Fran, @franco87ES, for confirm I can use ConfigMap in a Job (<a href="https://twitter.com/franco87ES/status/1200059717965504513" class="bare">https://twitter.com/franco87ES/status/1200059717965504513</a>) I was lost because after modified a yaml I wanted to re-apply it, without removed the old job and Kubernetes was rejecting the action with a 'field inmutable' error and I thought was due to the ConfigMap section. Thanks to Fran&#8217;s advice I digged more into the problem and at the end I realized my error.</p> </div> </div> </div> A series about how I'm developping an application with Kubernetes Prices scrapping Jorge Aguilera 2019-11-24T00:00:00Z https://blog.jagedn.dev/blog/2019/scrapping-prices.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>This is a simple 'prices scrapping' application to check a list of products and notify via Telegram if some of them are under or bellow a price</p> </div> <div class="paragraph"> <p>This post is an example to show how we can mix different technologies without spend money to have a daily alert if some prices are changed. Be aware this is not a "proffesional" way to do it and we can consider it as a "toy" or as a "lab" to learn</p> </div> </div> </div> <div class="sect1"> <h2 id="requirements">Requirements</h2> <div class="sectionbody"> <div class="paragraph"> <p>In order to have a fully functional example you&#8217;ll need:</p> </div> <div class="ulist"> <ul> <li> <p>a bot Telegram</p> </li> <li> <p>a Google Sheet plus</p> </li> <li> <p>credentials from Google Project</p> </li> <li> <p>a Gitlab account (you can use Github or similar but this example use Gitlab pipeline)</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="telegram">Telegram</h2> <div class="sectionbody"> <div class="paragraph"> <p>We&#8217;ll use Telegram as the channel to notify us about the changes of prices. You&#8217;ll need to have two things:</p> </div> <div class="ulist"> <ul> <li> <p>Telegram installed into our mobile phone (also you can access via web browser)</p> </li> <li> <p>a Telegram bot</p> </li> </ul> </div> <div class="paragraph"> <p>First step it&#8217;s easy and similar as install other messanger applications.</p> </div> <div class="paragraph"> <p>To create our bot we&#8217;ll use the Telegram application to talk with the 'BotFather', a bot from Telegram able to create bots (<a href="https://core.telegram.org/bots" class="bare">https://core.telegram.org/bots</a>)</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2019/scrapping/botfather.png" alt="botfather"> </div> </div> <div class="paragraph"> <p>Basically we&#8217;ll order it to create a new boot writting "/newbot" and following his instructions (a name, a description and so on) to obtain a <strong>token</strong> similar as 12312312:AAAAAAAAAAAAAAAAAAAaaY . <strong>DON&#8217;T SHARE THIS TOKEN AND DON&#8217;T STORE IT IN YOUR REPO</strong></p> </div> <div class="paragraph"> <p>To allow our bot to talk to you, you need to start the conversation, so search your bot with the Telegram&#8217;s search button and send it a hello with the '/start' command</p> </div> <div class="paragraph"> <p>Also we&#8217;ll need to know your telegram client id. You can use the existing bot '@userinfobot' who reply every message with info about your account to obtain your client id plus other information. <strong>YOU CAN SHARE THIS ID, IT&#8217;S NOT SO IMPORTANT, BUT AS WITH THE TOKEN WE&#8217;LL KEEP IT SECRET</strong></p> </div> </div> </div> <div class="sect1"> <h2 id="google_service">Google Service</h2> <div class="sectionbody"> <div class="paragraph"> <p>Probably this is the part most obscure of the process. If you have a Google account, you can create projects and deploy Google AppEngine, Kubernetes, and a lot of Google services.</p> </div> <div class="paragraph"> <p>So open <a href="https://console.cloud.google.com/" class="bare">https://console.cloud.google.com/</a> and follow instructions to create your first project (but for this tutorial you don&#8217;t need deploy anything, only create the project)</p> </div> <div class="paragraph"> <p>Once the project is created we&#8217;ll need to enable the Google Sheet API:</p> </div> <div class="ulist"> <ul> <li> <p>go <a href="https://console.cloud.google.com/apis/library" class="bare">https://console.cloud.google.com/apis/library</a></p> </li> <li> <p>search Sheet and enable it</p> </li> </ul> </div> <div class="paragraph"> <p>Also we&#8217;ll need create a service and generate a credentials file from it:</p> </div> <div class="ulist"> <ul> <li> <p><a href="https://console.cloud.google.com/apis/credentials" class="bare">https://console.cloud.google.com/apis/credentials</a></p> </li> <li> <p>create a <strong>SERVICE</strong> credentials</p> </li> </ul> </div> <div class="imageblock"> <div class="content"> <img src="/images/2019/scrapping/crear_credenciales.png" alt="crear credenciales"> </div> </div> <div class="paragraph"> <p>After the service is created, Google will download automatically a JSON file. <strong>KEEP IT SECRET AND DON&#8217;T STORE INTO YOUR REPO</strong></p> </div> <div class="paragraph"> <p>We&#8217;ll need the email of the service account (something similar to <a href="mailto:your-awesome-service@your-awesome-project.iam.gserviceaccount.com">your-awesome-service@your-awesome-project.iam.gserviceaccount.com</a>) in the next step</p> </div> </div> </div> <div class="sect1"> <h2 id="google_sheet">Google Sheet</h2> <div class="sectionbody"> <div class="paragraph"> <p>The application will read a Google Sheet with a simple structure as this:</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2019/scrapping/google_sheet.png" alt="google sheet"> </div> </div> <div class="paragraph"> <p>When you are editing the sheet you can find the ID of it in the URL:</p> </div> <div class="paragraph"> <p>You we&#8217;ll need this ID and <strong>IT&#8217;S BETTER NOT KEEP IT INTO YOUR REPO</strong></p> </div> <div class="paragraph"> <p>In order the application can read this sheet we need to share it with the service email created previously so click on 'Share' and add your service as collaborator (don&#8217;t send the notification email because nobody will be listening and you will receive a notification error email)</p> </div> </div> </div> <div class="sect1"> <h2 id="application">Application</h2> <div class="sectionbody"> <div class="paragraph"> <p>You can download the application from <a href="https://gitlab.com/jorge-aguilera/scrapping-prices" class="bare">https://gitlab.com/jorge-aguilera/scrapping-prices</a></p> </div> <div class="paragraph"> <p>Basically is a "one only class application" who</p> </div> <div class="ulist"> <ul> <li> <p>reads a google sheet&#8217;s range "A1:E99" (yes, this example only works with a max of 99 articles),</p> </li> <li> <p>opens a Geb Browser per row</p> </li> <li> <p>use a custom css selector to find the price element.</p> </li> <li> <p>If the value of the item is lower or upper than the associate rule it add the item to a list.</p> </li> <li> <p>At the end it sends an http POST to the channel with the summary</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="gitlab">Gitlab</h2> <div class="sectionbody"> <div class="paragraph"> <p>The repo is allocate at Gitlab and uses the pipeline capability of it to run every day the <code>run</code> task</p> </div> <div class="paragraph"> <p>Basically we need to configure some environment variables:</p> </div> <div class="ulist"> <ul> <li> <p>SHEET_ID (the id of the sheet)</p> </li> <li> <p>TABS ("Sheet 1" or whatever you use)</p> </li> <li> <p>TELEGRAM_TOKEN (the token obtained via BotFather)</p> </li> <li> <p>TELEGRAM_CHANNEL (the telegram userId)</p> </li> <li> <p>GOOGLE_APPLICATION_CREDENTIALS (use as File instead of variable and paste the content of the credentials.json)</p> </li> </ul> </div> <div class="paragraph"> <p>And set the schedule we want to use, for example:</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/2019/scrapping/gitlab_pipeline.png" alt="0 9 * * * (every day at 9:00)"> </div> </div> </div> </div> <div class="sect1"> <h2 id="conclusion">Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>I&#8217;ll recapt:</p> </div> <div class="ulist"> <ul> <li> <p>you have a bot telegram with a TOKEN</p> </li> <li> <p>you have your telegram id and you&#8217;ve started a conversation with your bot</p> </li> <li> <p>you have a Google Sheet, you have the Sheet Id and you&#8217;ve added the service as collaborator</p> </li> <li> <p>you have a credentials file in a safe place</p> </li> <li> <p>you have a repo in Gitlab with several environments variables configured</p> </li> </ul> </div> <div class="paragraph"> <p>Basically we have someone (Gitlab Pipeline) running our application every day, reading a Google Sheet (via a service account) and sending us a message (vía our bot telegram)</p> </div> </div> </div> A custom prices scrapping with telegram notification Postureo Jorge Aguilera 2019-11-20T00:00:00Z https://blog.jagedn.dev/blog/2019/postureo.html <div class="paragraph"> <p>Hace ya unas semanas se produjo una conmoción en mi TimeLine de Twitter a raiz de un tweet de alguien del sector en el que exponía algo así como que no eres mejor profesional por dedicarte fuera del trabajo a seguir "pegado" al ordenador y que es bueno hacer otras cosas diferentes, principalmente dedicar más tiempo a la familia.</p> </div> <div class="paragraph"> <p>En realidad algo <strong>tan obvio</strong> no es lo que conmocionó mi TL sino los comentarios y ramificaciones que fuí viendo a raiz de él.</p> </div> <div class="paragraph"> <p>Tengo perfectamente asumido que Twitter no es el mejor medio para explicar una opinión, incluso muchas veces lo que expresamos no es realmente lo que querríamos decir en un entorno más "reposado", pero la palabra <strong>postureo</strong> se iba repitiendo cada vez más, subiendo la apuesta hasta llegar a afirmar que si alguien dedica su tiempo libre a ir a eventos, compartir código o similar claramente era por <strong>postureo</strong> y que seguro que no eras ni un buen profesional , y ahí ya sí me sentí especialmente dolido.</p> </div> <div class="paragraph"> <p>Soy un programador con muchos años en el sector, la mitad de mi edad ahora mismo, y durante muchos de ellos fuí el típico "infiltrado" por no haber llegado a ella con los estudios oficiales, hasta que me decidí a hacer el Grado de Informática (online). Mis motivos para ello escapan a este post pero lo que no cambió el terminar los estudios fue las ganas de "hacer" que tenía desde el principio.</p> </div> <div class="paragraph"> <p>Desde mis comienzos siempre he sentido esa inquietud de al menos intentar "hacerlo" sin importar si otros lo habían hecho ya o si lo podían hacer mejor (prácticamente siempre ocurría). Quería hacerlo por mí y. porqué no, por el orgullo de poder decir "yo lo he hecho". Spoiler: ninguna de mis ideas revolucionarias han servido para nada</p> </div> <div class="paragraph"> <p>Así fue como monté una empresa de servicios de software donde llegamos a ser hasta 10 personas trabajando en múltiples proyectos a la vez (y que alguna de las crisis y mi mal saber hacer se llevaron por delante). Y <strong>es cierto</strong>, en aquella época intentaba transmitir mi pasión por el "hacer", dedicando los tiempos que podía a investigar, descubrir problemas e imaginar soluciones y aunque no juzgaba a la gente por hacer lo que quisiera en su tiempo libre <strong>sí tenía predilección</strong> por los que como yo <em>sacrificaban</em> ese tiempo en aplicarlo en mejorar su día a día. Pero ¿es que acaso no tenemos todos afinidad por quien comparte nuestras aficiones y puntos de vista?</p> </div> <div class="paragraph"> <p>Luego llegaron los meetups, los eventos, los proyectos OpenSource, los blogs, el (podría yo) dar una charla, el para la próxima lo haré de esta otra forma. Con cada evento al que he asistido y cada charla que he perpetrado no me han hecho sentirme superior a tí en el más mínimo ápice, de hecho prácticamente todo lo contrario, en cada uno me ha hecho sentirme más ignorante.</p> </div> <div class="paragraph"> <p>Y efectivamente todo eso es consumiendo parte de mi tiempo libre que a veces me hacen encerrarme en mi habitación y rechazar invitaciones de mis amigos e incluso familia.</p> </div> <div class="paragraph"> <p>Pero &#8230;&#8203; si es mi decisión, consciente y que me satisface ¿quién eres tú para juzgar cómo empleo mi tiempo libre?</p> </div> <div class="paragraph"> <p>Si yo no cuestiono tu profesionalidad por dedicar sólo horas de trabajo a tu mejora, ¿porqué tienes que asumir que mi deseo de compartir lo que voy aprendiendo es para tapar mi falta de profesionalidad o por aparentar?</p> </div> <div class="paragraph"> <p>¿Acaso no puede existir en mí el deseo de enseñarte cosas que creo te pueden servir y que si no las quieres me dé igual? Yo no te las impongo</p> </div> <div class="paragraph"> <p>Al menos en todos esos comentarios hubo un comentario/reflexión que me ha hecho reflexionar:</p> </div> <div class="paragraph"> <p>¿La gente que está en mil eventos, da charlas y escribe sobre mil asuntos transmite una imagen hacia personas que acaban de aterrizar como de necesidad de hacer lo mismo si quieres prosperar en esta profesión?</p> </div> <div class="paragraph"> <p>La respuesta parece ser un rotundo sí. Personas que se inician ven toda esa actividad y exhibición de conocimientos, que puede abrumarles y hacerles creer que eso es lo que hay que hacer.</p> </div> <div class="paragraph"> <p>¿Son, al menos en parte, responsables de cómo afecta esta imagen a los que empiezan?</p> </div> <div class="paragraph"> <p>Difícil pregunta a la que no he encontrado una respuesta de blanco o negro.</p> </div> null Galería de fotos con Kubernetes Jorge Aguilera 2019-11-19T00:00:00Z https://blog.jagedn.dev/blog/2019/okteto-gallery.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>En este artículo vamos a ver cómo podemos publicar una galería de fotos usando herramientas de kubernetes.</p> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> Este caso de uso no deja de ser una práctica básica de conceptos kubernetes como crear volúmenes, desplegar un servicio o ejecutar un job. Para ello podemos usar los servicios de cloud de cualquier provedor como Google, AWS, DigitalOcean, etc. En concreto voy a usar el cloud de Okteto por lo que si quieres seguir este ejemplo deberás haber creado una cuenta en él aunque en principio todo lo que voy a utilizar es kubernetes puro por lo que debería dar igual el proveedor. </td> </tr> </table> </div> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="Warning"></i> </td> <td class="content"> Estoy dando mis primeros pasos en Kubernetes, aprendiendo sobre lo que leo y practico, así que puede ser (seguro) que alguna o todas las cosas que aquí cuente no tengan por ser la mejor solución. </td> </tr> </table> </div> <div class="paragraph"> <p>Existen muchas plataformas para publicar fotos, tipo Instagram, Google Photos, etc pero en mi opinión todas tienen la "pega" de que pierdes la oportunidad de aprender así como que una vez subidas a estas plataformas pierdes el control de lo que subes. Como alternativa tenemos herramientas tipo Piwigo que es un gestor completo orientado a la fotografía (una especie de "el WordPress de la fotografía ) pero requiere una base de datos MySQL, tener PHP instalado &#8230;&#8203; y sufrir los ataques típicos.</p> </div> <div class="paragraph"> <p>Sin embargo también existen multitud de programas que dado un directorio/subdirectorio con fotos nos generan un site estático (no necesita base de datos, ni lenguajes, puritito html y javascript para ejecutar en el browser del cliente). He probado varios pero para este ejercicio voy a usar Thumbshup <a href="https://thumbsup.github.io/" class="bare">https://thumbsup.github.io/</a> básicamente porque me ha parecido de los más rápidos y con suficientes opciones para poder tunear el resultado a tu gusto.</p> </div> <div class="paragraph"> <p>La idea final es tener desplegado un servicio Nginx que sirva un directorio generado previamente.</p> </div> </div> </div> <div class="sect1"> <h2 id="idea">Idea</h2> <div class="sectionbody"> <div class="paragraph"> <p>El siguiente diagrama resume la arquitectura que vamos a usar para desplegar nuestra static-gallery</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/diag-b137384d70f1e3bedf1a9f859e441d04.png" alt="Diagram" width="331" height="645"> </div> </div> <div class="paragraph"> <p>Como se puede apreciar, básicamente tendremos dos "discos", uno donde copiaremos nuestras fotos y otro que contendrá el site ya convertido, un servidor Nginx que ofrecerá vía http el site convertido y un Job que ejecutará la generación del contenido cuando tengamos nuevas fotos.</p> </div> <div class="paragraph"> <p>El administrador (nosotros) copiaremos las fotos en el volumen photos usando el container <code>nginx</code> mientras que el visitante accederá a <code>nginx</code> vía http para verlas ya convertidas en el volumen generated</p> </div> </div> </div> <div class="sect1"> <h2 id="preparación">Preparación</h2> <div class="sectionbody"> <div class="paragraph"> <p>Como se ha comentado lo primero que deberás tener es una cuenta en algún proveedor de Kubernetes (podrías usar minikube en local pero la idea es llegar a publicar el album en Internet). En este caso voy a usar mi cuenta en Okteto</p> </div> <div class="paragraph"> <p>En segundo lugar vamos a necesitar la herramienta de consola <code>kubectl</code>. Si prefieres usar herramientas gráficas en lugar de la línea de consola &#8230;&#8203; este no es tu sitio.</p> </div> <div class="paragraph"> <p>En tercer lugar necesitaremos (obviamente) un directorio/subdirectorios con las fotos que queremos publicar</p> </div> <div class="paragraph"> <p>Por último necesitaremos bajarnos las credenciales de nuestro proveedor y configurar <code>kubectl</code> para que las use . Por ejemplo, en una consola lo primero que ejecutaré será:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="console">$ export KUBECONFIG=$(pwd)/okteto-kube.config <i class="conum" data-value="1"></i><b>(1)</b></code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>con $(pwd) ajusto a kubectl para que use una ruta absoluta a las credenciales</td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="volumenes">Volumenes</h2> <div class="sectionbody"> <div class="paragraph"> <p>Lo primero que vamos a preparar son 2 volúmenes, uno donde copiaremos nuestros fotos que tenemos en local y otro donde volcaremos el static-site generado para que nginx lo lea</p> </div> <div class="listingblock"> <div class="title">storage.yaml</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="yaml">apiVersion: v1 kind: PersistentVolumeClaim metadata: name: example-source spec: storageClassName: standard accessModes: - ReadWriteOnce resources: requests: storage: 10Gi --- apiVersion: v1 kind: PersistentVolumeClaim metadata: name: example-gallery spec: storageClassName: standard accessModes: - ReadWriteOnce resources: requests: storage: 10Gi</code></pre> </div> </div> <div class="paragraph"> <p>En este fichero estamos especificando que queremos crear 2 volumenes (en realidad el volumen es uno y ya está creado en nuestra cuenta, lo que hacemos es reservar "trozos" de nuestro volumen)</p> </div> <div class="paragraph"> <p>Usaremos <code>example-source</code> como lugar donde copiar las fotos y <code>example-gallery</code> como lugar donde ubicar el static</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="console">$ kubectl apply -f storage.yaml</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="copiar_fotos">Copiar fotos</h2> <div class="sectionbody"> <div class="paragraph"> <p>En kubernetes necesitas "montar" un volumen a alguna instancia para poder copiar (o extraer) ficheros de el mismo. Para este ejemplo vamos a usar el mismo container de <code>nginx</code> (aunque podríamos usar un <code>busybox</code> por ejemplo que es una imagen mínima)</p> </div> <div class="listingblock"> <div class="title">nginx.yaml</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="yaml">apiVersion: apps/v1 kind: Deployment metadata: name: ejemplo spec: selector: matchLabels: app: ejemplo replicas: 1 template: metadata: labels: app: ejemplo spec: containers: - name: ejemplo image: nginx:1.7.9 ports: - containerPort: 80 resources: limits: memory: "1024Mi" requests: memory: "1024Mi" volumeMounts: - mountPath: /usr/share/nginx/html name: gallery - mountPath: /photos name: photos volumes: - name: gallery persistentVolumeClaim: claimName: 'example-gallery' - name: photos persistentVolumeClaim: claimName: 'example-source'</code></pre> </div> </div> <div class="paragraph"> <p>En este punto el volumen de interés es el llamado <code>photos</code> que se montará en la ruta <code>/photos</code> del contenedor.</p> </div> <div class="paragraph"> <p>Una vez desplegado podremos transferir nuestras fotos al volumen:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="console">$ kubectl apply -f nginx.yaml <i class="conum" data-value="1"></i><b>(1)</b> $ kubectl cp photos nginx:/input <i class="conum" data-value="2"></i><b>(2)</b> $ kubectl delete -f nginx.yaml <i class="conum" data-value="2"></i><b>(2)</b> deployment.apps "ejemplo" deleted</code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>Habrá que esperar unos segundos para que el pod se cree</td> </tr> <tr> <td><i class="conum" data-value="2"></i><b>2</b></td> <td>Copiamos nuestras fotos en local, <code>photos</code>, al volumen <code>input</code></td> </tr> <tr> <td><i class="conum" data-value="3"></i><b>3</b></td> <td>Una vez copiadas ya no necesitamos este container</td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="generar_el_site">Generar el site</h2> <div class="sectionbody"> <div class="paragraph"> <p>Para generar el site vamos a usar una instancia de Thumbshup y la vamos a ejecutar como un job de una sóla ejecución</p> </div> <div class="listingblock"> <div class="title">job.yaml</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="yaml">apiVersion: batch/v1 kind: Job metadata: name: thumbsup spec: template: spec: restartPolicy: Never containers: - name: thumbsup image: thumbsupgallery/thumbsup command: ["thumbsup","--input","/photos/photos","--output","/gallery"] volumeMounts: - mountPath: /photos name: input - mountPath: /gallery name: output volumes: - name: input persistentVolumeClaim: claimName: 'example-source' - name: output persistentVolumeClaim: claimName: 'example-gallery'</code></pre> </div> </div> <div class="paragraph"> <p>En este job montamos los dos volumenes y le indicamos a thumbsup cúal es el de entrada y cúal el de salida. Una vez que se ejecute el job tendremos en 'gallery' el site generado</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="console">$ kubectl apply -f job.yaml job.batch/thumbsup created $ kubectl get jobs.batch NAME COMPLETIONS DURATION AGE thumbsup 1/1 25s 46s</code></pre> </div> </div> <div class="paragraph"> <p>Podemos ver que para este ejemplo, con solo un par de fotos, thumbsup ha tardado unos segundos</p> </div> </div> </div> <div class="sect1"> <h2 id="nginx">Nginx</h2> <div class="sectionbody"> <div class="paragraph"> <p>Por último simplemente nos queda crear un pod donde un Nginx pueda servir el site generado previamente. Para ello vamos a volver a desplegar el mismo deployment de la parte de copy</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="console">$ kubectl apply -f nginx.yaml</code></pre> </div> </div> <div class="paragraph"> <p>y por último desplegaremos un <code>service</code> que conecte nuestro <code>nginx</code> con el mundo exterior</p> </div> <div class="listingblock"> <div class="title">service.yaml</div> <div class="content"> <pre class="prettyprint highlight"><code data-lang="yaml">apiVersion: v1 kind: Service metadata: name: ejemplo annotations: dev.okteto.com/auto-ingress: "true" spec: type: ClusterIP ports: - name: "ejemplo" port: 80 selector: app: ejemplo</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="console">$ kubectl apply -f service.yaml</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="resultado">Resultado</h2> <div class="sectionbody"> <div class="paragraph"> <p>Si todo ha ido bien tendremos un site estático como este</p> </div> <div class="paragraph"> <p><a href="https://viajes-jagedn.cloud.okteto.net" class="bare">https://viajes-jagedn.cloud.okteto.net</a></p> </div> </div> </div> <div class="sect1"> <h2 id="custom_domain_y_okteto">Custom domain y Okteto</h2> <div class="sectionbody"> <div class="paragraph"> <p>Actualmente Okteto no ofrece la posibilidad de customizar la aplicación con tu propio dominio pues es un producto orientado más al desarrollo pero quién sabe en un futuro próximo</p> </div> </div> </div> En este artículo vamos a ver cómo podemos publicar una galería de fotos usando herramientas de kubernetes. Grails and Sonarqube Jorge Aguilera 2019-11-18T00:00:00Z https://blog.jagedn.dev/blog/2019/grails-sonarqube.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Recently I&#8217;ve had to add SonarQube to our Grails application to gain visibility in our metrics and though at the end the change was only a few of config lines I think it might be interesting to document it in this post due the lack of updated documentation about it</p> </div> <div class="paragraph"> <p>Grails is a groovy-lang framework where you can develop a CRUD web application in a few seconds with a great plugin ecosystem. It has close to 10 years and it has evolved from initial heavy versions to a more light framework. Currently I&#8217;m working in a 3.x application althouht version 4.x is out a few months ago.</p> </div> <div class="paragraph"> <p>We&#8217;re using some plugins as Codenarc and Coverage how generate reports about the quality of your code (rule violations, check style, coverture, and so on) and we have some asserts to abort the build if we&#8217;re in a low coverture situtation for example</p> </div> <div class="paragraph"> <p>SonarQube is an open-source platform developed by SonarSource for continuous inspection of code quality to perform automatic reviews with static analysis of code to detect bugs, code smells and security vulnerabilities on 20+ programming languages. SonarQube offers reports on duplicated code, coding standards, unit tests, code coverage, code complexity, comments, bugs and security vulnerabilities. ( <a href="https://en.wikipedia.org/wiki/SonarQube" class="bare">https://en.wikipedia.org/wiki/SonarQube</a> )</p> </div> <div class="paragraph"> <p>With SonarQube you can have a good dashboard your QA team will appreciate, so we&#8217;ll try to integrate our gradle build with it.</p> </div> </div> </div> <div class="sect1"> <h2 id="docker_sonarqube">Docker SonarQube</h2> <div class="sectionbody"> <div class="paragraph"> <p>Firstly you need to have a SonarQube instance running due the build needs to comunicate with it to send the information. The idea is to have an instance for multiple projects and in this way compare among them, align force, styles etc.</p> </div> <div class="paragraph"> <p>For development I&#8217;ll used a docker instance at port 9000:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="console">$ docker run -d --name sonarqube -p 9000:9000 sonarqube</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="grails">Grails</h2> <div class="sectionbody"> <div class="paragraph"> <p>This is part of our build.gradle configuration (nothing special to comment) where, in addition to the standard Grails configuration, we&#8217;ve codenarc and clover installed</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="groovy">buildscript { repositories { mavenLocal() maven { url "https://repo.grails.org/grails/core" } maven { url "https://plugins.gradle.org/m2/" } jcenter() } dependencies { classpath "org.grails:grails-gradle-plugin:$grailsVersion" classpath "org.grails.plugins:hibernate4:${gormVersion - ".RELEASE"}" classpath "com.bertramlabs.plugins:asset-pipeline-gradle:2.14.2" classpath 'com.bmuschko:gradle-clover-plugin:2.2.3' // others stuff } } // others plugins apply plugin: "codenarc" apply plugin: 'com.bmuschko.clover' dependencies { clover 'org.openclover:clover:4.4.1' } codenarc { config = file('conf/codenarc-rulsets.groovy') //... some more configs } clover { excludes = ['/test/**', ] testIncludes = ['**/*Spec.groovy'] compiler { } compiler { encoding = 'UTF-8' // used to add debug information for Spring applications debug = true additionalArgs = '-Dclover.pertest.coverage=off' additionalGroovycOpts = [configscript: project.file('cloverXtraConfig.groovy').absolutePath] } report { html = true xml = true pdf = true columns{ complexity format: 'raw' coveredBranches format: '%' totalBranches format: 'raw' coveredStatements format: '%' lineCount format: 'raw' } } } cloverGenerateReport.doLast { run(new File("scripts/AbortIfNotCoverage.groovy")) }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="grails_sonarqube">Grails &amp; SonarQube</h2> <div class="sectionbody"> <div class="paragraph"> <p>First thing I did was a quick search with <code>grails sonarqube</code> terms and I realized more usefull post were a little out of date (2014-2015)</p> </div> <div class="paragraph"> <p>After reading some of these posts I was confused because in some of them I understood the required plugins need to be installed in local project downloading some jars but in others talking to download to a sonarqube directory.</p> </div> <div class="paragraph"> <p>So after some investigation the photo finish is:</p> </div> <div class="ulist"> <ul> <li> <p>you need to install in your Grails (Gradle) project <strong>only</strong> the sonarqube plugin</p> </li> <li> <p>you install the <code>groovy</code> and <code>coverage</code> plugins via sonarqube web application</p> </li> <li> <p>at the build time the plugin downloads both of them (and others), perfom the analisys and send the result to the backend</p> </li> </ul> </div> <div class="paragraph"> <p>To sumarize, we only need to include the <code>sonarqube</code> plugin and set some properties:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="groovy">buildscript { ... dependencies { ... classpath "org.sonarsource.scanner.gradle:sonarqube-gradle-plugin:2.8" } } ... apply plugin: "org.sonarqube" ... sonarqube { properties { property 'sonar.verbose', 'true' property "sonar.host.url", "http://localhost:9000/" <i class="conum" data-value="1"></i><b>(1)</b> property "sonar.sourceEncoding","UTF-8" property "sonar.projectName", "hello-grails" property "sonar.projectKey", "hello-grails" property "sonar.dynamicAnalysis","reuseReports" <i class="conum" data-value="2"></i><b>(2)</b> property "sonar.clover.reportPath", file("build/reports/clover/clover.xml").absolutePath property "sonar.projectBaseDir","" property "sonar.sources","grails-app,src/main/groovy" <i class="conum" data-value="3"></i><b>(3)</b> property "sonar.exclusions","**/*.properties,**/*.js,**/*.html" property "sonar.test.exclusions","**/*.properties" } }</code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>Only to test, needed to change to your QA instance. You can overwrite via -D or -P</td> </tr> <tr> <td><i class="conum" data-value="2"></i><b>2</b></td> <td>We&#8217;ll use the report generated by clover</td> </tr> <tr> <td><i class="conum" data-value="3"></i><b>3</b></td> <td>Sonar will scan all the grails applicaion plus src except js and html</td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="sonarqube_dashboard">Sonarqube dashboard</h2> <div class="sectionbody"> <div class="paragraph"> <p>These are some images from official page to show you what kind of information you can obtain</p> </div> <div class="imageblock"> <div class="content"> <img src="https://docs.sonarqube.org/download/attachments/3670978/Dashboards-Global.png" alt="Dashboards Global"> </div> </div> <div class="imageblock"> <div class="content"> <img src="https://docs.sonarqube.org/download/attachments/3670978/Dashboards-Project.png" alt="Dashboards Project"> </div> </div> </div> </div> <div class="sect1"> <h2 id="more_information">More information</h2> <div class="sectionbody"> <div class="paragraph"> <p>If you want to read more about Sonarqube these links are helpfull</p> </div> <div class="ulist"> <ul> <li> <p><a href="https://www.sonarqube.org/sonarqube-7-9-lts/" class="bare">https://www.sonarqube.org/sonarqube-7-9-lts/</a></p> </li> <li> <p><a href="https://www.baeldung.com/sonar-qube" class="bare">https://www.baeldung.com/sonar-qube</a></p> </li> </ul> </div> </div> </div> Recently I've had to add SonarQube to our Grails application to gain visibility in our metrics Kubernetes, Infraestructure (2) Jorge Aguilera 2019-11-03T00:00:00Z https://blog.jagedn.dev/blog/prestamos-bibliotecas/k8s-2.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>This is the second part of a series of posts about how I&#8217;ll develop an application in Kubernetes (k8s)</p> </div> <div class="ulist"> <ul> <li> <p>first post: Idea (<a href="https://blog.jagedn.dev/blog/prestamos-bibliotecas/k8s-1.html" class="bare">https://blog.jagedn.dev/blog/prestamos-bibliotecas/k8s-1.html</a>)</p> </li> <li> <p>second post: Infraestructure (<a href="https://blog.jagedn.dev/blog/prestamos-bibliotecas/k8s-2.html" class="bare">https://blog.jagedn.dev/blog/prestamos-bibliotecas/k8s-2.html</a>)</p> </li> <li> <p>third post: Job (<a href="https://blog.jagedn.dev/blog/prestamos-bibliotecas/k8s-3.html" class="bare">https://blog.jagedn.dev/blog/prestamos-bibliotecas/k8s-3.html</a>)</p> </li> </ul> </div> <div class="paragraph"> <p>The main ot these posts is to document the process of deploying a solution in k8s at the same time I&#8217;m writting the application so probably all posts will have a lot of errors and mistakes that I need to correct in the next post.</p> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> Be aware that I&#8217;m a very nobel with Kubernetes and these are my first steps with it. I hope to catch up the attention of people with more knowledge than me and maybe they can review these posts and suggest to us some improvements. </td> </tr> </table> </div> <div class="admonitionblock tip"> <table> <tr> <td class="icon"> <i class="fa icon-tip" title="Tip"></i> </td> <td class="content"> I&#8217;ve created a git repository at <a href="https://gitlab.com/puravida-software/k8s-bibliomadrid" class="bare">https://gitlab.com/puravida-software/k8s-bibliomadrid</a> with the code of the application </td> </tr> </table> </div> <div class="paragraph"> <p>To develop this application I&#8217;ll need some accounts in differents services plus some tools installed locally. Also I use Linux. If you use Windows, probably you&#8217;ll need extra tools but with Windows &#8230;&#8203; who knows ?</p> </div> </div> </div> <div class="sect1"> <h2 id="tools">Tools</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>IntelliJ as IDE (Visual Code is another great option)</p> </li> <li> <p><code>kubectl</code> (command line tool to interact with your k8s cluster) Probably there are visual tools but at the end you&#8217;ll be more productive from the command line</p> </li> <li> <p><code>okteto cli</code> (more info about it bellow)</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="services_free_account">Services (free account)</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Docker Hub (<a href="https://hub.docker.com/" class="bare">https://hub.docker.com/</a>) a public repository where you can upload your Docker images (the free tier also provide 1 private repository but I&#8217;ll work only with public repos). I&#8217;ll investigate if I can use the Gitlab repository due I&#8217;m a big fan of Gitlab</p> </li> <li> <p>Okteto (<a href="http://okteto.com/" class="bare">http://okteto.com/</a>) as kubernetes provider due not only because they offer a generous free cluster to play with k8s but as you can develop and test the code directly in it. Instead Okteto you can try to use <code>minikube</code> as local kubernetes provider and after test your application you can deploy it to Google Cloud, AWS, Digital Ocean, etc (most of them with several months to try it)</p> </li> <li> <p>Github. Worst thing (in my opinion) of Okteto is that you need to have a Github account to identify you in Okteto. I&#8217;ll use my Github account but in fact I&#8217;ll not use it to publish my application.</p> </li> <li> <p>Gitlab. I&#8217;ll use my account in Gitlab to publish the code of the application. With Gitlab you can implement a CD/CI (continuous deployment) to a k8s cluster. If you use Google Cloud as Kubernetes provider it&#8217;s very easy to deploy your application after every commit. I was not able to implement it with Okteto and Gitlab so by the moment the deploy will be done manually or semi-automatic</p> </li> </ul> </div> <div class="admonitionblock tip"> <table> <tr> <td class="icon"> <i class="fa icon-tip" title="Tip"></i> </td> <td class="content"> <div class="title">CD/CI with Okteto</div> <div class="paragraph"> <p>Pablo Chico, @pchico83, gave me some guides to integrate a CD/CI with Okteto but by the moment I&#8217;ll deploy manually.</p> </div> <div class="paragraph"> <p>Basically with the <code>okteto cli</code> installed you can execute following commands:</p> </div> <div class="paragraph"> <p>$&gt; export OKTETO_TOKEN=YOUR_TOKEN</p> </div> <div class="paragraph"> <p>$&gt; okteto create namespace $(CI_COMMIT_TAG)</p> </div> <div class="paragraph"> <p>$&gt; kubectl apply -f src/main/k8s/deployment.yaml</p> </div> <div class="paragraph"> <p>and okteto will create a namespace with the tag into your cluster and configure kubectl to deploy your application.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="okteto">Okteto</h2> <div class="sectionbody"> <div class="paragraph"> <p>Once you have an account in Okteto (using your Github account as login provider) you have up to 3 namespaces. By the moment I&#8217;ll have <strong>dev</strong> and <strong>prod</strong> so I&#8217;ll create a new namespace called <strong>dev</strong> where I&#8217;ll deploy and test the application</p> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> if you&#8217;re thinking you need more than 3 namespaces you&#8217;re lucky because it&#8217;s seems this number will be increase soon!!! </td> </tr> </table> </div> <div class="imageblock"> <div class="content"> <img src="/images/okteto1.png" alt="okteto1"> </div> </div> <div class="admonitionblock tip"> <table> <tr> <td class="icon"> <i class="fa icon-tip" title="Tip"></i> </td> <td class="content"> main idea in k8s is to have all the details of your infraestructure in files so you can replicate the application in every namespace with minimal changes. Typical files are YAML format and you "need" to version them in the same way you version your code </td> </tr> </table> </div> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="Warning"></i> </td> <td class="content"> to work with <code>kubectl</code> from command line, you&#8217;ll need to download from Okteto the credentials file but <strong>DON&#8217;T ADD IT TO YOUR REPO</strong> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="database">Database</h2> <div class="sectionbody"> <div class="paragraph"> <p>As we&#8217;ll need a database to store the loans we can use the <code>deploy application</code> feature from Okteto to deploy a Postgresql database in only a few seconds</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/oktetopostgre.png" alt="oktetopostgre"> </div> </div> <div class="paragraph"> <p>In this screen you can set the user, password and database name. Remember your values because we&#8217;ll store them in a secret vault and "inject" them as environment variables into our container</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/okteto_infraestruture.png" alt="okteto infraestruture"> </div> </div> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="Warning"></i> </td> <td class="content"> As @michael_gallego and @pchico83 advised us, this is not the kubernetes way to implement a database. You can read more about it at: <a href="https://twitter.com/micael_gallego/status/1190691281036627970" class="bare">https://twitter.com/micael_gallego/status/1190691281036627970</a> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="project">Project</h2> <div class="sectionbody"> <div class="paragraph"> <p>I&#8217;ll use <code>Gradle</code> as build tool (you can use <code>maven</code> if you preffer) so I&#8217;m thinking to have a multiproject repository similar to:</p> </div> <div class="ulist"> <ul> <li> <p>k8s-bibliomadrid&#8201;&#8212;&#8201;okteto&#8201;&#8212;&#8201;k8s&#8201;&#8212;&#8201;job&#8201;&#8212;&#8201;service&#8201;&#8212;&#8201;front</p> </li> </ul> </div> <div class="paragraph"> <p>In <code>okteto</code> I&#8217;ll store files related with it , for example the credentials files (remember not store them into your git repo)</p> </div> <div class="paragraph"> <p>In <code>k8s</code> I&#8217;ll store the yaml files to deploy artifacts as volumes, secrets, etc. By the moment not sure if I&#8217;ll store also deployment files for <code>service</code> and <code>front</code> or I&#8217;ll use every specific folder (i.e. <code>service/k8s</code> )</p> </div> <div class="paragraph"> <p>By the moment, once initialized the main project with <code>gradle init</code> I&#8217;ve created the <code>okteto</code> directory and prepare a secret file per environment with the Postgresql details (as this is a POC project I&#8217;ll use plain text but you must use encrypt format for this)</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/okteto_secrets.png" alt="okteto secrets"> </div> </div> <div class="listingblock"> <div class="title">dev/postgre-secrets.yaml</div> <div class="content"> <pre class="prettyprint highlight linenums"><code data-lang="yaml">apiVersion: v1 kind: ConfigMap metadata: name: postgres-config labels: app: postgres data: POSTGRES_DB: okteto POSTGRES_USER: okteto POSTGRES_PASSWORD: okteto POSTGRESQL_SERVICE_HOST: postgresql-headless</code></pre> </div> </div> <div class="paragraph"> <p>and apply the <code>dev/postgre-secrets.yaml</code> into they environment:</p> </div> <div class="listingblock"> <div class="content"> <pre class="prettyprint highlight"><code data-lang="console">export KUBECONFIG=$(pwd)/okteto/okteto-kube.config kubectl apply -n dev-prestamos-bibliotecas -f k8s/dev/postgre-secrets.yaml kubectl get secrets -n dev-prestamos-bibliotecas</code></pre> </div> </div> <div class="paragraph"> <p>When we&#8217;ll create a container we&#8217;ll inject these environment variables into it to avoid hard-code configuration.</p> </div> </div> </div> <div class="sect1"> <h2 id="next_steps">Next steps</h2> <div class="sectionbody"> <div class="paragraph"> <p>I think next step will be a more "typical" task as create an application able to read a CSV file and insert into a database. I&#8217;m thinking in a "one-shot" application (probably a micronaut cli application with micronaut-data) so I&#8217;ll need some way to:</p> </div> <div class="ulist"> <ul> <li> <p>upload files (I want to control what file to process instead to delegate in the application) to a volume</p> </li> <li> <p>connect the application with the database (I hope will not be very dificult)</p> </li> <li> <p>consume the application into the cluster as a Job (executed manually by the moment)</p> </li> </ul> </div> <div class="paragraph"> <p>so 50% typical development task vs 50% k8s task</p> </div> </div> </div> A series about how I'm developping an application with Kubernetes Kubernetes, Idea (1) Jorge Aguilera 2019-11-01T00:00:00Z https://blog.jagedn.dev/blog/prestamos-bibliotecas/k8s-1.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>This is the first part of a series of posts about how I&#8217;ll develop an application in Kubernetes (k8s)</p> </div> <div class="ulist"> <ul> <li> <p>first post: Idea (<a href="https://blog.jagedn.dev/blog/prestamos-bibliotecas/k8s-1.html" class="bare">https://blog.jagedn.dev/blog/prestamos-bibliotecas/k8s-1.html</a>)</p> </li> <li> <p>second post: Infraestructure (<a href="https://blog.jagedn.dev/blog/prestamos-bibliotecas/k8s-2.html" class="bare">https://blog.jagedn.dev/blog/prestamos-bibliotecas/k8s-2.html</a>)</p> </li> <li> <p>third post: Job (<a href="https://blog.jagedn.dev/blog/prestamos-bibliotecas/k8s-3.html" class="bare">https://blog.jagedn.dev/blog/prestamos-bibliotecas/k8s-3.html</a>)</p> </li> </ul> </div> <div class="paragraph"> <p>The main ot these posts is to document the process of deploying a solution in k8s at the same time I&#8217;m writting the application so probably all posts will have a lot of errors and mistakes that I need to correct in the next post.</p> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> Be aware that I&#8217;m a very nobel with Kubernetes and these are my first steps with it. I hope to catch up the attention of people with more knowledge than me and maybe they can review these posts and suggest to us some improvements. </td> </tr> </table> </div> <div class="admonitionblock tip"> <table> <tr> <td class="icon"> <i class="fa icon-tip" title="Tip"></i> </td> <td class="content"> I&#8217;ve created a git repository at <a href="https://gitlab.com/puravida-software/k8s-bibliomadrid" class="bare">https://gitlab.com/puravida-software/k8s-bibliomadrid</a> with the code of the application </td> </tr> </table> </div> <div class="paragraph"> <p>My idea is to develop a "solution" with some level of complexity (use a database, some services and a public front) and build it step by step. So, a possible roadmap could be:</p> </div> <div class="ulist"> <ul> <li> <p>define the architecture of the application</p> </li> <li> <p>design the application, tools and basic infraestructure</p> </li> <li> <p>import data into database using a service or script. It needs to be executed every month</p> </li> <li> <p>a REST service to expose dome domains</p> </li> <li> <p>a simple web frontend to consume the service</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="idea">Idea</h2> <div class="sectionbody"> <div class="paragraph"> <p>The town hall of Madrid releases every month a huge file with the details of loans of public libraries to their users from the previous month.</p> </div> <div class="paragraph"> <p>In this file you can find when a library loan a resource to a user (you can&#8217;t know the user, only if it&#8217;s adult, child, staff and so on). The resource can be a book, a newspaper, a DVD, etc.</p> </div> <div class="paragraph"> <p>Also, in the same portal, we can find another file with the catalog of all books in the libraries with the detail of it (author, num of copies, where to find it, etc)</p> </div> <div class="paragraph"> <p>The idea will be to build an application to ask simple questions about what was the most popular book loaned last month (or the date you want), compare libraries, etc</p> </div> </div> </div> <div class="sect1"> <h2 id="architecture">Architecture</h2> <div class="sectionbody"> <div class="paragraph"> <p>A first approach to the architecture can be:</p> </div> <div class="imageblock"> <div class="content"> <img src="/images/diag-7493c66b7d138afe72d6abdcf4d75cc5.png" alt="Diagram" width="460" height="589"> </div> </div> <div class="paragraph"> <p>As you can see, we&#8217;ll have a k8s pod with a database (I&#8217;m curious about Postgre so this time I&#8217;ll try to use it), some kind of script to import csv into it, maybe using a k8s filesystem (persistent volume claim or PVC) where the admin upload the files, a service REST (pretty sure it&#8217;ll be a micronaut service) talking against a webapp (I&#8217;m thinking in a simple Vue application)</p> </div> </div> </div> <div class="sect1"> <h2 id="next_steps">Next steps</h2> <div class="sectionbody"> <div class="paragraph"> <p>The next step will be to define the application and select the tools and infraestructure</p> </div> </div> </div> A series about how I'm developping an application with Kubernetes First post Jorge Aguilera 2019-10-24T00:00:00Z https://blog.jagedn.dev/blog/2019/first-post.html <div class="paragraph"> <p>Lo primero es lo primero, así que lo primero será presentarse:</p> </div> <div class="paragraph"> <p>Soy un programador que ya peina canas y que ha pasado por algunos lenguajes de programación como Natural, C, C++, Java y en los últimos años Groovy. Me gusta mucho (demasiado) saltar de idea en idea por lo que dificilmente me verás en un proyecto durante mucho tiempo seguido.</p> </div> <div class="paragraph"> <p>Digamos que en un tiempo pasado me llamaban "el que abre caminos" mientras que ahora ya sólo me llaman "culo inquieto"</p> </div> <div class="paragraph"> <p>Desde hace ya muchos años todas las cosas que ideo o pruebo suelo publicarlas como código abierto en Gitlab y alguna cosilla en Github, además de comentarlas en Twitter (como @jagedn). Por eso me "sorprendió" cuando un buen amigo me dijo:</p> </div> <div class="quoteblock"> <blockquote> <div class="paragraph"> <p>tío no has pensado en hacerte en vez de tanto twitter un blog con la tecnología que vas descubriendo</p> </div> </blockquote> </div> <div class="paragraph"> <p>Como me conozco como si me hubiera parido mi respuesta instantánea fue:</p> </div> <div class="quoteblock"> <blockquote> <div class="paragraph"> <p>Que tú me preguntes algo asi, el que me conoce mejor que yo</p> </div> <div class="paragraph"> <p>El que me ha visto empalmarme con 101 groovy y luego hundirme en que lo quiero borrar</p> </div> <div class="paragraph"> <p>El que vio nacer el blog de pura vida que sólo duro 2 post</p> </div> <div class="paragraph"> <p>Bueno lo dejo ya que me canso</p> </div> </blockquote> </div> <div class="paragraph"> <p>Es cierto, y reconocido abiertamente, que Twitter me tiene enganchado (no sólo por cosas tech) y que lo uso para dar algunas pinceladas de mis movidas, básicamente por la comodidad de con una o dos frases, y alguna imágen, "pescar" a quien lo lea.</p> </div> <div class="paragraph"> <p>Pero por otro lado prácticamente todos mis proyectos frikadas incluyen su documentación online, con su @asciidoctor y hasta alguno con su diagrama UML. También he estado escribiendo un blog sobre pequeños scripts en groovy de las cosas más variadas ("101-scripts en groovy") e incluso dado alguna charla intentando explicarlos.</p> </div> <div class="paragraph"> <p>De ahí que el consejo de este amigo me dejara un poco descolocado.</p> </div> <div class="paragraph"> <p>Pero por suerte (o desgracia) es un perro de presa y continuó:</p> </div> <div class="quoteblock"> <blockquote> <div class="literalblock"> <div class="content"> <pre>Vale mal formulada</pre> </div> </div> <div class="literalblock"> <div class="content"> <pre>Pero es que macho con todo lo que sabes y descubres no solo de una tecnología</pre> </div> </div> <div class="literalblock"> <div class="content"> <pre>Sino de todo general</pre> </div> </div> <div class="literalblock"> <div class="content"> <pre>Quizá no has dado con la tecla para mantenerlo durante más tiempo</pre> </div> </div> </blockquote> </div> <div class="paragraph"> <p>Obviamente el peloteo nos gusta a todos pero ya tengo experiencia en no caer en él y quedarme con la "chicha":</p> </div> <div class="paragraph"> <p>"¿Tal vez no lo estoy haciendo bien? ¿debería dejar Twitter ? ¿Realmente tengo algo que contar?"</p> </div> <div class="paragraph"> <p>así que mi contestación no pudo ser otra que:</p> </div> <div class="quoteblock"> <blockquote> <div class="paragraph"> <p>Algun dia lo lamentare ya lo se</p> </div> <div class="paragraph"> <p>Algun dia le dire a Dani todo lo que no leen tus ojos lo escribi yo</p> </div> <div class="paragraph"> <p>Me he dado de alta en dev.to</p> </div> <div class="paragraph"> <p>Que es mejor q medium</p> </div> <div class="paragraph"> <p>Pero todavia no he escrito nada</p> </div> </blockquote> </div> <div class="paragraph"> <p>y aquí estoy, preguntándome si será buena idea o no abrir este nuevo melón y si realmente tendré algo que contar más que si a alguien le interesará</p> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> <div class="paragraph"> <p>Hasta aquí fue el post original que escribí como primera entrada en Dev.to (<a href="https://dev.to/jagedn/primer-post-ffb" class="bare">https://dev.to/jagedn/primer-post-ffb</a>)</p> </div> <div class="paragraph"> <p>A pesar de ser una plataforma muy buena para publicar contenido con una cantidad enorme de lectores sigo perdiendo esa independencia de hacer mi propio blog, aprender de las herramientas y "fabricarme" las mías, así que he creado este blog que servirá como "fuente de la verdad" y del que Dev.to se nutrirá</p> </div> </td> </tr> </table> </div> Lo primero es lo primero, así que lo primero será presentarse JBake y Netlify Jorge Aguilera 2019-10-24T00:00:00Z https://blog.jagedn.dev/blog/2019/jbake-netlify.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>En este post voy a explicar de forma resumida (porque aunque no lo creas está escrito completamente con el móvil) cómo y porqué he decidido usar JBake como generador del blog y Netlify como plataforma donde desplegarlo</p> </div> </div> </div> <div class="sect1"> <h2 id="jbake">JBake</h2> <div class="sectionbody"> <div class="paragraph"> <p>Al estilo de Hugo, Gastby, etc JBake es un generador de contenidos estático principalmente blogs. Pero lo que me atrajo de él es que está escrito en Java y hay un plugin de Gradle para gestionarlo, dos de las herramientas que uso a diario, así que no tengo que instalar nada nuevo</p> </div> <div class="paragraph"> <p>Por si fuera poco NO necesito usar Markdown el cual en mi opinión es la mayor mierda que se ha inventado. En su lugar uso @asciidoctor del que tambien soy fanático</p> </div> <div class="paragraph"> <p>Además al tener el build en Gradle puedo añadirle extensiones (twittear al subir un post, añadir presentaciones, etc). Si quieres ver un ejemplo real de un blog en JBake echa un ojo a <a href="https://groovy-lang.gitlab.io/101-scripts/" class="bare">https://groovy-lang.gitlab.io/101-scripts/</a></p> </div> </div> </div> <div class="sect1"> <h2 id="netlify">Netlify</h2> <div class="sectionbody"> <div class="paragraph"> <p>Realmente he descubierto este site deployment no hace mucho. La funcionalidad de desplegar un site estático la cubre perfectamente Gitlab pages por lo que no lo necesitaba</p> </div> <div class="paragraph"> <p>Sin embargo después de jugar un poco con él he ido cambiando de opinión. Super rápido, permite desplegar muchos sites de forma gratuita y ofrece unas funcionalidades que complementan a un site estático como son los formularios que te notifican automáticamente cuando un usuario lo ha rellenado y las functions</p> </div> <div class="paragraph"> <p>Estas en especial me parecen que tienen mucho potencial. Son lamdas AWS que Netlify despliega por ti de una forma super cómoda</p> </div> <div class="paragraph"> <p>Se me ocurren algunas cosas que se pueden hacer con ellas en un static site:</p> </div> <div class="ulist"> <ul> <li> <p>notificar a un canal de telegram cuando un usuario accede a una página o rellena un formulario</p> </li> <li> <p>leer y/o leer de una hoja Google Sheet los resultados de una encuesta</p> </li> <li> <p>etc</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="template">Template</h2> <div class="sectionbody"> <div class="paragraph"> <p>Si te interesa probarlo (todo o parte) he preparado un template con unas instrucciones que sirvan de guía en <a href="http://jbake-netlify.blog.jagedn.dev/" class="bare">http://jbake-netlify.blog.jagedn.dev/</a></p> </div> </div> </div> <div class="sect1"> <h2 id="dev_to">Dev.to</h2> <div class="sectionbody"> <div class="paragraph"> <p>Aunque muchos y muy buenos blogeros usan Medium yo no he llegado ni a crearme una cuenta. No soy experto pero tiene algunos "detalles" que me harían pensar si usarlo</p> </div> <div class="paragraph"> <p>Por el contrario sí he usado algo Dev.to y me ha parecido un altavoz bastante bueno, así que mi idea es escribir en este blog e integrarlo con esa plataforma usando la funcionalidad de importar RSS.</p> </div> </div> </div> En este post voy a explicar cómo y porqué he decidido usar JBake como generador del blog y Netlify como plataforma donde desplegarlo