Tutorial: Introdução à estrutura da Web do Flask no Visual Studio

O Flask é uma estrutura leve do Python para aplicativos Web que fornece as noções básicas de roteamento de URL e renderização de página.

O Flask é denominado uma "microestrutura", porque não oferece diretamente funcionalidades como validação de formulário, abstração de banco de dados, autenticação e assim por diante. Essas funcionalidades são fornecidas por pacotes especiais do Python chamados extensões do Flask. As extensões integram-se perfeitamente ao Flask para serem exibidas como se fizessem parte do próprio Flask. Por exemplo, o Flask não oferece um mecanismo de modelo de página. A modelagem é fornecida por extensões como Jinja e Jade, conforme demonstrado neste tutorial.

Neste tutorial, você aprenderá como:

• Crie um projeto básico do Flask em um repositório GIT usando o modelo "Projeto Web em Branco do Flask" (etapa 1).
• Crie um aplicativo do Flask com uma página e renderize essa página usando um modelo (etapa 2).
• Forneça arquivos estáticos, adicione páginas e use a herança do modelo (etapa 3).
• Use o modelo Projeto Web do Flask para criar um aplicativo com várias páginas e design responsivo (etapa 4).

No decorrer dessas etapas, você criará uma única solução do Visual Studio que contém dois projetos separados. Você criará o projeto usando diferentes modelos de projeto do Flask incluídos com o Visual Studio. Se você mantiver os projetos na mesma solução, poderá facilmente alternar entre diferentes arquivos para comparação.

Pré-requisitos

Os modelos de projeto do Flask são incluídos com todas as versões anteriores das Ferramentas Python para Visual Studio, embora os detalhes possam ser diferentes do que foi discutido neste tutorial.

No momento, não há suporte para o desenvolvimento do Python no Visual Studio para Mac. No Mac e no Linux, use o tutorial Extensão Python no Visual Studio Code.

Etapa 1-1: Criar uma solução e um projeto do Visual Studio

Etapa 1-2: Examinar os controles do Git e publicar em um repositório remoto

Pergunta: Quais são algumas vantagens de usar o controle do código-fonte a partir do início de um projeto?

Reposta: o uso do controle do código-fonte desde o início, especialmente se você também usar um repositório remoto, fornece um backup regular do projeto em um local externo. Em vez de manter um projeto apenas em um sistema de arquivos local, o controle do código-fonte também oferece um histórico de alterações completo e facilita a reversão de um único arquivo ou todo o projeto para um estado anterior. O histórico de alterações ajuda a determinar a causa das regressões (falhas de teste). O controle do código-fonte é essencial se várias pessoas estiverem trabalhando em um projeto, pois ele gerencia substituições e fornece a resolução de conflitos. O controle do código-fonte é basicamente uma forma de automação, preparando para automatizar o gerenciamento de compilações, testes e versões. Esse recurso representa o primeiro passo no uso de DevOps em um projeto e, como os obstáculos para entrar são muito baixos, realmente não há motivos para não usar o controle do código-fonte desde o início.

Para uma discussão mais aprofundada sobre o controle do código-fonte usado como automação, confira A origem da verdade: a função dos repositórios no DevOps, um artigo da MSDN Magazine destinado a aplicativos móveis, mas que também se aplica a aplicativos Web.

Pergunta: É possível evitar que o Visual Studio confirme automaticamente um novo projeto?

Resposta: Sim. Para desabilitar a confirmação automática, vá para a página Configurações no Team Explorer, escolha Git>Configurações Globais, desmarque o opção rotulada como Confirmar alterações após mesclagem por padrão e, em seguida, escolha Atualizar.

Etapa 1-3: Criar o ambiente virtual e excluí-lo do controle do código-fonte

Agora que você configurou o controle do código-fonte para o seu projeto, você pode criar o ambiente virtual com os pacotes Flask necessários que o projeto requer. Você pode usar o Team Explorer para excluir a pasta do ambiente do controle do código-fonte.

Pergunta: Por que criar um ambiente virtual?

Resposta: Um ambiente virtual é uma ótima maneira de isolar as dependências exatas do seu aplicativo. Esse isolamento evita conflitos em um ambiente global do Python e auxilia nos testes e na colaboração. Com o tempo, à medida que desenvolver um aplicativo, invariavelmente, você introduzirá muitos pacotes úteis do Python. Mantendo os pacotes em um ambiente virtual específico do projeto, você pode atualizar com facilidade o arquivo requirements.txt do projeto que descreve esse ambiente, incluído no controle do código-fonte. Quando o projeto é copiado para outros computadores, incluindo servidores de build, servidores de implantação e outros computadores de desenvolvimento, é fácil recriar o ambiente usando apenas o requirements.txt (é por isso que o ambiente não precisa estar no controle do código-fonte). Para obter mais informações, confira Usar ambientes virtuais.

Pergunta: Como faço para remover um ambiente virtual que já está confirmado no controle do código-fonte?

Resposta: Primeiro, edite o arquivo .gitignore para excluir a pasta: localize a seção ao final com o comentário # Python Tools for Visual Studio (PTVS) e adicione uma nova linha à pasta do ambiente virtual, como /BasicProject/env. (Como o Visual Studio não mostra o arquivo no Gerenciador de Soluções, abra-o diretamente usando o comando de menu Arquivo>Abrir>Arquivo. Abra também o arquivo no Team Explorer: na página Configurações, selecione Configurações do Repositório, vá para a seção Arquivos Ignorar e de Atributos e, em seguida, selecione o link Editar ao lado de .gitignore.)

Em segundo lugar, abra uma janela Comando, navegue para a pasta, como BasicProject, que contém a pasta do ambiente virtual, como env, e execute git rm -r env. Em seguida, confirme essas alterações na linha de comando (git commit -m 'Remove venv') ou confirme na página Alterações do Team Explorer.

Etapa 1-4: Examinar o código de texto clichê

1. Quando a criação do projeto for concluída, você verá a solução e o projeto no Gerenciador de Soluções, em que o projeto contém apenas dois arquivos, app.py e requirements.txt:

   

2. Conforme observado anteriormente, o arquivo requirements.txt especifica a dependência de pacote do Flask. A presença desse arquivo é que faz com que você seja convidado a criar um ambiente virtual ao desenvolver o projeto pela primeira vez.

3. O único arquivo app.py contém três partes. A primeira é uma instrução import para o Flask, criando uma instância da classe Flask, atribuída à variável app e então atribuindo uma variável wsgi_app (útil ao implantar um host da Web, mas não será usada no momento):

   from flask import Flask
   app = Flask(__name__)
   
   # Make the WSGI interface available at the top level so wfastcgi can get it.
   wsgi_app = app.wsgi_app
   

4. A segunda parte, ao fim do arquivo, é um trecho do código opcional que inicia o servidor de desenvolvimento do Flask com valores de porta e de host específicos extraídos de variáveis de ambiente (padrão para localhost:5555):

   if __name__ == '__main__':
       import os
       HOST = os.environ.get('SERVER_HOST', 'localhost')
       try:
           PORT = int(os.environ.get('SERVER_PORT', '5555'))
       except ValueError:
           PORT = 5555
       app.run(HOST, PORT)
   

5. A terceira é um breve trecho de código que atribui uma função a uma rota de URL, o que significa que a função oferece o recurso identificado pela URL. Defina rotas usando o decorador @app.route do Flask, cujo argumento é a URL relativa da raiz do site. Como é possível ver no código, a função retorna apenas uma cadeia de caracteres de texto, que é suficiente para um navegador renderizar. Nas etapas seguintes, você renderizará páginas mais avançadas com HTML.

   @app.route('/')
   def hello():
       """Renders a sample page."""
       return "Hello World!"
   

Pergunta: Qual é a finalidade do argumento name para a classe do Flask?

