Compila un cliente de Django de frontend para una app de Dialogflow

1. Antes de comenzar

En este codelab, aprenderás a compilar un cliente de Django de frontend para crear una experiencia de conversación para una app de Dialogflow. Específicamente, harás lo siguiente:

  • Descarga, configura y ejecuta el cliente de frontend de Django.
  • Configura el extremo detectIntent de Dialogflow que se llamará desde el cliente de frontend de Django.
  • Implementar la aplicación en Google Cloud en App Engine
  • Prueba si las invitaciones de Calendario se configuran por solicitud de usuario.

Requisitos previos

Antes de continuar, debes completar los siguientes codelabs:

  1. Crea un programador de citas con Dialogflow
  2. Comprende las entidades en Dialogflow
  3. Comprende la entrega a través de la integración de Dialogflow en el Calendario

Qué aprenderás

  • Cómo configurar y ejecutar un cliente de frontend de Django para Dialogflow
  • Cómo implementar el cliente de frontend de Django en Google Cloud en App Engine
  • Cómo probar una app de Dialogflow desde un frontend personalizado

Qué compilarás

  • Configurarás y ejecutarás un cliente de frontend de Django para Dialogflow.
  • Implementarás el cliente de frontend de Django en Google Cloud en App Engine.
  • Probarás una aplicación de Dialogflow a partir de ese frontend personalizado.

Requisitos

  • Conocimientos básicos sobre Python
  • Conocimientos básicos de Dialogflow

2. Descripción general de la arquitectura

Usarás la experiencia de conversación del programador de citas que creaste anteriormente y un frontend personalizado para la app. Compilarás el frontend con Django, lo ejecutarás y lo probarás de forma local, y lo implementarás en App Engine.

El usuario enviará una solicitud de cita a través del frontend, que llamará a la API detectIntent de Dialogflow a fin de configurar una cita para la fecha y la hora solicitadas. La entrega de Dialogflow enviará una solicitud al Calendario para establecer la cita respectiva y mostrará una confirmación al usuario a través de Dialogflow.

84515171be610d4.png

El resultado final se verá de la siguiente manera:

8071c7311886461.png

3. Descarga y ejecuta la app de frontend

  1. Para clonar el repositorio en tu máquina local, escribe este comando en la terminal local de tu computadora:
git clone https://github.com/priyankavergadia/Django-Dialogflow-Appointment-Scheduler.git
  1. Cambia al directorio que contiene el código. Como alternativa, puedes descargar la muestra como un archivo ZIP y extraerla.
cd Django-Dialogflow-Appointment-Scheduler

4. Cómo configurar tu entorno local

Cuando se implementa, la aplicación usa el proxy de Cloud SQL integrado en el entorno estándar de App Engine para comunicarse con la instancia de Cloud SQL. Sin embargo, para probar tu aplicación de manera local, debes instalar y usar una copia local del proxy de Cloud SQL en tu entorno de desarrollo. Para obtener más información, consulta Acerca del proxy de Cloud SQL.

Para realizar tareas administrativas básicas en tu instancia de Cloud SQL, puedes usar el cliente de Cloud SQL para MySQL.

Instalar el proxy de Cloud SQL

Descarga y, luego, instala el proxy de Cloud SQL. El proxy de Cloud SQL se usa para conectarse a tu instancia de Cloud SQL cuando se ejecuta de forma local.

Descarga el proxy.

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

Haz que el proxy sea ejecutable.

chmod +x cloud_sql_proxy

Cree una instancia de Cloud SQL

  1. Crea una instancia de Cloud SQL para MySQL de segunda generación. Asigna el nombre "polls-instance" a la instancia. o algo similar. Es posible que la instancia tarde algunos minutos en estar lista. Cuando esté lista, debería aparecer en la lista de instancias.
  2. Usa la herramienta de gcloud para ejecutar el siguiente comando, en el que [YOUR_INSTANCE_NAME] representa el nombre de tu instancia. Toma nota del valor que se muestra como nombre de conexión de instancia para el paso siguiente, que se muestra en el formato [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME]..
gcloud sql instances describe [YOUR_INSTANCE_NAME]

Como alternativa, puedes hacer clic en la instancia para ver el Nombre de la conexión con la instancia.

c11e94464bf4fcf8.png

Inicializa la instancia de Cloud SQL

Inicia el proxy de Cloud SQL con el nombre de conexión de la instancia del paso anterior. Reemplaza [YOUR_INSTANCE_CONNECTION_NAME] por el valor que registraste en el paso anterior. Esto establece una conexión entre tu computadora local y la instancia para realizar pruebas locales. Mantén el proxy de Cloud SQL en ejecución mientras pruebas la aplicación de forma local.

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

A continuación, crea un nuevo usuario y base de datos de Cloud SQL.

  1. Crea una nueva base de datos con la consola de Google Cloud para tu instancia de Cloud SQL llamada polls-instance. Por ejemplo, puedes ingresar "encuestas" como el nombre. a3707ec9bc38d412.png
  2. Crea una cuenta de usuario nueva con la consola de Cloud para tu instancia de Cloud SQL llamada polls-instance. f4d098fca49cccff.png

Configura la base de datos

  1. Abre mysite/settings.py para edición.
  2. En dos lugares, reemplaza [YOUR-USERNAME] y [YOUR-PASSWORD] por el nombre de usuario y la contraseña de la base de datos que creaste en la sección anterior. Eso ayuda a configurar la conexión a la base de datos para la implementación en App Engine y las pruebas locales.
  3. En la línea que dice ‘HOST': ‘cloudsql/ [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME,' reemplaza [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME] por el valor que registraste en la sección anterior.
  4. Ejecuta el siguiente comando y copia el valor del nombre de conexión de la instancia que se muestra para el paso siguiente.
gcloud sql instances describe [YOUR_INSTANCE_NAME]
  1. Reemplaza [YOUR-CONNECTION-NAME] por el valor que registraste en la sección anterior.
  2. Reemplaza [YOUR-DATABASE] por el nombre que elegiste en la sección anterior.
# [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. Cierra y guarda settings.py.

5. Configuración de la cuenta de servicio

  1. En la consola de Dialogflow, haz clic en e8a0a7d752849e01.png. En la pestaña General junto a ID del proyecto, haz clic en Google Cloud a9c6ff6374afe489.png.
  2. Haz clic en Menú de navegación ⁕ > APIs y Servicios > Credenciales.
  3. Haz clic en Crear credenciales > Cuenta de servicio. 86f51af0e7886fdd.png
  4. En los Detalles de la cuenta de servicio, ingresa "appointment-scheduler". como el Nombre de la cuenta de servicio y, luego, haz clic en Crear.

845d25f3e07ff770.png

  1. Donde dice Otorga a esta cuenta de servicio acceso al proyecto, haz clic en Continuar para omitirlo.
  2. Donde dice Otorgar a los usuarios acceso a esta cuenta de servicio (opcional), haz clic en Crear clave > JSON > Crear.

Se descargará en tu computadora un archivo JSON que necesitarás en las siguientes secciones de configuración.

a424cec60144d707.png

6. Configura el extremo detectIntent de Dialogflow para que se llame desde la app

  1. En la carpeta de chat, reemplaza AppointmentScheduler.json por el archivo JSON de tus credenciales.
  2. En views.py, en la carpeta del chat, cambia GOOGLE_PROJECT_ID = "<YOUR_PROJECT_ID>" por el ID del proyecto.

7. Compila y ejecuta la app de manera local

Para ejecutar la app Django en tu computadora local, tendrás que configurar un entorno de desarrollo de Python, que incluye Python, pip y virtualenv. Para obtener instrucciones, consulta Configura un entorno de desarrollo de Python.

  1. Crea un entorno aislado de Python y, luego, instala las dependencias:
virtualenv env
source env/bin/activate
pip install -r requirements.txt
  1. Ejecuta las migraciones de Django para configurar tus modelos.
python3 manage.py makemigrations
python3 manage.py makemigrations polls
python3 manage.py migrate
  1. Inicia un servidor web local.
python3 manage.py runserver
  1. En tu navegador web, ingresa http://localhost:8000/. Deberías ver una página web simple como se muestra en la siguiente captura de pantalla:

d40910969aa71020.png

El servidor web de Django que se ejecuta en tu computadora proporciona las páginas de la app de ejemplo. Cuando quieras continuar, presiona Control+S (Command+S en Macintosh) para detener el servidor web local.

8. Implementar la app en el entorno estándar de App Engine

Ejecuta el siguiente comando para mover todos los archivos estáticos de la app a la carpeta que especifica STATIC_ROOT en settings.py:

python3 manage.py collectstatic

Para subir la app, ejecuta el siguiente comando en el directorio de la app en el que se encuentra el archivo app.yaml:

gcloud app deploy

Espera a que aparezca el mensaje que indica que se completó la actualización.

9. Prueba el cliente de frontend

En tu navegador web, ingresa https://<your_project_id>.appspot.com.

Esta vez, un servidor web que se ejecuta en el entorno estándar de App Engine atiende la solicitud.

El comando app deploy implementa la app como se describe en app.yaml y establece la versión recién implementada como la versión predeterminada, lo que hace que entregue todo el tráfico nuevo.

10. Producción

11. Cuando tengas todo listo para publicar tu contenido en producción, cambia la variable DEBUG a Falso en mysite/settings.py.

12. Probar el chatbot

Navega a https://<your_project_id>.appspot.com y escribe lo siguiente:

  1. Usuario: "Establece una cita para el registro de vehículo a las 3 p.m. mañana".
  2. El chatbot responde de la siguiente manera:

3b0abfec8f4ba279.png

  1. El Calendario reserva la respuesta.

eb49089765b84fc6.png

13. Limpia

Si planeas completar otros codelabs de Dialogflow, omite esta parte por ahora y vuelve a ella más tarde.

Borra el agente de Dialogflow

  1. Haz clic en e8a0a7d752849e01.png junto a tu agente existente.
  2. 520c1c6bb9f46ea6.png
  3. En la pestaña General, desplázate hasta la parte inferior y haz clic en Delete This Agent.
  4. Escribe Borrar en la ventana que aparece y haz clic en Borrar.

14. Felicitaciones

Creaste un chatbot en Dialogflow y lo integraste con el Calendario. Ya eres un desarrollador de chatbots.

Más información

Consulta los siguientes recursos para obtener más información: