Forem: Ariel Mirra

Qué son las bases de datos orientadas a grafos y para qué se usan

Ariel Mirra — Mon, 27 Jul 2020 17:09:00 +0000

No importa si estas empezando a programar o sos un ingeniero experimentado, en cada proyecto te toca responder la pregunta: ¿Qué tecnología debería usar? ¿Qué soporta mejor lo que quiero hacer? En un mundo donde cada vez hay más opciones, esta pregunta no es tan fácil de responder. Pero te aseguro una cosa:

"La calidad del proyecto depende de los conocimientos y las tecnologías que el diseñador del mismo maneje" - El sabiondo Ariel

Haciendo este análisis en mi tesis de grado conocí y usé las bases de datos orientadas a grafos (o BDOG de acá en adelante), particularmente Neo4j y hoy vengo a transmitirte este conocimiento para expandir tus horizontes de software y herramientas.

¿Qué es un grafo?

Para los que no conocen este poderoso concepto, un grafo es simplemente una forma de guardar información en entidades y relaciones , generalmente representado como nodos y vértices.

A diferencia de las bases de datos relacionales (todo lo que use SQL), estas bases de datos representan entidades sin conceptos como keys (PK/FK), cardinalidad, herencia y otros. Las bases de datos orientadas a grafos son más simples a la hora de guardar la información. ¿Esto es bueno? ¿Es malo? Depende únicamente de lo que querés hacer.

Quiero verlo gráficamente

Nada mejor para explicar este tipo de base de datos que con un gráfico:

Figura 1: Base de datos de clientes, órdenes y productos en una base de datos relacional

Figura 2: Base de datos de clientes, órdenes y productos en una base de datos orientada a grafos

Perfecto, ¿Cuándo conviene usarla?

En un grafo, agregar y quitar relaciones interdependientes y complejas entre entidades es sumamente fácil y más entendible. En cambio, en una base de datos basada en tablas la complejidad de agregar relaciones crece de forma exponencial a la complejidad del modelo. Con grafos, los cambios en el esquema de las entidades tienen un costo mucho mas bajo a SQL. Además, si lo que se quiere persistir es la relación entre entidades no cabe duda que un grafo es la mejor opción.

Gracias a estas ventajas, las bases de datos orientadas a grafos son particularmente útiles en sistemas cuyos casos de uso requieren:

Representación de redes de información
Información dinámica y cambiante
No hay un esquema fijo
Pueden haber distintos número de atributos

Como por ejemplo:

Redes sociales
Knowledge Graphs para Inteligencia Artificial
Sistemas de recomendaciones a usuarios
Redes Neuronales de Machine Learning
Árboles jerárquicos

Manos a la obra

Suficiente teoría por hoy. Se aprende mucho más cuando los dedos empujan teclas.

Para empezar descargaremos una excelente BDOG llamada Neo4j. También podemos jugar con el sandbox que nos ofrece para empezar ya mismo, es gratis y nos podemos registrar con Google.

En lo que sigue del tutorial usaremos el sandbox así cualquiera puede seguir el tutorial. Lo que haremos será:

Crearnos una cuenta y un proyecto en la plataforma
Abrir el proyecto en el navegador
Correr nuestra primer línea de Cypher Query Language
Admirar la belleza de los nodos interconectados mediante relaciones y la excelente interfaz gráfica de Neo4j
¡Y lo vamos a hacer todo esto en menos de 5 minutos!

Setup del proyecto

Lo primero es ingresar a la plataforma y elegir un proyecto base para jugar. En mi caso elegí Twitter. Neo4j nos creó un container con nuestra BDOG en la que podemos jugar e incluso conectar con alguna aplicación nuestra. Ahora esperamos y abrimos el proyecto en el navegador.

Lo primero que veremos será algo así, y acá mismo podemos quedarnos a experimentar un buen rato, pero como dije menos de 5 minutos vamos a simplemente correr la query:

MATCH (n) RETURN n LIMIT 25

Que me mostrará 25 nodos y sus relaciones. Inmediatamente podemos ver cómo Neo4j grafica los nodos y sus relaciones y que podemos interactuar con ellos. En el menú de la izquierda podemos hacer selecciones y filtrar sin necesidad de correr comandos en Cypher Query Language nosotros mismos.

Cypher Query Language

Similar al SQL, a un grafo podemos recorrerlo y darle órdenes (queries) mediante un lenguaje llamado Cypher Query Language. Este lenguaje es bastante intuitivo para empezar, sobre todo si tenemos conocimientos previos de SQL. Acá les dejo una lista de recursos disponibles de Cypher incluyendo eBooks, videos y tutoriales por si quieren profundizar más sobre el tema (es super interesante).

Volviendo a nuestra BDOG en el navegador, sea cual sea el comando que corrieron para analizar el grafo, lo interesante es que podemos ver la misma información plasmada en el grafo en formatos como tabla y JSON, lo que nos da una idea lo fácil y compatible que este tipo de bases de datos son con el resto del ecosistema:

Ya has visto suficiente

Esto es todo lo que tenes que saber sobre BDOG para empezar, los puntos interesantes a tener en cuenta son:

Los casos de uso para usar una BDOG son definidos y particulares, hay que saber cuando usarlas y obtener todos sus beneficios
Utiliza un lenguaje especial para recorrer el grafo
Neo4j es el proveedor más conocido y posee recursos y una interfaz de calidad (y no, no me están pagando por decir esto lamentablemente).

Ahora te toca a ti

Espero que te haya servido para aprender algo nuevo, ahora te toca seguir aprendiendo y profundizando. Gracias por estar acá.

Un saludo, Ariel Mirra.

instagam | linkedin | otros proyectos

Qué es React, Redux y cómo se relacionan

Ariel Mirra — Mon, 20 Jul 2020 14:30:35 +0000

Partamos desde lo básico y vayamos agregando conocimiento. La idea es que salgas de acá en unos minutos sabiendo qué es React, qué es Redux y cómo juntarlos para hacer ambos más poderosos.

¿Qué es React?

React es una librería Javascript focalizada en el desarrollo de interfaces de usuario, o al menos así es como React se define. La realidad es que React es una herramienta poderosa con la cual podemos crear todo tipo de aplicaciones web, SPAs (Single Page Application) o inlcuso aplicaciones para Android y iOS.

React fue desarrollada inicialmente por facebook, es open-source y ampliamente utilizada gracias a su capacidad de rápidamente poder generar interfaces de usuario, mucho más que otros Frameworks como Angular que ofrecen algo más complejo, aunque con ambos se puede lograr las mismas funcionalidades. La razón de esto es porque React utiliza archivos.jsx, los cuales tienen la lógica y la UI en el mismo archivo y se dividen en "componentes". Por ejemplo:



function formatName(user) { // javascript function
  return user.firstName + ' ' + user.lastName;
}

const user = { // javascript object
  firstName: 'Ariel',
  lastName: 'Mirra'
};

const element = ( // HTML to render
  <h1 className="blue-border">
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render( //virtual DOM
  element, // render this element...
  document.getElementById('root') // inside this div
);

Acá te dejo un proyecto en StackBlitz donde podés jugar con código de React y aprender viendo su funcionamiento.

Si querés usar React en tu propia máquina necesitás tener instalado NodeJS y npm. Luego, solo es cuestión de correr el comando:



npx create-react-app my-app

y ya tendremos una aplicación en ReactJS funcionando para empezar. Excelente.

Los archivos .jsx no son exactamente JS + HTML, sino que algunos atributos de nuestro viejo HTML cambian. Por ejemplo, verán que usé className="blue-border" en vez de class="blue-border".

Notarán además, si son detallistas, que estamos renderizando nuestro HTML en el ReactDOM. Esto es el Virtual DOM de React.

¿Qué es el virtual DOM?

Si entramos al mundo de ReactJS, vamos a escuchar hablar muchas veces sobre el Virtual DOM. Este concepto nace de una idea brillante, actualizar únicamente la parte del DOM que necesita cambiar en vez de todo el DOM real. En las aplicaciones Javascript de antes, se recibe el JSON del servidor y se genera nuevo HTML a renderizar, lo que actualiza toda la página en cada cambio.

Si me preguntás a mi, lo mejor de React es su ecosistema; la cantidad de ejemplos en internet, herramientas disponibles y complementos hace a la plataforma accesible y potente. Una de las mejores integraciones es Redux.

¿Qué es Redux?

No hay mejor descripción que la que ellos mismos se dan:

Redux es un contenedor predecible del estado de aplicaciones JavaScript.

Redux es una excelente herramienta para manejar el estado de una aplicación. Sus principales beneficios son:

Estado global e innmutable
Mayor control del estado de la aplicación y el flujo de datos
Arquitectura escalable de datos

Con apenas 2kb, Redux es una herramienta escalable y potente para manejar el estado de cualquier aplicación Javascript

El flujo de la información

La principal ventaja de Redux es cómo administra los cambios de estado. Para entenderlo, es necesario conocer 3 conceptos clave:

El Store como la única fuente de la verdad
El State es de solo lectura
Los cambios al State pueden hacerse únicamente a través de acciones (actions) y funciones puras (reducers)

De esta forma, se logra centralizar el estado de la aplicación y por lo tanto unificar el lugar para realizar cambios. Esto hace el desarrollo muchísimo más simple:

Todo el estado de tu aplicación esta almacenado en un único árbol dentro de un único store. La única forma de cambiar el árbol de estado es emitiendo una acción, un objeto describiendo que ocurrió.

Para especificar como las acciones transforman el árbol de estado, usas reducers puros.

¡Eso es todo!

Instalación

Para instalar la versión estable de Redux:



npm i -S redux

Si queremos usarlo con React también vamos a instalar la conexión a React y las herramientas de desarrollo



npm i -S react-redux
npm i -D redux-devtools

Ahora veamos algo de código:



import { createStore } from 'redux';
/**
Esto es un reducer, una función pura con el formato
(state, action) => newState. Describe como una acción transforma el estado. El estado puede ser cualquier tipo de objeto inmutable, es decir, se devuelve un nuevo objeto si el estado cambió.

En este ejemplo, usamos `switch` y strings, pero puedes usar cualquier forma
que desees si tiene sentido para tu proyecto.
 */
function counter(state = 0, action) {
  switch (action.type) {
  case 'INCREMENT':
    return state + 1;
  case 'DECREMENT':
    return state - 1;
  default:
    return state;
  }
}

// Creamos un store de Redux almacenando el estado de la aplicación.
// Su API es { subscribe, dispatch, getState }.
let store = createStore(counter);

// Puedes suscribirte manualmente a los cambios, o conectar tu vista directamente
store.subscribe(() => {
  console.log(store.getState())
});

// La única forma de modificar el estado interno es despachando acciones.
// Las acciones pueden ser serializadas, registradas o almacenadas luego para volver a ejecutarlas.
store.dispatch({ type: 'INCREMENT' });
// 1
store.dispatch({ type: 'INCREMENT' });
// 2
store.dispatch({ type: 'DECREMENT' });
// 1

Por último, para conectar nuestro Store con nuestros componentes de React es suficiente con utilizar connect del conector:



import { connect } from 'react-redux'

import { increment, decrement } from './actionCreators'

// const Counter = ...

const mapStateToProps = (state /, ownProps/) => {

  return {

    counter: state.counter

  }

}

const mapDispatchToProps = { increment, decrement }

export default connect(

  mapStateToProps,

  mapDispatchToProps

)(Counter)

Ahora te toca a ti

Esto es solo el comienzo, si querés seguir profundizando te dejo:

Un proyecto de ejemplo de TODOs usando React y Redux ya que siempre se aprende mejor cuando las manos están ocupadas
La documentación oficial de React y Redux

Espero que te haya servido para aprender algo nuevo, ahora te toca seguir aprendiendo y profundizando. Gracias por estar acá.

Un saludo, Ariel Mirra.

instagam | linkedin | otros proyectos

Cómo actualizar Angular-CLI de forma rápida y eficiente

Ariel Mirra — Sat, 18 Jul 2020 17:53:05 +0000

Siempre lo mismo

Para muchos desarrolladores (me incluyo) actualizar Angular no es tan fácil como poner un comando en la terminal y chau. Me llegan avisos de que mi versión diverge con otras, me encuentro leyendo sobre las mejoras de la última versión y cuando me decido a actualizar mi cabeza está en blanco... ¿Se romperá algo? ¿Qué comandos tengo que correr? Si también te pasa algo así, acá dejé explicado mi experiencia para que a vos también te sirva:

Primero que nada, chequeamos nuestra versión del cli (Command Line Interface) haciendo:



ng --version # para angular-cli v7 o menos
ng version  # para angular-cli v8+

Si queremos actualizar debemos primero desinstalar la actual versión de angular-cli del sistema:



sudo npm uninstall -g angular-cli  # Mac o Linux
npm uninstall -g angular-cli # Windows (requiere Powershell en modo administrador)

Por si las moscas, siempre verifico el caché a ver si no le erré:



sudo npm cache verify
sudo npm cache clean   # opcional para gente con TOC como yo

Y por fin llegó el momento más esperado, darle darle una buena bienvenida a todas esas nuevas features y fixes:



sudo npm install -g @angular/cli@latest

La flag -g significa ‘global’, hace que esté disponible en cualquier parte del sistema.

Obviamente que vamos a volver a chequear la versión para asegurarnos:



PS C:\Users\arimi> ng version
_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
Angular CLI: 8.2.2
Node: 12.8.0
OS: win32 x64
Angular:
...
Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.802.2
@angular-devkit/core         8.2.2
@angular-devkit/schematics   8.2.2
@schematics/angular          8.2.2
@schematics/update           0.802.2
rxjs                         6.4.0

Colorín colorado

Hasta acá todo anduvo bien? Perfecto, ya podes cerrar esto y seguir con tu vida. Suerte!

Esto no ha terminado

¿Tuviste problemas? No importa, vamos por los más comunes a ver si lo solucionamos.

Si a la hora de instalar se colgó infinitamente la instalación:

Probá si tu conexión es decente
Puede ser problema de proxy, corré lo siguiente:



npm config rm proxy
npm config rm https-proxy

Esto vuelve la configuración de proxy a default y de repente todo funciona y compila y somos felices.

Listo para mi, ahora seguís vos

Espero que te haya servido para aprender algo nuevo, ahora te toca seguir aprendiendo y profundizando. Gracias por estar acá y pensás que le puede servir a alguien que conocés o al equipo, compartilo.

Un saludo, Ariel Mirra.

instagam | linkedin | otros proyectos

Qué es PolymerJs y porqué tenés que saberlo

Ariel Mirra — Sat, 18 Jul 2020 01:17:01 +0000

A la hora de hacer una aplicación web, la discusión siempre es entre los mejores Frameworks como Angular o React o Vue y porqué cada uno es mejor o peor que el otro. Pero yo vengo a dar a conocer algo mucho más universal, compatible, y más fácil de aprender: PolymerJs.

¿Qué es PolymerJs?

Polymer es un proyecto que te ayuda a desbloquear todo el potencial de la web. Es una librería y un toolbox para utilizar WebComponents y crear aplicaciones web progresivas (PWA).

¿Pero qué es un WebComponent y porqué tiene tanto potencial?

Excelente pregunta mi joven padawan. Voy a dejar que MDN (la biblia de los desarrolladores) la responda por mi:

Los Componentes Web son una colección de tecnologías que te permiten crear elementos personalizados reutilizables — con su funcionalidad encapsulada apartada del resto del código — y utilizarlos en las aplicaciones web.

Creando un Hello World reutilizable

Suficiente teoría por hoy. Se aprende mucho más cuando los dedos empujan teclas. Vamos a crear nuestro primer componente reutilizable con la ayuda de Polymer para que veas lo fácil que es y lo bien que funciona.

Para empezar necesitamos algunas herramientas que quizás ya tenes instaladas:

Ahora que tenemos lo básico para el desarrollo web, instalamos Polymer CLI:

npm install -g polymer-cli@next

y cloneamos el ejemplo inicial:

git clone https://westdabestdb@bitbucket.org/westdabestdb/polymerapp.git

Una vez que hayas hecho esto es momento de sacar Polymer a dar una vuelta:

cd polymerapp
polymer serve
//applications: http://127.0.0.1:8081
//reusable components: http://127.0.0.1:8081/components/polymerapp/

Ahora si vas a http://127.0.0.1:8081 deberías ver una hermosa y minimalista pantalla de Hello World. Eso que estas viendo es un componente reutilizable, vayamos a verlo:

import {
    PolymerElement,
    html
} from '@polymer/polymer';
class HelloWorld extends PolymerElement {

    constructor(who) {
        super();
        this.who = who;
    }

    static get properties() {
        return {
            who: {
                type: String,
                value: 'World'
            }
        };
    }

    static get template() {
        return html`
        <div class="app-container">
            Hello [[who]]
        </div>

        <style>
            .app-container {
                text-align: center;
                font-family: Arial, Helvetica, sans-serif;
                font-weight: bold;
                font-size: 5em;
                height: 100vh;
                width: 100vw;
                background-color: #e3e3e3;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        </style>
        `;
    }
}

customElements.define('hello-world', HelloWorld);

Para los que ya saben React, esto es como estar en casa. Tenemos un constructor con un parámetro llamado who que lo asigno a una propiedad interna del mismo nombre. Mi template es código HTML con CSS que saluda a lo que le hayan pasado en la variable who. Por último, le doy un nombre a mi componente y lo llamo hello-world para que lo podamos mostrar haciendo únicamente <hello-world who="there!"></hello-world> que es exactamente lo que hago desde el index:

import './HelloWorld.js'
class PolymerApp extends PolymerElement {

    static get properties() {
        return {
            who: {
                type: String,
                value: 'World'
            }
        }
    }
    static get template() {
        return html `
        <hello-world who="there!"></hello-world>
        `;
    }
}
customElements.define('polymer-app', PolymerApp);

Esto es todo, los puntos interesantes a tener en cuenta son:

Los WebComponents son universales, no requieren ninguna librería y se pueden mostrar en cualquier navegador
Los componentes que creamos son reutilizables y podemos ver muchos más creados por otros acá
Podemos crear aplicaciones únicamente con esta librería

Listo para mi, ahora seguís vos

Espero que te haya servido para aprender algo nuevo, ahora te toca seguir aprendiendo y profundizando. Gracias por estar acá.

Un saludo, Ariel Mirra.

instagam | linkedin | otros proyectos

¿Qué es una API y para qué sirve? Cómo funcionan y porqué son tan valiosas.

Ariel Mirra — Thu, 11 Jun 2020 09:03:00 +0000

¿Qué es una API?

Una API (Application Programming Interface) es como un mozo en un restaurante: Se encarga de llevar tus pedidos (requests) que elegiste del menú (API Spec) hacia la cocina (Server). Una vez que la comida está hecha, el mozo se encarga de traerte a la mesa lo que pediste (Response).

Esto mismo explica Mulesoft en su video o blogpost sobre el tema.

Una API es un software intermediario que permite a dos aplicaciones hablarse entre si. Cada vez que abrís una red social en tu iPhone o Android, toda esa información fue pedida y provista por una API.

Existen muchos protocolos a los cuales las APIs se adhieren, como RPC, SOAP, Async, GraphQL, pero para este post en particular vamos a estar hablando del protocolo más usado, REST.

Además, una API provee una capa importante de seguridad. Ya que las llamadas y el intercambio de información es explícito y sucinto, la información de tu celular nunca queda expuesta. Solo se comunica y se obtiene lo que es necesario, como comprar comida sin bajarse del auto, vos decís qué querés, ellos te dicen que quieren a cambio, y finalmente obtienes tu comida. Fácil, continuemos.

¿Qué es una API Specification?

"Una API Specification es una forma estandarizada y estructurada de describir una API HTTP de forma que sea legible por humanos y máquinas" - Ariel Mirra

Querés comprar un pasaje de avión. Entrás a una página llamada Aterrizar.com que tiene información de múltiples aerolíneas, le preguntás qué pasajes hay para el lugar X en la fecha Y cuyo precio sea menor a Z, la página te devuelve todos los pasajes que cumplen tus requisitos. ¿Cómo les pidió la información a las aerolíneas? Ahí es donde las especificaciones de APIs vienen al rescate.

Aterrizar.com se dedica a pedirle a las aerolíneas, según como éstas lo tenga en su especificación, la información que vos querés y mostrártela toda junta. Es capaz de hacer esto porque cada aerolínea tiene una API Spec pública que muestra cómo pedirle información y cómo ésta es devuelta.

Eso es una API Specification, detalla toda la información y recursos que la API expone en un lenguaje legible por humanos y máquinas, en su mayoría JSON y YAML.

Genial... ¿Y para qué sirve?

Las API Specs son las que hacen posible toda la interacción entre sistemas independientes que hoy en día nos rodea. Pero eso no es lo único:

Generación automática de documentación

Todos odiamos escribir documentación, con una buena especificación podemos generar un documento o inlcuso una página interactiva en tiempo real que muestre:

Información sobre la API: Quién la hizo, qué versión, que licencia, en qué server y mucho más.
Qué recursos ofrece: Cuales son los endpoints, qué métodos tienen disponibles, cuáles son los parámetros que aceptan.
Cómo es el esquema de los datos a enviar y recibir, junto con ejemplos de cada uno de ellos.
Probar la API en vivo utilizando o cambiando los ejemplos provistos y explorando los diferentes resultados posibles.

Automatización en todos lados

Una especificación detallada nos dá la posibilidad de:

Crear su implementación de forma automática, generando código en diferentes lenguajes o incluso pudiendo importar, publicar y testear la API especificada en servicios como AWS, Azure o Google Cloud.
Automatizar el monitoreo y testeo de APIs con servicios como Smartbear, ya que la especificación funciona como un contrato de funcionamiento donde se sabe de antemano que recibe y que devuelve, y se valida que esto suceda.

Suficiente, quiero crear mi propia API Specification

Tengo una buena noticia para vos y te aliento a que transformes conocimiento a sabiduría a través de acción:

En menos de 5 minutos podés hacerlo

Llegó la hora de poner en acción todo lo dicho en palabras. Tomate 5 minutos para explorar alguna de estas herramientas de creación de especificaciones de APIs, te va a ayudar a cimentar el conocimiento adquirido de forma gratuita y sin tener que descargar nada:

O si querés saber más y probar todas las posibilidades que mencioné antes, te recomiendo echarle un vistazo a Mulesoft’s Anypoint Platform.

Si llegaste hasta acá quiero darte las gracias y hacerte saber que te estas yendo mejor de lo que llegaste, ¡Seguí así!

Un saludo, Ariel Mirra.

instagam | linkedin | otros proyectos