Créer un client Django frontend pour une application Dialogflow

1. Avant de commencer

Dans cet atelier de programmation, vous allez apprendre à créer un client Django d'interface afin de créer une expérience de conversation pour une application Dialogflow. Plus précisément, vous allez effectuer les opérations suivantes:

  • Téléchargez, configurez et exécutez le client d'interface Django.
  • Configurez le point de terminaison Dialogflow DetectIntent à appeler depuis le client d'interface Django.
  • Déployer l'application dans Google Cloud sur App Engine
  • Vérifiez si les invitations Agenda sont configurées à la demande de l'utilisateur.

Prérequis

Avant de continuer, vous devez suivre les ateliers de programmation suivants:

  1. Créer un planificateur de rendez-vous avec Dialogflow
  2. Comprendre les entités dans Dialogflow
  3. Comprendre le fulfillment en intégrant Dialogflow à Agenda

Points abordés

  • Configurer et exécuter un client d'interface Django pour Dialogflow
  • Déployer le client d'interface Django dans Google Cloud sur App Engine
  • Tester une application Dialogflow à partir d'une interface personnalisée

Ce que vous allez faire

  • Vous allez configurer et exécuter un client d'interface Django pour Dialogflow.
  • Vous allez déployer le client d'interface Django dans Google Cloud sur App Engine.
  • Vous allez tester une application Dialogflow à partir de cette interface personnalisée.

Prérequis

  • Connaissances de base de Python
  • Connaissances de base de Dialogflow

2. Présentation de l'architecture

Vous allez utiliser l'expérience de conversation Planificateur de rendez-vous que vous avez précédemment créée et créer une interface personnalisée pour l'application. Vous allez créer l'interface avec Django, l'exécuter et la tester localement, puis la déployer sur App Engine.

L'utilisateur envoie une demande de rendez-vous via l'interface, qui appelle l'API Dialogflow DetectIntent pour fixer un rendez-vous à la date et à l'heure demandées. Le fulfillment Dialogflow enverra ensuite une requête à Agenda pour définir le rendez-vous correspondant et renvoyer une confirmation à l'utilisateur via Dialogflow.

84515171be610d4.png

Le résultat final se présentera comme suit:

7146cd729c50f7c1.png

3. Télécharger et exécuter l'application d'interface

  1. Clonez le dépôt sur votre ordinateur local en saisissant la commande suivante dans le terminal local de votre ordinateur:
git clone https://github.com/priyankavergadia/Django-Dialogflow-Appointment-Scheduler.git
  1. Accédez au répertoire qui contient le code. Vous pouvez également télécharger l'exemple sous forme de fichier ZIP et l'extraire.
cd Django-Dialogflow-Appointment-Scheduler

4. Configurer votre environnement local

Une fois déployée, votre application communique avec votre instance Cloud SQL à l'aide du proxy Cloud SQL intégré à l'environnement standard App Engine. Toutefois, pour tester votre application en local, vous devez installer et utiliser une copie locale du proxy Cloud SQL dans votre environnement de développement. Pour en savoir plus, consultez la page À propos du proxy Cloud SQL.

Pour effectuer des tâches administratives de base sur votre instance Cloud SQL, vous pouvez utiliser le client Cloud SQL pour MySQL.

Installer le proxy Cloud SQL

Téléchargez et installez le proxy Cloud SQL. Le proxy Cloud SQL vous permet de vous connecter à votre instance Cloud SQL lorsque vous l'exécutez en local.

Téléchargez le proxy.

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

Rendez le proxy exécutable.

chmod +x cloud_sql_proxy

Créer une instance Cloud SQL

  1. Créez une instance Cloud SQL pour MySQL de deuxième génération. Nommez l'instance "polls-instance". ou quelque chose de similaire. La préparation de l'instance peut prendre quelques minutes. Une fois prêt, l'instance devrait apparaître dans la liste des instances.
  2. Utilisez l'outil gcloud pour exécuter la commande suivante, en remplaçant [YOUR_INSTANCE_NAME] par le nom de votre instance. Notez la valeur affichée pour le nom de connexion de l'instance pour l'étape suivante, au format [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME]..
gcloud sql instances describe [YOUR_INSTANCE_NAME]

Vous pouvez également cliquer sur l'instance pour afficher le nom de connexion de l'instance.

c11e94464bf4fcf8.png

Initialiser votre instance Cloud SQL

Démarrez le proxy Cloud SQL en utilisant le nom de connexion de l'instance de l'étape précédente. Remplacez [YOUR_INSTANCE_CONNECTION_NAME] par la valeur que vous avez enregistrée à l'étape précédente. Cela permet d'établir une connexion entre votre ordinateur local et votre instance à des fins de test en local. N'arrêtez pas le proxy Cloud SQL pendant que vous testez votre application en local.

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

Créez ensuite un utilisateur et une base de données Cloud SQL.

  1. Créez une base de données nommée polls-instance dans la console Google Cloud pour votre instance Cloud SQL. Par exemple, vous pouvez saisir "sondages" comme nom. a3707ec9bc38d412.png
  2. Créez un compte utilisateur nommé polls-instance dans la console Cloud pour votre instance Cloud SQL. f4d098fca49cccff.png

