Skip to content

Latest commit

 

History

History
107 lines (73 loc) · 11.1 KB

README.uk.md

File metadata and controls

107 lines (73 loc) · 11.1 KB

🚀 Бот для запитань та відповідей

Вітаємо вас на платформі Q&A Community Bot та Mini App! 🌐 Готуйтеся зануритися в світ безшовної взаємодії питань та відповідей завдяки нашій динамічній парі: боту Telegram та Mini App у Telegram. Ми тут не лише для відповідей на питання; ми тут, щоб революціонізувати спільнотове взаємодію. Чому саме ця категорія, ви запитаєте? Ну, це не лише ми; конкурс 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: Ми хотіли показати, що Telegram Mini App адаптивний і може використовуватися з будь-яким бекендом, надаючи розробникам свободу вибору бекенду, який найкраще підходить для їхніх потреб. Це не обмежено NodeJS і може бути використано з будь-яким бекендом.

Готові зануритися в революцію питань і відповідей? Застебнайте ремені; це буде неймовірна подорож! 🎉

Телеграм Міні-додаток

Складається з усього 3 сторінок:

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

Цей міні-додаток надає внутрішній сервер за допомогою Nitro. Замість використання FastAPI можна робити запити до бази даних за допомогою цього сервера, але для цього потрібен SSR. На даний момент використовується статична версія міні-додатка.

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

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

З цього моменту на FastAPI створюється JWT. У кожного користувача і питання є значення "посилання", і ці випадково згенеровані дані використовуються замість 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