🤖👨‍💻 Пишем Telegram-бота для подготовки к собеседованию на Frontend-разработчика

Представляю бесплатного Telegram-бота, разработанного для эффективной подготовки к техническому собеседованию на позицию Frontend разработчика. Бот предлагает викторины по HTML, CSS, JavaScript и React, а также рейтинговый режим для соревнования с другими пользователями. Полный код проекта можно посмотреть в моем Github-репозитории.

Описание работы Telegram-бота

В боте присутствует 4 категории вопросов: HTML, CSS, JavaScript и React.

Выбор категории вопросов в Telegram-боте для подготовки к собеседованию

Чтобы было интереснее решать вопросы, я добавил еще 🏆Рейтинговый режим, в котором отсутствует выбор категории и вам предстоит решать все имеющиеся в базе вопросы. За каждый правильный ответ вам присуждается 1 балл. В случае неправильного ответа игра прекратится, а ее результат будет записан в базу данных и сохранен в вашем профиле.

Для добавления элемента соревнования между другими пользователями бота я добавил кнопку – Таблица лидеров, после нажатия на которую будет выведено ТОП-10 игроков Рейтингового режима.

У каждого игрока есть свой 👨🏼‍💻Профиль, в котором можно увидеть статистику по решенным вопросам в 4 категориях и баллы за игру в 🏆Рейтинговом режиме.

Личный профиль каждого пользователя

👨‍💻🎨 Библиотека фронтендера

Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека фронтендера»

Используемые технологии

1. Node.js: Серверная платформа для выполнения JavaScript-кода.
2. grammY: Фреймворк для создания Telegram-ботов.
3. sqlite: Встраиваемая база данных для хранения результатов пользователей.
4. date-fns: Библиотека для форматирования дат и времени.
5. dotenv: Модуль для загрузки переменных окружения из .env файла.

Структура проекта

Рассмотрим структуру проекта, которая включает все необходимые файлы и директории.

1. index.js: Основной файл проекта, содержащий весь код логики бота, включая инициализацию, обработку команд и взаимодействие с базой данных SQLite.
2. questions/: Директория, содержащая JSON-файлы с вопросами по различным категориям (HTML, CSS, JavaScript, React).

Пример файла html_questions.json:

1. leaderboard.db: Файл базы данных SQLite, в котором хранятся данные о пользователях, их результаты и время последней игры.
2. .env: Этот файл содержит конфиденциальные данные, такие как токен API Telegram и ID администратора.

Пример файла .env:

Статья по теме

💪👨‍💻 6 сервисов для подготовки к техническим собеседованиям

Создание Telegram-бота

Создадим экземпляр бота и инициализируем его с API-ключом Telegram:

Определим начальное состояние сессии для каждого пользователя, которое взаимодействует с ботом:

Для скорости работы Telegram-бота добавим функцию для загрузки вопросов из JSON-файлов при запуске бота:

Для хранения данных о пользователях и их результатах в таблице лидеров инициализируем базу данных SQLite. Эта функция открывает (или создает) базу данных и создает таблицу leaderboard, если она еще не существует:

Добавим функции для работы с базой данных SQLite для управления профилями пользователей и их результатами в таблице лидеров.

• Функция createProfile. Эта функция создает профиль для пользователя, если его еще нет в таблице leaderboard.

• Функция updateLeaderboard. Эта функция обновляет таблицу лидеров для пользователя, добавляя или обновляя его запись в зависимости от результатов.

• Функция getLeaderboard. Эта функция возвращает топ 10 пользователей из таблицы лидеров, отсортированных по убыванию очков.

• Функция getTotalUsers. Эта функция возвращает общее количество пользователей в таблице лидеров.

Добавим функции обработки для команд Telegram-бота /start, /profile, /admin.

• Команда /start: Эта команда инициализирует бота и приветствует пользователя, предлагая начать использование бота.

• Команда /profile: Эта команда отображает профиль пользователя, включая его результаты в различных категориях.

• Команда /admin: Эта команда предназначена для администрирования и доступна только пользователю с ID администратора. Она отображает общее количество пользователей.

Осталось добавить функционал бота, связанный с обработкой сообщений пользователей и викторинами.

• Основная функция обработки сообщений. В зависимости от текста сообщения, бот вызывает соответствующую функцию для начала викторины по выбранной категории, запуска рейтингового режима или отображения таблицы лидеров.

• Функция handleQuizAnswer. Эта функция обрабатывает ответы пользователя на вопросы викторины.

• Функция startQuiz. Эта функция начинает викторину по указанной категории.

💼 Вакансии для фронтенд-разработчиков

Вакансии по фронтенду, джаваскрипт, React, Angular, Vue @jsdevjob

Заключение

В этой статье я рассмотрел основные составляющие моего Telegram-бота, необходимые для его работы. Полный код проекта можно посмотреть в моем Github репозитории. Опробовать бота можно по ссылке. У меня есть еще пара идей для улучшения его функциональности в будущем, планирую добавить блок вопросов с задачами по JavaScript и добавить больше статистик в профилях пользователей.

Telegram бот для подготовки к собеседованию на Frontend разработчика