Как стать автором
Обновить

Как я создавал low code инструмент для веб приложений

Время на прочтение 3 мин
Количество просмотров 7.1K

Чуть больше года назад я столкнулся с разработкой телеграм-ботов. Будучи профессиональным программистом быстро разобрался и свет увидел мой первый бот - Доктор Знаев. Статью про него выкладывал на vc.ru . Затем от него отпочковался Алкобот Знаева с забавным функционалом - вы ему название лекарства, а он вам скажет через сколько после приёма можно выпивать

Боты это хорошо!

Идея ботов мне понравилась, они не сложны в разработке, плюс у меня как у специалиста развязаны руки для использования тех технологий которыми я умею пользоваться. Например свои я писал на сервисе replit, который позволяет быстро и безболезненно поднять небольшой веб сервер и разрабатывать прямо в браузере, что очень удобно при небольшом проекте.

Итак, вот мои основные претензии к телеграму (сорян, Паша) :

  • Бардак. Написать чистый и красивый бот нетривиальная задача, всё-таки это чат формат, бесконечная портянка сообщений напрягает.

  • Некрасиво. Опять же, чат... для быстрого усвоения инфы подходит, но функциональное приложение создать сложно.

  • Распространение. Несмотря на то, что в телеге сотни миллионов пользователей, вывести своего бота за его пределы непросто. Ссылки телеграм открывает внутри себя, что сразу повышает порог переходов. В Whatsapp на этот счёт все ровно, ссыль открывается в броузере, где у пользователя уже все пароли и явки.

  • Телега есть не у всех. Не смотря на пенитрацию на Российском рынке в больше чем 50% телеграм стоит не у всех. Люди старшего возраста им довольно часто не пользуются. Эту аудиторию терять тоже не хочется. Веб версия телеграм ботов всё-таки требует регистрации.

Мне как человеку, постоянно пробующему упоротые идеи было удобно, что я силами своего небольшого мозга мог в одиночку выкатить несложный продукт и тут же его протестировать на аудитории, но список, приведённый выше удручал, хотелось прекрасного. Сказано - сделано, и свет увидел Meshapp - платформа для размещения небольших веб приложений с упором на мобайл. Вот так красиво он выглядел на дизайн макетах.

По сути, Meshapp это low code инструмент для создания микро приложений, как и в телеграме, только без надоедливого формата чата и без 700 миллионов пользователей.

Что использовал

Итак, самое интересное, посмотреть, что под капотом. Для разработки фронтенда я использовал reactjs (ну, а что же еще?). Система ждёт от приложения объект в JSON формате, где описывается, как должна выглядеть страница. Список компонентов выглядит примерно так :

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

На клиенте всё это дело парсится, находятся нужные компоненты и красота выводится в тело документа.

По сути у автора бота есть только одна опция, а именно - прослушивание экшнов, которые приходят от клиента. Любой активный компонент (кнопка, карточка, поисковое поле) умеет делать только POST вызов на сервер по пути /action, в теле же запроса компонент передаёт команду определённую автором при создании вью. Как в примере, команда при нажатии на кнопку несет в себе следующее :

{ command: 'goto:components' }

Здесь я зарезервировал для себя тип команды goto за которым следует имя вью, которое я хочу отобразить в ответ на нажатие кнопки. Наверно при разрастании бота такая простота превратится в ад для разработчика, но я сознательно выбрал этот путь, что бы придерживаться метода KISS (Keep It As Siple And Stupid). Ведь мы хотим писать бизнес логику, а не поднимать 100500 фреймворков, правда? Собственно, тот же принцип у телеграм ботов, они тоже обрабатывают только два вида обратной связи.

Как и что храним?

Для регистра ботов я использовал поисковый сервис Algolia, так можно осуществлять fuzzy поиск, ошибаться в написании, и всё равно находить релевантный контент. Индексация происходит по имени и описанию бота.

Веб часть проекта хранится в FireBase, там же используются NoSQL база данных Firestore для хранения служебных данных и некоторые триггеры к ней. Регистрация так же осуществляется силами Firebase.

Собственно большего система не хранит за ненадобностью. Обработка любых других данных остаётся на совести разработчика бота.

That is all folks

Собственно это, наверно, всё. На всякий случай приложу ссылку на немножко кода, так, на всякий случай, вдруг кому интересно.

Теги:
Хабы:
-11
Комментарии 10
Комментарии Комментарии 10

Публикации

Истории

Работа

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн