tutorial do framework flask victor hayashi tiago fujii
TRANSCRIPT
![Page 1: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/1.jpg)
Tutorial do framework Flask
PCS3100
Prof. Reginaldo ArakakiVictor Hayashi
Tiago Fujii
![Page 2: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/2.jpg)
1.
a.
b.
c.
2.
a.
b.
3.
a.
b.
![Page 3: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/3.jpg)
Características/vantagens do Flask
●Microframework web para Python
●Permite criar páginas e aplicações web
●Caixa branca – maior liberdade de desenvolvimento
●Menos monolítico que Django
●Microsserviços
![Page 4: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/4.jpg)
Pré-requisito: Instalação do Python
Instalar Python3: https://www.python.org/downloads/
(Obs: Para seguir este tutorial, adicionar o Python ao PATH do Windows para
executar os comandos do Python no terminal)
![Page 5: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/5.jpg)
Click Add Python 3.8 to PATH
![Page 6: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/6.jpg)
Instalar Flask
Abrir um prompt de comando e digitar o comando:
pip install Flask
![Page 7: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/7.jpg)
pip install Flask
![Page 8: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/8.jpg)
![Page 9: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/9.jpg)
Hello World
Criar arquivo index.pyCopiar o seguinte conteúdo no arquivo: from flask import Flaskapp = Flask(__name__) @app.route("/")def hello(): return "Hello World!" if __name__ == "__main__": app.run()
Salvar arquivo index.py na pasta Documentos
![Page 10: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/10.jpg)
cd Documents
![Page 11: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/11.jpg)
set FLASK_APP=index.py
Obs: no Linux, utilizar: export FLASK_APP=index.py
![Page 12: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/12.jpg)
flask run
Servidor local executando na porta 5000
![Page 13: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/13.jpg)
Acessar endereço localhost:5000 no navegador
Página HTML retornada
![Page 14: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/14.jpg)
Criar uma API em Flask
Motivação:● Desenvolvimento independente● Permite integração entre serviços
Webhook API:1. Usuário faz requisição por meio de HTTP Post, enviando ao servidor data.json2. Flask faz o tratamento de data.json, e retorna response.json
![Page 15: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/15.jpg)
Criar uma API em Flask
Modificar o arquivo index.py from flask import Flask, request app = Flask(__name__) @app.route('/', methods=['POST'])def webhook(): data = request.get_json(force=True) return 'Recebido: {}\n'.format(data['data']) if __name__ == "__main__": app.run()
![Page 16: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/16.jpg)
Pressione Ctrl+C para abortar o servidor Flask
![Page 17: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/17.jpg)
flask run
![Page 18: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/18.jpg)
Enviar requisição à API
Abrir um segundo terminal, e digitar o comando:curl -H \Content-Type:application/json\ -X POST --data "{\"data\":\"123\"}" http://localhost:5000/
Obs.: No Linux, utilizar comando:curl -H \Content-Type: application/json\ -X POST --d "{"data":"123"}" http://localhost:5000/
![Page 19: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/19.jpg)
Enviar comando curl
Resposta do Flask: "Recebido: 123"
![Page 20: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/20.jpg)
1.
a.
b.
c.
2.
a.
b.
3.
a.
b.
![Page 21: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/21.jpg)
Fazer tunelamento na nuvem
O servidor local criado no Flask permite comunicação apenas entre computadores na mesma rede local Para fazer comunicação entre os membros do grupo ou outros serviços web, pode-se utilizar uma ferramenta de tunelamento como o ngrok: https://ngrok.com/
![Page 22: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/22.jpg)
![Page 23: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/23.jpg)
Crie uma conta no ngrok
![Page 24: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/24.jpg)
Siga as instruções para baixar e autenticar o ngrok No Windows, substituir ./ngrok pelo comando ngrok.exe
![Page 25: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/25.jpg)
Navegar para a pasta em que o ngrok.exe foi extraido
![Page 26: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/26.jpg)
ngrok.exe authtoken [código de autenticação]
![Page 27: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/27.jpg)
ngrok.exe http 5000
![Page 28: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/28.jpg)
ngrok inicia tunelamento da porta local 5000 para um endereço web temporário
![Page 29: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/29.jpg)
Comunicação com o servidor Flask
Outros membros do grupo agora podem enviar POST requests para o endereço https:
curl -H \Content-Type: application/json\ -X POST -d "{\"data\":\"123\"}" https://8018c13b.ngrok.io
![Page 30: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/30.jpg)
1.
a.
b.
c.
2.
a.
b.
3.
a.
b.
![Page 31: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/31.jpg)
DialogFlow
● Plataforma de processamento de linguagem
natural do Google
● Permite criação de chatbots
● Integração com Facebook Messenger,
Telegram, LINE, Google Assistant
![Page 32: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/32.jpg)
Integração do DialogFlow com Flask+ngrok
Vantagem: gerar respostas customizadas de acordo com a requisição do usuário (busca em
banco de dados, ativação de controlador)
Exemplo: Chatbot para monitoramento do consumo energético residencial
1.Usuário pergunta para chatbot (DialogFlow) "Quanto consumi esta semana?"
2.DialogFlow processa intenção do usuário e faz requisição POST para endereço do ngrok
3.ngrok faz tunelamento para o servidor Flask
4.Flask consulta base de dados pelo consumo desta semana
5.Flask retorna para o ngrok a mensagem: "Você consumiu 10 kWh esta semana"
6.ngrok retorna para o DialogFlow: "Você consumiu 10 kWh esta semana"
![Page 33: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/33.jpg)
![Page 34: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/34.jpg)
Criando um Chatbot do Google
Baixar os arquivos index.py e response.json disponibilizados e colocar pasta Documents
Link para os arquivos: https://drive.google.com/drive/folders/1nR0NSiuWN8BSCGnwKjetf_bluunfXqfa?usp=sharing
Reiniciar o flask run
Ir no site do DialogFlow: https://dialogflow.com/
Criar uma conta e ir no console: https://dialogflow.cloud.google.com/
![Page 35: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/35.jpg)
Clique com o botão esquerdo do mouse aqui
![Page 36: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/36.jpg)
Clique com o botão esquerdo do mouse aqui
![Page 37: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/37.jpg)
Clique com o botão esquerdo do mouse aqui
![Page 38: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/38.jpg)
Clique com o botão esquerdo do mouse aqui
![Page 39: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/39.jpg)
Clique com o botão esquerdo do mouse aqui
![Page 40: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/40.jpg)
Adicionar frases quanto consumi este mes?
equanto consumi hoje?
![Page 41: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/41.jpg)
Clique com o botão esquerdo do mouse aqui
![Page 42: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/42.jpg)
![Page 43: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/43.jpg)
Clique com o botão esquerdo do mouse aqui
![Page 44: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/44.jpg)
![Page 45: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/45.jpg)
Clique com o botão esquerdo do mouse aqui
![Page 46: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/46.jpg)
Clique com o botão esquerdo do mouse aqui
![Page 47: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/47.jpg)
![Page 48: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/48.jpg)
Clique com o botão esquerdo do mouse aqui
![Page 49: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/49.jpg)
Clique com o botão esquerdo do mouse aqui
![Page 50: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/50.jpg)
Usar endereço do ngrok
![Page 51: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/51.jpg)
Salvar alterações
![Page 52: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/52.jpg)
Perguntar "Quanto consumi esta semana?"
![Page 53: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/53.jpg)
Resposta recebida do Flask
![Page 54: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/54.jpg)
Próximos Passos
● Respostas customizadas, consultando dados de sensores (Pandas) ou ativando sensores
(Blynk)
● Integração com outras plataformas de mensageria (Google Assistant, Telegram, etc)
![Page 55: Tutorial do framework Flask Victor Hayashi Tiago Fujii](https://reader031.vdocument.in/reader031/viewer/2022011803/61d35a9654129067ad1361a6/html5/thumbnails/55.jpg)
Referências
[1] Tutorial de instalação do Flask: https://flask.palletsprojects.com/en/1.1.x/quickstart/ [2] Webhook flask: https://ogma-dev.github.io/posts/simple-flask-webhook/ [3] Site do ngrok (tunelamento): https://ngrok.com/
[4] Guia para webhooks do DialogFlow: https://cloud.google.com/dialogflow/docs/fulfillment-webhook [5] Código-fonte do chatbot para monitoramento do consumo residencial: https://github.com/tiagoyukio12/webhook