sábado, 30 de mayo de 2020

It's been a long time since my last post 😅 Currently I'm starting to get my feet wet with Elixir (again, second attempt), because it is a functional language (I kinda love functional programming, although I'm no expert), and it is optimized for distributed and scalable applications. Also, they have a Web Framework called Phoenix, and I just found out that creating applications with socket connections seems to be a breeze with Phoenix Channels. So I've decided to build a small application, and also I'm taking the chance to give Preact (a ReactJS lightweight alternative) a try for the front-end.

TL;DR

Here is how I created my Elixir and Phoenix application, and set up Preact:

Prerequisites

For this project I already have installed, at the time of writing:

Erlang/OTP 22.2.7
Elixir 1.10.1
Phoenix 1.5.3
NodeJS 12.16.2
NPM 6.14.4

Create Phoenix web app

First, we are going to create a new Phoenix application. For the sake of simplicity, we are going to skip the creation of the Ecto repo for database access, as this will not affect the Preact set-up.

When asked, install all the required Elixir dependencies, so you don't have to do it later.

Set-up Preact

The Phoenix web application already includes Webpack, so we can proceed to install and setup Preact right away. To install Preact, we run the next command, inside the assets folder:

All the NPM commands should be run inside the assets folder, which contains the NPM package files.

Then, we need to alias React to Preact, so we can make use of any component from the vast React ecosystem, through Preact's compatibility layer. In order to do this, we need to point react
and react-dom imports to Preact, by adding the respective aliases to be resolved in our already present Webpack config file, which is assets/webpack.config.js, like so:

Set up JSX support

The next step is to be able to transpile JSX into plain Javascript. For this we need to add a babel plugin that will do this work, so we first proceed to install @babel/plugin-transform-react-jsx.

Then, we proceed to modify the assets/.babelrc file, to specify the function for JSX that should be used from the plugin:

We also need to modify the Webpack configuration to transpile the JSX files, by modifying the JS rule to also include and resolve JSX extensions:

Update routing

The last bit to finish the set-up is to update the route configuration provided by Phoenix, so the front-end routes can be managed by the Javascript router of our choice, to have a fully fledged single page app. The first step is to open the file lib/phoenix_preact_web/router.ex and move the scope block for "/" to the end, so all of the other routes can take precedence and be handled by Phoenix. Then, we modify the get section to always direct to the index action regardless of the path (lines 37-42):

This way, all routes that do not belong to the API, nor Phoenix dashboard, will load the index page.

Clean Phoenix page templates

Before start adding our UI components, we should get rid of all the static content that Phoenix added by default in our index page. So let's open the template file lib/phoenix_preact_web/templates/page/index.html.eex, and remove all its contents. Let's also open the layout template lib/phoenix_preact_web/templates/layout/app.html.eex and remove all of the body contents. The reason for all this cleanup is because we will use the index page's body to render our components, so we won't need all of that content to be rendered on the server side. The layout file will look something like this:

Render a component

Now that we have the skeleton set-up, we can proceed to add our first component. Let's create a components folder inside assets/js, and inside it add a folder named App, where we will place our initial component. We will end up with a folder structure like this:

Then create a file named index.jsx under our App folder, and add the following code to create a basic counter:

Finally, let's render the component in our main Javascript app file (assets/js/app.js):

Now we are ready to go! Let's run the web application in the command line with mix phx.server, and we will have something like this:

Notice that this is a very basic setup, so other ES6 features like class properties are not available and will require additional configurations.

The full project for this example is available at GitHub: https://github.com/guillegr123/phoenix_preact

Happy coding!

viernes, 23 de agosto de 2019

Saludos. Ya tenía ratos de no escribir una entrada en el blog, jejeje. El motivo de esta entrada es, primeramente, para dar señales de vida. Y en segundo lugar, para compartirles un repositorio de ejercicios/ejemplos de código en Erlang.

¿Qué es Erlang?

Erlang es un lenguaje de programación usado para construir sistemas de software de tiempo real masivamente escalables, que requieren una alta disponibilidad, como: telecomunicaciones, banca, tiendas en línea, telefonía y mensajería instantánea.

¿Por qué Erlang?

La principal razón por la que he decidido aprender Erlang es porque es uno de los lenguajes utilizados por la empresa para la que trabajo como subcontratista. En segundo lugar, porque es un lenguaje que usa el paradigma de la programación funcional, el cuál me encanta desde que me lo enseñaron en la universidad con DrScheme (hoy Racket), el cual es una variante de LISP.

En tercer lugar es porque este lenguaje posee un runtime ya preparado para sistemas distribuidos, de alta concurrencia con tolerancia a fallos, e implementa out-of-the-box el modelo de actores, el cual me pareció muy interesante cuando lo aprendí con Scala y Akka en un curso de programación reactiva. De hecho Akka se basó en el modelo de actores implementado en Erlang.

En cuarto lugar que un día de estos, para una tarea que tenía asignada en el trabajo, necesitaba saber cómo funcionaba algo de la API del sistema. Actualmente me desempeño como desarrollador front-end, por lo que no toco nada de la API. Sin embargo, en esta ocasión antes de preguntar, me dió por curiosear el código fuente del backend, a ver qué tan lejos podía llegar, y debo decir que... no me sentí tan perdido como la chinita en el bosque de la China jajaja. Gracias a que los desarrolladores del backend tienen muy buenas prácticas para organizar el código y nombrar variables, fue posible intentar dilucidar qué hacían los pedazos de código que logré encontrar.

Por otra parte, yo ya había leído un poco de Erlang, y había empezado hace tiempo un curso en Elixir (que he dejado olvidado, por cierto), así que al menos sabía como se definían las funciones y se asignaban las variables. Además de esto, al ser un lenguaje funcional, tiene esa maravilla llamada pattern matching. Realmente no sé si es algo del paradigma funcional, pero todos los lenguajes funcionales que he tocado lo tienen, y en el código que alcancé a ver lo estaban usando, así que mas o menos pude imaginar la intención de las funciones.

Y en último lugar que unos compañeros del trabajo hablaron acerca de un sitio web para que los desarrolladores practiquen y prueben sus conocimientos, y decidí inscribirme. Al estar curioseando, vi que había una sección de prácticas de Programación Funcional, con ejercicios que se podían hacer en distintos lenguajes como Scala, Haskell, Clojure, Racket, Elixir y Erlang. Estoy más familiarizado con Scala, pero Racket no lo recuerdo mucho, Elixir ya se me borró del caché, Haskell solo conozco qué es, y con Clojure no he pasado del hola mundo. Pero como había visto Erlang recientemente, me llamó la atención, y me animé a hacer un par de ejercicios con él. Después de una gran perdida que me dí porque ya no me acordaba que las variables inician con mayúsculas y los símbolos con minúsculas (lo cuál no se apega a lo que estoy acostumbrado), logré completar uno de los ejercicios.

I can haz teh codez?

Para que no me vuelva a olvidar como hice algunas cosas por mi memoria de corto plazo, decidí agregar el ejercicio en un repositorio de GitHub, el cuál puede servir a futuro (cercano o lejano, aunque espero que no tan lejano) para ir compilando de cuando en cuando alguno que otro ejemplo o ejercicio interesante:

https://github.com/guillegr123/erlang-exercises

Cabe mencionar que soy un completo noob en Erlang, así que dudo que tenga buenas prácticas. Sin embargo, espero que a alguien que esté aprendiendo como yo le sirvan, y cualquier Pull Request con mejoras o más ejercicios es bienvenido.

miércoles, 27 de febrero de 2019

Hey, my second post in English, Hooray! I wanted to take note in case I need to do this again in another computer, hehehe, so here it is... How to setup MongoDB and Compass on Arch Linux, on a development computer:

First, we proceed to download and install MongoDB and MongoDB Compass. We can do this via a package manager like Pamac, or via the command line using yaourt or git/curl + makepkg. This is because these packages are not part of the official Arch repositories, but are available as part of the Arch User Repository (AUR). To download and install these packages via yaourt, we can execute the next command:
```
$ yaourt -S mongodb-bin mongodb-compass-community
```
With this command we will install the binaries for a recent version of MongoDB, and the MongoDB Compass Community Version.
Then, we create the default folder for Mongo DB databases, as root:
```
# mkdir -p /data/db 
```
After that, in order to be able to start the Mongo daemon service as a normal user, I suggest to create a user group, so we will be able to add to it all the users we want to give access to Mongo and other developer tools. For example, let's create the group developers:
```
# groupadd developers
```
Add the required users to the group:
```
# gpasswd -a <user> developers
```
Set the group as owner of the Mongo data folder:
```
chown -R :developers /data/db/
```
Change permissions of the folder so the user that was just added to the group will be able to write in it:
```
# chmod -R g+w /data/db/
```
Re-login or as <user> log your terminal in to the newly created group:
```
$ newgrp developers
```
At this point, you will be able to start MongoDB with the current user:
```
$ mongod
```
If everything is OK, you will see a event log in the terminal without any errors, and messages indicating that MongoDB has created its default collections, and that it is waiting for connections on port 27017, which is the default one.
Finally, you can run:
```
$ mongodb-compass-community
```
To open Compass, and use the default parameters to connect to the local instance of MongoDB.

Happy coding!

lunes, 28 de enero de 2019

A veces necesitamos obtener información a partir del contenido de páginas web: imágenes, enlaces, índices, atributos, etc. Existen muchas formas de hacer esto, y las más comunes hacen uso de algún lenguaje interpretado (como Python y Powershell) y alguna librería para procesar XML o el DOM de HTML, pero eso requiere algún grado de experticia en dichas herramientas.

Sin embargo, hay una librería vieja y confiable con la que muchos programadores, en especial los web, están familiarizados, para manipular el DOM de los documentos HTML: jQuery. Esta librería proporciona una gran facilidad para hacer uso de selectores estándar de CSS, así como funciones especiales de búsqueda de elementos. Así que, utilizando Linux como sistema operativo (por lo que no contaba con Powershell), y estando familiarizado con JavaScript/jQuery/Node.js, esta resultó ser la opción más rápida y fácil para mí.

Sin más preámbulo, esto es lo que podemos hacer para extraer información de una página web utilizando jQuery y Node.js:

Creamos un proyecto nuevo con NPM. Para ello ejecutamos el comando npm init, el cual nos solicita información opcional del proyecto paso a paso. Podemos dejar todas las opciones por defecto, o ajustar lo que necesitemos según el caso. Para este ejemplo se modificó el Entry point de "index.js" a "leerHtml.js", para describir el contenido del script. También se cambió la licencia a MIT. El cambio de nombre y licencia solo son una convención personal, no son obligatorios. Por otra parte, cabe mencionar que para este ejemplo se utilizará Node v10.15.0 con NPM v6.4.1, que es la versión con soporte de largo plazo (LTS) al momento de escribir esta entrada.
Instalamos los paquetes request-promise, jsdom y jquery. El primer paquete nos permitirá obtener el HTML desde la web; el segundo paquete nos servirá para modelar el DOM del documento HTML en JavaScript puro; y el tercero es el que utilizaremos para examinarlo y extraer contenido.
Creamos el archivo leerHtml.js, en el que realizaremos el proceso de extracción de datos del HTML. Para este ejemplo, obtendremos los textos alternativos de todas las imágenes de un artículo de Wikipedia. Se listarán solamente aquellas imágenes que posean el atributo alt, y que este no se encuentre vacío. El código fuente y la descripción de cada paso se muestran a continuación:

Es necesario crear el objeto jQuery a partir del DOM generado con JSDOM.
Los métodos auxiliares de jQuery, como find y each, nos retornan objetos HTML, por lo que es necesario crear objetos de jQuery a partir de estos. Tal es el caso de las variables imagen e imagenes, a las cuales fue necesario aplicar la función $.

Finalmente, para ejecutar el script, escribimos en la terminal node leerHtml.js Podremos ver como se muestra en la línea de comandos el listado de los textos alternativos de las imágenes que se encontraron en la página web.

Esta técnica no solo es aplicable para páginas HTML descargadas desde la web, sino también para archivos cargados desde disco, así como para formato XML. A continuación se muestra un script llamado leerXml.js, para obtener de un archivo XML llamado "paises.xml", el listado de países cuyo código inicia con la letra "a":

Puede notarse que el proceso es muy similar, ya que XML es el superset de HTML, y es también soportado por JSDOM y jQuery. Para ejecutar el script, escribimos en la terminal el comando node leerXml.js, lo cual muestra el siguiente resultado:

El código fuente de este ejemplo se puede encontrar acá: https://github.com/guillegr123/node-jq-readxml

domingo, 6 de enero de 2019

This is my first english post, so please bear with me 😅

I've recently started toying with Akka Streams, by trying to add it to an existing Akka HTTP API that I have created to crawl and aggregate data from other APIs and websites. I thought it would be nice to finally put them in practice, and that it was a good place to start because the project involves some data transformation and processing.

martes, 27 de noviembre de 2018

Si sueles utilizar servicios de Git en internet para almacenar tu código fuente, seguramente ya te has encontrado con la molestia de tener que introducir constantemente tus credenciales al momento de hacer push de tus cambios hacia el repositorio remoto.

sábado, 13 de octubre de 2018

Apache Maven es una herramienta de manejo de proyectos de software, que permite compilar proyectos, documentarlos y generar reportes a partir del concepto de un Modelo de Objetos de Proyecto (POM).

domingo, 23 de septiembre de 2018

Supóngase que se tiene un valor real o float, que se quiere aproximar al N-ésimo decimal superior. Por ejemplo:

Hola. Esta entrada la escribí en mi antiguo blog de WordPress, en marzo de 2013. Tristemente a la fecha no he siquiera iniciado el proyecto, e incluso ha sido reemplazado por otros... pero quién sabe, tal vez algún día retome la idea. Por completitud, les dejo la entrada original a continuación (con algunas notas nuevas en rojo 😅):

Después de algunos sucesos, me he sentido motivado y animado a iniciar un proyecto a mediano-largo plazo, que consiste en un juego para Android. El único detalle está en que jamás en mi vida he hecho un juego, y mucho menos un programa para Android, jejeje... Lo más que hice fue una guardar una tabla de resultados para un proyecto en la materia de Gráficos por Computadora de la universidad. Pero me gusta correr antes que caminar (en este caso en particular), así que quiero hacer un juego 3D. A continuación describo mis ideas.

El juego

De momento, mi idea es que el juego sea más o menos estilo Star Fox 64, pero solamente en el espacio. ¿Por qué? Primero, porque me gustan los aviones. Segundo, porque creo que es más fácil que la nave siga una ruta predefinida, en vez de un mundo abierto. Tercero, porque creo que es difícil hacer un terreno y que el avión interactúe con él, así que mejor contar con la libertad del espacio.

Star Fox 64

Por otra parte, quiero tomar las partes más adictivas que se me ocurran de juegos como Space Invaders (variedad de enemigos con dificultad variable), Asteroids (asteroides, jejeje) y Fury 3 (múltiples armas agotables), para hacerlo entretenido. Finalmente, quiero que parte o todo el juego sea de código abierto (open source), pero hasta el momento en que lo termine, o que ya esté considerablemente maduro.

Asteroids

Fury 3

Algo importante que quiero es que las misiones no estén quemadas en el juego, sino que sea posible programarlas mediante algún metalenguaje, como YAML o XML o JSON, o bien un lenguaje de programación, pero de forma completamente externa al juego. Es decir, el kernel sería el juego, y las misiones serían como plugins. E incluso, me gustaría que los usuarios pudieran programar las misiones a su creatividad, dejando abierto todo un mundo de posibilidades. (Se me ocurrió un año antes que anunciaran Super Mario Maker 😮😮😮)

¿Por qué para Android?

Bueno, porque creo que para esta plataforma los gráficos no son lo principal, y considerando que soy un principiante (o menos que eso, jajaja...), creo que es adecuado. En segundo lugar, me llama la atención los juegos en dispositivos móviles, y creo que hay muchas posibilidades. Tercero, espero algún día poder publicar el juego en Google Play, y creo que los usuarios de Android están más abiertos a juegos pequeños.

¿Cómo hacer el juego?

Bueno, usualmente me gusta reinventar la rueda, y hacer todo desde cero, pero para este caso creo que sería muy difícil, así que mejor probaré primero con algún motor de juegos ya existente. Las características que espero del motor son las siguientes:

Idealmente que sea de código abierto, y gratuito. Si no es gratuito, que al menos pueda usarlo gratis para la etapa de desarrollo, pruebas y uso personal, y que adquiera la licencia (relativamente barata) en caso de que lo quiera publicar.
Que permita importar modelos 3D desde programas como Blender, o bien algún programa CAD gratuito.
Que no sea muy pesado o sobrecargue la memoria RAM de los dispositivos móviles.
Muy ideal sería que fuera multiplataforma, es decir, que no se limitara a Android, sino que también permitiera desarrollar juegos para computadoras, e incluso para consolas.

¿El plan? ¡Cuál plan!

Son bromas. Ahorita, el plan es simple: conseguir un motor de juegos para Andorid que cumpla los requisitos previos. Una vez lo encuentre, veremos que estrategia seguir...

Saludos.

Publicado originalmente el 2013-03-24, en https://itsouvenirs.wordpress.com/2013/03/24/nuevo-proyecto-juego-para-android/.

domingo, 19 de agosto de 2018

Bueno, por azares del destino, finalmente fue inevitable tener que adquirir el gusto de React. Es la tendencia, culpa de Facebook. Habiéndome desahogado, empecemos.

Intro a React.js

React.js es una herramienta de JavaScript para construir interfaces de usuario. La forma más fácil de crear el esqueleto de una aplicación de React, es utilizar la herramienta de Node JS llamada create-react-app (😒), la cual podemos instalar de forma global a través de la terminal mediante el siguiente comando (nótese que debe ejecutarse como administrador -en Windows- o root -en Linux-):

# npm install -g create-react-app

Luego, procedemos a crear la aplicación base, con el nombre "peliculas-app" (pronto verán el porqué del nombre):

$ create-react-app peliculas-app

Luego, nos trasladamos al nuevo directorio creado para la app, y la probamos ejecutar:

$ cd peliculas-app/
$ npm start

Esto compila la aplicación con Webpack y la ejecuta con un servidor interno de desarrollo, publicándola localmente en el puerto 3000, por defecto. Al abrir la aplicación web, se muestra lo siguiente:

Al observar la estructura de la aplicación, tenemos algo similar a esto:

La página principal se encuentra en el archivo public/index.html. Por otra parte, el componente principal de React, el cual renderiza todo el contenido mostrado en la página inicial, se encuentra en el archivo src/App.js. En este último archivo, por ejemplo, podemos reemplazar el contenido del párrafo que usa la clase App-intro, con el texto "Hola mundo", así:

Una vez que se guarda el archivo, se recompila la aplicación de forma automática, por lo que podemos ver el cambio reflejado en el navegador de forma casi inmediata:

Creación de la aplicación: lista de películas

Luego de esta rápida introducción práctica a React, procederé a crear mi primera aplicación web con React. La aplicación consistirá en mostrar en pantalla un listado de nombres de películas, obtenidos desde un arreglo de datos. La película incluirá el título, una breve sinopsis y una imagen. El listado, así como cada ítem de este, será un componente distinto. Comencemos:

1. Primero agregaremos el listado de películas en el estado de la aplicación. Pondremos 3 para este ejemplo:

2. Luego crearemos un nuevo componente para mostrar cada ítem de la lista, en el cual mostraremos la imagen, el nombre y la sinopsis de esta. Cada ítem sera un elemento de tipo <li>. Dicho componente se creará en un nuevo archivo de JavaScript, al que llamaremos Item.js, dentro de la carpeta src.

En este componente se recibe como parámetro la variable props, la cual nos sirve para recibir datos de quien invoque este componente. En este caso, dentro de props recibiremos el campo pelicula, el cual contendrá la información de un elemento de la lista de películas: id, nombre, sinopsis y urlImagen. El componente renderiza la vista HTML que definimos en el cuerpo de la función, y en la cual podemos hacer uso de los props al incluirlos entre llaves.

3. Seguidamente procedemos a crear un tercer componente, en un nuevo archivo que nombraremos Lista.js. Este componente será el encargado de renderizar la lista, haciendo uso del componente Item para renderizar cada elemento, de la siguiente forma:

Nótese que este componente recibe el parámetro listaPeliculas dentro de los props, el cual contendrá el arreglo de películas. Este arreglo se itera mediante la función map(), dentro del cuerpo de la lista (<ul></ul>), para convertir cada elemento del arreglo en una vista, haciendo uso del componente Item. Puede observarse que el elemento es pasado a cada Item mediante el atributo pelicula, que es el nombre con el que se le hace referencia en dicho componente. Cabe mencionar que para hacer uso del componente Item, debemos importarlo al inicio del archivo de javascript.

4. Para armar la aplicación final, sustituimos en el componente principal (App.js) el párrafo que contenía la frase "Hola Mundo", por un div, y dentro de este colocamos el elemento Lista, al cual le proporcionaremos el arreglo de películas a través del atributo listaPeliculas, que es el nombre con el cual le hacemos referencia en dicho componente. Cabe recordar que para poder utilizar el componente Lista, debemos importarlo antes.

El resultado final del componente principal contenido en App.js es el siguiente:

5. Finalmente, para mostrar las películas de forma ordenada, agregamos algunos estilos CSS al final del archivo App.css, para aplicarlos globalmente a través del componente principal:

El resultado es el siguiente:

El código fuente de este ejemplo lo pueden encontrar acá: https://github.com/guillegr123/react-primera-app

Intenté que los commits fueran quedando conforme a cada paso descrito en esta entrada del blog. Pueden consultarlos acá: https://github.com/guillegr123/react-primera-app/commits/master

Conclusiones

Después de haber hecho esta primera prueba con React, resulta que se parece a Vue 2, jajaja. Al menos hasta donde pude ver, el concepto de componente es similar. Seguiré viendo qué tan parecido es a medida vaya progresando con esta herramienta.

Saludos. Happy coding!

jueves, 16 de agosto de 2018

Supongamos que por cuestiones de control de modificaciones y auditoría, se quiere contar con un campo de fecha de última modificación en todas las tablas de una base de datos de SQL Server.

El inconveniente es que SQL Server no posee nativamente un tipo de dato que guarde la fecha de última modificación de un registro, el cual se actualice automáticamente al modificar una fila de datos. Por ello, una alternativa a esto es definir una columna de tipo datetime en cada tabla que se actualice cada vez que se modifique uno o más registros de esta, a través de un trigger.

¡Howdy! No pude resistirme, tengo varios posts en mente, pero no he tenido el tiempo de escribirlos, así que para mientras, quiero comentarles mis ideas, que espero alguna vez publicar:

Técnicas DRY para SQL Server: Son varias ideas para evitar código repetitivo en SQL Server.
Más SQL Server Snippets:Sé que tengo un par más por allí...
El regreso de las ventanas DIV: Ventanas DIV móviles, con sombra y otros efectos.
Symfony 2 y casos especiales de Symfony 1.4: Casi siento que he traicionado a Symfony por MVC, pero espero retomar el tema en este año, y compartir algunas cosas interesantes sobre la vieja y confiable versión 1.4.
Instalación de Oracle en Ubuntu: Ya tengo el PDF, y me gustaría publicarlo. Fue una tarea que hicimos en conjunto con unos amigos para la materia de Administración y Seguridad de Bases de Datos en la universidad. Ha sido el proyecto de computación más frustrante que he hecho hasta la fecha, creo que repetimos la instalación al menos unas 15 veces en dos semanas, hasta que sirvió... Menos mal que existía VirtualBox, porque si no, nos hubiera tocado formatear la computadora de pruebas 15 veces, jajaja...
FluentViewModel: La cereza de mi sundae, jejeje. Es un proyecto en C# que hice, que consiste en una interfaz fluida para la definición de Modelos de Vista (View Models) en MVC Framework, que hace uso de clases genéricas y expresiones lambda. Está basado en FluentValidation para .NET. Espero publicar el código fuente como Open Source algún día.

Espero publicar estos posts en un futuro cercano, ojalá lo logre...

Saludos, feliz viernes :)

