Skip to content

Latest commit

 

History

History
110 lines (73 loc) · 11.2 KB

README.ru.md

File metadata and controls

110 lines (73 loc) · 11.2 KB
Raw

🚀 Бот Q&A

Добро пожаловать на площадку Q&A Community Bot and Mini App! 🌐 Приготовьтесь к погружению в захватывающий мир вопросов и ответов благодаря нашей динамичной паре: Telegram боту и Telegram Mini App. Мы здесь не только для ответов на вопросы; мы здесь, чтобы революционизировать взаимодействие в сообществе. Почему эта категория, вы спросите? Ну, это не только мы; конкурс Telegram Mini App буквально кричал: "Пойдем в сторону управления сообществом!" И вот мы здесь, даем владельцам каналов и случайным пользователям силу задавать и отвечать на вопросы, сохраняя свои секретные личности в целости и сохранности.

✨ Множество Особенностей

  • Приватность впереди: Игра в прятки, кто заинтересован? Обе стороны могут сохранять свою личность в тайне, но, эй, отвечающая сторона также может раскрыть свою личность.
  • Волшебство входящих сообщений: Получайте вопросы, на них отвечайте—просто и понятно!
  • Приключения в исходящих сообщениях: Отправляйте вопросы, получайте ответы и наслаждайтесь радостью общения.
  • Профили великолепия: Заглядывайте в профили других пользователей и раскройте свое любопытство.
  • Управление как босс: Удаляйте или редактируйте полученные вопросы, как настоящий профессионал. Это ваш мир; мы просто живем в нем.
  • Уведомления по всей стране: Получайте уведомления, когда приходят вопросы или когда на ваши вопросы отвечают гении.
  • Элегантность темизации: Мы всегда в тренде. Mini App такой же, как и тема Telegram, делая это плавным путешествием.
  • Схватка Бота и Mini App: Почему ограничивать себя? Используйте бот или Mini App—это ваш выбор.
  • Карнавал сообщества: Задавайте вопросы, отвечайте, повторяйте. Участвуйте в танце вопросов и ответов, делая управление сообществом легким бризом, особенно для тайных админов каналов.

🧩 Великая Головоломка

Этот спектакль — это не просто Mini App — это симфония приложений! Представьте себе: Telegram Mini App, веб-чудо в VueJS и Nuxt, рядом с могучим FastAPI в бэкэнде на Python. И не забывайте про Telegram бота, тоже на Python, и отдыхающего в бэкэнде. Почему? Разберем подробнее:

  • Изоляция Mini App: Мы хотим, чтобы все присоединились к вечеринке, даже те, кто меньше опытен в мире разработки. Поэтому мы изолировали Mini App, сделав его простым в понимании и легким в интеграции в другие проекты.

  • Магия Модульности: Проект не переплетен как клубок — это тщательно созданное произведение искусства, благодаря модульной организации и гибкости.

  • Победа Универсальности: Наш Telegram Mini App — это настоящий хамелеон, доказывая, что он может танцевать с любым бэкендом. Здесь нет монополии NodeJS; выбирайте бэкенд, который соответствует вашему настроению.

Готовы окунуться в революцию вопросов и ответов? Пристегнитесь; это будет невероятное путешествие! 🎉

Телеграм Мини-приложение

Оно включает в себя всего 3 страницы:

  • index.vue: Начальная страница, где отображаются вопросы, заданные пользователю. Пользователи могут отвечать на эти вопросы.
  • outbox.vue: Показывает вопросы, отправленные пользователем.
  • users/[id].vue: Страница, отображающая профиль другого пользователя. Пользователи также могут задавать вопросы на этой странице.

Это мини-приложение предоставляет внутренний сервер с Nitro. Вместо использования FastAPI, запросы к базе данных могут быть выполнены с использованием этого сервера, но это требует SSR. В настоящее время используется статически собранная версия мини-приложения.

Аутентификация и авторизация

Когда пользователи запускают мини-приложение в Телеграме, их информация передается мини-приложению, если они принимают условия. Данные, предоставленные Телеграмом, подтверждаются секретным ключом бота и хешем целостности предоставленных данных, что подтверждает, что они действительно предоставлены Телеграмом. Проверьте файл backend/api/utils/web_app_data_validator.py для получения дополнительной информации.

С этого момента создается JWT на FastAPI. Каждый пользователь и вопрос имеют значение "link", и эти случайно сгенерированные данные используются вместо ID. Полезная нагрузка JWT включает значение ссылки пользователя.

Основная зависимость мини-приложения

  • vue-tg: Замечательная и очень простая библиотека-обертка для элементов, используемых в мини-приложении. Посмотрите здесь, чтобы узнать больше о том, как её использовать. Я собирался написать свою собственную библиотеку-обертку, но нашел эту и она была идеальной для моих нужд, и нам не нужно изобретать велосипед. Вместо этого мы можем сосредоточиться на примере проекта, который поможет разработчикам начать работу с мини-приложением Телеграма.

Пример использования

Чтобы показать основную кнопку и кнопку "назад", давайте рассмотрим следующий код из frontend/components/QAForm.vue. Как только Vue рендерит страницу, кнопки автоматически отображаются. Свойство progress используется для отображения индикатора загрузки на основной кнопке. Свойство disabled используется для отключения основной кнопки. Свойство text используется для установки текста основной кнопки. Событие @click используется для передачи события родительскому компоненту. Событие @click кнопки "назад" используется для вызова метода onCancel для закрытия всплывающей формы.

<MainButton 
  :progress="progressing"
  :disabled="disabled"
  :text="mainButtonText"
  @click="$emit('submitQAForm', text)" />

<BackButton @click="onCancel" />

Цветовая схема и переменные вьюпорта

Как и компоненты, предоставленные Телеграмом, мы также можем использовать цветовую схему, предоставленную Телеграмом. В то время как цвета темы доступны в начальных данных, они также будут доступны как CSS-переменные, и вы можете найти их список ниже:

html {
  --tg-theme-button-text-color: #ffffff;
  --tg-theme-link-color: #f83b4c;
  --tg-theme-button-color: #f83b4c;
  --tg-color-scheme: dark;
  --tg-theme-bg-color: #3e2222;
  --tg-theme-secondary-bg-color: #271616;
  --tg-theme-text-color: #ffffff;
  --tg-theme-hint-color: #b1c3d5;
  --tg-viewport-height: 100vh;
  --tg-viewport-stable-height: 100vh;
}

Вы можете использовать это в своем CSS так:

body {
  background-color: var(--tg-theme-bg-color);
}

Поскольку мы используем TailwindCSS в этом проекте, мы можем использовать цвета темы как встроенные стили, например, так:

<div class="bg-[var(--tg-theme-secondary-bg-color)]"></div>

Обратите внимание, что мы не ограничены встроенными стилями. Посмотрите документацию TailwindCSS для получения дополнительной информации.

Начало работы

  1. Дублируйте и отредактируйте файлы окружения .env.example и .db.env.example, переименовывая их в .env и .db.env соответственно.

  2. Отредактируйте nuxt.config.ts и измените runtimeConfig.public.botUsername на имя вашего бота.

Для запуска:

docker-compose -f docker-compose.prod.yml up --build -d