Há uns dias eu mostrei uma API interessante com dados sobre a covid-19, que é esta aqui:
apiCovid19Na ocasião eu falei que poderíamos usar essa API para brincar com ela e criar alguns projetos aqui pra animar nossa quarentena.
Resolvi que inicialmente ia dar uma brincada com Flask e criar um site simples de divulgação dos casos. Comecei com os casos no Brasil por Estado, atualizados até hoje.
A ideia é montar inicialmente uma tabela assim, obtendo os dados fazendo uma requisição para a API:
Dando prosseguimento com o projeto, tenho vontade de criar tabelas de acordo com os endpoints da API, como quantidade de casos mundiais, quantidade de mortes, etc.
Também tou a fim de plotar uns mapas no site, uns gráficos.
Não fiz nada disso ainda, só essa tabela acima, mas vamos evoluindo de acordo com os dias e vendo no que isso vai dar. Pode resultar em algo interessante no decorrer da nossa evolução diária aqui.
Então, sem mais delongas, vamos ver do que vamos precisar.
Inicialmente, preciso do Python instalado. Neste tópico explico como instalar:
Breve introdução (não tão breve assim) - Linguagem escolhida - Tecnologia - Bastter.comCom o Python instalado, criem uma pasta e criem um ambiente virtual com Python dentro dessa pasta. Aqui eu criei uma pasta e nomeei de "covid":
$ Projetos/covid master
> python -m venv venv
Agora precisamos habilitar nosso ambiente virtual e instalar o que precisamos.
Vou usar o microframework Flask (
Welcome to Flask — Flask Documentation (1.1.x)) para gerar nosso site. Para estilizar de forma rápida sem mexer muito com CSS vou usar o Bootstrap (
Bootstrap · The most popular HTML, CSS, and JS library in the world.) por meio da lib flask-bootstrap (
Flask-Bootstrap — Flask-Bootstrap 3.3.7.1 documentation).
$ Projetos/covid master
> source venv/bin/activate
(venv) $ Projetos/covid master
> pip install flask flask-bootstrap
Se você usa Windows, seu ambiente virtual deve ser ativado com um comando um pouco diferente:
/> venv\Scripts\activate
Vocês verão que deu certo a ativação quando aparecer o (venv) na frente do path no terminal.
Agora com as libs instaladas, vamos criar nosso primeiro programa usando o Flask. Criem um arquivo chamado main.py e vamos começar a escrever nele:
# main.py
# Imports necessários
from flask import Flask
from flask_bootstrap import Bootstrap
# Criando nosso app
app = Flask(__name__)
# Etapa necessária para estilizar nosso app usando o Bootstrap
Bootstrap(app)
# Criando nossa primeira rota
@app.route('/')
def index():
return "<h1>Casos de Covid-19 no Brasil</h1>"
# Rodando nosso app
app.run()
Acima, importei para nosso código o Flask e o flask-bootstrap.
Em seguida, criei nosso app, uma instância de Flask.
Em seguida eu defini que nosso app será estilizado usando o Bootstrap.
Por fim, temos o decorador responsável por executar nosso site na rota "/", no @app.route.
Ao acessar a url "/" no nosso servidor local, a função index será executada, e o retorno dela é um código HTML cru, com o título provisório do nosso site.
Com o app.run(), eu rodo nosso app. Basta executar nosso programa agora que veremos, no endereço
http://127.0.0.1:5000/ a seguinte tela:
Tá. Tá muito feio ainda. Mesmo o título ainda não está estilizado do jeito que o bootstrap faz.
Vamos criar uma pasta chamada templates e dentro dela inserir um arquivo index.html:
Nosso index.html vai ter essa cara:
<!DOCTYPE html>
{% extends "bootstrap/base.html" %}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Covid-19</title>
</head>
<body>
{% block content %}
<div class="container">
<h1 class="text-center">Casos de Covid-19 no Brasil</h1>
</div>
{% endblock %}
</body>
</html>
Tem umas linhas interessantes aí:
{% extends "bootstrap/base.html" %}
Essa linha acima é a responsável por enviar o Bootstrap para meu site.
{% block content %}
{% endblock %}
Dentro desses dois blocos será onde iremos inserir nossa página que terá dados dinamicamente gerados pelo Flask
Observem que já adicionei algumas classes como a classe container e a classe text-center.
Dessa forma, nosso site já tem um pouco mais de cara de Bootstrap cru.
Mas para rodar esse template usando o Flask, vamos mudar duas linhas no código. A primeira é nos imports:
# Imports necessários
from flask import Flask, render_template
render_template é uma função necessária para renderizar nosso template, nosso index.html recém criado, dentro da função index definida acima.
# Criando nossa primeira rota
@app.route('/')
def index():
return render_template('index.html')
Observem que alterei a última linha, que não mais tem HTML cru, e sim a renderização do template recém-criado.
Rodando nosso main.py agora:
Tá com uma cara um pouco melhor.
E como irei fazer com que o Flask envie dados de forma dinâmica para o template?
Assim:
# Criando nossa primeira rota
@app.route('/')
def index():
doenca = "Covid-19"
return render_template('index.html', doenca=doenca)
Criei uma variável "doenca", com a string "Covid-19" atribuída a ela, e passei essa variável como argumento na função render_template.
Agora preciso ir no meu index.html e alterar essa linha do título:
{% block content %}
<div class="container">
<h1 class="text-center">Casos de {{ doenca }} no Brasil</h1>
</div>
{% endblock %}
Salvando meus dois arquivos e rodando o main.py agora:
Nada muda. Mas se eu for no main.py e mudar a string para "Varíola":
# Criando nossa primeira rota
@app.route('/')
def index():
doenca = "Varíola"
return render_template('index.html', doenca=doenca)
Ao rodar nosso main.py:
Será dessa forma que iremos acessar a API que citei acima, puxar os dados da API e preencher uma tabela com o nome do Estado e com a quantidade de casos.
Mas isso continuaremos amanhã.
Este novo projeto já está versionado no GitHub, no repositório que criei para nossos projetos de quarentena:
QuarantineDaysOfCode/covid at master · ThiagoDiasV/QuarantineDaysOfCode · GitHub
