Criar um cliente Django de front-end para um app do Dialogflow

1. Antes de começar

Neste codelab, você aprenderá a criar um cliente Django de front-end para criar uma experiência de conversa para um aplicativo do Dialogflow. Especificamente, você vai fazer o seguinte:

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

Pré-requisitos

Antes de continuar, você precisa concluir os seguintes codelabs:

1. Criar um programador de horários com o Dialogflow
2. Entenda as entidades no Dialogflow
3. Como entender o fulfillment integrando o Dialogflow ao Google Agenda

O que você vai aprender

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

O que você vai criar

• Você irá configurar e executar um cliente de front-end Django para o Dialogflow.
• Você implantará o cliente de front-end do Django no Google Cloud usando o App Engine.
• Você testará um aplicativo do Dialogflow a partir desse front-end personalizado.

O que é necessário

• Noções básicas de Python
• Noções básicas do Dialogflow

2. Visão geral da arquitetura

Você vai usar a experiência de conversa do Agendador de horários que você já criou e criar um front-end personalizado para o app. Você vai criar o front-end com o Django, executá-lo e testá-lo localmente e implantá-lo no App Engine.

O usuário vai enviar uma solicitação de agendamento pelo front-end, que chamará a API Dialogflow detectIntent para marcar um horário para a data e a hora solicitadas. Depois disso, o fulfillment do Dialogflow enviará uma solicitação ao Google Agenda para marcar o respectivo horário e retornará uma confirmação ao usuário pelo Dialogflow.

O resultado final será como este:

3. Fazer o download e executar o aplicativo de front-end

1. Clone o repositório na máquina local digitando este comando no terminal local do computador:

git clone https://github.com/priyankavergadia/Django-Dialogflow-Appointment-Scheduler.git

2. Acesse o diretório que contém o código. Outra opção é fazer o download da amostra como um arquivo zip e extraí-la.

cd Django-Dialogflow-Appointment-Scheduler

4. Configurar seu ambiente local

Quando implantado, o app usa o Cloud SQL Proxy integrado ao ambiente padrão do App Engine para se comunicar com a instância do Cloud SQL. No entanto, para testar o aplicativo localmente, é necessário instalar e usar uma cópia local do Cloud SQL Proxy em 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 Cloud SQL para MySQL.

Observação: você precisa autenticar a ferramenta de linha de comando gcloud para usar o proxy e se conectar pela máquina local.

Instalar o Cloud SQL Proxy

Faça o download do Cloud SQL Proxy e instale-o. O Cloud SQL Proxy é usado para se conectar à instância do Cloud SQL durante a execução local.

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. Nomeie a instância como "polls-instance" ou algo semelhante. Pode levar alguns minutos para a instância ficar pronta. Quando estiver pronta, ela vai aparecer 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 como nome da conexão da instância para a próxima etapa, que aparece no formato [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME]..

gcloud sql instances describe [YOUR_INSTANCE_NAME]

Como alternativa, você pode clicar 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 de seu computador local com sua instância para fins de testes locais. Mantenha o Cloud SQL Proxy em execução enquanto testa seu aplicativo localmente.

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

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

1. Crie um novo banco de dados usando o console do Google Cloud para a instância do Cloud SQL chamada polls-instance. Por exemplo, você pode inserir "enquetes" como o nome.
2. Crie uma nova conta de usuário com 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 lugares, substitua [YOUR-USERNAME] e [YOUR-PASSWORD] pelo nome de usuário e senha do banco de dados que você criou na seção anterior. Isso ajuda a configurar a conexão com o banco de dados para implantação do App Engine e testes locais.
3. Na linha que diz, ‘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 comando a seguir e copie o valor do nome da conexão da instância de saída para a próxima etapa.

gcloud sql instances describe [YOUR_INSTANCE_NAME]

5. Substitua [YOUR-CONNECTION-NAME] pelo valor registrado na seção anterior.
6. Substitua [YOUR-DATABASE] pelo nome que você escolheu 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]

7. Feche e salve settings.py.

5. Configuração da conta de serviço

1. No console do Dialogflow, clique em . Na guia Geral ao lado de ID do projeto, clique em Google Cloud .
2. Clique em Menu de navegação ☰ > APIs e Serviços > Credenciais.
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, em seguida, clique em Criar.

5. Em Conceda a essa conta de serviço acesso ao projeto, clique em Continuar para ignorar.
6. Em Conceda aos usuários acesso a essa conta de serviço (opcional), clique em Criar chave > JSON > Criar.

Um arquivo JSON será salvo no seu computador e será necessário nas próximas seções de configuração.

6. Configurar o endpoint detectIntent do Dialogflow para ser chamado pelo app

1. Na pasta do chat, substitua AppointmentScheduler.json pelo arquivo JSON das suas credenciais.
2. Em views.py na pasta do chat, mude GOOGLE_PROJECT_ID = "<YOUR_PROJECT_ID>" para o ID do projeto.

7. Criar e executar o app localmente

Para executar o app Django no seu computador local, é necessário configurar um ambiente de desenvolvimento em Python, incluindo Python, pip e virtualenv. Para mais instruções, consulte Como configurar um ambiente de desenvolvimento em Python.

1. Crie um ambiente Python isolado e instale as dependências:

virtualenv env
source env/bin/activate
pip install -r requirements.txt

2. Execute as migrações do Django para configurar os modelos.

python3 manage.py makemigrations
python3 manage.py makemigrations polls
python3 manage.py migrate

3. Inicie um servidor da Web local.

python3 manage.py runserver

4. No navegador da Web, digite http://localhost:8000/. Uma página da Web simples será exibida, como mostra a captura de tela abaixo:

As páginas do app de exemplo são fornecidas pelo servidor da Web Django executado no seu computador. Quando estiver pronto para avançar, pressione Control+S (Command+S no Macintosh) para parar o servidor da Web local.

8. Como implantar o aplicativo no ambiente padrão do App Engine

Execute o seguinte comando para mover todos os arquivos estáticos do app para a pasta especificada por STATIC_ROOT em 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 notificando que a atualização foi concluída.

9. Teste o cliente de front-end

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 app 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.

10. Produção

11. Quando você estiver pronto para veicular seu conteúdo na produção, altere a variável DEBUG para False em mysite/settings.py.

12. Teste o chatbot

Navegue até https://<your_project_id>.appspot.com e digite o seguinte:

1. Usuário: "Marque um horário para o registro do veículo às 15h de amanhã".
2. O bot de bate-papo responde da seguinte maneira:

3. O Google Agenda reserva a resposta.

13. Limpar

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

Exclua o agente do Dialogflow

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

14. Parabéns

Você criou um chatbot no Dialogflow e o integrou ao Google Agenda. Você já sabe como desenvolver um chatbot.

Saiba mais

Confira os seguintes recursos para saber mais:

• Integrar a API Vision ao Dialogflow
• Amostras de código na página do Dialogflow no GitHub (em inglês)