dialogflow web v2

Flujo de diálogo para Web v2

Dialogflow le permite crear interfaces conversacionales además de sus productos y servicios al proporcionar un potente motor de comprensión del lenguaje natural (NLU) para procesar y comprender la entrada del lenguaje natural.

Esta es una integración web no oficial para Dialogflow V2

Aviso : en agosto de 2021, actualicé la aplicación web a Vue 3, solucioné vulnerabilidades de seguridad y actualicé dependencias. El software viene gratis, pero mi tiempo no. Considere apoyarme en PayPal o mediante un acuerdo comercial

Características

• Aplicación web progresiva (puntaje Lighthouse 100/100)
• Funciones de accesibilidad
• Amplia compatibilidad con navegadores (IE8+), capacidades fuera de línea (historial) y excelente SEO
• UI y UX familiares, basados ​​en las especificaciones de diseño oficiales del Asistente de Google
• Modo oscuro y tematización
• Interacción manos libres con entrada de voz y retroalimentación de voz (con SSML)
• Idioma independiente
• Soporte para Docker y Kubernetes
• Componente enriquecido, webhook y acciones en el soporte de Google (demostración)
• Widget flotante para incrustar en sitios web (repositorio y demostración)
• Basado en Vue 3 , Webpack, Babel y PostCSS
• Ligero (la compilación tiene ~50 KB comprimidos con gzip)
• Gratis y totalmente documentado
• Hecho en Alemania
• Recomendado por Dialogflow y MadeWithVueJS

patrocinado por Vokode, un estudio de marketing de audio de París que se dedica a: diseño de sonido, podcasts y aplicaciones de voz.

Instalación

Requisitos

• NodoJS
• npm o hilo
• Cuenta de Google y agente Dialogflow V2 (si busca V1, utilice mi repositorio anterior)

backend

Dialogflow Gateway permite integraciones de terceros como esta para acceder de forma segura a la API de Dialogflow V2

• Documentación
• Implementaciones

AD Dialogflow Gateway de Ushakov (alojado) es la forma más rápida de comenzar con Dialogflow para Web v2

Clonar el repositorio

Puedes usar git o descargarlo desde GitHub.

Instalar las dependencias

Abra la carpeta clonada. Luego, usando su administrador de paquetes, instale las dependencias.

Usando npm

npm i

usando hilo

yarn

Conecte el agente

Abra src/config/index.js y cambie la variable endpoint a la URL de su puerta de enlace de Dialogflow

Sugerencia: la URL de Dialogflow Gateway alojada por Ushakov es siempre la identificación de su proyecto de nube de Google + .core.ushaflow.io . Si tiene algún problema, asegúrese de haber conectado su agente a la puerta de enlace, luego visite la consola, haga clic en "Administrar" y copie la URL de la puerta de enlace.

Ejemplo

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

[ ... ]

El logotipo, el nombre del agente, la descripción y los idiomas disponibles se obtienen de Dialogflow. Cámbielos en Dialogflow y se sincronizará con la interfaz de usuario. Tenga en cuenta que, al agregar nuevos idiomas, es posible que también deba traducir parte de la interfaz de usuario ( translations.json en src/translations ).

Desarrollar

Abra su carpeta clonada. Luego, usando su administrador de paquetes favorito, ejecute el comando serve .

Usando npm

npm run serve

usando hilo

yarn serve

Su navegador predeterminado debería abrirse y redirigir a localhost:8080 . Si el puerto 8080 ya está en uso, puede proporcionar un argumento port para conectarse al puerto especificado

Usando npm

npm run serve --port 9090

usando hilo

yarn serve --port 9090

POR FAVOR, NO UTILICE EL SERVIDOR DE DESARROLLO PARA PRESENTAR SU APLICACIÓN A LOS VISITANTES, EL SERVIDOR DE DESARROLLO ESTÁ DISEÑADO PARA EL DESARROLLO. POR FAVOR, CARGUE ARTEFACTOS DE CONSTRUCCIÓN EN UN SERVIDOR WEB ESTÁTICO

Tema

Puede crear un tema personalizado para Dialogflow para Web v2, de acuerdo con la especificación:

Para aplicar las variables, abra src/style/theme.sass y cámbielas en el selector :root

También puede optimizar su tema para clientes habilitados para el modo oscuro dentro del mismo archivo y selector en @media (prefers-color-scheme: dark)

Construir

Su aplicación se incluirá en el directorio dist

Para construirlo puedes usar npm o hilo.

Usando npm

npm run build

usando hilo

yarn build

Actualizar

Ejecute git pull origin master para integrar los cambios

Además, mantenga actualizados los paquetes de vue

 vue upgrade

Preguntas frecuentes

• P: No veo ningún cambio
• R: Asegúrate de haber limpiado el caché y reconstruido la aplicación . En Safari, vaya a "Desarrollar" > "Vaciar cachés". En Chrome: "Herramientas de desarrollo" > "Aplicación" > "Borrar almacenamiento" > "Borrar datos del sitio"

Consultas

Póngase en contacto con el desarrollador o abra un problema