Artigo original: How to build a web application using Flask and deploy it to the cloud
Escrito por: Salvador Villalon
Introdução
Em cada seção, mostrarei trechos de código para você acompanhar. Todo o código usando no tutorial está disponível neste repositório do GitHub.
O que é HTTP e o que isso tem a ver com o Flask?
HTTP é o protocolo dos sites da web. A internet o utiliza para interagir com computadores e servidores, para se comunicar com eles. Deixe-me dar um exemplo de como você o utiliza no seu dia a dia.
Ao digitar o nome de um site da web na barra de endereços do seu navegador e pressionar Enter, o que ocorre é o envio de uma solicitação HTTP para um servidor.
Por exemplo, quando eu vou à minha barra de endereços, digito google.com e pressiono Enter, uma solicitação HTTP é enviada a um servidor do Google. Ele, por sua vez, recebe a requisição e precisa descobrir como interpretar essa solicitação. O servidor do Google envia de volta uma resposta de HTTP que contém as informações que meu navegador da web recebe. O navegador, então, recebe o que você pediu na forma de uma página no navegador.
Como o Flask está envolvido nisso?
Escreveremos código que ficará responsável pelo processamento do lado do servidor. Nosso código receberá solicitações. Ele descobrirá com o que essas solicitações estão lidando e o que estão pedindo. Ele também descobrirá qual resposta deve ser enviada ao usuário.
Para fazer tudo isso, precisamos usar o Flask.
O que é o Flask?
Ele torna mais simples o processo de criar uma aplicação da web. O Flask nos permite nos concentrar no que os usuários estão solicitando e no tipo de resposta a ser retornada.
Conheça melhor os microframeworks (texto em inglês).
Como funciona uma aplicação em Flask?
O código permite que executemos uma aplicação da web básica que podemos servir, como se ela fosse um site da web.
from flask import Flask
app = Flask(__name__)
@app.route("/")
def home():
return "Hello, World!"
if __name__ == "__main__":
app.run(debug=True)Esse trecho de código vai armazenado em seu main.py.
Linha 1: aqui, importamos o módulo do Flask e criamos um servidor da web do Flask a partir do módulo do Flask.
Linha 3: __name__ representa o arquivo atual. Neste caso, estamos falando de main.py. Esse arquivo atual representará minha aplicação da web.
Estamos criando uma instância da classe Flask e chamando-a de app. Aqui, estamos criando uma nova aplicação da web.
Linha 5: representa a página padrão. Por exemplo, se eu vou a um site da web, como o "google.com/", sem nada após a barra. Essa será a página padrão do Google.
Linhas 6 e 7: quando o usuário visita meu site da web e vai até a página padrão (nada após a barra), a função abaixo será ativada.
Linha 9: ao executar seu script em Python, o Python atribui o nome "__main__" ao script quando ele é executado.
Se importamos outro script, a instrução if evitará que outros scripts sejam executados. Ao executarmos main.py, ele alterará seu nome para __main__ e somente então aquela instrução if será ativada.
Linha 10: é a linha que executará a aplicação. debug=True permite que erros do Python apareçam na página da web. Isso nos ajudará a identificar os erros.
Vamos tentar executar main.py
Em seu terminal ou prompt de comando, vá para a pasta que contém main.py. Em seguida, digite py main.py ou python main.py e pressione Enter. Em seu terminal ou no seu prompt de comando, deverá aparecer este resultado:
A parte importante é a que diz Running on http://127.0.0.1:5000/.
127.0.0.1 é o seu computador local. Se você não sabe o significado disso (como eu não sabia quando comecei — este artigo em inglês é bem útil), a ideia principal é o fato de 127.0.0.1 e localhost se referem ao computador local.
Vá até esse endereço e deverá ver o seguinte:
Mais diversão com o Flask
Anteriormente, você viu o que aconteceu quando executamos main.py com uma rota, que era app.route("/").
Vamos adicionar mais rotas para que você possa perceber a diferença.
from flask import Flask
app = Flask(__name__)
@app.route("/")
def home():
return "Hello, World!"
@app.route("/salvador")
def salvador():
return "Hello, Salvador"
if __name__ == "__main__":
app.run(debug=True)Nas linhas 9 a 11, adicionamos uma nova rota. Desta vez, para /salvador.
Agora, execute main.py novamente e vá para http://localhost:5000/salvador.
Até o momento, estamos retornando texto. Vamos dar uma aparência melhor ao nosso site da web adicionando HTML e CSS.
HTML, CSS e ambientes virtuais
HTML e templates no Flask
Primeiro, crie um arquivo HTML. Chamei meu arquivo de home.html.
Aqui temos o código para você começar.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Flask Tutorial</title>
</head>
<body>
<h1> My First Try Using Flask </h1>
<p> Flask is Fun </p>
</body>
</html>Algo importante para recordar
O framework Flask procura pelos arquivos HTML em uma pasta chamada templates. Você precisa criar a pasta templates e colocar todos os seus arquivos HTML lá.
Agora, precisamos alterar nosso main.py para que possamos ver o arquivo HTML que criamos.
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def home():
return render_template("home.html")
@app.route("/salvador")
def salvador():
return "Hello, Salvador"
if __name__ == "__main__":
app.run(debug=True)
We made two new changesLinha 1: importamos o método render_template() do framework Flask. render_template() procura por um template (o arquivo HTML) na pasta templates. Em seguida, renderizaremos o template que será procurado. Saiba mais sobre a função render_templates() (texto em inglês).
Linha 7: alteramos o return para que agora ele retorne render_template("home.html"). Isso nos permitirá ver o arquivo HTML.
Visite o localhost e verá as alterações: http://localhost:5000/.
Vamos adicionar mais páginas
Vamos criar um about.html dentro da pasta templates.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>About Flask</title>
</head>
<body>
<h1> About Flask </h1>
<p> Flask is a micro web framework written in Python.</p>
<p> Applications that use the Flask framework include Pinterest,
LinkedIn, and the community web page for Flask itself.</p>
</body>
</html>Vamos fazer uma alteração semelhante à que fizemos antes em nosso main.py.
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)Fizemos três alterações novas:
Linha 9: altera a rota para "/about".
Linha 10: altera a função para que agora ela seja def about():
Linha 11: altera o return para que agora ele retorne render_template("about.html").
Vejamos, agora, as alterações: http://localhost:5000/about.
Vamos nos conectar as duas páginas com um menu de navegação
Para conectar as duas páginas, podemos ter um menu de navegação na parte superior. Podemos usar o Flask para tornar mais fácil o processo de criação de um menu de navegação.
Primeiro, vamos criar um arquivo template.html. Este template.html servirá como o template "pai". Nossos dois templates "filhos" herdarão código do primeiro.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Flask Parent Template</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/template.css') }}">
</head>
<body>
<header>
<div class="container">
<h1 class="logo">First Web App</h1>
<strong><nav>
<ul class="menu">
<li><a href="{{ url_for('home') }}">Home</a></li>
<li><a href="{{ url_for('about') }}">About</a></li>
</ul>
</nav></strong>
</div>
</header>
{% block content %}
{% endblock %}
</body>
</html>Linhas 13 e 14: usaremos a função chamada url_for(). Ela aceita um nome de função como argumento. Neste momento, demos a ela o nome da função. Veja aqui mais informações sobre a função url_for().
As duas linhas com as chaves serão substituídas pelo conteúdo de home.html e de about.html. Isso dependerá do URL em que o usuário estiver navegando.
Essas alterações permitem que as páginas filhas (home.html e about.html) conectem-se à página pai (template.html). Isso nos permite não precisar copiar o código para o menu de navegação em about.html e em home.html.
Conteúdo de about.html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>About Flask</title>
</head>
<body>
{% extends "template.html" %}
{% block content %}
<h1> About Flask </h1>
<p> Flask is a micro web framework written in Python.</p>
<p> Applications that use the Flask framework include Pinterest,
LinkedIn, and the community web page for Flask itself.</p>
{% endblock %}
</body>
</html>Conteúdo de home.html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Flask Tutorial</title>
</head>
<body>
{% extends "template.html" %}
{% block content %}
<h1> My First Try Using Flask </h1>
<p> Flask is Fun </p>
{% endblock %}
</body>
</html>Vamos tentar adicionar um pouco de CSS.
Adicionando CSS ao site
Algo importante para recordar
Do mesmo modo como criamos uma pasta chamada templates para armazenar todos os nossos templates de HTML, precisaremos de uma pasta chamada static.
Em static, armazenaremos o CSS, o JavaScript, as imagens e outros arquivos necessários. É por isso que é importante criar uma pasta CSS para armazenar suas fichas de estilo (stylesheets, em inglês). Depois de fazer isso, sua pasta do projeto terá essa aparência:
Vinculando o CSS ao nosso arquivo HTML
Nosso template.html é o arquivo que vincula todas as páginas. Podemos inserir o código aqui e ele será aplicável a todas as páginas filhas.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Flask Parent Template</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/template.css') }}">
</head>
<body>
<header>
<div class="container">
<h1 class="logo">First Web App</h1>
<strong><nav>
<ul class="menu">
<li><a href="{{ url_for('home') }}">Home</a></li>
<li><a href="{{ url_for('about') }}">About</a></li>
</ul>
</nav></strong>
</div>
</header>
{% block content %}
{% endblock %}
</body>
</html>Linha 7: aqui, fornecemos o caminho onde o arquivo template.css está localizado.
Veja agora as mudanças: http://localhost:5000/about.
Continuando com o Flask e o virtualenv
Agora que você está familiarizado com o uso do Flask, você pode começar a usá-lo em projetos futuros. Algo a se fazer sempre é usar o virtualenv.
Por que usar o virtualenv?
Você pode usar o Python para outros projetos, além do desenvolvimento para a web.
Seus projetos podem ter versões diferentes do Python instaladas, bem como dependências e pacotes diferentes.
Usamos o virtualenv para criar um ambiente isolado para seu projeto em Python. Isso significa que cada projeto pode ter suas próprias dependências, independentemente de quais outras dependências os outros projetos possam ter.
Iniciando com o virtualenv
Primeiro, execute esse comando em seu prompt de comando ou no terminal:
pip install virtualenvSegundo, faça o seguinte:
virtualenv "nome do ambiente virtual"Aqui, você pode dar um nome para o ambiente. Eu geralmente dou a ele o nome de virtual. Assim, o comando normalmente é: virtualenv virtual.
Depois de configurar o ambiente virtual, confira sua pasta do projeto. Ela deve ter essa aparência. O ambiente virtual precisa ser criado no mesmo diretório onde estão localizados os arquivos da sua aplicação.
Ativando o ambiente virtual
Agora, vá para seu terminal ou prompt de comando. Vá para o diretório que contém o arquivo chamado activate. O arquivo activate é encontrado dentro de uma pasta chamada Scripts no Windows e bin no OS X e no Linux.
Para os ambientes OS X e Linux:
$ name of virtual environmnet/bin/activatePara o ambiente Windows:
name of virtual environment\Scripts\activateComo eu sou um usuário do Windows, ao ativar o ambiente, ele terá essa aparência:
A próxima etapa é instalar o Flask em seu ambiente virtual para que possamos executar a aplicação em nosso ambiente. Execute o comando:
pip install flaskExecute a aplicação e vá para http://localhost:5000/
Fizemos, finalmente, nossa aplicação para a web. Agora, queremos mostrar ao mundo todo o nosso projeto (mais informações sobre o virtualenv podem ser encontradas nos guias sobre o virtualenv e na documentação oficial do Flask - textos em inglês).
Enviando para a nuvem
Para mostrar aos outros o projeto que fizemos, precisaremos aprender a usar o Google Cloud Services.
Implantando sua aplicação da web na nuvem
Para implantar nossa aplicação da web na nuvem, usaremos o Google App Engine (Standard Environment). Esse é um exemplo de Platform as a Service (PaaS).
PaaS tem a ver com a entrega de sistemas operacionais e serviços associados pela internet sem downloads ou instalação. A abordagem permite que os clientes criem e implantem aplicações sem ter de investir na infraestrutura subjacente (para mais informações sobre PaaS, confira a TechTarget - textos em inglês).
O Google App Engine é uma oferta de plataforma como serviço que permite aos desenvolvedores e empresas criar e executar aplicações usando a infraestrutura avançada do Google — TechOpedia.
Antes de iniciar:
Você precisa de uma conta do Google. Depois de criar uma conta, vá para o console da Google Cloud Platform e crie um projeto. Além disso, você precisa instalar o Google Cloud SDK.
Ao final deste tutorial, a estrutura do seu projeto terá esta aparência.
Precisaremos criar três arquivos: app.yaml, appengine_config.py e requirements.txt.
Conteúdo de app.yaml:
runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /static
static_dir: static
- url: /.*
script: main.app
libraries:
- name: ssl
version: latestSe conferir o tutorial do Google (em inglês) na parte que fala sobre o conteúdo do app.yaml, ele não inclui a seção que fala sobre as bibliotecas (libraries, em inglês).
Na primeira vez em que tentei implantar uma aplicação da web simples, não deu certo. Depois de muitas tentativas, aprendi que precisamos incluir a biblioteca de SSL.
A biblioteca de SSL nos permite criar conexões seguras entre o client e o servidor. Sempre que o usuário visita nosso site da web, ele precisa se conectar a um servidor executado pelo Google App Engine. Precisamos criar uma conexão segura para isso (aprendi sobre isso recentemente - se tiver sugestões, eu adoraria saber a respeito).
Conteúdo de appengine_config.py:
from google.appengine.ext import vendor
# Add any libraries installed in the "lib" folder.
vendor.add('lib')Conteúdo de requirements.txt:
Flask
WerkzeugAgora, dentro do nosso ambiente virtual (não se esqueça de ativar seu virtualenv), instalaremos as novas dependências que temos em requirements.txt. Execute este comando:
pip install -t lib -r requirements.txt-t lib: esta flag copia as bibliotecas em uma pasta lib, a qual faz o upload para o App Engine durante a implantação.
-r requirements.txt: diz ao pip para instalar tudo em requirements.txt.
Implantando a aplicação
Para implantar a aplicação no Google App Engine, use este comando:
gcloud app deployEu geralmente incluo — project [ID do projeto]
Isso especifica qual projeto você está implantando. O comando terá esta aparência:
gcloud app deploy --project [ID do projeto]A aplicação
Agora, confira o URL de sua aplicação. A aplicação será armazenada da seguinte maneira:
"id do seu projeto".appspot.comMinha aplicação está aqui: http://sal-flask-tutorial.appspot.com
Conclusão
Neste tutorial, você aprendeu como:
- Usar o framework Flask para usar o Python como uma linguagem do lado do servidor.
- Usar HTML, CSS e o Flask para fazer um site da web.
- Criar um ambiente virtual usando o virtualenv.
- Usar o Google App Engine Standard Environment para implantar uma aplicação na nuvem.
O que eu aprendi
Eu aprendi três coisas importantes nesse pequeno projeto.
Primeiro, eu aprendi sobre a diferença entre um sie da web estático e uma aplicação da web
Sites da web estáticos:
- São aqueles onde o servidor está servindo os arquivos de HTML, CSS e JavaScript para o client. O conteúdo do site não muda quando o usuário interage com ele.
Aplicações da web:
- Uma aplicação da web ou site da web dinâmico gera conteúdo com base nos dados obtidos (na maior parte das vezes, de um banco de dados) que se alteram com base em uma interação do usuário com o site. Em uma aplicação da web, o servidor é responsável por fazer consultas, obter e atualizar os dados. Isso faz com que as aplicações da web sejam mais lentas e mais difíceis de implantar que os sites da web estáticos para aplicações simples (Reddit).
Lado do servidor e lado do client:
- Eu aprendi que uma aplicação da web tem dois lados, o lado do client e o lado do servidor. O lado do client é aquele com o qual o usuário interage e o lado do servidor é onde todas as informações que o usuário inserir são processadas.
Em segundo lugar, eu aprendi sobre serviços da nuvem
A maioria de meus projetos anteriores eram sites da web estáticos. Para implantá-los, usei as GitHub Pages. As GitHub Pages são um serviço de hospedagem gratuito de sites estáticos para hospedar projetos em um repositório do GitHub.
Ao trabalhar com aplicações da web, eu não pude usar as GitHub Pages para hospedá-las. As GitHub Pages são apenas para sites da web estáticos, não para algo dinâmico como uma aplicação da web que exige um servidor e um banco de dados. Precisei usar serviços da nuvem, como o Amazon Web Services ou o Heroku.
Por fim, eu aprendi a usar o Python como uma linguagem do lado do servidor
Para criar o lado do servidor da aplicação da web, tive de usar uma linguagem do lado do servidor. Eu aprendi que poderia usar o framework Flask para usar o Python como linguagem do lado do servidor.
Próximos passos:
Você pode criar de tudo com o Flask. Eu percebi que o Flask ajuda a tornar o código por trás dos sites da web mais fácil de ler. Eu fiz as aplicações abaixo durante o verão de 2018 e espero poder fazer mais.
Projetos pessoais
Durante meu estágio
Aqui temos uma lista de recursos que me ajudaram a criar este tutorial (em inglês):
- "App Engine — Build Scalable Web & Mobile Backends in Any Language | App Engine | Google Cloud." Google, Google, cloud.google.com/appengine/.
- "Building a Website with Python Flask." PythonHow, pythonhow.com/building-a-website-with-python-flask/.
- "Flask — Lecture 2 — CS50’s Web Programming with Python and JavaScript." YouTube, 6 de fevereiro de 2018, youtu.be/j5wysXqaIV8.
- "Getting Started with Flask on App Engine Standard Environment | App Engine Standard Environment for Python | Google Cloud." Google, Google, cloud.google.com/appengine/docs/standard/python/getting-started/python-standard-env.
- "Installation." Welcome | Flask (A Python Microframework), flask.pocoo.org/docs/0.12/installation/.
- "Python — Deploying Static Flask Sites for Free on Github Pages." Reddit, www.reddit.com/r/Python/comments/1iewqt/deploying_static_flask_sites_for_free_on_github/.
- Real Python. "Python Virtual Environments: A Primer — Real Python." Real Python, Real Python, 7 de agosto de 2018, realpython.com/python-virtual-environments-a-primer/.
- "What Is Cloud Services? — Definition from WhatIs.com." SearchITChannel, searchitchannel.techtarget.com/definition/cloud-services.
- "What Is Google App Engine (GAE)? — Definition from Techopedia." Techopedia.com, www.techopedia.com/definition/31267/google-app-engine-gae.
Se tiver perguntas ou sugestões, fique à vontade para entrar em contato.