The power of root

Flask - Introdução

dom 24 maio 2015 flask / python / programação /

Depois que migrei o meu blog para o Pelican, procurei mais a fundo aprender sua estrutura, pesquisando como funcionava seus templates etc. Com isso vi que o desenvolvimento web com frameworks python fica muito mais fácil e dinamico surgindo interesse no web2py e flask.

A primeiro momento escolhi o flask por ser recomendado para iniciantes (como eu). Pretendo nesse post criar um site/app simples seguindo uma estrutura de diretórios, sei que o correto seria iniciar com o modelo de prograação MVC mas como estou aprendendo prefiro não complicar muito agora no começo, espero que todos compreendam que não sou programador por tanto, não entrarei muito em detalhes já que meu conhecimento é superficial em programação, mas prometo que assim que for melhorando vou elaborando posts com mais qualidade.

A instalação

A instalação é muito simples, basta pelo gerenciador de pacotes do python executar o seguinte comando:

pip install Flask

O procedimento pode ser executado (é até aconselhavel) rodando dentro do virtualenv, onde cria-se um ambiente virtual para o desenvolvimento assim, caso seja instalado novos pacotes não irá impactar na sua maquina local.

Criando a estrutura

A estrutura do projeto é bem básica, dentro de um diretório comm o nome do seu site/app iremos criar a seguinte estrutura:

app/
├── README.md
├── routes.py
├── static
│   ├── css
│   ├── img
│   └── js
└── templates
    ├── home.html
    └── layout.html

Portando mão na massa e vamos criar os diretórios.

mkdir app
touch README.md
touch routes.py
mkdir static
mkdir static/css
mkdir static/img
mkdir static/js
mkdir templates

A princípio criamos um diretório chamado app onde armazenaremos todos os arquivos, em seguida crirei o arquivo README.md e routes.py em branco, onde o README.md deverá conter a descrição e as funcionalidades do nosso site/app, e o arquivo routes.py onde contem as nossas funções python. No diretório static irão ficar todos os nossos arquivo estáticos que não tem alterações, como imagens, arquivos css, templates, java script, etc.

Templates

A primeiro momento podemos criar uma aplicaço básica em qualquer arquivo e executá-lo com o python que estará pronto nosso primeiro aplicativo, veja um exemplo abaixo:

#!/usr/bin/python3
# -*- encoding: utf-8 -*-

from flask import Flask
app = Flask(__name__)

@app.route('/')
def index():
        return 'Index Page'

@app.route('/hello')
def hello():
        return 'Hello World!'

if __name__ == '__main__':

Para executá-lo:

python3 hello.py

Para acessá-lo: abrir o browser em http://localhost:5000

Pronto, nossa primeira aplicação :p

Mas para deixarmos nosso site/app mais bonito, efetuamos o uso dos templates, e para facilitar ainda mais, podemos criar um arquivo de layout e sempre que necessário chamamos ele dentro de outros arquivos.

Para a criaçao dos templates é utilizado o jinja2, padrão para qualquer framework que faz uso do mesmo, portanto nele podemos chamar variáveis e utilizar alguns comandos python.

Vamos agora criar o arquivo de layout dentro de static/templates

<!DOCTYPE html>
<html>
  <head>
<title>Aplicação Flask</title>
  </head>
  <body>

    <header>
      <div class="container">
        <h1 class="logo">Aplicação Flask</h1>
      </div>
    </header>

    <div class="container">
      {% block content %}
      {% endblock %}
    </div>

  </body>
</html>

No arquivo de layout.html definimos o título e um cabeçalho dentro de uma div, sempre que qualquer outro template fazer o uso do layout.html conterá esse cabeçalho e o conteúdo do outro arquivo será exibido dentro do {% block content %} e {% endblock %}

Vamos criar agora o arquivo home.html para ilustrar melhor a sua utilização.

{% extends "layout.html" %}
{% block content %}
  <div class="jumbo">
<h2>Seja bem vindo a uma aplicação flask<h2>
    <h3>Essa é a homepage da aplicação flask<h3>
  </div>
{% endblock %}

Codando Python

Bom até o momento criamos um app muito simples que retorna apenas Hello World! e criamos as templates, mas como interligamos tudo isso?

Vamos começar agora a codar dentro do arquivo routes.py, onde criaremos as funções e mapeamentos para que a nossa aplicação funcione corretamente.

Dentro do arquivo app/routes.py vamos codar as seguintes linhas:

from flask import Flask, render_template

app = Flask(__name__)

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

if __name__ == '__main__':
  app.run(debug=True)
  1. Na linha 1 efetuamos a importação do módulo flask dentro do python.
  2. Em seguinda na linha 3 criamos uma nova instância da classe Flask
  3. Na linha 5 efetuamos o mapemando do / para a função home(). Sempre que alguem visitar o / será redirecionamdo para o /home.html.
  4. Criamos a função home() que retorna a função Flask render_template(), o mesmo faz a renderização dos teplates que criamos.
  5. Nas linhas 9 e 10 rodamos o nosso aplicativo com o comando run().

Vamos ver como está ficando?

. code-block:: bash

python3 hello.py

Se tudo estiver correto irá carregar uma página bem simples contendo algumas mensagens. Vamos melhorar essa visualização utilizando o arquivo static/css que criaremos agora.

Vamos criar um arquivo dentro de app/static/css com o nome de main.css e vamos colocar o seguinte conteúdo dentro dele.

body {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-        serif;
  color: #444;
}

header {
  background-color: #2B2B2B;
  height: 35px;
  width: 100%;
  opacity: .9;
  margin-bottom: 10px;
}

header h1.logo {
  margin: 0;
  font-size: 1.7em;
  color: #fff;
  text-transform: uppercase;
  float: left;
}

header h1.logo:hover {
  color: #fff;
  text-decoration: none;
}

/*
 * Center the body content
 */

.container {
  width: 940px;
  margin: 0 auto;
}

div.jumbo {
  padding: 10px 0 30px 0;
  background-color: #eeeeee;
  -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
          border-radius: 6px;
}

h2 {
  font-size: 3em;
  margin-top: 40px;
  text-align: center;
  letter-spacing: -2px;
}

h3 {
  font-size: 1.7em;
  font-weight: 100;
  margin-top: 30px;
  text-align: center;
  letter-spacing: -1px;
  color: #999;
}

Agora vamos alterar nosso arquivo layout.html para que busce nosso arquivo de estilo css, todos os templates filhos irão efetuar o uso do css.

Vamos acrescentar a linha abaixo dentro do nosso arquivo layout.html

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

Ficando assim:

<!DOCTYPE html>
<html>
  <head>
<title>Flask</title>
    <strong><link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}"></strong>
  </head>
  <body>
    <header>
      <div class="container">
        <h1 class="logo">Aplicação Flask</h1>
      </div>
    </header>

    <div class="container">
      {% block content %}
      {% endblock %}
    </div>
  </body>
</html>

Feito isso obtemos uma página um pouco mais bonitinha ao recarregar.

about.html

Vamos agora criar uma página onde irá falar um pouco do nosso aplicativo chamada de about.html, iniciaremos criando um template para ela em app/templates

{% extends "layout.html" %}

{% block content %}
  <h2>About</h2>
  <p>Esta página deverá falar um pouco sobre o nosso aplicativo flask.</p>
{% endblock %}

Como feito anteriormente precisamos mapear essa página no arquivo routes.py criando uma rota e uma função.

from flask import Flask, render_template

app = Flask(__name__)

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

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

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

on the top

Comments