CURSO WEB PYTHON

FRAMEWORK FLASK

Jonathas H. Miante
@campcodebrasil
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Introdução ao Flask

Desenvolvimento Web Simples e Poderoso

Bem-vindo à sua jornada no mundo do desenvolvimento web com Flask! Se você está buscando
construir aplicações web de forma rápida, eficiente e com uma curva de aprendizado amigável,
você está no lugar certo.

Flask é um framework web em Python que se destaca por sua simplicidade e flexibilidade. Criado
para ser fácil de entender e rápido para começar, Flask é a escolha ideal para desenvolvedores
que desejam construir aplicações web robustas sem a complexidade desnecessária.

Nesta apostila, vamos explorar os fundamentos do Flask, desde a configuração inicial até a
criação de aplicações web dinâmicas e interativas. Ao longo do caminho, vamos abordar
conceitos cruciais, como roteamento, templates, interação com bancos de dados e autenticação
de usuários

Sumário

1. Módulo Básico ..........................................................................................................................4

Preparação de Ambiente ..........................................................................................................5
Instalando o Flask .....................................................................................................................5
Exemplo Básico de uma aplicação Flask ...................................................................................6
Estrutura de um Projeto Flask ..................................................................................................7
Primeiro Projeto (Projeto Básico) .............................................................................................9
Reutilizando Arquivos HTML ..................................................................................................12
Função extends ..................................................................................................................12
Função include ...................................................................................................................13
Trabalhando com arquivos Estáticos ......................................................................................14
Enviando dados do Servidor para o Navegador ......................................................................17
Utilizando Link Dinâmico para rotas .......................................................................................20
Rotas com parâmetros ...........................................................................................................21
2. Módulo Intermediário ............................................................................................................23
Banco de Dados ......................................................................................................................24
Models ...................................................................................................................................26
Formulários ............................................................................................................................27
Campos ..............................................................................................................................29
Validações ..........................................................................................................................29

2
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Salvando Informações no Banco de Dados .............................................................................30

Trabalhando um pouco com Front-End ..................................................................................33
Recuperando Informações no Banco de Dados ......................................................................36
Módulo Avançado ......................................................................................................................39
Controle de Login ...................................................................................................................39
Cadastro de Usuário ...........................................................................................................41
Criando rota para Login ......................................................................................................43
Criando Rota para Logout ...................................................................................................45
Estrutura de Decisão if no HTML com Flask ...........................................................................46
Permissão de Acesso para Usuários Logados .........................................................................47
Vincular registros a outras tabelas (FK) ..................................................................................47
Trabalhando com Tipo de dados de arquivos .........................................................................50
Trabalhando com Variável de Ambiente .................................................................................53
GitHub ....................................................................................................................................54
Instalação ...........................................................................................................................54
Criando Repositório............................................................................................................55
Preparando Repositório e Arquivo .gitignore .....................................................................56
Atualizando Repositório .....................................................................................................57
Deploy ....................................................................................................................................58
Render.com (Opção Gratuita) .............................................................................................58
Utilizando CPanel ...............................................................................................................65

3
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

1. Módulo Básico

O que iremos aprender nesse capítulo?

Preparação do Ambiente:
Configuração do ambiente de desenvolvimento para Flask, incluindo a instalação do Flask,
criação de um ambiente virtual e configuração do ambiente de trabalho.

Estrutura de um Projeto Flask:

Exploração da estrutura básica de pastas e arquivos em um projeto Flask, incluindo o
entendimento dos diretórios static, templates e arquivos essenciais como main.py.

Reutilização de Arquivos HTML:

Uso de templates para reutilizar componentes HTML em várias páginas, permitindo uma
estrutura modular e consistente em todo o projeto.

Arquivos Estáticos:
Utilização de arquivos estáticos, como CSS, JavaScript e imagens, para melhorar a apresentação
e a funcionalidade das páginas web.

Envio de Dados do Servidor para o Navegador:

Compreensão de como enviar dados dinâmicos do servidor Flask para o navegador,
possibilitando a exibição de informações atualizadas nas páginas web.

Links Dinâmicos e Rotas com Parâmetros:

Implementação de rotas dinâmicas que respondem a diferentes URLs e aceitam parâmetros
variáveis, permitindo a criação de páginas dinâmicas com informações específicas.

Objetivos do Módulo:
• Estabelecer uma base sólida para o desenvolvimento web usando Flask.
• Capacitar os alunos a criarem uma estrutura de projeto organizada e eficiente.
• Entender a importância e aplicação dos arquivos estáticos e templates para a
construção de interfaces dinâmicas.
• Facilitar a comunicação entre o servidor e o navegador para exibir dados dinâmicos e
criar páginas dinâmicas.

4
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Preparação de Ambiente

Antes de tudo, é necessário ter o Python instalado. Flask é um framework web para Python. Você
pode verificar a presença do Python em seu sistema digitando python --version no terminal ou
prompt de comando. Caso não possua o Python instalado, pode obter o instalador no site oficial,
www.python.org/

Após instalado o Python, deve ser criado um ambiente virtual para seu projeto, para isso no
terminal digite o seguinte comando:

python -m venv .venv

Com isso irá criar em seu projeto uma pasta chamada “.venv” contendo uma versão do python
e isolando as bibliotecas necessárias para seu projeto.

Para ativar o ambiente virtual basta digitar no terminal o seguinte comando:

.venv\Scripts\activate

Instalando o Flask

Antes de iniciarmos a construção de nossa aplicação, devemos instalar a biblioteca em nosso

ambiente, para isso após ativar o ambiente virtual, digite o seguinte comando no terminal:

pip install flask

5
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Exemplo Básico de uma aplicação Flask

Abaixo veremos como é construído uma aplicação básica com flask.

1. from flask import Flask

2.
3. app = Flask(__name__)
4.
5. @app.route('/')
6. def homepage():
7. return 'Minha Primeira Página Flask'
8.
9. if __name__ == '__main__':
10. app.run(debug=True)

Vamos entender o código acima:

Na linha 1, estamos realizando a classe Flask do framework flask, será essa classe que será
responsável por instanciar nossa aplicação.

Na linha 3, estamos criando o aplicativo, é passado como parâmetro a variável __name__ que
serve para indicar que o nome da aplicação será o nome do arquivo py

Na linha 5, estamos definindo a rota para a view (entenderemos com mais detalhes no módulo
VIEW), no exemplo, estamos definindo a rota raiz da aplicação.

Na linha 6, estamos iniciando a função da view

Na linha 7, estamos retornando o texto ‘Minha Primeira Página Flask’ para ser exibido quando a
aplicação estiver executando e a rota raiz for chamada

Na linha 9, estamos verificando se o arquivo que está sendo executado é o arquivo main.py, se
for irá seguir para linha 10

Na linha 10, estamos iniciando a aplicação, definindo como parâmetro o debug=True, que serve
para depurar o código, ou seja, sempre que houver uma alteração no código, a aplicação será
reiniciada.

6
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Estrutura de um Projeto Flask

Estrutura de Arquivos

No exemplo acima, construímos uma aplicação Flask sem organizar na estrutura de um projeto
Flask, a partir de agora iremos começar a organizar essa estrutura.

A estrutura de um projeto Flask é construída separando os arquivos de acordo com suas

funcionalidades, sendo que na raiz do projeto, iremos manter o arquivo main.py (podendo ser
outro nome se desejar, por convenção o arquivo normalmente é chamado como main.py ou
run.py), esse arquivo será responsável por iniciar a aplicação.

O restante do projeto será incluso dentro de uma pasta com o nome da aplicação, ou podendo
chamar de “app”, dentro dessa pasta teremos a seguinte estrutura

• __init__.py - Arquivo responsável por inicializar o módulo, será incluso nele a construção
da aplicação flask
• form.py - Arquivo responsável por manter os formulários da aplicação
• models.py - Arquivo responsável por manter os modelos (comunicação com o banco de
dados) da aplicação
• routes.py - Arquivo responsável por manter as views da aplicação
• templates - Pasta responsável por manter os arquivos HTML
• static - Pasta responsável por manter os arquivos estáticos (css, img, js, etc...)

Um projeto Flask pode contre uma ou mais aplicações, para cada aplicação deve ser respeitado
a estrutura acima, mantendo uma pasta na raiz do projeto para cada aplicação.

A estrutura final de um projeto com uma aplicação seria da seguinte forma:

Meu_projeto/
|-- app/
|-- |-- static/
|-- |-- |-- css/
|-- |-- |-- |-- style.css
|-- |-- templates
|-- |-- |-- base.html
|-- |-- |-- index.html
|-- |-- |-- about.html
|-- |-- __init__.py
|-- |-- form.py
|-- |-- models.py
|-- |-- routes.py
|-- main.py

7
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Estrutura MVC

O Flask não possui uma estrutura de MVC (Model-View-Controller) rígida como alguns outros
frameworks. No entanto, você pode aplicar conceitos semelhantes de organização do código
para alcançar uma separação de preocupações semelhante.

Comportamento de um projeto Flask

Vamos entender a imagem acima:

1. O Usuário interage no navegador

• Digitando a url e rota (a rota é tudo após a primeira / após a url) (Método GET)
• Enviando dados em Formulários (Método POST)

2. O navegador envia os dados para a Rota, que “chama” sua função

3. Na função da rota, pode ou não se comunicar com o Models (caso precise utilizar
algum dado que esteja armazenado em banco de dados)

4. O Models é responsável pela comunicação com o banco de dados

5. Após a função da rota processar todas as informações, devolve para o navegador

renderizar a nova página para o usuário.

8
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Primeiro Projeto (Projeto Básico)

Para esse projeto, iremos construir um projeto já com a estrutura recomendada, ou seja,
vamos construir de acordo com o tópico anterior, para isso, vamos iniciar com os seguintes
passos:

1. Iniciando Projeto

Abra essa pasta com seu editor de código preferido, recomendamos o uso do PyCharm
ou VS Code

Dentro dessa pasta repita o processo da preparação de ambiente e instalação do Flask

2. Preparando Projeto

Dentro dessa pasta iremos criar algumas estruturas e arquivos:

• O primeiro arquivo que iremos criar será o arquivo __init__.py

from flask import Flask

app = Flask(__name__)

• O segundo arquivo que iremos criar será o routes.py

from flask import render_template

from app import app

@app.route('/')
def homepage():
return render_template('index.html')

Neste arquivo, estamos importando a função render_template que serve para

renderizar um arquivo HTML.

Após importamos o aplicativo app que está dentro do módulo app (criado na etapa
anterior)

Depois definimos a rota raiz e criamos a função com o retorno da renderização do

arquivo ‘index.html’

9
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

• O terceiro arquivo que iremos criar, precisaremos criar a pasta templates,

dentro da pasta app, depois iremos criar o arquivo HTML dentro da pasta
templates.

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Primeiro Projeto Flask</title>
</head>
<body>

<h1>Bem Vindos ao Primeiro Projeto Flask</h1>

<p>Está é a página Raiz do projeto</p>

</body>
</html>

Esse é um arquivo básico de HTML, não vamos entrar em detalhes no front-end

da aplicação nessa apostila, caso não conheça as ferramentas de
desenvolvimento Front-End, indico estudar as seguintes linguagens:

o HTML
o CSS
o JavaScript

• Agora iremos voltar no arquivo __init__.py, precisamos importar a view

homepage dentro desse arquivo

from flask import Flask

app = Flask(__name__)

from app.routes import homepage

A importação das views deve ser realizada após a criação do app, pois as views
dependem do app para funcionar, caso seja importado antes, sua aplicação irá
“quebrar” pois estará com referência circular.

10
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

• Por fim devemos voltar na raiz da aplicação e criar o arquivo main.py

from app import app

if __name__ == '__main__':
app.run(debug=True)

Nesse arquivo iremos importar o app e inicializar a aplicação

Agora podemos rodas o arquivo main.py, onde será inicializado o servidor, criando
assim nosso primeiro projeto Flask

No final obteremos a seguinte estrutura de arquivos:

projeto_basico/
|-- app/
|-- |-- templates
|-- |-- |-- index.html
|-- |-- __init__.py
|-- |-- routes.py
|-- main.py

11
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Reutilizando Arquivos HTML

Função extends

A função extends serve para reutilizar um arquivo HTML, ou seja, podemos criar um arquivo base
e estender sua estrutura para outros arquivos, assim reduzindo drasticamente os códigos,
melhorando a manutenção.

Para isso, vamos copiar o conteúdo do arquivo index.html em um novo arquivo, chamado
base.html.

Após isso, vamos definir blocos onde poderá ser editado o conteúdo em outros arquivos, esses
blocos tem a seguinte sintaxe: {% block NOME_BLOCO %} CONTEÚDO DEFAULT {% endblock %}

No conteúdo default pode criar conteúdos, caso o bloco não seja chamado no arquivo que está
estendendo o código, o conteúdo padrão será exibido, esse conteúdo não é obrigatório,
podendo não possuir nenhum conteúdo.

No nosso arquivo base, vamos criar dois blocos, um para o título da pagina e outro para o
conteúdo da página.

O arquivo base.html ficará da seguinte forma:

Note que no bloco ‘title ‘ criamos um conteúdo padrão, com isso caso não “chamarmos” esse
bloco no arquivo que está estendendo o arquivo base, manteremos o padrão.

Quando “chamamos” o bloco, todo conteúdo default do bloco é apagado e substituído pelo que
você está incluindo no arquivo novo.

Agora vamos editar nosso arquivo index, removendo todos os conteúdos em comum com o base
e alterando o conteúdo do bloco ‘content’, o arquivo index.html ficará da seguinte forma:

Note que na primeira linha utilizamos a sintaxe {% extends 'base.html' %} que serve
para informarmos que esse arquivo irá estender o arquivo base.html

12
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Se executarmos nosso código, não haverá nenhuma alteração no conteúdo,

porém todos os arquivos que estenderem o arquivo base.html serão
atualizados quando modificarmos o arquivo base.html.

Função include

Outra forma de reutilizar arquivos html é utilizando a função include, que serve para incluir o
conteúdo de outro arquivo html, para isso vamos criar um arquivo chamado lista.html, esse
arquivo irá conter uma lista das funcionalidades do flask no HTML que estamos aprendendo,
por hora iremos manter dois itens nessa lista, sendo as funções que acabamos de aprender.

Arquivo lista.html

Agora iremos incluir essa lista dentro do arquivo index.html, dentro do bloco contente iremos
incluir a seguinte linha:

{% include 'lista.html' %}

Isso fará que o conteúdo do arquivo lista.html seja incorporado no arquivo index.html

Ao executarmos nosso projeto, teremos o seguinte resultado:

13
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Trabalhando com arquivos Estáticos

Os arquivos estáticos desempenham um papel crucial no desenvolvimento web, aprimorando a

experiência do usuário e fornecendo recursos visuais e funcionais para uma aplicação. No
contexto do Flask, uma estrutura web em Python, os arquivos estáticos desempenham um papel
importante na construção de interfaces web dinâmicas e atraentes.

O que são Arquivos Estáticos?

Arquivos estáticos consistem em recursos que não são dinamicamente gerados pelo servidor
web. Esses recursos incluem folhas de estilo (CSS), scripts (JavaScript), imagens, fontes e outros
tipos de arquivos que são carregados diretamente pelo navegador do usuário.

Para trabalharmos com arquivos estáticos, devemos criar na pasta do projeto (app) uma pasta
se chamada ‘static’

Dentro dessa pasta, separamos os arquivos por categoria, uma pasta para cada, sendo img para
imagens, css para arquivos css e js para arquivos Javascript (essa abordagem não é obrigatória,
porém é uma boa prática)

Para o projeto que estamos construindo, vamos criar a pasta para arquivos de imagens e para
arquivos css, ficando com a seguinte estrutura de arquivos:

Note que já incluímos um arquivo em cada pasta, sendo na pasta css é um arquivo em branco,
onde estaremos incluindo algumas classes para o HTML estar utilizando e na pasta img, incluímos
um arquivo de imagem com o logo do Flask.

14
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Utilizando arquivos estáticos

Para utilizarmos arquivos estáticos, precisamos primeiro atualizar nosso arquivo de rotas,
incluindo a importação da função url_for

O arquivo ficará da seguinte forma:

Após isso, vamos abrir o arquivo index.html e incluir o logo do flask, para isso, vamos incluir a
seguinte linha em nosso código:
<img src="{{ url_for('static', filename='img/flask.png') }}">

A tag img, informa que iremos incluir uma imagem no HTML e o atributo src é o local da imagem,
utilizamos o url_for para buscar o caminho do arquivo estático, passando como parâmetro o
nome da pasta e o nome do arquivo (incluindo a subpasta)

O arquivo index.html ficará da seguinte forma:

Resultado no navegador:

15
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Iremos incluir também o arquivo css, porém iremos fazer isso no arquivo base.html

Dentro do bloco HEAD vamos incluir a linha:

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

Na tag BODY vamos incluir o atribulo class=”text-blue1”

Ficando com o Código:

No Arquivo style.css vamos criar a classe text-blue1

Com essas alterações teremos o seguinte resultado:

16
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Enviando dados do Servidor para o Navegador

Uma das funcionalidades mais importantes em uma aplicação web é a capacidade de transmitir
dados do servidor (back-end) para o navegador do usuário (front-end). No Flask, isso pode ser
alcançado de várias maneiras, permitindo que dados dinâmicos sejam exibidos nas páginas da
web.

Neste tópico iremos trabalhar com dois formatos, sendo:

1. Renderização de Templates com Dados

O Flask permite que você passe variáveis para os templates durante a renderização,
tornando possível exibir dados dinâmicos nas páginas HTML.

Para isso, dentro da função da rota, podemos criar a variável que iremos enviar para o
navegador (essa variável pode estar sendo recuperada de um banco de dados por exemplo)

Após criar a variável, vamos incluir no retorno do render_template, ficando com a função da
rota da seguinte forma:

No arquivo HTML, podemos recuperar o dado utilizando duas chaves, com o nome da
variável dentro das chaves, ex: {{ usuário }}

Atualizando o index.html, teremos o resultado:

Para cada variável, temos que incluir no retorno, caso tenha muitas variáveis isso acaba
sendo inviável, uma solução é criar uma variável do tipo dicionário e para cada posição desse
dicionário é um dado que você precisa passar para o navegador.

Função da rota

17
 18
Jonathas H. Miante

Index.html

Resultado:
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

2. APIs JSON

O Flask pode fornecer endpoints que respondem com dados no formato JSON. Isso permite que
o front-end faça solicitações AJAX para buscar dados dinâmicos.

O primeiro passo é criar uma rota para fornecer os dados para o HTML, para essa função iremos
utilizar o jsonify como retorno, para isso devemos importar essa função

from flask import jsonify

Depois vamos criar uma função que retorna um dicionário

Após criado a rota e a função, vamos incluir um paragrafo no HTML

<p>Mensagem: <span id="msg_back"></span></p>

E adicionar o JavaScript para recuperar os dados desse endpoint

19
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Obtendo o seguinte resultado:

Utilizando Link Dinâmico para rotas

No exemplo acima utilizamos uma rota para buscar dados através do Javascript, porém por
algum motivo, pode ser que a rota seja alterada (já o nome da função é mais difícil de acontecer),
com isso o ideal seria utilizar a rota dinâmica.

Para usar a rota dinâmica vamos utilizar a função url_for, sendo que o conceito é muito próximo
de usar arquivos estático.

No index html, vamos alterar a linha 20:

De: fetch('/api/dados')

Para: fetch('{{ url_for("dados") }}')

Nesse caso estamos recuperando os dados da rota através do nome da função dessa rota, assim
se alterarmos o caminho da rota, não haverá problema.

Essa alteração não terá nenhum impacto visual, pois estamos alterando o comportamento para
recuperar dinamicamente o caminho da rota.

Como boa prática, vamos estar utilizando essa abordagem sempre que precisarmos utilizar o
caminho da rota dentro do HTML.

Vale reforçar também que para utilizarmos a função url_for no HTML, o arquivo da rota deve ter
importado a função url_for (vimos isso quando aprendemos a trabalhar com arquivos estáticos)

20
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Rotas com parâmetros

As rotas com parâmetros no Flask são uma maneira poderosa de criar URLs dinâmicas que
podem aceitar valores variáveis. Isso é útil quando você precisa criar rotas que lidam com
diferentes recursos ou entidades com base em identificadores únicos.

Para criar uma rota com parâmetro, devemos adicionar na rota o nome da variável dentro dos
sinais <> e passar essa mesma variável como parâmetro da função, com isso conseguimos
trabalhar com esse dado dentro da função e retornando os dados desejados após tratados.

Para o exemplo, vamos criar uma rota que recebe um número em direto na rota e iremos dobrar
o valor, no navegador será exibido o número que está na rota e o valor dobrado.

routes.py

*** Incluso as linhas 20 à 26

calcular.html

index.html

*** Incluso a linha 16

21
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Resultado Page

Ao clicar no botão “calcular Valor 50” será redirecionado para a rota /calcular/50

*** Note que na URL está com a rota /calcular/50, se alterarmos o valor de 50 para outro, o valor será alterado na página
dinamicamente

22
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

2. Módulo Intermediário

O que iremos ver nesse Capítulo?

Segurança:
Garantir a segurança do aplicativo é essencial. Isso inclui proteger contra ataques comuns
como injeção de SQL, Criptografia de dados sensíveis e Cross-Site Request Forgery (CSRF).

O Flask oferece métodos e extensões para ajudar na segurança, como o Flask-SQLAlchemy para
proteger contra injeção de SQL e o Flask-WTF para prevenir CSRF.

Banco de Dados (SQLite):

O uso de banco de dados é essencial para aplicativos mais complexos. O SQLite é uma
excelente opção para começar, pois é simples e incorporado ao Flask.

Você pode criar, manipular e consultar dados utilizando o SQLite com a ajuda de extensões
como SQLAlchemy ou diretamente com o módulo SQLite3.

Models (Modelos):
Models representam a estrutura dos dados em um banco de dados. No Flask, eles são
implementados usando classes Python que interagem com o banco de dados.

Models são úteis para definir tabelas, relações entre os dados e realizar operações de leitura e
escrita.

Formulários:
O Flask-WTF (Flask-WTForms) é uma extensão comumente usada para lidar com formulários.
Ele simplifica a criação de formulários HTML e a validação de dados enviados pelo usuário.

Os formulários são importantes para coletar informações do usuário e processá-las no servidor.

Controle de Loop:
Vamos aprender implementar uma estrutura de Loop nos templates

Objetivos do Módulo:
• Compreender como integrar um banco de dados ao Flask usando SQLite.
• Criar e manipular modelos para representar dados de maneira estruturada.
• Utilizar formulários para coletar e validar dados dos enviados pelo usuário.
• Garantir a segurança do aplicativo aplicando práticas de segurança recomendadas.

23
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Banco de Dados

Vamos começar a configurar nosso banco de dados, para isso vamos precisar instalar duas novas
ferramentas, sendo:

Flask-SQLAlchemy: Será o ORM que iremos trabalhar, esse framework permite criarmos e
manipularmos o banco de dados diretamente do Python, através de classes.

Flask-Migrate: Servirá para o controle de alterações no banco de dados.

Para instalarmos essas ferramentas usaremos o pip

pip install Flask-SQLAlchemy Flask-Migrate

Após instalado, vamos precisar configurar o banco de dados, vamos utilizar o SQLite, porém
também iremos aprender a conectar em banco de dados PostgreSQL e MySQL.

Conectando Banco de Dados SQLite

No arquivo __init__.py dentro da pasta app, vamos realizar algumas configurações, sendo:

• Importação do Flask-SQLAlchemy e Flask-Migrate

• Configuração da URI do banco de dados (String de conexão)
• Configuração do Migrate
• As configurações devem ser antes da importação das rotas

24
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Vamos entender cada linha de código

• Na linha 2 e 3, estamos realizando a importação das ferramentas necessárias para

configuração do SQLAlchemy e Flask Migrate
• Na linha 9, estamos configurando a conexão com o banco de dados
• Na linha 10, estamos desativando o rastreio de modificações, em resumo, ao definir
SQLALCHEMY_TRACK_MODIFICATIONS como False, você desabilita o rastreamento
automático de modificações de objetos SQLAlchemy, o que pode resultar em melhor
desempenho, especialmente em ambientes de produção.
• Na linha 12, estamos instanciando o objeto do banco de dados
• Na linha 13, estamos instanciando o objeto do migrate

Com essas configurações, preparamos nosso projeto para acesso ao banco de dados SQLite

Conectando Banco de Dados PostgreSQL / MySQL

Para conectar um banco de dados PostgreSQL / MySQL, temos que fazer todos os passos
acima, a única diferença é que temos que instalar a biblioteca para conexão com o banco de
dados e a URI é um pouco diferente

Para o PostgreSQL, temos que instalar a ferramenta psycopg2-binary

pip install psycopg2-binary

Para o MySQL, temos que instalar a ferramenta mysqlclient

pip install mysqlclient

25
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Models

Em Flask, os "models" se referem à representação das estruturas de dados que são mapeadas
em um banco de dados utilizando o SQLAlchemy ou outro ORM (Object-Relational Mapping).
Os models são classes Python que definem a estrutura das tabelas em um banco de dados
relacional.

Cada model representa uma tabela no banco de dados e os atributos da classe representam
colunas nessa tabela.

Na pasta app do nosso projeto, vamos criar um novo arquivo, models.py

Após a criação da classe, precisamos importá-la no arquivo __init__.py da pasta app

A importação deve ocorrer após a criação das variáveis db e migrate

O próximo passo é iniciar as migrações, para isso precisamos digitar no terminal os seguintes
comandos:

1. Iniciar as configurações de migração (utiliza apenas uma vez no projeto).

flask db init

2. Verificar as alterações no banco de dados e criar uma migração com base nas alterações
nos modelos (apenas os modelos importados no arquivo __init__.py sofrerão as atualizações)

flask db migrate -m "mensagem descrevendo a alteração"

3. Aplica as alterações pendentes no banco de dados.

flask db upgrade

Note que após executar os passos acima, será criado uma pasta chamada migrations e uma
chamada instance.

Os passos 2 e 3 devem ser repetidos sempre que houver alteração no Models

26
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Formulários

Os "forms" são estruturas que permitem criar e validar formulários de maneira mais conveniente
e segura. O Flask, por si só, não possui um módulo de formulários incorporado, mas muitos
desenvolvedores usam extensões como o Flask-WTF para lidar com formulários de maneira
eficiente.

Abaixo está um resumo dos formulários no Flask:

Flask-WTF: É uma extensão que simplifica a criação e validação de formulários no Flask. Ele
facilita a geração de campos de formulário HTML e lida com a validação de dados submetidos.

Funcionamento Básico: Com Flask-WTF, você define classes Python para representar seus
formulários. Cada campo de entrada no formulário é representado por um atributo na classe do
formulário, e esses atributos são geralmente instâncias de classes de campos (como StringField,
IntegerField, etc.).

Validação de Dados: O Flask-WTF fornece funcionalidades para validar automaticamente os