Configurer les paramètres de base de données

  1. Ouvrez mysite/settings.py pour y apporter des modifications.
  2. À deux endroits, remplacez [YOUR-USERNAME] et [YOUR-PASSWORD] par le nom d'utilisateur et le mot de passe de la base de données que vous avez créés à la section précédente. Cela permet de configurer la connexion à la base de données pour le déploiement d'App Engine et les tests en local.
  3. Sur la ligne ‘HOST': ‘cloudsql/ [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME],' remplacez [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME] par la valeur que vous avez enregistrée à la section précédente.
  4. Exécutez la commande suivante et copiez la valeur du nom de connexion de l'instance qui est renvoyée pour l'étape suivante.
gcloud sql instances describe [YOUR_INSTANCE_NAME]
  1. Remplacez [YOUR-CONNECTION-NAME] par la valeur que vous avez enregistrée dans la section précédente.
  2. Remplacez [YOUR-DATABASE] par le nom que vous avez choisi dans la section précédente.
# [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. Enregistrez et fermez le fichier settings.py.

5. Configurer un compte de service

  1. Dans la console Dialogflow, cliquez sur e8a0a7d752849e01.png. Dans l'onglet General (Général) à côté de Project ID (ID du projet), cliquez sur Google Clouda9c6ff6374afe489.png.
  2. Cliquez sur le menu de navigation ▾ > API et Services > Identifiants
  3. Cliquez sur Create Credentials (Créer des identifiants) > Compte de service : 86f51af0e7886fdd.png
  4. Dans Détails du compte de service, saisissez "appointment-scheduler" dans le champ Nom du compte de service, puis cliquez sur Créer.

845d25f3e07ff770.png

  1. Dans la section Grant this service account access to project (Accorder l'accès au projet à ce compte de service), cliquez sur Continue (Continuer) pour ignorer cette étape.
  2. Dans la section Autoriser les utilisateurs à accéder à ce compte de service (facultatif), cliquez sur Créer une clé > JSON > Créer :

Un fichier JSON est téléchargé sur votre ordinateur. Vous en aurez besoin dans les sections de configuration suivantes.

a424cec60144d707.png

6. Configurer le point de terminaison Dialogflow DetectIntent à appeler depuis l'application

  1. Dans le dossier "chat", remplacez AppointmentScheduler.json par votre fichier JSON d'identifiants.
  2. Dans le fichier views.py du dossier de chat, remplacez GOOGLE_PROJECT_ID = "<YOUR_PROJECT_ID>" par l'ID de votre projet.

7. Créer et exécuter l'application en local

Pour exécuter l'application Django sur votre ordinateur local, vous devez configurer un environnement de développement Python incluant Python, pip et virtualenv. Pour obtenir des instructions, consultez la page Configurer un environnement de développement Python.

  1. Créez un environnement Python isolé et installez des dépendances :
virtualenv env
source env/bin/activate
pip install -r requirements.txt
  1. Exécutez les migrations Django pour configurer vos modèles.
python3 manage.py makemigrations
python3 manage.py makemigrations polls
python3 manage.py migrate
  1. Démarrez un serveur Web local :
python3 manage.py runserver
  1. Dans votre navigateur Web, saisissez http://localhost:8000/. Vous devriez voir une page Web simple, comme illustré dans la capture d'écran suivante:

d40910969aa71020.png

Les pages de l'exemple d'application sont fournies par le serveur Web Django exécuté sur votre ordinateur. Lorsque vous êtes prêt à poursuivre, appuyez sur Control+S (Command+S sur Macintosh) pour arrêter le serveur Web local.

8. Déployer l'application dans l'environnement standard App Engine

Exécutez la commande suivante pour déplacer tous les fichiers statiques de l'application dans le dossier spécifié par STATIC_ROOT dans settings.py:

python3 manage.py collectstatic

Importez l'application en exécutant la commande suivante dans le répertoire de l'application où se trouve le fichier app.yaml:

gcloud app deploy

Attendez de recevoir le message vous informant que la mise à jour est terminée.

9. Tester le client d'interface

Dans votre navigateur Web, saisissez https://<id_de_votre_projet>.appspot.com.

Cette fois, votre requête est traitée par un serveur Web s'exécutant dans l'environnement standard App Engine.

La commande app deploy déploie l'application comme décrit dans app.yaml et définit la version nouvellement déployée comme version par défaut, de sorte qu'elle diffuse tout le nouveau trafic.

10. Production

11. Lorsque vous êtes prêt à diffuser votre contenu en production, définissez la variable DEBUG sur "False" dans monsite/settings.py.

12. Tester le chatbot

Accédez à https://<your_project_id>.appspot.com et saisissez la commande suivante:

  1. Utilisateur : "Prends rendez-vous pour l'immatriculation du véhicule demain à 15h."
  2. Le chatbot répond comme suit:

3b0abfec8f4ba279.png

  1. Agenda réserve la réponse.

eb49089765b84fc6.png

13. Effectuer un nettoyage

Si vous prévoyez de suivre d'autres ateliers de programmation Dialogflow, ignorez cette partie pour le moment et reprenez-y plus tard.

Supprimer l'agent Dialogflow

  1. Cliquez sur e8a0a7d752849e01.png à côté de votre agent existant.
  2. 520c1c6bb9f46ea6.png
  3. Dans l'onglet General (Général), faites défiler la page jusqu'en bas, puis cliquez sur Delete This Agent (Supprimer cet agent).
  4. Saisissez Supprimer dans la fenêtre qui s'affiche, puis cliquez sur Supprimer.

14. Félicitations

Vous avez créé un chatbot dans Dialogflow et l'avez intégré à Agenda. Vous êtes maintenant développeur de chatbots !

En savoir plus

Pour en savoir plus, consultez les ressources suivantes: