Crear un boot de Whatsapp Nodejs con qr imagen

La integración de WhatsApp con Node.js abre un mundo de posibilidades, permitiéndote automatizar respuestas, enviar mensajes programados y mucho más. En este paso a paso, exploraremos cómo utilizar la librería whatsapp-web.js para Crear un boot de Whatsapp, brindándote las herramientas para personalizar y potenciar tu experiencia en esta popular plataforma de mensajería.

Creando el entorno de desarrollo

Si no sabes cómo configurar o instalar tu proyecto, te recomiendo que vayas a este post, en el te guiará paso a paso para tener un proyecto base.

https://tenocode.com/crear-un-nuevo-proyecto-con-nodejs/

Instalando la librería

En este tutorial usaremos la librería que nos proporciona pedroslopez, y su proyecto en github https://github.com/pedroslopez/whatsapp-web.js, además les dejo la pagina web del proyecto https://wwebjs.dev

Antes de seguir, cabe destacar que esta librería no es para manejar mas de 200 contactos simultaneamente, si se detecta que se esta haciendo algún uso masivo, whatsapp web te puede interrumpir la conexión por eso es más confiable hacer la integración con las apis que proporciona facebook.

Empezamos con instalar la dependencia:

npm i whatsapp-web.js

Además instalaremos otra librería importante, la cual nos servira para conectar nuestro celular usando código QR.

$ npm i qrcode path

En nuestro proyecto en el index.js o app.js según tengas configurada tu aplicación agregamos las dependencias

require("dotenv").config();
const cors = require('cors');
const express = require('express');
const { Client } = require('whatsapp-web.js');
const qrcode = require('qrcode');
const path = require('path');

agregamos estas líneas para inicializar nuestro proyecto

const port = process.env.PORT || 3000;

const app = express();
app.use(cors());

app.listen(port, () => {
    console.log(`Servidor Express iniciado en http://localhost:${port}`);
});

Ahora estamos a mitad de camino para terminar nuestro boot, sin embargo, en este post solo vamos a explorar como implementar la librería whatsapp-web.js. La lógica de tu negocio deberás implementarla tu mismo. Puedes conectar bases de datos mysql, mongoDB, implementar apis a ChatGPT, bueno puedes hacer un sin fin de cosas 😉

En este tutorial a diferencia de muchos otros generaremos el código QR en formato imagen y lo guardaremos en una carpeta publica en nuestro proyecto. Creamos entonces la ruta en la raiz de nuestro proyecto MiProyecto/public/qrcodes, luego agregamos las siguientes líneas

/*Inicio whatsapp web*/
const client = new Client();

//gatillamnos la generación del codigo qr para conexión
client.on('qr', async (qrCode) => {
    
    const imageName = `qrcode.png`;
    const imagePath = path.join(__dirname, 'public', 'qrcodes', imageName);

    qrcode.toFile(imagePath, qrCode, (err) => {
      if (err) {
        console.error('Error al generar el código QR', err);
      }
    });   
});

client.on('authenticated', (session) => {
    console.log(`Cliente autenticado - ${session}`);
  });

client.on('ready', () => {
    console.log('Client is ready!');
});

// Manejar mensajes entrantes y respuestas
client.on('message', (message) => {
    console.log(`Mensaje recibido de ${message.from}: ${message.body}`);
    const response = 'Hola, soy un bot respondiendo a tu mensaje.';
    client.sendMessage(message.from, response);
  });

client.initialize();
/*Fin whatsapp web*/

Entonces finalmente deberíamos tener algo asi en nuestro archivo app.js

require("dotenv").config();
const cors = require('cors');
const express = require('express');
const { Client } = require('whatsapp-web.js');
const qrcode = require('qrcode');
const fs = require('fs');
const path = require('path');

const port = process.env.PORT || 3000;

const app = express();
app.use(cors());

const client = new Client();

//gatillamnos la generación del codigo qr para conexión
client.on('qr', async (qrCode) => {
    
    const imageName = `qrcode.png`;
    const imagePath = path.join(__dirname, 'public', 'qrcodes', imageName);

    qrcode.toFile(imagePath, qrCode, (err) => {
      if (err) {
        console.error('Error al generar el código QR', err);
      }
    });   
});

client.on('authenticated', (session) => {
    console.log(`Cliente autenticado - ${session}`);
  });

client.on('ready', () => {
    console.log('Client is ready!');
});

// Manejar mensajes entrantes y respuestas
client.on('message', (message) => {
    console.log(`Mensaje recibido de ${message.from}: ${message.body}`);
    const response = 'Hola, soy un bot respondiendo a tu mensaje.';
    client.sendMessage(message.from, response);
  });

client.initialize();

app.listen(port, () => {
    console.log(`Servidor Express iniciado en http://localhost:${port}`);
});

Al levantar nuestro proyecto por consola con el comando

npm run dev

Se debiera generar una imagen qr en nuestra carpeta public/qrcodes, luego si abrimos nuestro whatsaap y escaneamos el código qr, podemos ya tener funcionando nuestro chat bot whatsapp