# Talk-to-Slack l'App Web di Esempio
Il codice sorgente dell'app può essere trovato [qui](https://github.com/skydeckai/rememberizer).
In questa sezione forniremo istruzioni passo passo e il codice sorgente completo in modo che tu possa creare rapidamente la tua applicazione.
Abbiamo creato un Talk-to-Slack GPT su OpenAI. L'app web Talk-to-Slack è molto simile.
App web Talk-to-Slack.com di Rememberizer su Heroku
Talk to Slack GPT di Rememberizer su OpenAI
***
### Introduzione
In questa guida, forniamo istruzioni passo-passo e il codice sorgente completo per aiutarti a creare la tua applicazione simile alla nostra integrazione Talk-to-Slack GPT con Rememberizer.ai. A differenza dell'integrazione Slack, un'app web offre più funzionalità e controllo, come lo scraping web, l'accesso al database locale, la grafica e l'animazione, e la raccolta dei pagamenti. Inoltre, può essere utilizzata da chiunque senza la necessità di un account genAI premium.
### Panoramica
La nostra applicazione di esempio, Talk to Slack, è ospitata su Heroku e integra LLM di OpenAI con Rememberizer.ai per migliorare la tua esperienza su Slack. L'app web è costruita utilizzando Flask e offre funzionalità come l'integrazione OAuth2, l'accesso ai dati di Slack e un'interfaccia utente intuitiva.
### Funzionalità
* **Architettura basata su Flask**: Le operazioni del backend, le comunicazioni del frontend e le interazioni API sono gestite da Flask.
* **Integrazione OAuth2**: Autorizzazione sicura e accesso ai dati con il flusso OAuth2 di Rememberizer.
* **Accesso ai dati di Slack**: Recupera i dati di Slack connessi dell'utente in modo sicuro utilizzando le API di Rememberizer.
* **Integrazione OpenAI LLM**: Elabora le query con il servizio LLM di OpenAI per risposte perspicaci.
* **Interfaccia Utente Intuitiva**: Facile navigazione e interazione con un moderno design dell'interfaccia utente.
* **Migliori pratiche**: Rispetta gli standard di sicurezza e di esperienza utente per un'integrazione senza problemi.
### Configurazione e Implementazione
#### Requisiti
* Python
* Flask
{% hint style="info" %}
Nota che non è stato molto difficile far riscrivere a un LLM l'intera applicazione in un'altra lingua, nel nostro caso Golang. Quindi tieni presente che non sei limitato a Python.
{% endhint %}
#### Configurazione dell'Ambiente
Imposta queste variabili di ambiente:
* `APP_SECRET_KEY`: Chiave segreta unica per Flask.
* `REMEMBERIZER_CLIENT_ID`: ID del client per la tua app Rememberizer.
* `REMEMBERIZER_CLIENT_SECRET`: Segreto del client per la tua app Rememberizer.
* `OPENAI_API_KEY`: La tua chiave API di OpenAI.
#### Esecuzione dell'Applicazione
1. **Avvia l'App Flask**: Esegui `flask run` nel terminale e accedi all'app su `http://localhost:5000`.
2. **Copia l'URL di callback nella configurazione della tua app Rememberizer**: `https:///auth/rememberizer/callback` esempio:`http://localhost:5000/auth/rememberizer/callback`.
#### Distribuzione nel Cloud
Si consiglia di distribuire su piattaforme come Heroku, Google Cloud Platform (GCP), Amazon Web Services (AWS) o Microsoft Azure.
**Distribuzione su Heroku**
1. **Crea un Account Heroku**: Installa l'Heroku CLI.
2. **Prepara la Tua Applicazione**: Assicurati che siano presenti un `Procfile`, `runtime.txt` e `requirements.txt`.
3. **Distribuisci**: Usa l'Heroku CLI o l'integrazione con GitHub per la distribuzione.
**Passaggi Dettagliati**
* **Collega Heroku a GitHub**: Abilita le distribuzioni automatiche dal repository GitHub per aggiornamenti senza interruzioni.
* **Distribuisci Manualmente**: Facoltativamente, utilizza la distribuzione manuale per un maggiore controllo.
**Configurazione Aggiuntiva**
* Installa l'Heroku CLI: `brew tap heroku/brew && brew install heroku` (macOS).
* Aggiungi certificati SSL: Usa certificati autofirmati per la configurazione iniziale di HTTPS.
* Configura le Variabili di Ambiente su Heroku: Usa `heroku config:set KEY=value` per le chiavi essenziali.
**Altre Piattaforme Cloud**
* **GCP**: Crea un account GCP, prepara la tua app con `app.yaml` e distribuisci usando `gcloud app deploy`.
* **AWS**: Usa Elastic Beanstalk per la distribuzione dopo aver creato un account AWS e installato l'AWS CLI.
* **Azure**: Distribuisci tramite Azure App Service dopo aver creato un account Azure e installato l'Azure CLI.
#### Sicurezza e Migliori Pratiche
Prima del deployment, verifica il tuo `requirements.txt`, adatta le configurazioni per la produzione e aggiorna gli URI di reindirizzamento OAuth.
### Note sul Codice dell'Applicazione
**@app.route('/') (Rotta Indice):**
Questa rotta rende il template index.html quando viene accesso l'URL radice (/). Funziona come la homepage della tua applicazione.
**@app.route('/auth/rememberizer') (Rotta di Autenticazione Rememberizer):**
Questa rotta avvia il processo di autenticazione OAuth2 con Rememberizer.ai. Genera un valore di stato casuale, lo memorizza nella sessione, costruisce l'URL di autorizzazione con i parametri necessari (client ID, redirect URI, scope e stato) e reindirizza l'utente alla pagina di autorizzazione di Rememberizer.ai.
**@app.route('/auth/rememberizer/callback') (Rotta di Callback Rememberizer):**
Questa rotta gestisce il callback da Rememberizer.ai dopo che l'utente ha autorizzato la tua applicazione. Estrae il codice di autorizzazione dai parametri della query, lo scambia per un token di accesso utilizzando l'endpoint token di Rememberizer.ai e memorizza il token di accesso nella sessione. Poi, reindirizza l'utente alla rotta /dashboard.
**@app.route('/dashboard') (Rotta Dashboard):**
Questa rotta mostra la pagina del dashboard all'utente. Controlla se l'utente ha un token di accesso nella sessione; in caso contrario, lo reindirizza alla rotta di autenticazione. Se l'utente è autenticato, effettua una richiesta all'endpoint account di Rememberizer.ai per recuperare le informazioni dell'account e rende il template dashboard.html con queste informazioni.
**@app.route('/slack-info') (Rotta Informazioni Integrazione Slack):**
Questa rotta mostra informazioni sull'integrazione Slack dell'utente con Rememberizer.ai. Controlla la presenza di un token di accesso e fa una richiesta all'endpoint integrazioni di Rememberizer.ai per ottenere i dati di integrazione. Poi rende il template slack\_info.html con questi dati.
**@app.route('/ask', methods=\['POST']) (Rotta Chiedi):**
Questa rotta gestisce l'invio di domande da parte dell'utente. Controlla la presenza di un token di accesso, recupera la domanda dell'utente dai dati del modulo e fa una richiesta all'endpoint di ricerca documenti di Rememberizer.ai per trovare informazioni pertinenti. Poi utilizza il modello GPT-4 di OpenAI per generare una risposta basata sulla domanda e sui risultati della ricerca. La risposta è resa nel template answer.html.
### Note aggiuntive
* **Iconografia**: Progettata con uno stile artistico dettagliato di carta piegata, che riflette l'integrazione di AI e comunicazione. La nostra icona è stata creata in Midjourney e Image2Icon.
* **Configurazione SSL**: Genera certificati auto-firmati utilizzando OpenSSL per una comunicazione sicura.
### Esplora e Innova
Incoraggiamo l'esplorazione e l'innovazione con la tua app web integrata con AI, mirando a migliorare la produttività e la collaborazione all'interno della tua piattaforma.
***
Questa documentazione rivista fornisce una guida completa per gli sviluppatori per creare la propria app web integrata con AI, simile a Talk-to-Slack. Include istruzioni dettagliate per la configurazione, il deployment e una panoramica del codice dell'applicazione, insieme alle migliori
---
# Agent Instructions: 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:
```
GET https://docs.rememberizer.ai/it/risorse-per-sviluppatori/integration-options/talk-to-slack-the-sample-web-app.md?ask=
```
The question should be specific, self-contained, and written in natural language.
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.
