Compila un cliente de ⌘ en frontend para una app de Dialogflow

En este codelab, aprenderás a compilar un cliente de ⌘ en 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 ⌘.
  • Configura el extremo de detectIntent de Dialogflow para que se llame desde el cliente de frontend de ⌘.
  • Implementar la app en Google Cloud en App Engine
  • Pruebe si las invitaciones de Calendario se configuran por cada solicitud de usuario.

Prerequisites

Antes de continuar, debes completar los siguientes codelabs:

  1. Cómo crear un programador de citas con Dialogflow
  2. Información sobre las entidades en Dialogflow
  3. Integra Dialogflow con Calendario para comprender la entrega

Qué aprenderás

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

Qué crearás

  • Configurarás y ejecutarás un cliente de frontend de ⌘ para Dialogflow.
  • Implementarás el cliente de frontend de ⌘ en Google Cloud en App Engine.
  • Probarás una app de Dialogflow desde ese frontend personalizado.

Requisitos

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

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

El usuario enviará una solicitud de cita a través del frontend, que llamará a la API de detectIntent de Dialogflow para configurar una cita en la fecha y 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.

El resultado final se verá de la siguiente manera:
  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 extraerlo.
cd Django-Dialogflow-Appointment-Scheduler

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 app 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 básicas de administrador en tu instancia de Cloud SQL, usa 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 manera local.

Descarga el proxy.

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

Haga que el proxy sea ejecutable.

chmod +x cloud_sql_proxy

Crea una instancia de Cloud SQL

  1. Crea una instancia de Cloud SQL para MySQL de segunda generación. Ponle un nombre a la instancia (o algo similar), o a algo similar. Es posible que la instancia tarde unos 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 para el nombre de conexión de la instancia en el siguiente paso, que se muestra en el formato [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME].
gcloud sql instances describe [YOUR_INSTANCE_NAME]

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

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. De esta forma, se establece una conexión entre la computadora local y la instancia con fines de prueba locales. Mantén el proxy de Cloud SQL en ejecución mientras pruebas tu app de forma local.

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

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

  1. Cree una base de datos nueva con Google Cloud Console para su instancia de Cloud SQL denominada polls-instance. Por ejemplo, puedes ingresar “polls” como nombre.
  2. Crea una cuenta de usuario nueva con Cloud Console para la instancia de Cloud SQL llamada polls-instance.

Configurar 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. Esto ayuda a configurar la conexión a la base de datos para la implementación de 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. Ejecute el siguiente comando y copie el valor de nombre de la conexión de la instancia de salida para el siguiente paso.
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.
  1. En la consola de Dialogflow, haz clic en . En la pestaña General junto a ID del proyecto, haz clic en Google Cloud .
  2. Haz clic en el menú de navegación ☰ > API y servicios > Credenciales.
  3. Haz clic en Crear credenciales > Cuenta de servicio.
  4. En Detalles de la cuenta de servicio, ingrese "appointment-scheduler" como el Nombre de la cuenta de servicio, haga clic en Crear.

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

En las siguientes secciones de configuración, se descargará un archivo JSON en tu computadora, que necesitarás.
  1. En la carpeta de chat, reemplaza AppointmentScheduler.json por tu archivo JSON de credenciales.
  2. En la carpeta de chat de views.py, cambia GOOGLE_PROJECT_ID = "<YOUR_PROJECT_ID>" a tu ID del proyecto.

Para ejecutar la app ⌘ en tu computadora local, debes configurar un entorno de desarrollo de Python, como Python, pip y protobuf. Para obtener instrucciones, consulte la sección sobre cómo configurar 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 ⌘ 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 el navegador web, ingresa http://localhost:8000/. Deberías ver una página web simple como se ve en la siguiente captura de pantalla:

Las páginas de la app de muestra se proporcionan a través del servidor web de ⌘ que se ejecuta en tu computadora. Cuando estés listo para continuar, presiona Control+S (Command+S en Macintosh) a fin de detener el servidor web local.

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

python3 manage.py collectstatic

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

gcloud app deploy

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

En el 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 entrega tu solicitud.

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

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

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

  1. Calendario reserva la respuesta.

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

Borra el agente de Dialogflow

  1. Haz clic en junto a tu agente existente.
  2. En la pestaña General, desplázate hasta la parte inferior y haz clic en Borrar este agente.
  3. Escribe Borrar en la ventana que aparece y haz clic en Borrar.

Creó un chatbot en Dialogflow y lo integró a Calendario. ¡Ya eres desarrollador de chatbots!

Más información

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