Flask para Python: Abertura, CRUD e Deploy com Heroku

Nível: técnico

Introdução ao Flask para Python: do zero ao CRUD com deploy no Heroku

Este artigo descreve o processo de criação de uma aplicação CRUD com Flask, desde a configuração do ambiente até a disponibilização em Heroku, seguindo os blocos de construção apresentados no texto de referência.

Contexto e objetivo

Este artigo apresenta uma introdução ao Flask para Python e descreve, de forma objetiva, como partir do zero até a construção de uma aplicação básica de CRUD. A aplicação é apresentada como um exercício denominado taskmaster, que funciona como uma lista de tarefas com operações de criação, leitura, atualização e exclusão. O fluxo inclui também a ideia de implantação, com foco em Heroku, conforme o conteúdo fornecido.

O conteúdo assume conhecimento prévio de Python e HTML. O tutorial demonstra como criar a aplicação, estruturar o código, trabalhar com templates, conteúdo estático e persistência de dados, utilizando SQLite para simplificar o exemplo. A entrega foca na clareza, organização e fidelidade ao texto de referência, sem introduzir informações adicionais não presentes na fonte.

A seguir, os blocos de construção essenciais observados no material de origem, organizados para facilitar a leitura técnica e a reprodução passo a passo do fluxo completo.

Requisitos e Preparação do Ambiente

É necessário instalar Python 3.6 ou superior, bem como o gerenciador de pacotes pip. Em seguida, é recomendado criar um ambiente virtual para isolar as dependências do projeto. A base de conhecimento descreve a instalação do pacote virtualenv via pip e a criação do diretório do projeto com a configuração de um ambiente virtual nomeado de “env”.

O fluxo descrito inclui os seguintes passos:

Instalar Python (versões 3.6 ou superiores).
Verificar as versões atuais de Python e pip.
Instalar o virtualenv com pip.
Criar o diretório do projeto (por exemplo, flask introduction).
Configurar e ativar o ambiente virtual (env).
Instalar pacotes necessários, principalmente Flask e Flask SQLAlchemy.

O material sugere também a utilização de um editor/IDE de código, como o Visual Studio Code, para facilitar a edição dos arquivos do projeto. O trecho orienta abrir o terminal na pasta do projeto e preparar o ambiente para o desenvolvimento.

Estrutura do Projeto e Arquivos Iniciais

Após a configuração do ambiente, o próximo passo é criar a estrutura do projeto. O conteúdo descreve a criação de pastas e arquivos básicos:

Uma pasta de projeto com nomes como flask introduction.
Um arquivo principal, tipicamente app.py, para o código da aplicação Flask.
Pastas para conteúdo estático (static) e para templates (templates).

O código inicial de uma aplicação Flask, segundo o material, envolve a importação de Flask, a criação de uma instância da aplicação, a definição de uma rota para a página inicial e a execução do servidor com debug ativado. O exemplo descreve um retorno simples de “Hello World” para confirmar o funcionamento básico da aplicação.

Para iniciar o servidor, o conteúdo sugere rodar o seguinte comando no terminal:

python3 app.py

Ao acessar o localhost:5000, a página deve exibir “Hello World”. O texto prossegue introduzindo a necessidade de adicionar conteúdo estático, templates e a evolução para o uso de Jinja2 para renderizar templates, bem como o uso de render_template para retornar páginas HTML renderizadas ao invés de texto simples.

Templates, Heranças de Template e Conteúdo Estático

A seguir, o fluxo descreve a configuração de templates com o uso de início de templates base (base.html) e a herança de templates para reduzir repetição de código. O conteúdo evidencia a utilização de blocos (block) para inserir trechos de código específico em páginas que herdarem o template base.

O material demonstra ainda a criação de um arquivo index.html dentro de templates, que utiliza o wrapper do template base. A renderização de variáveis é exibida por meio de tags do Jinja2 para inserir conteúdo dinâmico na página.

Em paralelo, o texto explica a organização de conteúdo estático, como CSS e JavaScript. Cria-se uma pasta static com subpasta css e um arquivo main.css contendo regras para a formatação da página, como remoção de margens, tipografia e aparência de elementos. A ligação do CSS é realizada no HTML através de utilitários do Jinja2 para referenciar recursos estáticos, evitando caminhos diretos no código.

Para ilustrar, o conteúdo descreve o seguinte trecho de linkagem de CSS usando a função de URL do Flask:

<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">

Essa prática permite que o CSS seja carregado corretamente a partir do diretório estático do projeto, mantendo a organização e facilitando a portabilidade do código entre ambientes.

Banco de Dados com SQLAlchemy e Modelo Todo

O tutorial avança para a integração de banco de dados utilizando SQLAlchemy com Flask. O trecho cobre a configuração da URI do banco de dados, preferindo SQLite para simplicidade, apontando para um arquivo test.db dentro do projeto. Em seguida, é mostrado o processo de inicializar o banco de dados através do objeto SQLAlchemy.

O modelo de dados é apresentado na forma de uma classe chamada Todo, herdando de db.Model, com os seguintes campos:

Id: inteiro, chave primária
Content: texto com no máximo 200 caracteres, não nulo
Date Created: DateTime, com valor padrão definido

Ainda nesta seção, o conteúdo explica a utilização de uma função __str__ (ou equivalente) para retornar uma cadeia com a identificação da tarefa quando um objeto Todo é convertido para string, facilitando a leitura durante debug ou no shell.

O passo seguinte envolve a criação da base de dados via shell interativo do Python, importando o objeto db do arquivo app.py e executando db.create_all(), para gerar as tabelas conforme o modelo definido.

O conteúdo descreve a seguir o uso de SQLite para persistência, mantendo a simplicidade do exemplo, sem a necessidade de bancos externas neste estágio.

Implementação do CRUD

Com a base do projeto pronta, o próximo passo é a implementação prática do CRUD (Criar, Ler, Atualizar, Excluir). O fluxo apresentado envolve a construção de uma página HTML com uma tabela que exibe as tarefas atuais, incluindo colunas para Task, Date adicionado e Actions (Delete e Update).

A criação (Create) é feita via um formulário simples com um campo de texto para o conteúdo da tarefa e um botão de envio. Ao submeter, o servidor processa a requisição HTTP do tipo POST, extrai o valor do campo de conteúdo, cria uma nova entidade Todo no banco de dados e realiza o commit. Em seguida, o usuário é redirecionado de volta à página inicial para ver a nova tarefa inserida na tabela.

O fluxo de leitura (Read) consiste na obtenção de todas as tarefas, ordenadas pela data de criação, para exibir na tabela. O código descreve a consulta com algo como Todo.query.order_by(Todo.date_created).all() para coletar as entradas existentes.

A atualização (Update) envolve uma segunda página (update.html) que recebe o ID da tarefa a ser atualizada, carregando o texto atual da tarefa para edição. O conteúdo é atualizado a partir do formulário enviado por POST, com o comando de commit para persistir as alterações no banco.

Para a exclusão (Delete), é fornecida uma rota que recebe o ID da tarefa, busca o registro correspondente com uma chamada similar a Todo.query.get_or_404(id), executa a deleção e faz o commit em seguida, redirecionando o usuário de volta para a lista de tarefas atualizada.

O artigo menciona ainda a necessidade de controlar o fluxo HTML com validações mínimas, de modo a evitar comportamentos inesperados quando a operação não pode ser concluída, retornando mensagens simples de erro.

Além disso, o layout da página é ajustado com CSS para melhorar a apresentação, incluindo alinhamento central, espaçamento entre elementos e uma organização visual mais agradável, com foco em legibilidade e usabilidade.

O código para as rotas da aplicação envolve, entre outros, atributos de rota com methods=["GET", "POST"] para permitir envio de formulários, além de integração com o template de listagem de tarefas para exibir dinamicamente os itens do banco de dados.

Deploy em Heroku

O caminho para disponibilizar a aplicação na web, de acordo com o conteúdo base, envolve o Heroku, uma plataforma de hospedagem que suporta múltiplas linguagens, incluindo Python, e facilita a criação de bancos de dados na nuvem. O material descreve a criação de uma conta gratuita, a instalação da Heroku CLI e o login via terminal.

O tutorial orienta a configuração de um repositório Git para a aplicação, o uso de gunicorn como servidor de aplicação e a geração de um file chamado Procfile para indicar o comando de inicialização no Heroku, com o formato web: gunicorn app:app.

Para inserir dependências, o conteúdo descreve a prática de gerar um arquivo requirements.txt com as dependências congeladas (via pip3 freeze > requirements.txt), bem como o uso de git para versionar e enviar o código para o Heroku com comandos como git push heroku master.

O material também aborda a necessidade de um arquivo Procfile para orientar o Heroku sobre como iniciar a aplicação, especialmente quando não se utiliza um servidor próprio. A existência desse arquivo é destacada como essencial para o funcionamento do deployment no Heroku.

Ao fim do fluxo, o código é confirmado para o Heroku, o ambiente pode iniciar a aplicação, e o conteúdo descreve a verificação de que as páginas estão funcionando: criação, atualização e exclusão de tarefas na instância pública da aplicação.

Blocos de código representativos

Exemplo de configuração básica de Flask (interpretativo, conforme descrição)

# from flask, import Flask (segundo a descrição)
# app = Flask(__name__)
# @app.route("/")
# def index():
#     return "Hello World"
# if __name__ == "__main__":
#     app.run(debug=True)

Estrutura de pastas sugerida

project/
  app.py
  templates/
    index.html
  static/
    css/
      main.css

Linkagem de CSS com url_for

<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">

Definição de modelo Todo (conceitual)

class Todo(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    content = db.Column(db.String(200), nullable=False)
    date_created = db.Column(db.DateTime, default=datetime.utcnow)
    def __repr__(self):
        return f"Task {self.id}"

Procfile para Heroku

web: gunicorn app:app

Comando de criação de banco com SQLAlchemy (conceitual)

with app.app_context():
    db.create_all()

Exemplo de rota de criação (tipicamente via POST)

@app.route("/", methods=["GET", "POST"])
def index():
    if request.method == "POST":
        content = request.form["content"]
        new_task = Todo(content=content)
        db.session.add(new_task)
        db.session.commit()
        return redirect("/")
    tasks = Todo.query.order_by(Todo.date_created).all()
    return render_template("index.html", tasks=tasks)

Front-End Developer / Designer

Flask para Python: CRUD total + Deploy no Heroku em 5 passos