-
Criar ambiente virtual
python3 -m venv venv -
Ativar ambiente virtual
source venv/bin/activate2.1. Atualizar o pip
pip install --upgrade pip -
Instalar o Flask
pip install Flask -
Criar estrutura de pastas do projeto
4.1. Criar diretório app
mkdir app4.2. Criar arquivo
views.pyno diretório appfrom app import app @app.route('/') def index(): return 'Hello world'
4.3. Criar arquivo
__init__.pyno diretório appfrom flask import Flask app = Flask(__name__) from app import views
4.4 Criar arquivo
run.pyna raiz do projetofrom app import app if __name__ == '__main__': app.run(debug=True)
-
Executar o script
run.py
python run.py
Para usarmos flask no contexto de web, devemos fazer com que nossas views renderizem algo que os navegadores entendam. Em outras palavras vamos utilizar html.
- Criar o diretório templates
mkdir templates - Criar um arquivo base
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Practice</title> </head> <body> <div class="content"> {% block content %} {% endblock %} </div> </body> </html>
- Criar um arquivo qualquer que herde de base.html
{% extends 'base.html' %} {% block content %} <h1>{{ title }}</h1> <p>{{ paragraph }}</p> {% endblock %} - Renderizar a página através das views
@app.route('/') def index(): title = "Olá Mundo" paragraph = "Este é o primeiro teste sem preconceito com flask" return render_template('home.html', title=title, paragraph=paragraph)
- Executar o script
run.pypython run.py
Existem diversas maneiras de se conectar a um banco de dados usando flask, mas hoje vamos abordar a conexão com sqlite3. Seguindo a documentação, que você pode ler aqui, podemos facilmente fazer a conexão criando um arquivo para isso.
- Criar um diretório database dentro do diretório app
mkdir database - Criar arquivo
base.sqlpara gerar o bancoCREATE TABLE users( id integer, name varchar(80), constraint user_pk primary key(id) )
- Criar um arquivo
connection.py2.1. Para facilitar as consultas no futuro, é possível faze-las retornar dicionários adicionando o seguinte techo de código ao método get_db() antes do returnimport sqlite3 from flask import g from app import app DATABASE = '/app/database/database.db' def get_db(): db = getattr(g, '_database', None) if db is None: db = g._database = sqlite3.connect(DATABASE) return db @app.teardown_appcontext def close_connection(exception): db = getattr(g, '_database', None) if db is not None: db.close()
def make_dicts(cursor, row): return dict((cursor.description[idx][0], value) for idx, value in enumerate(row)) db.row_factory = make_dicts
- Adicionar função para iniciar o banco de dados
def init_db(): with app.app_context(): db = get_db() with app.open_resource('./database/base.sql', mode='r') as f: db.cursor().executescript(f.read()) db.commit()
- Executar o python shell
python3from app.database.connection import init_db init_db()
Agora com a conexão pronta, podemos criar páginas web que criem, leiam, atualizem e deletem entidades (o famoso CRUD).
Até agora estamos trabalhando com html plano, o que não é muito agradável à vista, portanto vamos configurar os arquivos estáticos
- Criar diretório static dentro do diretório app
mkdir static - Criar arquivo
styles.css*{ margin: 0; padding: 0; } body{ width: 100%; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: 'Roboto', sans-serif; }
- Adicionar referência ao estilo no
base.html<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
- Recarregar a página (limpando o cache)
Para outros arquivos estáticos como imagens ou código javascript se utiliza {{ url_for('static', filename='nome_do_arquivo.extensão') }} nos respectivos elementos html.