Acabamos de publicar un curso en el canal de YouTube de freeCodeCamp en español que te guiará paso a paso a través de los fundamentos de SQL. Aprenderás los conceptos básicos que necesitas para comenzar y crearás dos proyectos.

El curso fue creado por Sergie Code. Sergie es ingeniero de software y creador de contenido a quien le encanta enseñar y compartir sus conocimientos. Su trabajo se centra en JavaScript, incluyendo React.js, Angular.js y otros frameworks.

Antes de adentrarnos en el contenido del curso, veamos qué es SQL y por qué deberías aprenderlo.

Los datos están en todas partes. Las plataformas y organizaciones modernas dependen de las bases de datos todos los días. Cada vez que inicias sesión en un sitio web, estás utilizando el poder de las bases de datos. Al dominar SQL, podrás extraer información valiosa a partir de los datos almacenados, una habilidad que es muy valorada en la ingeniería de software, la ciencia de datos y en los negocios.

SQL es un lenguaje especializado diseñado para gestionar datos almacenados en bases de datos relacionales. Con SQL, puedes crear bases de datos, definir su estructura y realizar operaciones clave como crear, insertar, actualizar y eliminar registros. Una de sus características principales es que te permite acceder a los datos a través de consultas (queries) para encontrar de forma eficiente los datos exactos que tú o tu aplicación necesitan.

Curso de SQL en español

Genial. Ahora que ya sabes más sobre SQL, veamos lo que aprenderás durante el curso:

• Introducción a SQL y bases de datos.
• SQL vs. MySQL, PostgreSQL y SQL Server.
• Jerarquía de bases de datos relacionales.
• DBngin y TablePlus.
• Lenguaje de Definición de Datos (DDL): CREATE, DROP, ALTER y DESCRIBE.
• Trabajo con tablas, atributos y restricciones.
• Claves foráneas y relaciones entre tablas.
• Lenguaje de Manipulación de Datos (DML): INSERT, UPDATE, DELETE y TRUNCATE.
• Lenguaje de Consulta de Datos (DQL): SELECT, WHERE y ORDER BY.
• Funciones de agregación (COUNT, SUM, AVG).
• INNER JOIN, LEFT JOIN, RIGHT JOIN, y Joins de 3 tablas.
• Subconsultas, GROUP BY y HAVING.
• Gestión de SQL con Docker y variables de entorno.
• Buenas prácticas y ejemplos prácticos.

Al final del curso, conocerás los fundamentos de SQL y podrás comenzar a crear y gestionar tus propias bases de datos relacionales.

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

✍️ Curso creado por Sergie Code.

• Youtube: @SergieCode
• Instagram: sergiecode
• LinkedIn: Sergie Code
• GitHub: sergiecode
• Facebook: sergiecodeok
• TikTok: @sergiecode
• Twitter: @sergiecode
• Threads: @sergiecode

En este tutorial, aprenderás cómo construir una aplicación CRUD usando React y Convex. Cubriremos estas operaciones al construir un proyecto que se llama Book Collections. En este proyecto, los usuarios serán capaz de agregar libros y actualizar sus estados una vez que completan un libro.

Tabla de Contenido

• ¿Qué es Convex?
• ¿Cómo configurar tu proyecto?
• ¿Cómo crear el esquema?
• ¿Cómo crear la UI?
• ¿Cómo crear las funciones CRUD?
• Los estilos
• Resumen

¿Qué es Convex?

Convex es la Plataforma BaaS que simplifica el desarrollo backend. Convex viene con una base de datos de tiempo real, y no tienes que preocuparte sobre escribir lógica de parte del servidor de forma separada porque provee métodos para solicitar y mutar la base de datos.

Pre-requisitos

Para seguir este tutorial, debes conocer los fundamentos de React. Estaré usando TypeScript en este proyecto, pero es opcional, así que puedes seguirme con JavaScript.

Cómo configurar tu proyecto

Crea una carpeta separa para el proyecto y llámalo como gustes – yo lo llamaré Books. Configuraremos Convex y React en esa carpeta.

Puedes crear una aplicación de React usando este comando:

npm create vite@latest my-app -- --template react-ts

Si quieres trabajar con JavaScript, entonces quita el `ts` al final. Sería:

npm create vite@latest my-app -- --template react

Cómo configurar Convex

Tenemos que instalar Convex en la misma carpeta. Puedes hacer eso usando este comando:

npm install convex

Luego, ejecuta npx convex dev. Si lo estás haciendo por primera vez, te debería pedirte la autenticación. De otra forma, debería preguntarte por el nombre del proyecto.

Puedes visitar el panel de Convex para ver el proyecto que has creado.

Ahora que hemos configurado Convex y React, necesitamos conectar el backend de Convex a la aplicación de React.

En el src/main.tsx, envuelve tu componente App con ConvexReactClient:

import { createRoot } from "react-dom/client";
import App from "./App.tsx";
import { ConvexProvider, ConvexReactClient } from "convex/react";
import "./index.css"

const convex = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL as string);

createRoot(document.getElementById("root")!).render(
  <ConvexProvider client={convex}>
    <App />
  </ConvexProvider>
);

Cuando configuras Convex, se crea un archivo .env.local. Puedes ver el URL de tu backend en ese archivo.

En la línea de abajo, instanciamos el Cliente de Convex de React con el URL.

const convex = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL as string);

Cómo crear el Esquema

En tu carpeta principal del proyecto, deberías de ver la carpeta convex. Manejaremos las solicitudes de la base de datos y las mutaciones aquí.

Crea un archivo schema.ts en la carpeta convex:

import { defineSchema, defineTable } from "convex/server";
import { v } from "convex/values";

export default defineSchema({
  books: defineTable({
    title: v.string(),
    author: v.string(),
    isCompleted: v.boolean(),
  }),
});

Puedes definir un Esquema para tu documento con defineSchema y crea un tabla con defineTable. Convex provee estas funciones para definir un esquema y crear una tabla.

v es el validador de tipo, se usa para proveer tipos para cada dato que agregamos a la tabla.

Para este proyecto, ya que es una aplicación de colección de libros, la estructura tendrá title, author, y isCompleted. Puedes agregar mas campos.

Ahora que tienes definido tu esquema, configuremos la UI básica en React.

Cómo crear la UI

En la carpeta src, crea una carpeta llamada component y un archivo Home.tsx. Aquí, puedes definir la UI.

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

const Home = () => {
  const [title, setTitle] = useState("");
  const [author, setAuthor] = useState("");
  return (
    <div className="main-container">
      <h1>Book Collections</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          name="title"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          placeholder="book title"
        />
        <br />
        <input
          type="text"
          name="author"
          value={author}
          onChange={(e) => setAuthor(e.target.value)}
          placeholder="book author"
        />
        <br />
        <input type="submit" />
      </form>
      {books ? <Books books={books} /> : "Loading..."}
    </div>
  );
};

export default Home;

Puedes crear tu componente como gustes. Agregué dos campos input title, author, y un botón submit. Esta es la estructura básica. Ahora podemos crear los métodos CRUD en el backend.

Cómo crear las funciones CRUD

En la carpeta convex, puedes crear un archivo queries.ts separado para las funciones CRUD.

La Función Create

Ie convex/queries.ts:

Puedes definir una función createBooks. Puedes usar la función mutation de Convex para crear, actualizar, y eliminar datos. Leer los datos será a través de query.

La función mutation espera estos argumentos:

• agrs: los datos que necesitamos almacenar en la base de datos.
• handler: maneja la lógica para almacenar los datos en la base de datos. El handler es una función asíncrona, y tiene dos argumentos: ctx y args. Aquí, ctx es el objeto contexto que usaremos para manejar las operaciones de la base de datos.

Usarás el método insert para ingresar nuevos datos. El primer parámetro en el insert es el nombre de la tabla y el segundo es para los datos que necesitan ser insertados.

Como último, puedes regresar los datos desde la base de datos.

Aquí estás el código:

import { mutation} from "./_generated/server";
import { v } from "convex/values";

export const createBooks = mutation({
  args: { title: v.string(), author: v.string() },
  handler: async (ctx, args) => {
    const newBookId = await ctx.db.insert("books", {
      title: args.title,
      author: args.author,
      isCompleted: false,
    });
    return newBookId;
  },
});

La Función Read

En convex/queries.ts:

import { query } from "./_generated/server";
import { v } from "convex/values";

//read
export const getBooks = query({
  args: {},
  handler: async (ctx) => {
    return await ctx.db.query("books").collect();
  },
});

En esta operación read, usamos la función incorporada query de Convex. Aquí, args estará vacía ya que no obtenemos ningún datos del usuario. De forma similar, la función handler es asíncrona y usa el objeto ctx para solicitar de la base de datos y regresar los datos.

La Función Update

En convex/queries.ts:

Crea una función updateStatus. Vamos a actualizar solamente el estado isCompleted.

Aquí, necesitas obtener el ID del documento y el estado del usuario. En el args, definiremos el id y el isCompleted, los cuales vendrán del usuario.

En el handler, usaremos el método patch para actualizar los datos. El método patch espera dos argumentos: el primer argumento es el id del documento y el segundo es para los datos actualizados.

import { mutation } from "./_generated/server";
import { v } from "convex/values";

//update
export const updateStatus = mutation({
  args: { id: v.id("books"), isCompleted: v.boolean() },
  handler: async (ctx, args) => {
    const { id } = args;
    await ctx.db.patch(id, { isCompleted: args.isCompleted });
    return "updated"
  },
});

Función Delete

En convex/queries.ts:

Crea una función deleteBooks y usa la función mutation. Necesitaremos el ID del documento para que se elimine. En el args, define un ID. En el handler, usa el método delete del objeto ctx, y pasa el ID. Esto eliminará el documento.

import { mutation } from "./_generated/server";
import { v } from "convex/values";

//delete
export const deleteBooks = mutation({
  args: { id: v.id("books") },
  handler: async (ctx, args) => {
    await ctx.db.delete(args.id);
    return "deleted";
  },
});

A partir de ahora, has completado las funciones CRUD en el backend. Ahora necesitamos hacerlo funcionar en el UI. Volvamos a React.

Actualizar el UI

Ya has creado un UI básico en la aplicación de React, con algunos campos input. Vamos a actualizarlo.

En src/component/Home.tsx:

import { useQuery, useMutation } from "convex/react";
import { api } from "../../convex/_generated/api";
import { Books } from "./Books";
import { useState } from "react";
import "../styles/home.css";

const Home = () => {
  const [title, setTitle] = useState("");
  const [author, setAuthor] = useState("");
  const books = useQuery(api.queries.getBooks);
  const createBooks = useMutation(api.queries.createBooks);

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>): void => {
    e.preventDefault();
    createBooks({ title, author })
      .then(() => {
        console.log("created");
        setTitle("");
        setAuthor("");
      })
      .catch((err) => console.log(err));
  };
  return (
    <div className="main-container">
      <h1>Book Collections</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          name="title"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          placeholder="book title"
        />
        <br />
        <input
          type="text"
          name="author"
          value={author}
          onChange={(e) => setAuthor(e.target.value)}
          placeholder="book author"
        />
        <br />
        <input type="submit" />
      </form>
      {books ? <Books books={books} /> : "Loading..."}
    </div>
  );
};

export default Home;

Ahora podemos usar las funciones API del backend al usar api de Convex. Como puedes ver, llamamos a dos funciones de la API: puedes usar useQuery si vas a obtener datos y useMutation si quieres cambiar los datos. Ahora en este archivo, que estamos haciendo, dos operaciones que son create y read.

Obtuvimos todos los datos al usar este método:

 const books = useQuery(api.queries.getBooks);

El arreglo de objetos serán almacenados en la variable books.

Obtuvimos la función create del backend con esta línea de código:

const createBooks = useMutation(api.queries.createBooks);

Cómo usar la función create en el UI

Usemos la función create en el UI.

Ya que los campos input están en la etiqueta form, usaremos el atributo onSubmit para manejar el envío del formulario.

// En el Home.tsx

const handleSubmit = (e: React.FormEvent<HTMLFormElement>): void => {
    e.preventDefault();
    createBooks({ title, author })
      .then(() => {
        console.log("created");
        setTitle("");
        setAuthor("");
      })
      .catch((err) => console.log(err));
  };

Cuando haces clic en submit, dispara la función handleSubmit.

Usamos el createBooks para pasar el title y author del estado. La función del endpoint es async, por lo que podemos usar el handleSubmit como async o usar .then. Usé el método .then para manejar los datos asíncronos.

Puedes crear un componente separado para mostrar los datos solicitados de la base de datos. Los datos regresados están en el Home.tsx, así que pasaremos los datos al componente Book.jsx como props.

En Books.tsx:

import { useState } from "react";
import { book } from "../types/book.type";
import { useMutation } from "convex/react";
import { api } from "../../convex/_generated/api";
import { Id } from "../../convex/_generated/dataModel";
import "../styles/book.css";

export const Books = ({ books }: { books: book[] }) => {
  const [update, setUpdate] = useState(false);
  const [id, setId] = useState("");

  const deleteBooks = useMutation(api.queries.deleteBooks);
  const updateStatus = useMutation(api.queries.updateStatus);

  const handleClick = (id: string) => {
    setId(id);
    setUpdate(!update);
  };

  const handleDelete = (id: string) => {
    deleteBooks({ id: id as Id<"books"> })
      .then((mess) => console.log(mess))
      .catch((err) => console.log(err));
  };

  const handleUpdate = (e: React.FormEvent<HTMLFormElement>, id: string) => {
    e.preventDefault();
    const formdata = new FormData(e.currentTarget);
    const isCompleted: boolean =
      (formdata.get("completed") as string) === "true";
    updateStatus({ id: id as Id<"books">, isCompleted })
      .then((mess) => console.log(mess))
      .catch((err) => console.log(err));
    setUpdate(false);
  };

  return (
    <div>
      {books.map((data: book, index: number) => {
        return (
          <div
            key={data._id}
            className={`book-container ${data.isCompleted ? "completed" : "not-completed"}`}
          >
            <h3>Book no: {index + 1}</h3>
            <p>Book title: {data.title}</p>
            <p>Book Author: {data.author}</p>
            <p>
              Completed Status:{" "}
              {data.isCompleted ? "Completed" : "Not Completed"}
            </p>
            <button onClick={() => handleClick(data._id)}>Update</button>
            {id === data._id && update && (
              <>
                <form onSubmit={(e) => handleUpdate(e, data._id)}>
                  <select name="completed">
                    <option value="true">Completed</option>
                    <option value="false">Not Completed</option>
                  </select>
                  <input type="submit" />
                </form>
              </>
            )}
            <button onClick={() => handleDelete(data._id)}>delete</button>
          </div>
        );
      })}
    </div>
  );
};

En el componente Book.jsx, puedes mostrar los datos de la base de datos y manejar la funcionalidad para actualizar y eliminar los registros.

Veamos paso a paso cada una de estas características.

Cómo mostar los Datos

Puedes obtener los datos pasados como un prop en el componente Home.tsx. Si estás usando TypeScript, he definido un tipo para el objeto que es regresado de la solicitud. Puedes ignorar esto si estás usando JavaScript.

Crea books.types.ts:

export type book = {
    _id: string,
    title: string,
    author: string,
    isCompleted: boolean
}

Puedes usar la función map para mostrar los datos.

import { useState } from "react";
import { book } from "../types/book.type";
import { useMutation } from "convex/react";
import { api } from "../../convex/_generated/api";
import { Id } from "../../convex/_generated/dataModel";
import "../styles/book.css";

export const Books = ({ books }: { books: book[] }) => {
  const [update, setUpdate] = useState(false);

  return (
    <div>
      {books.map((data: book, index: number) => {
        return (
          <div
            key={data._id}
            className={`book-container ${data.isCompleted ? "completed" : "not-completed"}`}
          >
            <h3>Book no: {index + 1}</h3>
            <p>Book title: {data.title}</p>
            <p>Book Author: {data.author}</p>
            <p>
              Completed Status:{" "}
              {data.isCompleted ? "Completed" : "Not Completed"}
            </p>
            <button onClick={() => handleClick(data._id)}>Update</button>
            {id === data._id && update && (
              <>
                <form onSubmit={(e) => handleUpdate(e, data._id)}>
                  <select name="completed">
                    <option value="true">Completed</option>
                    <option value="false">Not Completed</option>
                  </select>
                  <input type="submit" />
                </form>
              </>
            )}
            <button onClick={() => handleDelete(data._id)}>delete</button>
          </div>
        );
      })}
    </div>
  );
};

Esta es la estructura básica. Mostramos el título, autor, y estado, junto con un botón actualizar y eliminar.

Ahora, agreguemos las funcionalidades.

import { useState } from "react";
import { book } from "../types/book.type";
import { useMutation } from "convex/react";
import { api } from "../../convex/_generated/api";
import { Id } from "../../convex/_generated/dataModel";
import "../styles/book.css";

export const Books = ({ books }: { books: book[] }) => {
  const [update, setUpdate] = useState(false);
  const [id, setId] = useState("");

  const deleteBooks = useMutation(api.queries.deleteBooks);
  const updateStatus = useMutation(api.queries.updateStatus);

  const handleClick = (id: string) => {
    setId(id);
    setUpdate(!update);
  };

  const handleDelete = (id: string) => {
    deleteBooks({ id: id as Id<"books"> })
      .then((mess) => console.log(mess))
      .catch((err) => console.log(err));
  };

  const handleUpdate = (e: React.FormEvent<HTMLFormElement>, id: string) => {
    e.preventDefault();
    const formdata = new FormData(e.currentTarget);
    const isCompleted: boolean =
      (formdata.get("completed") as string) === "true";
    updateStatus({ id: id as Id<"books">, isCompleted })
      .then((mess) => console.log(mess))
      .catch((err) => console.log(err));
    setUpdate(false);
  };

  return (
    <div>
      {books.map((data: book, index: number) => {
        return (
          <div
            key={data._id}
            className={`book-container ${data.isCompleted ? "completed" : "not-completed"}`}
          >
            <h3>Book no: {index + 1}</h3>
            <p>Book title: {data.title}</p>
            <p>Book Author: {data.author}</p>
            <p>
              Completed Status:{" "}
              {data.isCompleted ? "Completed" : "Not Completed"}
            </p>
            <button onClick={() => handleClick(data._id)}>Update</button>
            {id === data._id && update && (
              <>
                <form onSubmit={(e) => handleUpdate(e, data._id)}>
                  <select name="completed">
                    <option value="true">Completed</option>
                    <option value="false">Not Completed</option>
                  </select>
                  <input type="submit" />
                </form>
              </>
            )}
            <button onClick={() => handleDelete(data._id)}>delete</button>
          </div>
        );
      })}
    </div>
  );
};

Este es todo el código del componente. Déjame explicarte qué hice.

Primero, necesitamos alternar la actualización, así que definimos la función handleClick, y le pasamos un ID del documento.

//handleClick
 const handleClick = (id: string) => {
    setId(id);
    setUpdate(!update);
  };

En el handleClick puedes actualizar el estado del ID y alternar el estado de la actualización de forma que alternará la actualización cuando se haga clic, y en otro clic, se cerrará.

Luego, tenemos handleUpdate. Necesitamos el ID del documento para actualizar los datos, así que pasamos el objeto evento así también como el ID del documento. Para obtener la entrada, podemos usar FormData.

const updateStatus = useMutation(api.queries.updateStatus);

const handleUpdate = (e: React.FormEvent<HTMLFormElement>, id: string) => {
    e.preventDefault();
    const formdata = new FormData(e.currentTarget);
    const isCompleted: boolean =
      (formdata.get("completed") as string) === "true";
    updateStatus({ id: id as Id<"books">, isCompleted })
      .then((mess) => console.log(mess))
      .catch((err) => console.log(err));
    setUpdate(false);
  };

Necesitamos usar el useMutation para obtener la función updateStatus. Pasa el ID y el estado completado a la función, y maneja la parte asíncrona usando .then.

Para la función delete, el ID del documento es suficiente. Como el anterior, llama la función delete usando el useMutation y pásale el ID.

Luego pasa el ID del documento y maneja la promesa.

const deleteBooks = useMutation(api.queries.deleteBooks);

const handleDelete = (id: string) => {
    deleteBooks({ id: id as Id<"books"> })
      .then((mess) => console.log(mess))
      .catch((err) => console.log(err));
 };

Estilos

Finalmente, lo que queda es agregar algo de estilo. Agregué algunos estilos básicos. Si el libro no ha sido completado, estará en rojo, y si el libro se ha completado, estará en verde.

Aquí la captura de pantalla:

¡¡Esto es todo chicos!!

Puedes visitar mi repositorio para ver todo el código: convex-curd

Resumen

En este artículo, implementamos las operaciones CRUD (Crear, Leer, Actualizar y Eliminar) al construir una aplicación de colecciones de libros. Comenzamos configurando Convex y React, y escribir la lógica de CRUD.

Este tutorial cubrió tanto el frontend como el backend, demostrando cómo construir una aplicación serverless.

Puedes encontrar todo el código aquí: convex-curd

Si hay algún error o cualquier duda, contáctame en LinkedIn, Instagram.

¡Gracias por leer!

¡Hola! La comunidad freeCodeCamp sigue trabajando muy duro en el resto de los cursos de nuestro plan de estudios de full stack.

Solo han pasado unos meses, pero ya hay muchos estudiantes que van con toda su fuerza a través de estas nuevas lecciones y desafíos de programación.

Estoy emocionada de compartir nuestra próxima ola de actualizaciones con todos ustedes.

Nuevo plan de estudios

Acabamos de lanzar tres nuevas secciones del plan de estudios: React Hooks y Estado, Performance y Testing.

Este nuevo contenido incluye:

• 50 videos explicativos
• una docena de talleres y laboratorios
• tres bloques de repaso nuevos
• y mucho material para ayudarte a seguir avanzando mientras terminamos el resto del contenido Full Stack.

Algunos proyectos que vas a construir:

• un juego completo de Tic Tac Toe
• un selector de colores
• y un formulario para aplicar como superhéroe 🦸‍♂️

Exámenes

Sabemos que muchos están esperando los exámenes al final de cada módulo. Ya casi están listos.

También estamos creando un entorno de examen propio, que busca cuidar tu privacidad y mantener la integridad académica.

¿Qué sigue?

Ahora estamos trabajando en los módulos de CSS Libraries y TypeScript. También vienen módulos de Python.

En los próximos meses lanzaremos un montón de cosas nuevas.

Un adelanto de los próximos proyectos:

• crea tu propio personaje de RPG
• un juego de cartas coleccionables
• un validador de datos médicos
• y mucho más 🏕️

¿Te gustaría ayudar?

Si quieres ser parte del desarrollo del plan Full Stack, tenemos muchas formas de contribuir. Mira los issues abiertos en nuestro repo de GitHub.

Empieza leyendo la guía de bienvenida para contribuidores y únete a nuestro Discord si tienes preguntas.

Nos emociona verte avanzar con todo este contenido nuevo. ¡Sigue creciendo tus habilidades!

¡Feliz programación! 💜

En mis veinte años de experiencia como ingeniero de software, he estado en muchas revisiones de sprint. Las he visto hacer bien y he visto que a veces se las usa para que las personas hagan un alto en una sala de reuniones por un par de horas cada sprint.

