Delegación de eventos es un patrón basado en el concepto de Propagación de eventos (Event Bubbling). Es un patrón de manejo de eventos que permite gestionar eventos en un nivel superior del árbol del DOM, en lugar de hacerlo directamente en el nivel donde el evento fue inicialmente recibido.

Hay una versión en video de este tema si tú lo prefieres.

Una breve introducción a propagación de eventos.

Por defecto, los eventos desencadenados en un elemento se propagan hacia arriba en el árbol del DOM hasta el elemento padre, sus ancestros, y finalmente hasta el elemento raíz (html).

Mira este ejemplo.

<div>
  <span>
    <button>Click Me!</button>
  </span>
</div>

Aquí tenemos un, div el cual es padre de un, span quien a su vez es padre del elemento button.

Debido a la propagación de eventos, cuando el botón recibe un evento, por ejemplo un clic, el evento se propaga hacia arriba en el árbol del DOM,  por lo que el span y el div también recibirán el evento respectivamente.

Si quieres aprender acerca de propagación de eventos más a detalle, puedes  leer un artículo sobre esto aquí .

¿Cómo funciona la delegación de eventos?

Con la delegación de eventos, en lugar de manejar el evento en el button puedes manejarlo en el div.

La idea es "delegar" el manejo de un evento a un elemento diferente (en este caso, el div, que es el elemento padre) en lugar del elemento actual (el botón) que recibió el evento.

Aquí tienes un ejemplo en código de lo que quiero decir:

const div = document.getElementsByTagName("div")[0]

div.addEventListener("click", (event) => {
  if(event.target.tagName === 'BUTTON') {
    console.log("button was clicked")
  }
})

El objeto event tiene una propiedad target que contiene información  sobre el elemento que realmente recibió el evento. Con target.element  obtenemos el nombre de la etiqueta del elemento y verificar si es BUTTON.

Con este código, cuando haces clic en el button , el evento se propaga hacia arriba hasta el div el cual maneja el evento.

Beneficios de la delegación de eventos.

La delegación de eventos es un patrón útil que te permite escribir código más limpio y reducir la cantidad de event listeners (escuchadores de eventos), especialmente cuando comparten una lógica similar.

¿A qué me refiero con esto? Mira este código:

<div>
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
</div>

Aquí tenemos 3 botones. Supongamos que queremos manejar un evento clic en cada botón, de manera que, al hacer clic, el texto del botón se registre en la consola. Podemos implementarlo de la siguiente manera:

const buttons = document.querySelectorAll('button')

buttons.forEach(button => {
  button.addEventListener("click", (event) => {
    console.log(event.target.innerText)
  })
})

Usamos querySelectorAll aquí porque devuelve  un NodeList, el cual permite usar el método forEach. Por otro lado,  getElementByTagName devuelve una, HTMLCollection el cual no tiene el método forEach, por lo que no se podría iterar de la misma manera.

Cuando haces clic en el primer botón, se registra "Button 1" en la consola. Para el segundo botón, se registra "Button 2",  y para el tercer botón, se registra "Button 3".

Aunque esto funciona como esperamos, hemos definido  tres event listeners, uno para cada botón.

Dado que el evento clic en estos botones se propaga hacia arriba en el árbol del DOM, podemos usar un elemento padre ó ancestro común para manejar el evento. En este caso, delegamos la lógica a un elemento ancestro compartido, encargándose de gestionar el evento para todos los botones.

A continuación, te explicamos cómo:

const div = document.querySelector('div')

div.addEventListener("click", (event) => {
  if(event.target.tagName === 'BUTTON') {
    console.log(event.target.innerText)
  }
})

Ahora, tenemos solo un event listener, pero la misma lógica: cuando haces clic en el primer botón, "Button 1" se registra en la consola, y lo mismo ocurre para los demás botones.

Incluso si agregamos un botón adicional como este:

<div>
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
  <button>Button 4</button>
</div>

No tendremos que modificar el código JavaScript porque el nuevo botón  también comparte el div padre (el cual delegamos para manjera los eventos) con los otros botones.

Conclusión

Con la delegación de eventos, reduces la cantidad de event listeners y centralizas la lógica basada en eventos en solo lugar. Esto facilita agregar y remover elementos sin necesidad de agregar o remover manualmente event listeners existentes.

Delegación de eventos es posible, gracias la propagación de eventos en el DOM, donde el evento que recibe un elemento hijo también se transmite a su elemento, padre y ancestros. Nuevamente, puedes leer más acerca de propagación de evento aquí.

¡Gracias por leer, y happy coding!

Por lo que en este artículo, vamos a ver cómo hacerlo en React.

Aprenderás a:

• Cómo usar una casilla de verificación como Input Controlado en React,
• Cómo usar los métodos de arreglo "map" y "reduce" para cálculos complejos,
• Cómo crear un arreglo de un largo específico y con valores pre cargados,

y mucho más.

Este artículo es parte de mi curso Mastering Redux. Aquí tienes un adelanto de la aplicación que vamos a crear en el curso.

Así que empecemos.

Cómo trabajar con una sola casilla de verificación

Antes de aprender a trabajar con varias casillas, empezaremos programando solo uno.

En este artículo, para crear componentes voy a estar usando la sintaxis de React Hooks. Si no estás familiarizado con esta sintaxis, puedes darle un vistazo a mi artículo [en inglés] Introduction to React Hooks.

Mira el siguiente código:

<div className="App">
  Select your pizza topping:
  <div className="topping">
    <input type="checkbox" id="topping" name="topping" value="Paneer" />Paneer
  </div>
</div>

Aquí tienes la demo.

En el código de arriba, declaramos una única casilla.

Como se muestra abajo, podemos seleccionar y de seleccionarlo de manera muy fácil:

Pero para mostrar en pantalla si está seleccionado o no, tenemos que convertirlo a un Input Controlado.

En React, los Inputs Controlados se manejan mediante el estado, por lo que solamente podemos cambiar el  valor del input cambiando su estado.

Mira el siguiente código:

export default function App() {
  const [isChecked, setIsChecked] = useState(false);

  const handleOnChange = () => {
    setIsChecked(!isChecked);
  };

  return (
    <div className="App">
      Select your pizza topping:
      <div className="topping">
        <input
          type="checkbox"
          id="topping"
          name="topping"
          value="Paneer"
          checked={isChecked}
          onChange={handleOnChange}
        />
        Paneer
      </div>
      <div className="result">
        Above checkbox is {isChecked ? "checked" : "un-checked"}.
      </div>
    </div>
  );
}

y aquí tienes la demo

En el código de arriba, con el hook useState  declaramos el estado isChecked del componente, con el valor inicial false:

const [isChecked, setIsChecked] = useState(false);

Después, a la casilla de verificación le damos dos props adicionales, checked y onChange, de la siguiente manera:

<input
  ...
  checked={isChecked}
  onChange={handleOnChange}
/>

Cuando hagamos clic en la casilla de verificación, la función handleOnChange será la encargada de cambiar el valor del estado isChecked

const handleOnChange = () => {
  setIsChecked(!isChecked);
};

Entonces, si la casilla está seleccionado, el valor de isChecked es false. Pero si no lo está, el valor estrue al usar !isChecked.

De esta manea la casilla se convierte en un input controlado, cuyo valor es manejado mediante el estado del componente.

Hay que tener en cuenta que en React siempre se recomienda usar inputs controlados para los campos de inputs, aun si el código luce complicado. Esto garantiza que el cambio del input solo ocurra dentro de la función onChange.

El estado de un input no podrá ser cambiado de otra forma y así siempre tendrás el valor correcto y actual del estado del input.

Solo en raras ocasiones se puede usar React ref para poder manejar el input de manera no controlada.

Cómo manipular múltiples casillas de verificación

Veamos ahora como trabajar con varias casillas.

Mira esta demo

Aquí estamos mostrando una lista de aderezos y sus precios. Dependiendo cuantos aderezos sean seleccionados, necesitamos mostrar el monto total.

Antes, cuando teníamos un solo casilla de verificación, solo teníamos el estado isChecked para cambiar el estado de la casilla de verificación.

Pero ahora, como tenemos varias casillas de verificación, no es práctico hacer varios llamados useState para cada uno.

Entonces, declaremos un arreglo dentro del estado e indiquemos el estado de cada una de las casillas de verificación.

Para crear un arreglo cuyo largo sea igual número de casillas de verificación, Podemos usar el método de arreglo fill de este método:

const [checkedState, setCheckedState] = useState(
    new Array(toppings.length).fill(false)
);

Aquí hemos declarado un estado con un valor inicial como un arreglo relleno con el valor false.

Entonces, si témenos cinco coberturas, el arreglo de estado checkedState tendrá cinco valores false:

[false, false, false, false, false]

Y una vez que marquemos / desmarquemos la casilla, cambiaremos el false correspondiente a true y viceversa.

Aquí está la demo final.

Y el código completo de App.js luce de esta manera:

import { useState } from "react";
import { toppings } from "./utils/toppings";
import "./styles.css";

const getFormattedPrice = (price) => `$${price.toFixed(2)}`;

export default function App() {
  const [checkedState, setCheckedState] = useState(
    new Array(toppings.length).fill(false)
  );

  const [total, setTotal] = useState(0);

  const handleOnChange = (position) => {
    const updatedCheckedState = checkedState.map((item, index) =>
      index === position ? !item : item
    );

    setCheckedState(updatedCheckedState);

    const totalPrice = updatedCheckedState.reduce(
      (sum, currentState, index) => {
        if (currentState === true) {
          return sum + toppings[index].price;
        }
        return sum;
      },
      0
    );

    setTotal(totalPrice);
  };

  return (
    <div className="App">
      <h3>Select Toppings</h3>
      <ul className="toppings-list">
        {toppings.map(({ name, price }, index) => {
          return (
            <li key={index}>
              <div className="toppings-list-item">
                <div className="left-section">
                  <input
                    type="checkbox"
                    id={`custom-checkbox-${index}`}
                    name={name}
                    value={name}
                    checked={checkedState[index]}
                    onChange={() => handleOnChange(index)}
                  />
                  <label htmlFor={`custom-checkbox-${index}`}>{name}</label>
                </div>
                <div className="right-section">{getFormattedPrice(price)}</div>
              </div>
            </li>
          );
        })}
        <li>
          <div className="toppings-list-item">
            <div className="left-section">Total:</div>
            <div className="right-section">{getFormattedPrice(total)}</div>
          </div>
        </li>
      </ul>
    </div>
  );
}

Veamos que estamos haciendo aquí.

Como se muestra aquí abajo, hemos declarado la casilla de verificación de entrada como se muestra a continuación:

<input
  type="checkbox"
  id={`custom-checkbox-${index}`}
  name={name}
  value={name}
  checked={checkedState[index]}
  onChange={() => handleOnChange(index)}
/>

Aquí, agregamos el atributo checked con el valor del estado checkedState, true o false, según corresponda.

También añadimos un manejador onChange y le pasamos el index de la casilla que está marcada/desmarcada al método  handleOnChange.

El método manejador handleOnChange debe verse así:

const handleOnChange = (position) => {
  const updatedCheckedState = checkedState.map((item, index) =>
    index === position ? !item : item
  );

  setCheckedState(updatedCheckedState);

  const totalPrice = updatedCheckedState.reduce(
    (sum, currentState, index) => {
      if (currentState === true) {
        return sum + toppings[index].price;
      }
      return sum;
    },
    0
  );

  setTotal(totalPrice);
};

Aquí, primero recorremos el array checkedState utilizando el método arreglo map. Si el valor del parámetro position pasado coincide con el index actual, entonces invertimos su valor. Entonces, si el valor es true se convertirá en false usando !item y si el valor es false, entonces se convertirá en true

Si el index no coincide con el parámetro position proporcionado, entonces no estamos invirtiendo su valor, sino que simplemente devolvemos el valor tal cual.

const updatedCheckedState = checkedState.map((item, index) =>
  index === position ? !item : item
);

// the above code is the same as the below code

const updatedCheckedState = checkedState.map((item, index) => {
  if (index === position) {
    return !item;
  } else {
    return item;
  }
});

He utilizado el operador ternario ?: porque hace el código más corto, pero puedes utilizar cualquier método de arreglo.

Si no estás familiarizado como  funcionan los métodos map oreduce, puedes echarle un vistazo a este artículo que escribí.

Luego, establecemos el arreglo checkedState en el  arreglo updatedCheckedState. Esto es importante porque si no actualizamos el estado checkedState dentro del manejador  handleOnChange, entonces no podrás marcar/desmarcar la casilla de verificación.

Esto es porque estamos usando el valor de checkedState de la casilla para determinar si este está o no marcada (ya que es una entrada controlada como se muestra abajo):

<input
  type="checkbox"
  ...
  checked={checkedState[index]}
  onChange={() => handleOnChange(index)}
/>

Ten en cuenta que creamos una variable updatedCheckedState separada, y a su vez, esta se la pasamos a la función updatedCheckedState y no al arreglo original checkedState.

Esto es porque, por default, la función setCheckedState  usada para actualizar el estado es asincrónica.

Llamar a la función setCheckedState no garantiza que obtendrás el valor actualizado del arreglo checkedState en la siguiente línea.

Por lo que creamos una variable separada y usamos esa en el método reduce.

Entonces, para calcular el precio total, usamos el método de arreglo  reduce:

const totalPrice = updatedCheckedState.reduce(
  (sum, currentState, index) => {
    if (currentState === true) {
      return sum + toppings[index].price;
    }
    return sum;
  },
  0
);

El método de arreglo  reduce recibe cuatro parámetros, de los cuales usaremos solamente tres: sum, currentState e index. Puedes usar nombres distintos, ya que son solo parámetros.

También estamos pasando el valor 0 como valor inicial, que también se lo conoce como el valor accumulator del parámetro sum.

Luego, dentro de la función reduce, chequeamos si el valor actual del array checkedState es true o no.

Si lo es true, esto significa que la casilla está marcada, por lo que añadiremos el valor correspondiente de price correspondiente utilizando sum + toppings[index].price

Si el valor del arreglo checkedState es false, entonces no estamos añadiendo su precio, sino que solo estamos devolviendo el valor anterior calculado de sum.

Luego, vamos a establecer que el valor totalPrice al estado total utilizando setTotal(totalPrice)

De esta forma, podemos calcular correctamente el precio total de los aderezos seleccionados como pueden ver debajo:

Aquí tiene el link de la demo de arriba, así pueden probarla ustedes mismos.

¡Gracias por leer!

A muchos desarrolladores se les dificulta entender como funciona Redux, pero todo desarrollador especializado en React debe saber como trabajar con Redux, ya que muchos proyectos dentro de la industria usa Redux para gestionar proyectos de gran escala.

Para hacerlo fácil para ti, he creado el curso Mastering Redux.

En este curso, aprenderás Redux desde cero y también crearás un aplicación de pedido de comida, desde el inicio y con Redux.

Dale clic a la imagen de abajo para unirte al curso y obtener un descuento especial por tiempo limitado, además de también obtener mi libro más popular "Mastering Modern JavaScript", gratis.

Si quieres mantenerte actualizado con contenidos sobre JavaScript, React y Node.js, sigueme en LinkedIn.

Cómo filtrar un arreglo con un bucle for

Antes del lanzamiento de ES6 en 2015, muchos desarrolladores dependían del método del bucle for para hacer todas las manipulaciones de arreglos. Pero como el código se volvía demasiado largo y difícil de entender, esto condujo a la creación de muchos métodos individuales de JavaScript como el método filter() (sobre el cual aprenderás más adelante).

Pero para empezar, y entender todo el panorama, vamos a aprender cómo hacerlo usando bucles.

Supongamos que tenemos un arreglos de objetos que contiene todos los datos de los usuarios como nombre, edad, ocupación, etc. y quieres filtrar aquellos usuarios cuya edad cumplan una determinada condición.

let users = [
    { name: 'John', age: 25, occupation: 'gardener' },
    { name: 'Lenny', age: 51, occupation: 'programmer' },
    { name: 'Andrew', age: 43, occupation: 'teacher' },
    { name: 'Peter', age: 81, occupation: 'teacher' },
    { name: 'Anna', age: 47, occupation: 'programmer' },
    { name: 'Albert', age: 76, occupation: 'programmer' },
]

También puedes querer filtrar el arreglo de objetos usando la edad para devolver un nuevo arreglo con aquellos usuarios cuya edad es mayor a 40 y cuya ocupación es igual a programmer:

let filteredUsers = [];
for (let i= 0; i<users.length; i++) {
    if (users[i].age > 40 && users[i].occupation === 'programmer' ) {
        filteredUsers = [...filteredUsers, users[i]];
    }
}
console.log(filteredUsers);

Este código va a devolver un arreglo de tres usuarios que cumplen con esa condición:

Si bien esto funciona bastante bien, una mejor manera de filtrar un arreglo es usando el método filter() de ES6.

Cómo filtrar un arreglo con el método filter filter()

El método filter() es un método ES6 con un sintaxis más prolija para filtrar un arreglo. Este método devuelve un nuevo arreglo con nuevos elementos, sin modificar el arreglo original.

// Sintaxis
myArray.filter(callbackFn)

En la función callback, hay que acceder a cada elemento, el índice y hasta el arreglo original:

myArray.filter((element, index, array) => { /* ... */ })

Ahora hagamos el mismo ejemplo, pero filtrando al usuario por su edad y ocupación:

let filteredUsers = users.filter((user) => {
    return user.age > 40 && user.occupation === 'programmer';
});

console.log(filteredUsers);

Esto devolverá el mismo resultado, pero seguro notarás que tu código queda más prolijo. También es importante que sepas que puedes reescribir este código en una sola línea, sin el return:

let filteredUsers = users.filter(user => user.age > 40 && user.occupation === 'programmer');
console.log(filteredUsers);

Ambos ejemplos de código van a retornar los usuarios filtrados:

El método filter() hace que sea más fácil ejecutar más operaciones directas, sin crear demasiadas variables porque se encadena a otros métodos.

Por ejemplo, puedes filtrar el nuevo arreglo y devolver otro arreglo que contenga solo los nombres:

let filteredUserNames = users.filter(user => user.age > 40 && user.occupation === 'programmer')
    .sort((a, b) => a.age - b.age)
    .map(user => user.name);

console.log(filteredUserNames); // ['Anna', 'Lenny', 'Albert']

Para aprender más sobre cómo filtrar arreglos en JavaScript con el método filter(), puedes leer este artículo Tutorial de Array.filter() de JavaScript y aprender aquí sobre la diferencia entre los métodos find() y filter() de JavaScript.

Cómo filtrar un objeto en JavaScript

Los objetos de JavaScript no son iterables como los arreglos o las cadenas de texto. Esto significa que no pueden ser recorridos con un bucle for, el método filter() o cualquier otro método parecido a estos. Entonces ¿cómo se puede filtrar un objeto en JavaScript?

Esto se puede hacer convirtiendo el objeto en un arreglo mediante cualquier método de objeto como Object.keys(), Object.values() o Object.entries(). Luego, puedes usar el método filter() para filtrar a través del arreglo y devolver uno nuevo con los elementos filtrados.

Por ejemplo, si tenemos un objeto con datos de los usuarios como nombre, edad y ocupación. Estos métodos estáticos de objeto van a devolver las claves, valores o cada par clave-valor como un arreglo:

const userDetails = {
    firstName: "Jane",
    lastName: "Daniels",
    userName: "jane.daniels",
    email: "jane.daniels@example.com",
    comapny: "Example Inc.",
    address: "1234 Example Street",
    age : 25,
    hobby: "Singing"
};

let keysArray = Object.keys(userDetails);

console.log(keysArray);

Esto va a devolver un arreglo de las claves del objeto:

['firstName', 'lastName', 'userName', 'email', 'comapny', 'address', 'age', 'hobby']

Entonces, ahora, puedes usar el método filter() para recorrer el arreglo y devolver uno nuevo con los elementos filtrados:

let filteredKeys = keysArray.filter(key => key.length > 5);

console.log(filteredKeys);

Esto va a devolver un arreglo con las claves que tengan un largo mayor a 5:

['firstName', 'lastName', 'userName', 'comapny', 'address', 'hobby']

Pero como seguro querrás utilizar un mejor método de filtrado, puedes, por ejemplo, filtrar el par clave-valor de nuestro objeto que incluya un nombre de un objeto mayor. Luego puedes obtener primeros las claves, filtrarlas y luego usar el método reduce() para reducir las claves filtradas a un objeto compuesto por estas claves y sus valores:

const userDetails = {
    firstName: "Jane",
    lastName: "Daniels",
    userName: "jane.daniels",
    email: "jane.daniels@example.com",
    comapny: "Example Inc.",
    address: "1234 Example Street",
    age : 25,
    hobby: "Singing"
};

const userNames = Object.keys(userDetails)
    .filter((key) => key.includes("Name"))
    .reduce((object, key) => {
        return Object.assign(object, {
          [key]: userDetails[key]
        });
  }, {});

console.log(userNames);

Esto devolverá un objeto con las claves filtradas y sus valores:

{
    firstName: "Jane",
    lastName: "Daniels",
    userName: "jane.daniels"
}

Conclusión

En este artículo has aprendido a como filtrar un arreglo en JavaScript usando el bucle for y el método filter(), que tiene una mejor sintaxis para poder filtrar arreglos en JavaScript.

También has aprendido a filtrar un objeto en JavaScript, convirtiéndolo en un arreglo y luego usando el método filter().

¡Gracias por leer y diviértete programando!

Puedes acceder a más de 188 de mis artículos visitando mi sitio web. También puedes usar la barra de búsqueda para buscar si he escrito un artículo específico.

¡Una nueva y emocionante característica llega a Angular! Las señales, estas proveen una nueva forma de comunicación de nuestro código que comunique a nuestras plantillas que los datos han cambiado. Esto mejora la capacidad de detección de cambios de Angular, lo que también mejora el rendimiento y hace nuestro código más reactivo.

Ya puedes probar las señales, están disponibles con acceso anticipado para desarrolladores (developer preview) en Angular v16, que se publicará en mayo de 2023. Te muestro como hacerlo más adelante.

Si gustas puedes ver el vídeo asociado (en inglés):

Encuentra el código de este tutorial aquí: https://stackblitz.com/edit/angular-signals-deborahk.

Antes de adentrarnos en detalles del "qué" y el "cómo", vamos a empezar con el "por qué". Entonces, ¿por qué usar las señales?

¿Por qué necesitamos las señales?

Empecemos con un ejemplo simple que no utiliza señales. Digamos que estás escribiendo código para realizar algunas operaciones matemáticas.

let x = 5;
let y = 3;
let z = x + y;
console.log(z);//~8

¿Qué es lo que este código imprime por consola? Así es, imprime 8.

En alguna parte más adelante en el código cambiamos el valor de x. ¿Qué valor de z se imprime por consola ahora?

let x = 5;
let y = 3;
let z = x + y;
console.log(z);

x = 10;
console.log(z);//~8

¡Aún imprime 8! Esto se debe a que el valor se asigna a z desde el inicio cuando la expresión se ha evaluado. La variable z no reacciona a los cambios en x o en y.

¡Pero queremos que nuestras variables reaccionen a los cambios!

Una de las razones por las que usamos Angular es para crear sitios web interactivos y reactivos, es decir, con capacidad de reaccionar a los cambios de los datos.

Como por ejemplo en la Figura 1. Cuando el usuario edita la cantidad, las variables relacionadas, como el total, sub-total e impuestos, deberían reaccionar y ajustar los costos automáticamente. Si el usuario decide borrar un item del carrito también queremos que las variables relacionadas sean capaces de re-calcular los costos.

Con las señales nuestro código puede ser más reactivo. En nuestro anterior ejemplo la implementación de señales se vería así:

const x = signal(5);
const y = signal(3);
const z = computed(() => x() + y());
console.log(z()); // 8

x.set(10);
console.log(z()); // 13

Veremos la sintaxis y lo demostraremos a detalle más adelante. Por ahora, el código de arriba define dos señales: x y y además de darles valores iniciales de 5 y 3. Entonces definimos una señal computada z, que es la suma de x y y. Debido a que las señales proveen notificaciones de cambios cuando cambian los valores de las señales x o y, cualquier valor computado a partir de esas señales se re-calculará automáticamente. ¡Este código es reactivo! ¡Excelente!

Las señales computadas reaccionan y se re-calculan cuando cualquiera de sus señales dependientes cambia. Si una señal está vinculada en una plantilla de Angular, al cambiar dicha señal, el mecanismo de detección de cambios de Angular actualiza cualquier vista que pueda leer la señal. Y los usuarios visualizan los valores modificados.

Por lo que es posible dar respuesta a la pregunta de, ¿por qué necesitamos las señales? De la siguiente manera:

• Las señales permiten la reactividad.
• Usando señales podemos tener mayor control en la detección de cambios, lo cual puede mejorar el desempeño.

Profundicemos un poco más para entender lo que es una señal y cómo se usa.

¿Qué es una señal?

Podemos pensar de una señal como un valor que además tiene la capacidad de notificar cambios. Una señal es un tipo especial de variable que almacena un valor. Pero a diferencia de otras variables, una señal también provee notificaciones cuando el valor de la variable cambia.

Imagínate una variable normal como si fuera un estante o repisa, como en el lado izquierdo de la figura 2. Cuando un valor se asigna a la variable, ésta se colocaría en el estante. Cualquier código dentro del alcance puede simplemente ver (leer) la variable en el estante.

Una señal tiene mayor parecido a una caja, como se muestra al lado derecho de la figura 2. Al crear una señal, creamos algo análogo a una caja y el valor se coloca dentro de ésta. Cuando el valor que se encuentra dentro cambia, la caja emite un brillo para avisarle. Para leer la señal, es decir el valor almacenado, primero debemos abrir "la caja" usando paréntesis: x(). Técnicamente llamamos a la función "getter" (literal de conseguidor, método o función que devuelve un valor) de la señal para leer el valor de esta.

Ahora pues, ya sabemos que es una señal.

• Una señal es una variable con notificaciones de cambios.
• Es un valor reactivo o bien un "reactivo primitivo".
• Siempre tiene un valor
• Es síncrona.
• No es un sustituto o remplazo de RxJS ni de Observables para operaciones asíncronas como http.get.

¿Dónde podemos usarlas?

• En componentes para monitorear su estado local.
• En directivas.
• En servicios para compartir el estado entre componentes.
• Para su lectura en una plantilla (del inglés template) para mostrar lo valores.
• O en cualquier otra parte de tu código.

A continuación, vayamos paso a paso viendo cómo crear y usar señales.

Cómo crear una señal

Para usar una señal tenemos primero, por supuesto, que crearla.

cantidad = signal<number>(1);

Esta es la sintaxis para escribir el código para crear e inicializar una señal usando el método constructor signal().

De forma opcional como podemos ver, es posible pasar un parámetro genérico para definir el tipo de dato de la señal. Una señal puede ser de tipo string, number, array, object o cualquier tipo de dato. En muchos casos el tipo de dato puede inferirse y por lo tanto no es necesario u obligatorio pasar el parámetro de tipo genérico.

Pasemos al constructor el valor por defecto para nuestra señal, ya que una señal siempre debe tener un valor, y por lo tanto, es necesario inicializarlas con un valor por defecto.

Aquí te muestro algunos otros ejemplos:

cantidad = signal(1);

cantidadDisponible = signal([1, 2, 3, 4, 5, 6]);

vehiculoSeleccionado = signal<Vehiculo>({ 
  id: 1,
  nombre: 'AT-AT', 
  precio: 19416.13
});

vehiculos = signal<Vehiculo[]>([]);

La primera línea de este código crea una señal numérica con un valor por defecto (predefinido) de 1. Ya que el valor predeterminado es de tipo number, la cantidad es una señal que contiene un número. El parámetro del tipo genérico no se necesita pasar, ya que como vimos el tipo del dato es inferido automáticamente.

La segunda línea es una señal que contiene un arreglo de números, donde su valor predefinido corresponde con los valores del 1 al 6. De nuevo, no necesitamos pasar el parámetro de tipo genérico ya que el tipo de dato se infiere automáticamente a partir del tipo de dato del valor que hemos pasado.

La señal vehiculoSeleccionado contiene un objeto de tipo Vehiculo. En este ejemplo el tipo no puede inferirse, por lo que especificamos un parámetro de tipo genérico para Vehiculo.

La señal vehiculos contiene un arreglo para objetos de tipo Vehiculo, que está vacío por defecto. Para que este arreglo posea tipos estático y pueda recibir elementos del tipo de dato Vehiculo, agregamos el parámetro genérico de tipo de datos <Vehiculo[]>.  

Una señal que fue creada utilizando el constructor es editable, por lo que puedes asignarle un valor nuevo o diferente, actualizarla en base a su valor actual o mutar su contenido. En breve veremos ejemplos de cómo realizar estas operaciones.

Una vez que hayas creado una señal es posible que quieras leer su valor.

Cómo leer una señal

Anteriormente planteamos pensar que una señal es una caja. Hablando metafóricamente podemos decir que para leer el valor de una señal es necesario primero abrir la caja. Ya que las señales son funciones, esto lo hacemos invocando la señal con el uso de paréntesis.

quantity();

Empecemos con el nombre de la señal y enseguida con el paréntesis de apertura y luego el de cierre. Técnicamente esto a su vez invoca a la función "getter", la cual es creada "por debajo", por lo que no es visible en el código.

Cuando se trabaja con Angular es común leer las señales en el "template" (plantilla).

<select
    [ngModel]="cantidad()"
    (change)="alSeleccionarCantidad($any($event.target).value)">
  <option *ngFor="let c of cantidadDisponible()">{{ c }}</option>
</select>

<div>Vehículo: {{ vehiculoSeleccionado().nombre }}</div>
<div>Price: {{ vehiculoSeleccionado().precio }}</div>
<div [style.color]="color()">Total: {{ precioTotal() }}</div>

La plantilla de arriba muestra una caja de selección de cantidad. La directiva [ngModel] lee el valor de la señal cantidad y crea un enlace o "binding" a ese valor.

El enlace o "binding" al evento change invoca el método alSeleccionarCantidad() del componente.

El elemento html option usa la directiva ngFor para iterar por cada elemento del arreglo en la señal cantidadDisponible. Lee la señal y crea una opción en el select para cada elemento del arreglo.

Debajo del elemento select encontrarás tres elementos div, el primero lee la señal vehiculoSeleccionado, luego accede a su propiedad nombre. El segundo elemento div lee la señal vehiculoSeleccionado y muestra su propiedad precio. El último div lee la señal precioTotal (que no hemos definido aún), y utiliza el valor de la señal color (que tampoco hemos definido todavía) para determinar el color del texto.

Es importante nota que al leer una señal siempre obtendremos el valor actual, y el código no tiene conocimiento de ningún valor previo.

Cuando el usuario elige una cantidad diferente en el elemento select queremos cambiar el valor de la señal cantidad. De esa manera la señal cantidad se transforma en la "fuente de verdad" para la cantidad seleccionada por el usuario. Veamos cómo hacerlo a continuación.

Cómo cambiar el valor de una señal

El método set reemplaza el valor de una señal con un nuevo valor. Básicamente "abre la caja", quita el ítem actual y asigna un nuevo ítem que tomará el lugar del anterior.

this.cantidad.set(cant);

Una situación común es cambiar el valor de la señal en base a una acción del usuario. Por ejemplo:

• El usuario selecciona una nueva cantidad usando el elemento select.
• El evento ligado al elemento select invoca al método alSeleccionarCantidad() y pasa la cantidad seleccionada por el usuario.
• La acción del usuario se maneja en el componente usando la función o método definido para este propósito.
• El nuevo valor se asigna a la señal cantidad.

Este es un ejemplo de una función para el manejo de eventos (event handler):

alSeleccionarCantidad(cant: number) {
  this.cantidad.set(cant);
}

En el momento en que se haya asignado o re-asignado la señal, el código notifica a cualquier consumidor de la señal que esta ha cambiado. En este contexto, un consumidor es cualquier código que tenga interés en recibir notificaciones de cambios del valor de la señal.

¿Cómo es que el consumidor indica que tiene interés en ser notificado de los cambios de una señal en particular?

Si un código lee una señal, ese código será notificado cuando la señal cambie.

Si una plantilla lee una señal, será notificada cuando la señal cambie y la "vista" (view) sea programada para volver a renderizarse.

Por lo que el acto de leer una señal registra el interés del consumidor de observar el valor y los cambios de dicha señal. El equipo de Angular le llama a esto la regla de oro de las señales en componentes: "la detección de cambios en un componente se agendará cuando y sólo cuando la lectura de una señal en el plantilla notifique a Angular que su valor a cambiado".

Aquí un ejemplo para ilustrar el proceso. Digamos que hay algo de trabajo realizándose dentro del método (mostrado abajo) que busca ajustar la cantidad. Digamos que quizá el caso de uso podría ser algo como una promoción, que si por ejemplo el usuario elige una cantidad igual o mayor a 5 entonces se lleva uno gratis. El punto es que la señal cantidad podría cambiar en varias ocasiones durante la ejecución del método.

alSeleccionarCantidad(cant: number) {
  this.cantidad.set(qty);
  
  this.cantidad.set(5);
  this.cantidad.set(42);
}

La cantidad se muestra en la plantilla usando la vinculación de Angular (binding) como se muestra abajo. Ya que el vínculo "lee" la señal cantidad, la plantilla "registra" su interés en recibir notificaciones de cambios.

//Angular binding (vinculación en la plantilla)
{{ cantidad() }}

Cuando el usuario elige la cantidad el método alSeleccionarCantidad() se ejecuta. El código en este método primero asigna el valor seleccionado por el usuario a la señal cantidad. Luego cuando la nueva señal se asigna esta genera una notificación. En este punto, se agenda la ejecución del mecanismo de detección de cambios de Angular, pero no tiene la oportunidad de hacerlo sino hasta después de la ejecución del método alSeleccionarCantidad().  

Entonces, el método alSeleccionarCantidad() continúa asignando el número 5 a la señal, que genera otra notificación de cambio. De nuevo el mecanismo de detección de cambios de Angular es llamado a ejecutarse pero aún debe esperar a que el método alSeleccionarCantidad() termine su ejecución. El método entonces asigna el valor 42 a la señal y el proceso se repite.

Cuando se completa la ejecución del método alSeleccionarCantidad() finalmente será turno de ejecución del mecanismo de detección de cambios de Angular. La plantilla lee la señal y obtiene su valor, que es 42. La plantilla no es "consciente" de ninguno de los valores anteriores. La vista se vuelve a "renderizar" y el nuevo valor de la señal cantidad se mostrará.

Si la señal cambia, cualquier "consumidor" interesado en su lectura será notificado. Pero el consumidor no recibirá el nuevo valor, sino que, hasta la próxima vez, cuando sea el turno de ejecución del consumidor es entonces que podrá "leer" el valor actual de la señal.

Si conoces cómo funcionan los observables en RxJS podrás notar que las señales pueden ser distintas ya que no emiten valores cómo lo hacen los observables, además de que no requieren una suscripción.

Además del método set(), también hay otras 2 maneras de cambiar una señal: update() y mutate(). El método set() reemplaza el valor de una señal con un valor nuevo, metafóricamente remplazado el contenido del "cajón" de la señal. Pásale el nuevo valor al método set().

// Remplaza el valor
this.cantidad.set(cant);

El método update() actualiza la señal en base a su valor actual. Pasa una función de "flecha" al método update(), esta provee el valor actual de la señal para que sea posible cambiarlo programáticamente según sea necesario. En el siguiente código la cantidad se duplica.

// Actualizar el valor de la señal en base al valor actual
this.cantidad.update(cant => cant * 2);

El método mutate() modifica el contenido del valor de una señal, no el valor de la señal en sí. Úsalo con arreglos para modificar sus elementos y con objetos para modificar sus propiedades. En la siguiente línea de código se incrementa 20% el precio de un vehículo.

this.vehiculoSeleccionado.mutate(v => v.precio = v.precio + (v.precio * .20));

Independientemente de la forma en cómo se modifica la señal, los consumidores serán notificados que ha sucedido un cambio, ellos pueden entonces leer el nuevo valor de la señal cuando es su turno de ejecución.

Cómo definir una señal computada

Frecuentemente tenemos variables en nuestro código que dependen de otras variables, por ejemplo, el precio total de un ítem es su precio unitario por el número o cantidad de ítems deseados de este tipo. Si el usuario cambia la cantidad queremos también cambiar el precio total, para lo que utilizamos señales computadas (computed signals).

Define una señal computada llamando la función computed() de creación de señales computadas, esta crea una nueva señal que depende de otras. Ahora pasemos a la función computed() una función que lleve a cabo las operaciones deseadas, esta tendrá acceso a la lectura de el valor de una o más señales para llevar a cabo su computo.

precioTotal = computed(() => this.vehiculoSeleccionado().precio * this.cantidad());

color = computed(() => this.precioTotal() > 50000 ? 'verde' : 'azul');

La primera línea de código de arriba define una señal computada precioTotal al llamar la función de creación computed(), la función que pasamos a esta función lee las señales vehiculoSeleccionado y cantidad, si cualquiera de estas cambia, la señal computada será notificada y leerá el nuevo valor la próxima vez que se ejecute.

La segunda línea define la señal computada color, que le asigna el valor verdeo azul dependiendo del valor de la señal precioTotal. La plantilla puede vincular a esta señal para mostrar el estilo apropiado.

Una señal computada es sólo lectura y no puede ser modificada con los métodos set(), update() ni mutate(), además su valor se re-evalúa o re-computa cuando:

• Uno o más de sus señales dependientes ha cambiado.
• Y el valor de la señal computada ha sido leído.

La señal computada se "memoiza", lo que quiere decir que guarda el resultado evaluado, este es re-utilizado la próxima vez que es leído.

Digamos por ejemplo que tenemos lo siguiente en nuestra plantilla:

Precio extendido: {{ precioTotal() }}
Precio total: {{ precioTotal() }}
Cantidad a pagar: {{ precioTotal() }}

La primera vez que la plantilla lea la señal computada precioTotal, el valor se calcula y se guarda en memoria, las siguientes 2 veces que se lee, se re-utiliza el valor almacenado anteriormente. Dicho valor no se re-calcula a menos que alguna de sus señales dependientes haya cambiado.

Cómo usar un efecto

Podría haber momentos en que necesites ejecutar código en respuesta al cambio de alguna señal y que este código tenga efectos secundarios, por ello quiero decir que este código haga un llamado a alguna API o que realice alguna otra operación no relacionada a la señal, en estos casos debemos usar effect().

Por ejemplo, digamos que quieres inspeccionar tu código en busca de errores (debug) y para ello deseas imprimir el valor de la señal usando console.log cada vez que esta sufra un cambio, como sabemos llamar console.log es un efecto secundario.

Para definir un efecto debemos llamar la función creacional effect(). Pasémosle a esta función la operación a realizar, la cual será ejecutada nuevamente cada vez que el código reaccione a un cambio en cualquiera de la señales dependientes.

effect(() => console.log(this.vehiculoSeleccionado()));

La función effect() puede ser invocada desde otra función, pero frecuentemente es llamada desde el constructor u otro código de inicialización, dado que a su vez prepara un tipo de función manejadora (handler).

Alternativamente un efecto puede definirse de forma declarativa como se muestra a continuación:

e = effect(() => console.log(this.vehiculoSeleccionado()));

Un efecto no debería cambiar el valor de ninguna señal, sin embargo si necesitas cambiar una señal en base a un cambio a otra señal dependiente es recomendable que utilices una señal computada en su lugar.

Cómo verás, no es muy común utilizar los efectos, aunque son útiles para imprimir valores por consola o para llamar APIs externas, pero no los uses para trabajar con RxJS ni Observables; habrá funcionalidades de las señales que serán útiles para convertir a y desde los observables.

Cuándo usar señales

Algunas sugerencias.

En primer lugar, continúa utilizando "handlers" en tus componentes como has venido haciendo hasta ahora para manejar o responder a las acciones de los usuarios. Acciones como realizar una selección de una lista desplegable, hacer clic en un botón o ingresar datos en una "caja de texto".

Usa una señal o señal computada en un componente para cualquier estado que pueda cambiar. En este contexto, estado se refiere a cualquier dato que sea administrado por el componente. Cualquier cosas desde una bander estaCargandose hasta la página actualmente mostrada con los datos seleccionados por el usuario podrían ser señales. Las señales son especialmente útiles cuando se muestran los datos en la plantilla que deben reaccionar a cambios dependientes de otras acciones.

Las señales compartidas deberían ser servicios. Digamos que tenemos un arreglo con los vehículos devueltos que se comparte entre componentes, este podría ser un servicio.

Continúa usando los observables para operaciones asíncronas como las llamadas a http.get(), cabe mencionar que hay otras funcionalidades que vendrán con las señales para equiparar más fielmente con los observables.

Concluyendo

Las señales representan un avance mayúsculo en las capacidades de programación reactiva y detección de cambios de Angular. Este tutorial respondió a las preguntas: "¿Por qué?", "¿Qué?" y "¿Cómo?" así como "¿Dónde?" y "¿Cuándo?" también.

Las señales están disponibles en vista previa para desarrolladores en Angular v16, como parte de esta vista previa las señales se incluyen en el modelo de detección de cambios. Se espera que futuras capacidades de las señales mejorarán la detección de cambios y marcarán los componentes para revisión de una forma similar como se lleva a cabo actualmente al usar OnPush con la pipa asíncrona (async pipe).  

Una forma sencilla y fácil de probar las señales es usar Stackblitz que es un editor de código en línea que trabaja muy bien con Angular y no requiere instalaciones. Para usar Stackblitz con señales:

1. Navega al sitio de Stackblitz: www.stackblitz.com.
2. Haz clic en el icono de Angular para crear un proyecto Angular.
3. Edita el archivo package.json resultante y cambia las versiones de los paquetes de @angular a sus versiones más actuales "pre-realease" (Angular v16).
4. Guarda el proyecto para que se actualicen las dependencias.
5. Dale una probada a las señales.

Para ver estos pasos en acción dale un vistazo al final del siguiente vídeo (en inglés):

También puedes empezar usando el enlace a mi proyecto https://stackblitz.com/edit/angular-signals-deborahk. Asegúrate de crear una copia para que puedas realizar tus propios cambios.

¡Las señales llegaron! Van a mejorar la capacidad de detección de cambios y la reactividad de tu código, además de hacerlo de más fácil edición y lectura, además que son muy divertidas de usar.

Introducción a las APIs y REST

¿Qué es una API?

API, o Interfaz de Programación de Aplicaciones (Application Programming Interface), es un conjunto de reglas y protocolos que permite que dos aplicaciones se comuniquen entre sí. Piensa en una API como un puente que conecta dos aplicaciones: una puede pedirle datos o servicios a otra sin necesidad de conocer su funcionamiento interno.

¿Qué es REST?

REST, o Transferencia de Estado Representacional (Representational State Transfer), es un estilo arquitectónico para diseñar APIs. Las APIs REST suelen usar URLs para identificar recursos (como países, en nuestro caso) y métodos HTTP (GET, POST, PUT, DELETE) para definir las acciones a realizar sobre esos recursos.

Métodos HTTP en el Consumo de APIs

Las APIs REST se basan en el protocolo HTTP, el cual es el mismo protocolo que usamos al navegar en la web. Cada acción que llevamos a cabo con la API (consultar datos, crear un nuevo registro, actualizar o eliminar un registro) se representa a través de un método HTTP. Estos métodos son parte integral de la arquitectura REST, ya que permiten manipular recursos de forma estandarizada.

Cada método HTTP tiene un propósito específico y su propio rol en la interacción con la API:

GET: Este es el método más común y se usa para recuperar datos de un recurso específico. Es como una consulta de solo lectura; no cambia ni afecta el estado de los datos en el servidor.

• Ejemplo: Al consultar la API para obtener una lista de países, usamos una solicitud GET.

POST: Este método se utiliza para enviar datos al servidor y crear un nuevo recurso en él. A diferencia de GET, POST modifica el estado del servidor al agregar datos.

• Ejemplo: En una API de usuarios, un POST a la URL https://api.ejemplo.com/usuarios podría crear un nuevo usuario en la base de datos.

PUT: Se usa para actualizar un recurso existente en el servidor. En general, se espera que una solicitud PUT contenga todos los datos del recurso a actualizar, y reemplaza el recurso en el servidor con los datos enviados.

• Ejemplo: Actualizar los detalles de un país en la base de datos mediante una solicitud PUT a https://api.ejemplo.com/paises/{id}.

DELETE: Este método se utiliza para eliminar un recurso específico en el servidor. Como su nombre lo indica, DELETE quita o borra datos de la base de datos o sistema remoto.

• Ejemplo: Una solicitud DELETE a https://api.ejemplo.com/usuarios/{id} eliminaría al usuario con el ID especificado.

Cada uno de estos métodos se representa en las aplicaciones REST de forma clara, permitiendo a los desarrolladores y al servidor entender qué acción se desea realizar sobre los datos. Estos métodos, cuando se usan con fetch en JavaScript, nos permiten manipular y gestionar datos de manera precisa y efectiva en la aplicación.

Ejemplo de Solicitudes HTTP con fetch

El método fetch en JavaScript nos permite implementar fácilmente cualquiera de estos métodos HTTP:

• GET: Para recuperar datos, pasamos solo la URL a fetch.
• POST, PUT y DELETE: Estos métodos requieren configuraciones adicionales en fetch, como el tipo de método, los encabezados y el cuerpo de la solicitud.

Uso de fetch en JavaScript

fetch es una función nativa en JavaScript que facilita el envío de solicitudes HTTP, devolviendo una promesa. Usar fetch con async/await mejora la legibilidad del código y simplifica la gestión de las respuestas, lo que es especialmente útil cuando trabajamos con datos de una API.

Estructura Básica de fetch

La sintaxis básica de fetch para una solicitud GET es:

fetch(url)
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

O usando async/await:

async function getData(url) {
    try {
        const response = await fetch(url);
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error:', error);
    }
}

Solicitud GET con fetch

En una solicitud GET, simplemente se pasa la URL de la API a fetch. Nuestro ejemplo utiliza este método para obtener datos de países según su subregión.

async function getDatos(subregion) {
    try {
        const res = await fetch(`https://restcountries.com/v3.1/subregion/${subregion}`);
        const data = await res.json();
        dibujaCards(data);
    } catch (error) {
        alert('No pude conectarme a la API');
    }
}

Solicitud POST, PUT y DELETE con fetch

Para otras operaciones (POST, PUT, DELETE), podemos añadir una configuración adicional a fetch, especificando el método, encabezados y el cuerpo de la solicitud.

Ejemplo de POST

Un ejemplo típico de POST podría ser enviar datos a una API para crear un nuevo recurso, como un usuario.

async function createUser(userData) {
    try {
        const response = await fetch('https://example.com/api/users', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(userData)
        });
        const data = await response.json();
        console.log('Usuario creado:', data);
    } catch (error) {
        console.error('Error al crear usuario:', error);
    }
}

Ejemplo de PUT

PUT se usa para actualizar un recurso existente. Este ejemplo muestra cómo modificar los datos de un usuario:

async function updateUser(userId, updatedData) {
    try {
        const response = await fetch(`https://example.com/api/users/${userId}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(updatedData)
        });
        const data = await response.json();
        console.log('Usuario actualizado:', data);
    } catch (error) {
        console.error('Error al actualizar usuario:', error);
    }
}

Ejemplo de DELETE

Para eliminar un recurso, simplemente usamos el método DELETE y la URL correspondiente.

async function deleteUser(userId) {
    try {
        const response = await fetch(`https://example.com/api/users/${userId}`, {
            method: 'DELETE'
        });
        if (response.ok) {
            console.log('Usuario eliminado');
        }
    } catch (error) {
        console.error('Error al eliminar usuario:', error);
    }
}

Proyecto: Explorador de Países

Vamos a crear una pequeña aplicación, que consuma datos de la API de REST Countries y poder generar una presentación de galería, así como una presentación de detalle por país, con ello vamos a poder poner en práctica los conceptos anteriormente explicados.

Proyecto: Explorador de Países

El proyecto está compuesto por:

1. HTML (index.html): Define la estructura de la aplicación.
2. JavaScript (script.js): Realiza la solicitud a la API para obtener datos de países según la subregión seleccionada.
3. HTML (detail.html): Define la estructura de la presentación de detalle del país.
4. JavaScript de Detalle (detail.js): Muestra detalles específicos de un país.

HTML de la Página Principal

En el archivo index.html, configuramos una barra de navegación para seleccionar una subregión (América del Norte, América del Sur o América Central) y una galería donde se muestran los países.

<nav>
    <ul class="navbar">
        <li><a href="#norteamerica">América del Norte</a></li>
        <li><a href="#suramerica">América del Sur</a></li>
        <li><a href="#centroamerica">América Central</a></li>
    </ul>
</nav>
<div id="loading" class="loading hidden">Cargando...</div>
<section class="gallery"></section>
<footer>
    <p>&copy; 2024 América - Explorando Países</p>
</footer>

Función para Obtener Datos en script.js

Aquí, fetch se usa para hacer una solicitud GET a la API y obtener datos sobre países de una subregión. Se muestra un indicador de carga durante la consulta y se actualiza la galería una vez que se reciben los datos.

const loadingIndicator = document.getElementById('loading');

function showLoading() {
    loadingIndicator.classList.remove('hidden');
}

function hideLoading() {
    loadingIndicator.classList.add('hidden');
}

async function getDatos(subregion) {
    try {
        showLoading();
        const res = await fetch(`https://restcountries.com/v3.1/subregion/${subregion}`);
        const data = await res.json();
        dibujaCards(data);
    } catch (error) {
        alert('No pude conectarme a la API');
    } finally {
        hideLoading();
    }
}

Función dibujaCards(paises)

Esta función recibe los datos de la API y los muestra en una tarjeta HTML para cada país.

function dibujaCards(paises) {
    const galeria = document.querySelector('.gallery');
    let htmlPaises = '';
    paises.forEach((pais) => {
        htmlPaises += `
        <div class="card">
            <h2>${pais.name.official}</h2>
            <p><strong>Capital:</strong> ${pais.capital ? pais.capital[0] : 'No Disponible'}</p>
            <p><strong>Idioma:</strong> ${Object.values(pais.languages || { '': 'No Disponible' }).join(', ')}</p>
            <button onclick="viewMore('${pais.cca3}')">Ver más</button>
        </div>
        `;
    });
    galeria.innerHTML = htmlPaises;
}

Resumiendo lo realizado,  fetch y async/await nos brindan una forma poderosa y sencilla de consumir APIs en JavaScript. Al conocer los diferentes métodos HTTP y cómo configurarlos en fetch, ahora tienes las bases para manejar solicitudes GET, POST, PUT y DELETE, lo cual te abrirá muchas posibilidades para crear aplicaciones interactivas que consuman o modifiquen datos de forma dinámica.

En este artículo, vamos a hablar sobre cómo acceder a las propiedades de una variedad de arreglos y ver algunos ejemplos de código.

¿Qué es un arreglo en JavaScript?

Un arreglo es un tipo de estructura de datos de JavaScript que se usa para almacenar una colección de elementos de distintas clases.

Es posible tener un arreglo de cadenas de texto, como este:

const fruits = ["apple", "banana", "mango", "orange"];

O un arreglo de números:

const numbers = [1, 2, 3, 4, 5];

y hasta un arreglo anidado de arreglos como este:

const nestedArray = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

También es posible tener un arreglo de distintas clases de datos:

const mixedArray = ["apple", 1, "banana", 2, "mango", 3];

Cómo acceder a los elementos de un arreglo en JavaScript:

Para acceder a un elemento de un arreglo, hay que referenciar el nombre del arreglo, seguido del número de índice del elemento que queremos acceder, entre corchetes.

Este es un ejemplo de cómo acceder al primer elemento del arreglo fruits:

const fruits = ["apple", "banana", "mango", "orange"];
console.log(fruits[0]); // apple

Los arreglos siempre comienzan en cero. Esto significa que el primer elemento tiene el índice 0, el segundo tiene el 1 y así los siguientes elementos.

Para acceder al último elemento del arreglo, se puede usar la longitud (length) del arreglo menos 1.

const fruits = ["apple", "banana", "mango", "orange"];
console.log(fruits[fruits.length - 1]); // orange

A veces puede ser confuso cuando se está trabajando con un arreglo anidado de arreglos, pero la sintaxis es la misma que usamos cuando queremos acceder a un elemento de un arreglo anidado. Por ejemplo, si queremos acceder al primer elemento de nestedArray:

const nestedNumberArray = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];
console.log(nestedNumberArray[0][0]); // 1

nestedNumberArray[0] apunta a este arreglo:

[1, 2, 3];

Para acceder al primer elemento de este arreglo, hay que usar otro para de corchetes con el número de índice que se quiere acceder:

nestedNumberArray[0][0];

Cómo acceder a las propiedades de un arreglo de objetos en JavaScript

Muchas veces vamos a encontrar arreglos de objetos en JavaScript.

En este ejemplo, dentro del arreglo developers, cada desarrollador tiene las siguientes propiedades: name, age y la propiedad languages que es un arreglo con los lenguajes de programación que conocen.

const developers = [
  { name: "John", age: 25, languages: ["JavaScript", "Python"] },
  { name: "Kelly", age: 37, languages: ["Ruby", "Python", "C", "C++"] },
  { name: "Zack", age: 45, languages: ["Go", "C#"] },
];

Si queremos acceder a la propiedad name del primer desarrollador, usamos la siguiente sintaxis:

console.log(developers[0].name); // John

Aquí estamos usando una combinación de anotación de punto y corchetes para acceder a la primera propiedad del objeto del primer desarrollador en el arreglo developers.

developers[0] es el objeto del primer desarrollador.

{ name: "John", age: 25, languages: ["JavaScript", "Python"] }

Luego usamos la notación de punto (developers[0].name) para acceder a la propiedad name de este objeto.

Cómo encontrar un valor específico de un arreglo de objetos en JavaScript

Para buscar un objeto en particular dentro de un arreglo de objetos, es posible usar el método find. Este método devuelve el primer elemento en el arreglo que cumple con los parámetros de la función. Si ningún elemento los cumple, devuelve undefined.

Este es un ejemplo usando el método find con un arreglo de números:

const numbers = [1, 2, 3, 4, 5];

const foundNumber = numbers.find((number) => number > 3); // 4

En el ejemplo anterior, el método find busca entre los números del arreglo y devuelve el primer número mayor a 3. En este caso, find devuelve el número 4.

También podemos usar el mismo razonamiento para encontrar un objeto específico dentro de un arreglo de objetos.

En el siguiente ejemplo, vamos a buscar el objeto con el valor "Kelly" en la propiedad name dentro del arreglo developers.

const developers = [
  { name: "John", age: 25, languages: ["JavaScript", "Python"] },
  { name: "Kelly", age: 37, languages: ["Ruby", "Python", "C", "C++"] },
  { name: "Zack", age: 45, languages: ["Go", "C#"] },
];

developers.find((developer) => developer.name === "Kelly");

En este ejemplo, developer representa cada objeto del arreglo. El método find va a recorrer el arreglo developers y devolver el primer objeto developer que tenga el valor "Kelly" en la propiedad name.

{ name: "Kelly", age: 37, languages: ["Ruby", "Python", "C", "C++"] }

Conclusión

Espero que este artículo te haya resultado útil para aprender sobre arreglos y cómo acceder a sus propiedades.

Vimos un par de ejemplos de arreglos y también vimos cómo acceder a sus elementos desde arreglos anidados y de un arreglo de objetos.

También aprendimos el método find y cómo usarlo para encontrar un objeto específico dentro de un arreglo de objetos.

Ahora deberías poder entender mejor sobre cómo trabajar con arreglos y objetos en JavaScript.

¡Feliz codificación! 🚀

Map y Set son dos estructuras de datos de JavaScript que puedes usar para almacenar una colección de valores, similares a los Objetos y Arreglos. Son estructuras de datos especializados que te pueden ayudar en almacenar y manipular valores relativos.

En este tutorial, veremos cómo funcionan Map y Set en detalle y saber cuándo usarlos. También exploraremos los métodos de composición de objetos de Set que fueron agregados recientemente al estándar de JavaScript.

Tabla de Contenidos

• El Objeto Map explicado
• Cómo crear un objeto Map
• Métodos y Propiedes de un Objeto Map
• Otras formas de crear un Objeto Map
• Iterar sobre datos del Objeto Map
• Cuándo usar el Objeto Map
• El Objeto Set explicado
• Cómo crear un Objeto Set
• Métodos y Propiedades del Objeto Set
• Métodos de Composición de Set
• Iterar sobre un Objeto Set
• Cuándo usar el Objeto Set
• Conclusión

El Objeto Map explicado

El objeto Map almacena los datos en una estructura de par clave/valor, así como un Objeto. Las principales diferencias entre un objeto regular y un Map son:

• Un objeto Map puede tener cualquier tipo de datos como el valor clave
• Un objeto Map mantiene el orden de los datos agregados al objeto

Cómo crear un Objeto Map

Para crear un objeto Map, puedes llamar al constructor Map() de esta forma:

const myMap = new Map();

El código de arriba crea un nuevo objeto Map vacío.

Métodos y Propiedades de un Objeto Map

Un objeto Map tiene los siguientes métodos y propiedades:

• set(key, value) – Agrega un par clave/valor a un Map
• get(key) – Devuelve un valor desde un Map (regresa undefined si la clave no existe)
• has(key) – Verifica si un Map tiene una clave específica
• delete(key) – Quita una clave específica desde un Map
• clear() – Quita todos los elementos de un Map
• keys() – Devuelve todas las claves en un Map
• values() – Devuelve todos los valores en un Map
• entries() – Devuelve todas las claves y valores en un Map
• size – Devuelve el número de items de un Map

Para insertar datos en el objeto Map, puedes usar el método set():

const myMap = new Map();

myMap.set(1, 'Jack');
myMap.set(2, 'Jill');
myMap.set('animal', 'Elefante');

El código de arriba crea un objeto Map con 3 entradas de la siguiente forma:

Map(3)
0: {1 => "Jack"}
1: {2 => "Jill"}
2: {"animal" => "Elefante"}

Para recuperar un valor desde el objeto Map, necesitas usar el método get() y pasar la clave como su argumento.

console.log(myMap.get(1)); // Jack

console.log(myMap.get('animal')); // Elefante

Para ver cuántos pares de clave/valor tiene un Map, puedes acceder a la propiedad size:

myMap.size; // 3

Para ver si una cierta clave existe en un objeto Map, puedes usar el método has(). Mira el ejemplo de abajo:

myMap.has(1); // true

myMap.has(10); // false

Para quitar un par clave/valor de un objeto Map, puedes usar el método delete() y pasarle la clave de la par que quieres quitar de la siguiente forma:

myMap.delete(1);

console.log(myMap);
// 0: {2 => "Jill"}
// 1: {"animal" => "Elefante"}

Si quieres quitar todos los pares clave/valor, puedes usar el método clear():

myMap.clear();

console.log(myMap); // Map(0) {size: 0}

Otras formas de crear un Objeto Map

También puedes crear un objeto Map desde un Arreglo de la siguiente manera:

const myMap = new Map([
  [1, 'Jack'],
  [2, 'Jill'],
  ['animal', 'Elefante'],
]);

Cuando creas un Map desde un Arreglo, necesitas crear un arreglo de dos dimensiones y especificar dos elementos en cada arreglo.

El primer elemento será la clave, el segundo elemento será el valor. Cualquier otro valor extra en el arreglo será ignorado.

En el ejemplo de abajo, el valor "Johnson" del primer arreglo será ignorado por el constructor Map():

const myMap = new Map([
  [1, 'Jack', 'Johnson'], // el valor 'Johnson' es ignorado
  [2, 'Jill'],
  ['animal', 'Elefante'],
]);

Así como puedes crear un objeto Map desde un arreglo, también puedes crear uno desde un objeto. Necesitas transformar el objeto en un arreglo primero, usando el método Object.entries().

El siguiente ejemplo muestra cómo usar un objeto para crear un Map:

const person = {
    'name': 'Jack',
    'age': 20,
}

const myMap = new Map(Object.entries(person));

console.log(myMap); // Map(2) { 'name' => 'Jack', 'age' => 20 }

Iterar sobre datos del objeto Map

Para iterar sobre los datos de un objeto Map, puedes usar el método forEach() o el bucle for..of:

const myMap = new Map([
  [1, 'Jack'],
  [2, 'Jill'],
  ['animal', 'Elefante'],
]);

// iterar usando el método forEach()
myMap.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

// o usando el bucle for .. of 

for (const [key, value] of myMap) {
  console.log(`${key}: ${value}`);
}

Ambos métodos proveen la misma salida:

1: Jack
2: Jill
animal: Elefante

Cuándo usar el Objeto Map

Puedes imaginarte a un objeto Map como un versión actualizada del Objeto regular. Puede usar cualquier tipo de dato como el valor clave, mientras que un objeto solamente puede usar los valores cadenas como claves.

Por debajo, el objeto Map se desempeña mejor cuando necesitas agregar y quitar claves, así que podrías considerar usarlo cuando tus datos cambia frecuentemente.

También, el objeto Map tiene muchos métodos útiles para manipulación de datos, tales como has() para ver si el Map contiene una clave específica, keys() para obtener todas las claves definidos en el Map, values para obtener todos los valores, y entries() para obtener todos los pares clave/valor.

Pero si solamente quieres crear un objeto sin manipulación adicional, entonces no necesitas usar el objeto Map.

Un ejemplo es cuando envías una solicitud de red usando el método fetch(). Crearías un objeto y lo convierte a una cadena JSON, así que usando un objeto Map no te dará ningún beneficio.

El Objeto Set explicado

El objeto Set te permite almacenar una colección de elementos, así como un Arreglo. Las diferencias entre un Set y un arreglo son:

• Un Set requieres que todos los elementos sean únicos
• Un Set tiene pocos métodos para manipulación de datos

Cómo crear un Objeto Set

Para crear un nuevo objeto Set, necesitas llamar al constructor Set() de la siguiente manera:

const mySet = new Set();

El código de arriba creará un nuevo set vacío.

Métodos y Propiedades del Objeto Set

Un objeto Set tiene los siguientes métodos y propiedades:

• add(value) – Agrega un valor a un Set
• has(value) – Verifica si un Set contiene una valor específico
• delete(value) – Quita un valor específico desde un Set
• clear() – Quita todos los elementos de un Set
• keys() – Devuelve todos las claves en un Set
• values() – Devuelve todos los valores en un Set
• entries() – Devuelve todos los valores en un Set como un arreglo [key, value]
• size – Devuelve el número de elementos en un Set

Fíjate que los métodos keys() y values() en un objeto Set regresa la misma salida.

También está el método entries() que regresa un arreglo de la siguiente forma:

const mySet = new Set(['Jack', 'Jill', 'John']);

console.log(mySet.entries());

Salida:

[Set Entries] {
  [ 'Jack', 'Jack' ],
  [ 'Jill', 'Jill' ],
  [ 'John', 'John' ]
}

Fíjate cómo los valores están repetidos una vez que cada arreglo de arriba. El método entries() es creado para hacer que Set similar al objeto Map, pero probablemente no lo necesites.

Hay métodos extras que puedes usar para interactuar con otro objeto Set. Los discutiremos en la próxima sección.

Para agregar un elemento al objeto Set, puedes usar el método agregar:

const mySet = new Set();

mySet.add(1);
mySet.add(2);
mySet.add(3);

console.log(mySet); // [1, 2, 3]

Para obtener todos los valores almacenados en un Set, llama al método values():

mySet.values(); // [Set Iterator] { 'Jack', 'Jill', 'John' }

Para verificar si el Set tiene un valor específico, usa el método has():

mySet.has('Jack'); // true

mySet.has('Michael'); // false

Para quitar un valor único, llama al método delete(). Para quitar todos los valores, usa el método clear():

mySet.delete('Jill');

mySet.clear();

Métodos de Composición de Set

Aparte de los métodos regulares de arriba, Set también tiene métodos de composición que puedes usar para realizar varias operaciones de teoría de set tales como diferencia, unión, e intersección.

La siguiente tabla es desde la documentación de Set de MDN (la tabla disponible sólo en inglés):

Por ejemplo, puedes obtener un conjunto que contiene las diferencias entre otros dos conjuntos de la siguiente forma:

const setA = new Set([1, 2, 3, 4, 5]);

const setB = new Set([4, 5, 6, 7, 8]);

const diffsA = setA.difference(setB); // Set(3) {1, 2, 3}
const diffsB = setB.difference(setA); // Set(3) {6, 7, 8}

Aquí, el setA.difference(setB) regresa un Set que contiene valores únicos al objeto setA.

Los valores opuestos son devueltos cuando ejecutas el método setB.difference(setA).

Fíjate que estos métodos son nuevas adiciones al estándar de JavaScript, y al momento de escribir este artículo, solamente Safari 17 y Chrome 122 soporta estos métodos.

Actualización: los nuevos métodos agregados al Objeto Set están disponibles en todos los navegadores principales desde el 11 de Junio del año 2024.

Más probable, estos métodos serán incluidos en Node.js pronto.

Iterar sobre un Objeto Set

Para iterar sobre un objeto Set, puedes usar el método forEach() o el bucle for..of:

const mySet = new Set(['Jack', 'Jill', 'John']);

// iterar usando el método forEach()
mySet.forEach(value => {
  console.log(value);
});

// o usando el bucle for .. of

for (const value of mySet) {
  console.log(value);
}

Salida:

Jack
Jill
John

Cuándo usar el Objeto Set

Puedes imaginarte del objeto Set como la versión alternativa del Arreglo regular.

Como un objeto Set ignora valores duplicados, puedes usar este objeto para eliminar duplicados de un Arreglo, luego vuelves a convertir un objeto Set devuelta a un Arreglo:

const myArray = [1, 1, 2, 2, 3, 3];

const uniqueArray = [...new Set(myArray)];

console.log(uniqueArray); // [ 1, 2, 3 ]

Otra razón por que la que quisieras usar un Set es cuando necesites componer múltiples conjuntos de objetos usando los métodos de composición, tales como union() y difference(). Estos métodos no están disponibles en un Arreglo.

Conclusión

En este artículo, has aprendido cómo funcionan los objetos Map y Set y cuándo usarlos en tu código.

Si disfrutaste este artículo y quieres tomar tus habilidades de JavaScript al siguiente nivel, te recomiendo que mires mi nuevo libro Beginning Modern JavaScript aquí.

El libro está diseñado para que sea fácil para los principiantes y accesible para cualquier que busca aprender JavaScript. Provee una guía amena de paso a paso que te ayudará a entender cómo usar JavaScript para crear una aplicación web dinámica.

Esta es mi promesa: Realmente sentirás que comprendes lo que estás haciendo con JavaScript.

¡Nos vemos luego!

Si usas internet, es probable que ya hayas te hayas cruzado con un menú desplegable. Los menús desplegables tienen dos usos: recolectar la información ingresada por el usuario en los formularios web e implementar menús de acciones o navegación en aplicaciones web.

Los menús desplegables son una de las mejores maneras de ofrecer distintas opciones dentro de una colección de elementos sin comprometer el flujo de una aplicación. Además de aplicaciones web, también se los utiliza en software, sistemas operativos, etc.

En esta guía, vamos a aprender a hacer un menu desplegable de navegación usando HTML, CSS y JavaScript.

Al final de esta guía, voy a incluir el archivo de codepen para que puedas jugar con él.

Habiendo cubierto lo fundamental de los menús desplegables, vayamos paso por paso para hacer uno.

Paso 1: Agregar el markup para el menu desplegable.

Dado que vamos a usar iconos en esta guía, lo primero que debemos hacer es importarlos. Para hacerlo más simple, vamos a usar la librería gratuita, Boxicons. Siéntete libre de elegir el ícono que prefieras.

Si bien hay distintas maneras de instalar Boxicons dentro de nuestro sitio, la manera más simple es la de fijar el script dentro de la etiqueta  head de nuestro archivo HTML de este modo:

<head>
   <link 
     href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" 
     rel="stylesheet"
    />
 </head>

Una vez que importamos los íconos, creamos un elemento div con la clase container. Este elemento contendrá otro elemento llamado button y el menú desplegable.

Dentro de este contenedor, creamos el elemento button y le damos la clase y el id btn.  Al botón le vamos a agregar el texto y el ícono de una flecha.

Este es el código para el botón:

<button class="btn" id="btn">
  Dropdown
  <i class="bx bx-chevron-down" id="arrow"></i>
</button>

Luego, vamos a agregar el código del menú desplegable propiamente dicho. Debajo de la etiquetabutton, vamos a crear un elemento div con la clase y el id dropdown. Dentro del elemento div, creamos una etiqueta a para cada elemento del menú, con su texto e ícono respectivo.

Así es cómo debería verse el código:

<div class="dropdown" id="dropdown">
  <a href="#create">
    <i class="bx bx-plus-circle"></i>
    Create New
  </a>
  <a href="#draft">
    <i class="bx bx-book"></i>
    All Drafts
  </a>
  <a href="#move">
    <i class="bx bx-folder"></i>
    Move To
  </a>
  <a href="#profile">
    <i class="bx bx-user"></i>
    Profile Settings
  </a>
  <a href="#notification">
    <i class="bx bx-bell"></i>
    Notification
  </a>
  <a href="#settings">
    <i class="bx bx-cog"></i>
    Settings
  </a>
</div>

Y este es el resultado:

Todavía no luce bien, así que vamos a darle estilos al menú.

Paso 2: Dándole estilos al menú desplegable

Primero vamos a resetear los márgenes y el padding de cada elemento de la página y guardar alguno de los valores en variables reusables para poder utilizarlos en nuestro archivo CSS. Luego, le daremos al elemento body un estilo global.

@import url(https://fonts.googleapis.com/css?family=Inter:100,200,300,regular,500,600,700,800,900);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
  --shadow: rgba(0, 0, 0, 0.05) 0px 6px 10px 0px,
    rgba(0, 0, 0, 0.1) 0px 0px 0px 1px;
  --color: #166e67;
  --gap: 0.5rem;
  --radius: 5px;
}

body {
  margin: 2rem;
  background-color: #b3e6f4;
  font-size: 0.9rem;
  color: black;
}

El próximo paso es darle estilo al botón y al contenedor del menú desplegable. Para agilizar las cosas, solo voy a explicar lo más importante sobre cómo dar estilo.

Copia este código y pégalo en tu archivo CSS:

.btn {
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: var(--gap);
  padding: 0.6rem;
  cursor: pointer;
  border-radius: var(--radius);
  border: none;
  box-shadow: var(--shadow);
  position: relative;
}

.bx {
  font-size: 1.1rem;
}

.dropdown {
  position: absolute;
  width: 250px;
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  margin-top: 0.3rem;
  background: white;
}

.dropdown a {
  display: flex;
  align-items: center;
  column-gap: var(--gap);
  padding: 0.8rem 1rem;
  text-decoration: none;
  color: black;
}

.dropdown a:hover {
  background-color: var(--color);
  color: white;
}

Dado que los menús desplegables suelen ubicarse por sobre los elementos, el botón tiene posición relative y el menú desplegable, absolute. Esto permite que ambos elementos estén cerca uno del otro y que el menú desplegable se ubicará por arriba de otros elementos. De esta manera, al desplegarlo, no afectará el flujo de la página.

Este es el resultado:

Ahora que ya le dimos estilo al menú desplegable, queremos que solo aparezca al apretar un botón en vez de hacerlo cuando pasamos con el puntero sobre él.

En un artículo anterior que escribí sobre cómo hacer un modal con JavaScript [en inglés], usé display: none para inicialmente ocultar el elemento modal de la pantalla. Pero lo malo de utilizar esta propiedad es que, de acuerdo con MDN Docs [en inglés], la propiedad no es animable.

Por esto, en esta guía usaremos una manera distinta para ocultar el menú desplegable. Esto lo haremos combinando las propiedades visibility y opacity. Esta es la manera que GitHub utiliza para ocultar sus menús desplegables.

Dentro de la clase dropdown que creamos anteriormente, agregamos la propiedad visibility con el valor hidden y la opacidad establecida en 0. Al hacer esto, el menú desplegable aparecerá escondido al cargar la página.

Para mostrar el modal,  vamos a crear una clase separada llamada show. Esta clase va a tener la propiedad visibility con el valor visible y una opacidad de 1. A esta clase la vamos a insertar usando JavaScript.

Este es el código:

.dropdown {
  position: absolute;
  width: 250px;
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  margin-top: 0.3rem;
  background: white;
  transition: all 0.1s cubic-bezier(0.16, 1, 0.5, 1);
    
  transform: translateY(0.5rem);
  visibility: hidden;
  opacity: 0;
}

.show {
  transform: translateY(0rem);
  visibility: visible;
  opacity: 1;
}

.arrow {
  transform: rotate(180deg);
  transition: 0.2s ease;
}

Sumado al código para ocultar el elemento modal, añadimos otra clase para rotar el icono de flecha cuando se aprieta el botón del menú.

Paso 3: Agregando funcionalidad al menú desplegable

Primero, vamos a guardar los distintos elementos en variables para poder reutilizarlos.

const dropdownBtn = document.getElementById("btn");
const dropdownMenu = document.getElementById("dropdown");
const toggleArrow = document.getElementById("arrow");

El próximo paso es crear una función para insertar la clase show del elemento desplegable y rotar la flecha del menú al apretar el botón. A esta función la llamaremos toggleDropdown.

const toggleDropdown = function () {
  dropdownMenu.classList.toggle("show");
  toggleArrow.classList.toggle("arrow");
};

Luego vamos a agregar esta función en el botón del menú desplegable con el método addEventListener para que cada vez que el botón se apriete, active la función que controla que el menú desplegable se oculte o despliegue.

dropdownBtn.addEventListener("click", function (e) {
  e.stopPropagation();
  toggleDropdown();
});

Si no te diste cuenta, añadimos ell método stopPropagation()dentro de la función del menú desplegable. Esto hace que la función del elemento botón no la herede el elemento padre y se ejecute dos veces. Esto lo entenderás más en la próxima sección.

Este es el resultado:

Cómo cerrar un menú desplegable cuando un elemento del DOM se aprieta

Es posible cerrar un menú desplegable de cuatro formas distintas:

• Al apretar el botón que lo activa
• Al hacer clic sobre cualquiera de sus elementos individuales
• Al hacer clic fuera del menú (en el body de la página)
• Al apretar el botón Escape o el botón de flecha hacia abajo del teclado.

Pero en esta guía nos vamos a concentrar en los primeros tres.

Primero, vamos a seleccionar el elemento raíz <html> con document.documentElement. Y como hicimos anteriormente, vamos a insertar la función toggleDropdown() dentro de él.

Pero esta vez queremos poner una condición que chequee si el menú desplegable contiene o no la clase show. Solo cuando la tenga vamos a querer que se active la función para ocultar el menú.

document.documentElement.addEventListener("click", function () {
  if (dropdownMenu.classList.contains("show")) {
    toggleDropdown();
  }
});

Este es el resultado final:

Y así es como se hace un menú desplegable con JavaScript. Abajo está el archivo de codepen para ver el menú desplegable en acción.

Conclusión

Espero, de corazón, que este post te haya resultado útil o interesante. Si fue así, te pido que lo compartas con tus amigos o suscríbete a mi blog así no te pierdes ningún post. Gracias por leer.

GitHub | Twitter | Blog | Portfolio

Acabamos de publicar un curso de 2 horas en el canal de YouTube en español de freeCodeCamp.org que te guiará paso a paso en la creación de 3 proyectos con HTML, CSS y JavaScript. Practicarás tus habilidades creando una barra de navegación responsiva con menús desplegables, un carrusel (slider), y una landing page con un modal personalizado.

Jordan Alexander Cruz García creó este curso. Jordan Alexander es desarrollador y le encanta compartir sus conocimientos y enseñar a otros sobre el asombroso mundo de CSS.

💡 Dato: El curso se enfoca en HTML y CSS pero también requiere conocimientos básicos de JavaScript para implementar la interactividad.

HTML, CSS y JavaScript

HTML significa HyperText Markup Language y CSS significa Cascading Style Sheet (hojas de estilo en cascada). Mientras que HTML proporciona la estructura y el contenido de un sitio web, CSS determina cómo se muestra el contenido. Controla los aspectos visuales del sitio web, como fuentes, colores, diseños, espacios y animaciones.

Con CSS, puedes crear fácilmente diferentes estilos y diseños para varios tamaños de pantalla y lograr que tu sitio web se vea genial en computadoras, tabletas y dispositivos móviles.

💡 Dato: Los sitios web que se adaptan a distintos tamaños de pantalla se conocen como "sitios web responsivos".

Normalmente escribimos CSS en un archivo externo al que nos referimos como "hoja de estilo". Luego, enlazamos esta hoja de estilo al archivo HTML, lo cual aplica todos los estilos a los elementos HTML correspondientes en base a los selectores y propiedades CSS.

Separar el contenido del sitio web de su presentación es muy útil. Permite que nuestro proyecto tenga una estructura más fácil de mantener y un proceso de renderizado más eficiente porque los navegadores pueden renderizar la estructura más rápidamente, mientras descargan los estilos CSS en segundo plano.

Básicamente, CSS es una herramienta esencial para crear los sitios web hermosos, visuales y fáciles de usar que vemos hoy en día.

JavaScript agrega interactividad. Convierte los elementos sencillos en elementos interactivos para crear experiencias de usuario geniales.

Proyectos de HTML, CSS y JavaScript en español

Genial. Ahora que ya sabes más sobre HTML, CSS y JavaScript, veamos los proyectos que crearás durante el curso.

Proyecto 1: Barra de Navegación

Comenzarás el curso creando una barra de navegación con menús desplegables. Esta barra de navegación será responsiva, por lo que se expandirá o encogerá para adaptarse al tamaño de la pantalla. Si la pantalla es muy pequeña, se transformará automáticamente en una barra lateral.

💡 Dato: Siempre se mostrarán las opciones principales. Cuando el usuario haga clic en "About" o "Projects", se mostrará un menú desplegable con opciones adicionales.

Version de escritorio

Aquí puedes ver la versión de escritorio.

Version móvil

Esta es la versión móvil que verás en dispositivos pequeños.

💡 Dato: Esta técnica de ocultar y alternar la barra de navegación se utiliza con mucha frecuencia para optimizar al máximo el espacio disponible para el contenido.

Proyecto 2: Carrusel

Luego, crearás un carrusel (slider) con tres posiciones que cambiarán cuando el usuario haga clic en las flechas. Cada posición tendrá un título, un párrafo breve y una imagen circular.

💡Dato: Los controles deslizantes son útiles para compartir comentarios, citas y reseñas de los usuarios.

Proyecto 3: Landing Page

Finalmente, crearás una landing page (página web principal) paso a paso con CSS Grid.

Cuando el usuario haga clic en "Join us", se mostrará una ventana modal personalizada. Implementarás este modal con HTML, CSS y JavaScript paso a paso.

Te invitamos a ver el curso en el canal de YouTube de freeCodeCamp.org en español:

✍️ Curso creado por Jordan Alexander Cruz Garcia.

• YouTube: @AlexCGDesign
• Twitter: @alexcgdesign
• Linkedin: Jordan Alexander Cruz Garcia
• Instagram: @alexcg_design
• GitHub: AlexCGDesign
• Web Development Blog: https://www.alexcgdesign.com/blog

Cuando construyes una aplicación o escribes un programa, podrías necesitar codificar o decodificar con HTML Base64 en JavaScript.

Esto es posible gracias a las dos funciones auxiliares Base64 que son parte de la especificación de HTML y están soportados por todos los navegadores modernos.

En este artículo, aprenderás sobre Base64 y cómo funciona para convertir datos binarios, cadenas regulares, y un montón más sobre texto ASCII.

¿Qué es Base64?

Base64 es un grupo de esquemas de codificación de binario a texto que representa los datos binarios en formato de cadena ASCII. Es usado comúnmente para codificar datos que necesitan ser almacenados o transmitidos de una forma que puede ser representado directamente como texto.

La codificación Base64 funciona al mapear datos binarios a caracteres 64 desde el conjunto de caracteres ASCII. Los caracteres 64 usados en codificación Base64 son: A-Z, a-z, 0-9, +, y /.

El proceso de codificación toma 3 bytes de datos binarios y los mapea a 4 caracteres desde el conjunto de arriba, de tal forma que un solo carácter representa cada 6 bits de datos binarios. El resultado es una cadena de caracteres ASCII que puede ser transmitido o almacenado como texto.

La decodificación Base64 es el proceso inverso de codificación. Toma una cadena codificada en Base64 y mapea cada carácter a su representación binario de 6-bits. Los datos binarios resultantes es una reconstrucción de los datos binarios originales codificados a Base64.

Cómo codificar y decodificar HTML Base64 usando JavaScript

Para codificar y decodificar en JavaScript, usarás las funciones btoa() y atob() de JavaScript que están disponibles y soportados por los navegadores web.

Estas funciones auxiliares de JavaScript llevan nombres de comandos viejos de Unix para convertir binario a ASCII (btoa) y ASCII a binario (atob).

Puedes codificar una cadena a base64 en JavaScript usando la función btoa() y decodificar una cadena base64 usando la función atob(). Por ejemplo, si tienes una cadena almacenada en una variable, como se ve abajo, puedes primero codificarlo a Base64:

let miCadena = "Bienvenido a freeCodeCamp!";
let valorCodificado = btoa(miCadena);
console.log(valorCodificado); // V2VsY29tZSB0byBmcmVlQ29kZUNhbXAh

También puedes decodificar el valorCodificado de vuelta a su forma original usando la función atob(). Esta función toma el valor codificado y lo decodifica desde Base64:

let miCadena = "Bienvenido a freeCodeCamp!";
let valorCodificado = btoa(miCadena);
let valorDecodificado = atob(valorCodificado);
console.log(valorDecodificado); // Bienvenido a freeCodeCamp!

Ahora sabes cómo codificar y decodificar Base64 en JavaScript.

Más ejemplos de Codificación en JavaScript

También puedes codificar datos binarios a texto ASCII codificado en Base64 en JavaScript usando la función btoa():

let binaryData = new Uint8Array([72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]);
let stringValue = String.fromCharCode.apply(null, binaryData);
console.log(stringValue); // "Hello World"

let encodedValue = btoa(stringValue);
console.log(encodedValue); // SGVsbG8gV29ybGQ=

Arriba, primero convertiste los valores Unicode a caracteres y luego codificaste la cadena.

También puedes decodificar el texto ASCII codificado en Base64 a datos binarios en JavaScript usando la función atob():

let encodedValue = "SGVsbG8gV29ybGQ=";
let binaryData = new Uint8Array(atob(encodedValue).split("").map(function (c) {
    return c.charCodeAt(0);
}));
console.log(binaryData); // Uint8Array [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]

¡Resumiendo!

En este artículo, has aprendido lo que significa Base64, cómo funciona, y cuándo codificar y decodificar en JavaScript.

Base64 no está destinado a ser el método de encriptación seguro, ni está destinado a ser un método de compresión, porque codificar una cadena a Base64 típicamente resulta en una salida 33% más larga.

La codificación Base64 es usado comúnmente en JavaScript para situaciones como:

• Almacenar y transmitir datos binarios como texto.
• Encriptar datos donde los datos codificados se envían sobre un canal inseguro y decodificado en el otro fin. Sin embargo, no debería ser considerado como un método de encriptación seguro, ya que puede ser fácilmente decodificado.
• La transferencia de datos entre sistemas con conjuntos de caracteres distintos.
• Almacenar datos binarios en una base de datos.

¡Gracias por leer y disfruta programando!

Puedes acceder cerca de 185 artículos míos visitando mi sitio web. También puede usar el campo de búsqueda para ver si he escrito un artículo específico.

Encontré un problema cuando realicé una solicitud GET en mi proyecto de React que se suponía que devolvería un archivo que podía descargar. Para que el archivo se descargara correctamente, tuve que hacer que la respuesta fuera un blob.

Pero si ocurriera un error cuando el servidor devuelve un objeto JSON, no podría obtener ese objeto porque ya había definido el tipo de respuesta como un blob. Y si elimino la definición de blob, el archivo simplemente regresará como JSON normal y es posible que no se descargue correctamente.

Entonces, ¿cómo consigo que el blob lo descargue y recupere el objeto de error en caso de que algo no haya salido bien desde el servidor? Afortunadamente, hay una manera de lograrlo.

Esta guía te mostrará cómo conservar un objeto JSON para fines de manejo de errores y, al mismo tiempo, podrás descargar un archivo desde un servidor. Usaremos Axios, una biblioteca de JavaScript utilizada para realizar solicitudes HTTP, para realizar nuestra llamada API.

Paso 1: Definir el tipo de respuesta en la llamada API

Primero, define una función que realice la solicitud HTTP al servidor. En este caso, esperamos un archivo, por lo que el verbo HTTP convencional sería GET.

El tipo de respuesta para las solicitudes de Axios es JSON de forma predeterminada, pero queremos cambiarlo a un blob como este:

import axios from "axios";

const obtenerArchivoDelServidor = () => {
    const respuesta = await axios.get('https://api.some-server.com', {responseType: 'blob'})?.data;
    return respuesta;
}

Paso 2: Convertir el Blob a Texto

En el paso anterior, pudimos obtener nuestro archivo como un blob fácilmente. Pero cuando se trata de mostrar el error, necesitamos que se muestre como JSON.

Primero, necesitamos envolver la solicitud en una declaración try/catch para especificar qué debería suceder si se genera un error mientras se realiza la solicitud.

import axios from "axios";

const obtenerArchivoDelServidor = async () => {
    try {
        const respuesta = await axios.get('https://api.some-server.com', {responseType: 'blob'}).data;
    return respuesta;
    }
    catch (error) {
        let errorRespuesta = await error.response.data.text();
        const errorObjeto = JSON.parse(response);
        console.log(errorObjeto) // mostramos el error por consola
    }
}

La conversión de tipo se realizó dentro del bloque catch. Primero, convertimos los datos de respuesta a una cadena JSON usando el método text() de la API Fetch de JavaScript.

Finalmente, utilizamos el método JSON.parse() para convertir esa cadena a JSON real. De esa manera, podemos acceder al objeto en el formato previsto y al mismo tiempo recuperar el archivo del servidor si no hay ningún error.

Mostrando el objeto de error en la consola dará como resultado algo como esto:

{
  "statusCode": 400,
  "message": "Algún error ocurrió"
}

Conclusión

Este es uno de los problemas que enfrenté en la vida real, así que pensé en compartirlo en caso de que alguien más lo encuentre.

Déjame saber tu opinión sobre el artículo y no dudes en hacer cualquier sugerencia que creas que podría mejorar mi solución.

¡Gracias por leer!

La API Geolocation es una API estándar implementada en navegadores para recuperar la ubicación de las personas quienes están interactuando con una aplicación web.

Esta API permite a los usuarios que envíen su ubicación a una aplicación web para permitir servicios relevantes, tales como buscar un restaurante o un hotel cercano al usuario.

En este artículo, voy a mostrarte cómo se usa la API Geolocation con JavaScript y mostrar la ubicación actual del usuario usando una API de un mapa.

¡Comencemos!

Cómo acceder a la API Geolocation

Los Navegadores implementan la API Geolocation en el objeto navigator.geolocation. Puedes verificar si el navegador que usas soporta esta API de esta forma:

if ('geolocation' in navigator) {
  console.log('Geolocation está disponible');
} else {
  console.log('Geolocation NO está disponible');
}

Si el navegador responde con 'Geolocation está disponible', entonces puedes usar los métodos del objeto geolocation para obtener los datos del usuario.

La API Geolocation solamente está disponible bajo un contexto de HTTPS seguro, pero los navegadores modernos como Chrome y Firefox permiten el acceso a esta API desde localhost para propósitos de desarrollo.

Hay dos métodos que puedes usar para obtener datos de usuario:

• getCurrentPosition(): Regresa la posición actual del dispositivo.
• watchPosition(): Observa la posición del dispositivo continuamente hasta que el observador se detiene.

Ambos métodos de arriba reciben 3 argumentos de esta forma:

• success: una función callback para cuando se recuperan los datos de geolocalización (requerido).
• error: una función callback para cuando el método encuentra un error (opcional).
• options: un objeto definiendo parámetros extras cuando se ejecuta el método (opcional).

Cuando a la API Geolocation se accede por primera vez, una solicitud de permiso aparecerá cerca de la barra de URL como se muestra abajo:

Podrías estar familiarizado con la ventanita emergente de arriba. Cuando eliges bloquear la solicitud, entonces la función callback error se ejecutará por la API.

De otra forma, el callback success será ejecutado.

Cómo obtener la posición actual del Usuario

Para obtener la posición actual del usuario, puedes llamar a la función getCurrentPosition() desde el objeto, navigator.geolocation como se muestra abajo:

function success(position) {
  console.log(position);
}

navigator.geolocation.getCurrentPosition(success);

El método getCurrentPosition() enviará el objeto position a la función success() de arriba.

El objeto position contiene las coordenadas de ubicación y las marcas de tiempo mostrando cuando se recuperó la ubicación.

Lo de abajo es un ejemplo del objeto position:

{
  coords: {
    latitude: 1.314,
    longitude: 103.84425
    altitude: null
  },
  timestamp: 1708674456885
}

Usando la información de latitud y longitud, puedes determinar con precisión la ubicación del usuario y proveer información y servicios relevantes.

Por ejemplo, veamos cómo puedes enviar una solicitud al sitio web OpenStreetMap y determinar la ubicación actual del usuario usando los datos desde la API Geolocation.

OpenStreetMap es un proyecto de código abierto que provee un mapa geográfico gratuito de todo el planeta.

Necesitas crear un documento HTML con el siguiente contenido body:

<body>
  <button id="getLocation">Obtener ubicación</button>
  <br>
  <a id="locationResult" target="_blank"></a>
</body>

Cuando el usuario hace clic en el botón Obtener ubicación de arriba, accederemos a la API Geolocation, recuperando la ubicación del usuario, y proveer un enlace para ver la ubicación del usuario en un mapa.

Luego, crea una etiqueta <script> antes de cerrar la etiqueta </body> y escribe el siguiente código de JavaScript:

<script>
  const locationResult = document.querySelector('#locationResult');
  document.querySelector('#getLocation').addEventListener('click', () => {
    locationResult.textContent = 'Recuperando la Ubicacion del Usuario...'

    function success(position) {
      let { coords } = position;
      locationResult.textContent = 'Vea mi ubicacion en un mapa';
      locationResult.href = `https://www.openstreetmap.org?mlat=${coords.latitude}&mlon=${coords.longitude}`;
    }

    navigator.geolocation.getCurrentPosition(success);
  });
</script>

Cuando se hace clic al botón, ejecutaremos el método getCurrentPosition() y definimos el atributo href de la etiqueta <a> al sitio web OpenStreetMap, pasándole los datos latitude y longitude bajo la cadena de solicitud mlat y mlong.

Visitando el enlace, mostraría un mapa de la ubicación actual como se muestra abajo:

Y así es cómo obtienes la ubicación actual del usuario. Cómo procesar la información de ubicación depende de ti.

He creado un sitio web donde puedes probar esta funcionalidad en https://nathansebhastian.github.io/js-geolocation-api/.

Ahora, aprendamos sobre el método watchPosition().

Cómo observar la Posición del Usuario

El método watchPosition() continuará observando la posición del dispositivo cuando se llama. Ejecutará la función callback success cada vez que la ubicación del dispositivo cambie.

Puedes llamar al método como sigue:

function success(position) {
  const { coords } = position;
  console.log('Latitude data: ' + coords.latitude);
  console.log('Longitude data: ' + coords.longitude);
}

navigator.geolocation.watchPosition(success);

El método watchPosition() regresa un número ID que rastrea al observador. Si quieres hacer que el observador deje de enviar datos de ubicación, necesitas llamar al método clearWatch() y pasar el número ID:

function success(position) {
  const { coords } = position;
  console.log('Latitude data: ' + coords.latitude);
  console.log('Longitude data: ' + coords.longitude);
}

// Almacena el numero ID en una variable
const watcherID = navigator.geolocation.watchPosition(success);

// Detiene al observador
navigator.geolocation.clearWatch(watcherID);

Y eso es todo lo que hay que hacer al método watchPosition().

Cómo agregar el objeto Opciones

Ahora, veamos al objeto opcional options que puedes pasar a los métodos getCurrentPosition() y watchPosition().

El objeto options te permite personalizar el comportamiento de los métodos. Hay tres opciones que puedes poner:

• enableHighAccuracy: un valor Booleano que instruye al método que provea una posición más precisa. Esto incrementará el consumo de energía. El valor predeterminado es false.
• timeout: un valor numérico que representa cuánto espera el método por una respuesta. El valor predeterminado es Infinity, lo que significa que el método esperará hasta que una ubicación esté disponible.
• maximumAge: un valor numérico que representa cuánto tiempo la API Geolocation puede enviar los datos de ubicación previos. El valor predeterminado es 0, de esa forma la API siempre regresa la ubicación más reciente. Si se define Infinity, entonces la API siempre regresará el primer dato de ubicación recuperado.

Puedes usar el objeto opciones cuando se llama a los métodos de geolocation.

Por ejemplo:

const options = {
  enableHighAccuracy: true, // permite alta precisión
  timeout: 300000, // espera 5 minutos
};

function success(position) {
  console.log(position);
}

function error(error) {
  console.log(error);
}

// Ejecuta el método getCurrentPosition() con opciones personalizables
navigator.geolocation.getCurrentPosition(
  success,
  error,
  options
);

En el código de arriba, el método getCurrentPosition() usará el modo de alta precisión, y esperará 5 minutos por una respuesta desde el dispositivo.

Resumen

La API Geolocation es una API de JavaScript estándar que permite a una aplicación web acceder a los datos de ubicación del usuario.

Usando los datos de Geolocalización, puedes proveer servicios o contenido relevantes a la ubicación del usuario, tales como el transporte público o el hospital más cercano.

Si disfrutaste este artículo y quieres aprender más de mí, te recomiendo que mires mi nuevo libro Beginning Modern JavaScript.

El libro está diseñado para que sea fácil para los principiantes y accesible para cualquiera que quiera aprender JavaScript. Provee una guía amable de paso a paso para ayudarte a entender cómo usar JavaScript para crear una aplicación web dinámica.

Esta es mi promesa: Sentirás de verdad que entiendes lo que estás haciendo con JavaScript.

¡Nos vemos en otros artículos!

HTTP es la columna vertebral del internet moderno. En este curso basado en texto, aprenderás cómo funciona el protocolo HTTP y cómo se usa en el desarrollo web del mundo real.

Todos los ejemplos de código para este curso están en JavaScript, pero los conceptos de redes que aprenderás aquí aplican generalmente para todos los lenguajes de código. Si no estás familiarizado con JavaScript todavía, puede ver mi curso de JS aquí.

He incluido todo el material de aprendizaje que necesitarás aquí en este artículo, pero si te gustaría una experiencia más práctica, puedes tomar la versión interactiva de este curso con desafíos de código en Boot.dev aquí.

También he publicado una versión en vídeo gratuito de este curso en el canal de Youtube de freeCodeCamp (en inglés):

Si te gusta este vídeo, puedes revisar mis otros tutoriales en mi canal de Youtube Boot.dev aquí.

Con eso dicho, ¡comencemos a aprender sobre HTTP!

Tabla de Contenidos

1. ¿Por qué HTTP?
2. ¿Qué es DNS?
3. ¿Qué son los URIs?
4. Async/Await
5. Manejo de Errores
6. Cabeceras de HTTP
7. ¿Qué es JSON?
8. Métodos HTTP
9. Rutas URL y Parámetros
10. ¿Qué es HTTPs?

¿Por qué HTTP?

Comunicando en la web

Instagram sería bastante terrible si tuvieras que copiar manualmente tus fotos al teléfono de tu amigo cuando quisieras compartirlos. Las aplicaciones modernas necesitan ser capaz de comunicar información entre los dispositivos por internet.

• Gmail no solo almacena tus emails en variables en tu computadora, los almacena en computadoras en sus centros de datos.
• No pierdes los mensajes de Slack si tiras tu computadora en un lago – esos mensajes existen en los servidores de Slack.

¿Cómo funciona la comunicación web?

Cuando dos computadores se comunican entre ellos, necesitan usar las mismas reglas. Como hablante inglés no me puedo comunicar verbalmente con un hablante japonés, y de forma similar, dos computadoras necesitan hablar el mismo lenguaje para comunicarse.

Este "lenguaje" que las computadoras usan se llama un protocolo. El protocolo más popular para la comunicación web es HTTP, el cual significa Protocolo de Transferencia de Hipertexto.

Interactuando con un servidor

En este curso, un montón de ejemplos de código interactuarán con el PokeAPI. Provee datos sobre Pokemón.

Aquí hay algo de código que devuelve una lista de Pokemón de la PokeAPI:

const pokemonResp = await getItemData()

logPokemons(pokemonResp.results)

async function getItemData() {
  const response = await fetch('https://pokeapi.co/api/v2/pokemon/', {
    method: 'GET',
    mode: 'cors',
    headers: {
      'Content-Type': 'application/json'
    }
  })
  return response.json()
}

function logPokemons(pokemons) {
  for (const pokemon of pokemons) {
    console.log(pokemon.name)
  } 
}

Cuando ejecutas este código, notarás que ninguno de los datos que se imprimen en la consola fue generado, ¡dentro de nuestro código! Eso se debe a que los datos que devolvimos se envían por internet desde nuestros servidores por medio de HTTP. No te preocupes, explicaré más sobre eso más tarde.

Solicitudes y Respuestas HTTP

El núcleo de HTTP es un simple sistema de solicitud-respuesta. La computadora "solicitando", también conocido como el "cliente", le pide a otra computadora algo de información. Esa computadora, el "servidor" devuelve una respuesta con la información que fue solicitada.

Hablaremos sobre las especificaciones de cómo se formatean las "solicitudes" y "respuestas" luego. Por ahora, solo imagínalo como un simple sistema de pregunta-y-respuesta.

• Solicitud: "¿Cuáles son los ítems en el juego Fantasy Quest?"
• Respuesta: Una lista de los ítems en el juego Fantasy Quest

HTTP potencia a los sitios web

Como discutimos, HTTP, o el Protocolo de Transferencia de Hipertexto, es un protocolo diseñado para transferir información entre computadoras.

Hay otros protocolos para comunicarse por el internet, pero HTTP es el mas popular y es particularmente genial para los sitios web y aplicaciones web.

Cada vez que visitas un sitio web, tu navegador realiza una solicitud HTTP a ese servidor del sitio web. El servidor responde con todo el texto, imágenes, e información de estilo que tu navegador necesita para renderizar su lindo sitio web.

URLs HTTP

Un URL, o Localizador de Recursos Uniforme, es esencialmente la dirección de otra computadora, o "servidor" en el internet. Parte de la URL específica cómo alcanzar el servidor, y parte de él le dice al servidor qué información queremos - pero mas sobre eso luego.

Por ahora, es importante entender que una URL representa una pieza de información en otra computadora a la que queremos acceder. Podemos obtener acceso a él haciendo una solicitud, y leyendo la respuesta con el que el servidor responde.

Cómo usar las URLs en HTTP

El http:// al principio de una URL de un sitio web específica que el protocolo http será usado para comunicación.

Otros protocolos de comunicación usan URLs también, (por ello "Localizador de Recursos Uniforme"). Por eso necesitamos ser específicos cuando hacemos solicitudes HTTP prefijando la URL con http://.

Repaso sobre Solicitudes y Respuestas

• Un "cliente" es una computadora haciendo una solicitud HTTP
• Un "servidor" es una computadora respondiendo a una solicitud HTTP
• Una computadora puede ser un cliente, un servidor, ambos, o ninguno. "Cliente" y "servidor" son solo palabras que usamos para describir que están haciendo las computadoras dentro de un sistema de comunicación
• Los clientes envían solicitudes y recibe respuestas
• Los servidores reciben solicitudes y envían respuestas

La API Fetch de JavaScript

En este curso, estaremos usando la API fetch incorporada de JavaScript para hacer solicitudes HTTP.

La función fetch() se pone a nuestra disposición por el lenguaje JavaScript ejecutándose en el navegador. Todo lo que tenemos que hacer es proveerle los parámetros que requiere.

Cómo usar Fetch

const response = await fetch(url, settings)
const responseData = await response.json()

Iremos en profundidad sobre las diversas cosas que suceden en esta llamada fetch estándar después, pero cubramos algunas bases por ahora.

• response es el dato que es devuelto del servidor
• url es la URL a la que le estamos haciendo una solicitud
• settings es un objeto que contiene algunas opciones específicas de solicitud
• La palabra clave await le dice a JavaScript que espere hasta que la solicitud vuelva del servidor antes de continuar
• response.json() conviertes los datos de respuesta del servidor en un objeto de JavaScript

Mira si puedes encontrar el problema en este fragmento de código:

const pokemonResp = getItemData()

logPokemons(pokemonResp.results)

// el bug (error) está arriba de esta línea

async function getItemData() {
  const response = await fetch('https://pokeapi.co/api/v2/pokemon/', {
    method: 'GET',
    mode: 'cors',
    headers: {
      'Content-Type': 'application/json'
    }
  })
  return response.json()
}

function logPokemons(pokemons) {
  for (const pokemon of pokemons) {
    console.log(pokemon.name)
  } 
}

Pista: No estamos esperando que los datos sean devueltos por medio de la red.

Los Clientes Web

Un cliente web es un dispositivo realizando solicitudes a un servidor web. Un cliente puede ser de cualquier tipo de dispositivo pero frecuentemente es algo con el que los usuarios interactúan físicamente. Por ejemplo:

• Una computadora de escritorio
• Un teléfono móvil
• Una tablet

En un sitio web o una aplicación web, le llamamos al dispositivo del usuario el "front-end". Un cliente front-end realiza solicitudes a un servidor back-end.

Los Servidores Web

A este punto, la mayoría de los datos con los que has trabajado en tu código han sido simplemente generados y almacenados localmente en variables.

A medida que siempre usarás variables para almacenar y manipular datos mientras tu programa se ejecuta, la mayoría de los sitios web y aplicaciones usan un servidor web para almacenar, ordenar, y servidor esos datos de esa forma se queda por más tiempo que una sesión única, y pueden ser accedidos por múltiples dispositivos.

Escuchando y sirviendo datos

Similar a cómo un servidor en un restaurante te trae la comida a la mesa, un servidor web sirve recursos web, tales como páginas, imágenes, y otros datos. El servidor se activa y "escucha" solicitudes entrantes constantemente de esa forma en el segundo que recibe una nueva solicitud, puede enviar una respuesta apropiada.

El servidor es el back-end

Mientras el "front-end" de un sitio web o aplicación web es el dispositivo con el que el usuario interactúa, el "back-end" es el servidor que mantiene todos los datos almacenados en un lugar central. Si todavía estás confundido, mira este artículo comparando el desarrollo front-end y back-end.

Un servidor es solo una computadora

"Servidor" es solo el nombre que le damos a una computadora que está tomando el rol de servidor de servidor datos por medio de una conexión red.

Un buen servidor se activa y está disponible los 24 horas del día, los 7 días de la semana. Mientras tu laptop puede ser usado como un servidor, tiene mas sentido usar una computadora de un centro de datos que está diseñado para estar activo y ejecutándose constantemente.

¿Qué es DNS?

Direcciones Web

En el mundo real, usamos direcciones para ayudarnos a encontrar donde vive un amigo, dónde se encuentra un negocio, o dónde se está organizando una fiesta.

En computación, los clientes web encuentran otras computadoras a través de internet usando el Protocolo de Internet o direcciones IP.

Una dirección IP es una etiqueta numérica que sirve dos funciones principales:

1. Dirección de ubicación
2. Identificación de Red

Nombres de Dominio y Direcciones IP

Cada dispositivo conectado al internet tiene una dirección IP única. Cuando buscamos por internet, los dominios a la que navegamos todos están asociados con una dirección IP particular.

Por ejemplo, this URL de Wikipedia apunta a una página sobre cerdos en miniatura: https://es.wikipedia.org/wiki/Minicerdo. La porción de dominio del URL es es.wikipedia.org. es.wikipedia.org se convierte a una dirección IP específica, y esa dirección IP le dice a tu computadora exactamente a dónde comunicarse con esa página de Wikipedia.

Cloudflare es una compañía tech que provee un servidor HTTP público interesante que podemos usar para buscar la dirección IP de cualquier dominio. Mira este fragmento de código:

async function fetchIPAddress(domain) {
  const resp = await fetch(`https://cloudflare-dns.com/dns-query?name=${domain}&type=A`, {
    headers: {
      'accept': 'application/dns-json'
    }
  })
  const respObject = await resp.json()
  for (const record of respObject.Answer) {
    return record.data
  }
  return null
}

const domain = 'api.boot.dev'
const ipAddress = await fetchIPAddress(domain)
if (!ipAddress) {
  console.log('Algo estuvo mal en fetchIPAddress')
} else {
  console.log(`Direccion IP encontrado para el dominio ${domain}: ${ipAddress}`)
}

Para repasar, un "nombre de dominio" es parte de un URL. Es la parte que le dice a la computadora dónde se encuentra el servidor en el internet siendo convertido en una dirección IP numérica.

Cubriremos cómo es usado exactamente una dirección IP por tu computadora para encontrar una ruta al servidor en un curso de redes después. Por ahora, es importante entender que una dirección IP es lo que tu computadora está usando en un nivel bajo para comunicarse en una red.

Desplegar un sitio web real al internet es en realidad bastante sencillo. Involucra solamente un par de pasos:

1. Crear un servidor que hospeda tus archivos del sitio web y conectarlo al internet
2. Adquirir un nombre de dominio
3. Conectar el nombre de dominio a la dirección IP de tu servidor
4. ¡Tu servidor es accesible por medio de internet!

Como discutimos, el "nombre de dominio" o "nombre de hospedaje" es parte de una URL. Llegaremos a las otras partes de un URL luego.

Por ejemplo, la URL https://example.com/path tiene un nombre de host de example.com. Las porciones https:// y /path no son parte del mapeo nombre de dominio -> dirección IP que hemos estado aprendiendo.

Usando la API URL en JavaScript

La API URL está incorporado en JavaScript. Puedes crear un nuevo objeto URL como esto:

const urlObj = new URL('https://example.com/example-path')

Y luego puedes extraer solo el nombre de host:

const urlObj.hostname

Repaso de DNS

Así que hemos hablado sobre nombres de dominio y cuál es su propósito, pero no hemos hablado sobre el sistema que es usado para hacer esa conversión.

DNS, o el "Sistema de Nombre de Dominio", es el directorio de teléfono del internet. Los humanos se conectan a los sitios web a través de nombres de dominio, como Boot.dev.

El DNS "resuelve" estos nombres de dominio para encontrar las direcciones IP asociadas de esa forma los clientes web pueden cargar los recursos para la dirección específica.

¿Cómo funciona el DNS?

Iremos en mas detalle sobre DNS en un futuro curso, pero para darte una idea simplificada de cómo funciona, introduzcamos ICANN. ICANN es una organización sin fines de lucro que gestiona el DNS para todo el internet.

Cuando tu computadora intenta resolver un nombre de dominio, contacta con uno de los "servidores raíz" de ICANN cuyo dirección está incluida en tu configuración de red de la computadora.

Desde ahí, el servidor puede reunir los registros de dominio para un nombre de dominio específico desde su base de datos de DNS distribuido.

Si ves al DNS como una guía telefónica, ICANN sería el editor que mantiene la guía telefónica en impresión y disponible.

Sub-dominios

Aprendimos cómo un nombre de dominio se traduce a una dirección IP, el cual es solo una computadora en una red - frecuentemente el internet.

Un sub-dominio prefija un nombre de dominio, permitiendo a un dominio encaminar el tráfico de red a muchos servidores y recursos distintos.

Por ejemplo, el sitio web Boot.dev está hospedado en una computadora distinta de nuestro blog. Nuestro blog, encontrado en blog.boot.dev está hospedado en nuestro sub-dominio "blog".

¿Qué son los URIs?

Brevemente tocamos los URLs anteriormente, pero ahora indaguemos un poco más profundo en el tema.

Un URI, o Identificador de Recursos Uniforme, es una secuencia de caracteres única que identifica a un recurso que es (casi siempre) accedido por medio del internet.

Así como JavaScript tiene reglas de sintaxis, de la misma forma los URIs. Estas reglas ayudan en asegurar la uniformidad así cualquier programa puede interpretar el significado de la URI de la misma forma.

Los URIs vienen en dos tipos principales:

• URLs
• URNs

Nos enfocaremos específicamente en los URLs en este curso, pero es importante saber que los URLs son solamente un tipo de URI.

Los URLs tienen bastante secciones, algunas de las cuales son requeridos, otros no. Usemos la API URL para convertir una URL e imprimir todas las distintas partes. Aprenderemos mas sobre cada parte luego, por ahora, separemos y mostremos un URL.

function printURLParts(urlString) {
  const urlObj = new URL(urlString)
  console.log(`protocolo: ${urlObj.protocol}`)
  console.log(`nombre de usuario: ${urlObj.username}`)
  console.log(`contraseña: ${urlObj.password}`)
  console.log(`nombre de host: ${urlObj.hostname}`)
  console.log(`puerto: ${urlObj.port}`)
  console.log(`nombre de la ruta: ${urlObj.pathname}`)
  console.log(`buscar: ${urlObj.search}`)
  console.log(`hash: ${urlObj.hash}`)
}

const fantasyQuestURL = 'http://dragonslayer:pwn3d@fantasyquest.com:8080/maps?sort=rank#id'
printURLParts(fantasyQuestURL)

Disección adicional de un URL

Hay 8 partes principales de un URL, aunque no todas las secciones están presentes siempre. Cada pieza juega un rol específico en ayudar a los cliente localizar el recurso especificado.

Las 8 secciones son:

• El protocolo es requerido
• Los nombres de usuarios y contraseñas son opcionales
• Un dominio es requerido
• El puerto predeterminado para un protocolo dado es usado si uno no fue provisto
• La ruta ( / ) predeterminada es usada si uno no es provisto
• Una solicitud es opcional
• Un fragmento es opcional

No te obsesiones en memorizar esto

Ya que los nombres para las diferentes secciones son usados con frecuencia indistintamente, y ya que no todas las partes del URL están siempre presentes, puede ser difícil mantener las cosas en orden.

¡No te preocupes en memorizar esto! Intenta familiarizarte con estos conceptos de URL desde un alto nivel. Como cualquier buen desarrollador, puedes buscarlo nuevamente la próxima vez que necesites saber más.

El Protocolo

El "protocolo", también referido como el "esquema", es el primero componente de un URL. Su finalidad es definir las reglas mediante los cuales se muestran los datos que se comunican, se codifican, o se formatean.

Algunos ejemplos de distintos protocolos de URL:

• http
• ftp
• mailto
• https

Por ejemplo:

• http://example.com
• mailto:noreply@fantasyquest.app

No todos los esquemas requieren un "//"

El "http" en un URL siempre es seguido por ://. Todos los URLs tienen el dos puntos, pero la parte // se incluye solamente para los esquemas que tienen un componente de autoridad.

Como puedes ver arriba, el esquema mailto no usa un componente de autoridad, ya que no necesita las barras.

Puertos de URL

El puerto en un URL es un punto de virtual donde las conexiones de red son hechas. Los puertos son manejados por un sistema operativo de la computadora y son enumerados desde 0 a 65,535.

Cada vez que te conectas a otra computadora por medio de una red, te estás conectando a un puerto específico en esa computadora, el cual está siendo escuchado por una pieza de software específica en esa computadora. Un puerto puede ser usado solamente por un programa a la vez, por eso hay demasiados puertos posibles.

El componente puerto de un URL no es visible frecuentemente cuando se navega en sitios normales en internet, porque el 99% del tiempo estás usando los puertos predeterminados para los esquemas HTTP y HTTPS: 80 y 443, respectivamente.

Cada vez que no estés usando un puerto predeterminado, necesitas especificarlo en el URL. Por ejemplo, el puerto 8080 es usado frecuentemente por desarrolladores web cuando están ejecutando su servidor en "modo en prueba" de esa forma no usan el puerto "80" de "producción".

Rutas de URL

En los primeros días de internet, la ruta de un URL con frecuencia era un reflejo de la ruta del archivo en el servidor al recurso que el cliente estaba solicitando.

Por ejemplo, si el sitio web https://exampleblog.com tendría un servidor web ejecutándose en su directorio /home, entonces una solicitud al URL https://exampleblog.com/site/index.html podría esperar que el archivo index.html desde dentro del directorio /home/site sea devuelto.

Los sitios web solían ser muy sencillos. Eran solo una colección de documentos de texto almacenados en un servidor. Un simple servidor de software podría manejar solicitudes HTTP entrantes y responder con los documentos de acuerdo al componente ruta de las URLs.

En estos días, no siempre es sobre el sistema de archivos

En muchos servidores web modernos, una ruta de URL no es un reflejo de la jerarquía del sistema de archivos del servidor. Las rutas en las URLs son esencialmente otro tipo de parámetro que puede ser pasado al servidor cuando se hace una solicitud.

Convencionalmente, dos rutas de URL distintas deberían denotar diferentes recursos. Por ejemplo, distintas páginas en un sitio web, o tal vez diferentes tipos de datos desde un servidor de juegos.

Parámetros de Solicitud

Los parámetros de Solicitud en un URL no siempre están presentes. En el contexto de los sitios web, los parámetros de solicitud con frecuencia son usados para hacer analíticas de marketing o para cambiar una variable en la página web. Con los URLs de sitios web, los parámetros de solicitud raramente cambian que página estás viendo, aunque frecuentemente cambiarán el contenido de la página.

Con eso dicho, los parámetros de solicitud pueden ser usados para cualquier cosa que el servidor elija, tal como la ruta de URL.

Cómo usa Google los parámetros de solicitud

1. Abre una nueva pestaña y ve a google.com
2. Busca "hello world"
3. Mira a tu URL actual. Debería comenzar con https://www.google.com/search?q=hello+world
4. Cambia el URL para que diga https://www.google.com/search?q=hello+universe
5. Presiona "enter"

Deberías ver nuevos resultados de búsqueda para la solicitud "hello universe". Google eligió usar los parámetros de solicitud para representar el valor de tu solicitud de buśqueda. Esto tiene sentido - cada página de resultado de búsqueda es esencialmente la misma página en lo que respecta la estructura y el formato - solo te muestra diferentes resultados basado en la solicitud de búsqueda.

Async/Await

Probablemente estés familiarizado con código síncrono, el cual significa código que se ejecuta en secuencia. Cada línea de código se ejecuta en orden, uno después del otro.

Ejemplo de código síncrono:

console.log("Me imprimo primero");
console.log("Me imprimo segundo");
console.log("Me imprimo tercero");

El Código asíncrono o async se ejecuta en paralelo. Esto significa que el código mas abajo se ejecuta al mismo tiempo que una línea de código anterior todavía se está ejecutando. Una buena forma de visualizar esto es con la función setTimeout() de JavaScript.

setTimeout acepta una función y un número de milisegundos como entradas. Espera hasta que el número de milisegundos ha transcurrido, y luego ejecuta la función que le fue dada.

Ejemplo de código asíncrono:

jsconsole.log("Me imprimo primero");
setTimeout(() => console.log("Me imprimo tercero porque estoy esperando 100 milisegundos"), 100);
console.log("Me imprimo segundo");

Intenta alterar los tiempos de espera en el código asíncrono abajo para que se impriman los mensajes en el orden correcto:

const craftingCompleteWait = 0
const combiningMaterialsWait = 0
const smeltingIronBarsWait = 0
const shapingIronWait = 0

// No toques nada debajo de esta línea

setTimeout(() => console.log('Iron Longsword Complete!'), craftingCompleteWait)
setTimeout(() => console.log('Combining Materials...'), combiningMaterialsWait)
setTimeout(() => console.log('Smelting Iron Bars...'), smeltingIronBarsWait)
setTimeout(() => console.log('Shaping Iron...'), shapingIronWait)

console.log('Firing up the forge...')

await sleep(2500)
function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms))
}

Orden esperado:

1. Firing up the forge..
2. Smelting Iron Bars...
3. Combining Materials...
4. Shaping Iron...
5. Iron Longsword Complete!

¿Por qué queremos código asíncrono?

Intentamos mantener la mayoría de nuestro código síncrono porque es mas fácil de entender, y por lo tanto frecuentemente tiene menos errores. pero a veces necesitamos que nuestro código sea asíncrono.

Por ejemplo, cada vez que actualices tus opciones de usuario en un sitio web, tu navegador necesitará comunicar esas nuevas opciones al servidor. El tiempo que toma tu solicitud de HTTP para que viaje físicamente a través de todo el cableado del internet es usualmente cerca de los 100 milisegundos. Sería una experiencia muy pobre si tu sitio web se fuera a congelar mientras esperas que la solicitud de red finalice. ¡Inclusive no serías capaz de mover el mouse mientras esperas!

Haciendo solicitudes de red de manera asíncrona, le permitimos a la página web que ejecute otro código mientras espera la respuesta HTTP que regrese. Esto mantiene a la experiencia de usuario ágil y amigable.

Como regla general, solamente deberíamos usar código asíncrono cuando lo necesitamos por razones de rendimiento. Código síncrono es mas sencillo.

Promesas en JavaScript

Una Promesa en JavaScript es muy similar a hacer una promesa en el mundo real. Cuando hacemos una promesa, estamos haciendo un compromiso para algo.

Por ejemplo, Te prometo explicarte las promesas de JavaScript. Mi promesa para ti tiene dos salidas potenciales: o está concluida, lo que significa que eventualmente te expliqué las promesas, o está rechazada, lo que significa que fallé en mantener mi promesa y no te expliqué las promesas.

El Objeto Promesa representa la eventual conclusión o rechazo de nuestra promesa y mantiene los valores resultantes. Por el momento, mientras esperamos que la promesa se cumpla, nuestro código continúa ejecutándose.

Las promesas son la forma moderna más popular para escribir código asíncrono en JavaScript.

Cómo declarar una Promesa

Aquí hay un ejemplo de una promesa que resolverá y devolverá la cadena "resuelto!" o rechazara y regresará la cadena "rechazado!" después de 1 segundo.

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (getRandomBool()) {
      resolve("resuelto!")
    } else {
      reject("rechazado!")
    }
  }, 1000)
})

function getRandomBool(){
  return Math.random() < .5
}

Cómo usar una Promesa

Ahora que hemos creado una promesa, ¿cómo lo usamos?

El objeto Promise tiene .then y .catch lo cual hace más fácil el trabajo. Imagínate a .then como el seguimiento esperado a una promesa, y .catch como el seguimiento "algo estuvo mal".

Si una promesa resuelve, su función .then se ejecutará. Si la promesa rechaza, su método .catch se ejecutará.

Aquí hay un ejemplo de usar .then y .catch con la promesa que hicimos arriba:

promise.then((message) => {
    console.log(`La promesa ${message} finalmente`)
}).catch((message) => {
    console.log(`La promesa ${message} finalmente`)
})

// imprime:
// La promesa se resolvio finalmente!
// o
// la promesa se rechazo finalmente!

¿Por qué las Promesas son útiles?

Las Promesas son la forma mas limpia (pero no la única) para manejar el escenario común donde necesitamos realizar solicitudes a un servidor, que es típicamente hecho por medio de una solicitud HTTP. De hecho, la función fetch() que estuvimos usando anteriormente en el curso, ¡devuelve una promesa!

I/O, o "input/output"

Casi cada vez que usas una promesa en JavaScript será para manejar algo de I/O. I/O, o input/output, se refiere a cuando nuestro código necesita interactuar con sistema fuera (relativamente) del sencillo mundo de las variables y funciones locales.

Ejemplos comunes de I/O incluyen:

• Solicitudes HTTP
• Leer archivos desde el disco duro
• Interactuar con un dispositivo Bluetooth

Las Promesas nos ayudan realizar I/O sin forzar a todo nuestro programa que se congele mientras esperamos una respuesta.

Las Promesas y la palabra clave "await"

Hemos usado la palabra clave await unas pocas veces en este curso, así que es tiempo que finalmente entendamos que está pasando por debajo.

La palabra clave await se usa para esperar a una promesa que se resuelva. Una vez que se ha resuelto, la expresión await devuelve el valor de la Promise resuelta.  

Ejemplo con el callback .then

promise.then((message) => {
  console.log(`Resuelto con ${message}`)
}).

Ejemplo de una promesa con await

const message = await promise
console.log(`Resuelto con ${message}`)

La palabra clave async

Ya que la palabra clave await puede ser usado en lugar de .then() para resolver una promesa, la palabra clave async puede ser usado en lugar de new promise() para crear una nueva promesa.

Cuando una función es prefijado con la palabra clave async, automáticamente devuelve una promesa. Esa promesa resuelve con el valor que código devuelve desde la función. Puedes imaginarte a async como que "envuelve" tu función dentro de una promesa.

Estos son equivalentes:

new Promise()

function getPromiseForUserData(){
  return new Promise((resolve) => {
    fetchDataFromServerAsync().then(function(user){
      resolve(user)
    })
  })
}

const promise = getPromiseForUserData()

Async

async function getPromiseForUserData(){
  const user = await fetchDataFromServer()
  return user
}

const promise = getPromiseForUserData()

.then() vs await

En los primeros días de los navegadores web, las promesas y la palabra clave await no existían, así que la única forma de hacer algo de manera asíncrona era usar los callbacks.

Una "función callback" es una función que le pasas a otra función. Esa función luego llama a tu callback. La función setTimeout que hemos usado atrás es un buen ejemplo.

function callbackFunction(){
  console.log("calling back now!")
}
const milliseconds = 1000
setTimeout(callbackFunction, milliseconds)

Mientras que inclusive la sintaxis .then() es generalmente más fácil de usar que los callbacks sin la API Promise, la sintaxis await los hace aun mas fácil de usar. Deberías usar async y await en vez de .then y new Promise() como regla general.

Para demostrar, ¿cuáles de estos es más fácil de entender?

fetchUser.then(function(user){
  return fetchLocationForUser(user)
}).then(function(location){
  return fetchServerForLocation(location)
}).then(function(server){
  console.log(`El servidor es ${server}`)
});

const user = await fetchUser()
const location = await fetchLocationForUser(user)
const server = await fetchServerForLocation(location)
console.log(`El servidor es ${server}`)

Ambos hacen la misma cosa, pero el ejemplo segundo es, ¡mucho mas fácil de entender! Las palabras claves async y await no fueron lanzados sino hasta después de la API .then, lo cual es la razón de por que hay todavía mucho código .then obsoleto por ahí afuera.

Manejo de Errores

Cuando algo sale mal mientras un programa se ejecuta, JavaScript usa el paradigma try/catch para manejar esos errores. Try/catch es bastante común, y Python usa un mecanismo similar.

Primero, se lanza un error

Por ejemplo, digamos que intentamos acceder a un propiedad de una variable no definida. JavaScript automáticamente "lanzará" un error.

const speed = car.speed
// El codigo se rompe con el siguiente error:
// "ReferenceError: car no está definido"

Intentando y capturando errores

Al envolver ese código en un bloque try/catch, podemos manejar el caso donde car todavía no es definido.

try {
  const speed = car.speed
} catch (err) {
  console.log(`Un error se disparó: ${err}`)
  // el codigo imprime de forma clara:
  // "Un error se disparó: ReferenceError: car no está definido"
}

Bugs vs Errores

Manejar errores por medio de try/catch no es lo mismo que depurar. Igualmente, los errores no son lo mismo que los bugs.

• Un buen código sin bugs todavía puede producir errores que son manejados de manera cuidadosa
• Los Bugs son, por definición, pedazitos de código que no están funcionando como se esperaba

¿Qué es Depurar?

"Depurar" un programa es el proceso de revisar tu código para encontrar donde no se está comportando como se espera. Depurar es un proceso manual realizado por el desarrollador.

Ejemplos de depuración:

• Agregar un parámetro faltante a una llamada de función
• Actualizar un URL roto el cual una llamada HTTP estaba intentando de alcanzar
• Arreglar un componente selector de fechas en una aplicación que no se estaba mostrando apropiadamente

¿Qué es el Manejo de Errores?

"Manejo de errores" es código que puede manejar casos específicos esperados en tu programa. El Manejo de Errores es un proceso automatizado que diseñamos en nuestro código de producción para protegerlo de cosas como conexiones de internet débiles, mala entrada de usuario, o bugs en el código de otras personas con los que tenemos que interactuar.

Ejemplos de manejos de errores:

• Usando un bloque try/catch para detectar un problema con entradas de usuario
• Usando un bloque try/catch para que falle de manera segura cuando no hay una conexión de internet disponible

Brevemente, no uses try/catch para intentar manejar bugs

Si tu código tiene un bug, try/catch no te ayudará. Necesitas ir a encontrar el bug y arreglarlo.

Si algo que está fuera de tu control puede producir problemas en tu código, deberías usar try/catch u otra lógica de manejo de errores para tratarlo.

Por ejemplo, podría haber un mensaje en un juego para los usuarios para que se escriba un nuevo nombre de personaje, pero no queremos que usen puntuación. Validar sus entradas y mostrar un mensaje de error si algo está mal sería una forma de "manejar errores".

async/await hace el manejo de errores mas fácil

try y catch son la forma estándar de manejar errores en Javascript, el problema es, que la API Promise original con .then no nos permitió hacer uso de los bloques try y catch.

Afortunadamente, las palabras claves async y await sí lo permite - aún otra razón para elegir la nueva sintaxis.

El callback .catch() en las promesas

El método .catch() funciona de manera similar al método .then(), pero se dispara cuando un promesa es rechazada en vez de resuelta.

Ejemplo con los callbacks .then y .catch

fetchUser().then(function(user){
  console.log(`usuario buscado: ${user}`)
}).catch(function(err){
  console.log(`un error fue disparado: ${err}`)
});

Ejemplo de una promesa con await

try {
  const user = await fetchUser()
  console.log(`usuario buscado: ${user}`)
} catch (err) {
  console.log(`un error fue disparado: ${err}`)
}

Como puedes ver, la versión async/await se parece como un try/catch normal de JavaScript.

Cabeceras de HTTP

Una cabecera de HTTP permite a los clientes y servidor que pasen información adicional con cada solicitud o respuesta. Las cabeceras son pares de clave-valor que no distinguen entre mayúsculas y minúsculas que pasan metadatos adicionales sobre la solicitud o respuesta.

Las solicitudes HTTP de un navegador web llevan consigo muchas cabeceras, incluyendo pero no limitado a:

• El tipo de cliente (por ejemplo Google Chrome)
• El Sistema Operativo (por ejemplo Windows)
• El idioma preferido (por ejemplo Inglés US)

Como desarrolladores, también podemos definir cabeceras personalizadas en cada solicitud.

La API Headers

La API Headers nos permite realizar varias acciones en nuestras cabeceras de solicitud y de respuesta tales como devolverlos, establecerlos, y removerlos. Podemos acceder a las cabeceras del objeto a través de las propiedades Request.headers y Response.headers.

Cómo usar las Herramientas de Desarrollo del Navegador

Los navegadores web modernos le ofrecen a los desarrolladores un conjunto poderoso de herramientas de desarrollado. Las Herramientas de Desarrollo son el mejor amigo de los desarrolladores web front-end. Por ejemplo, usando las herramientas de desarrollo puedes:

• Ver la salida en consola de JavaScript de la página web
• Inspeccionar el código HTML, CSS y JavaScript de la página
• Ver solicitudes red y respuestas, juntamente con sus cabeceras

El método para acceder las herramientas de desarrollo de navegador a navegador. Si estás en Chrome, puedes hacer clic derecho en cualquier parte dentro de una página web y hacer clic en la opción "inspect". Sigue este enlace para mas información en cómo acceder a las herramientas de desarrollo.

La pestaña red

Mientras todas las pestañas dentro de las herramientas de desarrollo son muy útiles, nos estaremos enfocando en la pestaña de Red en este capitulo así podemos jugar con las cabeceras de HTTP.

La pestaña Red monitorea la actividad de red del navegador y registrar todas las solicitudes y respuestas que el navegador hace, incluyendo cuanto tiempo toma cada una de esas solicitudes y respuestas para que se procese completamente.

Si navegas a la pestaña Red y no ves ninguna solicitud aparecer, intenta refrescar la pagina.

¿Por qué las cabeceras son útiles?

Las cabeceras son útiles por varias razones, desde el diseño a la seguridad. Pero mas frecuentemente las cabeceras son usadas como metadatos o datos sobre la solicitud.

Así que, por ejemplo, digamos que queríamos pedir un nivel de jugador de un servidor de juegos. Necesitamos enviar el ID del jugador al servidor de esa forma sabe de qué jugador devuelve la información. Ese ID es mi solicitud, no es información sobre mi solicitud.

Un buen ejemplo de un caso de uso para las cabeceras es autenticación. Con frecuencia las credenciales de un usuario son incluidas en las cabeceras de solicitud. Las credenciales no tienen que ver mucho con la solicitud en sí misma, sino simplemente autoriza al solicitador ser admitido de hacer la solicitud en cuestión.

¿Qué es JSON?

Notación de Objeto de JavaScript, o JSON, es un estándar para representar datos estructurados basado en la sintaxis de objetos de JavaScript.

JSON es comúnmente usado para transmitir datos en aplicaciones web usando HTTP. Las solicitudes HTTP con fetch() que estuvimos usando en este curso han estado devolviendo datos como JSON.

Sintaxis de JSON

Porque ya entendimos cómo lucen los objetos de JavaScript, entender JSON es fácil. JSON es solo un objeto de JavaScript en cadenas. Lo siguiente son datos en JSON válidos:

{
    "movies": [
        {
            "id": 1,
            "genre": "Action",
            "title": "Iron Man",
            "director": "Jon Favreau"
        },
        {
            "id": 2,
            "genre": "Action",
            "title": "The Avengers",
            "director": "Joss Whedon"
        }
    ]
}

Cómo convertir Respuestas HTTP a JSON

JavaScript nos provee algunas herramientas fáciles para ayudarnos a trabajar con JSON. Después de hacer una solicitud HTTP con la API fetch(), obtenemos un objeto Response. Ese objeto respuesta nos ofrece algunos métodos que nos ayudan en interactuar con la respuesta.

Un método como tal es el método .json(). El método .json() toma el stream respuesta devuelto por una solicitud con fetch y devuelve una Promesa que se convierte en un objeto JavaScript desde el cuerpo JSON de la respuesta HTTP.

const resp = await fetch(...)
const javascriptObjectResponse = await resp.json()

Es importante notar que el resultado del método .json() NO es JSON. Es el resultado de tomar datos JSON desde el cuerpo de la respuesta HTTP y convertir la entrada en un Objeto JavaScript.

Revisión de JSON

JSON es una representación en cadena de un objeto JavaScript, lo cual lo hace perfecto para guardar en un archivo o enviarlo en una solicitud HTTP.

Recuerda, un objeto JavaScript es algo que existe solamente dentro de tus variables del programa. Si queremos enviar un objeto fuera de nuestro programa, por ejemplo, a través de internet en una solicitud HTTP, necesitamos convertirlo a JSON primero.

No es usado solo en JavaScript

Solo porque JSON significa Notación de Objeto de JavaScript no significa que ¡solamente es usado por JavaScript! JSON es un estándar común que es reconocido y soportado por todos los lenguajes principales de programación.

Por ejemplo, aunque la API back-end de Boot.dev está escrito en Go, todavía usamos JSON como el formato de comunicación entre el front-end y el back-end.

A propósito, este curso ha tratado sobre interactuar con servidores back-end desde una perspectiva de front-end. Pero si estás interesado sobre cómo te puedes convertir en un ingeniero back-end, mira esta guía que he preparado. Como referencia, le toma a la mayoría de gente entre 6-18 meses para aprender lo suficiente para tener su primer trabajo de back-end.

Casos de uso de JSON Comunes

• En solicitudes HTTP y cuerpos de respuesta
• Como formatos para archivos de texto. Archivos .json son usados frecuentemente como archivos de configuración
• En bases de datos NoSQL como MongoDB, ElasticSearch, y Firestore

Cómo pronunciar JSON

Lo pronuncio "Yey-sawn", pero también he oído a la gente pronunciarlo "Yason", justo como su nombre.

Cómo enviar JSON

JSON no es algo que obtenemos del servidor, también podemos enviar datos JSON.

En JavaScript, dos de los métodos principales a los que tenemos acceso son JSON.parse(), y JSON.stringify().

JSON.stringify()

JSON.stringify() es útil particularmente para enviar JSON.

Como podrías esperar, el método stringify() de JSON hace lo opuesto de convertir. Toma un objeto JavaScript o un valor como entrada y lo convierte en una cadena. Esto es útil cuando necesitamos serializar los objetos en cadenas para enviarlos a nuestro servidor o almacenarlos en una base de datos.

Aquí hay un fragmento de código que envía una carga útil (payload en inglés) JSON a un servidor remoto:

async function sendPayload(data, headers) {
  const response = await fetch(url, {
    method: 'POST',
    mode: 'cors',
    headers: headers,
    body: JSON.stringify(data)
  })
  return response.json()
}

Cómo convertir JSON

El método JSON.parse() toma una cadena JSON como entrada y construye el valor/objeto JavaScript descrito por la cadena. Esto nos permite trabajar con el JSON como si fuese un objeto JavaScript normal.

Viendo que los objetos JSON tienen una estructura tipo árbol, puede ser útil para saber cómo recorrerlos recursivamente si es necesario.

const json = '{"title": "Avengers Endgame", "Rating":4.7, "inTheaters":false}';
const obj = JSON.parse(json)

console.log(obj.title)
// Avengers Endgame

XML

No podemos hablar sobre JSON sin mencionar a XML. Lenguaje de Marcado Extensible, o XML es un formato basado en texto para representar información estructurada, así como JSON - solo que se ve un poco distinto.

XML es un lenguaje de marcado como HTML, pero es mas generalizado en el hecho de que no usa etiquetas predefinidas. Así como las claves de objetos JSON puede ser llamados de cualquier forma, las etiquetas XML también pueden tener cualquier nombre.

<root>
  <id>1</id>
  <genre>Action</genre>
  <title>Iron Man</title>
  <director>Jon Favreau</director>
</root>

Los mismos datos en formato JSON:

{
  "id": "1",
  "genre": "Action",
  "title": "Iron Man",
  "director": "Jon Favreau"
}

¿Por qué usar XML?

XML y JSON ambos logran tareas similares, así que, ¿cuál deberías usar?

XML solía ser usado para las mismas cosas que JSON hoy en día es usado. Archivos de configuración, cuerpos HTTP, y otros casos de uso de transferencia de datos pueden funcionar sin problemas usando JSON o XML. Este es mi consejo: hablando de forma general, si JSON funciona, deberías preferirlo por sobre XML en estos días. JSON es mas liviano, mas fácil de leer, y tiene mejor soporte en la mayoría de lenguajes de programación modernos.

Hay algunos casos donde XML podría ser lo mejor, o tal vez inclusive la opción necesaria, pero esos casos serán raros.

Métodos HTTP

HTTP define un conjunto de métodos que usamos cada vez que hacemos una solicitud. Hemos usado algunos de estos métodos en ejercicios previos, pero es tiempo de profundizarlos para entender las diferencias y casos de uso que hay por detrás de los distintos métodos.

El método GET

El método GET se usa para "obtener" una representación de un recurso especificado. No estás quitando los datos del servidor, sino que obtienes una representación, o copia, del recurso en su estado actual.

Una solicitud get es considerado un método seguro para llamar mútiples veces porque no altera el estado del servidor.

Como hacer una Solicitud GET usando la API Fetch

El método fetch() acepta un parámetro objeto init opcional como su segundo argumento que podemos usar para definir cosas como:

• method: El método HTTP de la solicitud, como GET
• headers: Las cabeceras para enviar
• mode: Usado para seguridad, hablaremos sobre esto en cursos futuros
• body: El cuerpo de la solicitud. Frecuentemente codificado como JSON

Ejemplo de una solicitud GET usando fetch:

await fetch(url, {
  method: 'GET',
  mode: 'cors',
  headers: {
    'sec-ch-ua-platform': 'macOS'
  }
})

¿Por qué usamos métodos HTTP?

Como mencionamos antes, el propósito primario de los métodos HTTP es indicar al servidor lo que queremos hacer con el recurso que intentamos interactuar.

Al final del día, un método HTTP es solo una cadena, como GET, POST, PUT, o DELETE. Pero por convención, los desarrolladores back-end casi siempre escribe su código de servidor de manera que los métodos corresponden con diferentes acciones "CRUD".

Las acciones "CRUD" son:

• Create (Crear)
• Read (Leer)
• Update (Actualizar)
• Delete (Eliminar)

La mayor parte de la lógica en la mayoría de las aplicaciones web es la lógica "CRUD". La interfaz web permite a los usuarios crear, leer, actualizar y eliminar varios recursos.

Imagínate un sitio de red social - los usuarios básicamente crean, leen, actualizan y eliminar sus post sociales. También están creando, leyendo, actualizando y eliminando sus cuentos de usuario. ¡Es CRUD hasta el final!

Como sucede, los 4 métodos HTTP mas comunes se mapean muy bien a las acciones CRUD:

• POST = crear
• GET = leer
• PUT = actualizar
• DELETE = eliminar

Solicitudes POST

Una solicitud POST HTTP envía datos a un servidor, típicamente para crear un nuevo recurso. El body de la solicitud es el payload que está siendo enviado al servidor con la solicitud. Su tipo es indicado por la cabecera Content-Type.

Cómo agregar un body

El body de la solicitud es el payload que está siendo enviado al servidor con la solicitud. Su tipo es indicado por la cabecera Content-Type - para nosotros, eso va a ser JSON.

Las solicitudes POST no son generalmente seguros para llamar múltiples veces, porque altera el estado del servidor. No querrías crear accidentalmente 2 cuentas para el mismo usuario, por ejemplo.

await fetch(url, {
  method: 'POST',
  mode: 'cors',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})

Códigos de Estado HTTP

Ahora que entendemos cómo escribir solicitudes HTTP desde cero, necesitamos aprender cómo asegurar que el servidor está haciendo lo que queremos.

Anteriormente en el curso, aprendimos cómo acceder a las herramientas de desarrollo del navegador y usar esas herramientas para inspeccionar las solicitudes HTTP. Podemos usar el mismo proceso para verificar las solicitudes que estamos haciendo y verificar lo que están haciendo así podemos abarcar problemas potenciales.

Cuando se mira a las solicitudes, podemos ver el Código de Estado de la solicitud para obtener alguna información si la solicitud fue exitosa o no.

• 100-199: Respuestas informativas. Estos son muy raros
• 200-299: Respuestas exitosas. Con suerte, ¡la mayoría de las respuestas son 200's!
• 300-399: Mensajes de redirección. Estos sin típicamente invisibles porque el navegador o el cliente HTTP automáticamente hará la redirección
• 400-499: Errores de cliente. Verás a estos frecuentemente, especialmente cuando intentes depurar una aplicación cliente
• 500-599: Errores de servidor. Verás a estos a veces, usualmente solo si hay un error en el servidor

Aquí hay algunos de los códigos de estado mas comunes, pero puedes ver una lista completa aquí si estás interesado.

• 200 - OK. Este es de lejos el código mas común, significa que todo funcionó como se esperaba.
• 201 - Creado. Esto significa que un recurso fue creado exitosamente. Típicamente en respuesta a una solicitud POST.
• 301 - Movido permanentemente. Esto significa que el recurso fue movido a un nuevo lugar, y la respuesta incluirá donde se encuentra ese nuevo lugar. Los sitios web frecuentemente usan redirecciones 301 cuando cambian su nombre de domino, por ejemplo.
• 400 - Mala solicitud. Un error general indicando al cliente que cometió un error en la solicitud.
• 403 - No autorizado. Esto significa que el cliente no tiene los permisos correctos. Tal vez no incluyeron una cabecera de autorización requerida, por ejemplo.
• 404 - No encontrado. Verás esto en sitios web con bastante frecuencia. Significa que el recurso no existe.
• 500 - Error de servidor Interno. Esto significa que algo estuvo mal en el servidor, posiblemente un error en su final.

No necesitas memorizarlos

Necesitas saber lo básico, como "2XX está bien", "4XX es un error de cliente", y "5XX es un error de servidor". Con eso dicho, no necesitas memorizar todos los códigos, son fáciles de buscar.

¡Miremos algunos códigos de estado!

La propiedad .status en un objeto Response te dará el código. Aquí hay un ejemplo:

async function getStatusCode(url, headers) {
  const response = await fetch(url, {
    method: 'GET',
    mode: 'cors',
    headers: headers
  })
  return response.status
}

Método PUT

El método PUT HTTP crea un nuevo recurso o reemplaza una representación del recurso objetivo con los contenidos del body de la solicitud. En corto, actualiza la propiedad de una solicitud.

await fetch(url, {
   method: 'PUT',
   mode: 'cors',
   headers: {
   'Content-Type': 'application/json'
   },
   body: JSON.stringify(data)
})

POST vs PUT

Tal vez estás pensando que PUT es similar a POST o PATCH, y francamente, tendrías razón. La principal diferencia es que PUT está destinado a ser idempotente, significa que múltiples solicitudes PUT idénticos deberían tener el mismo efecto en el servidor.

En contraste, varias solicitudes POST idénticas tendrían efectos secundarios adicionales, tales como crear múltiples copias del recurso.

Patch vs PUT HTTP

Podrías encontrarte con los métodos PATCH de vez en cuando. Si bien no es tan común como los otros métodos, como PUT, es importante conocerlo y saber qué hace. El método PATCH pretende modificar parcialmente un recurso.

Larga historia corta, PATCH no es tan popular como PUT, y muchos servidores, inclusive si permiten actualizaciones parciales, aún usará el método PUT para eso.

HTTP Delete

El método DELETE hace exactamente lo que esperarías: es usado convencionalmente eliminar un recurso especificado.

// Esto elimina la ubicación con ID: 52fdfc07-2182-454f-963f-5f0f9a621d72
const url = 'https://example-api.com/locations/52fdfc07-2182-454f-963f-5f0f9a621d72'

await fetch(url, {
  method: 'DELETE',
  mode: 'cors'
})

Rutas URL y Parámetros

La Ruta URL viene justo después del dominio (o puerto si uno es provisto) en una cadena URL.

En esta URL, la rua es /root/next: http://testdomain.com/root/next.

Qué significaban las rutas en el internet primitivo

En los primeros días del internet, y a veces aún hoy en día, muchos servidores web simplemente servían archivos sin procesar desde el sistema de archivos del servidor.

Por ejemplo, si quería ser capaz de acceder algunos documentos de texto, podría comenzar un servidor web en mi directorio documentos. Si hacías una solicitud a mi servidor, serías capaz de acceder a distintos documentos usando la ruta que coincidía con mi estructura de archivos local.

Si tendría un archivo en mi /documentos/hello.txt local, podrías accederlo haciendo una solicitud GET a http://example.com/documentos/hello.txt.

Cómo son usados las rutas hoy en día

La mayoría de los servidores web modernos no usan ese simple mapeo de ruta URL -> ruta de archivo. Técnicamente, una ruta URL es solo una cadena con el que el servidor web puede hacer lo que quiera, y los sitios web modernos toman ventaja de esa flexibilidad.

Algunos ejemplos comunes de para qué se usan las rutas incluyen:

• La jerarquía de las páginas en un sitio web, si refleja o no una estructura de archivos del servidor
• Los parámetros se pasan en una solicitud HTTP, como un ID de un recurso
• La versión de la API
• El tipo de recurso siendo solicitado

APIs RESTful

Transferencia de Estado Representacional, o REST, es una convención popular que el servidor HTTP sigue. No todas las APIs HTTP son "APIs REST", o "RESTful", pero es muy común.

Los servidores RESTful siguen un conjunto de reglas flexibles que facilita construir APIs web predecibles y confiables. REST es más o menos un conjunto de convenciones sobre cómo HTTP debería ser usado.

Separado y agnóstico

La gran idea detrás de REST es que los recursos son transferidos por medio de interacciones de cliente/servidor reconocidas y agnósticas del lenguaje.

Un estilo RESTful significa que la implementación del cliente y del servidor puede ser hecho independientemente el uno del otro, siempre y cuando algunos estándares sencillos, como los nombres de los recursos disponibles, han sido establecidos.

Sin estado

Una arquitectura RESTful es sin estado. Esto significa que el servidor no necesita saber en qué estado está el cliente, ni el cliente necesita saber en qué estado está el servidor.

Statelessness en REST es re-asegurado al interactuar con recursos en vez de comandos. Ten en mente, esto no significa que las aplicaciones son sin estado - al contrario, ¿qué significaría "actualiza un recurso" si el servidor no mantenía registro de su estado?

Las Rutas en REST

En una API RESTful, la última sección del path de un URL debería especificar cuál recurso está siendo accedido. Luego, como hablamos en la sección "métodos", dependiendo en si la solicitud es un GET, POST, PUT o DELETE, el recurso es leído, creado, actualizado, o eliminado.

Por ejemplo, en el PokeAPI:

• https://pokeapi.co/api/v2/pokemon/
• https://pokeapi.co/api/v2/location/

La primer parte de la ruta especifica que estamos interactuando con una API en vez de un sitio web. La siguiente parte especifica la versión, en este caso, versión 2, o v2.

Finalmente, la última parte denota qué recurso está siendo accedido, sea un location o pokemon.

Parámetros de Solicitud URL

Los parámetros de solicitud de URL aparecen después en la estructura URL pero no siempre están presentes - son opcionales. Por ejemplo:

https://www.google.com/search?q=boot.dev

q=boot.dev es un parámetro de solicitud. Como las cabeceras, los parámetros de solicitud son pares clave / valor. En este caso, q es la clave y boot.dev es el valor.

La Documentación de un Servidor HTTP

Te estarás preguntando:

¿Cómo se supone que memorice cómo funcionan todos estos servidores distintos???

Las buenas noticias es que no lo necesitas. Cuando trabajas con un servidor back-end, es la responsabilidad de los desarrolladores del servidor que te provean con instrucciones, o documentación que explica cómo interactuar con él.

Por ejemplo, la documentación debería decirte:

• El dominio del servidor
• Los recursos con los que interactuas (rutas HTTP)
• Los parámetros de solicitud soportados
• Los métodos HTTP soportados
• Cualquier otra cosa que necesitarás saber para trabajar con el servidor

El servidor tiene control

Como mencionamos antes, el servidor tiene control total sobre cómo la ruta en un URL es interpretado y usado en una solicitud. Lo mismo es para los parámetros de solicitud.

No todos los servidores soportan parámetros de solicitud para cada tipo de solicitud, depende, así que necesitarás consultar la documentación.

Múltiples Parámetros de Solicitud

Mencionamos que los parámetros de solicitud son pares clave/valor - que significa que podemos tener múltiples pares.

http://example.com?firstName=lane&lastName=wagner

En el ejemplo de arriba:

• firstName = lane
• lastName = wagner

El ? separa los parámetros de solicitud del resto del URL. El & luego es usado para separar cada par de parámetros solicitud después de eso.

Por ejemplo, haz que esta solicitud que limite el número de Pokemons devuelto del PokeAPI a 2:

https://pokeapi.co/api/v2/location/?limit=2

¿Qué es HTTPs?

el protocolo de Transferencia de Hipertexto Seguro o HTTPS es una extensión del protocolo HTTP. HTTPS protege la transferencia de datos entre el cliente y el servidor encriptando toda la comunicación.

HTTPS permite a un cliente para que comparta información sensitiva sin peligro con el servidor a través de una solicitud HTTP, tales como información de tarjeta de crédito, contraseñas, o números de cuentas de banco.

HTTPS requiere que el cliente use SSL o TLS para proteger las solicitudes y el tráfico encriptando la información en la solicitud. HTTPS es solo HTTP con seguridad extra.

HTTPS mantiene tus mensajes privados, pero no tu identidad

No cubriremos cómo funciona la encriptación en este curso, pero lo haremos en próximos cursos. Por ahora, es importante notar que mientras HTTPS encripta lo que estás diciendo, no protege necesariamente quién eres. Herramientas como VPNs son necesarios para permanecer en línea de manera anónima.

HTTPS se asegura que estás hablando a la persona correcta (o servidor)

Además de encriptar la información dentro de una solicitud, HTTPS usa firmas digitales para probar que te estás comunicando con el servidor con el que piensas.

Si un hacker fuera a interceptar una solicitud HTTPS tocando un cable de red, no serían capaz de pretender exitosamente que son el servidor web de tu banco.

Asumiendo que un servidor soporta HTTPs, lo usas para cambiar simplemente el protocolo en tu su URL de solicitud: https://boot.dev

¿Quieres poner en práctica lo que has aprendido con un proyecto?

Mira esta guía de proyecto donde construirás un web crawler en JavaScript desde cero. Te hará usar la API Fetch y convirtiendo datos JSON, ¡como un pro! No necesitas construir el proyecto, pero es una excelente forma de practicar lo que has aprendido.

¡Felicidades en llegar hasta el final!

Si estás interesado en hacer las asignaciones de código interactivos y cuestionarios para este curso puedes revisar el curso de Aprender HTTP en Boot.dev.

Este curso es una parte de mi trayectoria profesional desarrollador full back-end, hecho de otros cursos y proyectos si te interesa verlos.

Si quieres ver otro contenido que creo relacionado al desarrollo web, mira algunos de mis enlaces abajo:

• Lane en Twitter
• Lane en YouTube
• Sitio Personal de Lane

Vite.js es una herramienta veloz de desarrollo de proyectos web modernos. Se enfoca en la velocidad, el desempeño y mejora la experiencia del desarrollador.

Vite usa las importaciones nativas ES (ECMA Script) del navegador para habilitar el soporte a navegadores modernos sin la necesidad de un proceso de compilación ("build process").

Vite consta de dos partes principales:

• El servidor de desarrollo brinda soporte para la "sustitución de módulos en tiempo de ejecución" o bien, "Remplazo de Módulos en Caliente" (HMR - Hot Module Replacement, por sus siglas en inglés). De esta forma, cómo su nombre lo dice, actualiza los módulos de la aplicación en tiempo de ejecución. Así, que cuando se realizan cambios en el código, sólo se actualiza la parte editada, evitando recargar la aplicación completa, lo que ayuda a acortar el tiempo de desarrollo.
• El comando "build" permite a los desarrolladores empaquetar su código con Rollup, que se encuentra pre-configurado para generar recursos estáticos (static assets) altamente optimizados para producción.

Cómo funciona Vite.js

Cuando se introdujeron los módulos ES en la versión ES6/ES2015, los navegadores no contaban con soporte para los módulos ES6 o bien, era el soporte era muy pobre. En la actualidad, los navegadores modernos ya brindan este soporte, lo que permite a los desarrolladores usar las declaraciones import y export de forma nativa.

En ES nativo, sin embargo, el import debe usar ya sea un URL relativo o absoluto ya que no es posible realizar "importaciones simples" (bare imports) de la forma:

import { algunMetodo } from 'mi-dependencia'

El código anterior lanzará un error en el navegador pues no todos los navegadores tienen soporte para los módulos ES6, y usando ES6 sería necesario utilizar un "import map". Así que la cuestión ahora es, ¿cómo ayuda Vite con esto?

Vite detecta automáticamente las "importaciones simples" (bare imports) en tus archivos fuente y lleva a cabo las siguientes dos acciones:

• Vite pre-empaqueta los archivos fuente para acelerar la carga de la página y convierte los módulos CommonJS o UMD a módulos ESM.
• Para permitirle a los navegadores importar módulos sin lanzar errores, Vite reescribirá las importaciones cómo URLs válidos como se muestra a continuación:

/node_modules/.vite/my-dep.js?v=f3sf2ebb

¿Por qué usar Vite?

Ahora que conocemos lo que es Vite y cómo funciona, te preguntarás por qué deberías usar Vite.

Hay varias razones por las cuales deberías usarlo en tus proyectos, veamos brevemente algunas de ellas.

Desempeño

Pre-empaquetar con ESbuild de Vite es de 10 a 100 veces más rápido que otros empaquetadores JS (bundlers). Esto se debe a que al convertir los módulos CommonsJS o UMD a módulos ESM ayuda a mejorar la velocidad de carga.

De acuerdo con la documentación de Vite,

"El paso de pre-empaquetado, se realiza con esbuild y hace que el tiempo de arranque en frío de Vite sea significativamente más rápido que cualquier empaquetador basado en JavaScript."

Hot Module Replacement (HMR)

Sustitución de Módulos en Tiempo de Ejecución.

Vite utiliza funcionalidades HMR para monitorear los cambios en tu aplicación, sin tener la necesidad de recargar la página completa. Con la API HMR, el navegador sólo cargará la sección modificada de la página y conservará el resto del estado de la aplicación.

No hay necesidad de configurar manualmente la API HMR en tu aplicación ya que es agregada a tu proyecto durante la instalación, si lo creaste mediante el uso de create-vite.

Con el desempeño HMR puedes diseñar aplicaciones más rápidas y ligeras sin importar el número de módulos o el tamaño de tu aplicación.

Opciones de configuración

Vite permite que tengas más control de la configuración de tu proyecto al ampliar la configuración por defecto con vite.config.js o vite.config.ts. Estos archivos se encuentran en el directorio raíz de tu proyecto.

También puedes especificar distintos archivos de configuración con la opción CLI --config como se muestra abajo:

vite --config my-config.js

Lo que necesitarás

Este es el software que debes tener instalado en tu computadora para poder crear un proyecto Vite:

• Node.js versión 12.2.0 o superior (para ver la versión que tienes instalada en tu computadora ejecuta node -v en la terminal).
• Npm / Yarn

Una vez que tengas estos programas instalados en tu computadora, podrás crear proyectos con Vite.

Cómo crear un proyecto con Vite

Para crear una aplicación con Vite abre tu terminal o línea de comandos y navega hacia el directorio donde quieres guardar tu aplicación con Vite. Luego ejecuta el siguiente comando:

npm create @vitejs/app my-vite-app

O para versiones más recientes de Node:

npm create vite@latest my-vite-app

Note: my_vite_app es el nombre de la aplicación con Vite que vamos a crear, pero puedes cambiarlo al nombre que tú prefieras.

Luego de ejecutar el comando de arriba, se te pedirá que selecciones un framework y una plantilla (template o variant). Para los propósitos de este tutorial, vamos a usar React, pero puedes elegir cualquier framework o variante con la que te sientas más familiarizado.

A continuación, ejecuta los siguientes comandos para finalizar la instalación:

cd vite_application
npm install

La instalación puede tomar varios minutos, tendrás que esperar hasta que se haya completado.

Cómo ejecutar una aplicación con Vite

Para ejecutar una aplicación con Vite en la terminal, navega al directorio de la aplicación que hemos creado cd vite-aplication y luego ejecuta el comando dev para ejecutar el servidor de desarrollo:

npm run dev

Ahora abre tu navegador e ingresa a http://localhost:3000. Deberías ver algo como lo que muestra la siguiente captura:

Estructura de directorios en proyectos con Vite

Veamos cómo es que están organizados los directorios en una aplicación con Vite. También daremos un vistazo en detalle a algunos de los directorios y archivos.

Nota: Si elijes usar un framework y/o plantilla distinto, el nombre de los archivos no será el mismo.

El directorio node_modules

El directorio node_modules contiene todas las dependencias necesarias para la aplicación, que se encuentran especificadas en el archivo package.json.

Todas las dependencias configuradas en package.json serán descargadas al directorio node_modules una vez que hayamos ejecutado el comando npm install.

Al "empujar" (del inglés push) nuestro código fuente a GitHub no es necesario incluir el directorio node_modules ya que otros usuarios del código fuente pueden descargar las dependencias necesarias de la misma forma, es decir, gracias al archivo package.json y npm.

Puedes encontrar el archivo package.json en el directorio raíz de tu proyecto.

El directorio src

El directorio src es uno de los directorios con los que más vamos a interactuar al desarrollar aplicaciones con Vite. Este directorio contiene los archivos app.jsx, main.jsx, app.css e index.js.

Todos los recursos de tu aplicación como imágenes, videos y otros archivos deben estar dentro del directorio src ya que Vite lo considera como el directorio base para las URLs en index.html.  

Los archivos App.jsx y main.jsx

El archivo App.jsx es el componente base o raíz que hace la función de contenedor de todos los otros componentes utilizados en la aplicación.

El archivo main.jsx apunta al elemento con id="root" que se encuentra en el archivo index.html y en el cual se renderizan todos los componentes de la aplicación.

index.css y app.css

Estos archivos contienen todos los estilos CSS que utiliza el programa. Puedes agregar tu propio archivo CSS o editar los estilos de index.css.

Conclusión

Hemos visto qué es Vite, cómo funciona y algunas de sus características. También aprendimos cómo crear aplicaciones usándolo.

Para modo de mejorar nuestro flujo de trabajo como desarrolladores y ser más productivos al crear aplicaciones más ligeras y veloces, es muy recomendable visitar, explorar, leer y familiarizarse con la documentación oficial de Vite.

Fetch API es una función de JavaScript que puede utilizar para enviar una solicitud a cualquier URL de API web y obtener una respuesta.

En este artículo, le mostraré cómo realizar solicitudes HTTP a API externas utilizando la API Fetch de JavaScript. Aprenderá a crear solicitudes GET, POST, PUT/PATCH y DELETE utilizando la API Fetch.

Para aprovechar al máximo este artículo, debe tener un buen conocimiento de las promesas de JavaScript. Puedes leer mi artículo Promesas en JavaScript si necesitas un repaso.

• Cómo funciona la API Fetch
• Cómo enviar una solicitud GET
• Cómo enviar una solicitud POST
• Cómo enviar una solicitud PUT
• Cómo enviar una solicitud PATCH
• Cómo enviar una solicitud DELETE
• Cómo usar Async/Await con la API Fetch
• Ejemplos de Código de Ejecución
• Resumen

¡Comencemos!

¿Cómo trabaja la API Fetch?

Para enviar una petición similar a la de un formulario HTML, solo necesita pasar la URL donde desea enviar los datos como argumento a la función fetch():

fetch('<Tu URL>', {})

La función fetch() acepta dos parámetros:

1. La URL a la que enviar la petición (este es un parámetro obligatorio).
2. Las opciones a configurar en la petición. Puede configurar el método de solicitud aquí (este es un parámetro opcional).

Debajo del capó, la función fetch() devuelve una Promesa, por lo que necesitas agregar los métodos .then() y .catch().

Cuando la petición devuelve una respuesta, se llamará al método then(). Si la solicitud devuelve un error, se ejecutará el método catch():

fetch('<Tu URL>', {})
  .then(respuesta => {
    // Manejamos la respuesta de la petición aqui
  })
  .catch(error => {
    // Si hay un error en la petición, lo manejamos aqui 
  })

Dentro de los métodos .then() y .catch(), pasas una función de callback de llamada para ejecutarla cuando se llaman los métodos respectivos.

El método .catch() se puede omitir en Fetch API. Se usa solo cuando Fetch no puede realizar una solicitud a la API, como por ejemplo si no hay conexión de red o no se encuentra la URL.

¿Cómo mandar una petición GET usando Fetch API?

La petición GET es una solicitud HTTP que se utiliza para solicitar datos específicos de una API cuando así se necesita.

En el siguiente ejemplo, accederemos a una URL ficticia ubicada en https://jsonplaceholder.typicode.com para solicitar un usuario registrado en el sitio:

fetch('https://jsonplaceholder.typicode.com/users/1')
  .then(respuesta => console.log(respuesta))
  .catch(error => console.log(error));

El código anterior dará la siguiente respuesta:

Aquí puede ver que la propiedad del cuerpo contiene un ReadableStream. Para usar ReadableStream en nuestra aplicación JavaScript, necesitamos convertirlo para llamar al método json():

fetch('https://jsonplaceholder.typicode.com/users/1')
  .then(respuesta => respuesta.json())
  .then(datos => console.log(datos))

El método json() convierte ReadableStream en un objeto JavaScript. La variable de datos anterior se imprimirá de la siguiente manera:

{
  "id": 1,
  "name": "Leanne Graham",
  "username": "Bret",
  "email": "Sincere@april.biz",
  "address": {
    "street": "Kulas Light",
    "suite": "Apt. 556",
    "city": "Gwenborough",
    "zipcode": "92998-3874",
    "geo": {
      "lat": "-37.3159",
      "lng": "81.1496"
    }
  },
  "phone": "1-770-736-8031 x56442",
  "website": "hildegard.org",
  "company": {
    "name": "Romaguera-Crona",
    "catchPhrase": "Multi-layered client-server neural-net",
    "bs": "harness real-time e-markets"
  }
}

Ahora que tiene el objeto de datos, puede utilizar este valor de la forma que desee. Por ejemplo, si desea mostrar el nombre de usuario y el correo electrónico en HTML, así es como lo hace:

<body>
  <h1 id='nombre-usuario'>Esperando por datos</h1>
  <h2 id='correo-usuario'>Esperando por datos</h1>
  <script>
    fetch('https://jsonplaceholder.typicode.com/users/1')
      .then(respuesta => respuesta.json())
      .then(datos => {
        document.querySelector('#nombre-usuario').textContent = datos.name
        document.querySelector('#correo-usuario').textContent = datos.email
      })
  </script>
</body>

En el código anterior, la API Fetch se ejecutará tan pronto como el navegador cargue el documento HTML.

Después de procesar la respuesta en un objeto de datos, JavaScript cambiará el texto de los elementos <h1> y <h2> anteriores para reflejar el nombre y el correo electrónico del usuario.

Si ejecuta el código anterior, obtendrá el siguiente resultado:

Y así es como envía una solicitud GET usando Fetch y muestra los datos devueltos en HTML.

Tenga en cuenta que, según la petición que solicite, una API puede devolver un tipo diferente de datos.

En este ejemplo, la API typicode devuelve un objeto, pero también puede obtener una matriz cuando solicita más de una unidad de datos.

Si accede a la URL en https://jsonplaceholder.typicode.com/users, verá que la API responde con un arreglo de objetos.

Necesita conocer el tipo de datos devuelto por la API para manejarlo correctamente.

¿Cómo mandar peticiones POST usando Fetch API?

Si desea enviar una solicitud POST en lugar de una solicitud GET, debe definir el segundo argumento al llamar a la función, que es el objeto de configuración

Dentro del objeto de configuración, defina una propiedad method de la siguiente manera:

fetch('https://jsonplaceholder.typicode.com/users', {
  method: 'POST', // Establecemos el método de la petición aqui
})
.then(respuesta => respuesta.json())
.then(datos => console.log(datos))

Cuando envía un método POST, debe configurar el encabezado de la solicitud y las propiedades del cuerpo para garantizar un proceso fluido.

Para el encabezado, debe agregar la propiedad Content-Type y configurarla en application/json.

Los datos que desea enviar deben colocarse dentro de la propiedad `body` en formato JSON. Vea el ejemplo a continuación:

fetch('https://jsonplaceholder.typicode.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    nombre: 'Nathan Sebhastian',
    correo: 'ns@mail.com'
  }),
}).then(respuesta => respuesta.json())
  .then(datos => console.log(datos))

En el ejemplo anterior, enviamos una solicitud POST para crear un nuevo usuario. En la propiedad del cuerpo, un objeto JavaScript normal se convirtió en una cadena JSON llamando al método JSON.stringify().

JSON es uno de los formatos que utilizan las computadoras para comunicarse entre sí en Internet.

La respuesta de la API de Typicode.com sería similar a la siguiente:

{
  "nombre": "Nathan Sebhastian",
  "correo": "ns@mail.com",
  "id": 11
}

Esto significa que creamos exitosamente un nuevo usuario. Dado que typicode.com es una API falsa, el usuario realmente no será agregado, pero simulará como si lo fuera.

¿Cómo mandar peticiones PUT?

Una solicitud PUT se utiliza para crear un nuevo recurso o actualizar uno existente.

Por ejemplo, si desea actualizar un nombre de usuario y datos de correo electrónico existentes. Puede utilizar una solicitud PUT para hacerlo:

fetch('https://jsonplaceholder.typicode.com/users/1', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    nombre: 'Nathan Sebhastian',
    correo: 'nathan@mail.com'
  }),
}).then(respuesta => resporespuestanse.json())
  .then(datos => console.log(datos))

La solicitud anterior recibirá la siguiente respuesta:

{
    "name": "Nathan Sebhastian",
    "email": "nathan@mail.com",
    "id": 1
}

Debido a que ya existen datos de usuario con un id de 1, la solicitud PUT anterior actualiza esos datos.

A continuación, veamos la solicitud PATCH.

¿Cómo mandar una petición PATCH?

La solicitud PATCH se envía cuando necesita actualizar una petición existente.

Por ejemplo, si desea cambiar el nombre y el usuario de un usuario existente.

A continuación se muestra un ejemplo de cómo enviar una solicitud PATCH a typicode.com:

fetch('https://jsonplaceholder.typicode.com/users/1', {
  method: 'PATCH',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ 
    nombre: 'Nathan Sebhastian',
    usaurio: 'nsebhastian'
  }),
}).then(respuesta => respuesta.json())
  .then(datos => console.log(datos))

La solicitud anterior recibirá la siguiente respuesta:

{
    "id": 1,
    "nombre": "Nathan Sebhastian",
    "usuario": "nsebhastian",
    "correo": "Sincere@april.biz",
    // ... the rest of user data
}

Arriba, puede ver que los valores de las propiedades de nombre yusuario se actualizan utilizando el cuerpo de la solicitud PATCH.

¿Cómo mandar una petición DELETE?

La solicitud DELETE se utiliza cuando desea solicitar que un recurso se elimine permanentemente del servidor.

Para ejecutar una solicitud DELETE con Fetch, solo necesita especificar la URL del recurso que desea eliminar y el method: 'DELETE' de la siguiente manera:

fetch('https://jsonplaceholder.typicode.com/users/1', {
  method: 'DELETE',
}).then(respuesta => respuesta.json())
  .then(datos => console.log(datos))

La solicitud anterior eliminará los datos de un usuario que tenga un idde 1.

La API podría responder con algún mensaje para confirmar que el recurso se ha eliminado. Pero como typicode.com es una API ficticia, devolverá un objeto JavaScript vacío {}.

¿Cómo utilizar Async/Await con la API Fetch?

Dado que Fetch devuelve un objeto Promise, esto significa que también puede usar la sintaxis async/await para reemplazar los métodos .then() y .catch().

A continuación se muestra un ejemplo de envío de una solicitud GET usando Fetch en sintaxis async/await:

try {
  const respuesta = await fetch('https://jsonplaceholder.typicode.com/users/1');
  const json = await respuesta.json();
  console.log(json);
} catch (error) {
  console.log(error);
}

Manejar una respuesta Fetch usando async/await parece más limpio porque no es necesario usar las devoluciones de llamada .then() y .catch().

Si necesita un repaso sobre async/await, puede leer mi artículo JavaScript Async/Await.

Ejecutando el código de ejemplo

También creé un sitio web de ejemplo que le muestra cómo ejecutar estos 5 protocolos de solicitud HTTP en https://nathansebhastian.github.io/js-fetch-api/

Compruébelo y estudie el objeto de datos devuelto. Para saber qué peticiones puede enviar a una API específica, debe consultar la documentación de ese proyecto de API.

Resumen

Fetch API le permite acceder a las API y realizar una solicitud de red utilizando métodos de solicitud estándar como GET, POST, PUT, PATCH y DELETE.

La API Fetch devuelve una promesa, por lo que debe encadenar la llamada a la función con los métodos .then() y .catch(), o usar la sintaxis async/await.

¡Y así es como funciona la API Fetch! Si te ha gustado este artículo, quizás quieras consultar mi libro Beginning Modern JavaScript para mejorar tus habilidades en JavaScript:

El libro está diseñado para ser fácil para principiantes y accesible para cualquiera que quiera aprender JavaScript. Proporciona una guía sencilla paso a paso que le ayudará a comprender cómo utilizar JavaScript para crear una aplicación web dinámica.

Esta es mi promesa: realmente sentirás que entiendes lo que estás haciendo con JavaScript.

¡Nos vemos en otros artículos!