Представьте, что у вас есть друзья. У друзей — проект dance-батлов для любителей и профессионалов. У любителей и профессионалов — необходимость голосовать за любимчиков и влиять на выбор победителя.
И ни у кого из них нет удобного решения для голосования. Кирилл Блинов, младший frontend-разработчик в Mish придумал, как с этим разобраться. И заодно здорово прокачался в бэкенде.
Как было до?
Зрительское голосование в dance-батле выглядело так: большая доска с названиями команд, напротив которых люди клеили свои звездочки-голоса. Карточки для голосования выдавали при входе.
Когда батлы заканчивались, зрители ломились к доске хуже школьников на перемене в столовую, чтобы проголосовать за своих любимчиков.
Необходимость автоматизировать этот процесс была очевидна.
Что нужно было сделать?
Делать большую разработку не хотелось — да этого и не требовалось. Хотелось продумать все так, чтобы зрители могли проголосовать прямо с телефона.
Поэтому задач у проекта было несколько:
Создать простой сервис, в котором не нужно долго регистрироваться и разбираться в интерфейсе.
Задействовать минимум ресурсов команды.
- Организовать стабильную работу сервиса, чтобы ничего не легло, когда в него зайдут сразу все зрители.
Поработать на секьюрностью, чтобы не было искусственных накруток голосов.
Что решили делать?
Сначала ребята-заказчики купили телеграм-бот с кучей ограничений по функционалу — в доступе была какая-то неудобная база, а в какой-то момент все и вовсе рухнуло.
Я решил, что я фронтендер и буду решать задачу по-фронтендерски. Накидать Mobile First Landing, залить на Vercel. Дальше я представлял план действий только в общих очертаниях. Да и в какой-то момент идея с сайтом оказалась слишком сложной.
Пришлось вернуться к идее Telegram-бота, но сделать его удобнее. Решение казалось самым удачным, потому что аудитория уже знакома с мессенджером и представляет, что от него ожидать.
Так получилось спихнуть фронтенд на инструментарий мессенджера и спокойно (почти) писать бэкэнд.
Как реализовывали идею?
Пришло время плотно знакомиться с базами данных.
У меня по старым воспоминаниям было 2 варианта: MongoDB или Firebase. У обоих были минусы. Mongo, например, был доступен только через VPN. А это проблема для пользователя: учитывая массовую болтанку с блокировками самих VPN-сервисов, быть полностью уверенным, что в ответственный момент база данных будет доступна, я не мог. Firebase выглядел гораздо дружелюбнее для пользователя. Но с не самой удобной документацией.
Зарегистрировать бота было не сложно, но важно понимать принцип работы бота по IP Telegram. Сервер по зашитому в токен адресу посылает запрос и ждет, когда на него ответит сервер Telegram.
В реализации использовали базовый инструментарий мессенджера — кнопочки. Они бывают двух видов:
Инлайн в сообщении.
Инлайн под инпутом ввода сообщений
Кажется, кнопочки и кнопочки, но разница между ними огромная. Если выбирать инлайн под инпутом, которые визуально кажутся привлекательнее и удобнее, на бэкенде нужно написать 1000+ условий и триггеров.
Нужен простой колбэк: пользователь нажимает на кнопочку — кнопочка генерит конкретную функцию. Такая штука зашита только в инлайны в сообщениях.
Вся разработка функционала построена на колбеках с четкими рамками и предсказуемым поведением. Порой приходилось хитро называть события для колбеков, чтобы передавать больше информации, а потом парсить это и прокидывать дальше.
Что сделали с данными?
Пара нервных свиданий по вечерам с Firebase — и становится понятно, как все работает.
Обращения к сущностям в базе идет по ссылкам. Мы берем референс условного объекта database и сообщаем Firebase, что в итоге хотим получить. В нашем случае ограниченные возможности базы данных работают на нас.
Придется покумекать над неймингом сущностей. Firebase не очень любит русский язык, да и вообще любой, кроме языка чисел. Поэтому нужно будет лишний раз итерироваться по сущностям, используя Object.keys() или Object.values(), чтобы точно взять, обновить или сохранить объект.
Когда все участники оставляли свои ценные голоса, сводная табличка с результатами отправлялась организаторам.
Мне надо объект конвертировать в таблицу, сохранить в файле и отправить ботом в респонсе. Я думал, что вот тут прикурю надолго, но оказалось, что это самая простая часть. Джисон я конвертировал с помощью древнющего npm пакета json2xls, который просто выводит в две строки таблицу “команда–голоса
Telegram не дает слать файл через бот. Поэтому его сначала надо заархивировать и только потом сохранить и отправить по запросу.
Как делали систему устойчивее?
Изначально автор проекта хотел включать бэкенд на своем ноутбуке на время батлов. Но довольно быстро стало понятно, что система не выдержит, если в бот одновременно зайден пара сотен человек. Встал вопрос о деплое.
Решение — Timeweb: дешево и сердито, хороший интерфейс и удобная консоль прямо в браузере. Теперь вся система работала автономно, но ее еще нужно было протестировать.
Задача у фокус-группы была простой: жать на все кнопки, сводить с ума бот, имитируя большой наплыв пользователей. Сервер даже не чихнул, а скорость отклика бота всех устроила.
Первый блин даже не совсем комом получился. Можно, конечно было сделать лучше, но, кажется, от фронтендера такого не ожидал даже сам фронтендер.
P.S. Бот уже успел показать себя в реальных условиях, поэтому совсем скоро ожидаем продолжение уникальной танцевальной истории.
это удивительно. Но хостинг Timeweb опять не работает. )))
Здравствуйте! Нам жаль, что вы столкнулись с неудобствами, но иногда такое может случаться.
В случае возникновения каких-то проблем лучше писать в службу поддержки на почту: [email protected]; или через панель управления. Мы всегда будем рады вам помочь!