Realizada de manera correcta, la revisión de sprint puede ser la clave para mantener al día tu proyecto. Por el contrario, las revisiones de sprint hechas de forma incorrecta son peor que el tiempo malgastado en ellas, ya que disminuyen la confianza de las personas en la metodología Scrum.

En este artículo, te voy a guiar a través de algunas ideas y el paso a paso para hacer que tu revisión de sprint tenga más valor.

¿Qué es una revisión de sprint?

Una revisión de sprint es una sesión corta que se realiza al final de cada sprint, usualmente cada un par de semanas.

Esta sesión permite al equipo mostrar el trabajo realizado a través de demos, obtener feedback y decidir qué es lo que sigue.

Al hacerse de forma correcta, la revisión de sprint muestra progreso y crea confianza a las personas que tienen un interés en el producto y el proyecto.

Por supuesto, es posible decirles a los interesados que el proyecto está al día, pero si pueden verlo con sus propios ojos durante la revisión de sprint, estarán más contentos.

¿Quién debería estar en la revisión?

En resumen, cualquier persona que así lo quiera. Cualquier persona que sea parte interesada en cualquier capacidad puede y debería estar presente en estas reuniones.

El propio equipo scrum se encuentra en el centro de la reunión, pero también pueden estar los de Ventas, los subgerentes generales, otros equipos scrums y project managers.

Si alguien tiene algo para aportar al proyecto o cree que puede beneficiarse por aprender algo del proyecto, deberían asistir,

¿Qué hacer antes de la revisión de sprint?

Para que la reunión se lleve a cabo sin ningún problema, es necesario asegurarse que quienes vayan a presentar estén preparados y con una demo lista para mostrar.

Por experiencia propia, las demos en vivo no funcionan. Algunas sí, pero en su mayoría no.

Puedes decirles a quienes tengan una demo que al menos se graben mostrando el flujo de trabajo antes de la reunión. De esta manera, si insisten en hacer una demo en vivo, van a tener un video grabado a modo de resguardo si todo sale mal.

También deberías tener una lista con las personas que van a presentar y en qué orden. Agrúpalas por similitud del tema. No importa quién presenta y cuándo lo hace mientras que las presentaciones estén agrupadas por tema.

Por ejemplo, si tienes seis ingenieros - dos trabajando en una página de inicio de sesión, dos más trabajando en servicio back-end nuevo y otros dos trabajando en la performance de la base de datos- asegúrate que en tu lista de presentadores estas tres areas distintivas estén juntas.

Si hay dos demos que son similares, puedes explicar el contexto una sola vez y después correr las demos una seguida de la otra. Se eficiente, ya que tienes a muchas personas en esta reunión y todos saben que las reuniones son costosas.

Durante la revisión

Los ingenieros de software que hayan trabajado en alguna parte del proyecto harán la presentación a los otros miembros del equipo scrum (Producto, QA y otros) y también a los interesados que estén en la reunión.

Después de la presentación de cada ingeniero, cualquiera de los presentes en la reunión puede hacer preguntas o comentarios sobre el trabajo realizado o la presentación.

Estas preguntas pueden ir desde detalles sobre el proyecto para quienes no conozcan, lo conozcan en su totalidad o pueden ser preguntas sobre porque se decidió seguir un curso de acción en particular.

Desde Producto o miembros de la audiencia que estén más enfocados en la parte del negocio pueden dar feedback sobre si lo que fue presentando coincide con la intención de negocio de lo que se pidió entregar.

Una vez que todas las preguntas y comentarios son respondidos, el próximo ingeniero presentará su trabajo.

En una revisión de sprint, si bien todos pueden hablar, generalmente solo lo hacen los ingenieros que presentan. Entonces, el ingeniero presenta sobre el trabajo que realizaron y luego Producto, QA, Ba y los demás pueden dar feedback y hacer preguntas específicas sobre lo que el ingeniero presentó.

Revisión de ejemplo

Demos una mirada a una revisión de ejemplo y a lo que podría contener.

Vamos a usar el ejemplo de los seis ingenieros de más arriba: dos trabajando en la página de inicio de sesión, dos trabajando en un servicio back-end y dos trabajando en la performance de la base de datos. En ese caso, la lista de presentadores se ve así:

Presentaciones

1. Larry: El usuario supera la cantidad máxima de intentos de inicio de sesión y la cuenta se bloquea después del quinto intento incorrecto. El usuario tiene que pedir un nuevo password antes de poder iniciar sesión de nuevo.
2. David: El usuario hace clic en el enlace de contraseña olvidada y se emvia un enlace a su correo electrónico. El usuario hace clic en el enlace y puede restablecer su contraseña.
3. Premilla: Un servicio de reporte consume el evento "Usuario excede la cantidad máxima de intentos de inicio de sesión" y lo publica en el tablero de reportes.
4. Akshat: Un servicio de reporte consume el evento "Usuario hace clic en el enlace de restablecimiento de contraseña" y lo publica en el tablero de reportes.
5. Olga: Un usuario administrador puede ver el tablero durante un mes y cargar el reporte dentro de los 2 segundos.
6. Trevor: Un usuario administrar puede ver los eventos de varios usuarios en un mismo tablero y cargar el reporte dentro de los 2 segundos.

Como puedes ver, las dos presentaciones sobre la página de inicio de sesión de usuario se hicieron primero, después las dos presentaciones sobre los servicios de reportes, y por último las dos presentaciones sobre la velocidad de respuesta de la base de datos. Esto requiere un menor cambio de contexto para los miembros de la audiencia y también que es posible dar el contexto en la primera de las dos presentaciones agrupadas (esto es, las presentaciones 1, 3 y 5).

Después de la presentación 1 (realizada por Larry), Producto puede preguntarle por qué eligió cinco intentos como el número máximo de intentos antes de que se bloquee la cuenta. Larry puede tener o no una respuesta. Producto puede pedirle un seguimiento sobre este tema e investigar cuál es el estándar de la industria y aplicar la misma lógica que Larry o dejarlo así.

Después de las seis presentaciones, puede haber preguntas, comentarios o pedidos de cambio de cualquier persona de la audiencia. Usualmente, esto va a precipitar una conversación entre los presentes sobre cuál puede ser la mejor manera de realizar estos cambios.

Por ejemplo, de nuevo en el ejemplo de Larry, algunos podrían sugerir que ni se debería usar un nombre de usuario y contraseña, sino una dirección de correo electrónico y un enlace mágico. Esto es lo bueno de la revisión. Tenemos a un montón de gente inteligente en la habitación contribuyendo con su propia experiencia y sabiduría.

Consejos accionables

Here are some tips for what to show, how to show it, and what actually matters during the meeting itself.  Aquí tienes un par de consejos sobre qué mostrar, cómo mostrarlo, y lo que realmente importa durante la reunión en sí.

1. Mostrar entregables reales

Primero, siempre muestra software en funcionamiento o demos que funcionen en vez de diapositivas estáticas. Por ejemplo, si estuviste trabajando en una nueva función de inicio de sesión, haz una demostración en vivo. Esto hace que la revisión sea más auténtica y muestre avances tangibles.

2. Alienta el feedback

Segundo, invita a la audiencia a hacer preguntas. Recuérdale a las partes interesadas que sus ideas pueden ayudar a desarrollar nuevas funcionalidades. Anota sus sugerencias y confírmales si alguno de los cambios irán de inmediato a tu lista de pendientes.

3. Sé claro y mantente enfocado

Tercero, mantén un formato simple. Por ejemplo, empieza con un pantallazo general del objetivo del sprint, ve a las demostraciones y termina con un debate corto sobre los próximos pasos.

Evita entrar en profundidad sobre los detalles técnicos. Si el tema requiere más tiempo, organiza una reunión de seguimiento.

4. Coordina los próximos pasos.

Seguido de esto, actualiza tu lista de pendientes con base en lo aprendido en la reunión. Si una funcionalidad requiere un ajuste extra, agrega la tarea de manera inmediata.

Esto ayuda a mantener informado a todo el equipo sobre el plan para el siguiente sprint.

5. Mantenla corta y termina en horario

En la reunión deberías revisar el trabajo del equipo scrum de un solo sprint (dos o tres semanas)

Si la reunión se hace demasiado larga, esto puede significar que tu equipo scrum es demasiado grande (en ese caso, deberías pensar en dividir el equipo en grupos más pequeños) o que no estás siendo eficiente con tus demostraciones.

El tiempo y la atención de las personas son costosos y escasos. Mantén las reuniones a un ciclo ultradriano. Personalmente, trato de limitar todas las reuniones a un máximo de 90 minutos.

Por último, establece un límite firme para la reunión así los participantes se sienten confiados al dar su feedback sin alargar el debate.

Terminar a horario significa respetar el calendario de los demás y mantener al equipo descansado y preparado para el próximo sprint.

En conclusión

Una revisión de sprint les da a las partes interesadas una mirada real sobre el trabajo realizado, las mantiene alineadas sobre los próximos pasos, y permite obtener el feedback que necesitas para hacer crecer tu producto de forma efectiva.

Si te enfocas en mostrar avances reales, tener un dialogo abierto y mantienes las cosas de forma concisa, verás una mejoría en como tu equipo entrega valor.

En su tiempo libre, Ben escribe su blog de tecnología "Just Another Tech Lead" y administra un sitio donde crea calculadoras gratuitas llamado "CalculatorLord.com".

Algunas de estas herramientas, lenguajes, o frameworks son usados diariamente por miembros de la comunidad y pueden padecer cambios fundamentales en cómo son implementados o escritos con el tiempo.

En este artículo, exploraremos dos tecnologías populares de JavaScript, Next.js y React.js, comparando sus diferencias claves, examinando sus fortalezas, y ofreciendo perspectivas para ayudar a los desarrolladores a elegir la mejor opción para sus proyectos.

Tabla de Contenido

• Entendiendo React
  • Renderizado del lado del Cliente
  • Casos de uso para React en Desarrollo Web
• Explorando Next.js
  • Renderizado del lado del Servidor
  • Casos de uso para Next.js en Desarrollo Web
• Diferencias claves entre Next.js y React
  • Métodos de renderizado: lado del cliente vs. lado del servidor
  • Consideraciones de rendimiento
  • Implicaciones sobre SEO
  • Escalabilidad y complejidad del proyecto
• Cuándo usar React o Next.js
  • Cuándo usar React
  • Cuándo usar Next.js
• Conclusión

Entendiendo React

Frecuentemente nos confundimos en cuanto si React es un framework de JavaScript o no, pero acá está la respuesta a esa pregunta. React no es un framework de JavaScript, sino una librería. Ahora, estas dos terminologías son intercambiables con frecuencia o mal usadas, pero los explicaré en breve.

Una librería es una colección de código ya escrito que puede ser re-usado o llamarse cuando construyes tu proyecto.

Ejemplo: Imagina una biblioteca en donde vas a estudiar. Los libros ya están disponibles en los estantes – simplemente agarras uno que necesitas y comienzas a leer. De forma similar, en programación, una librería (o biblioteca) provee herramientas ya terminadas que puedes usar en tu proyecto sin tener que empezar de cero.

Por otro lado, un framework es como una estructura ya hecha que te ayuda a construir tu proyecto. Te da una fundación sólida para trabajar, de forma que no tengas que comenzar desde cero o escribir código repetitivo. En cambio, te enfocas en agregar tus propias características y lógica, mientras que el framework se encarga de ejecutar cosas en el momento exacto y de la forma correcta.

Ejemplo: Imagina que un framework es como una casa en construcción donde los muros, el fundamento, y el techo ya están construidos. Todo lo que necesitas hacer es decidir cómo diseñar el interior – cómo elegir los muebles, la pintura y las decoraciones. El framework maneja el trabajo pesado, cómo asegurar que la casa se mantenga fuerte, mientras te enfocas en hacer lo tuyo. De forma similar, en programación, el framework provee la estructura, y tu agregas tu lógica personalizada para completar el proyecto.

Con eso fuera del camino, continuemos.

React es una de las librerías de JavaScript más populares usadas por los desarrolladores para construir interfaces de usuario rápidos, interactivos y confiables. Es una librería declarativa que ayuda a los desarrolladores crear aplicaciones web basado en componentes. Facebook desarrolló esta librería en 2011 y ha sido tendencia desde entonces.

Usualmente, cuando se escribe código JavaScript, creamos un archivo con la extensión js. Por ejemplo: App.js, script.js, y así sucesivamente. En React creamos un archivo con la extensión jsx. Eso es: index.jsx, Home.jsx, y así sucesivamente. El jsx es una extensión de React que te permite escribir un código de JavaScript que se parece a HTML. La sintaxis, cuando se ejecuta, pasa a través de pre-procesadores/transpiladores los cuales transforman el código parecido a HTML a código estándar de JavaScript.

En el corazón de todas las aplicaciones de React están los componentes. Los componentes son trozos de interfaces de usuario (UI) los cuales son hechos de forma independiente y pueden ser re-usados en partes distintas en tu proyecto. Distintos componentes pueden ser hechos de forma separada y luego se juntan para formar una interfaz de usuario compleja (UI).

Nota: Cada aplicación de React tiene al menos un componente, comúnmente referido como el componente raíz. Este componente representa la aplicación entera. Dentro del componente raíz, con frecuencia hay otros componentes, conocidos como componentes hijos, que ayudan a estructurar y manejar distintas partes de la aplicación.

Acá hay una representación estructural de los componentes raíz e hijos.

De la imagen de arriba, puedes entender con claridad de qué tratan los componentes. App es el componente raíz, y dentro del componente raíz tenemos los componentes hijos: Navbar, Profile, Blog y Footer. Los hijos componentes pueden ser re-usados en otras páginas del proyecto sin tener que re-escribir el código nuevamente.

Renderizado del lado del cliente

El renderizado del lado del cliente (CSR – Client Side Rendering en inglés) es una técnica común, especialmente en librerías como React y frameworks como Vue.js, Angular, y así sucesivamente. Aquí, el navegador descarga y procesa los archivos de JavaScript para renderizar dinámicamente el contenido directamente en el dispositivo del usuario. Con CSR, las páginas web se generan de forma dinámica, y cualquier actualización o cambio al código se aplica sin requerir una recarga completa de página. Solamente las partes específicas que han cambiado se actualizan, asegurando una experiencia de usuario fluida y eficiente.

Por lo tanto, en CSR, la lógica y la estructura de la página web se maneja por el cliente (navegador) y una recarga completa de página se muestra.

Para ayudarte a entender CSR, he agregado un artículo aquí.

Casos de uso para React en Desarrollo Web

Desde que React se volvió la opción preferida de muchos desarrolladores, su flexibilidad lo ha hecho conveniente para un amplio rango de casos de uso en desarrollo web. Aquí hay unos pocos casos:

• Aplicaciones de una Sola Página (SPAs): Cuando hablamos sobre SPAs, no nos referimos realmente que tu aplicación web tiene solamente una página, puede tener múltiples páginas. En SPAs, tus archivos de aplicación web (HTML, CSS, JS) se generan una vez en tu página web y cuando las actualizaciones subsecuentes se realizan en el archivo, tu página no tendrá que recargar completamente. Este enfoque ayuda a asegurar una transición más rápida, reduce la carga en el servidor y mejorar la experiencia general de usuario.
• Interfaces de Usuario Interactivos: React es idóneo para construir interfaces de usuarios interactivos, de vez en cuando, pasa por actualizaciones dinámicas basadas en las acciones de los usuarios. Ejemplos son formularios en línea, paneles de control, sitios web (sitios web de comercio electrónico), y así sucesivamente.
• Aplicaciones Multiplataforma: Tener conocimientos de React viene a la mano cuando se construyen aplicaciones móviles, simplificando la conexión entre aplicaciones web y aplicaciones móviles. Herramientas como React Native te ayudan a lograr este proceso.

Explorando Next.js

Next.js es un framework popular basado en React usado para construir aplicaciones web con el uso de componentes de React. Next.js provee estructura adicional, características, y optimización para tu aplicación web.

A diferencia de React, Next.js soporta renderizado del lado del servidor (SSR), por lo que las solicitudes se procesan y se generan desde el servidor y luego mostrado en el navegador (cliente).

Renderizado del lado del Servidor

El Renderizado del lado del servidor (SSR - en inglés "Server Side-Rendering") es una técnica en el desarrollo web donde un servidor genera el HTML para una página web en el servidor y lo envía al navegador (cliente). En otras palabras, el servidor maneja las estructuras y la lógica de la página y muestra una página totalmente renderizada en la pantalla.

En el renderizado del lado del servidor, una solicitud se envía primero al servidor (cliente), luego el servidor comienza a procesar la solicitud y cuando termina de procesar la solicitud, ejecuta la solicitud al generar y muestra un archivo HTML con el contenido en el navegador (lado del cliente). Cuando un cambio se hace o una nueva página se solicita, una nueva solicitud se envía nuevamente al servidor y es procesado nuevamente – un nuevo archivo HTML y totalmente renderizado será generado y mostrado en el navegador (cliente).

Para una mejor comprensión de CSR y SSR, agregué un vídeo de YouTube aquí.

Casos de Uso para Next.js en el desarrollo web

• Aplicaciones de una Sola Página (SPAs): Next.js puede ser usado en la creación de aplicaciones de una sola página, similar a React.
• Optimizado para SEO: Next.js ayuda en crear sitios web optimizados para SEO al renderizar un archivo HTML en el servidor y entregarlo al navegador. Esto mejora la visibilidad en el motor de búsquedas, incrementando las chances que tu sitio web aparezca en la parte superior de los resultados de búsqueda.
• Plataformas de Multi-Usuarios: Debido a la habilidad de Next.js de manejar el enrutamiento dinámico, el manejo de API, y así sucesivamente, es fácil de crear aplicaciones que sirven para diversos propósitos.

Diferencia clave entre Next.js y React

Métodos de renderizado: lado del cliente vs. lado del servidor

Cuando hablamos sobre el método de renderizado en React, React se base principalmente en el método de renderizado del lado del cliente (CSR). Por lo tanto tanto la lógica como la estructura de la página web será manejado por el navegador (cliente). Aunque este método se usa comúnmente, tiene algunos efectos secundarios como carga de página inicial más lenta.

Next.js por el otro lado, soporta tanto SSR como CSR ya que fue construido por encima de React. Las páginas web se renderizan en el servidor y tanto la lógica como la estructura de la página se manejan por el servidor. Esto permite una carga más rápida de la página web y también mejora el SEO.

Consideraciones de rendimiento

En términos de consideraciones de rendimiento, Next.js se prefiere frecuentemente porque ofrece múltiples opciones de renderizado, incluyendo renderizado del lado del servidor (SSR), generación de sitios estáticos (SSG), Regeneración estático incremental (ISR), y renderizado del lado del cliente (CSR). En contraste, React primariamente provee un enfoque de renderizado único: renderizado del lado del cliente.

Implicaciones de SEO

React está menos optimizado para SEO porque los motores de búsqueda puede tener dificultades al indexar contenido que requiere ejecución de JavaScript para renderizar.

Del otro lado, Next.js está más optimizado para SEO que React porque renderiza contenido en el servidor, provee HTML totalmente renderizado para los motores de búsqueda para facilitar el indexado.

Escalabilidad y complejidad del Proyecto

En términos de escalabilidad y complejidad del proyecto, Next.js es generalmente mejor que React. Next.js provee funciones integradas que mejoran la escalabilidad de tu proyecto. Estos incluyen:

• Renderizado del lado del servidor (SSR) y generación de sitios estáticos (SSG) para mejor rendimiento y SEO.
• Una función de rutas API incorporada para crear funciones serverless sin problemas.
• Un sistema de enrutamiento basado en archivos que simplifica la organización de proyectos más grandes.

En contraste, con React, eres responsable de configurar y mantener la estructura para la escalabilidad. Para proyectos más grandes, esto frecuentemente requiere agregar herramientas adicionales tales como:

• Librerías de gestión de estado (por ejemplo, Redux, Recoil, y así sucesivamente)
• Librerías de enrutamiento (por ejemplo, React Router)

Estas herramientas son necesarias para mejorar la escalabilidad de React y abarcar la complejidad del proyecto, pero también incrementan la carga y esfuerzo necesario para configurar y gestionar la aplicación.

En resumen, aquí una tabla que lo desglosa:

Cuándo usar React o Next.js

Elegir la herramienta correcta para tu proyecto depende únicamente en la complejidad de la solución del proyecto que estás construyendo. Mientras que React y Next.js están relacionados cercanamente, cada uno tiene sus fortalezas y casos de uso óptimos.

Cuándo usar React

Aquí hay algunos casos donde es mejor usar React para tu proyecto:

• Cuando construyes aplicaciones altamente interactivas.
• Cuando tu proyecto requiere manejo manual de enrutamiento, gestión de estado o/e integración de API.
• Cuando tu proyecto requiere renderizado del lado del cliente (CSR)

Cuándo usar Next.js

Aquí hay algunos casos donde es mejor usar Next.js:

• Cuando tu proyecto requiere un mejor SEO.
• Cuando tu proyecto requiere renderizado del lado del servidor.
• Cuando tu proyecto requiere que construyas APIs junto con tu código de frontend.
• Cuando construyes sitios web basado en contenido como blogs o sitios e-commerce. Debido a su uso de renderizado del lado del servidor, ayuda en mejorar los tiempos de carga de los contenidos en la página.
• Next.js se usa mejor cuando quieres optimizar imágenes en tu proyecto.

Conclusión

A este punto creo que tienes una clara comprensión de React y de Next.js, los conceptos del renderizado del lado del servidor y del lado del cliente, los casos de uso tanto para React como para Next.js, y las diferencias claves entre ellos.

Gracias por tomarte el tiempo de leer este artículo. Espero que lo hayas encontrado útil.

Feliz codificación.

Acabamos de publicar un curso en el canal de YouTube de freeCodeCamp.org en español que te guiará paso a paso por los fundamentos de Godot. Aprenderás los conceptos clave que necesitas para comenzar.

Luis Canary creó este curso. Él es el Programador Principal de Gameplay en Pendulo Studios, una empresa de desarrollo de videojuegos con sede en Madrid. Ha dado cursos en universidades, escuelas y empresas y le encanta compartir su pasión por el desarrollo de videojuegos en su canal de YouTube.

Antes de adentrarnos en el contenido del curso, veamos qué es Godot y por qué deberías aprenderlo.

¿Qué es Godot?

Godot es un motor de videojuegos de código abierto que te permite crear videojuegos 2D y 3D.

Se ha vuelto muy popular en los últimos años por sus funcionalidades robustas que lo convierten en una gran herramienta en el mundo del desarrollo de videojuegos, sin las grandes exigencias de recursos de otros motores de videojuegos. Esto lo convierte en una opción práctica para creadores que buscan eficiencia y alto rendimiento.

Su licencia de código abierto (open source) es excelente para desarrolladores independientes y equipos pequeños, ya que no tiene tarifas de licencia. Tendrás todos los derechos y control total sobre los juegos y proyectos que crees con Godot.

Esta flexibilidad contribuye a que el desarrollo de videojuegos sea más accesible para todos.

Godot también tiene su propio lenguaje de scripting fácil de usar y un sistema basado en nodos. Su lenguaje de scripting, llamado GDScript, es muy similar a Python y es fácil de aprender para principiantes. Su sistema intuitivo basado en nodos simplifica el proceso de crear juegos 2D y 3D.

Al aprender Godot, estarás dando tus primeros pasos hacia una carrera en el desarrollo de videojuegos.

💡 Tip: Este curso es perfecto para cualquiera que desee iniciarse en el mundo del desarrollo de videojuegos. Enseña GDScript con un ejemplo práctico.

Curso de Godot en español

Genial. Ahora que ya sabes más sobre Godot, veamos lo que aprenderás durante el curso:

• Introducción
• Qué es Godot
• Descargar e instalar Godot
• Iluminación
• Materiales y física
• Interfaz de usuario
• Interfaz de usuario
• Movimiento
• Jugador
• Primer script
• Actualizar proyecto
• Cambiar inputs proyecto 3D
• Plataformas 3D y respawn player
• Recolectar monedas
• Rotación de cámara 3D
• Modelo de personaje y animaciones
• Música y sonidos
• Exportar videojuego .exe

Al completar el curso sabrás los fundamentos Godot y podrás comenzar a desarrollar videojuegos.

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

✍️ Curso creado por Luis Canary.

• YouTube: @LuisCanary
• Instagram: @luiscanary_
• Twitter: @luiscanary
• TikTok: @luiscanary
• Twitch: LuisCanary
• Discord: Invitación
• Facebook: LuisCanaryy

Construir aplicaciones web interactivas y accesibles es una habilidad crucial para los desarrolladores modernos. React, una de las bibliotecas de JavaScript más populares, ofrece una forma poderosa de crear interfaces de usuario dinámicas. Una gran manera de profundizar tu conocimiento de React mientras trabajas en un proyecto es crear un juego de memoria - un desafío atractivo que abarca conceptos clave del desarrollo, como la gestión del estado, el diseño de componentes y las interacciones del usuario.

Acabamos de publicar un curso en el canal de YouTube freeCodeCamp.org que te enseñará a construir un juego de memoria completamente interactivo en React, con un gran énfasis en accesibilidad. Este curso, desarrollado por Scrimba, te guía a través de todo el proceso de desarrollo, desde la obtención de datos de una API y el diseño de componentes reutilizables hasta la implementación de la lógica del juego y las mejores prácticas de accesibilidad. Al final del curso, tendrás un proyecto pulido y listo para mostrar tus habilidades.

El curso empieza cubriendo los aspectos fundamentales del juego, incluyendo la obtención y almacenamiento de datos de una API, la renderización de componentes dinámicos y la garantía de interacciones fluidas para el usuario. Aprenderás a recuperar y gestionar los datos de juego, barajar y aleatorizar los elementos, así como a manejar la lógica del juego, como la detección de coincidencias y el seguimiento del progreso.

La accesibilidad es un enfoque clave de este proyecto, garantizando que el juego sea inclusivo y fácil de usar. Explorarás técnicas esenciales de accesibilidad , incluyendo el uso de atributos ARIA , HTML semántico y navegación con teclado. Además, el curso profundiza en la gestión eficiente del estado de la aplicación, el manejo adecuado de errores y la refactorización de componentes para mejorar su mantenimiento.

Algunos de los temas claves que se abordan en este curso incluyen:

• Obtención y almacenamiento de datos de una API utilizando el estado de React.
• Renderización y gestión de componentes dinámicos del juego.
• Implementación de la lógica para seleccionar, emparejar y barajar elementos del juego.
• Construcción de componentes reutilizables, como un botón interactivo de emoji
• Mejora de la accesibilidad mediante atributos ARIA y consideraciones para tecnologías de asistencia.
• Manejo de errores y mejora de la experiencia del usuario con componentes de interfaz dedicados
• Gestión y refactorización de datos de formularios dentro del estado de React

Al final de este curso no solo tendrás un juego de memoria completamente funcional si no que también obtendrás un conocimiento mas profundo del desarrollo de React y sus principios sobre la accesibilidad. Ya sea que estes buscando mejorar tus habilidades en React, crear un proyecto para tu portafolio o aprender más sobre desarrollo web inclusivo, este tutorial es un recurso excelente.

¡Mira el curso completo en el canal de YouTube de freeCodeCamp.org y comienza hoy mismo a construir tu propio juego de memoria interactivo!

Si este artículo fue de ayuda, ¡Compártelo!

Aprende a programar gratis. El plan de estudios de código abierto de freeCodeCamp ha ayudado a más de 40,000 personas a conseguir empleo como desarrolladores. ¡Empieza hoy mismo!

En este artículo, voy a mostrarte como crear una app de chat en tiempo real usando React.js y Firebase.

En la app, vamos a permitir que los usuarios se logueen con su cuenta de Google usando el servicio de inicio de sesion de Firebase. También guardaremos y recuperaremos todos los mensajes usando el servicio Firestone de Firebase.

Prerrequisitos

Para este tutorial, deberás tener instalado Node.js en tu sistema, además deberás tener conocimientos intermedios de CSS, JavaScript y ReactJS y conocimientos sobre el uso de la terminal de líneas de comandos. No debes saber utilizar Firebase para hacer el mismo.

¿Que es Firebase?

Firebase es un BaaS (Backend as a Service), una plataforma de backend propiedad de Google que permite a desarrolladores construir aplicaciones para iOS, Android o aplicaciones web.

Nos provee con herramientas para el seguimiento de análisis, reportar y solucionar fallas de aplicaciones y crear pruebas de marketing y productos. Esto, ayuda a los desarrolladores a crear aplicaciones de calidad, hacer crecer su base de usuarios y obtener ganancias.

Para este tutorial, vamos a utilizar dos herramientas: Firebase Authentication y Cloud Firestone.

Firebase Authentication

Firebase Authentication (SDK) es una herramienta de Firebase que permite realizar autenticación de usuarios mediante varios métodos, como contraseñas, números de telefono, cuentas de Google, Facebook, Twitter, GitHub y mas. En este proyecto usaremos la autenticación a través de cuentas de Google.

Cloud Firestore

Cloud Firestones es un servicio de bases de datos no relacionales que nos permite guardar y sincronizar información. Este servicio guarda la información en documentos como pares de clave-valor, y estos documentos en colecciones.

Los documentos, a su vez pueden tener sub-colecciones, permitiéndonos anidar colecciones dentro de otras colecciones, además la información se sincroniza automáticamente entre todos los dispositivos que estén consultando esos datos.

Ahora que ya tienes una idea general de como trabajan Firebase y Cloud Firestone, vamos a trabajar en el proyecto.

Nota: para este proyecto, ya escribí el CSS y preconstruí los componentes para la aplicación de chat, puedes encontrar el código del proyecto final en GitHub y los componentes junto con el CSS en la carpeta "setup", y también puedes ver el proyecto final funcionando en este link

Como crear nuestra aplicación de React

Clona este repositorio de GitHub, borra la carpeta src en el directorio raíz y remplázala con la carpeta "src" que se encuentra en la carpeta "setup".

Alternativamente, puedes crear tu aplicación de React corriendo el comando create-react-app en la terminal.

npx create-react-app react-chat

react-chat  es el nombre de la aplicación. Una vez que finaliza correremos el comando  npm install firebase react-firebase-hooks para instalar firebase y react-firebase-hooks.

Una vez que finaliza, borra la carpeta src y reemplazala con la que descargaste de la carpeta setup para usar el archivo CSS y los componentes preconstruidos. (Opcionalmente, puedes escribir tus propios componentes y tu propio archivo CSS)

Ahora, tu carpeta src contiene los siguientes componentes:

• Una carpeta de componentes con un componente NavBar que contiene los botones de Google sign-in y Sign Out,
• Un componente que le da la Bienvenida al usuario que no está logueado,
• Un componente Chatbox que solo es visible cuando el usuario está logueado.
• El componente Message para mostrar los mensajes de los usuarios,y
• El componente SendMessage que usaremos para que el usuario pueda escribir y enviar sus mensajes.

Además, tenemos lo siguiente:

• Una carpeta img donde se guarda la imagen de Google sign-in y sign-out,
• un archivo CSS llamado App.css con el código CSS para la aplicación,
• un archivo llamado App.js con todos los componentes importados dentro,
• y un archivo llamado index.js.

Corre el comando npm start para ver la aplicación en el navegador, deberías ver algo como esto:

Ahora, creemos una cuenta de Firebase y configuremos nuestro proyecto.

Como configurar el proyecto en Firebase

Si todavía no tienes una cuenta de Firebase, puedes abrir una usando tu correo de Gmail (solo se puede usar el mail de Google).

En la página de inicio, haga clic en comenzar y luego en crear un proyecto.

Completa el formulario para crear el proyecto agregando un nombre de proyecto (en nuestro caso usaremos el nombre React-chat). Si quieres dejar habilitado Google Analytics para tu proyecto déjalo, sino deshabilítalo. Después, haz clic en crear proyecto

Una vez creado, presiona el botón Continuar.

Elige el tipo de aplicación al que quieres agregar Firebase, para este artículo elegiremos el icono de código porque estamos desarrollando una aplicación web.

Ingresa un sobrenombre para la aplicación y haz clic en el botón registrar app.

En el menú selecciona npm, copia el código (lo vamos a utilizar más tarde) y haz clic en ir a la consola.

Cómo configurar Firebase Authentication

Para configurar Firebase Authentication, ve al menú de la izquierda y presiona sobre Compilación y selecciona Authentication del desplegable.

Haz clic en comenzar y selecciona a Google en el menú proveedores de acceso.

Presiona sobre el botón de la derecha para habilitar el proyecto y selecciona un correo de soporte, luego haz clic en guardar.

Cómo configurar Cloud Firestone

Nuevamente. ve al menú de la izquierda, clickea en compilación y selecciona Firestone. Luego haz clic en crear base de datos y completa el formulario.

En el primer paso, selecciona la localización de la base de datos, por defecto el sistema asignará la ubicación más cercana a la que te encuentras, luego presiona siguiente.

Selecciona el modo de la base de datos, puedes elegir producción o modo de prueba.

El modo de prueba permite que cualquier cliente puede leer o escribir en la base de datos por 30 días. El modo producción significa que nadie puede leer o escribir en la base de datos, por lo que debes escribir tus reglas para brindar acceso a la base de datos.

Selecciona modo de producción y presiona el botón crear.

El siguiente paso será editar nuestras reglas, haz clic en la pestaña reglas.

Reemplaza la regla que esta en la pestaña por la siguiente y presiona el boton publicar.

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read: if true;
      allow create, update, delete, write: if request.auth != null;
    }
  }
}

Analicemos el código, la primer parte,  allow read: if true; significa que cualquiera puede leer tu base de datos, mientras que el bloque de código siguiente allow create, update, delete, write: if request.auth != null; significa que solo los clientes autenticados pueden crear, actualizar, borrar y escribir datos en la base de datos.

Puedes comenzar agregando o creando una colección en tu base de datos o crear una automáticamente en la aplicación que estamos desarrollando, lo que haremos después. Si quieres crear una colección en Cloud Firestone, vuelve a la pestaña de datos presionando en la misma y presiona el botón iniciar coleccion.

Ingresa el nombre de la colección, por ejemplo "messages" y clickea en siguiente.

Ahora, crea el documento para la colección,

Clickea en ID automático, de esa forma el sistema generará el ID de forma automática, o si lo prefieres ingresa uno tu.

Luego, se crea el par clave->valor para el documento. El campo llamado "Campo" representa el nombre de la clave, el campo "Tipo" nos dice que valor almacena (cadena de texto, number, timeStamp, etc), y finalmente el campo "Valor" es lo que guardamos en esta clave.

Puedes seguir agregando más documentos presionando en el enlace "Agregar campo", sino presiona en Guardar para que se guarde la colección.

Nuestro proyecto de Firebase ya esta correctamente seteado, volvamos a la aplicación de React.

Cómo configurar Firebase en React

En la carpeta src, crea un archivo llamado firebase.js y pega el código que copiamos al configurar firebase.

Tambien importemos los servicios getAuth  y getFirestore desde Autenticación para Web y Firestore en la nube para web respectivamente. Puedes leer más sobre las bibliotecas disponibles para Firebase en la página de la documentación.

Nuestro archivo firebase.js debe verse asi:

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: LA_CLAVE_PARA_LA_APLICACION_VA_AQUI(CLAVE_API),
  authDomain: EL_DOMINIO_DE_AUTENTICACION_PARA_LA_APP_VA_AQUI,
  projectId: EL_ID_DEL_PROYECTO_PARA_LA_APP_VA_AQUI,
  storageBucket: EL_BUCKET_PARA_LA_APLICACION_VA_AQUI,
  messagingSenderId: EL_ID_PARA_ENVIAR_LOS_MENSAJES_VA_AQUI,
  appId: EL_APP_ID_DE_LA_APLICACION_DE_REACT_VA_AQUI,
};

Cómo implementar Firebase dentro de nuestra aplicación React

Cómo autenticar usuarios con su cuenta de Google

Nosotros queremos que los usuarios tengan acceso a la aplicación de chat y que en caso de que estén autenticados puedan enviar mensajes, si no lo están queremos que vean la página de bienvenida para poder loguearse usando el botón de Google sign-in, y si esta logueado debe poder ver el botón de Sign-out para salir del chat.

Esta autenticación será controlada por el componente NavBar, que contiene ambos botones (sign-in y sign-out).

En nuestro componente NavBar, importaremos nuestra imagen de Google "sign-in", y la guardaremos como la constante llamada GoogleSignin. También tendremos un estado llamado user, seteado como falso, una función llamada googleSignIn que setea el estado de user como verdadero, y una función llamada signOut que setea el estado de user como falso.

También tenemos un elemento nav con un tag h1 que representa el título de nuestra app y dos botones que se renderizan condicionalmente en base al estado del componente user

import React, { useState } from "react";
import GoogleSignin from "../img/btn_google_signin_dark_pressed_web.png";

const NavBar = () => {
  const [user, setUser] = useState(false);
  const googleSignIn = () => {
    setUser(true);
  };
  const signOut = () => {
    setUser(false);
  };
  return (
    <nav className="nav-bar">
      <h1>React Chat</h1>
      {user ? (
        <button onClick={signOut} className="sign-out" type="button">
          Sign Out
        </button>
      ) : (
        <button className="sign-in">
          <img
            onClick={googleSignIn}
            src={GoogleSignin}
            alt="sign in with google"
            type="button"
          />
        </button>
      )}
    </nav>
  );
};
export default NavBar;

Hagamos un cambio en el componente NavBar, importando lo siguiente:

import { auth } from "../firebase";
import { useAuthState } from "react-firebase-hooks/auth";
import { GoogleAuthProvider, signInWithRedirect } from "firebase/auth";

Reemplaza el estado del usuario con el siguiente código:

const [user] = useAuthState(auth);

Y edita las funciones googleSignIn y signOut:

const googleSignIn = () => {
  const provider = new GoogleAuthProvider();
  signInWithRedirect(auth, provider);
};
const signOut = () => {
  auth.signOut();
};

La función useAuthState se dispara en el momento que el usuario se loguea o desloguea, permitiéndonos acceder a los detalles del usuario. Actualmente, el estado del usuario es null, una vez que te logueas, el estado del usuario cambiará a la información suministrada por el método de autenticación (en este caso, Google).

En la función googleSignIn, le indicamos a Firebase que el el usuario quiere autenticarse con Google usando el GoogleAuthProvider(). También lo redirige a la página de inicio de sesión de Google.

Luego de el correcto inicio de sesión del usuario, sus datos son almacenados en auth, y el usuario es redireccionado a la app. La función signOut borra la información almacenada de autenticación, retornando ésta a null. El nuevo estado almacenado también determina qué botón debe renderizarse.

Agreguemos también autenticación a nuestro archivo App.js. Importa lo siguiente:

import { auth } from "./firebase";
import { useAuthState } from "react-firebase-hooks/auth";

Agrega el nuevo user state, para que podamos renderizar el componente Welcome si el usuario no está logueado o el componente Chatbox si el usuario ya se autenticó.

const [user] = useAuthState(auth);

El codigo final debe lucir así:

import { auth } from "./firebase";
import { useAuthState } from "react-firebase-hooks/auth";
import "./App.css";
import NavBar from "./components/NavBar";
import ChatBox from "./components/ChatBox";
import Welcome from "./components/Welcome";

function App() {
  const [user] = useAuthState(auth);
  return (
    <div className="App">
      <NavBar />
      {!user ? <Welcome /> : <ChatBox />}
    </div>
  );
}
export default App;

Al probar nuestras nuevas funciones de sign-in y sign-out, veremos lo siguiente:

Ahora, hagamos lo mismo con el componente Welcome, que ahora tiene el siguiente código:

import React from "react";
import GoogleSignin from "../img/btn_google_signin_dark_pressed_web.png";

const Welcome = () => {
  const googleSignIn = () => {};

  return (
    <main className="welcome">
      <h2>Welcome to React Chat.</h2>
      <img src="/logo512.png" alt="ReactJs logo" width={50} height={50} />
      <p>Sign in with Google to chat with with your fellow React Developers.</p>
      <button className="sign-in">
        <img
          onClick={googleSignIn}
          src={GoogleSignin}
          alt="sign in with google"
          type="button"
        />
      </button>
    </main>
  );
};
export default Welcome;

Importaremos lo siguiente:

import { auth } from "../firebase";
import { GoogleAuthProvider, signInWithRedirect } from "firebase/auth";

y tambien editaremos la funcion googleSignIn:

const googleSignIn = () => {
    const provider = new GoogleAuthProvider();
    signInWithRedirect(auth, provider);
};

Ahora, podremos loguearnos desde el botón que se renderiza en el componente Welcome:

Como enviar y almacenar mensajes en Firebase:

Actualmente, estamos mostrando un mensaje de prueba de nuestro componente Message y, el botón Send no realiza ninguna acción. Cuando ingresamos un mensaje y pulsamos el botón Send, queremos que el mensaje se envíe de inmediato a la aplicación.

Así, que editemos el componente SendMessage:

Primero, importamos useState de React, auth y db  de nuestro archivo de configuración de firebase, y addDoc, collection y serverTimestamp de la librería Firestore.

import React, { useState } from "react";
import { auth, db } from "../firebase";
import { addDoc, collection, serverTimestamp } from "firebase/firestore";

Crearemos un estado llamado message que inicialmente esté definido como una cadena vacía y se pase como valor a la etiqueta input. La funcion onChange es también agregada a el input, que setea el estado del message en lo que el usuario tipee.

const SendMessage = () => {
  const [message, setMessage] = useState("");
    
  return (
    <form className="send-message">
      <input
        ...
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <button type="submit">Send</button>
    </form>
  );
};

También creamos una función llamada sendMessage, y agregamos el atributo onSubmit en nuestro formulario, que ejecuta la función sendMessage cuando el usuario clickea en el botón Send (enviar). Nótese que el botón debe tener el tipo type="submit"  para que la función funcione.

 const sendMessage = async (event) => {
    event.preventDefault();
    if (message.trim() === "") {
      alert("Enter valid message");
      return;
    }
    const { uid, displayName, photoURL } = auth.currentUser;
    await addDoc(collection(db, "messages"), {
      text: message,
      name: displayName,
      avatar: photoURL,
      createdAt: serverTimestamp(),
      uid,
    });
    setMessage("");
  };
  
  return (
    <form onSubmit={(event) => sendMessage(event)} className="send-message">
...

La función sendMessage es una funcion asincrona. Primero chequea si el el usuario esta intentando enviar una cadena vacía o espacios vacíos como un mensaje y, en caso de que así sea alerta al usuario.

Si el mensaje no es una cadena vacía, toma del usuario los siguientes datos dela información proporcionada por auth al logguearse: uid, displayName y photoURL. Estos datos corresponden con el identificador único del usuario, su nombre y la URL de la foto del usuario, respectivamente.

Luego, usa la función addDoc() para crear un documento dentro de la colección messages de nuestra base de datos, a la que accede gracias al archivo que importamos. En caso de que la colección no exista, crea una por nosotros.

También crea un par de llave-valor, guardando nuestro mensaje en text, displayName en name, guardando el momento en el que el mensaje fue guardado en nuestra base de datos en la columna createAt, y el uid.

Estos pares de llave-valor, conforman los datos de nuestro documento. Una vez que se completa la acción, se restablece el estado del mensajea una cadena vacía.

Como recuperar mensajes de nuestra base de datos

Luego de enviar el mensaje del usuario, debemos mostrarlo en la pantalla. Vayamos a nuestro componente chatBox e importemos lo siguiente:

import { useEffect, useRef, useState } from "react";
import {
  query,
  collection,
  orderBy,
  onSnapshot,
  limit,
} from "firebase/firestore";
import { db } from "../firebase";

Creamos el hook useEffect que correra cada vez que se realizan cambios en el thatroom, por ejemplo enviar o borrar un mensaje.

useEffect(() => {
  const q = query(
    collection(db, "messages"),
    orderBy("createdAt", "desc"),
    limit(50)
  );
  const unsubscribe = onSnapshot(q, (QuerySnapshot) => {
    const fetchedMessages = [];
    QuerySnapshot.forEach((doc) => {
      fetchedMessages.push({ ...doc.data(), id: doc.id });
    });
    const sortedMessages = fetchedMessages.sort(
      (a, b) => a.createdAt - b.createdAt
    );
    setMessages(sortedMessages);
  });
  return () => unsubscribe;
}, []);

En el hook useEffect, tenemos la constante q, una consulta de Firebase que busca los mensajes dentro de la base de la colección messages de nuestra base de datos, luego ordena los documentos obtenidos basados en la llave createAt y devuelve un máximo de 50 documentos (mensajes guardados)

La constante unsubscribe representa la función onSnapshot, que escucha los cambios en el documento, esta función tiene un arreglo vacío llamado messages.

El bucle forEach itera entre todos los documentos de la colección y guarda la información en un nuevo arreglo. Luego, asigna el arreglo inicial de mensajes al nuevo arreglo de mensajes.

También usamos el método map en nuestro arreglo de mensajes para  cada mensaje/documento en nuestro componente message.

{messages?.map((message) => (
  <Message key={message.id} message={message} />
))}

El codigo completo luce asi:

import React, { useEffect, useRef, useState } from "react";
import {
  query,
  collection,
  orderBy,
  onSnapshot,
  limit,
} from "firebase/firestore";
import { db } from "../firebase";
import Message from "./Message";
import SendMessage from "./SendMessage";

const ChatBox = () => {
  const [messages, setMessages] = useState([]);
  const scroll = useRef();

  useEffect(() => {
    const q = query(
      collection(db, "messages"),
      orderBy("createdAt", "desc"),
      limit(50)
    );

    const unsubscribe = onSnapshot(q, (QuerySnapshot) => {
      const fetchedMessages = [];
      QuerySnapshot.forEach((doc) => {
        fetchedMessages.push({ ...doc.data(), id: doc.id });
      });
      const sortedMessages = fetchedMessages.sort(
        (a, b) => a.createdAt - b.createdAt
      );
      setMessages(sortedMessages);
    });
    return () => unsubscribe;
  }, []);

  return (
    <main className="chat-box">
      <div className="messages-wrapper">
        {messages?.map((message) => (
          <Message key={message.id} message={message} />
        ))}
      </div>
      {/* when a new message enters the chat, the screen scrolls down to the scroll div */}
      <span ref={scroll}></span>
      <SendMessage scroll={scroll} />
    </main>
  );
};

export default ChatBox;

Vayamos a nuestro componente message, y rendericemos los datos recibidos en el navegador.

import React from "react";
import { auth } from "../firebase";
import { useAuthState } from "react-firebase-hooks/auth";
const Message = ({ message }) => {
  const [user] = useAuthState(auth);

  return (
    <div
      className={`chat-bubble ${message.uid === user.uid ? "right" : ""}`}>
      <img
        className="chat-bubble__left"
        src={message.avatar}
        alt="user avatar"
      />
      <div className="chat-bubble__right">
        <p className="user-name">{message.name}</p>
        <p className="user-message">{message.text}</p>
      </div>
    </div>
  );
};
export default Message;

Importamos auth y useAuthState, y almacenamos los datos del usuario en  user. Deconstruimos el prop message y asignamos el avatar al atributo src del componente img. También reemplazamos el nombre y el mensaje "de prueba" con el mensaje obtenido desde message.

También aplicamos una condición al estilo CSS según el uid del autor del mensaje, entonces si el uid del autor del mensaje es el mismo que el del usuario logueado, se aplica al div el estilo definido en el selector derecho; en caso contrario no se agrega ningún estilo adicional.

Actualmente, todos  los mensajes se posicionan a la izquierda, así que si el autor del mensaje es el usuario logueado, sus mensajes se posicionaran a la derecha. Veamos esa dinámica en acción en el navegador:

El mensaje es enviado y almacenado en nuestra base de datos, luego todos los mensajes se recuperan y la sala es actualizada en tiempo real con los mensajes nuevos.

El nombre y el avatar de cada usuario son  mostrados en cada tarjeta, pero también podemos ver que el chat no se desliza automáticamente hacia abajo cuando llega un nuevo mensaje. Vamos a arreglar eso.

Como hacer que el chat se desplace hasta el final

Vayamos al archivo ChatBox.js, importemos el hook useRef y creemos una constante llamada scroll:

import React, { useEffect, useRef, useState } from "react";
...
const scroll = useRef();

Crearemos un elemento span con un atributo ref conectado al valor de scroll,y , también pasamos el  scroll en nuestro componente message.

Luego, creamos un elemento span con un atributo ref cuyo valor es scroll, y también pasamos scroll a nuestro componente SendMessage:

<main className="chat-box">
   ...
   {/* when a new message enters the chat, the screen scrolls dowwn to the scroll div */}
   <span ref={scroll}></span>
   <SendMessage scroll={scroll} />
</main>

Luego vamos al componente Messages, accedemos a la constante scroll, y agregamos scroll.current.scrollIntoView({ behavior: "smooth" }) al final de nuestra función sendMessage.

Este código le indica al navegador que el scroll span debe ser visible después de enviar un mensaje. Por eso ponemos la etiqueta span al final de cada mensaje.

const SendMessage = ({ scroll }) => {

  const sendMessage = async (event) => {
   ...
    setMessage("");
    scroll.current.scrollIntoView({ behavior: "smooth" });
  };
  ...
};

Volviendo al navegador, deberíamos ver que el chat se desplaza automáticamente hasta el final cuando del usuario envía un mensaje.

Como agregar dominios autorizados

Cuando desplegamos nuestra aplicacion en React, es indispensable agregar nuestro dominio a la lista de dominios autorizados en Firebase. Este paso, asegura que nuestra app se comunique correctamente con los servicios de Firebase, veamos como hacerlo:

En la consola de Firebase, navega hasta la sección Autenticación y haz click en la pestaña de configuración. Deslízate hasta la parte de Dominios autorizados; a continuación clickea en el botón agregar un dominio. Luego agrega el o los dominios donde la aplicación será desplegada.

Por ejemplo, si desplegaras la aplicación en la dirección https://my-react-chat-app.com, ingresa my-react-chat-app.com como un dominio autorizado, y clickea el boton agregar para guardar los cambios.

Agregando el dominio donde desplegaras tu app a la lista de dominios autorizados, le brindas permisos a los servicios de Firestone para ser accedidos desde ese dominio. Si no hiciéramos esto, encontraríamos errores al intentar establecer conexión o realizar operaciones con Firebase.

Para terminar

Y, así es como llegamos al final de la construcción de esta aplicación de chat en tiempo real, ¡felicitaciones!.

En este tutorial, aprendimos a usar Firebase y React para crear una aplicacion de  chat en tiempo real. También autenticamos a los usuarios usando el método de logueo por cuenta de Google de Firetone y, guardamos los mensajes del chat usando Cloud Firestore. Finalmente, aprendimos a usar algunos servicios y librerías de Firestone.

Puedes encontrar el código de este proyecto en GitHub y puedes probar la aplicación desplegada usando el siguiente enlace.

Si disfrutaste este articulo, por favor compártelo para ayudar a otros desarrolladores, también puedes visitar mi blog para leer mas artículos o puedes seguirme en  Twitter o LinkedIn.

Hasta la próxima, byeeeeee!

Al colaborar con otros desarrolladores utilizando Git, es posible que te encuentres con el error error: failed to push some refs to [repositorio remoto].

Este error ocurre principalmente cuando intentas enviar tus cambios locales a GitHub, pero el repositorio local aún no está actualizado con los cambios realizados en el repositorio remoto.

En esencia, Git te está indicando que actualices el repositorio local con los cambios actuales del repositorio remoto antes de enviar tus propios cambios. Esto es necesario para evitar sobrescribir los cambios realizados por otros.

A continuación, discutiremos dos posibles formas de solucionar este error.

Cómo solucionar el error error: failed to push some refs to en Git

Podemos solucionar el error error: failed to push some refs to [repositorio remoto] en Git utilizando los comandos git pull origin [rama] o git pull --rebase origin [rama]. En la mayoría de los casos, la segunda opción ( git pull --rebase origin [rama]) resuelve el error.

Veamos cómo puedes usar los comandos mencionados.

Cómo solucionar el error error: failed to push some refs to en Git usando git pull

Ejecutar git pull implica obtener los nuevos cambios realizados en el repositorio remoto y fusionarlos con el repositorio local.

Una vez que se haya realizado la fusión, podrás enviar tus propios cambios de código a GitHub.

En este caso, estamos intentando solucionar el error error: failed to push some refs to [repositorio remoto] ejecutando git pull.

Aquí te mostramos cómo hacerlo:

git pull origin main

Si estás trabajando en una rama diferente, deberás reemplazar main en el ejemplo anterior con el nombre de tu rama.

Ten en cuenta que existe la posibilidad de que este comando no logre sincronizar tus repositorios remoto y local, y por lo tanto, no resuelva el error. Si la solicitud se completa correctamente, continúa y ejecuta el siguiente comando para enviar tus propios cambios:

git push -u origin main

Si el error persiste, obtendrás un error que dice: fatal: refusing to merge unrelated histories. En ese caso, utiliza la solución que se presenta en la siguiente sección.

Cómo solucionar el error error: failed to push some refs to en Git usando git pull --rebase

El comando git pull --rebase es útil cuando tu rama local está un commit por detrás de la rama remota.

Para solucionar el error, ejecuta los siguientes comandos:

git pull --rebase origin main
git push -u origin main

Si el primer comando se ejecuta correctamente, deberías obtener una respuesta que diga: Successfully rebased and updated refs/heads/main.

El segundo comando envía el estado actual de tu repositorio local a la rama remota.

Resumen

En este artículo, abordamos el error error: failed to push some refs to [repositorio remoto].

Este error se produce cuando intentas enviar tus cambios locales al repositorio remoto sin actualizar tu repositorio local con los cambios más recientes del repositorio remoto.

Discutimos dos comandos que puedes usar para solucionar este error: git pull origin [rama] y git pull --rebase origin [rama].

Espero que esto te ayude a resolver el error.

¡Feliz codificación!

El SSH (Shell Seguro) es un protocolo cliente-servidor para conectarse y autenticarse a un servidor remoto.

La autenticación significa que el servidor remoto puede verificar que eres tú mismo no alguien más hablando por ti.

Podrías ya estar usando la autenticación SSH de Github, ¿pero sabes cómo funciona en sí? En este artículo, aprenderá qué sucede de forma interna y cómo funciona en realidad la autenticación de SSH.

A lo largo, entenderás los conceptos fundamentales de criptografía que cada desarrollador debería saber: encriptación de clave simétrica, encriptación de clave asimétrica, funciones hash criptográficas, y firmas digitales.

Algunos desarrolladores usualmente no tienen la chance de aprender y entender estos fundamentos de criptografía, pero estos conceptos te ayudarán a la larga. También, te ayudarán en estar en una mejor posición para tomar decisiones de seguridad informadas para tus aplicaciones de web en producción.

Así que vamos, abróchate los cinturones de seguridad, ¡y comencemos!

Esto es lo que cubriremos:

1. Primero, ¿por qué la Autenticación es tan importante?
2. Encriptación de Clave Simétrica
3. Encriptación de Clave Asimétrica
4. Funciones de Hash Criptográficas
5. Firmas Digitales
6. Cómo Funciona la Autenticación SSH
7. Resumiendo Todo

Primero, ¿por qué la Autenticación es tan importante?

Cuando ejecutamos git push, Github necesita verificar que la persona correcta está interactuando con Github. Imagina si un atacante podría llegar a hacer git push por ti.

Entonces todos tus repositorios estarían bajo el control del atacante. Podrían eliminar todo tu código juntamente con todo el historial de las confirmaciones.

Esto suena bastante peligroso, ¿no? Así que para verificar que eres tú el que está hablando con Github, y no un atacante, Github tiene varias formas de autenticarte.

El método más usado para autenticar con Github es la autenticación SSH.

Antes que entendamos cómo funciona la autenticación SSH internamente, necesitaremos entender los conceptos fundamentales de criptografía, a saber – encriptación de clave simétrica, encriptación de clave asimétrica, funciones de hash criptográficas, y firmas digitales.

¡Comencemos!

Encriptación de Clave Simétrica

En los tiempos antiguos, los gobernantes idearon varios métodos de comunicar mensajes militares secretos a sus comandantes del ejército.

En los métodos más primitivos, mayormente usados por los gobernantes Griegos antiguos y posiblemente luego los Romanos, involucrados usando una vara de madera cilíndrica llamado un Escítala.

Antes de una invasión militar, el gobernante tendría las dos mismas varas de madera cilíndricos exactas. Entonces le daría una escítala al comandante del ejército y mantener uno para sí mismo.

El dispositivo funcionaba al enrollar una tira de cuero alrededor de escítala. Después de hacer esto, el gobernante escribiría el mensaje por encima de la tira de cuero enrollada de forma que solo pudiera ser leído cuando estuviere enrollada de forma apropiada nuevamente.

Supón que la escítala le permitiera escribir tres letras alrededor en un circulo y cinco letras de forma recta a lo largo de su longitud. La tira de cuero enrollada con el mensaje attackfromright escrito luciría así:

       |   |   |   |   |   |
       | a | t | t | a | c |  |
     __| k | f | r | o | m |__|
    |  | r | i | g | h | t |
    |  |   |   |   |   |   |

Después de escribir el mensaje en la escítala, el gobernante desenrollaría la tira de cuero y lo enviaría al comandante del ejército. Cuando estaba desenrollada, la tira de cuero tendría el siguiente mensaje desordenado:

----------------
akrtfitrgaohcmt
----------------

Así que ahora lo ves, incluso si la tira de cuero fuera interceptada por un espía enemigo, el mensaje no tendría sentido. ¿No es fascinante? El uso inteligente de una vara de madera y una tira de cuero, ¡podría haber ayudado a algunos gobernantes antiguos ganar batallas!

Cuando la tira de cuero alcanzaba al comandante del ejército, lo envolvería con su propia escítala (que sería exactamente el mismo que el del gobernante), y luego el comandante sería capaz de entender el mensaje apropiadamente.

Esta técnica de la escítala en realidad es un ejemplo de la encriptación de clave simétrica en la práctica.

La encriptación es un proceso en el que el mensaje origina es modificado (o codificado) de tal forma que solamente el recipiente indicado puede decodificar y ver el mensaje actual.

El mensaje original se llama texto plano, mientras que el mensaje codificado se llama texto cifrado. La encriptación convierte el texto plano a texto cifrado con la ayuda de una clave.

Para descifrar el mensaje, que sería convertir el texto cifrado a texto plano, una persona debe tener acceso a la misma llave.

Si lo comparamos a la técnica de la escítala, la escítala es la llave. El gobernantes solamente comparte la llave (escítala) con el comandante del ejército que necesita saber lo que dice el mensaje.

Así es como luce el proceso de encriptación:

El proceso de descifrado lucirá así:

Llamamos a esto encriptación de llave simétrica porque la misma llave se usa tanto para encriptar y descifrar el mensaje.

Esta llave (la escítala) se debe mantener resguardada del acceso del enemigo. Si el enemigo accede a esta llave, entonces será capaz de descifrar los mensajes.

Pero hay otro tipo de encriptación llamada encriptación de llave asimétrica. Ahora que entiendes la encriptación de llave simétrica, sigamos con la encriptación de llave asimétrica.

Encriptación de Llave Asimétrica

En la encriptación de llave simétrica, como vimos arriba, la misma llave era usada por el gobernante y el comandante del ejército para encriptar y descifrar el mensaje.

Pero en una encriptación de llave asimétrica, hay dos llaves (llamado un par de llaves). De las dos llaves, una es una llave privada y la otra es una llave pública.

La llave pública puede ser compartido con todos (el cual por eso se llama pública). Pero la llave privada tiene que mantenerse, ¡en secreto! Nunca debe ser revelado a nadie.

Lo interesante sobre la encriptación de llave asimétrica es eso, si un mensaje es encriptado con la llave pública, entonces puede ser descifrado solamente con la llave privada correspondiente. Ninguna otra llave puede descifrarlo.

Y funciona de la otra forma también. Si un mensaje es encriptado con la llave privada entonces puede ser descifrado solamente usando la llave pública correspondiente.

Las dos llaves – pública y privada – están enlazados matemáticamente uno con el otro. Mientras uno encripta, el otro descifra.

Sólo una pequeña nota, la encriptación de llave asimétrica también se le llama encriptación de llave pública. Estos dos términos son usados de forma intercambiable pero significa lo mismo.

Funciones Hash Criptográficas

Una función hash criptográfica está diseñada para tomar una entrada de cualquier longitud y producir una salida de longitud fijada. La salida de longitud fijada se le denomina valor hash.

Un ejemplo popular de una función hash criptográfica es SHA-256.

La imagen de arriba muestra el valor hash SHA-256 de la entrada "freeCodeCamp.org". Las funciones hash criptográficas tienen tres propiedades que lo hacen muy útiles (lo veremos en las próximas secciones).

Primero, es prácticamente imposible para tomar el valor hash y averiguar la entrada del valor hash.

Por ejemplo, si nos dan el valor hash c9c31315ef2257e4b7698, no hay forma de que averigüemos que la entrada a la función hash fuere "freeCodeCamp.org".

Segundo, si pasamos la misma entrada a la función hash, obtenemos el mismo valor hash como la salida.

Si pasamos "freeCodeCamp.org" nuevamente a la función hash SHA-256, obtendremos la misma salida hash como nuestra llamada previa.

Tercero, dos entradas distintas nunca comparten el mismo valor hash. Inclusive el cambio más ligero en la entrada produce una salida totalmente distinta.

Supón que si proveemos "freeCodeCamp" como entrada en vez de "freeCodeCamp.org" – obtenemos una salida totalmente distinta.

Firmas Digitales

En tus vidas diarias, podrías tener que firma varios documentos. Podrían ser documentos legales, o el boletín de calificaciones de tus hijos, o tal vez algo más.

Cuando tu firma esté presente en el documento, le transmite a la otra parte que eres tú el que está de acuerdo cualquier cosa que esté escrito en ese documento.

Luego, no puedes dar marcha atrás de lo que está escrito en el documento. ¿Correcto?

De forma similar, en el mundo digital, tenemos las firmas digitales – o podemos simplemente llamarlos firmas.

Entendamos cómo funcionan las firmas usando un ejemplo. Tenemos dos usuarios llamados "Alice" y "Bob".

Bob quiere transferir algo de dinero a la cuenta bancaria de Alice. Así que Bob le pide a Alice su información de cuenta bancaria.

Alice sabe sobre las firmas digitales y decidió usar una. Al final, entenderás por qué Alice optó por una firma digital.

Antes de que Alice pueda crear una firma digital. Alice provee a Bib su clave pública (y guarda la clave privada para sí misma).

Luego Alice crea una firma digital y lo color al final del documento.

Una firma digital se crea primero al pasar el contenido del documento a una función hash criptográfica como SHA-256. En el caso de Alice, el contenido del documento es su número de cuenta bancaria.

Una vez que obtenemos el valor hash, se encripta con la clave privada de Alice. La salida de esta encriptación es la firma el cual se coloca al final del documento.

Luego esto se lo envía a Bob por Internet.

Cuando Bob recibe este documento, verifica si la firma es válida o no.

Para verificar la firma, Bob primero descifra la firma con la clave pública de Alice. Si lo recuerdas, Alice generó la firma al encriptar el valor hash.

 plaintext                         ciphertext  
     |                                 |
     |                                 |
     |                                 |
hash value --------encrypt--------> signature

Así que, cuando Bob descifra la firma, obtendrá el valor hash que Alice calculó. Llamemos a este valor hash de Alice.

 ciphertext                         plaintext  
     |                                 |
     |                                 |
     |                                 |
signature --------decrypt--------> hash value

Luego Bob toma el número de la cuenta bancaria que esta presente en el documento y lo pasa a la función hash.

Finalmente, Bob coincide el valor hash de Alice (la firma descifrada) y el valor hash que calculó. Si ambos valores hash coinciden entonces significa que la firma es válida.

Muy bien – ¿pero por qué necesitábamos hacer todo esto? ¿Qué significa si la firma es válida?

Cuando la verificación de la firma es exitosa, prueba dos cosas.

Primero, prueba que el documento ha sido enviado por Alice solamente. Nadie más podría haber enviado este documento.

La garantía de que solamente Alice ha enviado este documento viene del hecho de que fuimos capaces de descifrar la firma usando la clave pública de Alice.

Hemos aprendido de que si algo es encriptado usando una clave privada entonces puede ser descifrado solamente usando su clave pública vinculada.

Asi que, si Bob fue capaz de descifrar la firma usando la clave pública de Alice, significa que fue descifrado utilizando la clave privada de Alice, ¿correcto?

Y solamente Alice tiene acceso a su clave privada. Esto significa que, ¡Alice es la única persona quien podría haber enviado este documento!

Segundo, prueba que el contenido del mensaje no ha sido modificado por un atacante durante la transmisión en red.

Hicimos dos cosas para verificar la firma. Desciframos la firma, y nos dio el valor hash que Alice calculó. Y también hasheamos el número de cuenta bancaria recibido.

Si el valor hash que Alice caluló y el valor hash que Bob calculó son los mismos, significa que Alice y Bob dieron exactamente la misma entrada a la función hash.

Y esto significa que el número de cuenta bancaria que Alice envió y que Bob recibió son exactamente los mismos.

Si un atacante habría cambiado el número de cuenta bancaria antes de que el documento le llegara a Bob, entonces Bob hubiera recibido un número de cuenta bancaria modificado.

Cuando Bob fuera a calcular el valor hash de este número de cuenta bancaria modificado, el valor hash hubiera sido distinto de lo que Alice había calculado.

Así que mientras coincida el valor hash de Alice (firma descifrada) y el valor hash que Bob calculó, la coincidencia fallaría. Y evitaría que Bob transfiera dinero al número de cuenta bancaria errónea.

Para concluir, cuando la firma es verificada con éxito, significa que:

1. El documento es solamente de Alice.
2. El contenido del documento no fue modificado por algún tercero.

Ahora has aprendido sobre encriptación de clave simétrica, encriptación de clave asimétrica, funciones de hash criptográficas, y firmas digitales. ¡Es genial!

Hemos construido una fundación realmente sólido. Ahora entender la autenticación SSH va a ser mucho más fácil para ti.

Cómo Funciona la Autenticación SSH

Si no has configurado la autenticación SSH con Github, entonces después de terminar este artículo puedes seguir la documentación detallada de Github sobre cómo hacerlo. Por ahora, por favor quédate hasta el final.

La cruz del proceso de configuración es que crees un par de claves pública y privada en tu computadora local. Luego subes tu clave pública a tu perfil de Github – ¡y eso es todo!

Después que hemos creado nuestro par de claves pública y privada, en Ubuntu, el par de claves se almacenan dentro de la carpeta ~/.ssh.

La imagen de arriba muestra mi clave pública. Tengo esta clave pública cargada en mi perfil de Github:

Ahora, cuando ejecuto git push o cualquier otro comando que se quiera comunicar con Github, estaré autenticado usando la autenticación SSH.

SSH es un protocolo cliente-servidor. Nuestra computadora que ejecuta git push es el cliente SSH. Github es el servidor SSH.

El cliente comienza con el proceso de autenticación al solicitar nuestra clave pública que tenemos dentro de ~/.ssh.

Luego el cliente prepara un mensaje el cual tiene nuestra clave pública. Y luego el cliente genera la firma usando la clave privada correspondiente.

La clave pública y la firma se envían a Github. Al recibir este mensaje, Github hace dos cosas:

Primero, verifica si la clave pública mencionada en el mensaje se conecta a un perfil de Gihtub o no. Ya que subimos nuestra clave pública a Github, este paso se realizó con éxito.

Segundo, Github verifica la firma usando la clave pública que hemos subido.

Hemos aprendido que si la verificación de la firma termina siendo exitoso significa que solamente la persona quién está en posesión de la clave privada correspondiente podría haber enviado el mensaje.

Ya que solamente tenemos la clave privada vinculada a la clave pública cargada, esto prueba a Github que en realidad somos nosotros intentando comunicarse con Github y no un atacante.

Ahora, Github es 100% seguro que somos la persona correcta, estamos autenticados exitosamente, y a nuestro git push se le permite proceder.

Ves, se volvió fácil de entender la autenticación SSH ya que aprendiste los fundamentos.

La imagen de arriba es del cómic popular xkcd. El personaje allí (llamado Cueball) está pensando en revelar su clave privada. Espero que ahora sepas por qué está mal revelar tu clave privada.

Si revelas tu clave privada entonces alguien más puede autenticarse a Github en tu nombre. No quieres que eso suceda, ¿verdad? ;)

Así que, siempre asegúrate de mantener tu clave privada para ti mismo nada más.

Resumiendo Todo

Si has llegado hasta acá, entonces felicitaciones 🥳.

Has aprendido como funciona en realidad la autenticación SSH – cuando la firma fue verificado exitosamente por Github, le confirma a Github que somos nosotros quienes le estamos hablando, no un atacante.

A lo largo adquiriste una comprensión fundamental de la encriptación de clave simétrica, encriptación de clave asimétrica, funciones hash criptográficas y firmas digitales.

Gracias por estar conmigo en esta, espero que te vayas con algunos nuevos y valiosos aprendizajes.

Pongo ideas y recursos útiles en mi Twitter. Deberías seguirme allí. Respetaré tu tiempo.