Resposta: o argumento é o nome do módulo ou do pacote do aplicativo e informa ao Flask onde procurar modelos, arquivos estáticos e outros recursos que pertencem ao aplicativo. Para aplicativos contidos em um único módulo, __name__ é sempre o valor adequado. Também é importante para as extensões que precisam de informações de depuração. Para obter mais informações, e outros argumentos, confira a documentação de classes do Flask (flask.pocoo.org).

Pergunta: Uma função pode ter mais de um decorador de rota?

Resposta: sim, será possível usar quantos decoradores você quiser se a mesma função servir para várias rotas. Por exemplo, para usar a função hello para "/" e "/hello", use o seguinte código:

@app.route('/')
@app.route('/hello')
def hello():
    """Renders a sample page."""
    return "Hello World!"

Pergunta: Como o Flask trabalha com rotas de URL de variável e parâmetros de consulta?

Resposta: em uma rota, marque qualquer variável com <variable_name>, e o Flask passará a variável para a função usando um argumento nomeado no caminho da URL. Por exemplo, uma rota na forma de /hello/<name> gera o argumento de cadeia de caracteres name para a função . Os parâmetros de consulta também estão disponíveis por meio da propriedade request.args, especificamente por meio do método request.args.get.

# URL: /hello/<name>?message=Have%20a%20nice%20day
@app.route('/hello/<name>')
def hello(name):
    msg = request.args.get('message','')
    return "Hello " + name + "! "+ msg + "."

Para alterar o tipo, insira int, float, path à frente da variável (que aceita barras para delinear nomes de pasta) e uuid. Para obter detalhes, confira Regras de variáveis na documentação do Flask.

Pergunta: O Visual Studio pode gerar um arquivo requirements.txt a partir de um ambiente virtual depois de instalar outros pacotes?

Resposta: Sim. Expanda o nó Ambientes do Python, clique com o botão direito do mouse no ambiente virtual e escolha o comando Gerar requirements.txt. É recomendável usar esse comando periodicamente conforme você modifica o ambiente e confirma as alterações em requirements.txt no controle do código-fonte, juntamente com outras alterações de código que dependem desse ambiente. Se você configurar a integração contínua em um servidor de compilação, deverá gerar o arquivo e confirmar as alterações sempre que modificar o ambiente.

Etapa 1-5: Executar o projeto

1. No Visual Studio, selecione Depurar>Iniciar Depuração (F5) ou use o botão Servidor Web na barra de ferramentas (o navegador que você vai ver pode variar):

   

2. Qualquer comando atribui um número da porta aleatório à variável de ambiente PORT e, em seguida, executa python app.py. O código inicia o aplicativo usando essa porta dentro do servidor de desenvolvimento do Flask. Se o Visual Studio informar Falha ao iniciar o depurador com uma mensagem que alerta para a ausência de um arquivo de inicialização, clique com o botão direito do mouse em app.py no Gerenciador de Soluções e selecione Definir como Arquivo de Inicialização.

3. Ao iniciar o servidor, você verá que a janela do console aberta exibe o log do servidor. O Visual Studio abre automaticamente um navegador para http://localhost:<port>, em que você verá a mensagem renderizada pela função hello:

   

4. Quando terminar, interrompa o servidor fechando a janela do console ou usando o comando Depurar>Parar Depuração no Visual Studio.

Pergunta: Qual é a diferença entre usar os comandos do menu Depuração e os comandos do servidor no submenu do Python do projeto?

Resposta: Além dos comandos do menu Depurar e dos botões da barra de ferramentas, você também pode iniciar o servidor usando os comandos Python>Executar servidor ou Python>Executar o servidor de depuração no menu de contexto do projeto. Os dois comandos abrem uma janela de console na qual você vê a URL local (localhost:port) do servidor em execução. No entanto, você deve abrir manualmente um navegador usando essa URL, já que a execução do servidor de depuração não inicia automaticamente o depurador do Visual Studio. Se desejar, você pode posteriormente anexar um depurador ao processo em execução usando o comando Depurar>Anexar ao Processo.

Próximas etapas

Neste ponto, o projeto básico do Flask contém o código de inicialização e o código de página no mesmo arquivo. É melhor separar essas duas questões e também separar o HTML e os dados usando modelos.