full stack - freeCodeCamp.org

Cómo construir una aplicación CRUD usando React y Convex

Elias Ezequiel Pereyra Gomez — Fri, 27 Jun 2025 01:18:13 +0000

Las operaciones CRUD son la base de cada aplicación, por lo que es esencial volverse competente en esto cuando se aprende nuevas tecnologías.

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.

¿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(
  
    
  
);

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 (
    
      Book Collections
      
         setTitle(e.target.value)}
          placeholder="book title"
        />
        

         setAuthor(e.target.value)}
          placeholder="book author"
        />
        

        
      
      {books ?  : "Loading..."}
    
  );
};

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): void => {
    e.preventDefault();
    createBooks({ title, author })
      .then(() => {
        console.log("created");
        setTitle("");
        setAuthor("");
      })
      .catch((err) => console.log(err));
  };
  return (
    
      Book Collections
      
         setTitle(e.target.value)}
          placeholder="book title"
        />
        

         setAuthor(e.target.value)}
          placeholder="book author"
        />
        

        
      
      {books ?  : "Loading..."}
    
  );
};

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): 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, 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 (
    
      {books.map((data: book, index: number) => {
        return (
          
            Book no: {index + 1}
            Book title: {data.title}
            Book Author: {data.author}
            
              Completed Status:{" "}
              {data.isCompleted ? "Completed" : "Not Completed"}
            
            
            {id === data._id && update && (
              <>
                 handleUpdate(e, data._id)}>
                  
                  
                
              
            )}
            
          
        );
      })}
    
  );
};

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 (
    
      {books.map((data: book, index: number) => {
        return (
          
            Book no: {index + 1}
            Book title: {data.title}
            Book Author: {data.author}
            
              Completed Status:{" "}
              {data.isCompleted ? "Completed" : "Not Completed"}
            
            
            {id === data._id && update && (
              <>
                 handleUpdate(e, data._id)}>
                  
                  
                
              
            )}
            
          
        );
      })}
    
  );
};

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, 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 (
    
      {books.map((data: book, index: number) => {
        return (
          
            Book no: {index + 1}
            Book title: {data.title}
            Book Author: {data.author}
            
              Completed Status:{" "}
              {data.isCompleted ? "Completed" : "Not Completed"}
            
            
            {id === data._id && update && (
              <>
                 handleUpdate(e, data._id)}>
                  
                  
                
              
            )}
            
          
        );
      })}
    
  );
};

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, 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!

Cómo construir una Aplicación de Chat en Tiempo Real con React, Node, Socket.io, y HarperDB

Elias Ezequiel Pereyra Gomez — Fri, 24 Jan 2025 16:28:21 +0000

En este artículo, estaremos usando Socket.io y HarperDB para construir una aplicación chat fullstack de tiempo real con salas de chat.

Este será un gran proyecto para aprender cómo armar las aplicaciones fullstack, y cómo crear una aplicación donde el back-end puede comunicarse con el front-end en tiempo real.

Normalmente, usando solicitudes HTTP, el servidor no puede enviar datos al cliente en tiempo real. Pero al usar Socket.io, el servidor es capaz de enviar información en tiempo real al cliente sobre algunos eventos que sucedieron en el servidor.

La aplicación que estaremos construyendo tiene dos páginas:

Una página join-a-chat-room:

Y una página chat-room:

Aquí está lo que estaremos usando para construir este aplicación:

Front-end: React (Un framework de front-end de JavaScript para construir aplicaciones interactvias)
Back-end: Node y Express (Express es un framework muy popular de NodeJS que nos permite crear fácilmente APIs y back-ends)
Base de Datos: HarperDB (una plataforma de datos + aplicación que te permite solicitar datos usando SQL o NoSQL. HarperDB también tiene una API integrada, ahorrándonos el escribir mucho código de back-end)
Comunicación en Tiempo Real: Socket.io (¡ve abajo!)

Aquí está el código fuente (recuerda de darle una estrella ⭐).

Tabla de Contenidos

¿Qué es Socket.io?
Configuración del Proyecto
Cómo construir la Página "Join a Room"
Cómo configurar el Servidor
Cómo crear nuestro primer Escucha de Evento de Socket.io en el Servidor
Cómo funcionan las Salas en Socket.io
Cómo construir la Página Chat
Cómo crear el componente Messages (B)
Cómo crear un Esquema y una Tabla en HarperDB
Cómo crear el Componente Send Message (C)
Cómo configurar las Variables de Entorno de HarperDB
Cómo permitir a los Usuarios que se envíen Mensajes con Socket.io
Cómo obtener los Mensajes desde HarperDB
Cómo mostrar los Últimos 100 Mensajes en el Cliente
Cómo mostrar la Sala y los Usuarios (A)
Cómo quitar a un Usuario de una Sala de Socket.io
Cómo agregar el Escucha de Evento Disconnect de Socket.io

¿Qué es Socket.io?

Socket.io permite al servidor enviar información al cliente en tiempo real, cuando los eventos ocurren en el servidor.

Por ejemplo, si estuvieras jugando un juego de múltiple jugador, un evento podría ser tu "amigo" que consiguió un gol espectacular en contra tuya.

Con Socket.io, sabrías (casi) instantáneamente sobre conceder un gol.

Sin Socket.io, el cliente tendría que hacer múltiples llamadas polling de AJAX para verificar que el evento ha ocurrido en el servidor. Por ejemplo, el cliente podría usar JavaScript para verificar un evento en el servidor cada 5 segundos.

Socket.io significa que el cliente no tiene que hacer múltiples llamadas polling de AJAX para verificar si algunos eventos han ocurrido en el servidor. Más bien, el servidor envía la información al cliente tan pronto como lo obtenga. Mucho mejor.👌

Así que, Socket.io nos permite construir fácilmente aplicaciones de tiempo real, tales comos aplicaciones de chat y juegos multijugador.

Configuración del Proyecto

1. Cómo configurar nuestras carpetas

Comienza un nuevo proyecto en tu editor de texto de prefrencia (VS Code para mí), y crea dos carpetas a nivel raíz llamados client y server.

Crearemos nuestra aplicación React Front-end en la carpeta client, y nuestro backend con Node/express en la carpeta server.

2. Cómo instalar nuestras dependencias de client

Abre una terminal en la raíz del proyecto (en VS Code, puedes hacer esto al presionar Ctrl + ' o al ir a terminal->new terminal).

Luego, instalaremos React en nuestra carpeta client:

$ npx create-react-app client

Después de que React se haya instalado, ve hacia la carpeta client, e instala las siguientes dependencias:

$ cd client
$ npm i react-router-dom socket.io-client

React-router-dom nos permitirá configurar las rutas a nuestros distintos componentes de React – esencialmente creando diferentes páginas.

Socket.io-client es la versión cliente de socket.io, que nos permite "emitir" eventos al servidor. Una vez que el servidor lo recibe, podemos usar la versión del servidor de socket.io para hacer cosas como enviar mensajes a los usuarios en la misma sala como el emisor, o unirse con un usuario a una sala de socket.

Ganarás un mejor entendimiento de esto más tarde cuando lleguemos a implementar estas ideas con código.

3. Cómo iniciar la aplicación de React

Vamos a asegurarnos que todo está funcionando bien ejecutando el siguiente comando desde la carpeta client:

$ npm start

Webpack construirá la aplicación de React y lo servirá en `http://localhost:3000`:

Ahora configuremos nuestra base de datos de HarperDB que usaremos para guardar mensajes de forma permanente enviados por los usuarios.

Cómo configurar HarperDB

Primero, crea una cuenta con HarperDB.

Luego crea una nueva instancia en la nube de HarperDB.

Para hacer las cosas fáciles, selecciona la instancia cloud:

Selecciona el proveedor del cloud (Yo escojo AWS):

Brinda un nombre a tu instancia de la nube, y crea tus credenciales de la instancia:

HarperDB tiene una capa gratuita generosa que podemos usar para este proyecto, así que selecciona ese:

Verifica que tus detalles son correctos, luego crea la instancia.

Tomará unos pocos minutos para crear la instancia, así que continuemos y, ¡hagamos nuestro primer componente de React!

Cómo construir la Página "Join a Room"

Nuestra página principal va a terminar luciendo así:

El usuario ingresará un nombre de usuario, selecciona una sala de chat desde el despegable, luego haz clic en "Join Room". El usuario será dirigido a la página de la sala de chat.

Así que, hagamos esta página principal.

1. Cómo crear el formulario HTML y agregar estilos

Crea un nuevo archivo en src/pages/home/index.js.

Agregaremos estilos básicos a nuestra aplicación usando módulos de CSS, así que crea un nuevo archivo: src/pages/home/styles.module.css.

Nuestra estructura de carpeta debería ahora lucir así:

Ahora creemos el formulario básico HTML:

// client/src/pages/home/index.js

import styles from './styles.module.css';

const Home = () => {
  return (
    
      
        {`<>DevRooms`}
        

        

        
      
    
  );
};

export default Home;

Arriba, tenemos un input de texto sencillo para capturar el nombre de usuario, y un despegable seleccionable con algunas opciones por defecto para que el usuario seleccione una sala de chat para unirse.

Ahora importemos este componente en App.js y configuremos una ruta para el componente usando el paquete react-router-dom. Este será nuestra página principal, así que la ruta será /:

// client/src/App.js

import './App.css';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/home';

function App() {
  return (
    
      
        
          } />
        
      
    
  );
}

export default App;

Ahora agreguemos algunos estilos básicos para hacer que nuestra aplicación luzca mas presentable:

/* client/src/App.css */

