How I created a competitor to telegram bots

A little over a year ago, I encountered the development of telegram bots. Being a professional programmer, I quickly figured out and saw the light of my first bot – Dr. Znaev. I posted an article about him on vc.ru . Then budged from him Alcobot Znaeva with funny functionality – you give him the name of the medicine, and he will tell you how long after taking it you can drink

Bots are good!

I liked the idea of bots, they are not difficult to develop, plus, as a specialist, my hands are free to use the technologies that I know how to use. For example, I wrote mine on the service repeatwhich allows you to quickly and painlessly set up a small web server and develop directly in the browser, which is very convenient for a small project.

So, here are my main claims to the telegram (sorry, Pasha):

Mess. Writing a clean and beautiful bot is not a trivial task, after all, this is a chat format, an endless footcloth of messages is annoying.
Ugly. Again, chat … is suitable for quick assimilation of information, but it is difficult to create a functional application.
Spreading. Despite the fact that there are hundreds of millions of users in the cart, it is not easy to take your bot beyond its limits. Telegram opens links within itself, which immediately raises the transition threshold. In Whatsapp, everything is fine on this score, the link opens in the browser, where the user already has all the passwords and appearances.
Not everyone has a cart. Despite the penetration on the Russian market in more than 50%, not everyone has telegrams. Older people often do not use it. I don’t want to lose this audience. The web version of telegram bots still requires registration.

It was convenient for me, as a person who constantly tries stubborn ideas, that with the help of my small brain I could roll out a simple product alone and immediately test it on the audience, but the list above was depressing, I wanted something beautiful. No sooner said than done, and the light has seen Meshapp – a platform for placing bots that look more like everyone’s favorite applications on the phone. That’s how beautiful it looked on the design layouts.

In essence, Meshapp is a low-code tool for creating micro applications, just like in Telegram, only without the annoying chat format and without 700 million users.

What did you use

So, the most interesting thing is to see what’s under the hood. For front-end development, I used reactjs (well, what else?). The system expects from the application an object in JSON format, which describes how the page should look. The list of components looks something like this:

{
    name: 'start',
    components: [
      {
        type: 'Typography',
        as: 'h1',
        variant: 'centred',
        children: 'Hello World!',
      },
      {
        type: 'Button',
        variant: 'primary',
        action: 'goto:components',
        text: `Список компонентов`,
      },
    ]
  };
  res.send(response);
}

On the client, the whole thing is parsed, the necessary components are found, and the beauty is displayed in the body of the document.

In fact, the author of the bot has only one option, namely, listening to the actions that come from the client. Any active component (button, card, search field) can only make a POST call to the server along the way /action, in the body of the request, the component passes the command defined by the author when creating the view. As in the example, when the button is clicked, the command carries the following:

{ command: 'goto:components' }

Here I have reserved for myself the command type goto followed by the name of the view I want to display in response to a button click. Probably, as the bot grows, such simplicity will turn into hell for the developer, but I deliberately chose this path in order to adhere to the KISS (Keep It As Siple And Stupid) method. After all, we want to write business logic, and not raise 100,500 frameworks, right? Actually, telegram bots have the same principle, they process the same only two types of feedback.

How and what do we store?

For the bot registry, I used the Algolia search service, so you can do fuzzy searches, spelling mistakes, and still find relevant content. Indexing occurs by the name and description of the bot.

The web part of the project is stored in FireBase, the Firestore NoSQL database is also used there to store service data and some triggers to it. Registration is also carried out by Firebase.

Actually, the system does not store more as superfluous. The processing of any other data remains on the conscience of the bot developer.