Creare un client Django frontend per un'app Dialogflow

1. Prima di iniziare

In questo codelab, imparerai a creare un client Django frontend per creare un'esperienza conversazionale per un'app Dialogflow. Nello specifico, svolgerai le seguenti attività:

  • Scarica, configura ed esegui il client frontend Django.
  • Configura l'endpoint detectIntent di Dialogflow da chiamare dal client frontend Django.
  • Esegui il deployment dell'app su Google Cloud in App Engine.
  • Verifica se gli inviti di Calendar vengono configurati in base alla richiesta dell'utente.

Prerequisiti

Prima di procedere, devi completare i seguenti codelab:

  1. Creare un pianificatore di appuntamenti con Dialogflow
  2. Informazioni sulle entità in Dialogflow
  3. Comprendere l'evasione integrando Dialogflow con Calendar

Obiettivi didattici

  • Come configurare ed eseguire un client frontend Django per Dialogflow
  • Come eseguire il deployment del client frontend Django su Google Cloud in App Engine
  • Come testare un'app Dialogflow da un frontend personalizzato

Cosa creerai

  • Configurerai ed eseguirai un client frontend Django per Dialogflow.
  • Esegui il deployment del client frontend Django su Google Cloud in App Engine.
  • Testerai un'app Dialogflow dal frontend personalizzato.

Che cosa ti serve

  • Una conoscenza di base di Python
  • Una conoscenza di base di Dialogflow

2. Panoramica dell'architettura

Utilizzerai l'esperienza conversazionale dello strumento di pianificazione degli appuntamenti che hai creato in precedenza e creerai un frontend personalizzato per l'app. Creerai il frontend con Django, lo eseguirai e lo testerai localmente e lo implementerai in App Engine.

L'utente invierà una richiesta di appuntamento tramite il frontend, che chiamerà l'API Dialogflow detectIntent per fissare un appuntamento per la data e l'ora richieste. Il fulfillment di Dialogflow invierà quindi una richiesta a Calendar per impostare l'appuntamento corrispondente e restituirà una conferma all'utente tramite Dialogflow.

84515171be610d4.png

Il risultato finale sarà simile a questo:

7146cd729c50f7c1.png

3. Scaricare ed eseguire l'app frontend

  1. Clona il repository sulla tua macchina locale digitando questo comando nel terminale locale del computer:
git clone https://github.com/priyankavergadia/Django-Dialogflow-Appointment-Scheduler.git
  1. Passa alla directory che contiene il codice. In alternativa, puoi scaricare il campione come file ZIP ed estrarlo.
cd Django-Dialogflow-Appointment-Scheduler

4. Configura l'ambiente locale

Una volta eseguito il deployment, l'app utilizza il proxy Cloud SQL integrato nell'ambiente standard App Engine per comunicare con l'istanza Cloud SQL. Tuttavia, per testare l'app localmente, devi installare e utilizzare una copia locale del proxy Cloud SQL nel tuo ambiente di sviluppo. Per saperne di più, consulta Informazioni sul proxy Cloud SQL.

Per eseguire attività di amministrazione di base sull'istanza Cloud SQL, puoi utilizzare il client Cloud SQL per MySQL.

Installa il proxy Cloud SQL

Scarica e installa il proxy Cloud SQL. Il proxy Cloud SQL viene utilizzato per connettersi all'istanza Cloud SQL durante l'esecuzione locale.

Scarica il proxy.

curl -o cloud_sql_proxy https://dl.google.com/cloudsql/cloud_sql_proxy.darwin.amd64

Rendi eseguibile il proxy.

chmod +x cloud_sql_proxy

Crea un'istanza Cloud SQL

  1. Crea un'istanza Cloud SQL per l'istanza MySQL di seconda generazione Assegna all'istanza il nome "polls-instance" o simile. Potrebbero essere necessari alcuni minuti prima che l'istanza sia pronta. Una volta pronto, dovrebbe essere visibile nell'elenco delle istanze.
  2. Utilizza lo strumento gcloud per eseguire il seguente comando, dove [YOUR_INSTANCE_NAME] rappresenta il nome della tua istanza. Prendi nota del valore mostrato per il nome della connessione dell'istanza per il passaggio successivo, che viene mostrato nel formato [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME].
