DEV Community: Jesús Velázquez

Consulta de revocación de mandato usando Web3

Jesús Velázquez — Thu, 17 Feb 2022 15:14:43 +0000

Este proyecto trata de cómo se puede usar una una aplicación web que interactúe con un contrato inteligente desplegado en la cadena de bloques (blockchain) de Ethereum para registrar y contar votos. Gráficamente, el objetivo es este:

El contrato recogerá la respuesta a la pregunta:

¿Desea que el presidente continúe en el cargo o que renuncie?

Las posibles respuestas son 3:

Sí, que continúe.
No, que renuncie
Anular voto

Primero lo primero: ¿Qué es el blockchain?

Una definición que me gusta es:

" el blockchain es un libro de contabilidad digital incorruptible de transacciones económicas que se puede programar para registrar no solo transacciones financieras, sino prácticamente todo lo que tiene valor[1]".

El objetivo del blockchain, es que dos entidades que no se conocen ni confían una en la otra puedan realizar transacciones sin necesidad de un intermediario. Por ejemplo, cuando se hace una compra con una tarjeta de crédito o débito, es probable que ni el comprador ni el vendedor se conozcan, sin embargo, ambos saben que pueden confiar en el intermediario (banco) para realizar la transacción. En el blockchain ocurre lo mismo. Se pueden enviar y recibir transacciones, con la confianza de que serán verificadas, ejecutadas, registradas y almacenadas por la red.

Pero, si es lo mismo, ¿para qué quiero el blockchain?

No, no es lo mismo. En el caso del banco, se parte del supuesto de que el banco es una entidad financiera regulada por algún organismo, es decir, podemos confiar en que el banco nos va a guardar el dinero y nos lo va a dar cuando se lo solicitemos. Que cuando paguemos, el costo de lo que compramos será deducido de nuestra cuenta, que no van a desaparecer de una día para otro y llevarse nuestro dinero. Pero, ¿De dónde viene esa confianza? ¿Confiarían en un banco del que nunca han oído?

En el caso del blockchain, no hay un banco. No hay una entidad. El registro de las transacciones no está guardado en el servidor de alguna compañía, es decir, la información no está centralizada. Cada uno de los participantes de la red tiene una copia de la lista de transacciones, y no es posible modificarlas ni alterarlas, porque si se cambia algún registro, los demás participantes de la red notarán que ese es un registro falso. Esta es la principal razón por la que se puede aplicar a sistemas de votación.

Todos los participantes de la red(nodos) trabajan juntos para crear tablas de registros de transacciones y sellarlas con una clave única. Estas tablas se llaman bloques y están unidas entre sí mediante esas claves. De ahí viene el nombre de cadena de bloques.

Para incentivar a que haya computadoras trabajando en encontrar estas claves y registrar las transacciones, la red recompensa con tokens a los nodos que hayan encontrado la clave. Estos tokens, son lo que conocemos como criptomonedas.

Contratos inteligentes

Ethereum es un tipo especial de blockchain, no solo permite registrar transacciones, sino que también podemos poner código. Este código se conoce como contrato inteligente. Esto ha abierto la puerta a que se desarrollen diversas aplicaciones conocidas como Dapps (por decentralized app) o aplicaciones descentralizadas. Hay de todo, hasta juegos. Uno que me gusta mucho y que les recomiendo si son fans los juegos de cartas como Magic o Yu-Gi-Oh! es Gods Unchained.

Una aplicación común de los contratos inteligentes son los sistemas de votación. El contrato es un juez absolutamente imparcial y es capaz de proporcionar un conteo inmediato de los votos registrados.

Aplicado al contexto mexicano, esto quiere decir que no sería posible usar la ya conocida técnica de la urna embarazada, debido a que cada voto registrado debe estar asociado a una persona, ni se puede caer el sistema, porque que la red no está concentrada en un solo sitio, sino distribuida entre todos los participantes. Sin embargo, el contrato sigue siendo vulnerable a la compra de voto y el mapacheo.

Para interactuar con un contrato inteligente, necesitamos un monedero, que viene siendo como una cuenta de usuario mediante la cual podemos enviar y recibir transacciones con el blockchain. Pueden leer más sobre monederos en la página oficial de Ethereum. Personalmente, uso Metamask, que se instala como una extensión del navegador, e incluso tiene una versión como aplicación móvil.

