1. Antes de começar
Neste codelab, você vai aprender a integrar um bot de texto e voz simples do Dialogflow Essentials (ES) a um app Flutter. O Dialogflow ES é um pacote de desenvolvimento para criar interfaces de conversa. Assim, chatbots, bots de voz, gateways de telefone. Vocês podem criar tudo com a mesma ferramenta e até mesmo oferecer suporte a vários canais em mais de 20 idiomas diferentes. O Dialogflow se integra a muitas plataformas de conversação conhecidas, como o Google Assistente, o Slack e o Facebook Messenger. Se você quiser criar um agente para uma dessas plataformas, use uma das várias opções de integração. No entanto, para criar um chatbot para dispositivos móveis, é necessário criar uma integração personalizada. Você vai criar intents especificando frases de treinamento para treinar um modelo de machine learning.
A ordem das tarefas reflete uma experiência comum de desenvolvedor de nuvem:
- Configuração do ambiente
- Dialogflow: criar um agente do Dialogflow ES
- Dialogflow: configurar o Dialogflow
- Google Cloud: criar uma conta de serviço
- Flutter: como criar um aplicativo de chat
- Como criar um projeto do Flutter
- Como configurar as configurações e permissões
- Como adicionar as dependências
- Vinculação à conta de serviço.
- Executar o aplicativo em um dispositivo virtual ou físico
- Flutter: como criar a interface de chat com suporte à conversão de voz em texto
- Como criar a interface de chat
- Como vincular a interface de chat
- Integrar o pacote gRPC do Dialogflow ao app
- Dialogflow: modelagem do agente do Dialogflow
- Configurar as intents de boas-vindas e de substituição
- Usar uma base de conhecimento de perguntas frequentes
Pré-requisito
- Experiência básica com Dart/Flutter
- Experiência básica com o Google Cloud Platform
- Experiência básica com o Dialogflow ES
O que você vai criar
Neste codelab, você vai aprender a criar um bot de perguntas frequentes para dispositivos móveis, que pode responder às dúvidas mais comuns sobre a ferramenta Dialogflow. Os usuários finais podem interagir com a interface de texto ou transmitir uma voz pelo microfone integrado de um dispositivo móvel para receber respostas. |
|
O que você vai aprender
- Como criar um chatbot com o Dialogflow Essentials
- Como integrar o Dialogflow a um app Flutter com o pacote gRPC do Dialogflow
- Como detectar intents de texto com o Dialogflow
- Como transmitir uma voz pelo microfone para o Dialogflow
- Como usar o conector da base de conhecimento para importar perguntas frequentes públicas
- Teste o chatbot pela interface de texto e voz em um dispositivo virtual ou físico
O que é necessário
- Você precisa de uma identidade do Google ou um endereço do Gmail para criar um agente do Dialogflow.
- Você precisa de acesso ao Google Cloud Platform para fazer o download de uma conta de serviço.
- Um ambiente de desenvolvimento do Flutter
Configurar o ambiente de desenvolvimento do Flutter
- Selecione o sistema operacional em que você está instalando o Flutter.
- Usuários do macOS: https://flutter.dev/docs/get-started/install/macos
- Windows: https://flutter.dev/docs/get-started/install/windows
- Linux: https://flutter.dev/docs/get-started/install/linux
- ChromeOS: https://flutter.dev/docs/get-started/install/chromeos
- É possível criar apps com o Flutter usando qualquer editor de texto combinado com nossas ferramentas de linha de comando. No entanto, este workshop vai usar o Android Studio. Os plug-ins do Flutter e do Dart para Android Studio oferecem preenchimento automático de código, destaque de sintaxe, assistência para edição de widgets, compatibilidade com execução e depuração e muito mais. Siga as etapas em https://flutter.dev/docs/get-started/editor (link em inglês).
2. Configuração do ambiente
Dialogflow: criar um agente do Dialogflow ES
- Abra o .
- Na barra à esquerda, logo abaixo do logotipo, selecione Criar novo agente no menu suspenso. Não clique no menu suspenso "Global". Precisamos de uma instância do Dialogflow que seja global para usar a base de conhecimento de perguntas frequentes.
- Especifique um nome de agente
yourname-dialogflow(use seu próprio nome) - Como idioma padrão, escolha Inglês - en.
- Escolha o fuso horário mais próximo de você como o padrão.
- Não selecione "Mega-agente". Com esse recurso, é possível criar um agente abrangente que pode orquestrar entre agentes "secundários". Não precisamos disso agora.
- Clique em Criar.
Configurar o Dialogflow
- Clique no ícone de engrenagem no menu à esquerda, ao lado do nome do projeto.
- Insira a seguinte descrição do agente: Chatbot de perguntas frequentes do Dialogflow
- Ative os recursos Beta.
- Clique na guia Fala e verifique se a caixa Adaptação automática de fala está ativa.
- Você também pode ativar o primeiro botão para melhorar o modelo de fala, mas isso só está disponível quando você faz upgrade do teste do Dialogflow.
- Clique em Salvar.
Google Cloud: receber uma conta de serviço
Depois de criar um agente no Dialogflow, crie um projeto do Google Cloud no console do Google Cloud.
- Abra o console do Google Cloud:
- Verifique se você fez login com a mesma Conta do Google usada no Dialogflow e selecione o projeto:
yourname-dialogflowna barra azul superior. - Em seguida, pesquise
Dialogflow APIna barra de ferramentas superior e clique no resultado API Dialogflow no menu suspenso.
- Clique no botão azul Gerenciar e em Credenciais na barra de menu à esquerda. (Se o Dialogflow ainda não estiver ativado, clique em Ativar primeiro)
- Clique em Criar credenciais (na parte de cima da tela) e escolha Conta de serviço.
- Especifique um nome para a conta de serviço:
flutter_dialogflow, ID e descrição. Depois, clique em Criar.
- Na etapa 2, selecione a função
Dialogflow API Admine clique em Continuar e Concluído. - Clique na conta de serviço
flutter_dialogflow, na guia Chaves e em Adicionar chave > Criar nova chave.
- Crie uma chave JSON. Renomeie como
credentials.jsone armazene em um local seguro do seu disco rígido. Vamos usar isso mais tarde.
Perfeito, todas as ferramentas necessárias estão configuradas corretamente. Agora podemos começar a integrar o Dialogflow ao nosso app.
3. Flutter: como criar o aplicativo de chat
Criar o app Boilerplate
- Abra o Android Studio e selecione Start a new Flutter project.
- Selecione Flutter Application como o tipo de projeto. Depois clique em Avançar.
- Verifique se o caminho do SDK do Flutter está especificando o local do SDK. Selecione "Install SDK..." se o campo de texto estiver em branco.
- Insira um nome de projeto (por exemplo,
flutter_dialogflow_agent) e clique em Próxima. - Modifique o nome do pacote e clique em Concluir.
Isso vai criar um aplicativo de exemplo com Material Components.
Aguarde o Android Studio instalar o SDK e criar o projeto.
Configurações e permissões
- A biblioteca de gravador de áudio sound_stream, que vamos usar, exige um minSdk de pelo menos 21. Vamos mudar isso em android/app/build.gradle no bloco defaultConfig. Há dois arquivos build.gradle na pasta "android", mas o correto é o que está na pasta "app".
defaultConfig {
applicationId "com.myname.flutter_dialogflow_agent"
minSdkVersion 21
targetSdkVersion 30
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
}
- Para conceder permissões ao microfone e permitir que o app entre em contato com o agente do Dialogflow que é executado na nuvem, adicione as permissões INTERNET e RECORD_AUDIO ao arquivo app/src/main/AndroidManifest.xml. Há vários arquivos AndroidManifest.xml no seu projeto do Flutter, mas você vai precisar do que está na pasta principal. Você pode adicionar as linhas diretamente nas tags do manifesto.
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.RECORD_AUDIO" />
Como adicionar as dependências
Vamos usar os pacotes sound_stream, rxdart e dialogflow_grpc.
- Adicionar a dependência
sound_stream
$ flutter pub add sound_stream Resolving dependencies... async 2.8.1 (2.8.2 available) characters 1.1.0 (1.2.0 available) matcher 0.12.10 (0.12.11 available) + sound_stream 0.3.0 test_api 0.4.2 (0.4.5 available) vector_math 2.1.0 (2.1.1 available) Downloading sound_stream 0.3.0... Changed 1 dependency!
- Adicionar a dependência
dialogflow_grpc
flutter pub add dialogflow_grpc Resolving dependencies... + archive 3.1.5 async 2.8.1 (2.8.2 available) characters 1.1.0 (1.2.0 available) + crypto 3.0.1 + dialogflow_grpc 0.2.9 + fixnum 1.0.0 + googleapis_auth 1.1.0 + grpc 3.0.2 + http 0.13.4 + http2 2.0.0 + http_parser 4.0.0 matcher 0.12.10 (0.12.11 available) + protobuf 2.0.0 test_api 0.4.2 (0.4.5 available) + uuid 3.0.4 vector_math 2.1.0 (2.1.1 available) Downloading dialogflow_grpc 0.2.9... Downloading grpc 3.0.2... Downloading http 0.13.4... Downloading archive 3.1.5... Changed 11 dependencies!
- Adicionar a dependência
rxdart
$ flutter pub add rxdart Resolving dependencies... async 2.8.1 (2.8.2 available) characters 1.1.0 (1.2.0 available) matcher 0.12.10 (0.12.11 available) + rxdart 0.27.2 test_api 0.4.2 (0.4.5 available) vector_math 2.1.0 (2.1.1 available) Downloading rxdart 0.27.2... Changed 1 dependency!
Carregando as informações da conta de serviço e do projeto do Google Cloud
- No projeto, crie um diretório e nomeie-o como
assets. - Mova o arquivo credentials.json baixado do console do Google Cloud para a pasta assets.
- Abra pubspec.yaml e adicione a conta de serviço ao bloco do Flutter.
flutter:
uses-material-design: true
assets:
- assets/credentials.json
Executar o aplicativo em um dispositivo físico
Quando você tem um dispositivo Android, pode conectar o smartphone com um cabo USB e depurar no dispositivo. Siga estas etapas para configurar o recurso na tela Opções do desenvolvedor do seu dispositivo Android.
Executar o aplicativo em um dispositivo virtual
Se quiser executar o aplicativo em um dispositivo virtual, siga estas etapas:
- Clique em Tools> AVD Manager. Ou selecione o AVD Manager na barra de ferramentas superior. Na figura abaixo, ele está destacado em rosa.
- Vamos criar um dispositivo virtual Android de destino para testar o aplicativo sem um dispositivo físico. Para mais detalhes, consulte Gerenciar AVDs. Depois de selecionar um novo dispositivo virtual, clique duas vezes nele para iniciá-lo.
- Na barra de ferramentas principal do Android Studio, selecione um dispositivo Android como destino no menu suspenso e confira se main.dart está selecionado. Em seguida, pressione o botão Executar (triângulo verde).
Na parte de baixo da IDE, você vai encontrar os registros no console. Você vai notar que ele está instalando o Android e o app inicial do Flutter. Isso vai levar um minuto. Depois que o dispositivo virtual estiver pronto, as mudanças serão muito rápidas. Quando tudo estiver pronto, o app inicial do Flutter será aberto.
- Vamos ativar o microfone para nosso app de chatbot. Clique no botão opções do dispositivo virtual para abrir as opções. Na guia "Microfone", ative todas as três opções.
- Vamos testar a recarga dinâmica para demonstrar a rapidez com que as mudanças podem ser feitas.
Em lib/main.dart, mude o título MyHomePage na classe MyApp para: Flutter Dialogflow Agent. E mude o primarySwatch para Colors.orange.
Salve o arquivo ou clique no ícone de raio na barra de ferramentas do Android Studio. Você vai ver a mudança feita diretamente no dispositivo virtual.
4. Flutter: como criar a interface de chat com suporte à STT
Como criar a interface de chat
- Crie um novo arquivo de widget do Flutter na pasta lib. Clique com o botão direito do mouse na pasta "lib" e selecione New > Flutter Widget > Stateful widget. Chame este arquivo:
chat.dart
Cole o código a seguir nesse arquivo. Esse arquivo Dart cria a interface de chat. O Dialogflow ainda não vai funcionar. É apenas o layout de todos os componentes e a integração do componente de microfone para permitir streams. Os comentários no arquivo vão indicar onde vamos integrar o Dialogflow mais tarde.
// Copyright 2021 Google LLC
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:rxdart/rxdart.dart';
import 'package:sound_stream/sound_stream.dart';
// TODO import Dialogflow
class Chat extends StatefulWidget {
Chat({Key key}) : super(key: key);
@override
_ChatState createState() => _ChatState();
}
class _ChatState extends State<Chat> {
final List<ChatMessage> _messages = <ChatMessage>[];
final TextEditingController _textController = TextEditingController();
bool _isRecording = false;
RecorderStream _recorder = RecorderStream();
StreamSubscription _recorderStatus;
StreamSubscription<List<int>> _audioStreamSubscription;
BehaviorSubject<List<int>> _audioStream;
// TODO DialogflowGrpc class instance
@override
void initState() {
super.initState();
initPlugin();
}
@override
void dispose() {
_recorderStatus?.cancel();
_audioStreamSubscription?.cancel();
super.dispose();
}
// Platform messages are asynchronous, so we initialize in an async method.
Future<void> initPlugin() async {
_recorderStatus = _recorder.status.listen((status) {
if (mounted)
setState(() {
_isRecording = status == SoundStreamStatus.Playing;
});
});
await Future.wait([
_recorder.initialize()
]);
// TODO Get a Service account
}
void stopStream() async {
await _recorder.stop();
await _audioStreamSubscription?.cancel();
await _audioStream?.close();
}
void handleSubmitted(text) async {
print(text);
_textController.clear();
//TODO Dialogflow Code
}
void handleStream() async {
_recorder.start();
_audioStream = BehaviorSubject<List<int>>();
_audioStreamSubscription = _recorder.audioStream.listen((data) {
print(data);
_audioStream.add(data);
});
// TODO Create SpeechContexts
// Create an audio InputConfig
// TODO Make the streamingDetectIntent call, with the InputConfig and the audioStream
// TODO Get the transcript and detectedIntent and show on screen
}
// The chat interface
//
//------------------------------------------------------------------------------------
@override
Widget build(BuildContext context) {
return Column(children: <Widget>[
Flexible(
child: ListView.builder(
padding: EdgeInsets.all(8.0),
reverse: true,
itemBuilder: (_, int index) => _messages[index],
itemCount: _messages.length,
)),
Divider(height: 1.0),
Container(
decoration: BoxDecoration(color: Theme.of(context).cardColor),
child: IconTheme(
data: IconThemeData(color: Theme.of(context).accentColor),
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 8.0),
child: Row(
children: <Widget>[
Flexible(
child: TextField(
controller: _textController,
onSubmitted: handleSubmitted,
decoration: InputDecoration.collapsed(hintText: "Send a message"),
),
),
Container(
margin: EdgeInsets.symmetric(horizontal: 4.0),
child: IconButton(
icon: Icon(Icons.send),
onPressed: () => handleSubmitted(_textController.text),
),
),
IconButton(
iconSize: 30.0,
icon: Icon(_isRecording ? Icons.mic_off : Icons.mic),
onPressed: _isRecording ? stopStream : handleStream,
),
],
),
),
)
),
]);
}
}
//------------------------------------------------------------------------------------
// The chat message balloon
//
//------------------------------------------------------------------------------------
class ChatMessage extends StatelessWidget {
ChatMessage({this.text, this.name, this.type});
final String text;
final String name;
final bool type;
List<Widget> otherMessage(context) {
return <Widget>[
new Container(
margin: const EdgeInsets.only(right: 16.0),
child: CircleAvatar(child: new Text('B')),
),
new Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(this.name,
style: TextStyle(fontWeight: FontWeight.bold)),
Container(
margin: const EdgeInsets.only(top: 5.0),
child: Text(text),
),
],
),
),
];
}
List<Widget> myMessage(context) {
return <Widget>[
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(this.name, style: Theme.of(context).textTheme.subtitle1),
Container(
margin: const EdgeInsets.only(top: 5.0),
child: Text(text),
),
],
),
),
Container(
margin: const EdgeInsets.only(left: 16.0),
child: CircleAvatar(
child: Text(
this.name[0],
style: TextStyle(fontWeight: FontWeight.bold),
)),
),
];
}
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.symmetric(vertical: 10.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: this.type ? myMessage(context) : otherMessage(context),
),
);
}
}
Pesquise no arquivo chat.dart por "Widget build". Isso cria a interface do chatbot, que contém:
- ListView que contém todos os balões de chat do usuário e do chatbot. Ele usa a classe ChatMessage, que cria mensagens de chat com um avatar e texto.
- TextField para inserir consultas de texto
- IconButton com o ícone de envio para enviar consultas de texto ao Dialogflow
- IconButton com um microfone para enviar fluxos de áudio ao Dialogflow, que muda o estado quando é pressionado.
Como vincular a interface de chat
- Abra main.dart e mude o
Widget buildpara que ele instancie apenas a interfaceChat(). Todos os outros códigos de demonstração podem ser removidos.
import 'package:flutter/material.dart';
import 'chat.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.orange,
),
home: MyHomePage(title: 'Flutter Dialogflow Agent'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
// This widget is the home page of your application. It is stateful, meaning
// that it has a State object (defined below) that contains fields that affect
// how it looks.
// This class is the configuration for the state. It holds the values (in this
// case the title) provided by the parent (in this case the App widget) and
// used by the build method of the State. Fields in a Widget subclass are
// always marked "final".
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Chat())
);
}
}
- Execute o app. Se o app já foi iniciado. Pare o dispositivo virtual e execute main.dart novamente. Ao executar o app com a interface de chat pela primeira vez. Um pop-up de permissão vai aparecer perguntando se você quer permitir o uso do microfone. Clique em Durante o uso do app.
- Interaja com a área de texto e os botões. Quando você digita uma consulta de texto e pressiona "Enter" ou toca no botão de envio, a consulta é registrada na guia Executar do Android Studio. Quando você tocar e parar o botão do microfone, o stream de áudio vai aparecer na guia Executar.
Ótimo, agora estamos prontos para integrar o aplicativo ao Dialogflow.
Como integrar seu app Flutter ao Dialogflow_gRPC
- Abra chat.dart e adicione as seguintes importações:
import 'package:dialogflow_grpc/dialogflow_grpc.dart';
import 'package:dialogflow_grpc/generated/google/cloud/dialogflow/v2beta1/session.pb.dart';
- Na parte de cima do arquivo, logo abaixo do
// TODO DialogflowGrpcV2Beta1 class instance, adicione a seguinte linha para manter a instância da classe Dialogflow:
DialogflowGrpcV2Beta1 dialogflow;
- Pesquise o método initPlugin() e adicione o seguinte código logo abaixo do comentário TODO:
// Get a Service account
final serviceAccount = ServiceAccount.fromString(
'${(await rootBundle.loadString('assets/credentials.json'))}');
// Create a DialogflowGrpc Instance
dialogflow = DialogflowGrpcV2Beta1.viaServiceAccount(serviceAccount);
Isso vai criar uma instância do Dialogflow autorizada para seu projeto na nuvem do Google com a conta de serviço. Verifique se você tem o arquivo credentials.json na pasta assets.
Para fins de demonstração de como trabalhar com o gRPC do Dialogflow, isso não é um problema. No entanto, para apps de produção, não armazene o arquivo credentials.json na pasta "assets", porque isso não é considerado seguro.
Fazer uma chamada detectIntent
- Agora encontre o método
handleSubmitted(), que é onde a mágica acontece. Logo abaixo do comentário TODO, adicione o seguinte código, que vai adicionar a mensagem digitada pelo usuário à ListView:
ChatMessage message = ChatMessage(
text: text,
name: "You",
type: true,
);
setState(() {
_messages.insert(0, message);
});
- Agora, logo abaixo do código anterior, vamos fazer a chamada detectIntent, transmitindo o texto da entrada e um languageCode. - O resultado (em
data.queryResult.fulfillment) será impresso na ListView:
DetectIntentResponse data = await dialogflow.detectIntent(text, 'en-US');
String fulfillmentText = data.queryResult.fulfillmentText;
if(fulfillmentText.isNotEmpty) {
ChatMessage botMessage = ChatMessage(
text: fulfillmentText,
name: "Bot",
type: false,
);
setState(() {
_messages.insert(0, botMessage);
});
}
- Inicie o dispositivo virtual e teste a chamada de detecção de intenção. Tipo:
hi. Ela vai mostrar a mensagem de boas-vindas padrão. Quando você digitar outra coisa, ele vai retornar o substituto padrão.
Como fazer uma chamada streamingDetectIntent
- Agora encontre o método
handleStream(), que é onde a mágica acontece para o streaming de áudio. Primeiro, logo abaixo do primeiro TODO, crie um InputConfigV2beta1 de áudio com uma biasList para influenciar o modelo de voz. Como estamos usando um smartphone (dispositivo virtual), o sampleHertz será 16.000 e a codificação será Linear 16. Isso depende do hardware da máquina e do microfone que você está usando. Para o microfone interno do meu MacBook, 16.000 foi bom. Consulte as informações do pacote https://pub.dev/packages/sound_stream (link em inglês).
var biasList = SpeechContextV2Beta1(
phrases: [
'Dialogflow CX',
'Dialogflow Essentials',
'Action Builder',
'HIPAA'
],
boost: 20.0
);
// See: https://cloud.google.com/dialogflow/es/docs/reference/rpc/google.cloud.dialogflow.v2#google.cloud.dialogflow.v2.InputAudioConfig
var config = InputConfigV2beta1(
encoding: 'AUDIO_ENCODING_LINEAR_16',
languageCode: 'en-US',
sampleRateHertz: 16000,
singleUtterance: false,
speechContexts: [biasList]
);
- Em seguida, vamos chamar o método
streamingDetectIntentno objetodialogflow, que contém nossa sessão do Dialogflow:
final responseStream = dialogflow.streamingDetectIntent(config, _audioStream);
- Com o responseStream, podemos finalmente ouvir a transcrição recebida, a consulta do usuário detectada e a resposta de intent correspondente detectada. Vamos imprimir isso em um
ChatMessagena tela:
// Get the transcript and detectedIntent and show on screen
responseStream.listen((data) {
//print('----');
setState(() {
//print(data);
String transcript = data.recognitionResult.transcript;
String queryText = data.queryResult.queryText;
String fulfillmentText = data.queryResult.fulfillmentText;
if(fulfillmentText.isNotEmpty) {
ChatMessage message = new ChatMessage(
text: queryText,
name: "You",
type: true,
);
ChatMessage botMessage = new ChatMessage(
text: fulfillmentText,
name: "Bot",
type: false,
);
_messages.insert(0, message);
_textController.clear();
_messages.insert(0, botMessage);
}
if(transcript.isNotEmpty) {
_textController.text = transcript;
}
});
},onError: (e){
//print(e);
},onDone: () {
//print('done');
});
É só isso. Inicie o aplicativo, teste no dispositivo virtual, pressione o botão do microfone e diga: "Olá".
Isso vai acionar a intent de boas-vindas padrão do Dialogflow. Os resultados vão aparecer na tela. Agora que o Flutter funciona muito bem com a integração do Dialogflow, podemos começar a trabalhar na conversa do nosso chatbot.
5. Dialogflow: modelagem do agente do Dialogflow
O Dialogflow Essentials é um pacote de desenvolvimento para criar interfaces de conversa. Assim, chatbots, bots de voz, gateways de telefone. Vocês podem criar tudo com a mesma ferramenta e até mesmo oferecer suporte a vários canais em mais de 20 idiomas diferentes. Os designers de UX do Dialogflow (modeladores de agentes, linguistas) ou desenvolvedores criam intents especificando frases de treinamento para treinar um modelo de machine learning subjacente.
Uma intent categoriza a intenção de um usuário. Para cada agente do Dialogflow ES, você pode definir várias intents, e a combinação delas pode manter uma conversa do início ao fim. Cada intent pode conter parâmetros e respostas.
Essa correspondência também é conhecida como classificação ou correspondência de intent. Esse é o principal conceito do Dialogflow ES. Quando uma intent é correspondida, ela pode retornar uma resposta, coletar parâmetros (extração de entidades) ou acionar um código de webhook (fulfillment), por exemplo, para buscar dados de um banco de dados.
Quando um usuário final escreve ou diz algo em um chatbot, o que é chamado de expressão ou enunciado do usuário, o Dialogflow ES corresponde a expressão à melhor intent do agente do Dialogflow, com base nas frases de treinamento. O modelo de machine learning do Dialogflow ES foi treinado com essas frases de treinamento.
O Dialogflow ES funciona com um conceito chamado contexto. Assim como um humano, o Dialogflow ES pode se lembrar do contexto em uma segunda e terceira rodada de turnos. É assim que ele acompanha as declarações anteriores do usuário.
Saiba mais sobre as intents do Dialogflow.
Modificar a intent de boas-vindas padrão
Quando você cria um agente do Dialogflow, duas intents padrão são criadas automaticamente. A intent de boas-vindas padrão é o primeiro fluxo que aparece quando você inicia uma conversa com o agente. A intent de fallback padrão é o fluxo que você recebe quando o agente não consegue entender ou associar uma intent ao que você acabou de dizer.
Esta é a mensagem de boas-vindas para a intent de boas-vindas padrão:
Usuário | Agente |
Olá | "Olá, sou o bot de perguntas frequentes do Dialogflow. Posso responder a perguntas sobre o Dialogflow." |
- Clique em Intents > Intent de boas-vindas padrão.
- Role a tela para baixo até Respostas.
- Limpar todas as respostas de texto.
- Na guia padrão, crie estas duas respostas:
- Olá, sou o bot de perguntas frequentes do Dialogflow e posso responder a perguntas sobre o Dialogflow. O que você quer saber?
- Olá, sou o bot de perguntas frequentes do Dialogflow. Você tem dúvidas sobre o Dialogflow? Como posso ajudar?
A configuração será semelhante a esta captura de tela.
- Clique em Salvar.
- Vamos testar essa intent. Primeiro, teste no simulador do Dialogflow.Digite: Olá. Ele vai retornar uma destas mensagens:
- Olá, sou o bot de perguntas frequentes do Dialogflow e posso responder a perguntas sobre o Dialogflow. O que você quer saber?
- Olá, sou o bot de perguntas frequentes do Dialogflow. Você tem dúvidas sobre o Dialogflow? Como posso ajudar?
Modificar a intent de fallback padrão
- Clique em Intents > Intent de fallback padrão.
- Role a tela para baixo até Respostas.
- Limpar todas as respostas de texto.
- Na guia padrão, crie a seguinte resposta:
- Infelizmente, não sei a resposta para essa pergunta. Você já verificou nosso site? http://www.dialogflow.com?
- Clique em Salvar.
Como se conectar a uma base de conhecimento on-line
Os conectores de conhecimento complementam as intents definidas. Eles analisam documentos de conhecimento para encontrar respostas automáticas. Por exemplo, perguntas frequentes ou artigos de arquivos CSV, sites on-line ou até mesmo arquivos PDF. Para configurá-los, defina uma ou mais bases de conhecimento, que são coleções de documentos de conhecimento.
Leia mais sobre os conectores de conhecimento.
Vamos fazer um teste.
- Selecione Knowledge (Beta) no menu.
- Clique no botão azul à direita: Criar base de conhecimento.
- Digite um nome para a base de conhecimento, como Perguntas frequentes do Dialogflow, e clique em Salvar.
- Clique no link Crie o primeiro.
- Uma janela será aberta.
Use a seguinte configuração:
Nome do documento: DialogflowFAQ Tipo de conhecimento: FAQ Tipo MIME: text/html
- O URL de onde carregamos os dados é:
https://www.leeboonstra.dev/faqs/
- Clique em Criar.
Uma base de conhecimento foi criada:
- Role a tela para baixo até a seção "Responses" e clique em Add Response.
Crie as respostas a seguir e clique em Salvar.
$Knowledge.Answer[1]
- Clique em Ver detalhes.
- Selecione Ativar recarregamento automático para buscar mudanças automaticamente quando a página da Web de perguntas frequentes for atualizada e clique em Salvar.
Isso vai mostrar todas as perguntas frequentes que você implementou no Dialogflow.É fácil!
Você também pode apontar para um site HTML on-line com perguntas frequentes para importar essas perguntas ao seu agente. É possível até mesmo fazer upload de um PDF com um bloco de texto, e o Dialogflow vai criar perguntas por conta própria.
Agora, as perguntas frequentes devem ser vistas como "extras" para adicionar aos seus agentes, ao lado dos fluxos de intents. As perguntas frequentes da base de conhecimento não podem treinar o modelo. Portanto, fazer perguntas de uma maneira completamente diferente pode não gerar uma correspondência porque não usa o entendimento de linguagem natural (modelos de aprendizado de máquina). Por isso, às vezes vale a pena converter suas perguntas frequentes em intents.
- Teste as perguntas no simulador à direita.
- Quando tudo funcionar, volte ao app Flutter e teste seu bot de chat e voz com esse novo conteúdo. Faça as perguntas que você carregou no Dialogflow.
6. Parabéns
Parabéns! Você criou seu primeiro app Flutter com uma integração de bot de bate-papo do Dialogflow.
O que aprendemos
- Como criar um chatbot com o Dialogflow Essentials
- Como integrar o Dialogflow a um app Flutter
- Como detectar intents de texto com o Dialogflow
- Como transmitir uma voz pelo microfone para o Dialogflow
- Como usar o conector da base de conhecimento
A seguir
Gostou deste codelab? Confira estes laboratórios incríveis do Dialogflow!
- Como integrar o Dialogflow ao Google Assistente
- Como integrar o Dialogflow ao Google Chat
- Criar ações para o Google Assistente com o Dialogflow (nível 1)
- Entenda o atendimento ao cliente integrando o Dialogflow ao Google Agenda +. Crie seu primeiro app Flutter
Quer saber como criei o pacote gRPC do Dialogflow para Dart/Flutter?
- Confira meu artigo no blog O manual oculto para trabalhar com as APIs gRPC do Google Cloud