Exercício – Criar um aplicativo

Concluído

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:

  1. Criar um aplicativo principal
  2. Adicionar a rota para o aplicativo
  3. Criar o modelo HTML para o site
  4. Testar o aplicativo

Criar o aplicativo principal

  1. Retornando à instância do Visual Studio Code usada anteriormente, crie um arquivo chamado app.py clicando em Novo arquivo na guia Explorar

    Screenshot showing the Visual Studio Code New File dialog.

    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.

  2. 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.

  1. Crie uma pasta chamada templates selecionando Nova Pasta na ferramenta Explorar no Visual Studio Code

  2. Selecione a pasta templates que você criou e selecione Novo Arquivo para adicionar um arquivo à pasta

  3. Nomeie o arquivo como index.html

  4. 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.

  1. Abra o terminal integrado selecionando Ctrl-` ou Cmd-` no Mac

  2. 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
    
  3. Execute o aplicativo!

    flask run
    
  4. Abra o aplicativo em um navegador indo até http://localhost:5000

Você deverá ver o formulário. Parabéns!

Verificar seu conhecimento

1.

Qual é o número da porta padrão que o Flask usa para atender às solicitações HTTP?

2.

Em qual subdiretório os arquivos de modelo Jinja devem ser armazenados por padrão?