html * {
  font-family: Arial;
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: rgb(63, 73, 204);
}
::-webkit-scrollbar {
  width: 20px;
}
::-webkit-scrollbar-track {
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: #d6dee1;
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
}
.btn {
  padding: 14px 14px;
  border-radius: 6px;
  font-weight: bold;
  font-size: 1.1rem;
  cursor: pointer;
  border: none;
}
.btn-outline {
  color: rgb(153, 217, 234);
  border: 1px solid rgb(153, 217, 234);
  background: rgb(63, 73, 204);
}
.btn-primary {
  background: rgb(153, 217, 234);
  color: rgb(0, 24, 111);
}
.btn-secondary {
  background: rgb(0, 24, 111);
  color: #fff;
}

También agreguemos los estilos específicos a nuestro componente de la página principal:

/* client/src/pages/home/styles.module.css */

.container {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(63, 73, 204);
}
.formContainer {
  width: 400px;
  margin: 0 auto 0 auto;
  padding: 32px;
  background: lightblue;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.input {
  width: 100%;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid rgb(63, 73, 204);
  font-size: 0.9rem;
}
.input option {
  margin-top: 20px;
}

También hagamos que el botón "Join Room" tenga el ancho completo agregando un atributo de estilo:

// client/src/pages/home/index.js

Nuestra página principal ahora se ve sólido:

2. Cómo agregar funcionalidad al formulario Join Room

Ahora tenemos un formulario básico y estilos, así que es tiempo de agregar algo de funcionalidad.

Esto es lo que queremos que suceda cuando el usuario haga clic en el botón "Join Room":

Verificar que el nombre de usuario y los campos de la sala sean rellenados.
Si es así, emitimos un evento de socket a nuestro servidor.
Redireccionar al usuario a la página Chat (el cual crearemos luego).

Vamos a necesitar crear algo de estado para almacenar los valores nombre de usuario y room. También necesitamos crear una instancia del socket.

Podríamos crear estos estados directamente dentro de nuestro componente home, pero nuestra página Chat también necesitará acceder al username, room y socket. Así que elevaremos el estado al App.js, donde podemos pasar estas variables a las páginas HomePage y Chat.

Así que, creemos nuestro estado y configuremos un socket en App.js, y pasemos estas variables como props al componente. También pasaremos la función setState de forma que podamos alterar el estado:

// client/src/App.js

import './App.css';
import { useState } from 'react'; // Add this
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import io from 'socket.io-client'; // Add this
import Home from './pages/home';

const socket = io.connect('http://localhost:4000'); // Add this -- our server will run on port 4000, so we connect to it from here

function App() {
  const [username, setUsername] = useState(''); // Add this
  const [room, setRoom] = useState(''); // Add this

  return (
    
      
        
          
            }
          />
        
      
    
  );
}

export default App;

Ahora podemos acceder a estos props en nuestro componente Home. Usaremos la destructuración para obtener estas props:

// client/src/pages/home/index.js

import styles from './style.module.css';

const Home = ({ username, setUsername, room, setRoom, socket }) => {
  return (
    // ...
  );
};

export default Home;

Cuando el usuario ingrese su nombre de usuario o seleccione una sala, necesitamos actualizar las variables de estado username y room:

// client/src/pages/home/index.js

// ...

const Home = ({ username, setUsername, room, setRoom, socket }) => {
  return (
    
      // ...
         setUsername(e.target.value)} // Add this
        />

        

        // ...
    
  );
};

export default Home;

Ahora estamos capturamos los datos ingresados por el usuario, podemos crear una función callback joinRoom() para cuando el usuario haga clic en el botón "Join Room":

// client/src/pages/home/index.js

// ...

const Home = ({ username, setUsername, room, setRoom, socket }) => {

  // Add this
  const joinRoom = () => {
    if (room !== '' && username !== '') {
      socket.emit('join_room', { username, room });
    }
  };

  return (
    
      // ...

        
      // ...
    
  );
};

export default Home;

Arriba, cuando el usuario haga clic en el botón, un evento del socket llamado joinroom se emite, juntamente con un objeto conteniendo el nombre de usuario y la sala seleccionada. Este evento será recibido por nuestro servidor un poco más tarde cuando haremos algo de magia.

Para terminar nuestra página principal, necesitamos agregar una redirección al final de nuestra función joinRoom() para llevar al usuario a la página /chat:

// client/src/pages/home/index.js

// ...
import { useNavigate } from 'react-router-dom'; // Agrega esto

const Home = ({ username, setUsername, room, setRoom, socket }) => {
  const navigate = useNavigate(); // Agrega esto

  const joinRoom = () => {
    if (room !== '' && username !== '') {
      socket.emit('join_room', { username, room });
    }

    // Redirecciona a /chat
    navigate('/chat', { replace: true }); // Agrega esto
  };

 // ...

Pruébalo: escribe un nombre de usuario y selecciona una sala, luego haz clic en Join Room. Deberías ser dirigido a la ruta http://localhost:3000/chat – actualmente una página vacía.

Pero antes que creemos nuestra Página Chat, tengamos algo ejecutándose en el servidor.

Cómo configurar el Servidor

En el servidor, vamos a escuchar los eventos del socket que son emitidos desde el frontend. Actualmente, solamente tenemos un evento join_room siendo emitido desde React, así que agregaremos este escucha de evento primero.

Pero antes de eso, necesitamos instalar nuestras dependencias del servidor y tener el servidor activo y ejecutándose.

1. Cómo instalar las dependencias del servidor

Abre una nueva terminal (en VS Code: Terminal->Nueva Terminal), cambia la carpeta a nuestra carpeta de servidor, inicializa un archivo package.json, e instala las siguientes dependencias:

$ cd server
$ npm init -y
$ npm i axios cors express socket.io dotenv

Axios es un paquete usado comunmente para hacer solicitudes fácilmente a APIs.
Cors permite a nuestro cliente hacer solicitudes a otros orígenes – necesario para socket.io para que funcione de forma apropiada. Ve ¿Qué es el CORS? si no has escuchado de CORS antes.
Express es un framework de Node.js que nos permite escribir nuestro backend más fácilmente con menos código.
Socket.io es una librería que permite que el cliente y el servidor se comunique a tiempo real – el cual no es posible con solicitudes estándares de HTTP.
Dotenv es un módulo que nos permite almacenar claves privadas y contraseñas de forma segura, y cargarlos en nuestro códio cuando sea necesario.

También instalaremos nodemon como una dependencia dev, así no tenemos que reiniciar nuestro servidor cada vez que hagamos un cambio al código – ahorrándonos tiempo y energía:

$ npm i -D nodemon

2. Cómo iniciar nuestro servidor

Crea un archivo index.js en la raíz de nuestra carpeta server, y agrega el siguiente código para iniciar el servidor:

// server/index.js

const express = require('express');
const app = express();
const http = require('http');
const cors = require('cors');

app.use(cors()); // Add cors middleware

const server = http.createServer(app);

server.listen(4000, () => 'Server is running on port 4000');

Abre el archivo package.json en nuestro servidor, y agrega un script que nos permitirá usar nodemon en desarrollo:

{
  ...
  "scripts": {
    "dev": "nodemon index.js"
  },
  ...
}

Ahora, iniciemos nuestro servidor al ejecutar el siguiente comando:

$ npm run dev

Podemos verificar rápidamente que nuestro servidor se está ejecutando correctamente al agregar un manejador de solicitudes get:

// server/index.js

const express = require('express');
const app = express();
http = require('http');
const cors = require('cors');

app.use(cors()); // Agrega cors middleware

const server = http.createServer(app);

// Agrega esto
app.get('/', (req, res) => {
  res.send('Hello world');
});

server.listen(4000, () => 'El servidor está ejecutándose en el puerto 3000');

Ahora ve a http://localhost:4000/:

Nuestro servidor está activo y en ejecución. ¡Ahora es tiempo de hacer cosas de Socket.io en el servidor!

Cómo crear nuestro primer Escucha de Evento de Socket.io en el Servidor

Recuerda que cuando emitimos un evento joinroom desde el cliente? Bueno, pronto vamos a estar escuchar ese evento en el servidor y agregar el usuario a una sala del socket.

Pero primero, necesitamos escuchar cuando un cliente se conecte al servidor a través de socket.io-client.

// server/index.js

const express = require('express');
const app = express();
http = require('http');
const cors = require('cors');
const { Server } = require('socket.io'); // Agrega esto

app.use(cors()); // Agrega cors middleware

const server = http.createServer(app); // Agrega esto

// Agrega esto
// Crea un servidor io y permite CORS desde http://localhost:3000 con metodos GET y POST
const io = new Server(server, {
  cors: {
    origin: 'http://localhost:3000',
    methods: ['GET', 'POST'],
  },
});

// Agrega esto
// Escucha cuando el cliente se conecta a traves de socket.io-client
io.on('connection', (socket) => {
  console.log(`User connected ${socket.id}`);

  // Podemos escribir nuestro our socket event listeners in here...
});

server.listen(4000, () => 'El servidor está ejecutándose en el puerto 3000');

Ahora, cuando el cliente se conecta desde el frontend, el backend captura el evento de la conexión, y registrará User connected con el id único del socket para ese cliente particular.

Probemos si el servidor ahora está captrando el evento de la conección desde el cliente. Ve a tu aplicación de React en http://localhost:3000/ y refresca la página.

Deberías ver el siguiente registro en tu consola de terminal del servidor:

Genial, nuestro cliente se ha conectado a nuestro servidor a través de socket.io. Nuestro cliente y servidor ahora se pueden comunicar en, ¡tiempo real!

Cómo funcionan las Salas en Socket.io

Desde la documentación de Socket.io (no está disponible en español todavía):

"Una sala es un canal arbitrario al que sockets se puede unir (join) y abandonar (leave). Puede ser usado para emitir eventos a un subconjunto de clientes."

Así que, podemos unir el usuario a una sala, y luego el servidor puede enviar mensajes a todos los usuarios en esa sala – permitiendo a los usuarios enviarse mensajes en tiempo real. ¡Genial!

Cómo unir el usuario a una sala de Socket.io

Una vez que el usuario se ha conectado a través de Socket.io, podemos agregar nuestros escuchas de eventos del socket en el servidor para escuchar eventos emitidos desde el cliente. También, podemos emitir eventos en el servidor, y esucharlos en el cliente.

Ahora escuchemos por el evento joinroom, que capture los datos (nombre de usuario y sala), y agregue al usuario a una sala de socket:

// server/index.js

// Escuchar cuando el cliente se conecta a través de socket.io-client
io.on('connection', (socket) => {
  console.log(`User connected ${socket.id}`);

  // Agrega esto
  // Agrega un usuario a una sala
  socket.on('join_room', (data) => {
    const { username, room } = data; // Datos enviados desde el cliente cuando el evento join_room se emite
    socket.join(room); // Une el usuario a una sala de socket
  });
});

Cómo enviar un mensaje a los usuarios en una sala

Ahora enviemos un mensaje a todos los usuarios en la sala, aparte del usuario que se acaba de unir, para notificarlos que un nuevo usuario se ha unido:

// server/index.js

const CHAT_BOT = 'ChatBot'; // Agrega esto
// Escucha cuando el cliente se conecta a través de socket.io-client
io.on('connection', (socket) => {
  console.log(`User connected ${socket.id}`);

  // Agrega un usuario a una sala
  socket.on('join_room', (data) => {
    const { username, room } = data; // Datos enviados desde el cliente cuando el evento join_room se emite
    socket.join(room); // Une el usuario a una sala de socket

    // Agrega esto
    let __createdtime__ = Date.now(); // Marcas de tiempo actuales
    // Envía un mensaje a todos los usuario en la sala, aparte del usuario que se acaba de unir
    socket.to(room).emit('receive_message', {
      message: `${username} has joined the chat room`,
      username: CHAT_BOT,
      __createdtime__,
    });
  });
});

Arriba, estamos emitiendo un evento receive_message a todos los clientes en la sala en el que el usuario se acaba de unir, juntamente con algo de dato: el mensaje, el nombre de usuario quien envió el mensaje, y el tiempo en que el mensaje fue enviado.

Agregaremos un escucha de evento en nuestra aplicación de React un poco después para capturar este evento, y muestra el mensaje en la pantalla.

También enviemos un mensaje de bienvenida al nuevo usuario recién unido:

// server/index.js

io.on('connection', (socket) => {
  // ...

    // Agrega esto
    // Envía el msg de bienvenida al usuario que se acaba de unir
    socket.emit('receive_message', {
      message: `Welcome ${username}`,
      username: CHAT_BOT,
      __createdtime__,
    });
  });
});

Cuando agregamos un usuario a una sala de Socket.io, Socket.io solamente almacena los ids de los sockets para cada usuario. Pero necesitaremos los nombres de usuario de todos en la sala, así también como el nombre de sala. Así que, almacenemos esos datos en variables en el servidor:

// server/index.js

// ...

const CHAT_BOT = 'ChatBot';
// Agrega esto
let chatRoom = ''; // Ej. javascript, node,...
let allUsers = []; // Todos los usuarios en la sala de chat actual

// Escucha cuando el cliente se conecta a través de socket.io-client
io.on('connection', (socket) => {
    // ...

    // Agrega esto
    // Guarda el nuevo usuario a la sala
    chatRoom = room;
    allUsers.push({ id: socket.id, username, room });
    chatRoomUsers = allUsers.filter((user) => user.room === room);
    socket.to(room).emit('chatroom_users', chatRoomUsers);
    socket.emit('chatroom_users', chatRoomUsers);
  });
});

Arriba, también estamos enviando un arreglo de todo el chatRoomUsers de nuevo al cliente a través del evento chatroomusers, así que podemos listar todos los nombres de usuario en el frontend.

Antes que agreguemos cualquier otro código a nuestro servidor, volvamos a nuestro frontend y creamos la página Chat – así podemos probar si estamos recibiendo los eventos receivemessage.

Cómo construir la Página Chat

En tu carpeta cliente, crea dos nuevos archivos:

src/pages/chat/index.js
src/pages/chat/styles.module.css

Agreguemos algunos estilos que usaremos en nuestra página Chat y componentes:

/* client/src/pages/chat/styles.module.css */

.chatContainer {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 4fr;
  gap: 20px;
}

/* Room and users component */
.roomAndUsersColumn {
  border-right: 1px solid #dfdfdf;
}
.roomTitle {
  margin-bottom: 60px;
  text-transform: uppercase;
  font-size: 2rem;
  color: #fff;
}
.usersTitle {
  font-size: 1.2rem;
  color: #fff;
}
.usersList {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 60px;
  color: rgb(153, 217, 234);
}
.usersList li {
  margin-bottom: 12px;
}

/* Messages */
.messagesColumn {
  height: 85vh;
  overflow: auto;
  padding: 10px 10px 10px 40px;
}
.message {
  background: rgb(0, 24, 111);
  border-radius: 6px;
  margin-bottom: 24px;
  max-width: 600px;
  padding: 12px;
}
.msgMeta {
  color: rgb(153, 217, 234);
  font-size: 0.75rem;
}
.msgText {
  color: #fff;
}

/* Message input and button */
.sendMessageContainer {
  padding: 16px 20px 20px 16px;
}
.messageInput {
  padding: 14px;
  margin-right: 16px;
  width: 60%;
  border-radius: 6px;
  border: 1px solid rgb(153, 217, 234);
  font-size: 0.9rem;
}

Ahora, veamos cómo terminará luciendo nuestra página Chat:

Agregando todo el código y lógica para esta página en un archivo podría volverse confuso y difícil de manejar, así que aprovechemos el hecho de que estamos usando un framework de frontend fabuloso (React) y dividir nuestra página en componentes:

Los componentes de la página chat:

A: Contiene el nombre de la sala, una lista de usuarios en esa sala, y un botón "Leave" que quitar al usuario desde la sala.

B: Los mensajes enviados. Al inicio de la renderización, los últimos 100 mensajes enviados en esa sala será solicitado desde la base de datos y mostrado al usuario.

C: Una entrada y botón para escribir y enviar un mensaje.

Primero crearemos el componente B, así podemos mostrar los mensajes al usuario.

Cómo crear el Componente Messages (B)

Crea un nuevo archivo en src/pages/chat/messages.js y agrega el siguiente código:

// client/src/pages/chat/messages.js

import styles from './styles.module.css';
import { useState, useEffect } from 'react';

const Messages = ({ socket }) => {
  const [messagesRecieved, setMessagesReceived] = useState([]);

  // Se ejecuta cuando sea que un evento del socket es recibido desde el servidor
  useEffect(() => {
    socket.on('receive_message', (data) => {
      console.log(data);
      setMessagesReceived((state) => [
        ...state,
        {
          message: data.message,
          username: data.username,
          __createdtime__: data.__createdtime__,
        },
      ]);
    });

    // Quita la escucha del evento al desmontar el componente
    return () => socket.off('receive_message');
  }, [socket]);

  // dd/mm/yyyy, hh:mm:ss
  function formatDateFromTimestamp(timestamp) {
    const date = new Date(timestamp);
    return date.toLocaleString();
  }

  return (
    
      {messagesRecieved.map((msg, i) => (
        
          
            {msg.username}
            
              {formatDateFromTimestamp(msg.__createdtime__)}
            
          
          {msg.message}
          

        
      ))}
    
  );
};

export default Messages;

Ahora, tenemos un hook useEffect que se ejecuta cuando sea que el evento del socket se recibe. Luego recibimos los datos del mensaje en el escucha del evento receivemessage. Desde ahí, ponemos el estado messagesReceived, el cual es un arreglo de objetos de mensaje conteniendo el mensaje, nombre de usuario del emisor, y la fecha del mensaje que fue enviado.

Importemos nuestro nuevo componentes de mensajes en la página Chat, y luego creemos una ruta para la página Chat en App.js:

// client/src/pages/chat/index.js

import styles from './styles.module.css';
import MessagesReceived from './messages';

const Chat = ({ socket }) => {
  return (
    
      
        
      
    
  );
};

export default Chat;

// client/src/App.js

import './App.css';
import { useState } from 'react';
import Home from './pages/home';
import Chat from './pages/chat';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import io from 'socket.io-client';

const socket = io.connect('http://localhost:4000');

function App() {
  const [username, setUsername] = useState('');
  const [room, setRoom] = useState('');

  return (
    
      
        
          
            }
          />
          {/* Add this */}
          }
          />
        
      
    
  );
}

export default App;

Probemos esto, ve a la página principal y únete a una sala:

Deberíamos ser llevados a la página Chat, y recibir un mensaje de bienvenida del ChatBot:

Los usuarios ahora pueden ver los mensajes que reciben. ¡Genial!

Próximo: configurar nuestra base de datos así podemos guardar los mensajes permanentemente.

Cómo crear un Esquema y una Tabla en HarperDB

Vuelve a tu dashboard de HarperDB, y haz clic en "browser". Luego crea un nuevo esquemos llamado "realtime_chat_app". Un esquema es simplemente un grupo de tablas.

Dentro de ese esquema, crea una tabla llamada "messages", con un atributo hash de "id".

Ahora tenemos necestiamos donde almacenar los mensajes, así que creemos el componente SendMessage.

Cómo crear el componente Send Message (C)

Crea el archivo src/pages/chat/send-message.js y agrega el siguiente código:

// client/src/pages/chat/send-message.js

import styles from './styles.module.css';
import React, { useState } from 'react';

const SendMessage = ({ socket, username, room }) => {
  const [message, setMessage] = useState('');

  const sendMessage = () => {
    if (message !== '') {
      const __createdtime__ = Date.now();
      // Envia un mensaje al servidor. No podemos especificar a quien enviamos el mensaje desde el frontend. Solamente podemos enviar al servidor. El servidor por lo tanto puede enviar un mensaje al resto de los usuarios en la sala
      socket.emit('send_message', { username, room, message, __createdtime__ });
      setMessage('');
    }
  };

  return (
    
       setMessage(e.target.value)}
        value={message}
      />
      
    
  );
};

export default SendMessage;

Arriba, cuando el usuario hace clic en el botón "Send Message", un evento del socket send_message se emite al servidor, junto con un objeto de mensaje. Manejaremos este evento en el servidor dentro de poco.

Importa SendMessage en nuestra página Chat:

// src/pages/chat/index.js

import styles from './styles.module.css';
import MessagesReceived from './messages';
import SendMessage from './send-message';

const Chat = ({ username, room, socket }) => {
  return (
    
      
        
        
      
    
  );
};

export default Chat;

La página Chat ahora luce así:

Luego necesitamos configurar nuestras variables de entorno de HarperDB así podemos comenzar a interactuar con la base de datos.

Cómo configurar las Variables de Entorno de HarperDB

Para que seas capaz de guardar los mensajes en HarperDB, necesitarás tu URL de instancia de HarperDB, y tu contraseña API.

En tu dashboard de HarperDB, haz clic en tu instancia, luego ve a "config". Encontrarás tu URL de instancia, y la cabecera de Autenticación de API de tu instancia – eso es, tu contraseña "super_user" que te permite realizar cualquier solicitud a la base de datos – ¡PARA TUS OJOS SOLAMENTE!

Guardaremos estas variables en un archivo .env. Advertencia: ¡No empujes el archivo .env a Github! Este archivo no debería ser visible públicamente. Las variables se cargan a través del servidor por detrás.

Crea los siguientes archivos y agrega tu URL y contraseña de HarperDB:

// server/.env

HARPERDB_URL=""
HARPERDB_PW="Basic "

También crearemos un archivo .gitignore para evitar que el .env se suba a Github, juntamente con la carpeta node_modules:

// server/.gitignore

.env
node_modules

Nota: ser bueno en Git y Github es 100% imprescindible para todos los desarrolladores. Revisa mi artículo de los flujos de trabajo de Git si necesitas mejorar tu juego de Git.

O si constantemente te encuentras revisando los mismos comandos de Git, y quieres una forma rápida de verlos, y copiar/pegar los comandos – revisa mi hoja de trucos de los comandos de Git en PDF y mi póster de hoja de trucos de Git físico.

Finalmente, carguemos nuestras variables de entorno en nuestro servidor al agregar este código en la parte superior de nuestro archivo main:

// server/index.js

require('dotenv').config();
console.log(process.env.HARPERDB_URL); // quita esto despues que hayas visto que funcionó
const express = require('express');
// ...

Cómo permitir a los Usuarios que se envíen mensajes con Socket.io

En el servidor, escucharemos el evento sendmessage, luego enviaremos el mensaje a todos los usuarios dentro de la sala:

// server/index.js

const express = require('express');
// ...
const harperSaveMessage = require('./services/harper-save-message'); // Agrega esto

// ...

// Escucha cuando el cliente se conecta a través de socket.io-client
io.on('connection', (socket) => {

  // ...

  // Agrega esto
  socket.on('send_message', (data) => {
    const { message, username, room, __createdtime__ } = data;
    io.in(room).emit('receive_message', data); // Envia a todos los usuarios en la sala, incluyendo al emisor
    harperSaveMessage(message, username, room, __createdtime__) // Guarda el mensaje en la bd
      .then((response) => console.log(response))
      .catch((err) => console.log(err));
  });
});

server.listen(4000, () => 'El Servidor se está ejecutando en el puerto 3000');

Ahora necesitamos crear la función harperSaveMessage. Crea un nuevo archivo en server/services/harper-save-message.js, y agrega lo siguiente:

// server/services/harper-save-message.js

var axios = require('axios');

function harperSaveMessage(message, username, room) {
  const dbUrl = process.env.HARPERDB_URL;
  const dbPw = process.env.HARPERDB_PW;
  if (!dbUrl || !dbPw) return null;

  var data = JSON.stringify({
    operation: 'insert',
    schema: 'realtime_chat_app',
    table: 'messages',
    records: [
      {
        message,
        username,
        room,
      },
    ],
  });

  var config = {
    method: 'post',
    url: dbUrl,
    headers: {
      'Content-Type': 'application/json',
      Authorization: dbPw,
    },
    data: data,
  };

  return new Promise((resolve, reject) => {
    axios(config)
      .then(function (response) {
        resolve(JSON.stringify(response.data));
      })
      .catch(function (error) {
        reject(error);
      });
  });
}

module.exports = harperSaveMessage;

Arriba, guardar los datos podria tomar un poco de tiempo, así que devolvemos una promesa el cual será resuelto si los datos se guardan satisfactoriamente, o rechazada si no se guardan.

Si te estás preguntando donde obtuve el código de arriba, HarperDB provee una sección increíble de "ejemplos de código" en su dashboard studio, el cual nos facilita la vida:

¡Tiempo de descanso! Únete a una sala como un usuario, luego envía un mensaje. Luego ve a HarperDB y haz clic en "browse", luego haz clic en la tabla "messages". Deberías ver tú mensaje en la base de datos:

Genial 😎. Así que, ¿ahora qué? Bueno, sería bueno si los últimos 100 mensajes enviados en la sala fueran cargados cuando un usuario se una a una sala, ¿no?

Cómo obtener los mensajes desde HarperDB

En el servidor, creemos una función que solicite los últimos 100 mensajes enviados en una sala particular (fíjate cómo HarperDB también nos permite usar solicitudes de SQL 👌):

// server/services/harper-get-messages.js

let axios = require('axios');

function harperGetMessages(room) {
  const dbUrl = process.env.HARPERDB_URL;
  const dbPw = process.env.HARPERDB_PW;
  if (!dbUrl || !dbPw) return null;

  let data = JSON.stringify({
    operation: 'sql',
    sql: `SELECT * FROM realtime_chat_app.messages WHERE room = '${room}' LIMIT 100`,
  });

  let config = {
    method: 'post',
    url: dbUrl,
    headers: {
      'Content-Type': 'application/json',
      Authorization: dbPw,
    },
    data: data,
  };

  return new Promise((resolve, reject) => {
    axios(config)
      .then(function (response) {
        resolve(JSON.stringify(response.data));
      })
      .catch(function (error) {
        reject(error);
      });
  });
}

module.exports = harperGetMessages;

Llamaremos a esta función cuando sea que un usuario se una a una sala:

// server/index.js

// ...
const harperSaveMessage = require('./services/harper-save-message');
const harperGetMessages = require('./services/harper-get-messages'); // Add this

// ...

// Escucha cuando el cliente se conecta a través de socket.io-client
io.on('connection', (socket) => {
  console.log(`User connected ${socket.id}`);

  // Agrega un usuario a una sala
  socket.on('join_room', (data) => {

    // ...

    // Agrega esto
    // Obtiene los últimos 100 mensajes enviados en la sala chat
    harperGetMessages(room)
      .then((last100Messages) => {
        // console.log('ultimos mensajes', last100Messages);
        socket.emit('last_100_messages', last100Messages);
      })
      .catch((err) => console.log(err));
  });

 // ...

Arriba, si los mensajes se solicitan de forma exitosa, emitimos un evento de Socket.io llamado last_100_messages. Ahora escucharemos este evento en el frontend.

Cómo mostrar los últimos 100 mensajes en el Cliente

Abajo, agregamos un hook useEffect que contiene un escucha de evento de Socket.io para el evento last_100_messages. Desde ahí, los mensajes son ordenados en orden de fecha, con el más reciente al final, y el estado messagesReceived se actualiza.

Cuando messagesReceived se actualiza, un useEffect se ejecuta para desplazar el div messageColumn al mensaje más reciente. Esto mejora la experiencia de usuario de nuestra aplicación 👍.

// client/src/pages/chat/messages.js

import styles from './styles.module.css';
import { useState, useEffect, useRef } from 'react';

const Messages = ({ socket }) => {
  const [messagesRecieved, setMessagesReceived] = useState([]);

  const messagesColumnRef = useRef(null); // Add this

  // Se ejecuta cuando sea que un evento del socket se reciba desde el servidor
  useEffect(() => {
    socket.on('receive_message', (data) => {
      console.log(data);
      setMessagesReceived((state) => [
        ...state,
        {
          message: data.message,
          username: data.username,
          __createdtime__: data.__createdtime__,
        },
      ]);
    });

    // Quita el escucha de eventos al desmontarse el componente 
    return () => socket.off('receive_message');
  }, [socket]);

  // Agrega esto
  useEffect(() => {
    // Ultimos 100 mensajes enviados en la sala chat (solicitados desde la bd en el backend)
    socket.on('last_100_messages', (last100Messages) => {
      console.log('Last 100 messages:', JSON.parse(last100Messages));
      last100Messages = JSON.parse(last100Messages);
      // Ordena estos mensajes por __createdtime__
      last100Messages = sortMessagesByDate(last100Messages);
      setMessagesReceived((state) => [...last100Messages, ...state]);
    });

    return () => socket.off('last_100_messages');
  }, [socket]);

  // Agrega esto
  // Se desplaza al mensaje más reciente
  useEffect(() => {
    messagesColumnRef.current.scrollTop =
      messagesColumnRef.current.scrollHeight;
  }, [messagesRecieved]);

  // Agrega esto
  function sortMessagesByDate(messages) {
    return messages.sort(
      (a, b) => parseInt(a.__createdtime__) - parseInt(b.__createdtime__)
    );
  }

  // dd/mm/yyyy, hh:mm:ss
  function formatDateFromTimestamp(timestamp) {
    const date = new Date(timestamp);
    return date.toLocaleString();
  }

  return (
    // Agrega ref a este div
    
      {messagesRecieved.map((msg, i) => (
        
          
            {msg.username}
            
              {formatDateFromTimestamp(msg.__createdtime__)}
            
          
          {msg.message}
          

        
      ))}
    
  );
};

export default Messages;

Cómo mostrar la Sala y los Usuarios (A)

Hemos hecho los componentes B y C, así que terminemos todo al hacer A.

En el servidor, cuando un usario se une a una sala, emitimos un evento chatroomusers que envía todos los usuarios de la sala a todos los clientes en esa sala. Escuchemos ese evento en un componente llamado RoomAndUsers.

Abajo, también hay un botón "Leave" que, cuando se presiona, hace la emisión de un evento leaveroom al servidor. Luego redirecciona el usuario devuelta a la página principal.

// client/src/pages/chat/room-and-users.js

import styles from './styles.module.css';
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

const RoomAndUsers = ({ socket, username, room }) => {
  const [roomUsers, setRoomUsers] = useState([]);

  const navigate = useNavigate();

  useEffect(() => {
    socket.on('chatroom_users', (data) => {
      console.log(data);
      setRoomUsers(data);
    });

    return () => socket.off('chatroom_users');
  }, [socket]);

  const leaveRoom = () => {
    const __createdtime__ = Date.now();
    socket.emit('leave_room', { username, room, __createdtime__ });
    // Redirecciona a la pagina principal
    navigate('/', { replace: true });
  };

  return (
    
      {room}

      
        {roomUsers.length > 0 && Users:}
        
          {roomUsers.map((user) => (
            
              {user.username}
            
          ))}
        
      

      
    
  );
};

export default RoomAndUsers;

Importemos este componente en la página Chat:

// client/src/pages/chat/index.js

import styles from './styles.module.css';
import RoomAndUsersColumn from './room-and-users'; // Add this
import SendMessage from './send-message';
import MessagesReceived from './messages';

const Chat = ({ username, room, socket }) => {
  return (
    
      {/* Agrega esto */}
      

      
        
        
      
    
  );
};

export default Chat;

Cómo quitar a un Usuarío de una sala de Socket.io

Socket.io provee un método leave() que puedes usar para quitar a un usuario de una sala de Socket.io. También estamos manteniendo un registro de nuestros usuarios en un arreglo en la memoria del servidor, así que quitaremos al usuario de ese arreglo también:

// server/index.js

const leaveRoom = require('./utils/leave-room'); // Add this

// ...

// Escucha cuando el cliente se conecta a través de socket.io-client
io.on('connection', (socket) => {

  // ...

  // Agrega esto
  socket.on('leave_room', (data) => {
    const { username, room } = data;
    socket.leave(room);
    const __createdtime__ = Date.now();
    // Quita a un usuario de la memoria
    allUsers = leaveRoom(socket.id, allUsers);
    socket.to(room).emit('chatroom_users', allUsers);
    socket.to(room).emit('receive_message', {
      username: CHAT_BOT,
      message: `${username} has left the chat`,
      __createdtime__,
    });
    console.log(`${username} has left the chat`);
  });
});

server.listen(4000, () => 'El Servidor se está ejecutando en el puerto 3000');

Ahora necesitamos crear la función leaveRoom():

// server/utils/leave-room.js

function leaveRoom(userID, chatRoomUsers) {
  return chatRoomUsers.filter((user) => user.id != userID);
}

module.exports = leaveRoom;

¿Por qué poner esta función corta en una carpeta utils aparte, te preguntas? Porque lo estaremos usando luego y no queremos repetirnos (mantenemos nuestro código DRY).

Probémoslo, abre dos ventanas lado a lado, y únete a ambos chats:

Luego haz clic en el botón leave en la ventana 2:

El usuario se quita del chat, y un mensaje se envía a los otros usuarios – notificándolos que se ha ido. ¡Bien!

Cómo agregar el Escucha de Evento Disconnect de Socket.io

¿Qué pasa si el usuario de alguna manera se desconecta del servidor, como si su internet se cayera? Socket.io provee un escucha de evento adjunto disconnects para esto. Agreguémosle a nuestro servidor para quitar a un usuario de la memoria cuando se desconecta:

// server/index.js

// ...

// Escucha cuando el cliente se conecta a través de socket.io-client
io.on('connection', (socket) => {

  // ...

  // Agrega esto
  socket.on('disconnect', () => {
    console.log('El usuario se desconectó del chat');
    const user = allUsers.find((user) => user.id == socket.id);
    if (user?.username) {
      allUsers = leaveRoom(socket.id, allUsers);
      socket.to(chatRoom).emit('chatroom_users', allUsers);
      socket.to(chatRoom).emit('receive_message', {
        message: `${user.username} se ha desconectado del chat.`,
      });
    }
  });
});

server.listen(4000, () => 'El Servidor se está ejecutando en el puerto 3000');

Y ahí lo tienes – haz construido una aplicación de chat de tiempo real fullstack con un frontend de React, un backend de Node/Express, y una base de datos de HarperDB. ¡Buen trabajo!

Para la próxima, planeo en revisar nuestras Funciones Personalizadas de HarperDB, el cual permite a los usuarios definir sus propios endpoints de API dentro de HarperDB. Esto significa que podemos construir nuestra aplicación completa, ¡en un sólo lugar! Mira un ejemplo de cómo HarperDB está colapsando el stack en este artículo.

Un desafío para ti 💪

Si refrescas la página Chat, el nombre de usuario del usuario y la sala desaparecerán. Mira si puedes prevenir que esta información se pierda cuando el usuario refresque la página. Pista: ¡el local storage podría ser útil!

¡Gracias por leer!

Si te pareció útil este artículo, puedes:

Suscribirte a mi canal de YouTube. Estaré subiendo tutoriales en profunidad y vídeos de proyectos sobre React/NextJS/Node/Express.
Sígueme en Twitter donde comparto tweets sobre mi jornada de freelancing, proyectos propios, y aprendizajes actuales.
Revisa mi almacén de Gumroad donde hago hojas de trucos y pósteres útiles y populares (8000 descargas al tiempo de escribir).
Revisa mi blog

Cómo crear una aplicación Fullstack con Next.js 13 y Firebase

Constanza Areal — Thu, 19 Sep 2024 21:32:31 +0000

Nota: Al momento de escribir este artículo (17 de Febrero de 2023), la versión 13 de Next.js fue lanzado, el 25 de Octubre de 2022 para ser exacto.

El equipo detrás de Next.js ha lanzado recientemente Next.js 13, que tiene un montón de características nuevas como un nuevo directorio app, componentes para el lado del servidor y del cliente, entre otros.

En este artículo, aprenderás cómo usar el nuevo Next.js 13 y la Base de Datos Firebase para crear una aplicación full stack.

Antes de continuar, para poder seguir el artículo necesitas tener un conocimiento básico de JavaScript, React y Next.js. Si necesitas repasar alguno de esos conceptos, aquí tienes algún recursos para principiantes:

Si estás listo, empecemos.

Cómo crear un nuevo proyecto de Next.js 13

Para instalar Next.js, necesitas tener instalado Node.js y npm/yarn instalado en tu computadora. Si no los tienes, puedes bajarlos desde sus sitios oficiales: Node.js website y npm website (aunque npm está incluido al instalar Node).

En el directorio que quieras, inicia la terminal de tu computadora y ejecuta el siguiente comando: npx create-next-app@13 --experimental-app.
Elige el nombre de tu proyecto y presiona enter para crearlo y esperar a que lo instale.
Se creará un nuevo directorio con el nombre de tu proyecto con todos archivos necesarios.
Ejecuta el comando cd para cambiar al directorio nuevo:
cd my-project-name
Y para iniciar el servidor de desarrollo, ejecuta el siguiente comando:

// si estás usando yarn
yarn run dev

// si estás usando npm
npm run dev

6. Ejecutar este comando iniciará el servidor de desarrollo para que puedas ver tu aplicación en tiempo real en http://localhost:3000.

Cómo instalar Firebase en Next.js

Firebase es una plataforma Baas - Backend-as-a-Service, por su sigla en inglés- que ofrece servicios como autenticación, bases de datos en tiempo real, almacenamiento en la nube, análisis de datos, entre otros.

En este tutorial, usaremos Firebase como nuestra base de datos. Sigue estos pasos para crear una aplicación Firebase:

En https://console.firebase.google.com/, inicia sesión con tu cuenta de Google.
Haz click en Crear proyecto y ponle un nombre. Luego, haz clic en Continuar.
En la pantalla siguiente puedes elegir si quieres habilitar métodos de análisis de datos para tu proyecto.
Haz clic en Crear proyecto.

Luego, necesitas crear una aplicación web. En la página de inicio, haz clic en el ícono de web para crear la aplicación:

Ponle un nombre a tu aplicación y haz clic en Registrar app:

Copia el archivo de configuración ya que vamos a necesitarlo luego. Haz clic en continuar hasta que termines.

Una vez que estés de vuelta en la página de inicio de tu proyecto, elige un producto que quieras agregar en tu aplicación. Para este tutorial, sólo agrega Authentication y Cloud Firestore:

Para Authentication, elige Método de acceso y agrega Correo electrónico/contraseña.

Después de instalar exitosamente Firebase, ya lo podemos usar como back-end en tu aplicación de Next.js 13.

Para usar Firebase con Next.js, sigue estos pasos.

Instala la última versión del SDK de Firebase en tu proyecto Next.js ejecutando el siguiente comando en tu terminal:

yarn add firebase

// o si estás usando npm
npm install firebase

Crea un archivo .env en el directorio raíz de tu proyecto Next.js y copia tus archivos de configuración de Firebase (los que habías copiado antes). Debería verse así:

NEXT_PUBLIC_FIREBASE_API_KEY=api-key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=auth-domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=project-id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=storage-bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=sender-id
NEXT_PUBLIC_FIREBASE_APP_ID=app-id
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=analytic-id

Luego, para que se vea todo más prolijo, en tu directorio src crea una carpeta con el nombre firebase y crea un archivo config.js con el siguiente código;

// Importa las funciones que necesites de los SDKs 
import { initializeApp, getApps } from "firebase/app";

const firebaseConfig = {
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
    measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};

// Inicializa Firebase
let firebase_app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0];

export default firebase_app;

Con esto ya listo, ya puedes utilizar Firebase como base de datos en tu aplicación Next.js.

Cómo instalar Authentication

Al querer construir aplicaciones fullstack, lo primero en lo que pensamos es la autenticación de usuarios. Con Firebase, podemos crear una forma de registrar usuarios o de que inicien sesión muy fácilmente.

En tu directorio src > firebase, crea una nueva carpeta con el nombre auth. Todo el código relacionado con la autenticación de firebase lo guardaremos aquí.

Luego, crea un archivo signup.js dentro del directorio src > firebase > auth con el siguiente código:

import firebase_app from "../config";
import { createUserWithEmailAndPassword, getAuth } from "firebase/auth";

const auth = getAuth(firebase_app);


export default async function signUp(email, password) {
    let result = null,
        error = null;
    try {
        result = await createUserWithEmailAndPassword(auth, email, password);
    } catch (e) {
        error = e;
    }

    return { result, error };
}

Vamos a descrifrar este código. Lo que estamos haciendo aquí es exportando la función signUp() que usa el método createUserWithEmailAndPassword() de Firebase para poder registrar nuevos usuarios. Luego de hacer esto, vamos a poder usar la función signUp() en cualquier lado de nuestra app.

En la misma carpeta, agreguemos nuestra función signIn(). Para hacer esto, crea un archivo signin.js con el siguiente código:

import firebase_app from "../config";
import { signInWithEmailAndPassword, getAuth } from "firebase/auth";

const auth = getAuth(firebase_app);

export default async function signIn(email, password) {
    let result = null,
        error = null;
    try {
        result = await signInWithEmailAndPassword(auth, email, password);
    } catch (e) {
        error = e;
    }

    return { result, error };
}

Cómo crear las páginas para el inicio de sesión y el registro de usuarios en Next.js

En Next.js 13 se puede crear nuevas páginas dentro del directorio app. Cada página es una carpeta con un archivo page.js. Para aprender más sobre cómo crear páginas, puedes leer la documentación de Next.js al respecto [en inglés].

Para crear un página de registro de usuarios un nuevo archivo page.js en signup, dentro de tu directorio app. Luego, agrega el siguiente código:

'use client'
import React from "react";
import signUp from "@/firebase/auth/signup";
import { useRouter } from 'next/navigation'

function Page() {
    const [email, setEmail] = React.useState('')
    const [password, setPassword] = React.useState('')
    const router = useRouter()

    const handleForm = async (event) => {
        event.preventDefault()

        const { result, error } = await signUp(email, password);

        if (error) {
            return console.log(error)
        }

        // else successful
        console.log(result)
        return router.push("/admin")
    }
    return (
        
            Sign up
            
                
                    Email
                     setEmail(e.target.value)} required type="email" name="email" id="email" placeholder="example@mail.com" />
                
                
                    Password
                     setPassword(e.target.value)} required type="password" name="password" id="password" placeholder="password" />
                
                
            
        
    );
}

export default Page;`

Por defecto, cada página que se agrega al directorio page.js es un componente del servidor [enlace a la documentación en inglés] y por lo tanto no permite agregar interactividad de lado del servidor como un onSubmit() a elementos de formulario. Para poder agregar esta interactividad, tenemos que decirle a Next.js que queremos un componente Cliente. Para hacer esto, añadimos lo siguiente al comienzo del archivo y antes de importar cualquier otro elemento:

'use client'

// código del componente

Del mismo modo vamos a crear nuestra página de inicio de sesión. Para crear esta página, crea un archivo page.js en signin, dentro de tu directorio app, y agrega el siguiente código:

'use client'
import React from "react";
import signIn from "@/firebase/auth/signin";
import { useRouter } from 'next/navigation'

function Page() {
    const [email, setEmail] = React.useState('')
    const [password, setPassword] = React.useState('')
    const router = useRouter()

    const handleForm = async (event) => {
        event.preventDefault()

        const { result, error } = await signIn(email, password);

        if (error) {
            return console.log(error)
        }

        // sino exitoso
        console.log(result)
        return router.push("/admin")
    }
    return (
        
            Sign up
            
                
                    Email
                     setEmail(e.target.value)} required type="email" name="email" id="email" placeholder="example@mail.com" />
                
                
                    Password
                     setPassword(e.target.value)} required type="password" name="password" id="password" placeholder="password" />
                
                
            
        

    );
}

export default Page;

Cómo saber si hubo algún cambio de autenticación

Mientras estás usando la aplicación, siempre vamos a querer saber si el usuario ha iniciado sesión o no. Si el usuario ha iniciado sesión, es posible crear páginas protegidas y mostrarle ciertos contenidos sólo a él. Firebase tiene el método onAuthStateChanged() para poder saber si hubo cambios.

Para que la información del usuario obtenida con el método mencionado arriba pueda ser usada en todo la aplicación, vamos a usar la API React Context. Crea un carpeta con el nombre context en tu directorio src. Dentro del directorio directory, crea un archivo con el nombre AuthContext.js y agrega el siguiente código:

import React from 'react';
import {
    onAuthStateChanged,
    getAuth,
} from 'firebase/auth';
import firebase_app from '@/firebase/config';

const auth = getAuth(firebase_app);

export const AuthContext = React.createContext({});

export const useAuthContext = () => React.useContext(AuthContext);

export const AuthContextProvider = ({
    children,
}) => {
    const [user, setUser] = React.useState(null);
    const [loading, setLoading] = React.useState(true);

    React.useEffect(() => {
        const unsubscribe = onAuthStateChanged(auth, (user) => {
            if (user) {
                setUser(user);
            } else {
                setUser(null);
            }
            setLoading(false);
        });

        return () => unsubscribe();
    }, []);

    return (
        
            {loading ? Loading... : children}
        
    );
};

Con el código de arriba simplemente creamos un Provider que devuelve el objeto usuario si el usuario inició sesión. De lo contrario, sólo devolverá null.

Para poder usar el valor que se le pasó a vamos a exportar useAuthContext desde el archivo y así usar el valor de user.

Antes de poder usar este contexto, necesitamos envolver todos los componentes con AuthContextProvider. Para hacer esto, abrimos el archivo layout.js dentro del directorio src > app y editamos el código con lo siguiente:

'use client'
import './globals.css'
import { AuthContextProvider } from '@/context/AuthContext'

export default function RootLayout({ children }) {
  return (
    
      {/*
         contendrá los componentes devueltos por el padre más cercano
        head.js. Encuentra más información en https://beta.nextjs.org/docs/api-reference/file-conventions/head
      */}
      
      
        
          {children}
        
      
    
  )
}

Ahora ya podemos crear páginas protegidas y mostrar contenido específico a usuarios distintos.

Cómo crear páginas protegidas

Dentro del directorio app, crea el directorio admin > page.js y agrega el siguiente código:

'use client'
import React from "react";
import { useAuthContext } from "@/context/AuthContext";
import { useRouter } from "next/navigation";
function Page() {
    const { user } = useAuthContext()
    const router = useRouter()

    React.useEffect(() => {
        if (user == null) router.push("/")
    }, [user])

    return (Solamente los usuarios que iniciaron sesión pueden ver esta página);
}

export default Page;

Si el usuario es null, lo redireccionamos a la página inicial. De lo contrario, si no es null, le mostramos la página protegida.

Cómo comunicarse con nuestra base de datos

Ahora que ya lidiamos con la parte de autenticación, podemos enfocarnos en la comunicación con nuestra base de datos. Como base de datos vamos a usar Firestore.

Para seguir haciendo todo ordenado, vamos a crear un nuevo directorio llamado firebase > firestore. Dentro de este directorio vamos a guardar todo el código relacionado con Firestore.

Cómo agregar documentos a Firestore

Dentro del directorio firestore, crea un archivo con el nombre addData.js y agrega el siguiente código:

import firebase_app from "../config";
import { getFirestore, doc, setDoc } from "firebase/firestore";

const db = getFirestore(firebase_app)
export default async function addData(colllection, id, data) {
    let result = null;
    let error = null;

    try {
        result = await setDoc(doc(db, colllection, id), data, {
            merge: true,
        });
    } catch (e) {
        error = e;
    }

    return { result, error };
}

Este código ya debería serte familiar: estamos exportando una función que permite agregar información a nuestra base de datos firestore.

Ahora ya podemos usar esta función addData() desde cualquier componente para agregar información a nuestra base de datos:

'use client'
import addData from "@/firebase/firestore/addData";

export default function Home() {

  const handleForm = async () => {
    const data = {
      name: 'John snow',
      house: 'Stark'
    }
    const { result, error } = await addData('users', 'user-id', data)

    if (error) {
      return console.log(error)
    }
  }
  
  return (
    ...
  )
}

Cómo podemos obtener un documento desde Firestore

Usando un método similar, podemos obtener un documento desde nuestra base de datos Firebase.

Crea un archivo getData.js dentro del directorio Firestore y agrega el siguiente código:

import firebase_app from "../config";
import { getFirestore, doc, getDoc } from "firebase/firestore";

const db = getFirestore(firebase_app)
export default async function getDoument(collection, id) {
    let docRef = doc(db, collection, id);

    let result = null;
    let error = null;

    try {
        result = await getDoc(docRef);
    } catch (e) {
        error = e;
    }

    return { result, error };
}

También podemos usar está función en cualquier componente que quieras.

Conclusión

En este artículo, aprendimos cómo construir una aplicación fullstack usando Firebase y Next.js 13 para agregar autenticación e interacción con nuestra base de datos.

¡Feliz codificación!

Operaciones CRUD – ¿Qué es CRUD?

Franciscomelov — Fri, 09 Feb 2024 12:38:33 +0000

CRUD no es una palabra. Es más bien una abreviación en inglés, que significa:

- Create - crear
- Read - leer
- Update - actualizar
- Delete - eliminar o destruir

En este artículo te mostraré lo que significa CRUD y cada una de sus siglas, también te enseñaré cómo funcionan las operaciones CRUD de crear, leer, actualizar y eliminar en el mundo real.

Índice

¿Qué es CRUD?
¿Qué es la operación CREATE (Crear) y cómo funciona?
¿Qué es la operación READ (Leer) y cómo funciona?
¿Qué es la operaciónUPDATE (Actualizar) y cómo funciona?
¿Qué es la operación DELETE (Eliminar) y cómo funciona?
Conclusión

¿Qué es CRUD?

CRUD se refiere a las cuatro operaciones básicas que una aplicación debería poder hacer- "Create - Crear", "Read - Leer", "Update - Actualizar" y "Delete - eliminar"

En una aplicación, el usuario debe de ser capaz de crear datos, poder leerlos y tener acceso a ellos desde la interfaz gráfica, actualizar o editar los datos y ser capaz de eliminarlos.

Las aplicaciones CRUD completas, consisten de 3 partes: una API (o servidor), una base de datos y una interfaz de usuario (IU/UI - user interface).

La API contiene código y métodos, la base de datos almacena y ayuda al usuario a extraer información, mientras que la interfaz de usuario ayuda a los usuarios a interactuar con la aplicación.

Puedes hacer una aplicación CRUD con cualquier lenguaje de programación existente. La aplicación no tiene que ser full-stack puedes hacer aplicaciones CRUD solo con JavaScript en el lado del cliente.

De hecho, la aplicación con la que te enseñaré cómo hacer operaciones CRUD - crear, leer, actualizar y eliminar, funciona solo con JavaScript del lado del cliente.

Cada letra en CRUD tiene un método de petición HTTP (HTTP request) correspondiente.

*Recuerda que es normal que en programación las instrucciones sean en inglés, ya que en este idioma están hechos la mayoría de los lenguajes de programación.

¿Cuál es la operación `CREATE` y cómo funciona?

La operación CREATE (crear) como su nombre lo dice, crea un dato, este dato puede ser un usuario, información del usuario, una publicación o una tarea.

Como mencioné antes, la instrucción HTTP que ejecuta la operación CREATEes el método POST.

CREATE es el equivalente a INSERT (INSERTAR) en una base de datos SQL. En una base de datos NoSQL como MongoDB, se utiliza la instrucción insert().

En la interfaz de usuario, que se muestra el siguiente GIF, se muestra cómo funciona la operación CREATE.

Primero se escribe el dato en la caja de texto y al dar clic en Submit, se crea o agrega un dato en nuestra aplicación.

¿Qué es la operación `READ` y cómo funciona?

La operación READ (leer) nos permite tener acceso, poder ver o leer los datos o información desde la interfaz gráfica, que pueden ser desde información de los usuarios, publicaciones de redes sociales, etc.

Se puede acceder a estos datos inmediatamente después de introducirlos en la aplicación o buscarlos después. Una caja de búsqueda se implementa para permitir a los usuarios filtrar los datos que no necesitan.

El método HTTP GET es el encargado de implementar la operación READ.

READ es el equivalente a SELECT (seleccionar) en una base de datos SQL. En una base de datos NoSQL como MongoDB, para leer se utiliza el método find() o findById()

En el siguiente ejemplo, en la sección "Entries" se puede ver cómo se leen o se muestran los datos previamente ingresados en la aplicación.

¿Qué es la operación `UPDATE` y cómo funciona?

La operación UPDATE (actualizar) nos permite modificar datos existentes o editar los datos de la aplicación.

A diferencia de READ, la operación UPDATE modifica los datos existentes, haciendo cambios a estos.

PUT y PATCH son los protocolos HTTP con los que se puede implementar la operación UPDATE, dependiendo de lo que necesites.

Utilizarás PUT cuando quieras modificar todo un dato, y PATCH si solo quieres modificar una parte de este.

En una base de datos SQL, se utiliza UPDATE para actualizar un dato, en una base de datos NoSQL como MongoDB, puedes implementar una actualización con el método findByIdAndUpdate().

En el siguiente ejemplo nos muestran cómo funciona la operación UPDATE, dando clic en el botón "Update" podemos modificar un dato de la lista.

¿Qué es la operación `DELETE` y cómo funciona?

DELETE (eliminar) nos permite eliminar o deshacernos de un dato de la interfaz de usuario y de la base de datos.

DELETE es el protocolo HTTP que nos permita implementar la operación DELETE.

En una base de datos SQL, DELETE se utiliza para eliminar un dato. En una base de datos NoSql como MongoDB, puedes implementar una función de eliminar con el método findByIdAndDelete().

En el siguiente ejemplo podemos ver cómo se elimina cada elemento de la lista al dar clic en el botón "Delete"

Conclusión

Este artículo te mostró lo que significa CRUD, y qué hace cada una de sus funciones en una aplicación CRUD.

Puedes pensar en CRUD de la siguiente forma:

Puedes "crear" una cuenta y añadir tu información en una red social - CREATE
Puedes acceder a la información que ingresaste y otras personas te pueden buscar – READ
Al obtener un trabajo en Google hay que cambiar/actualizar tu información de trabajo – UPDATE
Si te cansas de la toxicidad de las redes sociales y eliminas tu cuenta - DELETE

Para aprender a hacer tu propia aplicación CRUD - puedes ver este tutorial de Joy Shaheb en FreeCodeCamp.

!No pares de programar¡👋

¿Qué es un desarrollador full stack? Back end + front end = Ingeniero full stack

Andrés Torres — Mon, 27 Mar 2023 20:54:05 +0000

Artículo original: What is a Full Stack Developer? Back End + Front End = Full Stack Engineer

Si recién empiezas en la industria de la tecnología, es posible que hayas oído hablar del término Full Stack. Pero, ¿qué significa eso exactamente?

En este artículo, explicaré qué es Full Stack Development, qué habilidades necesitas para convertirte en Full Stack Developer, así como el tema de las expectativas salariales, sumado a unos consejos para conseguir el trabajo.

¿Qué es el Desarrollo Full Stack?

Un desarrollador Full Stack es alguien que trabaja tanto con el front-end como con el back-end de una aplicación web. El front-end es responsable de la apariencia visual del sitio web, mientras que el back-end es responsable de la lógica y la infraestructura detrás de escena del sitio.

Echemos un vistazo más de cerca a los términos front-end y back-end.

Desarrollo Frontend (Punto de vista del cliente)

Todo en una página web, desde el logotipo hasta la barra de búsqueda, los botones, el diseño general y la forma en que el usuario interactúa con la página, fue creado por un desarrollador front-end. Los desarrolladores front-end están a cargo de la apariencia del sitio web.

Los desarrolladores front-end también deben asegurarse de que el sitio web se vea bien en todos los dispositivos (teléfonos, tabletas y pantallas de computadora). Esto se llama Diseño Web Adaptable.

Desarrollo back-end (Punto de vista del servidor)

El desarrollo de back-end se refiere a la parte de la aplicación que el usuario no ve. Los desarrolladores de back-end se centran en la lógica del sitio, creando servidores y trabajando con bases de datos y API (interfaces de programación de aplicaciones).

Por ejemplo, el contenido y el diseño de un formulario se crearían en el lado del cliente. Pero cuando los usuarios envían su información, esta se procesa en el lado del servidor (back-end).

Ejemplo de una aplicación Full Stack del mundo real

Para comprender mejor el aspecto de una aplicación de pila completa, examinemos el sitio web de freeCodeCamp.

Todo lo que ves en la página se consideraría front-end. Todos los botones, texto, colores y diseño son trabajo del desarrollador front-end.

Cuando se trata de cosas como las credenciales de usuario, todo eso lo mantiene el back-end. Todos los procesos de inicio de sesión y la información del usuario son ejemplos de desarrollo de back-end en el trabajo.

Si tienes curiosidad y quieres echar un vistazo al código, puedes encontrarlo en la página de código abierto de freeCodeCamp.

Habilidades que necesitas en el desarrollo Full Stack

Echemos un vistazo a las tecnologías y herramientas que necesitará aprender para convertirse en un desarrollador de pila completa.

HTML
HTML significa lenguaje de marcado de hipertexto. HTML muestra el contenido de la página como botones, enlaces, encabezados, párrafos y listas.

Para aprender los conceptos básicos de HTML, freeCodeCamp tienes un curso acelerado de HTML para principiantes: Tutorial del sitio web.

CSS
CSS significa hojas de estilo en cascada. CSS es responsable del estilo de su página web, incluidos los colores, los diseños y las animaciones.

El curso de diseño web adaptativo de freeCodeCamp te enseñará los conceptos básicos de CSS, diseño adaptativo y accesibilidad. El diseño adaptativo es esencial para crear sitios web que se vean bien en todos los dispositivos.

La accesibilidad es la práctica de asegurarse de que todos puedan usar fácilmente sus sitios web. No deseamos crear sitios web que no puedan utilizar aquellos que utilizan tecnologías de asistencia como lectores de pantalla.

JavaScript
Utiliza JavaScript con HTML y CSS para crear páginas web y aplicaciones móviles dinámicas e interactivas. Los ejemplos de JavaScript incluyen animaciones, relojes de cuenta regresiva, menús móviles desplegables y mostrar/ocultar información cuando un usuario hace clic en un elemento de la página.

Para comenzar a aprender JavaScript, puedes tomar el curso de estructuras de datos y algoritmos de JavaScript de FreeCodeCamp. A partir de ahí, puedes comenzar a crear proyectos desde mi artículo 40 proyectos de JavaScript para principiantes. También están disponibles otros cursos.

Frameworks, bibliotecas y preprocesadores de CSS

Estas herramientas se crearon para ayudar a acelerar el proceso de desarrollo. En lugar de escribir todo el CSS personalizado, puedex usar el catálogo de un marco de clases de CSS en sus páginas web.

No hay necesidad de aprenderlos todos, pero aquí hay una lista de algunas opciones:

Los preprocesadores de CSS como Sass y Less le permiten agregar lógica y funcionalidad a su CSS. Estas herramientas hacen que tu CSS sea limpio y fácil de usar.

Bibliotecas y marcos de JavaScript

Estos marcos y bibliotecas te permiten ahorrar tiempo y hacer más con menos código.

Aquí hay algunas opciones populares:

No es necesario aprenderlos todos. Simplemente debes investigar qué tecnología se usa en su área y comenzar a aprenderla bien.

Aquí hay algunos recursos de aprendizaje sugeridos.

Bases de Datos

Es importante que un desarrollador Full Stack sepa cómo trabajar con bases de datos. Una base de datos en una aplicación web es un lugar para almacenar y organizar los datos de tu proyecto.

Hay muchos tipos de bases de datos para aprender, pero aquí hay algunas opciones populares.

Lenguajes de Programación para Back- end
Los lenguajes que puedes emplear para el desarrollo de back-end incluyen Java, Python, Node y PHP. No es necesario aprender todos estos lenguajes, sino concentrarse en uno para comenzar.

Aquí hay algunos recursos de aprendizaje sugeridos.

También hay muchas tecnologías para el desarrollo de front-end y back-end. Aquí hay algunos populares.

MEAN stack (MongoDB, Express, Angular and Node)
MERN stack (MongoDB, Express, React and Node)
NodeJS
LAMP stack (Linux, Apache, MySQL, and PHP)

En realidad hay más lenguajes de back-end para elegir, pero te sugiero que investigues los idiomas más utilizados en tu área.

Habilidades de prueba y depuración

A medida que desarrollas tu aplicación, habrá errores en el código que deben corregirse. La depuración es el acto de identificar esos errores ("bugs") y corregirlos.

La prueba (mejor conocida como Testing) es otra habilidad importante para aprender. Escribir pruebas para tu código es una forma de asegurarte el mismo está haciendo lo que se supone que debe hacer.

Para una explicación más detallada sobre los diferentes tipos de pruebas, sugiero leer este artículo.

Control de versiones

El control de versiones es una forma de rastrear y administrar los cambios en el código del proyecto. Git es un software popular que puede usar para rastrear su código.

Si estropeas muchas cosas en tu código, puedes usar Git para volver a una versión anterior de este en lugar de volver a escribir todo manualmente.

Aprender Git también te permite colaborar con otros en un equipo y realizar cambios en la misma base de código desde diferentes ubicaciones.

Sugeriría comenzar a aprender Git y usar un servicio como GitHub para alojar tus proyectos personales.

Resolución de problemas

La habilidad más importante para cualquier desarrollador es saber cómo resolver problemas. Empresas y clientes te buscan para aportar soluciones.

Es importante aprender a abordar un problema, dividirlo en partes más pequeñas y manejables y solucionar el problema en estas aplicaciones web.

¿Debo perseguir como objetivo el desarrollo full stack?

Si recién estás comenzando y no puedes determinar si el desarrollo Full Stack es para tí, simplemente no se preocupes por eso tan temprano en tu aprendizaje.

Sugeriría centrarse en aprender los tres lenguajes principales de la web, que son HTML, CSS y JavaScript. A medida que avanza en su viaje, entonces puedes decidir qué camino es apropiado para tí.

¿Cuánto gana un desarrollador Full Stack?
El rango de salario para los trabajos de Full Stack completa diferirá según el lugar del mundo en el que te encuentres. Sugeriría usar sitios como Glassdoor, Indeed y ZipRecruiter para buscar salarios en su área.

Aquí hay ejemplos de salarios para los Estados Unidos. Estos datos fueron proporcionados por ZipRecruiter y muestran el promedio nacional.

Veamos primero el salario de un desarrollador junior Full Stack. Los desarrolladores junior son aquellos que han estado trabajando en la industria durante dos años o menos.

A continuación, echemos un vistazo a los salarios de full stack de nivel medio. Estos desarrolladores han estado trabajando entre 2-4 años aproximadamente.

Por último, echemos un vistazo a los salarios senior full stack. Estos desarrolladores han estado trabajando en la industria durante algunos años y, a menudo, sirven como mentores para desarrolladores de nivel junior y medio.

¿Cómo puedes obtener un trabajo como Desarrollador Full Stack?

Una vez que hayas aprendido los aspectos técnicos del desarrollo Full Stack; debes concentrarte en reunir los materiales de tu solicitud de empleo.

Hay muchos recursos increíbles que pueden ayudarlo a aprender cómo obtener un trabajo en el área.

Recursos para la elaboración de currículos

Recursos para entrevistas técnicas

Consejos para conseguir un trabajo

También incluiré recursos sobre cómo comenzar a trabajar independientemente si está interesado en seguir esa ruta.

Espero que hayas disfrutado este artículo. Te deseo mucha suerte en tu camino para convertirte en un desarrollador Full Stack.

full stack - freeCodeCamp.org

Cómo construir una aplicación CRUD usando React y Convex

Tabla de Contenido

¿Qué es Convex?

Pre-requisitos

Cómo configurar tu proyecto

Cómo configurar Convex

Cómo crear el Esquema

Cómo crear la UI

Book Collections

Cómo crear las funciones CRUD

La Función Create

La Función Read

La Función Update

Función Delete

Actualizar el UI

Book Collections

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

Book no: {index + 1}

Cómo mostar los Datos

Book no: {index + 1}

Book no: {index + 1}

Estilos

Resumen

Cómo construir una Aplicación de Chat en Tiempo Real con React, Node, Socket.io, y HarperDB

Tabla de Contenidos

¿Qué es Socket.io?

Configuración del Proyecto

1. Cómo configurar nuestras carpetas

2. Cómo instalar nuestras dependencias de client

3. Cómo iniciar la aplicación de React

Cómo configurar HarperDB

Cómo construir la Página "Join a Room"

1. Cómo crear el formulario HTML y agregar estilos

{`<>DevRooms`}

2. Cómo agregar funcionalidad al formulario Join Room

Cómo configurar el Servidor

1. Cómo instalar las dependencias del servidor

2. Cómo iniciar nuestro servidor

Cómo crear nuestro primer Escucha de Evento de Socket.io en el Servidor

Cómo funcionan las Salas en Socket.io

Cómo unir el usuario a una sala de Socket.io

Cómo enviar un mensaje a los usuarios en una sala

Cómo construir la Página Chat

Los componentes de la página chat:

Cómo crear el Componente Messages (B)

Cómo crear un Esquema y una Tabla en HarperDB

Cómo crear el componente Send Message (C)

Cómo configurar las Variables de Entorno de HarperDB

Cómo permitir a los Usuarios que se envíen mensajes con Socket.io

Cómo obtener los mensajes desde HarperDB

Cómo mostrar los últimos 100 mensajes en el Cliente

Cómo mostrar la Sala y los Usuarios (A)

{room}

Users:

Cómo quitar a un Usuarío de una sala de Socket.io

Cómo agregar el Escucha de Evento Disconnect de Socket.io

Un desafío para ti 💪

¡Gracias por leer!

Cómo crear una aplicación Fullstack con Next.js 13 y Firebase

Cómo crear un nuevo proyecto de Next.js 13

Cómo instalar Authentication

Cómo crear las páginas para el inicio de sesión y el registro de usuarios en Next.js

Sign up

Sign up

Cómo saber si hubo algún cambio de autenticación

Cómo crear páginas protegidas

Solamente los usuarios que iniciaron sesión pueden ver esta página

Cómo comunicarse con nuestra base de datos

Cómo agregar documentos a Firestore

Cómo podemos obtener un documento desde Firestore

Conclusión

Operaciones CRUD – ¿Qué es CRUD?

Índice

¿Qué es CRUD?

¿Cuál es la operación CREATE y cómo funciona?

¿Qué es la operación READ y cómo funciona?

¿Qué es la operación UPDATE y cómo funciona?

¿Qué es la operación DELETE y cómo funciona?

Conclusión

¿Cuál es la operación `CREATE` y cómo funciona?

¿Qué es la operación `READ` y cómo funciona?

¿Qué es la operación `UPDATE` y cómo funciona?

¿Qué es la operación `DELETE` y cómo funciona?