Введение в проект 0:00 Автор готовился к собеседованию и решил создать базу знаний по фронтенду. Идея создать бота-помощника для автоматизации повторения вопросов. Бот будет задавать вопросы по HTML, CSS, JavaScript и React.
Преимущества бота 0:57 Возможность добавлять новые вопросы и повторять их. Бот поможет подготовиться к собеседованиям. Автор канала "Помосков GS" расскажет, как создать бота на Node.js.
Основы работы Telegram-ботов 1:52 Пользователь отправляет сообщение боту, которое обрабатывается сервером Telegram. Бот может отправлять сообщения, картинки, стикеры и видео. Данные будут храниться на сервере в формате JSON.
Создание бота в Telegram 2:57 Создание бота через бота-фадера и получение токена. Важно хранить токен безопасно. Переход к развертыванию проекта на Node.js и npm.
Настройка проекта 3:54 Установка Node.js и npm. Создание папки проекта и инициализация с помощью npm init. Подключение необходимых библиотек для работы с Telegram.
Выбор библиотеки 5:36 Обзор популярных библиотек для работы с Telegram: Not Telegram Bot API, Telegraph, Grammy. Выбор библиотеки Grammy для лаконичности и краткости. Установка библиотек с помощью npm install.
Структура проекта 6:50 Создание файла package.json и папки node_modules. Импорт класса Bot из библиотеки Grammy. Начало написания кода для бота.
Создание бота 7:31 Создаем бота на основе импортированного класса, передавая токен. Запускаем бота с помощью метода start. Бот не работает без обработки сообщений.
Хранение токена 8:28 Создаем файл .env в корне проекта для хранения токена. Импортируем библиотеку dotenv и используем токен в коде. Создаем папку .gitignore для файла .env.
Настройка реакций 9:21 Устанавливаем слушатель событий для команд. Реагируем на команды "старт", "help" и другие. Используем метод reply для отправки сообщений.
Автоматическое обновление 12:16 Настраиваем автоматическое обновление с помощью npm. Запускаем бота с помощью команды npm start. Реагируем на события и сообщения.
Обработка ошибок 14:21 Добавляем обработку ошибок до запуска бота. Импортируем необходимые классы и обрабатываем ошибки. Выводим информацию об ошибках в консоль.
Создание клавиатуры 16:03 Создаем кастомную клавиатуру для команды "старт". Добавляем кнопки с темами вопросов. Отправляем клавиатуру пользователю с сообщением.
Обработка сообщений 18:00 Реагируем на несколько типов сообщений с помощью массива. Получаем тему сообщения из контекста. Проверяем работу обработчика сообщений.
Inline Keyboard 19:16 Создаем inline клавиатуру для отображения под сообщениями. Добавляем inline keyboard в импорт. Создаем и используем inline keyboard в коде.
Создание онлайн клавиатуры 19:41 Создаем клавиатуру с помощью метода text. Передаем два аргумента: лейбл кнопки и данные. Отправляем онлайн клавиатуру вместе с сообщением.
Обработка событий 20:39 Добавляем кнопку "отменить" с лейблом "cancel". Реагируем на события с помощью метода on. Проверяем данные колбека и отправляем сообщение при нажатии "cancel".
Завершение загрузки 21:19 Завершаем загрузку, когда нажимаем кнопку. Отправляем сообщение "отменено" при нажатии "cancel". Проверяем, что плашка загрузки исчезает.
Передача данных в колбек 22:43 Передаем данные в колбек через JSON. Превращаем объекты в строки с помощью JSON.stringify. Получаем доступ к данным колбека и обрабатываем их.
Обработка вопросов 25:32 Формируем вопросы по темам: с вариантом ответа и открытые. Вопросы хранятся в формате JSON. Создаем утилитарную функцию для выбора рандомного вопроса.
Выбор рандомного вопроса 27:40 Импортируем вопросы из JSON. Создаем функцию для выбора рандомного вопроса по теме. Используем метод Math.random для генерации случайного индекса.
Альтернативный подход 30:09 Используем библиотеку Random.js для рандомизации. Устанавливаем библиотеку и импортируем класс Random. Применяем метод Math.floor для округления в меньшую сторону.
Генерация случайного индекса 31:33 Использование метода integer для генерации числа. Создание инстанса Random и вызов метода integer. Рекомендация ознакомиться с библиотекой Random.
Поддержка и благодарность 32:46 Призыв к поддержке через комментарии и лайки. Важность обратной связи для продвижения видео.
Получение и отправка случайного вопроса 33:36 Вызов функции для получения случайного вопроса. Сохранение вопроса в переменную и отправка пользователю.
Различие вопросов с вариантами ответа и без 34:21 Различие вопросов с вариантами ответа и без. Создание кнопок для вопросов с вариантами ответа.
Создание онлайн клавиатуры 35:21 Создание онлайн клавиатуры для вопросов с вариантами ответа. Использование метода map для создания кнопок.
Обработка вопросов без вариантов ответа 38:46 Обработка вопросов без вариантов ответа. Отправка ответа на открытый вопрос.
Функция для получения правильного ответа 39:44 Создание функции для получения правильного ответа. Импорт и экспорт функции в файл utils.js.
Поиск вопроса по ID 40:32 Поиск вопроса по ID в массиве вопросов. Возвращение правильного ответа или вопроса.
Дополнительные параметры для отправки ответа 42:36 Передача дополнительных параметров в сеть реплай. Использование параметров для отображения ссылок на дополнительные материалы.
Обработка вопросов с вариантами ответа 43:09 Добавление опций для корректного отображения ссылок и разметки HTML. Обработка вопросов с вариантами ответа: отсечение неверных ответов и завершение функции при корректном ответе. Использование функции getCorrectAnswer для проверки ответа пользователя.
Обработка неверных ответов 44:05 Отсечение неверных ответов при наличии вариантов. Использование метода split для разделения строки на массив. Ответ пользователю с правильным ответом и завершением функции.
Проверка работы обработчика 45:39 Проверка работы обработчика колбекри. Исправление ошибки при передаче темы вопроса. Проверка работы с разными вариантами ответов.
Добавление случайного вопроса 47:54 Добавление кнопки "случайный вопрос" и доработка обработчика. Переопределение темы вопроса при выборе "случайного вопроса". Возвращение объекта с темой и вопросом.
Тестирование случайного вопроса 51:23 Проверка работы случайного вопроса и его темы. Тестирование вопросов с вариантами ответа. Успешное получение и обработка случайного вопроса.
Размещение бота на удаленном сервере 52:21 Размещение бота на удаленном сервере для стабильной работы. Заливка проекта на GitHub и подготовка к клонированию на сервер. Создание файла .gitignore для исключения ненужных файлов.
Создание репозитория на GitHub 53:21 Открываем GitHub, создаем новый репозиторий с названием "интервью бот". Публикуем репозиторий, добавляем связь с локальным репозиторием. Заливаем данные с локального репозитория в удаленный с помощью команды "git push origin main".
Настройка сервера на Selectel 54:10 Переходим на сервер Selectel, регистрируемся и создаем сервер. Выбираем регион, источник образа и конфигурацию системы. Устанавливаем сетевые диски и настраиваем пароль для root-пользователя.
Настройка сервера для запуска бота 56:35 Переходим в консоль сервера, обновляем пакеты и устанавливаем Git. Клонируем репозиторий с GitHub и проверяем его содержимое. Устанавливаем Node.js и npm, обновляем версии пакетов.
Запуск бота на сервере 58:58 Перезагружаем сервер и проверяем версии npm и Node.js. Создаем файл .env с переменной окружения для бота. Запускаем бота с помощью менеджера процессов pm2, проверяем его работу.
Тестирование бота 1:01:06 Тестируем бота, проверяем корректность работы приветствия и вопросов. Проверяем случайный вопрос и завершаем работу. Напоминаем о важности поддержки и оставляем ссылки на телеграм-канал и интенсив по JavaScript.
