En este tutorial construiremos un generador de películas simple que genera automáticamente una nueva película cada 40 segundos. También tiene un botón llamado "Generar nueva película" para mostrar otra película bajo demanda.

Esta aplicación mostrará una película junto con su título, fecha de lanzamiento, calificación de fans, duración, una descripción corta, estrellas, nombre de los directores y finalmente un botón que enlaza con la página de películas IMDb.

Puedes acceder al código completo de este proyecto (autor original) en el repositorio Github.

¿Cómo vamos a construir esto?

Como con la mayoría de otras aplicaciones web, esta app consiste en un frontend y un backend.

El frontend es la parte que el usuario usa para interactuar. En nuestra app, el front end estará hecho de imágenes de carátulas de películas, su información, y un botón que linkea a la página de películas IMDb.

El backend es donde la data de las películas - tal como el título, descripción, actores, fotografía, etc.

La aplicación generará automáticamente una nueva película aleatoria cada 40 segundos.

Construiremos el frontend de nuestra aplicación usando React. React es una librería frontend de JavaScript usada para construir componentes de la interfaz de usuario (UI) reusables, tales como botones, menús de navegación, cartas y más.

También daremos el estilo a nuestros componentes usando CSS puro.

Como construiremos el Back End

El backend de un sitio web contiene típicamente una base de datos, que es un programa que usa para almacenar y manipular data. La base de datos también tiene que ser accesible vía una API de modo que nuestro frontend pueda acceder a la data y disponerla a los usuarios.

Para lograr esto usaremos una herramienta interesante y entretenida llamada HarperDB.

¿Qué es HarperDB?

HarperDB es un software de base de datos y gestor de base de datos que es increíblemente rápido - se ha probado que puede ser 37 veces más rápido que MongoDB.

La velocidad de una base de datos se refiere tanto a cuan rápido puede leer y escribir data a sus registros, como al computo sobre esa data.

HarperDB también es increíblemente flexible. Te permite hacer lo siguiente:

• Te permire hacer consultas a un único endpoint.
• Usar tanto SQL como NoSQL para consultar tu base de datos.
• Subir data en Json y con consultas SQL.

Si estás trabajando con mucha data, puedes importar toda ella en un solo paso en un archivo CSV. ¡Está buena la cosa!

No tienes que definir los tipos de datos para tu data, ya que HarperDB lo hace dinámicamente por ti. Sin mencionar su simple interfaz para administrar tus instancias en la nube sin problemas.

Como dije, es muy flexible.

Prerrequisitos para este tutorial

Para construir esta app asumiré que tienes conocimientos básicos de los siguientes lenguajes y herramientas:

Npm u otro gestor de paquetes: Necesitaremos esto para instalar React y un hook de HarperDB para React llamado use-harperdb en tu proyecto.

NPM es un acronimo de Node Package Manager (Gestor de paquetes Node). Es una herramienta que conecta tu proyecto local al registro npm, donde hay millones de paquetes de código público, tales como React y useharperdb. También te ayudará a gestionar su código una vez instalado.

Debes asegurarte de tener una versión de Node 12.xx o superior instalada en tu equipo. Puedes chequear tu versión de node con el comando: node-v

SQL: En este proyecto usaremos una o dos consultas básicas, así que no te preocupes si no sabes mucho sobre SQL.

SQL es un acrónimo de Structured Query Language (Lenguaje Estructurado de Consultas). Es un lenguaje popular usado en la consulta de bases de datos relacionales. Lo usaremos en nuestro Hook para consultar nuestra instancia cloud de HarperDB para la data.

React: Nuestra interfaz de usuario se construirá con React. Si sabes JavaScript, entonces aprender React es relativamente sencillo.

Una cuenta de HarperDB: Si no tienes una cuenta de HarperDB, necesitarás crear una. No te preocupes, es completamente gratuita. Te mostraré como crear una cuenta más abajo.

Y finalmente, CSS: Usaremos un poco de CSS para agregar estilo a nuestros elementos.

¿Qué son los Hooks de React?

En el pasado, para trabajar con un componente de React, tenías que definir el componente como un componente de clase. Esto cambió cuando React introdujo los Hooks.

Dicho de forma simple, los Hooks son funciones que te permiten trabajar con la data en un componente sin clase de React (que sea funcional).

Gracias a esto, no tienes que definir un componente de clase React sólo para manejar data dentro de él.

El Hook use-harperdb te permite "enganchar" (hook) tu aplicación a tu instancia cloud de la base de datos para obtener data. Piensa en esto como un puente entre tu app React (Front End) y la base de datos HarperDB (Back End).

Cómo configurar la base de datos

HarperDB es una base de datos flexible, como mencioné antes. Esto te permite usar sus servicios ya sea, configurando tu propio servidor local HarperDB o usando la arquitectura serverless (sin servidor).

En este proyecto usaremos la arquitectura serverless. Esto significa que no implementaremos un servidor (este es el backend) en tu máquina local. En su lugar, aprovecharemos la infraestructura en la nube de HarperDB para administrar nuestra data de películas y hacerla accesible para nuestra app.

Configurando la instancia Cloud de HarperDB

Primero, asumiré que creaste una cuenta gratis como solicité antes. Si no lo has hecho, anda y crea una

Te pedirá el nombre, una dirección e-mail válida y un nombre de subdominio para tu instancia cloud. Con esto HarperDB creará un nombre de sub-dominio para ti.

Luego, crearemos una instancia cloud:

Aquí te pedirá que agregues el nombre de la instancia. No te preocupes, puedes colocar cualquier nombre fácilmente recortable, pero es mejor hacerlo descriptivo.

Para crear la URL de tu instancia, la que necesitarás en tu app cuando consultes data, HarperDB combinara el nombre de tu instancia con el nombre de tu subdominio. También se te pedirá configurar las credenciales de tu instancia (nombre de usuario y password).

Luego, seleccionamos las especificaciones de las instancias. Por el bien de este tutorial usaremos el plan gratuito. También necesitas elegir una región para tu instancia.

Haz click en "Confirm Instance Details" y te enviará a una página que contiene toda la información de tu instancia. Ahora copia el URL, tu nombre de usuario y tu password y guardalos. Los necesitarás más tarde.

Cuando estés preparado haz clic en "Add Instance". Te llevará a una página que mostrará una carta de tu instancia. Tu instancia necesitará un poco de tiempo inicialmente antes de que puedas usarla, pero podemos hacer algunas cosas mientras esperamos

Como configurar la aplicación React

Mientras nuestra instancia cloud está siendo configurada, podemos tomar la oportunidad de configurar el directorio para nuestra app.

Primero inicializamos nuestro proyecto ejecutando el siguiente comando en cualquier terminal:

npx create-react-app harperdb-movies-generator

Este comando creará una carpeta llamada harperdb-movies-app e instalará todas las dependencias que necesitaremos para nuestro proyecto. Esto incluye React y ReactDOM, de modo que no tendremos que hacerlo manualmente.

Ahora vamos a ejecutar el comando que traerá el Hook use-harperdb a nuestro proyecto. Este Hook nos ayudará a conectar nuestra instancia cloud. Para instalarlo, ejecutaremos el siguiente comando en nuestra terminal:

cd harperdb-movies-app

Para cambiar a la raíz de nuestro proyecto

(A la fecha de traducción del tutorial use-harperdb era compatible con React 17.0.2, mientras que la versión actual era la 18.x.x, es por esto que usaremos los flags --legacy-peer-deps y --force para que se ajusten las dependencias de la aplicación

npm install use-harperdb --legacy-peer-deps --force

Y eso fue todo con la configuración!

Como integrar HarperDB a nuestra App React

Ahora que el hook use-harperdb se ha instalado, tenemos que hacer una cosa más para poder acceder a la base de datos y hacer operaciones CRUD en ella: tenemos que conectar nuestra app a la instancia cloud. Esto lo haremos con el HarperDBProvider.

Antes de entrar a esta tarea, necesitamos hacer algo primero. Cuando construimos una aplicación CRUD, no es una buena práctica exponer credenciales tales como llaves de API a otras personas, especialmente si tenemos la intención de llevar código a un repositorio público como GitHub.

Para proteger cualquier credencial sensible, necesitamos almacenarlas como variables de entorno. Este es un archivo que almacenará todas las credenciales sensibles, tales como passwords, llaves de API, y en nuestro caso particular, las credenciales de nuestra instancia cloud (URL, nombre de usuario y password).

Crea un .env en la raíz del directorio del proyecto. Puedes hacerlo en tu editor de código, click derecho en la raíz del directorio (harperdb-movie-generator) y seleccionar la opción "crear nuevo archivo".

Llama a este archivo .env y presiona enter. este creará un .env dentro de harperdb-movie-generator. Después de esto, define las siguientes variables:

REACT_APP_DB_URL=**
REACT_APP_USER=**
REACT_APP_PASSWORD=**

Asegúrate de usar el mismo formato y pasar la información correcta de tu instancia cloud, en vez de los doble asterisco. Llena los datos con la URL, username y password que te dije que guardaras en algún lugar.

React leerá todas las variables de entorno que usen REACT_APP_ como prefijo, y luego dinámicamente pasará el valor cuando lo necesite.

Con el archivo .env creado, nuestra siguiente acción será envolver toda nuestra aplicación React dentro del HarperDBProvider que importamos.

HarperDBProvider se asegurará que nuestra app tenga el contexto de la base de datos HarperDB.

Para envolver nuestra aplicación React dentro del Provider, iremos al fichero index.js de nuestro proyecto e importaremos el Provider, y de forma segura pasaremos esas variables de entorno en al Provider. Esto deja saber cuales instancias conectar a nuestro front end

import React from 'react';
import ReactDOM from 'react-dom';  // Línea modificada
import './index.css';
import App from './App';
import { HarperDBProvider } from 'use-harperdb/useHarperDB';
import reportWebVitals from './reportWebVitals';


// Renderizado en DOM
ReactDOM.render(
  <React.StrictMode>
    // Hook de use-harperdb
    <HarperDBProvider
    url={process.env.REACT_APP_DB_URL}
    user={process.env.REACT_APP_USER}
    password={process.env.REACT_APP_PASSWORD}
    >
      <App />
    </HarperDBProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

// Si deseas comenzar a medir el rendimiento en su aplicación, pase una función
// para registrar los resultados (por ejemplo:reportWebVitals(console.log))
// o envia a un punto final de analytics. Más información: https://bit.ly/CRA-vitals
reportWebVitals();

Como poblar nuestra base de datos con data

Si te acuerdas, dejamos nuestra instancia cloud mientras aún se estaba configurando. A estas alturas, deberíamos tener nuestra instancia configurada y lista para servir datos. En este caso deberíamos ver el estado OK en nuestra instancia

Tu instancia cloud debería estar lista para usar con tu front end conectado a la instancia también. Sin embargo, el Front End será inútil si no tiene datos (es decir, películas) para mostrar al usuario.

Es por esto que necesitamos poblar nuestra base de datos con películas.

Pero antes de eso, necesitamos crear un esquema para nuestra data de películas. Puedes pensar en un esquema como en una colección de tablas en nuestra base de datos. Yo simplemente llamaré a mi propio esquema "coleccion":

Luego crea una tabla. Llamaré a la mía "pelicula". Una tabla consistirá en registros de películas individuales

Cada película debe tener un hash attribute. Un hash_attribute es simplemente una columna con una única clave que identifica una fila de data en particular, y la distingue de la siguiente fila. Nosotros simplemente usaremos la columna "id" como nuestro hash_attribute.

Como estamos creando una app con más de una película, nuestra tabla consistirá en más de una fila con una película (es decir, registro de datos). También, como cada película tiene muchas propiedades tales como titulo, año, fecha de lanzamiento, etc, tendrá más de un campo de información.

Puedes subir las películas una por una con un único objeto JSON o puedes subir una colección entera de películas con un array de objetos JSON.

HarperDB te permite subir data principalmente de 3 formas:

1. Haciendo consultas SQL o NoSQL para crear data en nuestra base de datos.
2. Definiendo un único objeto JSON (para un registro) y un array de objetos JSON (para múltriples registros).
3. Importando y cargando data con un archivo CSV

Para subir la información de una película, crearemos un objeto JSON el cual contendrá toda la información de una película. Aquí hay un ejemplo de la información en JSON:

{
  cover: 'https://res.cloudinary.com/ubahthebuilder/image/upload/v1627129180/avengers_endgame_ilqzqj.png',
  date: 2017,
  description: 'After the devastating events of Avengers: Infinity War (2018), the universe is in ruins. With the help of remaining allies, the Avengers assemble once more in order to reverse Thanos actions and restore balance to the universe.',
  directors: [
    'Anthony Russo',
    'Joe Russo'
  ],
  genres: [
    'Action',
    'Adventure',
    'Drama'
  ],
  hours: 3,
  id: 1,
  minutes: 1,
  rating: 8.4,
  stars: [
    'Robert Downey',
    'Chris Evans',
    'Mark Ruffalo'
  ],
  title: 'Avengers: End Game',
  website: 'https://www.imdb.com/title/tt4154796/',
  writers: [
    'Christopher Markus',
    'Stephen McFeely'
  ]
}

navega a la tabla pelicula dentro de la colección y haz clic en el botón + en la esquina superior derecha de la página, el cual está destacado en la siguiente imagen:

Copia el JSON previamente definido y pégalo en el espacio provisto para ello, reemplazando todo lo que ahí por razones de formato. Haz clic en el botón verde para guardar la información en la tabla película.

Una vez que terminaste de subir la película, la tabla debería verse algo similar a esto.

Puedes usar la data del proyecto desde el repositorio GitHub para insertar múltiples películas de una vez.

Como construir nuestra interfaz de usuario y consultar la base de datos

Ahora que la data está lista, necesitamos mostrarla en nuestro front end para que el usuario pueda interactuar con ella.

Primero necesitamos modificar nuestro archivo app.js:

import React from 'react'
import './App.css';
import Pelicula from './components/Pelicula';

function App() {
  return (
    <div className="App">
      <div className="main-container">
        <header>
          <h1 className="heading">Lista de películas</h1>
          <h3>Un simple generador de películas hecho con React y HarperDB</h3>
        </header>
        <div>
          <Pelicula/>
        </div>
      </div>
    </div>
  );
}

export default App;

Este será el componente de nivel superior en nuestro proyecto, donde importamos las librerías React, ReactDOM y la hoja de estilos App.css para nuestra aplicación.

Luego en el archivo App.css definiremos nuestros componentes de la app, los cuales retornarán el elemento header y el componente Pelicula

Acá está el estilo para nuestra aplicación completa:

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');

/* Estilos base */

body{
  font-family:"lato", sans-serif;
  color: white;
  background-color: #082032;
}

a {
  color: black;
  font-family: "roboto", sans-serif;
  font-size: 3.1rem;
  text-decoration: none;
  display: inline-block;
}

h1 {
  text-align: center;
  font-family: "roboto", sans-serif;
  font-size: 3.5rem;
  font-weight:600;
}

h3 {
  text-align: center;
}

p {
  font-weight: 300;
}

span {
  color: #FFF338;
}

ul {
  list-style-type: none;
  display: flex;
  margin-left: 2rem;
}

li {
  outline-color: #2c394B;
  outline-style: inset;
  outline-width: 2px;
  outline-offset: 5px;
  margin: 11px;
  padding: 0px, 2px;
}

img {
  max-height: 500px;
  width: 70vw;
  margin: 0 auto;

}

/* Clases */

.carga{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.portada-pelicula{
  max-width: 800px;
  width: 90%;
  background-color: #2c394B;
  margin: 0 auto;
  border-radius: 10px;
}

.circulo {
  background-color: transparent;
  margin-right: 37px;
  text-align: center;
  margin-top: 50px;
  border: 3px solid #FFF338;
  height: 90px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  width: 90px;
}

.ratings {
  font-size: 30px;
  margin-top: 12px;
}

.mitad-grande, .mitad-pequena {
  font-family: "roboto", sans-serif;
  font-style: oblique;
  color: white;
}

.mitad-pequena {
  color: #DAD0C2;
  font-size: 1.2rem;
}

.btn-visita-pelicula {
  margin: 1rem 2rem;
  padding: 1em 1em;
  top: 50px;
  left: 15px;
  font-size: 1.2rem;
  outline-style: solid;
  color: #FFF338;
  outline-color: #FFF338;
  outline-offset: 10px;
}

.btn-generar-pelicula {
  background-color: #FFF338;
  margin: 1rem 2rem;
  padding: 1em 1em;
  top: 50px;
  left: 15px;
  font-size: 1.2rem;
  text-decoration: none;
  text-transform: uppercase;
}

.btn-accion {
  width: inherit;
  display:flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.titulo{
  font-size: 50px;
  padding-top: 40px;
  padding-left: 30px;
  margin-bottom: 0;
}

.info-arriba {
  display: flex;
  justify-content: space-between;
}

.info-soporte {
  padding-left: 30px;
  font-weight: bold;
  margin-bottom: 20px;
}

.info-abajo {
  font-family: "roboto", sans-serif;
  max-width: 70vw;
  margin: 1rem;
  text-align: center;

}

.autores {
  text-align: right;
  padding: 0;
}

.imagen {
  display: flex;
  align-items: center;
  padding-top: 2rem;
}

otra vez, puedes acceder al código completo para este proyecto desde el repositorio Github.

Como agregar el componente Película

Ahora necesitamos agregar nuestro componente película. Comenzaremos creando un nuevo directorio dentro del directorio "src"

Ahora necesitamos agregar nuestro componente película. COmenzaremos creando un nuevo directorio componentes dentro del directorio src. Luego crearemos un archivo dentro de componentes llamado Pelicula.js. Aquí es donde viene lo bueno.

Además de las librería React, importaremos también el hook use-harperdb.

Vamos a ejecutar la función (Hook) use-harperdb pasandole un objeto como argumento. Dentro del objeto, necesitamos darle la propiedad "query". Esta propiedad determinará qué tipo de operaciones queremos hacer a nuestra base de datos.

import React from "react";
import { useHarperDB } from "use-harperdb"

function Pelicula(){
    // Llamada a hook use-harperdb

    const [data, loading, error, refresh] = useHarperDB(
        {
            query: {
                operation:'sql',
                sql: "select * from colecion.pelicula"
            },
            interval: 40000  // 40 segundos
        }
    );
    
// ... el código continúa más abajo

La primera propiedad dentro de la consulta query, es la propiedad operation, especifica de qué forma quieres consultar la data. En nuestro ejemplo lo haremos con comandos SQL.

La segunda propiedad dentro de la consulta (query) es la propiedad SQL. Aquí es donde escribiremos nuestras consultas SQL para cualquier operación CRUD que queramos realizar. En nuestro caso, simplemente queremos traer las peliculas.

SELECT *FROM coleccion.pelicula

(La forma en que se crean los identificadores cambió desde que se creó el artículo original, por lo que la consulta varía respecto a la consulta del autor original)

Después de la consulta, podemos definir la propiedad opcional interval. Con esta propiedad puedes especificar cuanto tiempo tiene que esperar tu app antes que realice otra consulta de forma automática a la base de datos.

Al ejecutar la función useHarperDB con estos parametros correctamente, nos devolverá un array conteniendo algunas cosas importantes. Abajo hay cuatro elementos importantes que obtendremos de useHarperDB:

• loading: Este es un booleano que especifica si la base de datos sigue cargando la data o no. De esta forma, puedes colocar opcionalmente un "spinner" de carga.
• error: Esto indica si un error ha ocurrido mientras se consulta a la base de datos.
• refresh: Asumiento que no definiste un intervalo de forma adecuada, puedes llamar a esta función cuando quieras para obtener nueva data.
• data: El elemento principal. Si todas las cosas salen bien, HarperDB devolverá nuestra data a esta variable.

Como mostrar la data en nuestro frontend

Con nuestra data retornada de forma exitosa de la base de datos, es tiempo de pasarla a nuestro template React:

    // renderizado cuando está cargando la data
    if(loading){
        return(<div>Cargando...</div>)
    }

    // Renderizado en caso de obtener la data
    if(data){

        // Acá obtiene una película de forma aleatoria en báse al índice del array
        const aleatorio = Math.floor(Math.random()*6+1);

        return(<div className="carga">
            {/* Portada */}
            <div className="portada-pelicula">
                <div className="info-arriba">
                    <h2 className="titulo">{data[aleatorio].title}</h2>
                    <div className="circulo">
                        <div className="ratings">
                            <span className="mitad-grande">{data[aleatorio].rating}</span>/<span className="mitad-pequena">10</span>
                        </div>
                    </div>
                </div>
                <div className="info-soporte">
                    <span className="año">{data[aleatorio].date}</span> -
                    <span className="duracion"> Duración {data[aleatorio].hours}h:{data[aleatorio].minutes}m</span>
                </div>
            </div>

            <div className="imagen">
                <img alt="Portada Pelicula" src={data[aleatorio].cover} />
            </div>

            <div className="generos">
                <ul className="generos-pelicula">
                    {data[aleatorio].genres.map((genero,index)=>{
                        return(
                            <li key={index}><span className="generos-pelicula-item">{genero}</span></li>
                        )
                    })}
                </ul>
            </div>

            <div className="info-abajo">
                <p>{data[aleatorio].description}</p>

                <hr />
                <p className="autores">Escritores:
                    {data[aleatorio].writers.map((escritores,index) =>{
                        return(
                            <span key={index} className="escritores">{escritores}</span>
                            )
                        } )}
                </p>
                <p className="autores">Director/es:
                    {data[aleatorio].directors.map((directores,index)=>{
                        return(
                            <span key={index} className="directores">{directores}</span>
                        )
                    })}
                </p>
                <hr />
                <div className="btn-accion">
                    <a className="btn-visita-pelicula" href={data[aleatorio].website}>Mira en IDBM</a>
                    <a className="btn-generar-pelicula" href="" onClick={refresh}>Otra Pelicula</a>
                </div>
            </div>
        </div>)
    }

    // Renderizado en caso de error de conexión
    if(error){
        return(<div className="">Lo sentimos, no encontramos la información {error}</div>)
    }

No olvides exportar el componente para usarlo en App.js

Si estás familiarizado con React, esto no debería ser extraño para ti. Pero de todas formas explicaré lo que hice acá:

• Como dije, la función useHarperDB retornará nuestra data. En nuestro caso hicimos una consulta query para obtener todas las películas, lo que retornó un array con películas. Como requeríamos una sóla película, creamos un número aleatorio cada vez que carga, para acceder a una pelicula de forma aleatoria en base a su índice data[aleatorio].llave
• Luego tenemos que revisar si la data fue devuelta. Si no hay data simplemente renderizamos un div que muestra el mensaje "Lo sentimos, no encontramos la información".
• Si recibimos la data, pasaremos esta data a nuestro template. Extraemos data campo de nuestro objeto y lo pasamos en el lugar correcto de nuestro template.

Cuando terminamos, finalmente ejecutamos el siguiente comando en la consola:

npm start .env

con el .env te aseguras que pueda leer las variables de entorno que creamos

Esto debería ejecutar nuestro servidor de desarrollo en https://localhost:3000. si toda va bien, deberías ver la aplicación en nuestro navegador.

Con esto tendríamos nuestra app! :)

Como implementar la aplicación en las páginas GitHub

Bienvenido a la última sección del tutorial. Implementaremos nuestra nueva aplicación en las páginas de GitHub para que el mundo la vea.

Si tienes otro proveedor host, puedes hacer el deploy ahí. Si no tienes, y quieres algo gratuito, entonces GitHub Pages es genial!.

Primero, necesitas tener una cuenta GitHub. Si no tienes una puedes crear una cuenta acá.

También tienes que tener el software de control de versiones Git instalado en tu equipo. Esto es algo que cualquier desarrollador debería tener. Sin embargo, si no lo tienes, puedes instalarlo desde acá.

Lo primero que tienes que hacer es crear un nuevo repositorio en tu cuenta de GitHub:

Luego vuelve a tu terminal y ejecuta el siguiente comando:

npm install gh-pages --save-dev

Esto guardará GitHub Pages en las dependencias de tu proyecto. Si tienes problemas recuerda los flags --force y --legacy-peer-deps

Una vez que hayas hecho esto, si revisas el archivo package.json. Deberías encontrar gh-page instalado de forma segura bajo devDependencies:

  "devDependencies": {
    "gh-pages": "^4.0.0"
  }

Luego, debes seguir los siguientes 3 pasos:

1. Navega en el directorio de tu proyecto (harperdb-movie-generator) y selecciona el archivo package.json. En la parte superior de tu json con paquetes, agregarás la siguiente data (reemplazala con la tuya):

"homepage": https://{nombre de usuario GitHub}.github.io/{nombre del proyecto}.git

Para saber tu nombre de usuario y nombre de proyecto GitHub, navega al repositorio recientemente creado. En la parte superior podrás encontrar tu nombre de usuario y tu nombre de proyecto al lado. Copia ambos y llena la información en la plantilla antes mencionada.

La esencia de agregar el "homepage" es especificar el URL donde se alojará nuestra aplicación. Asegúrate de poner una coma al final, para que su package.json pueda ser analizado de forma correcta.

2. Ve al campo "scripts" dentro de `package.json` y agrega la siguiente información asegurandote de mantener la indentación de manera apropiada:

   "predeploy": "npm run build",
   "deploy": "gh-pages -d build"
   

   Esto es lo que ejecutarás cuando hagas un deploy a GitHub Pages.
3. Finalmente, revisarás si tu proyecto tiene inicializado Git con el comando git status en la terminal estando en la raíz del proyecto.
   En el caso que no retorne información del proyecto puedes iniciarlo en la terminal, estando en la raíz del proyecto, con el comando git init

Te falta enlazar tu proyecto con tu repositorio GitHub. Para hacer esto debes ejecutar los siguientes comandos:

git branch main
git remote add origin https://github.com/{nombre de usuario}/{nombre de proyecto}.git

.gitignore

importantísimo.

Debes modificar tu archivo .gitignore, para que no considere el archivo .env que contiene tus contraseñas al momento de hacer un commit. Para esto deberás escribir el nombre de tu archivo .env en .gitignore

Revisemos ahora el status de tu proyecto usando el comando git status en la Terminal situada en la raíz de tu proyecto.

En este caso podemos leer del comando que se ha modificado el archivo .gitignore, y que para agregarlo debemos usar el comando git add <nombre_archivo>, en nuestro caso sería

git add .gitignore

Esto preparará el proyecto para que tus próximos commit no tengan el archivo .env en ellos.

Ahora está todo configurado!

La única cosa que queda por hacer, es el Deploy de la app a GitHub Pages. Para hacer esto debes ejecutar el siguiente comando:

npm run deploy

y Voalá!, tu aplicación hará un deploy automático a GitHub Page

Como ver tu aplicación en internet

Ahora tu aplicación está en internet, pero tienes que ver como es.  Para esto debes obtener su URL.

Ve a tu perfil GitHub y haz clic en la pestaña repositorio. Selecciona tu repositorio, ve a la página configuración, y baja un poco. Encontrarás la sección GitHub Pages en la sección izquierda.

Dentro de Pages, en la sección Source, cambia a la rama Branch: gh-pages y selecciona la ruta /root. Dentro de unos minutos tu aplicación estará publicadas. Copia la URL de la página y pegala en otra pestaña del navegador.

Y listo, ahora verás tu proyecto en vivo (clic acá).

En conclusión.

Construimos este proyecto usando React y HarperDB. HarperDB es una gran elección para que puedas manejar data y hacer operaciones Back-End.

No sólo es gratuita sino que también es muy fácil de integrar, como vimos en el tutorial.

No deberías parar acá. Puedes mejorar tus habilidades creando proyectos geniales con el mismo Stack. Gracias al plan gratuito de HarperDB no tienes que pagar nada.

Puedes tomar el código del proyecto desde éste repositorio GitHub, el repositorio original lo encuentras acá.

Puedes ponerte en contacto con el autor original a través de Twitter. Esto es todo, gracias por seguir el tutorial hasta acá, ten una semana genial!

¿Cuánto termina una función asíncrona? ¿ y porqué es una pregunta tan difícil de responder?

Resulta que para entender las funciones asincrónicas hay que tener una gran cantidad de conocimientos en JavaScript.

Vamos a explorar este concepto y aprendamos un montón de JavaScript en el proceso.

¿Estás listo?, ¡vamos!

¿Qué es el código asíncrono?

Por diseño, JavaScript es un lenguaje de programación sincrónico. Esto significa que, cuando el código es ejecutado, JavaScript comienza en la parte superior del archivo y ejecuta el código línea por línea hasta que termina.

El resultado de esta decisión de diseño es que sólo una cosa puede pasar en un determinado momento.

Puedes pensar en esto como si estuvieras haciendo malabares con seis pelotas pequeñas. Mientras estás haciendo malabares, tus manos están ocupadas y no puedes hacer nada más.

Es lo mismo con JavaScript: una vez que el código está corriendo, sus manos están llenas con ese código. Llamamos a este tipo de código "bloqueador". Porque está efectivamente bloqueando otro código de ser ejecutado.

Volvamos al ejemplo de los malabares. ¿Qué pasaría si quisieras agregar otra bola? En vez de seis bolas, quieres hacer malabares con siete. Esto podría ser un problema.

No quieres dejar de hacer malabares, porque estás pasándolo muy bien. Pero tampoco puedes ir a buscar otra pelota, porque significa que tendrías que parar.

¿La solución? Delegar el trabajo a un amigo o miembro de la familia. Ellos no están haciendo malabares por lo que pueden ir a buscar otra pelota para ti, y luego lanzarla justo en el momento en que tengas una mano libre para agregar una nueva pelota a los malabares.

Así son los códigos asíncronos. JavaScript está delegando el trabajo a otra cosa, y luego se encarga de sus asuntos. Luego, cuando esté listo, recibirá los resultados del trabajo.

¿Quién está haciendo el otro trabajo?

Bueno, sabemos que JavaScript es sincrónico y flojo. No quiere hacer todo el trabajo por si mismo, por lo que lo distribuye tareas a otra cosa.

¿Pero quién es esta misteriosa entidad que trabaja para JavaScript? ¿ Y como es contratado para trabajar para JavaScript?

Bueno, miremos un ejemplo de código asíncrono.

const logName = () => {
    console.log("Han")
}

setTimeout(logName,0)

console.log("Hola!!")

Al correr este código, aparece el siguiente resultado en la consola:

// En la consola
Hola!!
Han

Ok, ¿Qué está pasando?

Resulta que la forma en que trabajamos en JavaScript es usando funciones específicas del entorno y APIs, y es una fuente de gran confusión.

JavaScript siempre se ejecuta en un entorno.

A menudo este entorno es el navegador. Pero también puede ejecutarse en el servidor con NodeJS. Pero ¿Cuál es la diferencia?

La diferencia - y es importante - es que el navegador y el servidor (NodeJS), en cuanto a funcionalidad, no son equivalentes. A menudo son similares, pero no son lo mismo.

Ilustremos esto con un ejemplo. Digamos que JavaScript es el protagonista de un épico libro de fantasía. Solo un niño común de campo.

Ahora digamos que este niño campesino encontró dos armaduras especiales que le dan poderes por sobre su conocimiento.

Cuando usa la armadura "Navegador", obtiene acceso a un cierto conjunto de habilidades.

Cuando usa la armadura "Servidor", obtiene acceso a otro conjunto de habilidades.

Estos trajes tienen algunas superposiciones, porque los creadores de estos trajes tuvieron las mismas necesidades en determinados lugares, pero no en otros.

Esto es un entorno. Un lugar donde el código ejecuta, donde existen herramientas que están hechas sobre el lenguaje existente JavaScript. Estos no son parte del lenguaje, pero la línea divisoria es a menudo borrosa, porque utilizamos estas herramientas todos los días cuando escribimos código.

setTimeout, fetch y DOM son ejemplos de APIs Web (Puedes ver la lista completa de APIs Web aquí). Estas son herramientas que están construidas sobre el navegador, y están disponibles para nosotros cuando el código es ejecutado.

Y como siempre ejecutamos JavaScript en un entorno, pareciera que estas son parte del lenguaje, Pero no lo son.

Por lo que si alguna vez te preguntaste por qué puedes usar fetch en JavaScript cuando lo ejecutas en el navegador (pero necesitas instalar un paquete cuando lo ejecutas en NodeJS), este es el porqué. Alguien pensó que fetch era una buena idea, y creó una herramienta para el entorno NodeJS.

¿Confuso?, si!

Ahora finalmente podemos entender qué cosa hace el trabajo de JavaScript y como JavaScrip lo contrata para hacerlo.

Resulta que es el entorno el que hace el trabajo, y la forma en que el entorno hace el trabajo es usando las funcionalidades que pertenecen al entorno. Por ejemplo fetch o setTimeout en el entorno del navegador.

¿Qué le pasa al trabajo?

Excelente, así que el entorno hace el trabajo, ¿ y luego qué?

En algún punto necesitas obtener los resultados de vuelta. Pero pensemos sobre como esto funcionaría.

Volvamos al ejemplo de los malabares del principio. Imagina que pediste una nueva pelota, y un amigo comenzó a tirarte pelotas cuando no estabas listo.

Esto sería un desastre. Tal vez tuviste suerte de agarrarlas y meterlas en tu rutina de manera efectiva. Pero existe una gran probabilidad de que se te caigan las pelotas y arruine tu rutina. ¿No sería mejor si das instrucciones estrictas sobre cuando recibir el balón?

Resulta que existen reglas estrictas sobre cuando JavaScript puede recibir el trabajo delegado.

Estas reglas están gobernadas por el Event Loop e involucra la lista de micro y macro tareas. Si sé, es mucho. Pero tenme paciencia.

Ok, cuando delegamos código asincrónico al navegador, el navegador toma y ejecuta el código y se encarga de esa carga de trabajo. Pero tal vez hay muchas tareas que se dan al navegador, por lo que necesitamos asegurarnos de que podemos priorizar estas tareas.

Aquí es donde la lista de microtareas y macrotareas entran al juego. El navegador toma el trabajo, lo hace, y luego coloca el resultado en una de estas dos listas basado en el tipo de trabajo que recibe.

Las promises, por ejemplo, son colocadas en la lista de microtareas y tienen una prioridad mayor.

Eventos y setTimeout son ejemplos de trabajos que se colocan en la lista de macrotareas, y tienen menor prioridad.

Ahora, una vez que el trabajo está listo y es colocado en alguna de estas dos listas, el Event Loop ejecutará en ambas direcciones un chequeo para revisar si JavaScript está listo o no para recibir estos resultados.

Sólo cuando JavaScript terminó de ejecutar su código sincrónico, y está preparado, el Event Loop comenzará a tomar de las listas (microtareas y macrotareas) y devolverá las funciones para que JavaScript las ejecute.

Miremos un ejemplo:

setTimeout( () => console.log("Hola"),0)

fetch("https://algunAPI/data").then(response => response.json())
                              .then(data => console.log(data))

console.log("Que pasa?")

¿Cuál sería el orden acá?

1. Primeramente, setTimeout es delegado al navegador, el cual hace el trabajo y coloca el resultado de la función en la lista de macrotareas.
2. En segundo lugar, fecth es delegado al navegador, el cual toma el trabajo. Este recibe la data desde el endpoit y coloca las funciones resultantes en la lista de microtareas.
3. JavaScript pone en console "Que pasa?"
4. El Event Loop revisa si JavaScript está listo o no para recibir el resultado de las listas de tareas
5. Cuando el console.log está listo, JavaScript está listo. El Event Loop toma la función en la lista de microtareas, la cual tiene una mayor prioridad, y se la da a JavaScript para ejecutarla.
6. Después de que la lista de microtareas está vacía, el callback setTimeout es sacado de la lista de macrotareas y se pasa a JavaScript para ser ejecutado.

En la consola: 
// Que pasa?
// La data del API
// Hola

Promesas

Ahora deberías tener una buena cantidad de conocimiento acerca de cómo el código asíncrono es manejado por JavaScript en el entorno del Navegador. Así que hablemos de las promesas.

Una promesa es un constructo en JavaScript que representa un valor futuro desconocido. Conceptualmente una promesa es sólo JavaScript prometiendo retornar un valor. Este puede ser el resultado de la llamada a un API, o puede ser un objeto error de una solicitud de red fallida. Estás garantizado que recibirás algo.

const promise = new Promise((resolve, reject) => {
    // Hace una nueva solicitud de red
    if ( response.status === 200) {
        resolve(response.body)
    } else {
        const error = { ... }
        reject(error)
    }
})

promise.then(res => {
    console.log(res)
}).catch(err => {
    console.log(err)
})

Una promesa puede tener los siguientes estados:

• Cumplida (fulfilled) - acción completada satisfactoriamente
• Rechazada (rejected) - acción fallida
• Pendiente (pending) - ninguna de las acciones ha sido completada
• Establecida (settled) - ha sido cumplida o rechazada

Una promesa recibe una función resolve y una reject, que pueden ser llamadas para gatillar alguno de estos estados.

Uno de los puntos fuertes de las promesas es que podemos encadenar funciones que queremos que ocurran en el caso de éxito (resolve) o de falla (reject):

• Para registrar una función que se ejecute en caso de éxito usamos .then
• para registrar una función que se ejecute en caso de fallo usamos .catch

// Fetch retorna una promesa
fetch("https://swapi.dev/api/people/1")
    .then((res) => console.log("Esta función es retornada cuando la solicitud es exitosa",res))
    .catch(err => console.log("Esta función es retornada cuando la solicitud es fallida", err))
    
// Encadenando multiples funciones
fetch("https://swapi.dev/api/people/1")
    .then((res) => hazAlgoConElResultado(res))
    .then((resultadoFinal) => console.log(resultadoFinal))
    .catch((err => hazAlgoConElError(err) )

Perfecto!, ahora demos una mirada más cerca a como se ven las cosas bajo el capó usando fetch como ejemplo:

const fetch = (url , options) => {
    // simplificado
    return new Promise((resolve, reject) => {
    
    const xhr = new XMLHttpRequest()
    // ... hace una solicitud
    xhr.onload = () => {
        const options = {
            status: xhr.status,
            statusText: xhr.statusText
            ...
        }
        
        resolve(new Response(xhr.response, options))
    }
    
    xhr.onerror = () => {
        reject( new TypeError("Solicitud fallida"))
    }
}

fetch("https://swapi.dev/api/people/1")
    // registra handleResponse para ejecutar cuando la promesa se resuelve
    .then(handleResponse)
    .catch(handleError)
    
// conceptualmente la promesa se ve de esta manera ahora: 
// {status: "pending", casoExito: [handleResponse], casoFallo: [handleError]}
    
const handleResponse = (response) => {
    // handleResponse recibirá automáticamente la respuesta porque la promesa
    // resuelve con un valor y automáticamente la inyecta a la función
    console.log(response)
}

const handleError = (response) => {
    // handleError recibirá automáticamente el error porque la promesa 
    // resuelve con un valor y automáticamente la inyecta a la función
    console.log(response)
}

// la promesa resolverá o rechazará haciendo que ejecute todas las funciones 
// registradas en los arrays respectivos inyectando el valor.
// Inspeccionemos el recorrido:

// 1. el evento de escucha XHR se dispara.
// 2. Si la respuesta es exitosa, el evento de escucha onload se gatilla
// 3. onload dispara la función resolve(VALOR) con un valor dado
// 4. resolve gatilla y organiza las funciones registradas con .then 

Entonces, podemos usar promesas para hacer trabajo asíncrono, y para asegurarnos que podemos manejar cualquier resultado de esas promesas. Esta es la propuesta de valor. Si quieres saber más sobre las promesas puedes leer sobre ellas aquí y aquí

Cuando usamos promesas, encadenamos nuestras funciones a la promesa para manejar distintos escenarios.

Esto funciona, pero todavía tenemos que manejar nuestra lógica dentro de los callbacks (funciones anidadas) una vez que obtenemos nuestros resultados de vuelta). Qué tal si pudiéramos usar promesas pero escribir código que parezca sincrónico? resulta que podemos

Async/Await

Async/Await es una forma de escribir promesas que nos permite escribir código asincrónico, pero de manera sincrónica. Demos una mirada.

const obtenerData = async () => {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos/1")
    const data = await response.json()
   
   console.log(data)
}

obtenerData()

Aquí, nada ha cambiado bajo el capó. Seguimos usando promesas para obtener la data, pero ahora parece sincrónico, y ya no tiene los bloques .then y .catch.

Async/Await realmente es sólo azúcar sintáctica que provee una forma de crear código más fácil de razonar, sin cambiar la dinámica subyacente.

Miremos como trabaja.

Async/Await nos deja usar generadores para pausar la ejecución de una función. Cuando usas async/await no estas bloqueando porque la función está devolviendo el control al programa principal.

Luego cuando la promesa resuelve estamos usamos el generador para devolver el control a la función asincrónica con el valor de la promesa resuelta.

Puedes leer más acá para tener una excelente descripción general sobre generadores y código asincrónico.

En efecto, podemos ahora escribir código asíncrono como sin fuera sincrónico. Lo que significa que es más fácil razonarlo, y podemos usar herramientas sincrónicas para manejo de errores como try/catch:

const obtenerData = async () => {
    try {
        const respuesta = await fetch("https://jsonplaceholder.typicode.com/todos/1")
        const data = await respuesta.json()
        console.log(data)
    } catch (err) {
        console.log(err)
    }
}

obtenerData()

Ok, ¿Ahora como lo usamos? Para usar async/await debemos anteponer la función async. Esto no la convierte en una función asíncrona, simplemente nos deja usar await dentro de ella.

Si no se usa la palabra clave async tendremos un error sintáctico (syntax error) cuando tratemos de usarla dentro de una función regular.

const obtenerData = async() => {
    console.log("Ahora podemos usar await en esta función")
}

Es por esto que no podemos usar async/await en código de alto nivel. Pero async/await siguen siendo sólo azúcar sintáctica sobre promesas. Así podemos manejar casos de alto nivel con encadenamiento de promesas:

async function obtenerData() {
    let respuesta = await fetch('https://apiurl.com');
}

// obtenerData es una promesa
obtenerData().then(res => console.log(res)).catch(err => console.log(err);

Esto muestra otro aspecto interesante acerca de async/await. Cuando definimos una función como async, esta siempre retorna una promesa.

Usar async/await puede parecer magia en un comienzo. Pero como cualquier magia, es sólo tecnología lo suficientemente avanzada que ha evolucionado a través de los años. Esperemos que ahora tengas un comprensión sólida de los fundamentos, y puedas usar async/await con confianza.

Conclusión

Si llegaste hasta acá, felicidades!. Recién agregaste una pieza muy importante sobre JavaScript y como este funciona con su entorno a tu caja de herramientas.

Este definitivamente es un tema confuso, y las líneas no son siempre claras. Pero espero que ahora tengas una idea de como JavaScript funciona con código asíncrono en el navegador, y un entendimiento más fuerte sobre promesas y async/await.

Si disfrutaste este artículo, talvez disfrutes también el canal de youtube del autor (inglés). Actualmente tiene una serie sobre fundamentos web, donde revisa aspectos como HTTP, construcción de servidores web desde cero y mas.

Gracias por leer!

Los eventos de teclado te ayudan a capturar las interacciones del usuario con el teclado.

Como muchos otros eventos en JavaScript, la interface KeyboardEvent provee todas las propiedades y métodos requeridas para manejar cada pulsión de tecla que el usuario haga en el teclado.

Ha habido muchos artículos escritos acerca de como funcionan y como usarlos. Al mismo tiempo, W3.org se mantiene actualizando las especificaciones, introduciendo nuevas propiedades, y dejando obsoletas algunas existentes, y etiquetando cierto código como antiguo.

Producto de esto, es esencial para el desarrollador web mantenerse aprendiendo sobre la interface KeyboardEvent para saber exactamente qué usar y qué dejó de ser relevante.

En este artículo aprenderás sobre:

• La interface KeyboardEvent.
• Los tipos de eventos de teclado (keyboard event types) en los que necesitamos enfocarnos.
• Los tipos de eventos de teclado que tal vez nunca necesitemos.
• Qué propiedades necesitas en la práctica y cómo los diferentes navegadores las manejan.
• Qué está obsoleto, y qué está en uso.
• Un lugar para probar esto mientras aprendemos
• Finalmente, la lista actual de key codes para referencia y uso futuro.

Espero que lo disfrutes.

La interfaz KeyboardEvent y los tipos de eventos

La interfaz KeyboardEvent provee información usando las constantes, propiedades y un único método definidos (a partir de enero de 2021). Esta extiende la interfaz UIEvent la cual eventualmente extiende la interfaz Event.

Hay principalmente tres tipos de eventos de teclado: keydown, keypress y keyup. Podemos obtener información contextual de estos eventos de las propiedades y métodos de la interfaz KeyboardEvent.

Puedes agregar cada uno de estos tipos de eventos a un elemento HTML o document object usando el método addEventListener. Aquí hay un ejemplo de escucha a un evento keydown en un elemento cuyo id es "escribe-aqui":

let elem = document.getElementById('escribe-aqui');

elem.addEventListener("keydown", function (event) {
    // El parámetro del evento es del tipo KeyboardEvent
  	addRow(event);
});

De forma alternativa, puedes usar métodos de manipulación como onKeydown(event), onKeyup(event), onKeyPress(event) con el elemento para manejar eventos de teclado. Aquí hay un ejemplo de manejo de un evento keyup a un elemento input:

<input type="text" id="escribe-aqui" onkeyup="hazAlgo(event)">

Si imprimes el objeto event en la consola del navegador, verás todas sus propiedades y métodos junto con los que hereda de las interfaces UIEvent y Event.

Prueba este juego evento de teclado interactivo

Antes de avanzar, ¿qué te parece un juego para explorar los eventos de teclado, sus propiedades, características y más? Creo que sería increíble usarlo junto con este artículo y más allá.

Si tienes problemas para acceder al juego de arriba, puedes acceder a la herramienta directamente aquí: https://mauriciotrp.github.io/KeyboardEvents/

y puedes acceder al código fuente del demo aquí:
https://github.com/MauricioTRP/KeyboardEvents

keydown, keypress, keyup - ¿Cuál debería usar?

Los eventos de teclado son:

• keydown: este se dispara cuando una tecla es presionada.
• keypress: esta sólo se dispara cuando una tecla que produce un valor de caracter es presionada. Por ejemplo, si aprietas la tecla a, este evento se disparará cuando la tecla aproduzca el valor de caracter 97. Por otra parte, este evento no se disparará cuando aprietes la tecla Shift ya que esta no produce un valor de caracter.
• keyup: este se dispara cuando una tecla es "liberada"

Si estos tres eventos se adjuntan a un elemento del DOM, el orden de ejecución sería:

1. Primero, keydown
2. Luego, keypress (con la condición declarada arriba)
3. Último, keyup

Entre estos eventos, el más usado (o debería ser) es keydown porque:

• El evento keydown tiene la covertura más amplia de teclas que producen información contextual. El evento keypress funciona sólo con un subconjunto de teclas. No puedes capturar Alt, Ctrl, Meta y otros eventos de teclas similares con keypress. Esto también significa que no puedes disparar el evento keypress con combinaciones de teclas como Ctrl Z, Shift Tab y así.
• Más aún, el evento keypress ha quedado obsoleto. Esta es una razón lo suficientemente fuerte para evitarlo.
• Mientras que keydown y keyup son eventos que cubren todas las teclas y están bien soportados por la mayoría de los navegadores, hay algunas diferencias que hacen preferir keydown sobre keyup. Los eventos keydown se disparan después que el navegador procesa la tecla. Si tu cancelas un evento keydown (por ejemplo usando event.preventDefault()), la acción del navegador será cancelada también. En el caso del evento keyup, la acción del navegador no será cancelada cuando hayas cancelado el evento.

En el ejemplo de abajo, estamos usando event.preventDefault()cuando un evento keydown o keyup se dispara. La acción del navegador de escribir el caracter de la tecla no será realizado en el caso de keydown pero si ocurrirá en el caso de keyup.

Con toda esa explicación el evento keydown es el ganador indiscutiro y debería convertirse en el tipo de evento más popular (usado)

Como usar las propiedades del KeyboardEvent en la práctica

¡Esta es la pregunta del billón de dólares! La respuesta corta es "depende", pero ¿de qué? Depende de:

• Que el navegador soporte tu aplicación
• Cuan antigua es el código de tu aplicación, y cuanto estás dispuesto a refactorizar?

Pero antes que lleguemos ahí, veamos un adelanto de algunas propiedades y metodos útiles del interface KeyboardEvent

Las últimas tres propiedades han quedado obsoletas y deberías usar la propiedad key en su lugar. La propiedad key es la que tiene mayor soporte de navegadores.

Está soportada en:

• Microsoft Edge: Versión >=79
• Firefox: Versión >=29
• Google Chrome: Versión >=51
• Safari: Versión >=10.1

Entonces, mientras no uses ninguno de los navegadores más antiguos, la propiedad event.key debería ser suficiente para que puedas identificar una tecla. En el caso que tengas que dar soporte a navegadores más antiguos, una mejor alternativa sería la propiedad event.which

window.addEventListener("keydown", function(event) {

    if(event.key !== undefined) {
        // Manipula el evento con KeyboardEvent.key
    } else if (event.wich !== undefined) {
        // Manipula el evento con KeyboardEvent.wich
    }
});

Si tu código usa cualquiera de estas propiedades obsoletas y tienes la oportunidad de refactorizar este código, lo mejor es hacerlo.

Teclas Modificadoras

Las teclas modificadoras son las teclas especiales en tu teclado que modifican el comportamiento por defecto de las otras teclas. Control, Shift, y Alt son algunas modificadoras. Cuando una tecla modificadora es combinada con otra tecla, puedes esperar que una acción distinta ocurra.

Por ejemplo, si tu aprietas la tecla z, se supone que retorna el código o la letra z. Pero si la combinas con la modificadora Control y presionas Ctrl+z, lo más probable es que tengas la operación deshacer. Veámoslo con más ejemplos en la próxima sección

Las propiedades, event.altKey, event.ctrlKey, event.shiftKey y así. Ayudan a detectar si una tecla modificadora ha sido presionada.

Combinación de teclas

Podemos combinar múltiples teclas y realizar acciones basandonos en las combinaciones. El code snippet de más abajo muestra como combinar la tecla Ctrl y Z para definir una acción:

document
    .getElementById("to_focus")
    .addEventListener("keydown", function(event) {
    	if(event.ctrlKey && event.key === "z"){
    		// Hacer algo, tal vez deshacer
    	}
    }
});

Aquí hay otro ejemplo que demuestra algo más sobre combinación de teclas:

Una lista completa de los valores de eventos de teclas.

La tabla de más abajo muestra una lista de teclas con los valores de event.which, event.key y event.code

Debes tener en cuenta:

• event.which ha quedado obsoleta
• El valor de event.code es el mismo para letras minúsculas (a) y mayúsculas (A). El valor de event.key representa la letra real.
• El valor de event.which es diferente en Firefox (FF) y otros navegadores para las teclas igual(=), punto y coma(;) y guión/menos(-)

En resumen

Para resumir:

• Puedes usar KeyboardEvent para capturar las interacciones del usuario usando el teclado.
• Hay primariamente tres eventos de teclado keydown, keypress y keyup.
• Deberíamos usar el evento keydown tanto como sea posible, ya que satisface la mayoría de los casos de uso.
• La propiedad event.which ha quedado obsoleta. Usa event.key cuando sea posible.
• Si tienes que dar soporte a navegadores antiguos, usa las alternativas apropiadas para la detección de teclas.
• Podemos combinar múltiples teclas y realizar operaciones.
• Los teclados virtuales soportan estos eventos siempre y cuando el layout y funciones sean similares al teclado estandar.

Eso es todo por ahora. ¡Gracias por leer hasta aquí! Conectémonos. Puedes @ me en Twitter (@tapasadhikary) con comentarios o siéntete libre de seguirme.

Introducción

Este es un tutorial sobre como escribir código en hojas de cálculos Excel usando Visual Basic para Aplicaciones (VBA).

Excel es uno de los productos más populares de Microsoft. En 2016, el CEO de Microsoft dijo "Piensa en un mundo sin Excel. Eso es simplemente algo imposible para mí". Bueno, tal vez el mundo no pueda pensar sin Excel.

• En 1996, había sobre 30 millones de usuarios de Microsoft Excel (fuente).
• Hoy en día, hay un estimado de 750 millones de usuarios de Microsoft Excel. Eso es un poco más que la población de Europa y 25 veces más usuarios que los que había en 1996.

¡Somos una gran familia feliz!

En este tutorial aprenderás acerca de VBA y como escribir código en una hoja de cálculo Excel usando Visual Basic

Prerrequisitos

No necesitas experiencia previa programando para entender este tutorial. Sin embargo, necesitarás:

• Familiaridad básica a intermedia con Microsoft Excel
• Si quieres seguir los ejemplos de este artículo, necesitarás acceso a Microsoft Excel, preferentemente la última versión (2019) pero Excel 2016 y Excel 2013 funcionarán bien.
• Voluntad para probar nuevas cosas.

Objetivos de aprendizaje

a lo largo de este artículo aprenderás:

1. Qué es VBA
2. Porqué deberías usar VBA
3. Como configurar Excel para escribir VBA
4. Como resolver problemas reales con VBA

Conceptos Importantes

Aquí hay algunos conceptos importantes con los que deberías estar familiarizado para entender completamente este tutorial.

Objetos: Excel es orientado a objetos, lo que significa que todo es un objeto - la ventana de excel, el libro de trabajo, una hoja, un gráfico, una celda. VBA permite a los usuarios manipular y realizar acciones con los objetos en Excel.

Si no tienes experiencia con programación orientada a objetos y es un concepto completamente nuevo, tomate un segundo para dejar que asiente.

Procedimientos: un procedimiento es una porción de código VBA escrito en el editor Visual Basic que realiza una tarea, esto también se conoce como una macro (más sobre macros a continuación). Existen dos tipos de procedimientos:

• Subrutinas: un grupo de declaraciones VBA que realizan una o más acciones.
• Funciones: un grupo de declaraciones VBA que realizan una o más acciones y retornan uno o más valores

Nota: puedes tener funciones operando dentro de subrutinas. Lo verás más adelante.

Macros: Si has pasado algún tiempo aprendiendo funcionalidades más avanzadas de Excel, probablemente encontraste el concepto de "macro". Los usuarios de Excel pueden grabar macros, consistentes en comandos/pulsiones de teclas/clics, que luego se vuelven a ejecutar a la velocidad de la luz para realizar tareas repetitivas. Las macros grabadas generan código VBA, el cual podrás examinar. De hecho, es divertido grabar una macro simple y luego mirar el código VBA.

Por favor ten en cuenta que algunas veces será más sencillo y rápido grabar una macro que escribir a mano un procedimiento VBA.

Por ejemplo, tal vez trabajas en administración de proyectos. Una vez a la semana, tendrás que convertir un reporte sin formato exportado de tu sistema de gestión de proyectos en un reporte limpio y bellamente formateado para liderazgo. Necesitarás formatear los nombres de proyectos que están sobre el presupuesto en texto "negrita" y color rojo. Podrías grabar los cambios de formato como una macro y luego ejecutarla cada vez que necesites realizar un cambio.

¿Qué es VBA?

Visual Basic for Applications es un lenguaje de programación desarrollado por Microsoft. Cada programa de software en la suite Microsoft Office viene con el lenguaje VBA sin costo extra. VBA permite a los usuarios de Office crear pequeños programas que operan dentro del software Microsoft Office.

Piensa en VBA como un horno de pizza dentro de un restaurante. Excel es el restaurante. La cocina viene con electrodomésticos comerciales estandarizados, como refrigeradores grandes, estufas y viejos hornos regulares - estas son todas las características estándar de Excel.

Pero, ¿Qué pasa si quieres hacer pizza con leña? No podremos hacerlo en un horno comercial estándar. VBA es el horno de pizza.

Ñam!.

¿Por qué usar VBA en Excel?

¡Porque la pizza cocinada con leña es la mejor!

Pero en serio.

Mucha gente usa mucho tiempo en Excel como parte de sus trabajos. El tiempo en Excel se mueve diferente también. Dependiendo de las circunstancias, 10 minutos en Excel pueden parecer una eternidad si no eres capaz de hacer lo que necesitas, o 10 horas pueden pasar muy rápido si todo va muy rápido y bien. Es entonces cuando debes preguntarte, ¿por qué diablos estoy pasando 10 horas en Excel?

A veces, estos días son inevitables. Pero, si estás pasando 8-10 horas cada día en Excel haciendo tareas repetitivas, repitiendo mucho de los mismos procesos, tratando de limpiar después que otra persona use el archivo, o incluso actualizando otros archivos después de cambios realizados al archivo Excel, un procedimiento VBA podría ser la solución precisa para ti.

Deberías considerar usar VBA si necesitas:

• Automatizar tareas repetitivas
• Crear maneras fáciles para que los usuarios interactúen con tus hojas
• Manipular grandes cantidades de datos

Configurando el entorno para escribir VBA en Excel

Ficha desarrollador

Para escribir VBA, necesitas agregar la ficha Desarrollador a la Cinta de Opciones, así verás la Cinta de Opciones de la siguiente forma

Para agregar la ficha Desarrollador a la Cinta debes:

1. En la ficha archivo, ir a Opciones > Personalizar Cinta de Opciones.
2. Bajo "Personalizar Cinta de Opciones" y bajo "Pestañas principales", selecciona el check box Desarrollador

Después de mostrar la pestaña, la pestaña Desarrollador permanecerá visible, a menos que hallas limpiado la casilla de verificación o tengas que reinstalar Excel. Para más información, mira la documentación de ayuda Microsoft

Editor VBA

Navega a la pestaña Desarrollador, y luego haz clic en el botón Visual Basic. Una nueva ventana aparecerá - este es el editor Visual Basic. Para los propósitos de este tutorial, solo debes estar familiarizado con el panel Explorador de Proyecto y el panel Propiedades del Proyecto

Ejemplos de Excel VBA

Primero, creemos un archivo para jugar.

1. Abre un nuevo archivo de Excel
2. Grabalo como un libro habilitado para macros (maro-enabled workbook) (.xlsm)
3. Selecciona la ficha Desarrollador
4. Abre el editor VBA

Vamos a rock and roll con algunos ejemplos sencillos para que escribas código en una hoja de cálculo usando Visual Basic.

Ejemplo #1: Mostrar un mensaje cuando los usuarios abran el libro de Excel.

En el editor VBA, elige insertar -> Nuevo Módulo

Escribe este código en la ventana Módulo (no lo pegues!):

Sub Auto_open()
MsgBox("Bienvenido al libro de trabajo XYZ.")
End Sub

charaan!

¿Cómo hace esto?

Dependiendo de cuan familiarizado estés con la programación, tal vez intuyes algunas cosas. No es particularmente complejo, pero están pasando muchas cosas:

• Sub (abreviación de "Subrutina"): recuerda de lo antes descrito, "un grupo de declaraciones VBA que realizan una o más acciones".
• Auto_Open: esta es la subrutina específica. Esta ejecutará automáticamente tu cógigo cuando el archivo excel se abre - este es el evento que gatilla el procedimiento. Auto_Open sólo se ejecutará cuando el libro de trabajo se abre manualmente; y no se ejecutará si el libro de trabajo es abierto vía código desde otro libro de trabajo (Workbook_Open hará esto, aprende más sobre las diferencias entre estos dos)
• Por defecto, el acceso a una subrutina es público. Esto significa que cualquier otro módulo puede usar esta subrutina. Todos los ejemplos de este tutorial serán subrutinas públicas. Si lo necesitas, puedes declarar subrutinas de forma privada. Esto puede ser necesario en algunas ocasiones. Aprende más sobre modificadores de acceso a subrutinas
• MsgBox: esta es una función - un grupo de declaraciones que realiza una o más acciones y retorna un valor. El valor retornado es el mensaje "Bienvenido al libro de trabajo XYZ"

En resumen, esta es una subrutina simple que contiene una función

¿Cuándo podría usar esto?

Tal vez tienes un archivo muy importante, el cual tiene acceso de manera poco frecuente (digamos, una vez cada cuatrimestre), pero que es actualizado automáticamente por otro procedimiento VBA. Cuando se accede a este, es por muchas personas, en múltiples departamentos, alrededor de toda la compañía.

• Problema: La mayoría del tiempo cuando los usuarios acceden al archivo, ellos están confundidos respecto al propósito de este archivo (porqué existe), como es actualizado tan frecuentemente, quien lo mantiene, y cómo deberían interactuar con él. Los recién contratados siempre tienen un montón de preguntas, y tu tienes que contestar estas preguntas una y otra vez.
• Solución: Crear un mensaje a los usuarios que contenga respuestas específicas a cada una de estas preguntas frecuentes.

Ejemplos del Mundo Real

• Usar la función MsgBox para mostrar un mensaje cuando haya algún evento: el usuario cierra el libro de trabajo, el usuario imprime, una nueva hoja es agregada al libro de trabajo, etc.
• Usar la función MsgBox para mostar un mensaje cuando el usuario necesite llenar una condición antes de cerrar el libro de trabajo Excel
• Usar la función InputBox para obtener información del usuario

Ejemplo #2: Permitir al usuario ejecutar otro procedimiento

En el editor VBA selecciona Insertar -> Nuevo Módulo

Escribe este código en la ventana Módulo (no lo pegues!):

Sub UserReportQuery()
Dim UserInput As Long
Dim Answer As Integer
UserInput = vbYesNo
Answer = MsgBox("¿Desea procesar el reporte XYZ?",UserInput)
if Answer = vbYes Then ProcessReport
End Sub

Sub ProcessReport()
MsgBox("Gracias por procesar el reporte XYZ")
End Sub

Grábalo y navega de vuelta a la pestaña navegadora de Excel y selecciona la opción "Botón". Haz clic en una celda y asigna la macro UserReportQuery al botón.

Ahora haz clic en el botón. Este mensaje debería aparecer

Si haces clic en "Sí" o aprietas Enter.

¡¡Otra vez, tada!!

Pon atención a la subrutina secundaria "ProcessReport", podría ser cualquier cosa. Lo demostraré con más posibilidades en el ejemplo #3. Pero primero...

¿Cómo está haciendo esto?

Este ejemplo está construido sobre el ejemplo anterior con algunos elementos nuevos. Revisemos las cosas nuevas:

• Dim UserInput As Long: Dim es un diminutivo de "dimensión" y te permite declarar nombres de variables. En este caso, UserInput es el nombre de variable y Long es el tipo de dato. En español esta línea significa "Aquí hay una variable llamada "UserInput", y es de tipo Largo".
• Dim Answer as Integer: declara otra variable llamada "Answer", con el tipo de dato entero (integer). Aprende más sobre el tipo de datos aquí
• UserInput = vbYesNo: asigna un valor a la variable. En este caso, vbYesNo, el cual muestra los botones Sí y No. Hay muchos tipos de botones, aprende más sobre ellos aquí
• Answer = MsgBox("¿Desea procesar el reporte XYZ?", UserInput): asigna a la variable Answer la función MsgBox y la variable UserInput. Si, una variable dentro de una variable.
• If Answer = vbYes Then ProcessReport: esto es una "declaración if" una declaración condicional, la cual te permite decir si x es verdad, entonces hacer y. En este caso, si el usuario ha seleccionado "Sí", entonces ejecutar la subrutina ProcessReport.

¿Cuándo puedo usar esto?

Esto se puede usar de muchas, muchas maneras. El valor y versatilidad de esta funcionalidad está más definido por lo que hace la subrutina secundaria.

Por ejemplo, tal vez tienes un archivo que es usado para generar tres reportes semanales. Estos reportes están formateados de manera muy distinta.

• Problema: Cada vez que es necesario generar un reporte, un usuario abre el archivo y cambia los formatos y lo gráficos, así con cada usuario. Este archivo está siendo editado exhaustivamente a lo menos 3 veces a la semana, y toma a lo menos 30 minutos cada vez que es editado.
• Solución: Crear un botón por tipo de reporte, el cual automáticamente reformatea los componentes necesarios de los reportes y genera los gráficos necesarios.

Ejemplos del Mundo Real

• Crear un cuadro de dialogo para que un usuario pueda poblar una información determinada a través de múltiples hojas.
• Usar la función InputBox para obtener información del usuario, la cual luego será utilizada para poblar múltiples hojas

Ejemplo #3: Agregar números a un rango con un ciclo For-Next

Los ciclos for son muy útiles si necesitas realizar tareas repetitivas en un rango específico de valores, arreglos o rangos de celdas. En español, un ciclo dice "para cada x, haz y" ("for each x, doy" - en inglés)

En el editor VBA, seleccione Insertar -> Nuevo Módulo

Escribe el siguiente código en la ventana módulo (no lo pegues!!):

Sub LoopExample()
Dim X As Integer
For X = 1 to 100
Range("A"&X).Value = X
Next X
End Sub

Guarda y luego navega de vuelta a la pestaña desarrollador de Excel, agrega un botón macro. Corre la macro LoopExample.

Esto debería pasar:

Hasta llegar a la fila 100-ésima.

¿Cómo hace esto?

• Dim X As Integer: declara la variable X como un dato de tipo entero
• For X=1 To 100: este es el comienzo del ciclo For. En palabras simples, le dice al ciclo repite esto hasta que X = 100. X es el contador. El ciclo se seguirá ejecutando hasta X = 100, ejecuta una última vez y luego se detiene.
• Range("A"&X).Value = X: esto declara el rango del ciclo y qué poner en ese rango. Desde X = 1 inicialmente, la primera celda será A1, en cuyo lugar el ciclo pondrá X en esa celda.
• Next X: le dice al ciclo que se ejecute otra vez.

¿Cuándo puedo usar esto?

El ciclo For-Next es una de las funcionalidades más poderosas de VBA; existen muchos casos de uso potenciales. Este e un ejemplo más complejo que requerirá múltiples capas de lógica, pero comunica un mundo de posibilidades en los ciclos For-Next.

Tal vez tienes una lista de todos los productos vendidos en tu pastelería en la Columna A, el tipo de producto en la Columna B (queques, donas o muffins), el costo de los ingredientes en la Columna C, y el precio promedio de mercado de cada tipo de producto en otra hoja.

Necesitas saber cuál debería ser el precio de venta de cada producto. Piensas que debería ser el costo de los ingredientes más un 20%, pero también 1.2% bajo el precio promedio de mercado en caso de ser posible. Un ciclo For-Next podrían permitirte hacer este tipo de cálculos.

Ejemplos del Mundo Real

• Usa un ciclo con una declaración if anidada para agregar valores específicos a un arreglo separado sólo si se cumplen ciertas condiciones
• Realizar cálculos matematicos en cada valor de un rango, i.e. calcular cargos adicionales y agregarlos al valor
• iterar sobre cada caracter en un texto (string) y extraer todos los números
• Elegir aleatoriamente números de valores en un array

Conclusión

Ahora que hemos hablado acerca de pizza y mufins y claro, como escribir código VBA en hojas de Excel, hagamos un chequeo del aprendizaje. Revisa si puedes responder estas preguntas.

• ¿Qué es VBA?
• ¿Como configurar el enterno para comenzar a usar VBA en Excel?
• ¿Como y cuando debes usar VBA?
• ¿Cuales son algunos problemas que puedes resolver con VBA?

Si tienes una idea clara de cómo responder estas preguntas, entonces esto fue un éxito.

Ya sea que eres un usuario ocasional o un usuario avanzado, espero que este tutorial provea información útil acerca de lo que podemos conseguir con un poco de código en tus hojas de Excel.

¡Feliz código!

Recursos de aprendizaje

• Excel VBA Programming for Dummies, John Walkenbach
• Introducción a VBA en Office
• Learning VBA in Excel, Lynda

Un poco de la autora original

Chloe Tucker, artísta y desarrolladora en Portland, Oregon. Como educadora, estoy continuamente buscando la intersección entre aprender y enseñar, o entre tecnología y arte. Me puedes encontrar en Twitter @_chloetucker y revisar mi sitio web chloe.dev