dialogflow web v2

Fluxo de diálogo para Web v2

O Dialogflow permite que você crie interfaces de conversação com base em seus produtos e serviços, fornecendo um poderoso mecanismo de compreensão de linguagem natural (NLU) para processar e compreender a entrada de linguagem natural

Esta é uma integração Web não oficial para o Dialogflow V2

Aviso : agosto de 2021, atualizei o aplicativo da web para Vue 3, corrigi vulnerabilidades de segurança e atualizei dependências. O software vem de graça, mas meu tempo não é. Considere me apoiar no PayPal ou por meio de um acordo comercial

Características

• Aplicativo Web Progressivo (pontuação Lighthouse 100/100)
• Recursos de acessibilidade
• Amplo suporte ao navegador (IE8+), recursos offline (histórico) e ótimo SEO
• UI e UX familiares, com base nas especificações oficiais de design do Google Assistant
• Modo escuro e tema
• Interação mãos-livres com entrada de voz e feedback de fala (com SSML)
• Independente de idioma
• Suporte Docker e Kubernetes
• Componente rico, webhook e ações no suporte do Google (demonstração)
• Widget flutuante para incorporação em sites (repo e demo)
• Baseado em Vue 3 , Webpack, Babel e PostCSS
• Leve (a compilação tem aproximadamente 50 KB compactada)
• Gratuito e totalmente documentado
• Fabricado na Alemanha
• Recomendado por Dialogflow e MadeWithVueJS

patrocinado pela Vokode - um estúdio de marketing de áudio de Paris, que faz: design de som, podcast e aplicativos de voz

Instalação

Requisitos

• NodeJS
• npm ou fio
• Conta do Google e agente Dialogflow V2 (se você procurar V1, use meu antigo repositório)

Back-end

O Dialogflow Gateway permite integrações de terceiros como essa para acessar com segurança a API Dialogflow V2

• Documentação
• Implementações

AD Dialogflow Gateway de Ushakov (hospedado) é a maneira mais rápida de começar a usar o Dialogflow for Web v2

Clonar o repositório

Você pode usar git ou baixar do GitHub

Instale as dependências

Abra a pasta clonada. Então, usando seu gerenciador de pacotes, instale as dependências

Usando npm

npm i

Usando fio

yarn

Conecte o agente

Abra src/config/index.js e altere a variável endpoint para o URL do Dialogflow Gateway

Dica: o URL do Dialogflow Gateway hospedado por Ushakov é sempre o ID do seu projeto Google Cloud + .core.ushaflow.io . Se você tiver algum problema, certifique-se de conectar seu Agente ao Gateway, visite o console, clique em "Gerenciar" e copie o URL do Gateway

Exemplo

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

[ ... ]

O logotipo, nome do agente, descrição e idiomas disponíveis são obtidos no Dialogflow. Altere-os no Dialogflow e ele será sincronizado com a IU. Observe que, ao adicionar novos idiomas, talvez seja necessário traduzir parte da IU também ( translations.json em src/translations )

Desenvolver

Abra sua pasta clonada. Então, usando seu gerenciador de pacotes favorito, execute o comando serve

Usando npm

npm run serve

Usando fio

yarn serve

Seu navegador padrão deve abrir e redirecionar para localhost:8080 . Se a porta 8080 já estiver em uso, você poderá fornecer um argumento port para conectar-se à porta especificada

Usando npm

npm run serve --port 9090

Usando fio

yarn serve --port 9090

POR FAVOR, NÃO USE O SERVIDOR DE DESENVOLVIMENTO PARA SERVIR SEU APLICATIVO PARA VISITANTES, O SERVIDOR DE DESENVOLVIMENTO É SIGNIFICADO PARA O DESENVOLVIMENTO. FAÇA UPLOAD DE ARTEFATOS DE CONSTRUÇÃO PARA UM SERVIDOR WEB ESTÁTICO

Tema

Você pode criar um tema personalizado para o Dialogflow for Web v2, de acordo com a especificação:

Para aplicar as variáveis, abra src/style/theme.sass e altere-as no seletor :root

Você também pode otimizar seu tema para clientes habilitados para modo escuro no mesmo arquivo e seletor em @media (prefers-color-scheme: dark)

Construir

Seu aplicativo será empacotado no diretório dist

Para construí-lo você pode usar npm ou fio

Usando npm

npm run build

Usando fio

yarn build

Atualizar

Execute git pull origin master para integrar as alterações

Além disso, mantenha os pacotes vue atualizados

 vue upgrade

Perguntas frequentes

• P: Não vejo nenhuma alteração
• R: Certifique-se de limpar o cache e reconstruir o aplicativo . No Safari vá em "Desenvolver" > "Esvaziar Caches". No Chrome: "Ferramentas do desenvolvedor" > "Aplicativo" > "Limpar armazenamento" > "Limpar dados do site"

Consultas

Entre em contato com o desenvolvedor ou abra um problema