Skip to content

Latest commit

 

History

History
103 lines (71 loc) · 8.73 KB

README.jp.md

File metadata and controls

103 lines (71 loc) · 8.73 KB

🚀 Q&A ボット

私たちのQ&Aコミュニティボットとミニアプリへようこそ！ 🌐 テレグラムボットとテレグラムミニアプリのダイナミックなデュオのおかげで、シームレスな質疑応答の相互作用の世界に飛び込む準備をしてください。 私たちは質問に答えることだけでなく、コミュニティエンゲージメントを革新するためにここにいます。 なぜこのカテゴリを選んだのか、尋ねるでしょうか？ まあ、これは私だけでなく、テレグラムミニアプリコンテストも実質的に「コミュニティ管理に飛び込んで！」と叫んでいたからです。 それでは、ここにいます。チャネルの所有者だけでなく、通常のユーザーも彼らのアイデンティティを隠しながら質問を受け取り、質問できる機会を提供します。

✨ 無限の機能

  • プライバシー優先：双方がアイデンティティを隠すことができ、回答する側はアイデンティティを公開するかどうか選択できます。
  • 受信トレイの魔法：ユーザーは他のユーザーからの質問を受け取り、それに答えることができます。
  • 送信トレイの冒険：ユーザーは他のユーザーに質問を送信し、回答を見ることができます。
  • プロフィール：ユーザーは他のユーザーのプロフィールを見ることができます。
  • 質問の管理：ユーザーは受け取った質問を削除したり、回答を編集したりすることができます。
  • 通知：ユーザーは質問を受け取ったときや質問に回答されたときに通知を受け取ることができます。
  • 統合されたテーマのサポート：ミニアプリはテレグラムアプリと同じテーマを使用し、シームレスなエクスペリエンスを提供します。
  • ボットUIおよびミニアプリUI：ユーザーはボットまたはミニアプリを使用してプラットフォームと対話できます。
  • コミュニティ参加：ユーザーはお互いに質問をしたり、他のユーザーの質問に答えたりできます。 特にチャネル管理者にとっては、アイデンティティを隠しながらコミュニティと簡単にやり取りできる機能が提供されています。

それは複数のアプリケーションで構成されています。 たとえば、テレグラムミニアプリは実質的にはフロントエンドフォルダーのウェブアプリケーションです。 ミニアプリはVueJSとNuxtで書かれています。 バックエンドフォルダーのFastAPIアプリケーション（Pythonで記述）で駆動されています。 また、バックエンドフォルダーに位置するPythonで書かれたテレグラムボットもミニアプリとは独立して動作します。 これらの決定は次の目標を考慮して行われました：

  • ミニアプリをアクセシビリティのために分離することの目的：ミニアプリをできるだけ分離して、少ない経験のある開発者でも理解しやすく再利用できるようにすることです。 これにより、他のプロジェクトにシームレスに統合できます。

  • プロジェクトのモジュラリティを向上させる目的：プロジェクトを管理しやすくするためにプロジェクトをより小さなモジュールに分解することで、より良い組織と柔軟性を実現します。

  • テレグラムミニアプリの多様性を実証する目的：テレグラムミニアプリが適応力があり、任意のバックエンドで使用できることを見せることで、開発者には自分のニーズに最適な

テレグラム ミニアプリ

合計3ページから構成されています：

  • index.vue：ユーザーに尋ねられる質問を表示する入り口ページ。ユーザーはこれらの質問に回答できます。
  • outbox.vue：ユーザーが送信した質問を表示します。
  • users/[id].vue：他のユーザーのプロファイルを表示するページ。ユーザーはこのページで質問もできます。

このミニアプリはNitroを使用した内部サーバーを提供しています。FastAPIの代わりに、このサーバーを使用してデータベースへのクエリを行うことができますが、SSRが必要です。現在、ミニアプリの静的にビルドされたバージョンが使用されています。

認証と承認

ユーザーがTelegramでミニアプリを起動すると、ユーザー情報がミニアプリと共有されます。ユーザーはこれらの条件を受け入れれば、Telegramが提供するデータはボットの秘密鍵と提供されたデータの整合性のハッシュとともに確認され、確かにTelegramから提供されたものであることが確認されます。詳細については、ファイルbackend/api/utils/web_app_data_validator.pyを参照してください。

この時点から、FastAPIでJWTが作成されます。各ユーザーと質問には「リンク」と呼ばれる値があり、これらのランダムに生成されたデータがIDの代わりに使用されます。JWTのペイロードにはユーザーのリンク値が含まれています。

メインミニアプリの依存関係

  • vue-tg：ミニアプリで使用される要素のための素晴らしく非常にシンプルなラッパーライブラリ。 こちらをチェックして、その使用方法について詳しく学びましょう。自分自身のラッパーライブラリを書くつもりでしたが、これを見つけてそれが私のニーズにぴったりだったので、車輪を再発明する必要はありませんでした。代わりに、Telegramミニアプリを始めるのに開発者が役立つサンプルプロジェクトに焦点を当てることができます。

使用例

メインボタンとバックボタンを表示するには、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" />

テーマの色とビューポート変数

Telegramが提供するコンポーネントを使用しているように、Telegramが提供するテーマの色も使用できます。テーマの色は初期データで利用可能ですが、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