Exercício – Criar um aplicativo
Vamos criar o aplicativo de forma interativa, focando em conceitos específicos à medida que avançamos. Para começar, criaremos a página de aterrissagem do aplicativo, que exibirá o formulário para o usuário.
Normalmente, o ponto de entrada em aplicativos Flask é um arquivo chamado app.py. Vamos seguir essa convenção e criar o núcleo do aplicativo. Vamos executar as seguintes etapas:
- Criar um aplicativo principal
- Adicionar a rota para o aplicativo
- Criar o modelo HTML para o site
- Testar o aplicativo
Criar o aplicativo principal
Retornando à instância do Visual Studio Code usada anteriormente, crie um arquivo chamado app.py clicando em Novo arquivo na guia Explorar
Importante
Se esta for a primeira vez que usa o Visual Studio Code para criar um aplicativo Python, você receberá mensagens sobre como instalar a extensão do Python e o linter pylint. Selecione Instalar para instalar cada um desses complementos.
Adicione o código para criar seu aplicativo Flask
from flask import Flask, redirect, url_for, request, render_template, session app = Flask(__name__)
A instrução de importação inclui referências a Flask
, que é o núcleo de qualquer aplicativo Flask. Usaremos render_template
em alguns instantes, quando quisermos retornar o HTML.
app
será o aplicativo principal. Nós o usaremos quando registrarmos nossas rotas na próxima etapa.
Adicionar a rota
Nosso aplicativo usará uma rota – /. Essa rota é chamada algumas vezes de default ou index, porque será usada se o usuário não fornecer nada além do nome do domínio ou do servidor.
Adicione o seguinte código ao final de app.py
@app.route('/', methods=['GET'])
def index():
return render_template('index.html')
Usando @app.route
, indicamos a rota que queremos criar. O caminho será /, que é a rota padrão. Indicamos que ele será usado para GET. Se uma solicitação GET chegar para /, o Flask chamará de forma automática a função declarada imediatamente abaixo do decorador, index
em nosso caso. No corpo de index
, indicamos que retornaremos um modelo HTML chamado index.html para o usuário.
Criar o modelo HTML para o formulário
O Jinja, o mecanismo de modelagem para Flask, é muito focado em HTML. Como resultado, podemos usar todas as habilidades e ferramentas HTML que já temos. Vamos usar o Bootstrap para estruturar nossa página e melhorar o aspecto dela. Com o Bootstrap, usaremos diferentes classes CSS no HTML. Se você não estiver familiarizado com o Bootstrap, poderá ignorar as classes e se concentrar no HTML (que é a parte realmente importante).
Importante
HTML (Hypertext Markup Language) é uma linguagem de marcação padrão utilizada para criar páginas da Web. O HTML consiste em uma série de marcas e atributos para criar títulos, parágrafos, listas, imagens, links e outros elementos que compõem uma página da Web. Quando um usuário solicita uma página da Web, o navegador lê o código HTML e o renderiza como uma página da Web visual com a qual o usuário pode interagir. Para saber mais sobre HTML, consulte HTML básico.
Modelos para Flask precisam ser criados em uma pasta chamada templates, voltada para isso. Vamos criar a pasta, o arquivo necessário e adicionar o HTML.
Crie uma pasta chamada templates selecionando Nova Pasta na ferramenta Explorar no Visual Studio Code
Selecione a pasta templates que você criou e selecione Novo Arquivo para adicionar um arquivo à pasta
Nomeie o arquivo como index.html
Adicione o seguinte código HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> <title>Translator</title> </head> <body> <div class="container"> <h1>Translation service</h1> <div>Enter the text you wish to translate, choose the language, and click Translate!</div> <div> <form method="POST"> <div class="form-group"> <textarea name="text" cols="20" rows="10" class="form-control"></textarea> </div> <div class="form-group"> <label for="language">Language:</label> <select name="language" class="form-control"> <option value="en">English</option> <option value="it">Italian</option> <option value="ja">Japanese</option> <option value="ru">Russian</option> <option value="de">German</option> </select> </div> <div> <button type="submit" class="btn btn-success">Translate!</button> </div> </form> </div> </div> </body> </html>
Os componentes principais no HTML acima são o textarea
para o texto que o usuário deseja traduzir e a lista suspensa (select
) que o usuário usará para indicar o idioma de destino. Se você quiser adicionar mais idiomas, poderá consultar a lista de idiomas com suporte para outras opções. Defina o atributo value
como o código de idioma, por exemplo, pl para polonês.
Testar o aplicativo
Com nosso site inicial criado, é hora de testá-lo! Vamos usar o terminal integrado dentro do Visual Studio Code para facilitar nossa vida.
Abra o terminal integrado selecionando Ctrl-` ou Cmd-` no Mac
Execute o comando a seguir a fim de definir o runtime do Flask para desenvolvimento, o que significa que o servidor será recarregado automaticamente em cada alteração
# Windows set FLASK_ENV=development # Linux/macOS export FLASK_ENV=development
Execute o aplicativo!
flask run
Abra o aplicativo em um navegador indo até http://localhost:5000
Você deverá ver o formulário. Parabéns!
Verificar seu conhecimento
Precisa de ajuda? Confira nosso guia de solução de problemas ou forneça comentários específicos relatando um problema.