# Talk-to-SlackサンプルWebアプリ

アプリのソースコードは[こちら](https://github.com/skydeckai/rememberizer)にあります。

このセクションでは、ステップバイステップの指示と完全なソースコードを提供し、あなたが自分のアプリケーションを迅速に作成できるようにします。

私たちはOpenAIでTalk-to-Slack GPTを作成しました。Talk-to-Slackウェブアプリは非常に似ています。

<div align="left"><figure><img src="https://rememberizer-docs-assets.s3.amazonaws.com/talk-to-slack_web_app.png" alt="RememberizerによるHeroku上のTalk to Slack.comウェブアプリ"><figcaption><p>RememberizerによるHeroku上のTalk-to-Slack.comウェブアプリ</p></figcaption></figure></div>

<div align="left"><figure><img src="https://rememberizer-docs-assets.s3.amazonaws.com/talk-to-slack_web_app.png" alt="OpenAIによるRememberizerのTalk to Slack GPT"><figcaption><p>OpenAIによるRememberizerのTalk to Slack GPT</p></figcaption></figure></div>

***

### 総論

このガイドでは、ステップバイステップの手順と全ソースコードを提供し、あなたが私たちのTalk-to-Slack GPT連携と同様のアプリケーションを独自に作成するのを支援します。Rememberizer.aiとの連携とは異なり、ウェブアプリはウェブスクレイピング、ローカルデータベースへのアクセス、グラフィックとアニメーション、支払いの収集など、より多くの機能と制御を提供します。プラス、プレミアムgenAIアカウントがなくても誰でも使用できます。

### 概要

私たちの示例アプリケーションである「Talk to Slack」はHeroku上にホストされ、OpenAIのLLMとRememberizer.aiを統合してあなたのSlack体験を向上させます。このウェブアプリはFlaskを用いて構築されており、OAuth2の統合、Slackデータのアクセス、直感的なユーザーインターフェースなどの機能を提供しています。

### 機能

* **Flaskベースのアーキテクチャ**: バックエンドの操作、フロントエンドの通信、APIとの接続はFlaskによって処理されます。
* **OAuth2統合**: RememberizerのOAuth2フローによる安全な認証とデータアクセス。
* **Slackデータアクセス**: RememberizerのAPIを使用して、ユーザーが接続したSlackのデータを安全に取得します。
* **OpenAI LLM統合**: OpenAIのLLMサービスを用いてクエリを処理し、洞察に満ちたレスポンスを得られます。
* **直感的なユーザーインターフェイス**: モダンなUIデザインによる簡単なナビゲーションと対話。
* **ベストプラクティス**: シームレスな統合のためのセキュリティとユーザーエクスペリエンスの標準に準拠しています。

### セットアップとデプロイメント

#### 前提条件

* Python
* Flask

{% hint style="info" %}
このアプリケーション全体を別の言語、私たちの場合はGolangで書き換えるのはそれほど難しくありませんでした。したがって、Pythonに限定されているわけではないことを念頭に置いてください。
{% endhint %}

#### 環境設定

以下の環境変数を設定します：

* `APP_SECRET_KEY`：Flask用のユニークな秘密鍵。
* `REMEMBERIZER_CLIENT_ID`：あなたのRememberizerアプリのクライアントID。
* `REMEMBERIZER_CLIENT_SECRET`：あなたのRememberizerアプリのクライアントシークレット。
* `OPENAI_API_KEY`：あなたのOpenAI APIキー。

#### アプリケーションの実行

1. **Flaskアプリを起動**: ターミナルで `flask run` を実行し、アプリに `http://localhost:5000` でアクセスします。
2. **コールバックURLをRememberizerアプリの設定にコピー**: `https://<YOURHOST>/auth/rememberizer/callback` 例: `http://localhost:5000/auth/rememberizer/callback`。

#### クラウドへのデプロイ

Heroku、Google Cloud Platform (GCP)、Amazon Web Services (AWS)、またはMicrosoft Azureなどのプラットフォームへのデプロイを推奨します。

**Herokuデプロイ**

1. **Herokuアカウントを作成**: Heroku CLIをインストールします。
2. **アプリケーションを準備**: `Procfile`、`runtime.txt`、および`requirements.txt`が存在することを確認します。
3. **デプロイ**: Heroku CLIまたはGitHub統合を使用してデプロイします。

**詳細な手順**

* **HerokuをGitHubに接続**: シームレスな更新のためにGitHubリポジトリからの自動デプロイを有効にします。
* **手動でデプロイ**: より多くの制御が必要な場合は、手動デプロイを使用します。

**追加設定**

* Heroku CLIをインストール: `brew tap heroku/brew && brew install heroku`（macOS）。
* SSL証明書を追加: 初期HTTPS設定のために自己署名証明書を使用します。
* Herokuの環境変数を設定: 重要なキーのために`heroku config:set KEY=value`を使用します。

**他のクラウドプラットフォーム**

* **GCP**: GCPアカウントを設定し、`app.yaml`でアプリを準備し、`gcloud app deploy`を使用してデプロイします。
* **AWS**: AWSアカウントとAWS CLIを設定した後、Elastic Beanstalkを使用してデプロイします。
* **Azure**: Azureアカウントを作成し、Azure CLIをインストールした後、Azure App Serviceを通じてデプロイします。

#### セキュリティとベストプラクティス

デプロイ前に、`requirements.txt`を確認し、プロダクション用に設定を調整し、OAuthリダイレクトURIを更新してください。

### アプリケーションコードノート

**@app.route('/') (インデックスルート):**

このルートは、ルートURL（/）にアクセスされたときにindex.htmlテンプレートをレンダリングします。アプリケーションのホームページとして機能します。

**@app.route('/auth/rememberizer') (Rememberizer認証ルート):**

このルートは、Rememberizer.aiとのOAuth2認証プロセスを開始します。ランダムな状態値を生成し、それをセッションに保存し、必要なパラメータ（クライアントID、リダイレクトURI、スコープ、および状態）を使用して認証URLを構築し、ユーザーをRememberizer.aiの認証ページにリダイレクトします。

**@app.route('/auth/rememberizer/callback') (Rememberizerコールバックルート):**

このルートは、ユーザーがアプリケーションを認証した後のRememberizer.aiからのコールバックを処理します。クエリパラメータから認証コードを抽出し、Rememberizer.aiのトークンエンドポイントを使用してアクセス トークンと交換し、アクセス トークンをセッションに保存します。その後、ユーザーを/dashboardルートにリダイレクトします。

**@app.route('/dashboard') (ダッシュボードルート):**

このルートは、ユーザーにダッシュボードページを表示します。セッションにアクセス トークンがあるかどうかを確認し、ない場合は認証ルートにリダイレクトします。ユーザーが認証されている場合、Rememberizer.aiのアカウントエンドポイントにリクエストを行い、アカウント情報を取得し、この情報でdashboard.htmlテンプレートをレンダリングします。

**@app.route('/slack-info') (Slack統合情報ルート):**

このルートは、ユーザーのRememberizer.aiとのSlack統合に関する情報を表示します。アクセス トークンを確認し、Rememberizer.aiの統合エンドポイントにリクエストを行い、統合データを取得します。その後、このデータでslack\_info.htmlテンプレートをレンダリングします。

**@app.route('/ask', methods=\['POST']) (質問ルート):**

このルートは、ユーザーからの質問の送信を処理します。アクセス トークンを確認し、フォームデータからユーザーの質問を取得し、Rememberizer.aiのドキュメント検索エンドポイントにリクエストを行い、関連情報を見つけます。その後、OpenAIのGPT-4モデルを使用して、質問と検索結果に基づいて回答を生成します。回答はanswer.htmlテンプレートにレンダリングされます。

### 追加の注記

* **アイコン制作**: AIとコミュニケーションの統合を反映した、詳細な折り紙アートスタイルでデザインされました。私たちのアイコンはMidjourneyとImage2Iconで作成されました。
* **SSL設定**: OpenSSLを使用して自己署名証明書を生成し、安全な通信を行います。

### 探索と革新

自分自身のAI統合ウェブアプリを使って探索と革新を奨励し、プラットフォーム内での生産性とコラボレーションを向上させることを目指します。

***

この改訂されたドキュメントは、開発者がTalk-to-Slackに似た自分自身のAI統合ウェブアプリを作成するための包括的なガイドを提供します。セットアップ、デプロイメント、およびアプリケーションコードの概要に関する詳細な指示が含まれており、ベスト