Contrato para la consulta popular

Ya con algo de contexto a la mano, a lo que nos truje:

Necesitaremos una forma de registrar un solo voto por persona. Podríamos usar la CURP, la Clave de Elector o cualquier identificador ciudadano que sea único. Si consideramos que solo las personas que cuentan con una identificación del INE pueden votar, entonces la clave de elector es la opción viable.

Lo que debe hacer el contrato es simple:

Registrar un voto por cualquiera de las 3 opciones mencionadas.
No permitir que una clave de elector vote más de una vez.

A continuación, dejo el código del contrato, está hecho en solidity, que es uno de los lenguajes de programación para contratos inteligentes.

pragma solidity ^0.8.0;
// We have to specify what version of compiler this code will compile with

import "hardhat/console.sol";

contract Consulta {
    // almacenar dirección desde la que votaron y la clave de elector
    struct Votante {
        string clave;
        address addr;
        uint256 timestamp;
    }
    // Arreglo de votantes registrados, privada
    Votante[] private votantes;
    // Las opciones para votar se guardarán en una estructura con su descripción e identificador
    struct Opcion {
        string descripcion;
        uint256 id;
        uint256 votos;
    }
    // Las opciones de la consulta serán guardadas en un arreglo de Opcion
    Opcion[] private opciones;

    // Evento para cuando se emite un nuevo voto
    event NuevoVoto(string _clave, address _sender, uint256 _timestamp);

    constructor() {
        // inicializar las opciones de votos
        opciones.push(Opcion("si, que continue", 1, 0));
        opciones.push(Opcion("no, que renuncie", 2, 0));
        opciones.push(Opcion("anular voto", 3, 0));
    }

    /*
     * Obtiene las opciones de voto y el numero de votos
     */
    function getOpciones() public view returns (Opcion[] memory) {
        return opciones;
    }

    /*
     * Valida que solo exista un voto por cada clave de elector
     */
    function _validarVotoUnico(string memory _clave)
        private
        view
        returns (bool)
    {
        for (uint256 i = 0; i < votantes.length; i++) {
            if (
                keccak256(abi.encodePacked(votantes[i].clave)) ==
                keccak256(abi.encodePacked(_clave))
            ) {
                return false;
            }
        }
        return true;
    }

    function _validarOpcion(uint256 _opcion) private view returns (bool) {
        for (uint256 i = 0; i < opciones.length; i++) {
            if (opciones[i].id == _opcion) {
                return true;
            }
        }
        return false;
    }

    function votar(string memory _clave, uint256 _opcion) public {
        // Validar origen y sentido del voto
        require(_validarVotoUnico(_clave), "La clave de elector ya ha votado");
        require(
            _validarOpcion(_opcion),
            "La opcion elegida no corresponde a ninguna disponible"
        );

        // Si la opción de voto es válida y la clave no ha votado, registrar el voto
        for (uint256 i = 0; i < opciones.length; i++) {
            if (opciones[i].id == _opcion) {
                opciones[i].votos++;
                votantes.push(Votante(_clave, msg.sender, block.timestamp));
                emit NuevoVoto(_clave, msg.sender, block.timestamp);
            }
        }
    }
}

Las partes a destacar son las siguientes:

El método constructor() se ejecuta cuando se despliega el contrato en la red, e inicializa las opciones de votación con cero votos cada una.
El método votar valida primero que la opción por la que el cliente está intentando emitir su voto sea una de las opciones que tiene registradas. Después, se revisa que esa clave de elector no haya votado previamente. Finalmente, si los chequeos anteriores fueron exitosos, se guarda la clave de elector del votante, la dirección del monedero desde el que emitió su voto y la fecha en la que ocurre el registro.

Y listo. Con eso ya podemos empezar a registrar votos. Está muy simple y se puede mejorar en varios sentidos. Pero lo importante es que funciona.

Para que toda la red tenga acceso al contrato, es necesario desplegarlo, que es el equivalente a poner una página web en un servidor público.

Pueden ver el contrato desplegado buscando esta dirección 0x41464D783f75fd9eE97A857730Cd665bC89A26BE en el explorador de la red Rinkeby. La dirección del contrato es como su URL. Así como los monederos tienen una dirección, los contratos y las computadoras de la red, también. Es su identificador.

La red Rinkeby es una de las redes de pruebas de Ethereum. Estas redes de pruebas se usan para proveer a los desarrolladores de un ambiente muy similar a la red principal de Ethereum para los contratos que están programando. El Ether que se intercambia en estas redes no tiene valor monetario.

Lo que se ve buscando la dirección del contrato en el explorador de bloques es algo así:

La tabla de la parte inferior de la imagen es una lista de las transacciones (votos) que se han registrado en el contrato. Se tiene el identificador de la transacción, la dirección del monedero desde el que se votó y hasta el sentido del voto (codificado). Esto otorga total transparencia al proceso. Si damos clic en alguna de las transacciones, podemos ver los detalles de la misma:

Aplicación web

También hice una aplicación web que permite registrar y leer los votos de una forma más amigable.

Para usarla, necesitarán un monedero y, si quieren votar, algo de Ether de Rinkeby. Para obtener un monedero, en este link hay una guía, o si hablan inglés, acá hay otra.

Ya que tengan el monedero, será necesario algo de Ether para poder enviar su voto. El Ether de Rinkeby no tiene valor real, y pueden obtener un poco poniendo la dirección de su monedero en este link.

Ahora sí, para votar, entramos a la aplicación y conectamos nuestro monedero, esto es como "iniciar sesión" en la aplicación, con la diferencia de que no necesitamos crear una cuenta, nuestro monedero es la cuenta. Verifiquen también que el monedero esté en la red Rinkeby. La aplicación les mostrará un mensaje si no es así.

Luego, hay que introducir una clave de elector válida, al menos en sintaxis, porque no tenemos otra forma de validarla. Necesitamos 6 consonantes, la fecha de nacimiento, la clave de la entidad, el sexo y otros 3 dígitos, por ejemplo: HHRRTT90080713H100.

Luego se muestra la pregunta, y las 3 opciones por las que se puede votar. Estas opciones aparecen en orden aleatorio.

Se generará una transacción desde nuestro monedero hacia el contrato inteligente en la red y debe ser firmada por el usuario, es decir, tenemos que autorizar a que se envíe el voto desde nuestro monedero.

Una vez que la autoricemos, se enviará y el blockchain iniciará el proceso de registro de la transacción, esto puede tomar varios segundos.

Ya registrado el voto en el contrato, la aplicación nos redirige a la página de resultados.

Dejo aquí el link a un video de YouTube con todo el proceso de votación:

Notas finales:

Este ejercicio es bastante utópico. Dependería de que todos los ciudadanos tuviesen acceso a un monedero, o a una estación de votación que contenga un monedero compartido y que esté conectada a internet. Además de que se tendría que validar que la clave de elector esté registrada ante el INE, que el monedero desde el que se vota esté autorizado a emitir votos y un largo etcétera. Como decía al principio, esto es únicamente para mostrar una aplicación del blockchain.

Links del proyecto

Dirección del contrato en Rinkeby: 0x41464D783f75fd9eE97A857730Cd665bC89A26BE
Aplicación web
Repositorio en GitHub

Get unique objects from an array

Jesús Velázquez — Tue, 23 Nov 2021 00:35:06 +0000

Suppose you have an array of objects with at least one common property that could be used as an identifier.

This function will allow you to create a new array with unique objects based on the selected property:

function getUniqueElementsFromArray(array, uniqueProperty) {
  const result = [];
  // The map will help us keep a record of the objects
  const map = new Map();
  array.forEach((item, i) => {
    if (!map.has(item[uniqueProperty])) {
      // New element, push it into results
      map.set(item[uniqueProperty], true); // you can set any value, we just need it to be in the Map
      // save unique object
      result.push(item);
      }
    });
  return result;
};

Example:
Let's say we have an array:

const sample = [
  {name: 'a', points: 20, game: 1},
  {name: 'e', points: 5, game: 3},
  {name: 'a', points: 15, game: 3},
  {name: 'i', points: 5, game: 3},
  {name: 'e', points: 50, game: 1},
  {name: 'a', points: 0, game: 5},
  {name: 'o', points: 100, game: 2},
  {name: 'e', points: 20, game: 2},
  {name: 'u', points: 20, game: 1},
  {name: 'i', points: 50, game: 2},
]