dados submetidos pelos usuários. Ele pode verificar se os campos são obrigatórios, se estão no
formato correto, entre outras validações.

Proteção contra CSRF: O Flask-WTF ajuda a proteger os formulários contra ataques CSRF (Cross-
Site Request Forgery) adicionando automaticamente um campo de token CSRF aos formulários.

Renderização de HTML: Além da validação, o Flask-WTF também ajuda na renderização de

formulários HTML. Você pode usar esses objetos de formulário em templates Jinja2 para gerar
campos de formulário e mensagens de erro de maneira fácil.

Antes de criarmos nosso primeiro Form, precisamos instalar a ferramenta flask_wtf, no terminal
vamos digitar a seguinte linha de comando:

pip install flask_wtf

Após vamos criar um arquivo chamado forms.py dentro da pasta app do projeto.

27
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Vamos entender melhor os códigos do arquivo forms.py

• Linha 1, importamos a classe FlaskForm

• Linha 2, importamos os campos que iremos trabalhar
• Linha 3, importamos os validadores que iremos trabalhar
• Linha 5, importamos a classe Filmes de nosso Model
• Linha 7, criamos a classe FilmeForm herdando as configurações da classe FlaskForm
• Linha 8 à 10, criamos nossos campos, definindo um validador de campo requerido
• Linha 11, criamos nosso botão para enviar o formulário
• Linha 13 à 15, criamos uma função que serve para validar se já existe o título digitado,
criando um campo único.

Por último precisamos criar um secret_key para a validação do csrf_token, como esse dado é
extremamente sensível, não podemos deixa-lo exposto em nosso código, por isso vamos criar
um arquivo na raiz do nosso projeto, chamado local_settings.py, esse arquivo não pode ser
compartilhado publicamente, por exemplo se você estiver compartilhando seu projeto no
github. Certifique-se que esse arquivo seja configurado para não ser realizado upload.

Uma outra forma de trabalharmos com esse dado é utilizando uma variável de ambiente.

Para gerar uma chave aleatória secreta, podemos utilizar a biblioteca secrets, em um arquivo
python em branco digite o código:

Copie o resultado que for exibido no terminal na variável SECRET_KEY no arquivo

local_settings.py

Importe essa variável no arquivo __init__.py da pasta app e configure a Secret Key do APP

28
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Campos
Segue abaixo os principais campos do wtforms

Campo Descrição
StringField Campo de Texto Simples
IntegerField Campo de Números Inteiros
FloatField Campo de Números Decimais
BooleanField Campo de Valores Verdadeiro ou Falso
DateField Campo de Data
DateTimeField Campo de Data e Hora
SelectField Campo de Dropdown para Selecionar Opções
RadioField Campo de Seleção de Opções
TextAreaField Campo de Textos Multiplalinhas
FileField Campo de Arquivos
PasswordField Campo de Captura de Senhas
SubmitField Botão de Envio

Validações

Como vimos no exemplo, podemos utilizar validações prontas do wtforms.validators ou criar

nossos próprios validators, para criar um validator, pasta criar uma função com o seguinte nome:
validade_nomeAtributo, os parâmetros devem ser sempre o self e o atributo.

Para utilizar os validators do wtforms.validators deve ser passado como parâmetro do campo
criado através do validators = [], onde cada item da lista deve ser um validator

Segue abaixo os principais validators do wtforms.validators:

Validator Descrição
DataRequired Garante que um campo não seja enviado em branco
Define limites para o tamanho de um campo
Length(min=x, max=y)
(mínimo e máximo)
Email Verifica se o campo possui um formato de e-mail válido
Garante que dois campos tenham valores iguais, útil para
EqualTo(fieldname)
campos de confirmação de senha
NumberRange(min=x, max=y) Limita os valores numéricos aceitáveis em um intervalo
Regexp(regex, message=None) Usa expressões regulares para validar o formato do campo
Verifica se o valor do campo está entre um conjunto
AnyOf(choices)
específico de valores
Garante que o valor do campo não esteja em um conjunto
NoneOf(values)
específico de valores
URL Verifica se o campo possui um formato de URL válido
Torna um campo opcional (não requerido). Se o campo
Optional
estiver vazio, a validação passa
FileAllowed(upload_set, Valida se o arquivo enviado pertence a um conjunto
message=None) específico de tipos permitidos

29
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Salvando Informações no Banco de Dados

Agora que já preparamos o banco de dados, o Models e o Forms, vamos implementar a rota e o
template para salvar as informações no banco de dados.

O primeiro passo, é criar uma rota para salvar os dados no banco de dados, por hora não vamos
nos preocupar com a lógica de salvar os dados, apenas vamos nos preocupar em adicionar o
formulário no navegador.

No arquivo routes.py, vamos adicionar a seguinte função:

Agora precisamos criar o arquivo filme_novo.html na pasta templates

Nesse arquivo adicionamos o form com método POST, pois iremos trabalhar com envio de
informações para o servidor, sempre que trabalhamos com esse tipo de formulário, a primeira
informação que temos que adicionar dentro do FORM é o csrf_token.

Nas linhas 11 à 20 estamos incluindo os campos configurado no nosso form, podendo ser
passado como parâmetros do campo, os parâmetros do HTML.

*** Lembrando que não estamos preocupados nesse momento com o visual (Front-End) da
aplicação e sim com suas funcionalidades, caso desejem deixar o HTML mais agradável, fiquem
à vontade para fazer as alterações que desejarem

30
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Também vamos adicionar o link para essa nova rota no arquivo index.html

Com isso teremos o seguinte resultado

O formulário ainda não está funcionando, pois devemos configurar a rota para receber
solicitações do tipo POST e o que será feito com o formulário.

O próximo passo é configurar o arquivo form, incluindo a função save, para salvar as informações
no banco de dados.

Para isso precisamos importar a variável db do nosso app e criar a nova função do formulário

O próximo passo é configurar a rota, devemos incluir no app.route o parâmetro methods=[‘GET’,

‘POST’] e incluir a função de validação do post.

Também vamos importar o método redirect, para se tudo ocorrer certo, após salvar os dados a
página ser redirecionada

31
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Vamos realizar um teste, preencheremos um filme, ao clicar em salvar, se tudo ocorrer bem,
vamos ser redirecionados para a página inicial.

Em resumo, sempre que precisamos incluir dados no banco de dados, precisamos configurar:

• um models, que será nossa tabela no banco de dados,

• um formulário, que será servirá para garantir a segurança, validações e comunicação
com o models
• uma rota, será responsável por renderizar o template e criar a comunicação entre o
usuário e o models
• um template, que será o que será exibido no navegador do usuário.

32
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Trabalhando um pouco com Front-End

Antes de prosseguir para a próxima etapa, vamos melhorar um pouco nosso template, não
iremos nos aprofundar no tema, por isso recomendamos um estudo aprofundado no tema.

Para facilitar, não vamos construir os estilos do zero, vamos utilizar o framework front-end
bootstrap, para adicionar em nosso projeto precisamos alterar nosso arquivo base.html

Link do framework: https://getbootstrap.com/docs/5.0/getting-started/introduction/

base.html

Também iremos alterar o arquivo index.html, nesse arquivo vamos retirar os links e criar um
novo arquivo nav.html, que será responsável por manter os links, vamos inclusive incluir o nav
no arquivo base.html, assim surtindo efeito em todas as páginas de nosso projeto

nav.html

base.html

33
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

index.html

lista.html

filme_novo.html

Em resumo, utilizamos o framework bootstrap para estilizar nosso projeto, adicionando classes
para itens, assim deixando mais agradável.

34
 35
Jonathas H. Miante

calcular.html

Resultado:
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Recuperando Informações no Banco de Dados

Agora que apendemos a salvar informações em nosso banco de dados, precisamos aprender em
como recuperar e exibir para o usuário.

Vamos criar duas rotas para exibir os dados salvos, uma rota que irá listar todos os dados da
tabela e outra rota que irá exibir o detalhe, vamos iniciar com a rota para listar todos os dados.

No arquivo routes.py, vamos incluir a rota listaFilmes

Na pasta templates, vamos criar o arquivo filme_lista.html

Na linha 17 à 23, utilizamos o operador de loop com o Flask no HTML, onde estamos interagindo
todos os itens da lista objects

No Arquivo nav.html, vamos incluir duas rotas, uma para voltar para o início e uma para lista de
filmes

36
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Ao clicarmos na rota da lista de filmes, teremos todos os filmes cadastrados

Agora iremos criar a rota para exibir cada filme, para isso vamos criar uma rota detailFilme no
arquivo routes.py

Vamos criar o arquivo filme_detail.html na pasta de templates

Na linha 15 a 17, iniciamos um loop para criar uma linha para cada quebra de linha do resumo.

Vamos editar a tabela do arquivo filme_lista.html

37
 38
Jonathas H. Miante

Teremos o seguinte resultado

Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Módulo Avançado

Objetivo do Módulo
• Implementar controle de login para autenticação.
• Implementar controle de acesso para usuários autenticados.
• Implementar controle de logout
• Estrutura de decisão if no HTML
• Vincular registros a outras tabelas (FK)
• Tipo de dados de arquivos
• Trabalhar com Variáveis de Ambiente
• GitHub
• Deploy

Controle de Login

Vamos implementar o controle de login em nossa aplicação, assim podemos definir algumas
páginas somente usuários logados podem acessar, para isso vamos primeiro instalar a
ferramenta flask-login, flask-bcrypt e email_validator

pip install flask-login flask-bcrypt email_validator

Depois precisamos alterar algumas configurações no arquivo __init__.py do app

Onde vamos importar a classe LoginManager do flask_login e Bcrypt do flask-bcrypt, também

vamos criar a variável login_manager e a variável bcrypt

Com a variável login_manager, vamos definir qual a rota para login

__init__.py

39
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Após configurado o app, precisamos configurar o model de usuário e definir qual model pode
realizar o login, no arquivo models.py vamos importar a variável login_manager que criamos e
também vamos importar a classe UserMixin do flask_login

Vamos criar a classe User, definindo o UserMixin nessa classe, isso informa que essa classe será
utilizada para o login, também precisamos implementar uma função load_user para definir o
carregamento do usuário.

models.py

Precisamos fazer o migrate agora, para isso vamos digitar no shell o comando de migrate

flask db migrate

flask db upgrade

Agora vamos criar três rotas, uma para cadastro de novos usuários, uma para o login e outra para
o logout.

40
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Cadastro de Usuário
Vamos iniciar com o cadastro de usuário, primeiro vamos definir a classe no forms.py

Adicionamos a função para salvar o usuário no banco de dados e uma função para retornar o
usuário cadastrado

Para salvar a senha do usuário criptografamos usando o bcrypt para segurança

Agora vamos criar a rota

No arquivo nav.html vamos incluir a rota para cadastro

41
 42
Jonathas H. Miante

Agora vamos criar o novo_usuario.html

Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Criando rota para Login

Nosso próximo passo, é definir a rota de login, vamos criar o form de login primeiro

Agora vamos definir a rota

Vamos criar o login.html

43
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Vamos criar os css para essa pagina

login.css

E por fim incluir a rota de login no arquivo nav.html

Também vamos remover a rota de calculo que usamos para aprender usar parâmetros nas rotas

44
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Criando Rota para Logout

Por último vamos implementar a rota de logout

Vamos adicionar a rota de logout no arquivo nav.html

45
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Estrutura de Decisão if no HTML com Flask

Uma outra estrutura muito importante é a tomada de decisão, podemos fazer isso no HTML
utilizando o flask, usando o seguinte bloco

{% if CONDIÇÃO %}

Bloco se verdadeiro

{% else %}

Bloco se falso

{% endif %}

Vamos implementar essa estrutura no arquivo nav, o que queremos fazer é, se o usuário não
estiver logado, vamos deixar visível a opção para cadastro e login, se estiver logado essas opções
não estarão disponíveis, mas ficará disponível a opção sair

46
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Permissão de Acesso para Usuários Logados

No flask também existe um decorator que nos permite controlar o acesso a determinadas áreas
de nosso aplicativo para usuários que estejam logados, vamos incluir essa funcionalidade na rota
de cadastro de filmes, ou seja, apenas usuários que estejam logados poderão cadastrar novos
filmes.

Para isso no arquivo de rotas, devemos importar a função login_required da ferramenta

flask_login

Na rota que queremos adicionar essa funcionalidade devemos incluir após o app.route

Agora, um usuário que não esteja logado no sistema tentar entrar na página de cadastro, será
redirecionado para tela de login, assim enquanto não logar no sistema, não poderá acessar a
página com essa funcionalidade.

Vincular registros a outras tabelas (FK)

Agora vamos aprender em como criar relações entre tabelas, para isso vamos incluir uma nova
funcionalidade em nosso projeto, que será adicionar comentários nos filmes.

No models vamos adicionar a seguinte função

Adicionamos o tipo db.ForeignKey, que serve para informar que esse campo é um FK,
vinculando essa tabela com a tabela Filmes, no parâmetro passamos o nome da tabela todo
em minúsculo seguido do campo que estamos vinculando.

47
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Também vamos incluir o campo comentários no Model Filmes e Users

O campo “comentarios” serve para informar que temos uma relação com a tabela
“FilmeComentario”

Lembrando que sempre que realizarmos qualquer alteração no models devemos realizar os
procedimentos de migração

flask db migrate

flask db upgrade

Agora que já preparamos nosso banco de dados, precisamos criar o formulário para criar o
comentário, para isso vamos adicionar a seguinte função no arquivo forms

Nesse form, o único campo que será editado será o campo comentário, para a função save,
informamos qual o id do filme e id do usuário, assim criando os vínculos necessários

Agora precisamos criar a rota para adicionar o comentário, nesse caso, não vamos criar uma rota
específica, mas vamos editar a rota filme_detail, incluindo o formulário para esse campo.

48
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Como precisamos passar o id do usuário para salvar o comentário, precisamos verificar se o

usuário está logado para adicionar o comentário.

Também precisamos alterar o arquivo filem_detail.html

49
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Trabalhando com Tipo de dados de arquivos

Para trabalharmos com arquivos no Flask, devemos primeiro alterar algumas configurações de
nosso app, vamos editar o arquivo __init__.py da pasta app

Também vamos editar a função Filmes do arquivo models.py

Incluímos o campo imagem, esse campo é do tipo texto, pois o que vamos gravar no banco de
dados não é a imagem em si, e sim apenas o seu nome, como default, vamos deixar o nome da
imagem padrão, que iremos incluir no próximo passo.

Lembrando que sempre que realizarmos qualquer alteração no models devemos realizar os
procedimentos de migração

flask db migrate

flask db upgrade

Agora vamos preparar as pastas e o arquivo padrão, dentro da pasta static vamos criar a pasta
data, dentro desta nova pasta vamos criar a pasta filmes e por fim dentro da pasta filmes vamos
incluir uma imagem com o nome ‘default.png’ que servirá para deixar quanto não ter uma
imagem definida.

Nosso próximo passo agora é alterar o arquivo forms.py

Para garantir que o arquivo contenha um nome seguro, vamos importar a seguinte ferramenta:

Também importaremos a biblioteca os para trabalharmos com os arquivos e pastas

E por fim importaremos a variável do nosso app para trabalharmos com a configuração da pasta
que definimos anteriormente

50
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Agora iremos alterar a classe FilmeForm

Foi incluso o campo imagem, do tipo FileField e também alterado a função save da classe, agora
ao criar um filme precisamos definir onde será salvo a imagem e qual nome iremos salvar.

Para o nome, estamos usando a função secure_filename para modificar o nome do arquivo para
um nome seguro para o servidor.

O último passo agora é alterar o HTML do cadastro e o HTML para apresentação, vamos começar
com o do cadastro, ou seja o arquivo ‘filme_novo.html’.

Onde foi adicionado o parâmetro ‘enctype="multipart/form-data"’ no form e incluso a linha 18.

51
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Agora vamos alterar o HTML para exibição, ou seja o arquivo ‘filme_detail.html’, onde vamos
adicionar as seguintes linhas de código para exibir as imagens.

52
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Trabalhando com Variável de Ambiente

Variável de ambiente é uma forma segura de manter informações sigilosas, tais como
SECRET_KEYS, dados de acesso a banco de dados, entre outras informações.

Essas variáveis só existem no servidor que você cria, sendo assim, pode estar compartilhando o
código do APP, sem a preocupação de estar disponibilizando dados sensíveis, para trabalharmos
com essas informações vamos utilizar a biblioteca “os” que já vem instalado com o Python

Para definir uma variável de ambiente, podemos definir em nosso Sistema Operacional e
posteriormente no servidor, ou também podemos utilizar a biblioteca dotenv, assim podendo
criar a variável de sistema em um arquivo chamado ‘.env’, é claro que esse arquivo não deve ser
compartilhado, ele irá criar a variável de ambiente para o seu projeto, posteriormente devemos
criar as mesmas variáveis dentro do nosso servidor.

Vamos criar as variáveis de sistema para as variáveis que criamos no arquivo local_settings.py e
vamos estar excluindo esse arquivo.

Arquivo .env

Vamos instalar a biblioteca dotenv

pip install python-dotenv

Por fim vamos atualizar o arquivo __init__.py do app

53
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

GitHub

O GitHub é uma plataforma de hospedagem de código-fonte baseada em nuvem, conhecida

por facilitar o controle de versão e a colaboração entre desenvolvedores. Seu propósito
principal é oferecer um ambiente para o armazenamento, gerenciamento e compartilhamento
de projetos usando o sistema de controle de versão Git.

• Controle de Versão Colaborativo: Permite que várias pessoas trabalhem em um

mesmo projeto, controlando e registrando alterações ao longo do tempo. Isso facilita o
acompanhamento das mudanças, identificação de responsáveis e reversão a versões
anteriores se necessário.

• Facilitação da Colaboração: Oferece ferramentas para revisão de código, discussões,

gerenciamento de problemas (issues) e solicitações de pull. Isso promove uma
colaboração mais eficaz entre os membros da equipe.

• Hospedagem e Distribuição de Projetos: Fornece um espaço centralizado na nuvem

para hospedar projetos, tornando-os acessíveis a qualquer pessoa com permissões
adequadas. Isso é especialmente útil para o compartilhamento de código-fonte aberto.

• Integração com Ferramentas de Desenvolvimento: Oferece integração com diversas

ferramentas e serviços, como integração contínua (CI), gestão de tarefas, deploy
automatizado e mais, facilitando a automação de processos no ciclo de vida do
desenvolvimento.

Em resumo, o GitHub se destaca como uma plataforma essencial para desenvolvedores,

fornecendo recursos fundamentais para o desenvolvimento de software colaborativo,
gerenciamento eficiente de projetos e compartilhamento de código-fonte.

Instalação

Acesse o site https://git-scm.com/downloads e realize o download do seu Sistema Operacional,

instale o arquivo de acordo com as instruções.

Acesse o site https://github.com/ crie uma conta

54
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Criando Repositório
Acesse sua conta no github, e clique em New nas opções de repositório

Adicione um nome e altere apenas para public ou private, não faça nenhuma outra alteração,
pois queremos cirar um repositório em branco

55
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Após criar irá aparecer as instruções em como preparar o repositório

Preparando Repositório e Arquivo .gitignore

Crie um arquivo chamado .gitignore na raiz do projeto, esse arquivo servirá para definirmos o
que não irá ser realizado upload no github, vamos definir as seguintes configurações

Após criar o arquivo gitignore, vamos no terminal vamos digitar as instruções acima

1. Configure o usuário do git (apenas uma vez)

git config --global user.email seuemail@example.com
git config --global user.name “seu nome”

2. Inicia o repositório no desktop (apenas a primeira vez)

git init

3. Adiciona os arquivos para envio de lote

git add .

4. Cria o Commit do envio

git commit -m “First Commit”

5. Configura o Branch (apenas a primeira vez)

git branch -m main

6. Configure qual o repositório

git remote add origin https://github.com/SEU_USUÁRIO/SEU_REPOSITORIO.git

56
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

7. Realize o upload dos arquivos

git push -u origin main

Na primeira vez, pode ser que solicite o login, irá abrir uma caixa de opções, selecione o login
pelo navegador e realize o login normalmente.

Ao atualizar a página do seu repositório no git, irá aparecer a seguinte tela

Aqui estará seu projeto.

Atualizando Repositório

Sempre que realizar qualquer alteração no seu projeto, deverá atualizar o github, para isso
segue sempre os três passos abaixo:

1. Adicione as alterações em um lote

git add .

2. Crie o commit do lote

git commit -m “Descrição da atualização”

3. Realize o upload dos arquivos

git push

Isso irá garantir que sempre o seu repositório no git estará com a última versão do seu código.

57
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Deploy

O deploy é o processo de disponibilizar uma aplicação ou sistema para uso em um ambiente

operacional, como um servidor web, para que os usuários finais possam interagir com ele.
Resumidamente, é a etapa em que o código-fonte de uma aplicação é implementado e
executado em um ambiente de produção, pronto para ser utilizado pelos usuários. Este processo
envolve a transferência dos arquivos e recursos necessários, configurando tudo para funcionar
corretamente no ambiente em questão. O deploy é crucial para transformar o código de
desenvolvimento em um produto final acessível aos usuários.

Render.com (Opção Gratuita)

Antes de realizar o Deploy no Render, devemos instalar o biblioteca gunicorn, vamos instalar a
partir do pip, depois vamos atualizar o requirements.txt utilizando o comando:

pip freeze > requirements.txt

Após isso devemos atualizar nosso repositório do GIT

Agora estamos preparados para realizarmos Deploy no Render, então devemos seguir os
seguintes passos:

1. Acesse o site https://render.com/ e crie uma conta (Recomendado criar a conta a partir
da conta do GitHub)

2. Acesse o Dashboard

3. Clique em NEW e em WEB SERVICE

4. Crie o Projeto a partir do GitHub

58
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

5. Selecione o Repositório do Git e clique em CONNECT

6. Devemos adicionar o Nome do Aplicativo, esse nome deve ser único

7. Selecione a Região

8. Mantenha com a opção Python 3

9. No Start Command, devemos deixar o seguinte comando:

Onde estamos informando que usaremos o gunicorn para renderizar nosso app,
utilizaremos o aplicativo app que criamos em nosso projeto seguido da variável app

10. Selecione o Plano que deseja, sendo a primeira opção gratuita

11. Clique em Create Web Service

Com isso o aplicativo começara a ser realizado o deploy

59
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

12. Como o Render pode ter conflito de versão das bibliotecas, a partir do próximo passo,
devemos estar repetindo caso os passos abaixo (somente se acontecer o erro abaixo)

Nesse caso a biblioteca blinker não foi possível recuperar a versão 1.7.0, para
resolvermos isso, no nosso projeto no arquivo requirements.txt, vamos apagar a versão
dessa biblioteca, recomendo apagar a versão somente das bibliotecas que tiverem
incompatibilidade, para isso vamos repetir o processo abaixo até o deploy ser
completado

1. Verifique qual biblioteca retornou erro (no caso acima foi a blinker)

2. No Arquivo requirements.txt remova os dados da versão, mantendo apenas o

nome da biblioteca

3. Atualize o repositório no github

4. No Render, dentro do projeto, clique em Manual Deploy e em Deploy latest

commit

Após passar dos erros de incompatibilidade, se seu projeto utiliza variável de

ambiente, retornará o erro que não foi encontrado esses valores, vamos criar a
partir do próximo passo

60
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

13. Para criar variáveis de ambiente no servido, devemos seguir os passos abaixo:

1. Clique em Environment

2. Clique em ADD ENVIRONMENT VARIABLE

3. Adicione o nome da variável e o seu valor

Repita o processo para todas as variáveis necessárias

Por fim, realize o processo de realizar o deploy manual

61
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Seu Site estará disponível no link abaixo do nome do projeto

Um problema que temos no Render é que ele não aceita o SQLite, então devemos incluir o
banco de dados POSTGRESQL, que inclusive ele tem na plataforma, porém precisamos adaptar
nosso projeto para o Postgres, vamos abaixo para o passo a passo:

1. Na criptografia do projeto, devemos adaptar para gravar no formato UTF-8, para isso
no forms na classe LoginForm e UserForm devemos realizar as seguintes alterações:

2. Instalar a biblioteca psycopg2 e incluir manualmente no arquivo requirements.txt,

vamos incluir manualmente todas novas bibliotecas pois no deploy precisamos adaptar
a compatibilidade das versões.

3. Atualizar o repositório GIT

4. Criar o Banco de Dados no Render, vamos seguir os passos abaixo

4.1. Clique em new e em PostgreSQL

4.2. Defina um nome para o banco de dados

4.3. Selecione o Plano (sendo o primeiro gratuito)

4.4. Clique em Create Database

62
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

4.5. Aguarde o status alterar de Creating para Avaliable

4.6. Em connections você poderá copiar a URL de acesso para o Banco de Dados, para
acessar do seu computador, deverá copiar a URL, External Database URL, ou seja, a sua
Variável de ambiente para conectar o banco de dados Render da sua máquina será
essa URL, para a Variável direto no servidor Render, deverá ser a URL, Internal
Database URL

4.6. Após copiar os dados da External Database, abra seu arquivo local e altere a
variável de ambiente de conexão com o banco de dados

4.7. Altere o escrito postgres para postrgresql

4.8. Rode as migrate do banco de dados para construir, esse processo deve ser rodado
na primeira vez que conectar ao banco de dados e sempre que houver alterações nos
modelos
flask db upgrade

4.9. Altere a URL da variável de ambiente do servidor também, utilizando o Internal

Database URL, lembrando de alterar o escrito postgres para postrgresql

4.10. Realize o processo de Deploy manual novamente

63
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Com isso sua aplicação estará pronta e realizada o Deploy

Podendo ser acessado por qualquer pessoa pelo link do seu projeto

*** Um outro problema que temos com a opção gratuita é na atualização de nosso APP, os
arquivos estáticos acabam sendo resetados para o padrão, então se você trabalha com UPLOAD
de arquivos acaba perdendo esses arquivos, na opção paga, existe como configurar a pasta que
não será apagada nas atualizações, assim mantendo os arquivos.

64
Licenciado para - Bruno Joan Fonseca Pereira - 10133455335 - Protegido por Eduzz.com

Jonathas H. Miante

Utilizando CPanel

• Python Version: Selecione a versão o Python

• Raiz do Aplicativo: Digite o caminho para a pasta dos arquivos do projeto
• URL do Aplicativo: Domínio registrado do APP
• Arquivo de Inicialização: Manter sempre passar o passenger_wsgi.py
• App Entry Point: Manter sempre application
• Passenger log file: Deixar em branco

No arquivo __init__.py do app, adicione a linha abaixo antes das importação das rotas

Na raiz do aplicativo crie o arquivo passenger_wsgi.py

Apague todos os dados da pasta criada no servidor e suba os dados do seu projeto, entre no
CPanel novamente e instale as bibliotecas, adicionando o requirements.txt

Digite o requirements.txt e clique em Add, posteriormente clique em RUN PIP INSTALL

65