Publicado originalmente el 2013-03-14, en https://itsouvenirs.wordpress.com/2013/03/14/futuros-nuevos-posts/.

Saludos a todos. Estuve revisando un poco mis documentos y encontré algunos posts que ya tenía listos para publicar desde hace varios años. Un par de ellos fueron colaboraciones al blog de un amigo de la universidad, y otros en realidad son manuales que escribí para acordarme cómo hacer las cosas. Les dejo abajo los enlaces a dos de estos posts, y espero posteriormente incluir otros más:

Para finalizar esta entrada, les dejo una frase un tanto soberbia de Nikola Tesla, con respecto al trabajo de Thomas Alva Edison:

"If Edison had a needle to find in a haystack, he would proceed at once with the diligence of the bee to examine straw after straw until he found the object of his search... I was a sorry witness of such doings, knowing that a little theory and calculation would have saved him ninety per cent of his labor."
- Nikola Tesla, New York Times, October 19, 1931

Traducido:

"Si Edison tuviera que encontrar una aguja en un pajar, procedería inmediatamente con la diligencia de una abeja a examinar paja por paja hasta que encontrara el objeto de su búsqueda... Fui testigo arrepentido de tales hechos, sabiendo que un poco de teoría y cálculo le hubiera ahorrado el noventa por ciento de su tarea."
- Nikola Tesla, New York Times, 19 de octubre de 1931

Es muy curioso que esta frase parece mostrarse reactiva o contrastante a la siguiente frase de Edison:

"No me equivoqué mil veces para hacer una bombilla, descubrí mil maneras de cómo no hacer una bombilla."
- Thomas Alva Edison

Esta frase la encontré en un archivo viejo en el que tenía una recopilación de frases que me habían llamado la atención. Nikola Tesla es uno de mis científicos favoritos, y según parece sus invenciones no son muy conocidas incluso en la actualidad, en comparación con el trabajo de Thomas Alva Edison.

Feliz día.

Publicado originalmente el 2013-03-04, en https://itsouvenirs.wordpress.com/2013/03/04/viejos-posts-publicados/.

Hola otra vez! Ahora espero no extenderme demasiado, como la primera vez. Bueno, esta es una pequeña “abstracción funcional” en PLT Scheme (ahora Racket), que verifica que una cadena este compuesta solamente por letras minúsculas.

Aunque parezca una función sencilla, contemplad que tiene algo interesante: se transforma la cadena de caracteres a una lista de caracteres (que contiene elementos tipo char), y se envía como parámetro a la función auxiliar, soloMinAux?, donde luego se extrae cada caracter, se transforma en un entero correspondiente al código ASCII en base diez, y he alli la magia, solo se verifica que este número esté entre los correspondientes a las letras minúsculas. Voilá (creo que así se escribe). Esto facilita mucho el trabajo a la hora de verificar si un carácter pertenece a una lista de caracteres consecutivos en el código ASCII. Además, las funciones string->list (que convierte una cadena a lista de caracteres) y char->integer (que convierte un caracter a un entero decimal correspondiente a su código ASCII) pueden ser de utilidad para manipular de muchas formas las cadenas de caracteres y los caracteres por si solos.

Bueno, espero que esta función les sea de utilidad, al menos para ver como se puede trabajar con caracteres y el código ASCII, y también supongo que les alegrará saber que hoy no me extendí mucho (aunque alguien dijo que ojala argumentara bastante cuando hablo, así como cuando escribo), pero bueno... Así que por el momento me despido, y les dejo esta frase, para todos aquellos que tienen una forma particular de ubicar sus cosas en el grandioso desorden que con mucho cariño llaman escritorio.

If a cluttered desk is the sign of a cluttered mind, what is the significance of a clean desk?
- Laurence J. Peter

Publicado originalmente el 2013-03-04, en https://itsouvenirs.wordpress.com/2013/03/04/plt-scheme-verificar-que-una-cadena-contiene-solo-letras-minusculas/.

jueves, 9 de agosto de 2018

Hace unos días un amigo me animó a descargar y correr su aplicación que había desarrollado en Python utilizando Tensorflow. Debido a que no tenía instalado Tensorflow, elegí la opción de descargar y ejecutar una imagen de contenedor de Docker ya preparada con Python y TensorFlow, en lugar de instalar todo lo necesario directamente en mi sistema operativo. Cuando llegué al punto de intentar correrlo, descubrí que tenía una interfaz de usuario gráfica (GUI), la cual no podía ser ejecutada desde la línea de comandos de mi contenedor.

Despues de investigar un poco, descubrí que es posible ejecutar aplicaciones con interfaz gráfica desde docker, siguiendo unos simples pasos que detallo a continuación, para el caso de contenedores Linux corriendo sobre host Linux:

Si docker se está ejecutando con el super usuario local (root), es necesario permitir que este se pueda conectar al servidor X encargado de administrar el ambiente gráfico, agregándolo a la lista de usuarios permitidos, mediante el siguiente comando:
```
# xhost local:root
```
Ejecutar un nuevo contenedor, de la siguiente forma:
```
$ docker run -ti --net host \
    -v /tmp/.X11-unix:/tmp/.X11-unix \
    -e DISPLAY=unix$DISPLAY \
    ubuntu:latest bash
```
Notar las siguientes partes del comando:
1. Se esta creando y ejecutando un nuevo contenedor con la última imagen estable de Ubuntu (ubuntu:latest), como ejemplo.
2. Una vez se inicie el contenedor, se ejecutará la línea de comandos de este (bash).
3. Las opciones -ti indican que se desea asignar una pseudo-terminal al contenedor, y mantener habilitada la entrada estándar mientras el contenedor se esté ejecutando, respectivamente.
4. Ejecutamos el contenedor utilizando el driver del host para el uso de la red, mediante la opción --net host
5. Montamos el socket de X11 como un volumen compartido con el contenedor, mediante la opción -v /tmp/.X11-unix:/tmp/.X11-unix
6. Compartimos la variable de entorno DISPLAY del host, con el contenedor, mediante -e display="unix$DISPLAY
Una vez la línea de comandos del nuevo contenedor se está ejecutando, para probar que podemos iniciar y ver aplicaciones on interfaz gráfica, instalaremos NEdit, que es un editor liviano para X Windows System. Para ello procedemos a actualizar la lista de paquetes de los repositorios de Ubuntu, e instalar el editor:
```
# apt-get update & apt-get install nedit
```
Finalmente ejecutamos el editor desde la línea de comandos:
```
# nedit
```
Veremos como la interfaz gráfica de la aplicación es lanzada en el sistema operativo host, ya que esta siendo ejecutada en el servidor X de este:

Referencias

domingo, 15 de julio de 2018

Para crear reportes utilizando el asistente de reportes (Report Wizard), es necesario conectarse previamente a una fuente de datos, y para realizar esto, es necesario crear previamente una conexión a una fuente de datos.

Para crear una conexión a una fuente de datos para generar reportes, es necesario seguir los siguientes pasos:

Presionar el botón Report Datasources, ubicado en la barra de herramientas.
A continuación se muestra una ventana de diálogo que muestra las conexiones y fuentes de datos existentes. Se asumirá que aún no existe una conexión a la fuente de datos que se va a utilizar, y por lo tanto se procederá a crearla. Para ello, se hace clic en el botón New, ubicado en la parte superior derecha de la ventana.
Aparece en pantalla otra ventana de diálogo, que muestra los distintos tipos de fuentes de datos. Para este caso, se elegirá el tipo de fuente más utilizado, Database JDBC Connection. Una vez seleccionado, se hace clic en el botón Next >.
Luego aparecerá una tercera ventana de diálogo, que muestra las propiedades del tipo de conexión seleccionado. Es necesario darle un nombre mnemónico a la conexión. Para este caso, se llamará EjemploCon.
En la misma ventana, se debe seleccionar el tipo de controlador JDBC (JDBC Driver), de acuerdo al sistema gestor de base de datos utilizado. En este ejemplo, se selecciona PostgreSQL (org.postgresql.Driver).
También debe especificarse la URL de la base de datos a utilizar. En este ejemplo se utilizará la siguiente URL: jdbc:postgresql://localhost:5432/ejemplo

En la URL de conexión a base de datos a través de JDBC, se especifica el protocolo de conexión, el subprotocolo, la dirección del servidor, el puerto y el nombre de la base de datos. En este ejemplo, estos parámetros son, respectivamente: jdbc, postgresql, localhost y ejemplo. Al utilizar la palabra localhost para especificar la dirección del servidor, se está haciendo referencia a la computadora actual, por lo que el servidor será la misma computadora desde la cual se generarán los reportes.
Finalmente, debe detallarse el nombre de usuario y la contraseña, para poder acceder a la base de datos. Para este ejemplo, ambas palabras son postgres. Es posible indicar a iReports que almacene la contraseña, para evitar la molestia de ingresarla cada vez que se intente acceder a la base de datos, marcando la caja de Save password. En este ejemplo, se seleccionará la opción de recordar la contraseña, ya que no interesa la seguridad. A continuación, se ilustra mediante una captura de pantalla, la ventana de diálogo de propiedades de conexión, con todos los campos llenos:

iReport advierte que la contraseña se almacena como texto plano, sin ninguna clase de encriptación. Por ello no se recomienda utilizar esta opción, a menos que se considere que no se requiere mayor seguridad. Si se elige no almacenar la contraseña, esta se solicitará cada vez que se intente acceder a la base de datos utilizando esta conexión.
Una vez declarados todos estos parámetros, se presiona el botón de prueba (Test), para verificar que es posible realizar la conexión con los datos especificados.
Si la prueba es exitosa, aparecerá el mensaje Connection test succesful!, indicando que fue posible establecer la conexión con la base de datos. En caso contrario, se mostrará un mensaje de error, indicando la posible causa de éste. Si se da esto último, es necesario verificar si los parámetros son correctos, o bien si el software servidor de bases de datos está activo y funcionando correctamente. También debe revisarse que la base de datos especificada exista, y se tengan los permisos adecuados para acceder a ella.
Una vez que la conexión haya sido probada como exitosa, se hace clic en el botón Save, para que iReport guarde la nueva conexión.

Publicado originalmente el 2013-03-04, en https://itsouvenirs.wordpress.com/2013/03/04/conexion-a-fuente-de-datos-postgresql-en-ireport-3-7-3/.

sábado, 14 de julio de 2018

Hace varios días, buscando artículos sobre Scala en Medium, encontré un artículo sobre cómo crear una aplicación de lista de tareas utilizando Finch, que me llamó la atención. Este tenía un enlace a un artículo titutlado ¿Qué tan rápido es Finch?. En este artículo se mostraba el siguiente tweet con una gráfica comparativa de la velocidad de distintas librerías HTTP de Scala:

Impressive results by #Finch (now #Scala 2nd fastest HTTP library) running @techempower benchmark (430k QPS peak): pic.twitter.com/YeBMnJeQ5W
— Vladimir Kostюkov (@vkostyukov) 27 de febrero de 2016

Siendo fanático de Scala, y estando acostumbrado a las herramientas más divulgadas para servicios web tales como Play Framework, Spray y Akka HTTP, me llamó bastante la atención que Finch mostrara por mucho un mejor desempeño que estas herramientas, a pesar de que la publicación tiene más de 2 años (publicada en febrero de 2016, vista por mí a principios de 2018). Así que me dio curiosidad de ver qué era Finch, hacer una pequeña prueba, y comparar el código con una aplicación similar con Akka HTTP.

¡Hola Finch!