We can use the property 'name' as identifier

console.log(getUniqueElementsFromArray(sample, 'name'))

And the result will yield:

[
  { name: 'a', points: 20, game: 1 },
  { name: 'e', points: 5, game: 3 },
  { name: 'i', points: 5, game: 3 },
  { name: 'o', points: 100, game: 2 },
  { name: 'u', points: 20, game: 1 }
]

Adding here a typescript version:

export const getUniqueItems = (array: any[], uniqueProperty: string): any => {
  const result: any[] = []
  const map = new Map()
  array.forEach((item) => {
    if (!map.has(item[uniqueProperty])) {
      map.set(item[uniqueProperty], true)
      result.push(item)
    }
  })
  return result
}

Regex clave de elector de México

Jesús Velázquez — Sun, 10 Oct 2021 00:47:31 +0000

Sin más preámbulo:

[BCDFGHJKLMNPQRSTVWXYZ]{6}[0-9]{2}[0-1]{1}[0-9]{1}[0-3]{1}[0-9]{1}[0-3]{1}[0-9]{1}[HM]{1}[0-9]{3}

La clave de elector se compone de 18 caracteres, y se conforma con las primeras consonantes de los apellidos y primer nombre, año, mes, día y clave del estado en que su titular nació, su sexo y una homoclave interna de registro.

Por partes:

[BCDFGHJKLMNPQRSTVWXYZ]{6} Captura 6 consonantes.
[0-9]{2} Captura dos dígitos entre 0 y 9, para el año de nacimiento.
[0-1]{1}[0-9]{1} Captura el mes de nacimiento, la primera parte espera un dígito entre 0 y 1 y la segunda entre 0 y 9. Esto porque los meses los numeran 01, 02, ..., 12.
[0-3]{1}[0-9]{1} El día de nacimiento, de 01, 02, ..., 31
[0-3]{1}[0-9]{1} Clave de la entidad federativa, muy parecida al día, porque se espera un número entre 01 y 31.
[HM]{1} El sexo del titular. Actualmente limitado a dos opciones, H o M.
[0-9]{3} Homoclave

Defectos:

El año, mes, día y clave del estado pueden ser 00
El día y estado pueden llegar hasta 39
El mes puede llegar hasta 19

My first coding challenge while job hunting

Jesús Velázquez — Tue, 08 Dec 2020 15:49:25 +0000

After several failed attempts to land a coding interview, they finally called me. They went with me over my CV and my previous experience with JavaScript on the phone, and I was really nervous, but I thought I did fine.

A couple of days later, I got an email with a small coding challenge. But it didn't matter that it was small, it was my first real one. I've tried my hand at some coding challenges before (here are my solutions to a few Project Euler problems), but I've never had an actual coding challenge for an interview.

Here's what I had to do:

Write a function in JavaScript called ‘humanSize’ that takes a non-negative number of bytes and returns a string with the equivalent number of ‘kB’, ‘MB’, ‘GB’, ‘TB’, ‘PB’, ‘EB’, ‘ZB’, or ‘YB’, between [0, 1000), with at most 1 digit of precision after the decimal. If the number of bytes is >= 1000 YB, return this number of YB, for example 5120 YB. For example, your function might return ‘107.3MB’. Write this function without writing a separate case for each byte prefix, and without using Math.log or Math.pow.

The planning

The first thing I though was: this will need testing. I needed to write some tests to check that the function was actually doing what I wanted it to do, and the best approach would be using Test Driven Development (TDD). This way I could show that I knew how to test my code and I could plan ahead. I also wanted to set up a GitHub Repo to store all of this.

The algorithm

I was certain I needed tests. But I still had no clear idea on how to get it done. So I took my pencil and my notebook and scribbled a flowchart.

The idea behind was simple: I was to have a dictionary for the prefixes, this was easier to do than a switch-case statement, or several if-else ones, and, I was not allowed to use them anyway. This dictionary needed a "pointer", a way to tell how many times had I divided by 1000.

I also needed a loop, a way to constantly divide the input (number of bytes) by 1000, until its integer part was 0, that meant I had reached the maximum times of divisions by 1000, and thus, I had a number to show. The dictionary pointer needed to increase at every run of the loop, and the loop was to run at least once, to check if a had something at least in a size of kB.

The problem statement had another restriction: If the number of bytes is >= 1000 YB, return this number of YB. This meant that whenever I had divided by 1000 more than 8 times, I had reached the line of thousands of yottabytes. I came into this conclusion by looking up how many zeros there are in a yottabyte. Turns out the factor is 10²⁴, so 24/3 = 8. This was to be a condition within my loop.

If the loop was broken by this last condition, the function had to return the rounded number of yottabytes. Otherwise, return the rounded number to 1 decimal place and concatenate it as a string to the dictionary prefix extracted by the pointer.

After some iterations, I had this:

I wasn't planning on error handling here, I thought that was best left to the coding part, but I wanted the function to return '0kB' if the input was not valid.

The tests

I decided to go with TDD on this one, so the first thing to to is write the Tests. By this point, I already knew 2 things: what the function had to do and how was it going to do it.

I started a new Node project inside my /human-size/ folder by running

npm init -y

The idea behind each test was to provide a number of bytes and compare the output of the function to what I already knew the conversion value was. I'm familiar with Jest, so I had to install it first.

npm install --save jest

Then my first test was:

test("Should return 3.1kB", () => {
    expect(humanSize(3125)).toBe("3.1kB");
  });

Given 3125B, I knew this was 3.125kB, but, by definition, I was to round that number to 1 decimal place, hence 3.1kb

Then I went a bit picky and wrote the tests for an invalid input, such as a String, NaN, Object, Array or simply a negative number:

test("Should return 0kB when input is String", () => {
    expect(humanSize("asd")).toBe("0kB");
  });

  test("Should return 0kB when input is NaN", () => {
    expect(humanSize(NaN)).toBe("0kB");
  });

  test("Should return 0kB when input is Object", () => {
    expect(humanSize({ a: "foo", b: 123 })).toBe("0kB");
  });

  test("Should return 0kB when input is Array", () => {
    expect(humanSize([200, 100])).toBe("0kB");
  });

  test("Should return 0kB when input is <0", () => {
    expect(humanSize(-25)).toBe("0kB");
  });

From this point onwards, the test should be focused on ensuring the correct output. So I wrote a test for every prefix:

test("Should return 31.3kB", () => {
    expect(humanSize(31250)).toBe("31.3kB");
  });

  test("Should return 31.3MB", () => {
    expect(humanSize(31250000)).toBe("31.3MB");
  });

  test("Should return 31.3GB", () => {
    expect(humanSize(31250000000)).toBe("31.3GB");
  });

  test("Should return 31.3TB", () => {
    expect(humanSize(31250000000000)).toBe("31.3TB");
  });

  test("Should return 31.3PB", () => {
    expect(humanSize(31250000000000000)).toBe("31.3PB");
  });

  test("Should return 31.3EB", () => {
    expect(humanSize(31250000000000000000)).toBe("31.3EB");
  });

  test("Should return 31.3ZB", () => {
    expect(humanSize(31250000000000000000000)).toBe("31.3ZB");
  });

  test("Should return 31.3YB", () => {
    expect(humanSize(31250000000000000000000000)).toBe("31.3YB");
  });

And finally, test for the thousands of YB case:

test("Should return 3125YB", () => {
    expect(humanSize(3125000000000000000000000000)).toBe("3125YB");
  });

Now I added the test script to my package.json:

"scripts": {
    "test": "jest",
  },

The code

