Esta página foi traduzida pela API Cloud Translation.

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

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

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

Pré-requisitos

Antes de continuar, conclua os seguintes codelabs:

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ê vai configurar e executar um cliente de front-end do Django para o Dialogflow.
Você vai implantar o cliente de front-end do Django no Google Cloud no App Engine.
Você vai testar um app do Dialogflow nesse front-end personalizado.

O que é necessário

Conhecimento básico de Python
Conhecimentos básicos do Dialogflow

Você vai usar a experiência de conversa do Agendador de consultas que criou antes 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 um pedido de consulta pelo front-end, que vai chamar a API detectIntent do Dialogflow para agendar um horário na data e hora solicitadas. Em seguida, o fulfillment do Dialogflow envia uma solicitação ao Google Agenda para definir o horário e retorna uma confirmação ao usuário pelo Dialogflow.

O resultado final será como este:

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

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

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 app localmente, é necessário instalar e usar uma cópia local do Cloud SQL Proxy no ambiente de desenvolvimento. Para mais informações, consulte Sobre o Cloud SQL Proxy.

Para executar tarefas administrativas básicas na 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 proxy do Cloud SQL é 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

Crie uma instância de segunda geração do Cloud SQL para MySQL. Atribua à instância o nome "polls-instance" ou algo parecido. Pode levar alguns minutos para a instância ficar pronta. Depois disso, ela vai aparecer na lista de instâncias.
Use a ferramenta gcloud para executar o comando a seguir, em que [YOUR_INSTANCE_NAME] representa o nome da sua instância. Anote o valor mostrado para o nome da conexão da instância para a próxima etapa, que é mostrado no formato [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME].

gcloud sql instances describe [YOUR_INSTANCE_NAME]

Como alternativa, clique na instância para conferir 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 testes locais. Mantenha o Cloud SQL Proxy em execução enquanto testa o app 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.

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 "enquetes" como nome.
Crie uma conta de usuário usando o Cloud Console para a instância do Cloud SQL chamada polls-instance.

Definir as configurações do banco de dados

Abra mysite/settings.py para edição.
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.
Na linha que diz ‘HOST': ‘cloudsql/ [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME],', substitua [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME] pelo valor que você registrou na seção anterior.
Execute o comando a seguir e copie o valor do nome da conexão da instância para a próxima etapa.

gcloud sql instances describe [YOUR_INSTANCE_NAME]

Substitua [YOUR-CONNECTION-NAME] pelo valor que você registrou na seção anterior.
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]

Feche e salve settings.py.

No console do Dialogflow, clique em . Na guia Geral ao lado de ID do projeto, clique em Google Cloud .
Clique em Menu de navegação ☰ > APIs e serviços > Credenciais.
Clique em Criar credenciais > Conta de serviço.
Em Detalhes da conta de serviço, insira "appointment-scheduler" como o Nome da conta de serviço e clique em Criar.

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

Um arquivo JSON será baixado no seu computador, e você vai precisar dele nas próximas seções de configuração.

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

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

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

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

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

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

Inicie um servidor da Web local.

python3 manage.py runserver

No navegador da Web, digite http://localhost:8000/. Você vai ver uma página da Web simples, como na captura de tela a seguir:

As páginas do app de exemplo são fornecidas pelo servidor da Web do Django em execução no seu computador. Quando estiver 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 em settings.py:

python3 manage.py collectstatic

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

gcloud app deploy

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

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

Desta vez, sua solicitação é veiculada 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 tráfego novo.

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

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

A 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

Clique em ao lado do agente.

Na guia Geral, role até a parte de baixo e clique em Excluir este agente.
Digite Excluir na janela que aparece e clique em Excluir.

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
Exemplos de código na página do Dialogflow no GitHub