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

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

Prerrequisitos

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

¿Que es Firebase?

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

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

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

Firebase Authentication

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

Cloud Firestore

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

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

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

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

Como crear nuestra aplicación de React

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

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

npx create-react-app react-chat

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

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

Ahora, tu carpeta src contiene los siguientes componentes:

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

Además, tenemos lo siguiente:

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

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

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

Como configurar el proyecto en Firebase

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

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

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

Una vez creado, presiona el botón Continuar.

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

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

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

Cómo configurar Firebase Authentication

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

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

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

Cómo configurar Cloud Firestone

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

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

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

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

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

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

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

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

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

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

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

Ahora, crea el documento para la colección,

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

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

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

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

Cómo configurar Firebase en React

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

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

Nuestro archivo firebase.js debe verse asi:

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

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

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

Cómo autenticar usuarios con su cuenta de Google

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

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

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

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

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

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

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

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

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

const [user] = useAuthState(auth);

Y edita las funciones googleSignIn y signOut:

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

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

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

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

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

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

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

const [user] = useAuthState(auth);

El codigo final debe lucir así:

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

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

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

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

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

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

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

Importaremos lo siguiente:

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

y tambien editaremos la funcion googleSignIn:

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

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

Como enviar y almacenar mensajes en Firebase:

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

Así, que editemos el componente SendMessage:

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

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

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

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

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

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

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

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

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

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

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

Como recuperar mensajes de nuestra base de datos

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

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

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

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

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

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

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

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

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

El codigo completo luce asi:

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

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

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

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

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

export default ChatBox;

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

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

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

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

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

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

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

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

Como hacer que el chat se desplace hasta el final

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

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

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

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

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

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

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

const SendMessage = ({ scroll }) => {

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

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

Como agregar dominios autorizados

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

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

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

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

Para terminar

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

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

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

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

Hasta la próxima, byeeeeee!

Puedes utilizar el método includes() en JavaScript para comprobar si un elemento existe en un arreglo, también lo puedes utilizar para comprobar si una substring existe dentro de una cadena.

Este método retornará  true (verdadero) si el elemento está presente en el arreglo, y  false (falso) si el elemento no existe en dicho arreglo.

En este artículo, verás como usar el método includes() en JavaScript para corroborar si un elemento, o una substring existe en un arreglo.

Como corroborar si un elemento está dentro de un arreglo utilizando el método Array.includes()

Esta es la sintaxis usada por el método includes() para verificar si un elemento está dentro de un arreglo:

array.includes(item, fromIndex)

Vamos a analizar la sintaxis parte por parte:

array es el nombre del arreglo en el que queremos verificar la existencia del objeto que queremos buscar.

El método includes() recibe dos parámetros: item y fromIndex.

• item  es el elemento que queremos encontrar.
• fromIndex, el cual es un parámetro opcional, especifica el índice desde el que se quiere realizar la búsqueda. Si no incluyes ese parámetro, el parámetro predefinido será 0 (el primer elemento).

A continuación te presento un par de ejemplos de cómo usar el método includes() para verificar si un elemento está presente en un arreglo:

const numeros = [ 1, 3, 5, 7]; console.log(numeros.includes(3)); // true

En el ejemplo, creamos un arreglo llamado números con cuatro elementos: 1, 3, 5, 7.

Usando notación de punto, accedemos al método includes() del arreglo numeros.

Como parámetro, le pasamos un 3 al método includes(), este es el objeto que queremos encontrar.

Finalmente, obtenemos true (verdadero) porque 3 existe en el arreglo numeros.

Ahora, intentemos buscar un número que no existe en el arreglo:

‌const numeros = [ 1, 3, 5, 7]; console.log(numeros.includes(8)); // false

Como era de esperarse, obtenemos false (falso) como respuesta debido a que 8 no es un objeto que exista en el arreglo numeros.

Como corroborar si un elemento está dentro de un arreglo utilizando el método Array.includes(), pero esta vez empezando desde un índice específico

En la última parte, vimos cómo verificar si un elemento existe en un arreglo sin utilizar el segundo parámetro del método includes().

Como recordatorio, el segundo parámetro se utiliza para especificar el índice desde el cual se comenzará a buscar dentro del arreglo.

El índice de los arreglos comienza en 0, por lo que el primer elemento es el índice 0, el segundo es el índice 1, el tercero es el índice 2 y así sucesivamente.

Aquí te muestro un ejemplo de como usar el segundo parámetro en el método  includes():

‌const numeros = [ 1, 3, 5, 7]; console.log(numeros.includes(3,2)); // false

El ejemplo nos retorna false (falso), incluso cuando tenemos el valor 3 dentro del arreglo, ahora, aquí está el porqué:

Usando el segundo parámetro, le pedimos al método includes() que buscará el número 3, pero empezando en el índice 2: numeros.includes(3,2).

Este es el arreglo: [ 1, 3, 5, 7]

Índice 0 = 1.

Índice 1 = 3.

Índice 2 =  5.

Índice 3 = 7.

Así que, comenzando desde el segundo índice, en el que encontramos el valor 5, solo disponemos de dos índices en los cuales buscar , en los cuales se encuentran los valores 5 y 7, este es el porqué al buscar el valor 3 dentro del arreglo, este nos devuelve false (falso), aun cuando este valor si exista en el arreglo.

Si cambias el índice para que comience la búsqueda desde el índice 1, obtendremos true (verdadero) como respuesta porque 3 si existe en ese rango:

‌const numeros = [ 1, 3, 5, 7]; console.log(numeros.includes(3,1)); // true‌

Cómo verificar si una Substring existe dentro de una cadena de texto en JavaScript usando el método includes()

De forma similar a los ejemplos anteriores, podemos utilizar el método includes() mediante la notación de punto para buscar una substring dentro de una cadena de texto.

Así es como la sintaxis luce:

string.includes(substring, fromIndex)

Este es un ejemplo:

‌const bio = "Soy un desarrollador web"; console.log(bio.includes("web")); // true

En el ejemplo, la variable bio contiene la siguiente cadena de texto: "Soy un desarrollador web".

Usando el método includes() buscamos la substring "web".

Obtenemos true (verdadero) como respuesta porque "web" se encuentra dentro de la cadena de texto bio.

Al igual que en el ejemplo anterior, podemos pasarle el segundo parámetro para especificar desde donde queremos empezar a buscar, pero en las cadenas de texto, cada carácter representa un índice de la cadena (incluso los espacios en blanco)

Aquí te presento un ejemplo para ilustrar la búsqueda con

let bio = "Soy un desarrollador web"; console.log(bio.includes("web",23)); // false

Obtenemos false (falso) porque el índice 23 es la "e" en "web".

Empezando en el índice 23, la cadena luce así: "eb", la substring "web" no existe en  esa porción de la cadena, por lo que el método nos retorna false (falso).

Resumen

En este artículo, hablamos sobre el método includes() de JavaScript. Lo usamos para verificar la existencia de un elemento en un arreglo y de una substring en una cadena de texto.

Vimos algunos ejemplos de su uso con y sin especificar el índice desde el que comenzar a buscar.

Finalmente, vimos como usar el método includes()  para verificar la existencia de una substring dentro de una cadena de texto, tanto, en toda la cadena como desde un índice específico.

¡Feliz día programando!

Los arreglos son estructuras de datos comunes en JavaScript, y es importante saber cómo trabajar con ellos.

Las operaciones básicas incluyen agregar o remover elementos desde el principio, el final o desde un índice en particular.

En este artículo, aprenderemos cómo trabajar con los métodos propios de los arreglos: pop(), push(), shift() y unshift(). También, veremos cómo trabajar con el método splice(), el cual nos permite modificar el arreglo agregando o removiendo elementos en un índice específico.

¿Qué es un arreglo en JavaScript?

Antes de que nos sumerjamos en los diferentes métodos de la clase Arreglo, primero tenemos que entender qué es un arreglo en JavaScript.

Un arreglo, es un tipo de estructura de datos que se usa para guardar colecciones de elementos, esta puede ser de múltiples tipos al mismo tiempo (como números, cadenas de texto, booleanos [verdadero o falso], otros arreglos o, incluso objetos) o de un solo tipo (a diferencia de otros lenguajes de tipados como C++, donde los arreglos son de un solo tipo a la vez).

Aquí te presento un ejemplo de un arreglo de nombres:

let nombres = ["Maria", "Victoria", "Santino"];

Para acceder a un elemento del arreglo, debes hacerlo escribiendo el nombre del arreglo, y entre corchetes el índice del elemento al que quieres acceder, este índice comienza en cero y se incrementa de uno en uno.

Volviendo al ejemplo anterior si quisiera obtener el primer nombre deberías hacerlo de este modo:

nombres[0]; // "Maria"

Ahora, digamos que se quiere acceder al último elemento del arreglo. En ese caso puedes hacer uso de la propiedad length() la cual nos retornará la longitud del arreglo y le restamos 1 (recuerda que el índice del arreglo comienza en cero así, que en nuestro arreglo el último de los 3 elementos sería el elemento con sub-índice 2).

nombres[nombres.length - 1]; // "Santino"

Cómo remover un elemento al final del arreglo

Llega el momento de hablar de uno de los primero métodos que veremos en el artículo: el método pop(). Este método nos permite remover el último elemento de un arreglo; de ese modo podemos asignarlo en otra variable pero, hay que tener en cuenta al usarlo ya que este método modifica la estructura del arreglo.

Veamos un ejemplo, trabajando nuevamente con nuestro arreglo:

// declaramos un arreglo de nombres 
let nombres = ["Maria", "Victoria", "Santino"]; 

// declaramos una variable que contendrá el elemento extraído del arreglo 
let nombreEliminado; 

// asignamos el elemento eliminado del arreglo con el metodo pop en la variable nombreEliminado 
nombreEliminado = nombres.pop(); 

// mostramos en consola el nombre eliminado 
console.log(nombreEliminado); // "Santino" 

// mostramos en consola el contenido del arreglo nombres:
console.log(nombres); // Array(2)["Maria","Victoria"] 

Si utilizamos este método en un arreglo vacío, lo que obtendremos será undefined, veamos cómo se vería en la consola de javascript:

Cómo remover un elemento al principio del arreglo

Llega el momento de hablar de shift(). Este método permite retirar el primer elemento del arreglo y asignarlo en una nueva variable, y al igual que con el método pop() hay que tener cuidado al utilizarlo ya que este método modifica el arreglo original.

Volvamos al ejemplo del arreglo de los nombres para ver cómo funciona:

// mostramos en consola el contenido del arreglo nombres:
console.log(nombres); // Array(2)["Maria","Victoria"] 

// creamos una variable para extrer el primer nombre 
let otroNombreEliminado; 

// utilizamos el metodo shift() para quitar el primer nombre y asignarlo a la variable que creamos (otroNombreEliminado) 
otroNombreEliminado = nombres.shift(); 

// mostramos en consola el nombre que quitamos
console.log(otroNombreEliminado); // "Maria" 

// mostramos en consola el contenido del arreglo:
console.log(nombres); // Array(1)["Victoria"]

Al igual que con el método pop(), si utilizamos el método shift() en un arreglo vacío, este nos devolverá el valor primitivo undefined, veamos un ejemplo en la consola de javascript:

Cómo agregar un elemento al final del arreglo

Digamos que al final de un arreglo queremos agregar otro elemento, en ese caso utilizaremos el método push(): éste nos permite agregar nuevos elementos y nos retornará el tamaño actualizado del arreglo, veámoslo con un ejemplo:

// crearemos un arreglo con lenguajes de programacion 
let lenguajes = ["C++", "Java", "Visual Basic"]; 

// creamos una nueva variable para guardar el tamaño del arreglo: 
let tamañoArregloOriginal = lenguajes.length; // 3 

// creamos una nueva variable para guardar el tamaño del arreglo luego de modificarlo 
let tamañoArregloModificado; 

// insertamos dos nuevos lenguajes en el arreglo y guardamos el nuevo tamaño del arreglo en la variable nuevoTamaño: 
tamañoArregloModificado = lenguajes.push("Ruby", "Python"); // 5 

// mostramos el arreglo en consola: 
console.log(lenguajes);  // Array(5)["C++", "Java", "Visual Basic", "Ruby", "Python"]

Algo interesante que podemos hacer con el método push() es agregar un arreglo a otro arreglo, veámoslo con el ejemplo anterior de los lenguajes:

// crearemos un arreglo con lenguajes de programacion 
let lenguajes = ["C++", "Java", "Visual Basic"]; 

// crearemos otro arreglo con dos lenguajes: 
let otrosLenguajes = ["Ruby", "Python"]; 

// creamos una nueva variable para guardar el tamaño del arreglo: 
let tamañoArregloOriginal = lenguajes.length; // 3 

// creamos una nueva variable para guardar el tamaño del arreglo luego de modificarlo 
let tamañoArregloModificado; 

// utilizaremos el metodo push junto con la sintaxis expandida (spread) para concatenar el arreglo otrosLenguajes al final del arreglo lenguajes:
tamañoArregloModificado = lenguajes.push(...otrosLenguajes); // 5 

// mostramos el arreglo en consola: 
console.log(lenguajes); // Array(5)["C++", "Java", "Visual Basic", "Ruby", "Python"]

En este ejemplo utilizamos el operador de sintaxis extendida (spread) para sumar el arreglo otrosLenguajes[] hacia el arreglo original lenguajes[].

Cómo agregar elementos al principio de un arreglo

Ahora nos toca hablar del método unshift(), este nos permite agregar nuevos elementos al principio del arreglo original, trabaja del mismo modo que push, pero la concatenación la realiza al principio, veamos el ejemplo anterior de los lenguajes, pero con el método unshift():

// crearemos un arreglo con lenguajes de programacion 
let lenguajes = ["C++", "Java", "Visual Basic"]; 

// creamos una nueva variable para guardar el tamaño del arreglo: 
let tamañoArregloOriginal = lenguajes.length; // 3 

// creamos una nueva variable para guardar el tamaño del arreglo luego de modificarlo 
let tamañoArregloModificado; 

// insertamos dos nuevos lenguajes en el arreglo (al principio del mismo) y guardamos el nuevo tamaño del arreglo en la variable nuevoTamaño: 
tamañoArregloModificado = lenguajes.unshift("Ruby", "Python"); // 5 

// mostramos el arreglo en consola: 
console.log(lenguajes); // Array(5)["Ruby", "Python", "C++", "Java", "Visual Basic"]

Cómo agregar o remover elementos en un índice específico del arreglo

Llegamos al último método que cubriremos en este artículo: el método splice(), este nos permite agregar o remover elementos en un índice específico del arreglo, la sintaxis del método es la siguiente:

array.splice(inicio[, elementoEliminado[, item1[, item2[, ...]]]])

Ahora, veamos parte por parte, cómo se compone este método:

El valor inicio, es un número que puedes ser positivo o negativo. Va a indicar desde dónde se comienza a modificar el arreglo (si es positivo las posiciones a las que nos movamos comenzarán a contarse desde el primer elemento, es decir, el índice 0, y si es negativo comenzará a contar desde el último elemento hacia atrás).

Algo interesante es que si ponemos un valor mayor al arreglo, comenzará a modificar desde el final del mismo.

El valor elementoEliminado, es un número que puede ser negativo o positivo, si es negativo o cero indica que no vamos a eliminar ningún elemento del arreglo, por el contrario si es positivo nos marcará la cantidad de elementos a eliminar, si es mayor al índice del arreglo, eliminará el total.

item1, item2, etc... son los valores que insertamos en el arreglo.

Veámoslo con un ejemplo:

// Primero, crearemos un arreglo al que llamaremos sistema solar, que contendra los planetas pertenecientes: 
let sistemaSolar = ["Sol", "Mercurio", "Venus", "Marte", "Jupiter", "Saturno", "Neptuno", "Urano", "Pluton"]; 

Si leemos nuestro ejemplo, vemos que nos falta un planeta, la Tierra, por lo que utilizaremos el método splice() para agregarlo:

sistemaSolar.splice(3, 0, "Tierra"); // ["Sol", "Mercurio", "Venus", "Marte", "Tierra", "Jupiter", "Saturno", "Neptuno", "Urano", "Pluton"];

Repasemos qué realizamos con el método splice:

El primer argumento del splice, indica en qué punto nos ubicamos para insertar o quitar el elemento (nos ubicamos en el índice 3, donde se encuentra "Marte").

El segundo argumento, indica si vamos a eliminar o no un elemento, en este caso agregamos, por lo que le pasamos un cero.

El tercer argumento es el elemento que insertamos, en esta caso una cadena de texto: "Tierra".

Cabe destacar, que siempre que utilicemos el método splice() este nos retornará un arreglo vacío en caso de que insertemos valores:

Sigamos trabajando con nuestro arreglo. Si revisamos el arreglo, veremos que al principio del mismo, tenemos listado al Sol, y éste es una estrella, no un planeta, por lo que vamos a removerlo con splice() y guardarlo en otro arreglo:

let indice = sistemaSolar.indexOf("Sol"); 
let estrella[]; 

if (indice !== -1) { estrella = sistemaSolar.splice(indice, 1); }

Repasemos el último ejemplo:

Primero definimos una variable auxiliar llamada índice, a la cual le asignamos utilizando el método indexOf() el índice de la cadena "Sol", para luego utilizarla en el splice como índice a retirar.

Luego, creamos un arreglo llamado estrella donde guardaremos el elemento que splice nos devuelve.

El método indexOf() realiza la comparación estricta de la cadena que le pasamos y devuelve el primer índice en el que aparece, y en caso de que esta cadena no exista, retorna "-1".

Luego, con un condicional, verificamos que el índice no sea igual a -1.

Finalmente, guardamos en el arreglo estrella el splice, pasándole como primer argumento el índice, y como segundo argumento la cantidad a remover (en este caso, 1 elemento).

Conclusiones

En este artículo aprendimos cómo utilizar los métodos pop, push, shift y unshift pertenecientes al objeto arreglo, extremadamente útiles al momento de agregar o remover un elemento al principio o al final del arreglo.

También aprendimos a utilizar el método splice para remover o agregar un elemento al arreglo en una posición específica.

Recuerde, que todos los métodos vistos cambian la estructura del arreglo.

Espero que hayas encontrado este artículo interesante, disfruta el día programando (¡y aprendiendo algo nuevo!)

Cuando estás trabajando con una colección de variables o de datos en programación, usualmente los guardas en un tipo de dato específico.

En C++, puedes guardarlos en arreglos, estructuras, vectores, cadenas de texto y la lista sigue. Si bien estas estructuras de datos tiene sus características distintivas, en este artículo nos vamos a concentrar en los múltiples métodos para inicializar vectores.

Pero antes, hablemos un poco de los vectores y que los hace destacarse cuando trabajamos con colecciones en C++.

¿Qué son los vectores en C++?

A diferencia de los arreglos, donde la memoria es asignada de forma estática, los vectores nos permiten crear estructuras de datos más dinámicas.

Este es un ejemplo de un arreglo en C++:

#include <iostream>
using namespace std;

int main() {
    string nombres[3] = {"Nicolas", "Matias", "Tomas"};
    cout << nombres[1] << endl;
    // Matias
}
 

El arreglo del código de ejemplo fue creado y reservo en memoria el espacio suficiente para contener solo 3 elementos, en el caso de que quisiéramos agregar nuevos elementos generando un nuevo índice, nos daría como resultado un error.

Con los vectores, las cosas son un poquito diferente, cuando lo definimos, no tenemos que especificar la capacidad que tendrá, tras bambalinas, el espacio en memoria del vector se modifica al mismo tiempo que cambia el tamaño del vector.

Sintaxis de los vectores en C++

Declarar un vector es diferente de inicializarlo, Declararlo significa crear un nuevo vector, mientras que inicializarlo es insertarle elementos en él.

Así es como se ve la sintaxis de un vector:

vector <tipo_de_dato> nombre_de_vector

Cada nuevo vector debe ser declarado usando la palabra clave vector, seguido por el tipo de dato que queremos almacenar encerrado entre paréntesis angulares (el vector puede contener varios tipos de datos: cadenas, enteros, caracteres y la lista sigue), por último debemos especificar el nombre del vector, el cual puede ser cualquiera que nosotros decidamos, aunque siempre es conveniente utilizar nombres que hagan nuestro código lo más legible posible.

Cabe aclarar que debemos escribir la directiva include <vector> al inicio del archivo para poder usar los vectores.

Cómo inicializar un vector en C++

En esta sección, veremos las diferentes maneras de inicializar un vector en C++, las dividiremos en subsecciones con su respectivo ejemplo.

Comencemos con la manera más básica.

Cómo inicializar un vector en C++ usando el método push_back()

push_back() es uno de los varios métodos que podemos usar para interactuar con los vectores. Push_back() toma el parámetro que le demos y lo inserta en el índice final del vector.

Aquí tenemos un ejemplo:

#include <iostream>
#include <vector>
using namespace std;

int main() {
	//declaramos el vector "miVector"
    vector<int> miVector;
	//ahora, inicializamos el vector usando push_back()
	miVector.push_back(5);
	miVector.push_back(10);
	miVector.push_back(15);

	for (int x : miVector)
		cout << x << " ";
		// 5 10 15 
}

En el ejemplo, declaramos el vector, miVector usando la sentencia vector<int> miVector;.

Luego, usando el método push_back() le insertamos tres valores (5,10,15)

Finalmente, usando un bucle for, iteramos en el vector para mostrar en consola los valores.

Como inicializar un vector al mismo tiempo que lo declaramos

Al igual que con los arreglos, podemos asignar valores al vector al momento que lo declaramos.

Veamos el siguiente ejemplo:

#include <iostream>
#include <vector>
using namespace std;

int main() {
	//declaramos e inicializamos el vector miVector
    vector<int> miVector{ 5, 10, 15 };

	for (int x : miVector)
		cout << x << " ";
		// 5 10 15 
}

En este ejemplo, en la misma línea declaramos e inicializamos el vector.

Una vez que los números son asignados al vector, lo recorremos y, posteriormente, los imprimimos en consola.

Habrá notado, que entre paréntesis angulares encerré el tipo de dato que podrá contener el vector, en este caso el tipo es entero int.

Cómo inicializar un vector con un arreglo

Esta vez, inicializaremos el vector con los valores contenidos en un arreglo creado con anterioridad, para esto, utilizaremos dos métodos de la clase vector: begin() y end().

Veamos como es que estos métodos funcionan:

#include <iostream>
#include <vector>
using namespace std;

int main() {
    //Creamos el arreglo que contiene los datos que luego asignaremos al vector
    int miArreglo[] = { 5, 10, 15 };
    //Definimos el vector miVector y, mediante los metodos begin() y end() asignamos el contenido del arreglo que definimos con anterioridad
    vector<int> miVector(begin(miArreglo), end(miArreglo));


	for (int x : miVector)
		cout << x << " ";
		// 5 10 15 
}

Así como utilizamos un arreglo para generar un vector, podemos utilizar los dos métodos vistos en el ejemplo para copiar los valores de un vector hacia otro.

Vectores de tamaño estático: Como inicializar un vector, especificando el tamaño y el valor contenido

Podemos especificar el tamaño y la información que contendrá el vector al momento de declararlo. Esto nos permitirá que el vector tenga un tamaño y un valor específico a través de la ejecución del código.

Aquí te muestro un ejemplo:

#include <iostream>
#include <vector>
using namespace std;

int main() {

  int cantidad_de_elementos = 5; 
  
  vector<int> miVectorFijo(cantidad_de_elementos, 2); 
  
  	for (int x : miVectorFijo)
		cout << x << " ";
// 		2 2 2 2 2 
}

En el ejemplo, primero definimos una variable cantidad_de_elementos = 5, el cual especifica la cantidad de elementos máximos que contendrá el vector.

Luego, declaramos el vector miVectorFijo pasándole 2 parámetros: el primero corresponde al número máximo de elementos que el vector contendrá, mientras que el segundo corresponde al valor que contendrá el vector.

Finalmente, iteramos con un bucle for para poder imprimir en pantalla el contenido del vector, por lo que nos imprimirá 5 veces 2.

Cómo inicializar un vector usando el constructor de una  clase

Podemos inicializar vectores en constructores de clases, de esta forma podemos hacer que la clase sea más dinámica y, no tengamos que programar manualmente los valores del vector al inicializar la clase.

Veamos un ejemplo:

#include <iostream>
#include <vector>
using namespace std;

class Vector {
	vector<int> miVector;

public:
	Vector(vector<int> newVector) {
	    miVector = newVector;
	}
	
	void imprimirVector() {
		for (int i = 0; i < miVector.size(); i++)
			cout << miVector[i] << " ";
	}
	
};

int main() {

    vector <int> vectorNuevo;
    
	vectorNuevo.push_back(5);
	vectorNuevo.push_back(10);
	vectorNuevo.push_back(15);
	
	Vector vector(vectorNuevo);
	vector.imprimirVector();
	// 5 10 15 
}

Vamos a analizar el ejemplo:

class Vector {
	vector<int> miVector;

public:
	Vector(vector<int> newVector) {
	    miVector = newVector;
	}
	
	void imprimirVector() {
		for (int i = 0; i < miVector.size(); i++)
			cout << miVector[i] << " ";
	}
	
};

Primero, creamos la clase Vector, luego creamos una variable de tipo vector a la cual llamamos miVector.

Luego, definimos el constructor de la clase, el cual tiene dos métodos: uno que toma el vector inicializado y otro que imprime en pantalla los valores contenidos en el vector.

int main() {
    vector <int> vectorNuevo;
    
	vectorNuevo.push_back(5);
	vectorNuevo.push_back(10);
	vectorNuevo.push_back(15);
	
	Vector vector(vectorNuevo);
	vector.imprimirVector();
	// 5 10 15 
}

Luego, en el bloque main, creamos un nuevo vector, le insertamos los valores 5,10 y 15.

Finalmente, imprimimos por pantalla el contenido del vector con el método imprimirVector(), el cual fue definido en la clase que creamos anteriormente.

Lo interesante del ejemplo, es que los métodos fueron definidos en la clase, por lo que, no debemos preocuparnos del tamaño del vector (el cual es obtenido por la clase).

Conclusiones

En este artículo, hablamos sobre los vectores en C++, comenzamos diferenciando los arreglos de los vectores (recuerde, que los arreglos tienen un tamaño estático, mientras que los vectores tienen un tamaño dinámico, aunque, en caso de que sea necesario ese tamaño puede ser definido para que también sea estático).

Luego, trabajamos con algunos métodos que podemos utilizar para inicializar el vector y mostramos ejemplos de cada método (nuevamente, recuerde que no es lo mismo declarar que inicializar, declarar es crear en memoria el vector, e inicializar es asignarle valores a ese vector).

¡Que tengas un gran día programando (y aprendiendo)!

Hay una gran cantidad de herramientas de inteligencia artificial (IA) para desarrolladores en el mercado, pero para mi GitHub Copilot se diferencia del resto por su usabilidad, integración limpia al IDE y la palpable diferencia en la productividad al utilizarlo.

Copilot ofrece una variedad de herramientas de Inteligencia Artificial que han simplificado radicalmente mi experiencia como desarrollador. Lo usé para generar código, pruebas e incluso aplicaciones simples. También es genial para depurar, refactorizar y documentar código existente.

Curiosamente, usar Copilot causo que desarrolle funciones más rápido de lo que las partes interesadas del negocio pueden revisarlas.

Es importante remarcar que, las herramientas de Inteligencia Artificial, incluido Copilot pueden estar superequivocadas, disculparse (o no) cuando las corregimos y, luego con total confianza, producir el mismo error.

Pero, siempre que estés atento a los puntos débiles de las herramientas de Inteligencia Artificial, y, tengas suficientes conocimientos para reconocer cuando se equivocan, vas a poder mitigarlos en el camino hacia una productividad sustancialmente mejorada.

Como configurar GitHub Copilot

Para configurar y ver el uso básico de Copilot, te recomiendo que consultes la documentación oficial (en español). Puedes agregar Copilot a una cuenta personal o comercial, hay una prueba gratuita y, tiene un precio razonable luego del periodo de prueba.

Después de agregar Copilot a tu cuenta de GitHub, querrás instalar los plugins a tu IDE y logguearte para empezar a utilizarlo.

En este artículo, vamos a utilizar estas extensiones de Visual Studio Code:

Notas:

1. Esta información está actualizada al momento de escribir este artículo, pero probablemente cambie a medida que GitHub avance en el desarrollo de sus productos.
2. Todavía no recibí acceso a Copilot Voice, por lo que mi perspectiva está limitada y basada en la documentación ofrecida por GitHub.

Privacidad

Antes de sumergirnos en algunos casos de uso de Copilot, una aclaración rápida en cuanto a la privacidad: Básicamente, si confías en GitHub para alojar tu código fuente, puedes confiar en lo que harán con los prompts que envíes a Copilot y tus fragmentos de código. [Por favor, revisa las preguntas frecuentes (en inglés) y la declaración de privacidad]

Casos de uso para GitHub Copilot

Los casos de uso de GitHub Copilot son numerosos, y pueden realmente agilizar el proceso de desarrollo.

A continuación, te dejo una lista de lo que puedes hacer con las extensiones de Copilot:

Generación de código

Copilot es conocido por su capacidad para finalizar el código. Si escribís un comentario o si escribís el principio de una línea de código, Copilot te sugerirá una solución que puedes aceptar, ignorar o, incluso explorar alternativas. Esta característica es conocida como "texto fantasma".

Una vez que instalada la extensión de Copilot e iniciada la sesión, utilizarlo es tan sencillo como tipear instrucciones y pulsar la tecla Tabulador a medida que van surgiendo las sugerencias.

Llevando un poco más allá la función de completar, Copilot puede tomar un prompt y usarlo para construir toda una aplicación.

Le pedí que creara una API REST en Node con funciones ABM para "productos", y género código funcional. Esto es impresionante;  inclusive le di el mismo prompt a ChatGPT, que también me dio instrucciones de como realizar el proyecto, lo cuan es también impresionante.

Copilot Voice puede tanto escribir como editar código basado en comandos de voz, la mayoría de las veces es más rápido utilizar Copilot con el teclado que dictando una a una las líneas de código usando Voice, pero es totalmente factible utilizar Voice para crear y ejecutar código sin necesidad de utilizar el teclado, algo mucho más que útil para personas que posean alguna dificultad para usar el teclado.

Explicación de código

A menudo debí sentarme frente a la PC para intentar deducir que es lo que un boque de código está haciendo. Algunas veces es código heredado (Legacy Code) del cual no entiendo el contexto del negocio, o a veces está usando una librería particular que nunca use, a veces también debo reconocer que maldije a la persona que lo escribió, incluso si esa persona fui yo.

A continuación te muestro el código generado por Copilot con el prompt que utilice antes "Un API REST en Node...":

app.get('/products/:id', (req, res) => {
  const id = req.params.id;
  const product = products.find((p) => p.id === id);
  if (product) {
    res.json(product);
  } else {
    res.status(404).json({ error: 'El producto no fue encontrado' });
  }
});

Tome el código y se lo di como entrada a Copilot para que me explicara el código, esta fue su respuesta:

Aquí está la explicación del código:

1. Definimos la ruta con la ruta /productos/:id. Los dos puntos : en la ruta indica que es un parámetro de la ruta. El valor del parámetro de la ruta estará disponible en req.params, por ejemplo, si la ruta es /products/:id y hacemos una solicitud a /products/5, entonces el valor de req.params será { id: 5}.
2. Obtenemos el id de req.params y buscamos el producto con el id que obtuvimos del arreglo de productos. Si existe el producto lo mostramos, si no existe devolvemos un código de error 404 con el mensaje "El producto no fue encontrado".

Este es un segmento de código sencillo, y la respuesta brindada por Copilot es clara y directa, sería bastante útil agregar esto como un comentario sobre el código de la función.

Otro buen ejemplo de uso son las expresiones regulares, entiendo como funcionan, pero a veces no tengo la paciencia para entender que es lo que la expresión regular esta haciendo. Le di como entrada a Copilot esté gigantesca expresión regular para la validación de un correo electrónico:

(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])

Explico la expresión regular a un alto nivel, indicando que está dividido en la parte local y el dominio, representado antes y después del símbolo "@" en una dirección de correo electrónico. Luego, describió los caracteres permitidos en cada parte, bastante útil.

Traducir código (entre lenguajes)

A menudo se requiere que los desarrolladores aprendamos rápidamente nuevos lenguajes y frameworks, Copilot Chat hace esta tarea bastante sencilla, aquí te muestro un arreglo de productos en JavaScript que fue convertido a Ruby por Copilot:

let productos = [
  { id: '1', descripcion: 'Producto 1', precio: 10.99 },
  { id: '2', descripcion: 'Producto 2', precio: 19.99 },
  { id: '3', descripcion: 'Producto 3', precio: 7.99 }
];

productos = [
  { id: '1', descripcion: 'Producto 1', precio: 10.99 },
  { id: '2', descripcion: 'Producto 2', precio: 19.99 },
  { id: '3', descripcion: 'Producto 3', precio: 7.99 }
]

Este es un ejemplo muy sencillo, así que transformemos esto en una clase y vallamos en sentido contrario (de Ruby a JavaScript):

class Producto
  attr_reader :nombre, :precio

  def initialize(nombre, precio)
    @nombre = nombre
    @precio = precio
  end
end

class Producto {
  constructor(nombre, precio) {
    this.nombre = nombre;
    this.precio = precio;
  }
}

Esto funciono de maravilla, inclusive le pedí que lo transformara en TypeScript y funciono perfecto:

class Producto {
  nombre: string;
  precio: number;

  constructor(nombre: string, precio: number) {
    this.nombre = nombre;
    this.precio = precio;
  }
}

Depurando código

Esta es una de las funciones más útiles que posee Copilot Chat, puedes darle un fragmento de código problemático o el mensaje de error que tienes y el programa te indicara cuál "piensa" que es el error

No recuerdo la cantidad de veces que me arranque los pelos tratando de encontrar un error de sintaxis, la habilidad de Copilot para arreglar errores me hacen más feliz (y me permite conservar mi cabello).

También puedes darle como entrada a Copilot Chat un mensaje de error sin ningún otro prompt y te devolverá el problema que lo ocasiona, en este caso intencionalmente removí un punto del código de la API  REST en Node:

products[productIndex] = { id, ..req.body };

He copiado/pegado el mensaje de error en el Chat, y me ha respondido con...

req.body

Esto es correcto (la linea y la fuente del error) e incorrecto (ya que debería ser solo un punto). Luego, me dio un fragmento de código con tres puntos, el cual es también correcto.

Como te mencione al principio, siempre debes chequear el trabajo de las herramientas de IA, aun así estoy impresionado con la habilidad de Copilot de tomar un error, describir lo que "piensa" que está mal y, luego sugerir la corrección.

Refactorización

Otro gran caso de uso es la refactorización, consideremos el siguiente código:

req.body

Esto es correcto (la linea y la fuente del error) e incorrecto (ya que debería ser solo un punto). Luego, me dio un fragmento de código con tres puntos, el cual es también correcto.

Como te mencione al principio, siempre debes chequear el trabajo de las herramientas de IA, aun así estoy impresionado con la habilidad de Copilot de tomar un error, describir lo que "piensa" que está mal y, luego sugerir la corrección.

Refactorización

Otro gran caso de uso es la refactorización, consideremos el siguiente código:

def precio_con_descuento
  precio - (precio * tasa_de_descuento)
end

Este codigo para calcular descuentos no realiza verificaciones para validar que no le demos valores nulos, cadenas de texto que deberían ser números o valores razonables para  "precio" o "tasa_de_descuento", necesitamos que el código haga lo siguiente:  

1. Asegurarse que "precio" sea un Integer o Float (no nulo)
2. Asegurarse que "precio" no sea negativo
3. Asegurarse que "tasa_de_descuento" sea un Float (no nulo)
4. Asegurarse que "tasa_de_descuento" no sea negativo y menor o igual que 1

Copilot Chat puede manejar esto fácilmente...

def precio_con_descuento
  raise ArgumentError, "El precio debe ser un número positivo" unless precio.is_a?(Numeric) && precio >= 0
  raise ArgumentError, "La tasa de descuento debe ser un número positivo entre 0 y 1" unless tasa_de_descuento.is_a?(Numeric) && tasa_de_descuento >= 0 && tasa_de_descuento <= 1

  precio - (precio * tasa_de_descuento)
end

Generación de pruebas

Estrictamente hablando, la generación de pruebas es una subsección de la "Generación de código", pero es tan útil, que sentí que merecía su propia sección.

Generar pruebas unitarias para el código puede ser tedioso si estás tratando de cubrir caminos felices y tristes, casos principales de uso y casos extremos. Nuestra función de "precio_con_descuento" necesita casos de prueba para asegurarnos que se genere un aviso de error si "precio" o "tasa_de_descuento" no cumplen con los requisitos. Además, queremos probar lo siguiente:

1. Un "precio" sin una "tasa_de_descuento"
2. Un "precio" con una "tasa_de_descuento" razonable (por ejemplo, un 10% de descuento)
3. Un "precio" con un 100% de "tasa_de_descuento" (por ejemplo, si queremos regalar el producto)

Con estos y nuestros casos de error anteriores, esto es lo que Copilot Chat genero, despues de alguno pequeños ajustes (re-prompting) y cambiando de Minitest a Rspec:

RSpec.describe Producto do
  describe "#precio_con_descuento" do
    context "cuando se proporciona un precio válido y una tasa de descuento" do
      it "retorna el precio con el descuento aplicado" do
        producto = Producto.new("Producto de Prueba", 100, 0.2)
        expect(producto.precio_con_descuento(producto.precio, producto.tasa_de_descuento)).to eq(80)
      end
    end

    context "cuando se proporciona un precio nulo" do
      it "lanza un ArgumentError con un mensaje apropiado" do
        producto = Producto.new("Producto de Prueba", nil, 0.2)
        expect { producto.precio_con_descuento(producto.precio, producto.tasa_de_descuento) }.to raise_error(ArgumentError, "El precio debe ser un número positivo")
      end
    end

    context "cuando se proporciona un precio menor que 0" do
      it "lanza un ArgumentError con un mensaje apropiado" do
        producto = Producto.new("Producto de Prueba", -100, 0.2)
        expect { producto.precio_con_descuento(producto.precio, producto.tasa_de_descuento) }.to raise_error(ArgumentError, "El precio debe ser un número positivo")
      end
    end

    context "cuando se proporciona una tasa de descuento nula" do
      it "lanza un ArgumentError con un mensaje apropiado" do
        producto = Producto.new("Producto de Prueba", 100, nil)
        expect { producto.precio_con_descuento(producto.precio, producto.tasa_de_descuento) }.to raise_error(ArgumentError, "La tasa de descuento debe ser un número positivo entre 0 y 1")
      end
    end

    context "cuando se proporciona una tasa de descuento menor que 0" do
      it "lanza un ArgumentError con un mensaje apropiado" do
        producto = Producto.new("Producto de Prueba", 100, -0.2)
        expect { producto.precio_con_descuento(producto.precio, producto.tasa_de_descuento) }.to raise_error(ArgumentError, "La tasa de descuento debe ser un número positivo entre 0 y 1")
      end
    end

    context "cuando se proporciona una tasa de descuento mayor que 1" do
      it "lanza un ArgumentError con un mensaje apropiado" do
        producto = Producto.new("Producto de Prueba", 100, 1.5)
        expect { producto.precio_con_descuento(producto.precio, producto.tasa_de_descuento) }.to raise_error(ArgumentError, "La tasa de descuento debe ser un número positivo entre 0 y 1")
      end
    end
  end
end

Una prueba para entradas válidas, cinco para entradas incorrectas, los seis funcionan, ¡y yo no tuve que escribirlos!

Revisión de código

Una de las características destacables de Github Copilot es la elaboración de los resúmenes de solicitudes de incorporación de cambios de Copilot. cabe destacar que esta función está solo disponible para quienes posean una suscripción de Github Copilot Enterprise, aquí te presento algunos puntos clave:

• Generación automática – Deje que Copilot complete la plantilla de Pull Request o explique el código.
• Generación de pruebas – Genera pruebas para el código basado en el análisis de Copilot
• Texto fantasma – Reciba sugerencias mientras escribe el Pull Request

Desarrollo guiada por voz

¡Antes conocida como "Hey, Github!", Copilot Voice te permite utilizar la voz para generar los prompts para interactuar con el código, Voice cuenta con estas impresionantes capacidades:

• Escribir/Editar código – Usa comandos de voz para disparar sugerencias de código de Copilot
• Explora el código – Recorre un archivo sin utilizar el mouse o el teclado
• Controla el IDE – Dispare cualquier comando de Visual Studio Code utilizando su voz
• Resumen del código – Obtenga resúmenes de bloques de código

Resumen

GitHub rápidamente está generando una explosión de productividad con toda la familia de addons Copilot. Está incrementando el tiempo que disfruto programando y reduciendo el que antes gastaba en tareas triviales. Lo animo, querido lector, a seguir de cerca los avances de Copilot, porque se producen rápidamente.

Ignora los artículos sensacionalistas que prometen "un aumento de productividad de 10 veces la que tiene ahora", pero no ignores esta investigación acerca del impacto que Copilot tiene en la productividad y felicidad de los programadores.

Dedique un poco de su tiempo a utilizar las herramientas que Copilot le brinda, póngalo a prueba en su día a día, y, le garantizo que quedará encantado por el efecto que genera en su productividad y felicidad.