I decided to focus on the invalid cases first. If we operate on something that is not a number (let's not count string concatenation), we would get a NaN. So I did that, and also added another check for negative numbers:

function humanSize(b) {
    // default return when input is not valid
    const def = "0kB";
    // Parse input
    if (isNaN(b / 1000)) return def;
    if (b < 0) return def;
  }

  module.exports = humanSize;

This will pass the invalid input tests, but fail all others. In TDD, this is the right track.

Now it's time to translate the flowchart into code. The first part is the dictionary and the initialization of variables

function humanSize(b) {
    // default return when input is not valid
    const def = "0kB";
    // Parse input
    if (isNaN(b / 1000)) return def;
    if (b < 0) return def;
    // Prefix hash
    const prefix = {
      1: "k",
      2: "M",
      3: "G",
      4: "T",
      5: "P",
      6: "E",
      7: "Z",
      8: "Y",
    };
    // Prefix pointer/counter
    var i = 0;
    // Initialize size variable
    var B = b;
  }

  module.exports = humanSize;

Good, now I needed the loop. Notice I set up the first index of my dictionary to 1, and my pointer starts at 0. I did this because I needed to know if the number of bytes was at least on the range of kB, that means, the loop has to run at least once. This led me into a Do While statement.

function humanSize(b) {
    // default return when input is not valid
    const def = "0kB";
    // Parse input
    if (isNaN(b / 1000)) return def;
    if (b < 0) return def;
    // Prefix hash
    const prefix = {
      1: "k",
      2: "M",
      3: "G",
      4: "T",
      5: "P",
      6: "E",
      7: "Z",
      8: "Y",
    };
    // Prefix pointer/counter
    var i = 0;
    // Initialize size variable
    var B = b;
    // Iterate over the size variable until its integer part is 0
    do {
      if (i > 7) return Math.round(B.toString()) + prefix[8] + "B";
      i += 1;
      B /= 1000;
    } while (Math.trunc(B / 1000) > 0);
  }

  module.exports = humanSize;

I also included the check for thousands of YB, it'll break the loop and return the rounded number of YB. Now the only thing missing was to round the number to 1 decimal place for all other cases. A quick search on 30 Seconds of Code gave me a snippet called simply round, that returns a number rounded to a specified number of decimals:

const round = (n, decimals = 0) => Number(`${Math.round(`${n}e${decimals}`)}e-${decimals}`);

So I embeded that into my humanSize(b) function, followed by the prefix:

function humanSize(b) {
    // default return when input is not valid
    const def = "0kB";
    // Parse input
    if (isNaN(b / 1000)) return def;
    if (b < 0) return def;
    // Prefix hash
    const prefix = {
      1: "k",
      2: "M",
      3: "G",
      4: "T",
      5: "P",
      6: "E",
      7: "Z",
      8: "Y",
    };
    // Prefix pointer/counter
    var i = 0;
    // Initialize size variable
    var B = b;
    // Iterate over the size variable until its integer part is 0
    do {
      if (i > 7) return Math.round(B.toString()) + prefix[8] + "B";
      i += 1;
      B /= 1000;
    } while (Math.trunc(B / 1000) > 0);
    // Return size rounded to 1 decimal with correspoding prefix
    return (
      Number(`${Math.round(`${B}e${1}`)}e-${1}`).toString() + prefix[i] + "B"
    );
  }

  module.exports = humanSize;

This function is now passing all the tests, and, believe me, that is one of the best feelings in the world.

Final remarks

That was it. The only thing left was to create a .gitignore to avoid pushing the /node_modules folder to the GitHub repository.

They asked me to submit the function inside a GitHub gist, so I did. I'm waiting for their response now. I'll update as soon as I know anything :)

Update: Didn't get the job. It was a good challenge, though.

Here's the repo of this code.

Upload and preview a video using vanilla JavaScript

Jesús Velázquez — Wed, 11 Nov 2020 22:37:01 +0000

I recently googled the title, and found several solutions on how to do it with jQuery, but I was working with Vue and needed a pure JS implementation. Here's a codepen with the code.

We need an input field and a video tag in our HTML to begin with, like this:

<input type="file" accept="video/*" id="input-tag"/>
<hr>
<video controls id="video-tag">
  <source id="video-source" src="splashVideo">
  Your browser does not support the video tag.
</video>

Now, in the JS, let's get the handles of our HTML elements

const videoSrc = document.querySelector("#video-source");
const videoTag = document.querySelector("#video-tag");
const inputTag = document.querySelector("#input-tag");

With this ready, we can write the function that will read the video and show it inside the video tag, we're using the FileReader API:

function readVideo(event) {
  if (event.target.files && event.target.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      videoSrc.src = e.target.result
      videoTag.load()
    }.bind(this)

    reader.readAsDataURL(event.target.files[0]);
  }
}

The trick here consists on reading the selected file as URL. This way, it can be read by the video tag.

When the file has been uploaded (.onload event), we simply point the src property of the video to the result of the FileReader instance. Then execute the load() method from the video tag.

That's it. I hope it was helpful. Here's a codepen with the code again.

Header image by Kushagra Kevat