Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Python

Uma Introdução à Python Flask Framework

by
Read Time:11 minsLanguages:

Portuguese (Português) translation by Francisco Sousa (you can also view the original English article)

Flask é uma pequena e poderosa web framework para Python. É fácil de aprender e simples de usar, permitindo-te construir a tua aplicação web, num curto período de tempo.

Neste artigo, eu irei mostrar como construir um simples website, contendo duas páginas estáticas com uma pequena quantidade de conteúdo dinâmico. Enquanto Flask pode ser usado para construir complexos websites orientados para bases de dados, começar principalmente com páginas estáticas será útil para iniciar um fluxo de trabalho, o qual tipicamente irá fazer com que se crie páginas mais complexas no futuro. Em consequência da finalização, serás capaz de usar a sequência de passos para saltar para a tua próxima aplicação Flask.

Instalação do Flask

Antes de começarmos, nós temos que instalar o Flask. Porque os sistemas variam, as coisas podem esporadicamente correr mal durante estes passos. Se tal acontecer, como todos nós fazemos, simplesmente mete no Google a mensagem de erro ou deixa um comentário descrevendo o problema.

Instala o virtualenv

Virtualenv é uma ferramenta útil que permite criar um sistema de desenvolvimento Python isolado de outros sistemas onde podes ter trabalho de desenvolvimento.

Nós vamos usar virtualenv para instalar o Flask. Virtualenv é uma ferramenta útil que cria um sistema de desenvolvimento Python isolado de outros ambientes de desenvolvimento onde tu podes fazer todo o trabalho de desenvolvimento. Supõe que tu encontras uma nova biblioteca de Python, que tu gostarias de experimentar. Se tu a instalasses directamente no sistema, existe o risco de gerar conflitos com outras bibliotecas que tu podes ter instalado. Em vez disso, usamos Virtualenv para criar uma sandbox, onde tu podes instalar e usar a biblioteca sem afectar o resto do teu sistema. Tu podes continuar a usar esta sandbox para o desenvolvimento futuro, ou tu podes simplesmente eliminar uma vez que tu já paras-te de usar. De qualquer maneira, o teu sistema mantêm-se organizado e livre de tralha.

É possível que o teu sistema já tenha o virtualev. Vai a linha de comandos, e tenta executar:

Se tu vires o número da versão, estás pronto a começar e podes passar a frente a secção "Intalação do flask". Se o commando não for encontrado usa easy_install ou pip para instalar o virtualenv. Se estiveres a executar em Linux ou em Mac OS X, um dos seguintes deve funcionar para ti:

ou:

ou:

Se tu não tens nenhum destes comandos instalados, existem variadissimos tutoriais online, que te vão mostrar como os instalar no teu sistema. Se tu estás a pensar executar em Windows, segue as “Instruções de instalação” em esta página para obter easy_install e executá-lo no teu computador.

Intalar Flask

Depois de instalar o virtualenv, tu podes criar um novo ambiente de desenvolimento isolado, tal como:

Aqui, virtualenv criar uma pasta, flaskapp/, E definir uma cópia limpa do Python para tu usares. Também instala o conveniente gestor de pacotes, pip.

Entra no teu novo ambiente de desenvolvimento e activa-o, para que possas a começar a trabalhar com ele.

Agora, podes instalar o Flask de forma segura:

Definir a estrutura do teu projecto

Vamos criar um conjunto de pastas e ficheiros em flaskapp/ para manter a tua aplicação web organizada.

Em flaskapp/, cria uma pasta, app/, que vai conter todos os ficheiros. Dentro da app/, cria uma pasta static/; este é o sítio onde vais colocar todas as tuas imagens da aplicação web, CSS, e os ficheiros JavaScript, por isso cria pastas para cada um deles, como é demonstrado em baixo. Adicionalmente criar outra pasta, templates/,para armazenar os templates da tua aplicação web. Cria um ficheiro Python vazio routes.py para a lógica da aplicação, como o encaminhamento do URL.

E um projecto não está completo sem uma útil descrição, por isso cria um ficheiro README.md.

Agora, nós sabemos onde colocar os ficheiros dos nossos projectos, mas como é que tudo isto interliga? Vamos dar uma vista de olhos a "Fig. 1" abaixo para ver a grande imagem(big picture):

Fig. 1

  1. Um utilizador faz um pedido para um domínio root URL / para ir para a homepage
  2. routes.py mapeia o URL / para uma função Python
  3. Esta função python encontra um template web, que se encontra na pasta templates/.
  4. Um template web vai ver na pasta static/ para qualquer imagens, CSS, ou ficheiros JavaScript que ele necessita pra renderizar para
  5. O HTML renderizado é enviado de volta para routes.py
  6. routes.py envia de volta o HTML para o browser(navegador web)

Nós começamos com um pedido por um browser (navegador web). Um utilizador escreve o ULR na barra de endereço. O pedido vai a routes.py, o qual tem o código que mapeia o URL a uma função. Esta função encontra um template na pasta templates/, Renderiza para HTML, e envia de volta para o browser. Esta função pode opcionalmente obter os registos de uma base de dados e depois passar essa informação para um template web, mas uma vez que nos estamos a tratar na sua maioria de páginas estáticas neste artigo, nós iremos passar a frente a parte de interagir com bases de dados, por agora.

Agora nós conhecemos a estrutura que criamos para o projecto, vamos começar por criar uma homepage para a nossa aplicação web.

Cria a Homepage

Quando escreves uma aplicação web com algumas páginas, rapidamente torna-se irritante escrever sempre o mesmo HTML boilerplate(esqueleto), todas as vezes para todas as páginas, Além disso, e se tu necessitares de adicionar um novo elemento a tua aplicação, como por exemplo um novo ficheiro CSS? Terias que ir a todas as páginas e adicionares. Isto demora demasiado tempo e é um erro. Não seria simpático se, em vez de repetidamente escrever sempre o mesmo HTML boilerplate (esqueleto), tu pudesses definir um layout para uma página, de uma só vez, e depois então usar esse layout para fazer novas páginas, com o seu próprio conteúdo? Esta é exactamente a função dos templates web!!

Templates web são simplesmente ficheiros de texto que contêm variáveis e fluxos de controloif..else, for, etc), e que acabam com .html ou .xml extensão.

As variáveis são substituídas pelo teu conteúdo, quando o template web é avaliado, Templates web removem a repetição, separam o conteúdo do design, e fazem com que a tua aplicação seja mais fácil de manter. Em outras palabras simples web templates são extraordinários e tu deves usá-los! Flask usa a Jinja2 para os templates; vamos ver como usá-la.

Como primeiro passo, nós vamos definir o layout da página e o boilerplate (esqueleto) do documento HMTLlayout.html e metê-lo dentro da pasta:templates/

app/templates/layout.html

Este é um simples ficheiro HTML, … mas o que está a acontecer nesta parte do {% block content %}{% endblock %} código? Para responder a isto, vamos criar outro ficheiro home.html:

app/templates/home.html

O ficheiro layout.html define um bloco vazio, chamado content, que um template filho pode preencher. Este ficheirohome.html é um template filho que herda a marcação de layout.html e preenche com o "conteúdo" do bloco, com o seu próprio texto. Em outras palavras olayout.html define todos os elementos comuns do teu website, enquanto cada filho do template personaliza o template, com o seu próprio conteúdo.

Tudo isto soa porreiro, mas como é que nós vemos actualmente isto na página? Como é que nós podemos escrever o URL no browser (navegador web) e “visitar”home.html? Vamos de volta a Fig. 1. Nós simplesmente criamos um template home.html E colocamos-o na pastatemplates/. Agora, nós necessitamos de mapear o URL, para que nós o possamos ver no browser(navegador web). Vamos abrir routes.py e fazer isto:

app/routes.py

É isto para routes.py. O que é que nós fizemos?

  1. Primeiro. Agora importamos a classe Flask e a funçãorender_template.
  2. Em seguida, nós criamos uma nova instância da classe Flask.
  3. Nós depois mapeamos o URL / para a função home(). Agora, quando alguém visita este URL, a função home() será executada.
  4. A função home() usa a função Flask render_template() para renderizar o template home.html nós simplesmente criamos através da pasta templates/ para o browser.
  5. Finalmente, nós usamos run() para executar a nossa app no servidor locar. Nós vamos definir debug flag/bandeira como true, para que nós possamos ver qualquer mensagem de erro que se aplique, se algo correr mal, e para que o servidor local automaticamente faça reload(recarregue), depois de nós fazermos alterações ao código.

Nós finalmente estamos prontos para ver os frutos do nosso trabalho. Volta para a linha de comandos e escreve:

Visita http://localhost:5000/ no teu browser (navegador web) favorito.

Quando visitamos http://localhost:5000/, routes.py tem código nele ,o qual mapeou o URL / para a função do Python home(). home() encontrou o template web home.html na pasta templates/, renderizou para HTML, e devolveu de volta para o browser, dando-nos a imagem acima .

Muito bem, mas esta home page é um pouco aborrecida, não é? Vamos fazê-la parecer melhor adicionando algum CSS. Cria um ficheiro, main.css, em static/css/,e adiciona as seguintes regras:

static/css/main.css

Adiciona esta folha de estilos para o ficheiro boilerplate(esqueleto) layout.htmldesta forma o estilo aplica-se a todos os filhos de templates adicionando esta linha ao elemento: <head>

Nós estamos a usar a função Flask, url_for, para gerar uma caminho para main.css através da pasta static. Depois de adicionar esta linha em layout.html, deve ficar assim:

app/templates/layout.html

Vamos voltar para o browser e actualizar a página para ver o resultado do CSS.

É mais isto! Agora, quando nós visitamos http://localhost:5000/, routes.py continua a mapear o URL / para a função Python home(), e home() continua a encontar o template web home.html na pasta templates/. Mas, uma vez que adicionamos o ficheiro CSS main.css, o template web home.html vê em static/ para encontrar os recursos, antes de renderizar o HTML, e ser enviado de volta para o browser.

Nós conseguimos muito até ao momento. Nós começamos com a Fig. 1 para perceber como o Flask funciona, e agora nós já vimos com é que elas funcionam, através da criação da homepage para a nossa aplicação web. Agora vamos passar a frente e criar uma página Sobre.

Criar uma página Sobre

Na secção anterior, nós criamos um template web home.html estendendo o ficheiro boilerplate (esqueleto) layout.html. Depois nós mapeamos o URL / para home.html em routes.py para nós podermos visitá-la no browser. Nós finalizamos as coisas adicionando algum estilo para fazer com que fica-se mais bonito. Vamos repetir o processo outra vez, para criar uma página Sobre para a nossa aplicação web.

Nós vamos começar por criar um template web, about.html, e coloca-lo dentro da pasta templates/.

app/templates/about.html

Assim como antes em home.html, nós estendemos através de layout.html, e depois preenchemos com o content do bloco para o nosso conteúdo personalizado.

Para visitar esta página no browser, nós necessitamos de mapear um ULR para ela. Abrir routes.py e adicionar outra rota:

Nós mapeamos o URL /about para a função about(). Agora, nós podemos abrir o browser e ir a http://localhost:5000/about e ver a nova página criada.

Adicionar navegação

A maioria dos websites têm links para as páginas principais no cabeçalho ou no rodapé do documento. Estes links são usualmente visíveis em todas as páginas do website. Vamos abrir o ficheiro boilerplate(esqueleto), layout.html. E adicionar estes links para que eles possam ser vistos em todos os filhos dos templates. Especificamente, vamos adicionar um elemento <nav> dentro do elemento <header&gt

app/templates/layout.html

Mais uma vez, nós usamos uma função Flask url_for para gerar URLs.

Em seguida, adicionamos mais alguma regras de estilos para main.css para fazer os elementos de navegação parecerem bem:

app/static/css/main.css

Finalmente, abrimos o browser e fazemos refresh(actualizar) http://localhost:5000/ para ver os novos links de navegação adicionados.

Conclusão

Ao longo deste artigo, nós construímos uma simples aplicação web com duas páginas, maioritariamente estáticas. Ao fazê-lo, nós aprendemos um fluxo de trabalho que pode ser usado para criar páginas mais complexas e com conteúdo dinâmico. Flask é uma simples, mas poderosa framework que te permite criar de forma eficiente aplicações web. Vai em frente - experimenta!

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.