Finch es una API de Scala para construir servicios HTTP sobre Finagle, la cual es un "sistema RPC extensible para la JVM, utilizado para la construcción de servidores de alta concurrencia", utilizando APIs uniformes de cliente y servidor agnósticas del protocolo (creo q podría describir a Finagle como el WCF para la JVM). En este sentido, Finch provee una delgada capa de bloques para construir APIs HTTP de forma tipada, utilizando conceptos de programación funcional. Esto convierte a Finch en una excelente herramienta para la creación de microservicios, ya que es más fácil integrarlos utilizando tipos compartidos. Cabe mencionar además que Finagle corre sobre Netty, por lo que no requiere de un servidor web separado.

Debido a que Scala es para mí más un pasatiempo, ya que no lo uso en mi trabajo, me costó un poco entender cómo se definía una API en Finch. Después de batallar un par de horas, pude crear el siguiente Hola Mundo, en un solo archivo:

Nótese que la API se compone de un solo endpoint, el cual es pasado como parámetro al servidor HTTP, para ser servido (valga la redundancia). Luego el programa queda en espera mientras el servicio se mantiene en ejecución. Las rutas se definen para cada endpoint, y los separadores utilizados en código son un par de dos puntos (::). Por otra parte, para la serialización de los datos desde y hacia JSON se usa Circe (antes llamada "JSON para gatos", vaya usted a saber por qué, jejeje).

El código completo pueden encontarlo acá: https://github.com/guillegr123/its-hellofinch

El proyecto se ejecuta utilizando SBT, con el siguiente comando:

sbt run

Luego, para probar el servicio, abrimos en el navegador la ruta: http://localhost:8080/api/v1/hello

Lo que más me gustó de Finch es que es que la creación de servicios web requiere poco código, y permite crear una API tipada desde el principio, pudiéndose definir los modelos de datos utilizados en el request y el response. Además, los endpoints son asíncronos, lo que permite una mayor concurrencia, razón de su excelente desempeño.

Pero... luego de algunas pruebas, y de investigar un poco, descubrí que Finch no hace uso de las clases estándares de Scala para programación asíncrona, sino que usa las implementaciones propias del ambiente de Twitter, por lo que obligatoriamente tendremos que hacer uso de sus librerías. Esto además, aunque no imposibilita, hace un poco más engorroso integrar librerías que hacen uso de las clases estándar de Scala. En este sentido, me parece mejor utilizar Finch para aplicaciones pequeñas, o aplicaciones de microservicios en las que hagamos uso extensivo de Finagle y las librerías de Twitter.

¡Hola Akka HTTP!

Descubiertos estos detalles de Finch, y habiendo saciado mi curiosidad de probar el framework, decidí volver a mis raíces con Akka HTTP. Akka HTTP es el reemplazo de Spray, y es considerada más como una librería en lugar de un framework, ya que su principal objetivo es solo proveer herramientas para cubrir las necesidades de integración de una o varias aplicaciones vía HTTP, en lugar de lineamientos sobre los cuáles construir la aplicación. Como tal no provee manejo de componentes como CSS/Javascript, plantillas para creación de vistas y otras herramientas orientadas a aplicaciones para navegadores web.

La construcción del hola mundo utilizando Akka HTTP me costó menos que Finch, debido a que ya había hecho una prueba hace mucho tiempo (y el código fuente estaba en control de versiones). El servicio se creó en un solo archivo, al igual que el ejemplo anterior:

El código completo puede encontrarse acá: https://github.com/guillegr123/its-helloakkahttp

Al igual que con el proyecto de Finch, para ejecutar el servicio, basta ejecutar el comando:

sbt run

Y para probar el servicio, abrimos en el navegador la ruta: http://localhost:8080/api/v1/hello

A simple vista, el código es más grande. Esto se debe a que Akka HTTP usa los actores de Akka para el manejo de concurrencia, por lo que es necesario crear un sistema de actores, un materializador de actores, y obtener el contexto de ejecución. Además, para la serialización de los mensajes a JSON, es necesario definir un trait para el formateo del mensaje.

Aparte de eso, en esencia la definición de los endpoints es similar. Las rutas se establecen para cada enpoint, pero usando la barra diagonal (o pleca) como separador, lo que resulta un poco más natural que los dos puntos de Finch, pero que sirven al mismo propósito. Los enpoints son asíncronos, pero a diferencia de Finch, usa la implementación de Futures estándar de Scala.

De forma similar a Finch, la instancia de rutas de la API es pasada como parámetro a su propio servidor web, el cual es iniciado. Sin embargo, en este caso no utiliza una librería externa como Netty, sino que se ejecuta sobre los actores y los flujos de Akka, y activa un puerto para hacer uso directo del protocolo HTTP.

Por otra parte, a diferencia de Finch, al finalizar el servicio web, es necesario desconectar el servidor web explícitamente del puerto, y finalizar el sistema de actores.

Conclusiones

Luego de estas pequeñas pruebas, considero que ambas librerías son excelentes, pero poseen enfoques diferentes, así como implementaciones, por lo que pueden usarse de distintas formas. Akka HTTP parece ser la mejor opción cuando tenemos una aplicación creada utilizando las librerías estándar de Scala, o bien actores de Akka, y solo necesitamos integrar sus componentes u otras aplicaciones vía HTTP. Y Finch parece ser una buena elección cuando necesitamos crear interfaces web tipadas, o sistemas de microservicios que deseamos integrar de forma fácil, ya que también facilita la creación de clientes.

En cuanto al desempeño, según el workbench mostrado por Vladimir Kostyukov, Finch es mucho más rápido que Akka HTTP. Sin embargo, la comparativa fue realizada hace dos años, cuando Akka HTTP aún estaba en pañales, por lo que quedamos a la espera de una comparación más reciente. En lo personal espero más Akka HTTP por ser considerado el reemplazo de Spray.

sábado, 7 de julio de 2018

Hola, este es un pequeño snippet para cambiar la URL de un repositorio remoto de GIT, en un repositorio local.

Primero, para listar las URL actuales del repositorio remoto, ejecutamos el siguiente comando, dentro de la carpeta que contiene nuestro repositorio local:

$ git remote -v

Esto mostrará un resultado similar al siguiente:

origin    https://github.com/mi-usuario/mi-repositorio.git (fetch)
origin    https://github.com/mi-usuario/mi-repositorio.git (push)

Puede notarse que el único repositorio remoto referenciado es origin, que suele ser el nombre por defecto asignado al repositorio remoto al clonarlo.

Para asignar una nueva url a dicho remoto, basta ejecutar el siguiente comando:

$ git remote set-url origin https://github.com/mi-usuario/mi-repositorio-nueva-url.git

Para verificar el cambio, podemos listar nuevamente los repositorios remotos, obteniendo el siguiente resultado:

$ git remote -v
origin    https://github.com/mi-usuario/mi-repositorio-nueva-url.git (fetch)
origin    https://github.com/mi-usuario/mi-repositorio-nueva-url.git (push)

Saludos.

Hola, en esta ocasión quería compartirles una plantilla de Vue CLI para crear un proyecto de aplicación web progresiva (PWA) con Onsen UI y Vue JS 2. Onsen UI es una librería de componentes para aplicaciones móviles híbridas, es decir, aplicaciones creadas con HTML y Javascript. Dicha librería está adaptada a 4 frameworks para la creación de aplicaciones web dinámicas: Angular JS (1), Angular 2+, React JS y Vue JS 2.

Vue JS 2 ofrece la herramienta de línea de comandos Vue CLI que permite crear la estructura básica de aplicaciones de una sola página (Single Page Applications, o SPA) de forma amigable. Para más detalles sobre la instalación y uso de esta herramienta recomiendo ver los siguientes enlaces:

La plantilla que he creado es un fork de la plantilla de Onsen UI para PWA con Webpack, la cual a su vez se basa en la plantilla para PWA de Vue JS. La plantilla de Onsen UI incluye:

Aplicación básica de ejemplo utilizando Onsen UI.
Webpack, para empaquetar los componentes del sitio web.
Recarga en caliente, para actualizar los cambios realizados en el código de forma inmediata en el navegador.
Verificador de sintaxis (lint).
Pruebas unitarias y de integración.
Extracción de CSS.
Manejo de estados utilizando Vuex.

Adicional a esto, he agregado las siguientes características en mi versión de la plantilla:

Soporte para TypeScript.
Uso de Vue Router para el manejo de rutas en aplicaciones de una sola página.
Integración de Vue Router y el componente Ons Navigator, mediante Vuex, para el cambio de páginas, basado en este ejemplo.
Axios como cliente HTTP para el consumo de servicios web.
La aplicación de ejemplo ha sido extendida para mostrar el manejo de rutas y la descarga de datos desde servicio web.

El código fuente de la plantilla está disponible acá: https://github.com/guillegr123/ons-vue-pwa-webpack-full

Para crear una aplicación utilizando la plantilla, basta ejecutar el siguiente comando, y contestar algunas preguntas:

$ vue init guillegr123/ons-vue-pwa-webpack-full mi-app

Luego, para instalar las dependencias:

$ cd mi-app
$ npm install

Y finalmente, para ejecutar en modo de desarrollo:

$ npm run dev

Con ello se muestra la siguiente aplicación de ejemplo:

Algunos puntos de interés:

En el menú lateral existe una sección llamada "internal links", que hace referencia a las páginas dentro de la app. El resto son enlaces externos.
En la página de "Movies" se descarga un listado de películas desde un servicio web utilizando Axios.

Cualquier comentario/sugerencia con respecto a la plantilla, así como cualquier contribución, es bienvenida.

Saludos.

lunes, 18 de junio de 2018

Hola, en esta ocasión quería compartirles un pequeño snippet de código de C/C++ que encontré un día de estos: Como leer una cadena de N caracteres con scanf.

Supongamos que queremos leer como máximo los primeros 8 caracteres que ingrese el usuario en la entrada estándar (stdin), y guardaremos el resultado en un arreglo de caracteres. Para ello, primero declaramos el arreglo con una longitud de 9 posiciones, que corresponderán a los 8 caracteres que deseamos leer, más una posición más para el caracter nulo, que marcará el fin de la cadena.

char cadena[9];

Luego procedemos a leer con scanf los 8 caracteres desde la entrada estandar:

scanf("%8s",cadena);

Lo importante a notar es el especificador de formato s, que indica que lo que se leerá es una cadena de caracteres (string). La entrada se termina con un espacio en blanco, pero el número 8 indica que solamente se tomarán los primeros 8 caracteres que se encuentran en el buffer de la entrada estándar. Además, un caracter nulo es guardado al final de la cadena de caracteres. Es por ello que el arreglo utilizado debe ser por lo menos un caracter más grande que la longitud de entrada especificada. De no ser así podría darse el caso que se sobrescriban porciones de memorias adyacentes, generando resultados inesperados.

Finalmente, para limpiar el buffer de la entrada estándar: leer mientras se encuentre el caracter de salto de línea (\n) o el caracter de finalización.

char c;
while ((c = getchar()) != '\n' && c != EOF) { }

El código completo es el siguiente:

Saludos.

sábado, 30 de mayo de 2020

Prerequisites

Create Phoenix web app

Set-up Preact

Set up JSX support

Update routing

Clean Phoenix page templates

Render a component

viernes, 23 de agosto de 2019

¿Qué es Erlang?

¿Por qué Erlang?

I can haz teh codez?

miércoles, 27 de febrero de 2019

lunes, 28 de enero de 2019

domingo, 6 de enero de 2019

martes, 27 de noviembre de 2018

sábado, 13 de octubre de 2018

domingo, 23 de septiembre de 2018

El juego

¿Por qué para Android?

¿Cómo hacer el juego?

¿El plan? ¡Cuál plan!

domingo, 19 de agosto de 2018

Intro a React.js

Creación de la aplicación: lista de películas

Conclusiones

jueves, 16 de agosto de 2018

jueves, 9 de agosto de 2018

Referencias

domingo, 15 de julio de 2018

sábado, 14 de julio de 2018

¡Hola Finch!

¡Hola Akka HTTP!

Conclusiones

sábado, 7 de julio de 2018

lunes, 18 de junio de 2018

Mi perfil en StackOverflow

Popular Posts

Labels

Frase del día... que me acordé de actualizar esta frase

Blog Archive