dialogflow web v2

Flux de dialogue pour le Web v2

Dialogflow vous permet de créer des interfaces conversationnelles au-dessus de vos produits et services en fournissant un puissant moteur de compréhension du langage naturel (NLU) pour traiter et comprendre la saisie en langage naturel.

Il s'agit d'une intégration Web non officielle pour Dialogflow V2

Remarque : en août 2021, j'ai mis à niveau l'application Web vers Vue 3, corrigé les vulnérabilités de sécurité et mis à jour les dépendances. Le logiciel est gratuit, mais mon temps ne l'est pas. Pensez à me soutenir sur PayPal ou via un accord commercial

Caractéristiques

• Application Web progressive (score Lighthouse 100/100)
• Fonctionnalités d'accessibilité
• Prise en charge étendue du navigateur (IE8+), fonctionnalités hors ligne (historique) et excellent référencement
• UI et UX familiers, basés sur les spécifications officielles de conception de Google Assistant
• Mode sombre et thème
• Interaction mains libres avec saisie vocale et retour vocal (avec SSML)
• Indépendant de la langue
• Prise en charge de Docker et Kubernetes
• Composant riche, Webhook et Actions sur l'assistance Google (démo)
• Widget flottant à intégrer sur des sites Web (repo et démo)
• Basé sur Vue 3 , Webpack, Babel et PostCSS
• Léger (la version est d'environ 50 Ko gzippée)
• Gratuit et entièrement documenté
• Fabriqué en Allemagne
• Recommandé par Dialogflow et MadeWithVueJS

sponsorisé par Vokode - un studio de marketing audio parisien qui fait : la conception sonore, les podcasts et les applications vocales

Installation

Exigences

• NoeudJS
• npm ou fil
• Compte Google et agent Dialogflow V2 (si vous recherchez la V1, veuillez utiliser mon ancien dépôt)

Back-end

Dialogflow Gateway permet à des intégrations tierces comme celle-ci d'accéder en toute sécurité à l'API Dialogflow V2

• Documentation
• Implémentations

AD Dialogflow Gateway d'Ushakov (hébergé) est le moyen le plus rapide de démarrer avec Dialogflow for Web v2

Cloner le référentiel

Vous pouvez utiliser git ou télécharger depuis GitHub

Installer les dépendances

Ouvrez le dossier cloné. Ensuite, à l'aide de votre gestionnaire de packages, installez les dépendances

Utiliser npm

npm i

Utiliser du fil

yarn

Connecter l'agent

Ouvrez src/config/index.js et remplacez la variable endpoint par l'URL de votre Dialogflow Gateway.

Astuce : l'URL de Dialogflow Gateway hébergée par Ushakov est toujours l'identifiant de votre projet Google Cloud + .core.ushaflow.io . Si vous rencontrez des problèmes, assurez-vous d'avoir connecté votre agent à la passerelle, puis visitez la console, cliquez sur « Gérer » et copiez l'URL de la passerelle.

Exemple

 export default {
    endpoint : 'https://dialogflow-web-v2.core.ushaflow.io'
    [ ... ]
}

[ ... ]

Le logo, le nom de l'agent, la description et les langues disponibles sont récupérés à partir de Dialogflow. Modifiez-les dans Dialogflow et il sera synchronisé avec l'interface utilisateur. Veuillez noter que lors de l'ajout de nouvelles langues, vous devrez peut-être également traduire une partie de l'interface utilisateur ( translations.json dans src/translations )

Développer

Ouvrez votre dossier cloné. Ensuite, à l'aide de votre gestionnaire de packages préféré, exécutez la commande serve

Utiliser npm

npm run serve

Utiliser du fil

yarn serve

Votre navigateur par défaut devrait s'ouvrir et rediriger vers localhost:8080 . Si le port 8080 est déjà utilisé, vous pouvez donner un argument port pour vous connecter au port spécifié

Utiliser npm

npm run serve --port 9090

Utiliser du fil

yarn serve --port 9090

VEUILLEZ NE PAS UTILISER LE SERVEUR DE DÉVELOPPEMENT POUR SERVIR VOTRE APPLICATION AUX VISITEURS, LE SERVEUR DE DÉVELOPPEMENT EST DESTINÉ AU DÉVELOPPEMENT. VEUILLEZ TÉLÉCHARGER LES ARTEFACTS DE CONSTRUCTION SUR UN SERVEUR WEB STATIQUE

Thème

Vous pouvez créer un thème personnalisé pour Dialogflow for Web v2, selon les spécifications :

Pour appliquer les variables, ouvrez src/style/theme.sass et modifiez-les dans le sélecteur :root

Vous pouvez également optimiser votre thème pour les clients compatibles en mode sombre dans le même fichier et le même sélecteur sous @media (prefers-color-scheme: dark)

Construire

Votre application sera regroupée dans le répertoire dist

Pour le construire, vous pouvez utiliser npm ou fil

Utiliser npm

npm run build

Utiliser du fil

yarn build

Mise à jour

Exécutez git pull origin master pour intégrer les modifications

De plus, gardez les packages vue à jour

 vue upgrade

Foire aux questions

• Q : Je ne vois aucun changement
• R : Assurez-vous d'avoir vidé le cache et reconstruit l'application . Dans Safari, allez dans « Développer » > « Caches vides ». Dans Chrome : "Outils de développement" > "Application" > "Effacer le stockage" > "Effacer les données du site"

Demandes de renseignements

Contactez le développeur ou ouvrez un problème