> For the complete documentation index, see [llms.txt](https://docs.rememberizer.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rememberizer.ai/ko/undefined-1/integration-options/talk-to-slack-the-sample-web-app.md).
# Slack과 대화하는 샘플 웹 앱
앱의 소스 코드는 [여기](https://github.com/skydeckai/rememberizer)에서 찾을 수 있습니다.
이 섹션에서는 단계별 지침과 전체 소스 코드를 제공하여 빠르게 자신의 애플리케이션을 만들 수 있도록 합니다.
우리는 OpenAI에서 Talk-to-Slack GPT를 만들었습니다. Talk-to-Slack 웹 앱은 매우 유사합니다.
Talk-to-Slack.com 웹 앱 by Rememberizer on Heroku
Talk to Slack GPT by Rememberizer on OpenAI
***
### 소개
이 가이드에서는 당사의 Talk-to-Slack GPT 통합과 Rememberizer.ai을 닮은 창작 어플리케이션을 만들기 위해 단계별 지침과 전체 소스 코드를 제공합니다. Slack 통합과는 다르게, 웹 앱은 웹 스크래핑, 로컬 데이터베이스 접근, 그래픽 및 애니메이션, 결제 수집 등의 추가 기능과 더 많은 제어를 제공합니다. 더불어, 프리미엄 genAI 계정이 필요 없는 누구나 이용 가능합니다.
### 개요
예시 애플리케이션인 'Talk to Slack'은 Heroku에서 호스팅되며 OpenAI의 LLM과 Rememberizer.ai를 통합하여 여러분의 Slack 경험을 향상시킵니다. 이 웹 애플리케이션은 Flask를 이용하여 구축되었으며 OAuth2 통합, Slack 데이터 액세스, 직관적인 사용자 인터페이스와 같은 기능을 제공합니다.
### 기능
* **플라스크 기반 아키텍처**: 백엔드 작업, 프론트엔드 통신, API 상호 작용이 Flask에 의해 처리됩니다.
* **OAuth2 통합**: Rememberizer의 OAuth2 플로우를 사용하여 안전한 인증 및 데이터 접근을 합니다.
* **슬랙 데이터 접근**: Rememberizer의 API를 사용하여 사용자가 연결한 슬랙 데이터를 안전하게 가져옵니다.
* **OpenAI LLM 통합**: OpenAI의 LLM 서비스로 쿼리를 처리하여 깊이 있는 응답을 합니다.
* **직관적인 사용자 인터페이스**: 현대적인 UI 디자인을 통해 쉬운 탐색 및 상호 작용을 가능하게 합니다.
* **최고의 관행**: 보안 및 사용자 체험 표준을 준수하여 원활한 통합을 지향합니다.
### 설정 및 배
#### 필수 조건
* 파이썬
* 플라스크
{% hint style="info" %}
LLM이 이 전체 애플리케이션을 다른 언어, 즉 Golang으로 다시 작성하는 것이 그리 어렵지 않았다는 점에 유의하세요. 따라서 파이썬에 국한되지 않는다는 점을 기억하세요.
{% 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. **Rememberizer 앱 구성에 콜백 URL 복사**: `https:///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') (슬랙 통합 정보 경로):**
이 경로는 사용자의 Rememberizer.ai와의 슬랙 통합에 대한 정보를 보여줍니다. 액세스 토큰을 확인하고 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 통합 웹 앱을 만들기 위한 포괄적인 가이드를 제공합니다. 여기에는 설정, 배포 및 애플리케이션 코드 개요에 대한 자세한 지침과 함께 최선의
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.rememberizer.ai/ko/undefined-1/integration-options/talk-to-slack-the-sample-web-app.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
