Crear un Bot en Telegram y enviar mensajes usando Javascript

Crear un Bot en Telegram y enviar mensajes usando Javascript

En esta nueva entrada del blog vamos a crear un bot en Telegram y nos comunicaremos con el mediante Javascript.

La guía esta enfocada a realizar la comunicación mediante Javascript, pero como veremos mas adelante se puede aplicar a cualquier lenguaje de programación, consola de comandos o cualquier sistema que nos permita realizar peticiones.

Creando nuestro Bot

Para comenzar necesitamos tener instalada la aplicación Telegram y el bot llamado BotFather.

bot0

Cuando tengamos abierta la aplicación Telegram buscaremos el bot llamado BotFather, el cual nos ofrece múltiples opciones para generar un bot usando el comando /start.

bot1

La siguiente opción será crear nuestro bot usando el comando /newbot o pulsado sobre la opción llamada /newbot.

bot2

Esta opción nos pedirá el nombre de nuestro bot, pero debemos saber que el nombre tiene que acabar siembre en bot, por ejemplo xxxxxxbot, xxxxBot, xxxxx_bot, etc…, de lo contrario la aplicación no nos dejara avanzar el proceso.

bot3

Cuando tengamos claro el nombre de nuestro bot lo escribiremos y nos dará la bienvenida, mostrando en ese momento toda la información necesaria para conectar con el.

bot4

Por seguridad he ocultado cierta información que se usa para conectar y controlar el bot.

El texto oculto en la casilla gris corresponde al nombre de nuestro bot, y el texto oculto en la casilla amarilla corresponde al token que necesitaremos para realizar las llamadas a nuestro bot.

En este momento ya tenemos nuestro bot funcionando y ahora podríamos ejecutar cualquiera de los múltiples comandos que nos ofrece, pero nosotros vamos a comunicarnos con el bot desde fuera de la aplicación Telegram.

Comunicando con nuestro Bot

Antes de comenzar, si necesitas ampliar la información sobre la API de Telegram puedes acceder desde aquí.

Bien, con nuestro bot creado solo nos faltaría la siguiente información para realizar la comunicación.

  • baseURL: ‘https://api.telegram.org/bot’ => Es el endpoint que usaremos para acceder a la API de Telegram.
  • token: Este valor lo obtuvimos en el momento de crear nuestro bot.
  • parse_mode: ‘MarkdownV2’. Mas información sobre los diferentes modos desde aquí
  • chat_id: Es un valor numérico que obtendremos, por ejemplo ejecutando la siguiente petición desde el navegador: https://api.telegram.org/bot<token>/getUpdates
    • <token>: Sustituir por el valor del token.
    • Este es el resultado de la petición
    • getUpdates

Con estos datos ya podríamos realizar las peticiones desde cualquier lenguaje de programación, consola de comandos, aplicaciones, navegadores, etc…

A continuación añadiré el código para que se pueda importar y usar con total libertad e independencia en cualquier proyecto.

mybot.js

export const telegram = {
  // Configuración por defecto
  configTelegram: {
    baseURL: 'https://api.telegram.org/bot',
    token: '',
    chat_id: '',
    parse_mode: 'MarkdownV2',
  },
  /** 
   * @description Este método esta pensado para configurar dinámicante el bot de Telegram desde fuera y así poder enviar mensajes a múltiples bot
   * @param {string} token Token API para la validación de nuestro Bot
   * @param {string} chat_id El identificador del bor para comunicarnos con el Bot
   */
  config: (token, chat_id) => {
    telegram.configTelegram.token = token || telegram.configTelegram.token || '';
    telegram.config.chat_id = chat_id || telegram.configTelegram.chat_id || '';
  },
  /** 
   * @description Este método se usa para enviar un mensaje a nuestro Bot
   * @param {string} msn Mensaje que vamos a enviar
   * @param {string} type Es el tipo de mensaje. 'text': Es un mensaje de texto, 'whatever is': Envia una imagen
   * @return 
   */
  send: async (msn = '', type = 'text') => {
    const { baseURL, token, chat_id, parse_mode } = telegram.configTelegram;
    const endPoint = type === 'text' ? 'sendMessage' : 'sendSticker';
    const url = new URL(`${baseURL}${token}/${endPoint}`);
    // Imagen de prueba
    const image = 'https://s.tcdn.co/8a1/9aa/8a19aab4-98c0-37cb-a3d4-491cb94d7e12/19.png';
    const params = {
      chat_id: chat_id,
      parse_mode: parse_mode
    };
    const hasText = type === 'text';
    params[hasText ? 'text' : 'sticker'] = hasText ? msn : image;
    Object.keys(params).forEach(key => url.searchParams.append(key, params[key]))
    return await (await fetch(url)).json().catch(error => error);
  },
};

home.vue

<template>
  <div class='home'>
    <input type="text" v-model="text">
    <button @click="send">SEND MSN TO BOT</button>
  </div>
</template>

<script>
import { telegram } from '@/mybot.js';

export default {
  name: 'Home',
  data() {
    return {
      text: '',
    };
  },
  methods: {
    send() {
      try {
        telegram.send(this.text, 'text');
      } catch (err) {
        console.log(err);
      }
    },
  },
};
</script>

Aunque en este ejemplo estoy usando Vue, esta pequeña librería se podría usar en cualquier sitio ya que no tiene ninguna dependencia.

Para finalizar un video de la aplicación funcionando.