Criar um cliente frontend de front-end para um app Dialogflow

Neste codelab, você aprenderá a criar um cliente frontend de front-end para criar uma experiência de conversação para um app Dialogflow. Especificamente, você fará o seguinte:

  • Faça o download, configure e execute o cliente de front-end do Python.
  • Configurar o endpoint detectIntent do Dialogflow a ser chamado pelo cliente de front-end do Python.
  • Implantar o aplicativo no Google Cloud no App Engine.
  • Teste se os convites do Agenda estão sendo configurados por solicitação do usuário.

Prerequisites

Antes de continuar, conclua os codelabs a seguir:

  1. Criar um agendamento de horários com o Dialogflow
  2. Noções básicas sobre entidades no Dialogflow
  3. Entenda o fulfillment integrando o Dialogflow ao Agenda

O que você vai aprender

  • Como configurar e executar um cliente de front-end do Flutter para o Dialogflow
  • Como implantar o cliente de front-end do Flutter no Google Cloud no App Engine
  • Como testar um app do Dialogflow em um front-end personalizado

O que você vai criar

  • Você vai configurar e executar um cliente de front-end do Flutter para o Dialogflow.
  • Você implantará o cliente de front-end do Python no Google Cloud no App Engine.
  • Você testará um app do Dialogflow usando esse front-end personalizado.

Pré-requisitos

  • Noções básicas do Python
  • Conhecimento básico do Dialogflow

Você usará a experiência de conversa do Agendador de horários, que criou anteriormente, e criará um front-end personalizado para o app. Você criará o front-end com o ConfigMap, executará e testará localmente e o implantará no App Engine.

O usuário enviará uma solicitação de agendamento pelo front-end, que chamará a API Dialogflow Intent para configurar um horário na data e hora solicitadas. O fulfillment do Dialogflow enviará uma solicitação ao Agenda para definir o horário em questão e retornar uma confirmação ao usuário pelo Dialogflow.

O resultado final terá esta aparência:
  1. Clone o repositório na sua máquina local digitando este comando no terminal local do computador: 
git clone https://github.com/priyankavergadia/Django-Dialogflow-Appointment-Scheduler.git
  1. Acesse o diretório que contém o código. Outra opção é fazer o download do exemplo como arquivo zip e extraí-lo.
cd Django-Dialogflow-Appointment-Scheduler

Quando implantado, o aplicativo usa o Cloud SQL Proxy integrado ao ambiente padrão do App Engine para se comunicar com sua instância do Cloud SQL. No entanto, para testar o aplicativo localmente, instale e use uma cópia local do Cloud SQL Proxy no seu ambiente de desenvolvimento. Para mais informações, consulte Sobre o Cloud SQL Proxy.

Para executar tarefas administrativas básicas na sua instância do Cloud SQL, use o cliente do Cloud SQL para MySQL.

Instalar o Cloud SQL Proxy

Faça o download do Cloud SQL Proxy e instale-o. O Cloud SQL Proxy é usado para se conectar à sua instância do Cloud SQL quando executado localmente.

Faça o download do proxy.

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

Torne o proxy executável.

chmod +x cloud_sql_proxy

Crie uma instância do Cloud SQL

  1. Crie uma instância de segunda geração do Cloud SQL para MySQL. Dê à instância o nome "polls-instance" ou algo semelhante. Pode levar alguns minutos para a instância ficar pronta. Depois de pronta, ela ficará visível na lista de instâncias.
  2. Use a ferramenta gcloud para executar o comando a seguir, em que [YOUR_INSTANCE_NAME] representa o nome da instância. Anote o valor mostrado para o nome da conexão da instância na próxima etapa, que é mostrado no formato [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME]..
gcloud sql instances describe [YOUR_INSTANCE_NAME]

Se preferir, clique na instância para ver o nome da conexão da instância.

Inicializar a instância do Cloud SQL

Inicie o Cloud SQL Proxy usando o nome da conexão da instância da etapa anterior. Substitua [YOUR_INSTANCE_CONNECTION_NAME] pelo valor registrado na etapa anterior. Isso estabelece uma conexão do computador local com a instância para fins de teste local. Mantenha o Cloud SQL Proxy em execução enquanto testa seu app localmente.

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

Em seguida, crie um novo usuário e banco de dados do Cloud SQL.

  1. Crie um banco de dados usando o Console do Google Cloud para a instância do Cloud SQL chamada polls-instance. Por exemplo, você pode inserir "polls" como o nome.
  2. Crie uma conta de usuário usando o Console do Cloud para a instância do Cloud SQL chamada polls-instance.

Definir as configurações do banco de dados

  1. Abra mysite/settings.py para edição.
  2. Em dois locais, substitua [YOUR-USERNAME] e [YOUR-PASSWORD] pelo nome de usuário e senha do banco de dados criados na seção anterior. Isso ajuda a configurar a conexão com o banco de dados para a implantação do App Engine e testes locais.
  3. Na linha ‘HOST': ‘cloudsql/ [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME', substitua [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME] pelo valor registrado na seção anterior.
  4. Execute o seguinte comando e copie o valor de nome da conexão da instância de saída para a próxima etapa.
gcloud sql instances describe [YOUR_INSTANCE_NAME]
  1. Substitua [YOUR-CONNECTION-NAME] pelo valor registrado na seção anterior.
  2. Substitua [YOUR-DATABASE] pelo nome escolhido na seção anterior.
# [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. Feche e salve settings.py.
  1. No console do Dialogflow, clique em . Na guia Geral ao lado de ID do projeto, clique em Google Cloud.
  2. Clique em Navigation menu ☰ > APIs & Services > Credentials.
  3. Clique em Criar credenciais > Conta de serviço.
  4. Em Detalhes da conta de serviço, digite "appointment-scheduler" como o Nome da conta de serviço e clique em Criar.

  1. Em Conceder acesso à conta de serviço ao projeto , clique em Continuar para pular.
  2. Em Conceda aos usuários acesso a essa conta de serviço (opcional), clique em Criar chave > JSON > Criar.

O download de um arquivo JSON será feito no seu computador, que será necessário nas seções de configuração a seguir.
  1. Na pasta do chat, substitua AppointmentScheduler.json pelo arquivo JSON de credenciais.
  2. Em views.py na pasta de chat, mude GOOGLE_PROJECT_ID = "<YOUR_PROJECT_ID>" para o ID do projeto.

Para executar o app Python no seu computador local, é preciso configurar um ambiente de desenvolvimento Python, incluindo Python, pip e ChromeVox. Para ver instruções, consulte Como configurar um ambiente para desenvolvedores do Python.

  1. Crie um ambiente Python isolado e instale as dependências:
virtualenv env
source env/bin/activate
pip install -r requirements.txt
  1. Execute as migrações do Python para configurar os modelos.
python3 manage.py makemigrations
python3 manage.py makemigrations polls
python3 manage.py migrate
  1. Inicie um servidor da Web local:
python3 manage.py runserver
  1. No navegador da Web, digite http://localhost:8000/. Você verá uma página da Web simples como mostrado na captura de tela a seguir:

As páginas do aplicativo de amostra são entregues pelo servidor da Web Python em execução no seu computador. Quando estiver tudo pronto para avançar, pressione Control+S (Command+S no Macintosh) para interromper o servidor da Web local.

Execute o seguinte comando para mover todos os arquivos estáticos do app para a pasta especificada por STATIC_ROOT no settings.py:

python3 manage.py collectstatic

Faça upload do app executando o seguinte comando no diretório do app em que o arquivo app.yaml está localizado:

gcloud app deploy

Aguarde a mensagem que informa sobre a atualização.

No navegador da Web, digite https://<your_project_id>.appspot.com.

Desta vez, sua solicitação é atendida por um servidor da Web em execução no ambiente padrão do App Engine.

O comando app deploy implanta o aplicativo conforme descrito em app.yaml e define a versão recém-implantada como padrão. Com isso, ela veicula todo o novo tráfego.

Acesse https://<your_project_id>.appspot.com e insira o seguinte:

  1. Usuário: "quot;Agendar um horário para registro do veículo amanhã às 15h".
  2. O bot de chat responde da seguinte maneira:

  1. O Agenda agenda a resposta.

Se você planeja concluir outros codelabs do Dialogflow, pule esta parte por enquanto e volte a ela mais tarde.

Excluir o agente do Dialogflow

  1. Clique em ao lado do seu agente.
  2. Na guia General, role até a parte inferior e clique em Delete This Agent.
  3. Digite Delete na janela exibida e clique em Excluir.

Você criou um bot de chat no Dialogflow e o integrou ao Agenda. Agora você é um desenvolvedor de bots de chat.

Saiba mais

Confira os recursos a seguir para saber mais: