↓Skip to main content
  1. My Blog Posts and Stories/

Running a Telegram Bot on the Browser

··540 words·3 mins
Project Showcase Software Engineering
Table of Contents

Introduction #

In December last year, I realized that telegram bots are one of those bots which require a server to run. I was wondering if it is possible to run a telegram bot on the browser.

I did some research and found out that it is possible to run a telegram bot on the browser. This article will show my journey on how I made a website to run a telegram bot.

Why running in a browser? #

The main reasons are as follows:

  1. Users might not want to dive into how server works but want to make a telegram bot
  2. Users might not know how to code but want to make a telegram bot
  3. Users might just want a short term test for a telegram bot

Main features #

As this is just the beginning of the project, I will be focusing on a minimal subset of features.

These are the main features which I will be focusing on:

  1. Ability to run only on the browser tab
  2. Can send and receive messages from the telegram bot
  3. The users can edit the replies sent by the telegram bot

Delving into requirements #

Due to the predefined features, I will be making a website that does the following.

  1. The user can insert an API token for a telegram bot.
  2. The user can set a reply for a message sent by the user.
    1. This will in the form of a table where the user can add and delete replies.
    2. EG: If the user sends “Hello”, the bot will reply “Hi”
  3. The user can start or stop the bot.

Currently, I am still unable to decide on how to implement a good way for the user to write commands for the bot without actually writing code for the bot. If you have any suggestions, feel free to contact me and let me know.

Currently I am thinking of using Blockly where users can drag and drop blocks to program the telegram bot logic with an option to export it to code and run it on other platforms. (To be continued in another post)

Implementation #

Tech Stack #

For the implement of the website, I will be using the following technologies:

  1. ReactJs
  2. Material-UI (React UI framework because I am not a UI person)
  3. Redux (For state management without too much cancer)
  4. Fetch API (For sending and receiving messages)
  5. Web Workers (For running the bot in the background)

Architecture #

Browser Telebot Architecture
Telebot Architecture

The main architecture consists of 3 different parts:

  1. The UI for the user to control the bot.
  2. The Polling worker who polls the telegram bot API for messages.
  3. The sending worker who sends messages to the telegram bot API.

How to make a bot using the website. #

  1. Go to telegram
  2. Search for @BotFather
  3. Type /newbot and follow the instructions
  4. Copy the API key in the format 1234567890:ABCDEF1234567890ABCDEF1234567890ABC
  5. Visit the website at https://telebot.jh123x.com/
  6. Paste the API key into the input box
  7. Set commands for the bot
  8. Start the bot
  9. PM the bot you have made, and you should be able to see the replies.

Conclusion #

You can visit the website and see the source code in the section below.

Hopefully, I will be able to make this website better in the future.