Exercício – Criar uma aplicação
Vamos criar a nossa aplicação de forma iterativa e concentrar-nos nos conceitos específicos à medida que avançamos. Para começar, vamos criar uma página de destino para a nossa aplicação, que vai apresentar o formulário que o utilizador vai utilizar.
Normalmente, o ponto de entrada para aplicações Flask é o ficheiro com o nome app.py. Vamos seguir esta convenção e criar o núcleo da aplicação. Vamos realizar os seguintes passos:
- Criar a aplicação nuclear
- Adicionar a rota para a nossa aplicação
- Criar um modelo HTML para o site
- Testar a aplicação
Criar a aplicação nuclear
Vamos regressar à instância do Visual Studio Code que utilizamos anteriormente e criar um novo ficheiro com o nome app.py ao clicar em Novo ficheiro no separador Explorador
Importante
Se, neste exercício, for a primeira vez que utiliza o Visual Studio Code para criar uma aplicação Python, receberá mensagens sobre a instalação da extensão do Python e o linter pylint. Selecione Instalar para instalar cada um destes suplementos.
Adicione o código para criar a aplicação Flask
from flask import Flask, redirect, url_for, request, render_template, session app = Flask(__name__)
A instrução importação inclui referências a Flask, que é o núcleo de qualquer aplicação Flask. Vamos utilizar render_template daqui a pouco, quando quisermos regressar ao nosso HTML.
app será a aplicação nuclear. Vamos utilizá-la ao registar as nossas rotas no passo seguinte.
Adicionar a rota
A aplicação vai utilizar uma rota – /. Esta rota é por vezes denominada rota padrão ou de índice, dado que se tratará da rota utilizada se o utilizador não indicar nada para além do nome de domínio ou servidor.
Adicione o seguinte código no final de app.py
@app.route('/', methods=['GET'])
def index():
return render_template('index.html')
Com @app.route, indicamos a rota que queremos criar. O caminho será /, que é a rota padrão. Indicamos que esta rota será utilizada para GET. Se um pedido GET chegar para /, o Flask chamará automaticamente a função declarada imediatamente abaixo do decorador, index no nosso caso. No corpo de index, indicamos que vamos devolver um modelo HTML com o nome index.html ao utilizador.
Criar um modelo HTML para o formulário
O Jinja, o motor de modelagem do Flask, concentra-se profundamente no HTML. Como resultado, podemos utilizar todas as competências e ferramentas HTML que já possuímos. Vamos utilizar o Programa de arranque do sistema para dispor a página e para a tornar mais agradável. Ao utilizar o Programa de arranque do sistema, vamos utilizar diferentes classes CSS no nosso HTML. Se não estiver familiarizado com o Programa de arranque do sistema, poderá ignorar as classes e focar-se no HTML (que é realmente a parte importante).
Importante
HTML (Hypertext Markup Language) é uma linguagem de marcação padrão usada para criar páginas web. HTML consiste em uma série de tags 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, seu navegador lê o código HTML e o processa como uma página da Web visual com a qual o usuário pode interagir. Para saber mais sobre HTML, consulte Noções básicas de HTML.
Os modelos do Flask devem ser criados numa pasta chamada modelos, o que é apropriado. Vamos criar a pasta, o ficheiro necessário e adicionar o HTML.
Crie uma nova pasta com o nome modelos ao selecionar Nova Pasta na ferramenta Explorador do Visual Studio Code
Selecione a pasta modelos que criou e selecione Novo Ficheiro para adicionar um ficheiro à pasta
Dê o nome index.html ao ficheiro
Adicione o seguinte 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 essenciais no HTML acima são as textarea do texto que o utilizador quer traduzir e a lista pendente (select), que o utilizador vai utilizar para indicar o idioma de destino. Se quiser adicionar mais idiomas, poderá consultar a lista de idiomas suportados para ver outras opções. Defina o atributo value como o código de idioma, por exemplo pl para Polaco.
Testar a aplicação
Com o site inicial criado, é o momento de o testar! Vamos utilizar o terminal integrado dentro do Visual Studio Code para tornar as nossas vidas um pouco mais fáceis.
Abra o terminal integrado selecionando Ctrl-' ou Cmd-' num Mac
Execute o seguinte comando para definir o runtime do Flask para programação, o que significa que o servidor será recarregado automaticamente a cada alteração
# Windows set FLASK_ENV=development # Linux/macOS export FLASK_ENV=developmentExecute o aplicativo!
flask runAbra a aplicação num browser ao navegar para http://localhost:5000
Deverá ver o formulário apresentado! Parabéns!