gcloud sql instances describe [YOUR_INSTANCE_NAME]

In alternativa, puoi fare clic sull'istanza per visualizzare il Nome connessione istanza.

c11e94464bf4fcf8.png

Inizializza l'istanza Cloud SQL

Avvia il proxy Cloud SQL utilizzando il nome della connessione all'istanza del passaggio precedente. Sostituisci [YOUR_INSTANCE_CONNECTION_NAME] con il valore che hai registrato nel passaggio precedente. In questo modo viene stabilita una connessione dal computer locale all'istanza a scopo di test locale. Mantieni in esecuzione il proxy Cloud SQL mentre testi l'app in locale.

./cloud_sql_proxy -instances="[YOUR_INSTANCE_CONNECTION_NAME]"=tcp:3306

Poi, crea un nuovo utente e un nuovo database Cloud SQL.

  1. Crea un nuovo database utilizzando Google Cloud Console per l'istanza Cloud SQL denominata polls-instance. Ad esempio, puoi inserire "sondaggi" come nome. a3707ec9bc38d412.png
  2. Crea un nuovo account utente utilizzando Cloud Console per l'istanza Cloud SQL denominata polls-instance. f4d098fca49cccff.png

Configurare le impostazioni del database

  1. Apri mysite/settings.py per la modifica.
  2. In due punti, sostituisci [YOUR-USERNAME] e [YOUR-PASSWORD] con il nome utente e la password del database che hai creato nella sezione precedente. In questo modo viene configurata la connessione al database per il deployment di App Engine e i test locali.
  3. Nella riga ‘HOST': ‘cloudsql/ [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME],' sostituisci [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME] con il valore che hai registrato nella sezione precedente.
  4. Esegui questo comando e copia il valore del nome della connessione dell'istanza restituito per il passaggio successivo.
gcloud sql instances describe [YOUR_INSTANCE_NAME]
  1. Sostituisci [YOUR-CONNECTION-NAME] con il valore che hai registrato nella sezione precedente.
  2. Sostituisci [YOUR-DATABASE] con il nome che hai scelto nella sezione precedente.
# [START db_setup]
if os.getenv('GAE_APPLICATION', None):
    # Running on production App Engine, so connect to Google Cloud SQL using
    # the unix socket at /cloudsql/<your-cloudsql-connection string>
    DATABASES = {
        'default': {
            'ENGINE': 'django.db.backends.mysql',
            'HOST': '/cloudsql/[PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME]',
            'USER': '[YOUR-USERNAME]',
            'PASSWORD': '[YOUR-PASSWORD]',
            'NAME': '[YOUR-DATABASE]',
        }
    }
else:
    # Running locally so connect to either a local MySQL instance or connect to
    # Cloud SQL via the proxy. To start the proxy via command line:
    #     $ cloud_sql_proxy -instances=[INSTANCE_CONNECTION_NAME]=tcp:3306
    # See https://cloud.google.com/sql/docs/mysql-connect-proxy
    DATABASES = {
        'default': {
            'ENGINE': 'django.db.backends.mysql',
            'HOST': '127.0.0.1',
            'PORT': '3306',
            'NAME': '[YOUR-DATABASE]',
            'USER': '[YOUR-USERNAME]',
            'PASSWORD': '[YOUR-PASSWORD]'
        }
    }
# [END db_setup]
  1. Chiudi e salva settings.py.

5. Configurazione dell'account di servizio

  1. Nella console di Dialogflow, fai clic su e8a0a7d752849e01.png. Nella scheda Generale accanto a ID progetto, fai clic su Google Cloud a9c6ff6374afe489.png.
  2. Fai clic su Menu di navigazione ☰ > API e servizi > Credenziali.
  3. Fai clic su Crea credenziali > Service account. 86f51af0e7886fdd.png
  4. In Dettagli service account, inserisci "appointment-scheduler" come Nome service account, quindi fai clic su Crea.

845d25f3e07ff770.png

  1. Nella sezione Concedi a questo service account l'accesso al progetto, fai clic su Continua per saltare il passaggio.
  2. Nella sezione Concedi agli utenti l'accesso a questo service account (facoltativo), fai clic su Crea chiave > JSON > Crea.

Sul computer verrà scaricato un file JSON, che ti servirà nelle sezioni di configurazione successive.

a424cec60144d707.png

6. Configurare l'endpoint detectIntent di Dialogflow da chiamare dall'app

  1. Nella cartella della chat, sostituisci AppointmentScheduler.json con il file JSON delle credenziali.
  2. In views.py nella cartella della chat, modifica GOOGLE_PROJECT_ID = "<YOUR_PROJECT_ID>" con il tuo ID progetto.

7. Crea ed esegui l'app in locale

Per eseguire l'app Django sul computer locale, devi configurare un ambiente di sviluppo Python, inclusi Python, pip e virtualenv. Per istruzioni, vedi Configurazione di un ambiente di sviluppo Python.

  1. Crea un ambiente Python isolato e installa le dipendenze:
virtualenv env
source env/bin/activate
pip install -r requirements.txt
  1. Esegui le migrazioni Django per configurare i modelli.
python3 manage.py makemigrations
python3 manage.py makemigrations polls
python3 manage.py migrate
  1. Avvia un server web locale.
python3 manage.py runserver
  1. Nel browser web, inserisci http://localhost:8000/. Dovresti visualizzare una pagina web semplice come mostrato nello screenshot seguente:

d40910969aa71020.png

Le pagine dell'app di esempio vengono fornite dal server web Django in esecuzione sul computer. Quando è tutto pronto per procedere, premi Control+S (Command+S su Macintosh) per arrestare il server web locale.

8. Esegui il deployment dell'app nell'ambiente standard di App Engine

Esegui questo comando per spostare tutti i file statici dell'app nella cartella specificata da STATIC_ROOT in settings.py:

python3 manage.py collectstatic

Carica l'app eseguendo questo comando nella directory dell'app in cui si trova il file app.yaml:

gcloud app deploy

Attendi il messaggio che ti informa che l'aggiornamento è stato completato.

9. Testare il client frontend

Nel browser web, inserisci https://<your_project_id>.appspot.com.

Questa volta, la tua richiesta viene gestita da un web server in esecuzione nell'ambiente standard di App Engine.

Il comando app deploy esegue il deployment dell'app come descritto in app.yaml e imposta la versione appena sottoposta a deployment come versione predefinita, in modo che gestisca tutto il nuovo traffico.

10. Produzione

11. Quando è tutto pronto per pubblicare i contenuti in produzione, imposta la variabile DEBUG su False in mysite/settings.py.

12. Testare il chatbot

Vai a https://<your_project_id>.appspot.com e inserisci quanto segue:

  1. Utente: "Fissa un appuntamento per l'immatricolazione del veicolo per domani alle 15:00."
  2. Il chatbot risponde nel seguente modo:

3b0abfec8f4ba279.png

  1. Calendar registra la risposta.

eb49089765b84fc6.png

13. Esegui la pulizia

Se prevedi di completare altri codelab di Dialogflow, salta questa parte per ora e riprendila in un secondo momento.

Elimina l'agente Dialogflow

  1. Fai clic su e8a0a7d752849e01.png accanto all'agente esistente.
  2. 520c1c6bb9f46ea6.png
  3. Nella scheda Generali, scorri fino in fondo e fai clic su Elimina questo agente.
  4. Digita Elimina nella finestra visualizzata e fai clic su Elimina.

14. Complimenti

Hai creato un chatbot in Dialogflow e lo hai integrato con Calendar. Ora sei uno sviluppatore di chatbot.

Scopri di più

Per saperne di più, consulta le seguenti risorse: