Tutorial: Criar um aplicativo Flask com modos de exibição e modelos de página no Visual Studio

Este artigo apresenta a Etapa 2 da série de tutoriais Trabalhar com a estrutura da Web Flask no Visual Studio.

O Visual Studio permite que você crie aplicativos Flask a partir de modelos de projeto que fornecem um ponto de partida mais extenso para seus projetos. Passo 1 no tutorial descreve como criar um aplicativo Flask com uma página, onde todo o código está em um único arquivo. Na Etapa 2, você refatora o código e cria uma estrutura para modelos de página para permitir o desenvolvimento adicional. Em particular, você deseja separar o código para as exibições do aplicativo de outros aspetos, como o código de inicialização.

Na etapa 2 do tutorial, você aprenderá a:

• Refatore o código do aplicativo para separar as exibições do código de inicialização
• Apresentar uma vista usando um modelo de página

Pré-requisitos

• Uma solução Visual Studio e um projeto de aplicativo Flask criados em Etapa 1: Criar solução Visual Studio e projeto Flask.

Projeto Refactor Flask para desenvolvimento posterior

O modelo Blank Flask Web Project permite criar um projeto com um único arquivo app.py que contém código de inicialização ao lado de uma única exibição. Para permitir o desenvolvimento adicional de um aplicativo com várias visualizações e modelos, você precisa separar essas funções.

Siga estes passos para ajustar o seu projeto Flask para permitir um maior desenvolvimento:

1. No Gerenciador de Soluções , clique com o botão direito do mouse na pasta do projeto Flask (BasicProject) e selecione Adicionar>Nova Pasta.

   

2. Nomeie a nova pasta do aplicativo HelloFlask.

3. Clique com o botão direito do mouse na pasta HelloFlask e selecione Adicionar>novo item para criar um novo arquivo.

4. Na caixa de diálogo Adicionar Novo Item, selecione o modelo de arquivo Arquivo Python vazio.

   1. Nomeie o arquivo __init__.py. O nome do ficheiro deve incluir dois caracteres de sublinhado iniciais e dois caracteres de sublinhado finais (_) ao redor da palavra init.

   2. Selecione Adicionar.

   

5. Adicione o seguinte código ao novo arquivo, que cria a instância Flask e carrega as exibições do aplicativo:

   from flask import Flask
   app = Flask(__name__)
   
   import HelloFlask.views
   

6. Na pasta HelloFlask, crie outro novo arquivo Python chamado views.py.

   Importante

   Certifique-se de especificar o nome do arquivo como views.py. O nome views é importante devido à declaração import HelloFlask.views no ficheiro __init__.py. Se o nome visualizações não for o mesmo em ambas as instâncias, o Visual Studio exibirá um erro em tempo de execução.

7. Adicione o seguinte código ao arquivo views.py. Esse código renomeia a função e define a rota de retorno para o ponto de extremidade /home:

   from flask import Flask
   from HelloFlask import app
   
   @app.route('/')
   @app.route('/home')
   def home():
       return "Hello Flask!"
   

   Esse código também contém o código de renderização de página do arquivo app.py e importa o objeto app declarado no arquivo __init__.py.

8. Na pasta HelloFlask, crie uma subpasta chamada templates. A pasta está vazia por enquanto.

9. Na pasta do projeto Flask (BasicProject), substitua o conteúdo do arquivo app.py pelo seguinte código:

   import os
   from HelloFlask import app    # Imports the code from HelloFlask/__init__.py
   
   if __name__ == '__main__':
       HOST = os.environ.get('SERVER_HOST', 'localhost')
   
       try:
           PORT = int(os.environ.get('SERVER_PORT', '5555'))
       except ValueError:
           PORT = 5555
   
       app.run(HOST, PORT)
   

10. Depois de atualizar o código, renomeie o arquivo app.py para runserver.py.

11. Confirme se a estrutura do projeto Flask refatorado se parece com o exemplo a seguir:

    

Executar programa refatorado e verificar rotas

Agora você está pronto para executar seu projeto no Visual Studio:

1. No Visual Studio, selecione Depurar>Iniciar a Depuração (F5) ou selecione do Servidor Web na barra de ferramentas principal (o navegador que você vê pode variar):

2. Quando a aplicação abrir no navegador, experimente os endereços de rota URL / (root) e /home:

   

Executar programa atualizado no Depurador

Você também pode definir pontos de interrupção em várias partes do código e seguir a sequência de inicialização do aplicativo no Depurador:

1. Defina vários pontos de interrupção, como os seguintes pontos:

   • A primeira linha do arquivo runserver.py
   • A primeira linha do arquivo __init__.py
   • A linha return "Hello Flask!" no arquivo views.py

2. Inicie a aplicação no Depurador selecionando Depurar>Iniciar Depuração ou F5.

3. Enquanto o Depurador estiver em execução, percorra o código com F10ou execute o código a partir de cada ponto de interrupção com F5. Você também pode usar controles de depuração na barra de ferramentas principal no Visual Studio, como as opções de Continuar, Parar, Reiniciare Etapa:

   

4. Quando terminar, selecione Ctrl+C seguido de qualquer tecla para parar o aplicativo. Você também pode fechar qualquer janela aberta do navegador para as rotas.

Confirmar alterações no controle do código-fonte

Depois de refatorar o código e testar as atualizações, você pode revisar e confirmar suas alterações no controle do código-fonte:

1. Salve as alterações em seus arquivos de projeto, como com o atalho de teclado Ctrl+S.

2. Na barra de controles do Git, selecione as alterações não confirmadas (lápis 5) para abrir a janela Alterações do Git:

   

3. Na janela Git Changes, insira uma mensagem de confirmação e selecione Confirmar tudo:

   

   Quando a confirmação for concluída, o Visual Studio exibirá a mensagem Confirmar <hash> criado localmente.

4. (Opcional) Envie as alterações confirmadas para o repositório remoto:

   1. Na barra de controles do Git, selecione as confirmações de saída/entrada (setas 1/0).

   2. Selecione Sincronização (Primeiro Pull depois Push) ou Push.

   

   Você também pode acumular vários commits locais antes de enviá-los para o repositório remoto.

Para procedimentos subsequentes nesta série de tutoriais, você pode consultar esta seção para obter as etapas para confirmar alterações no controle do código-fonte.

Determinar a frequência de confirmações e envios

Confirmar alterações no controle do código-fonte cria um registro no log de alterações e um ponto para o qual você pode reverter o repositório, conforme necessário. Você também pode analisar cada commit para revisar as alterações específicas.

As alterações no Git são baratas. Pode ser preferível submeter as suas alterações em pequenas quantidades com commits frequentes, em vez de acumular um grande número de alterações e submetê-las como um único commit.

Você não precisa confirmar todas as pequenas alterações em arquivos individuais. É comum fazer uma confirmação quando você adiciona um recurso, altera uma estrutura como mostrado nesta etapa da série de tutoriais ou refatora algum código. Também é uma boa prática verificar com seus colaboradores se há um acordo sobre a granularidade dos compromissos que funcionam melhor para todos.

A frequência com que você confirma e a frequência com que envia confirmações para um repositório remoto são duas preocupações diferentes. Você pode acumular várias confirmações em seu repositório local antes de enviá-las por push para o repositório remoto. A frequência de suas confirmações depende de como sua equipe deseja gerenciar o repositório.

Usar modelos para renderizar páginas e modos de exibição

A função home no arquivo views.py gera uma resposta HTTP de texto simples para a página. A maioria das páginas da Web do mundo real responde com páginas HTML ricas que geralmente incorporam dados dinâmicos. A principal razão pela qual os desenvolvedores definem modos de exibição usando uma função é gerar conteúdo dinamicamente.

O valor de retorno para a exibição é apenas uma cadeia de caracteres. Você pode criar qualquer HTML dentro de uma cadeia de caracteres usando conteúdo dinâmico. Como é melhor separar a marcação dos dados, é melhor colocar a marcação em um modelo e manter os dados no código.

Ajustar modos de exibição para usar HTML embutido

O primeiro passo é converter o processamento de visualização para usar HTML embutido para a página com algum conteúdo dinâmico:

1. Substitua o conteúdo do arquivo views.py com o seguinte código:

   from datetime import datetime
   from flask import render_template
   from HelloFlask import app
   
   @app.route('/')
   @app.route('/home')
   def home():
       now = datetime.now()
       formatted_now = now.strftime("%A, %d %B, %Y at %X")
   
       html_content = "<html><head><title>Hello Flask</title></head><body>"
       html_content += "<strong>Hello Flask!</strong> on " + formatted_now
       html_content += "</body></html>"
   
       return html_content
   

2. Salve suas alterações e execute seu aplicativo novamente.

3. Atualize a página algumas vezes para confirmar que a data e a hora são atualizadas. Quando terminar, pare o aplicativo.

Criar modelo HTML

Em seguida, converta o processo de renderização de página para usar um modelo HTML:

1. Clique com o botão direito do mouse na pasta de modelos , e selecione Adicionar>Novo Item para criar um novo arquivo.

2. Na caixa de diálogo Adicionar Novo Item, selecione o modelo de arquivo Página HTML. Nomeie o arquivo index.html e selecione Adicionar.

3. Substitua o conteúdo fornecido do arquivo HTML pela seguinte marcação:

   <html>
   <head>
      <title>Hello Flask</title>
   </head>
   
   <body>
      {{ content }}
   </body>
   </html>
   

   Neste código, a instrução {{ content }} é um espaço reservado ou token de substituição (também chamado de variável de modelo ) para o qual você fornece um valor no código.

Ajustar a função home para carregar o modelo

Você precisa modificar a função home para usar o método render_template. Esse método carrega o modelo HTML e fornece um valor para {{ content }} usando um argumento nomeado que corresponde ao nome do espaço reservado.

1. No arquivo views.py, substitua a definição de função home pelo seguinte código:

   def home():
       now = datetime.now()
       formatted_now = now.strftime("%A, %d %B, %Y at %X")
   
       return render_template(
           "index.html",
           content = "<strong>Hello, Flask!</strong> on " + formatted_now)
   

   Flask procura automaticamente modelos na pasta modelos, assim o caminho para o modelo é relativo a essa pasta.

2. Salve as alterações do projeto e execute o aplicativo novamente.

   Observe que a sintaxe HTML embutida (\<strong> ...) dentro do valor content não renderiza como HTML porque o mecanismo de modelagem (Jinja) escapa automaticamente do conteúdo HTML. A fuga automática evita vulnerabilidades acidentais a ataques de injeção.

   Os desenvolvedores geralmente coletam entradas de uma página e as usam como um valor em outra usando um espaço reservado para modelo. Escapar também serve como um lembrete de que é melhor manter o HTML fora do código.

   Quando terminar, pare o aplicativo.

Usar espaços reservados distintos

Você pode usar espaços reservados distintos para cada parte dos dados dentro da estrutura HTML. Em seguida, ajuste a função home novamente para fornecer os valores de espaço reservado específicos:

1. Substitua o conteúdo do arquivo index.html pela seguinte marcação:

   <html>
     <head>
       <title>{{ title }}</title>
     </head>
     <body>
       <strong>{{ message }}</strong>{{ content }}
     </body>
   </html>
   

2. No arquivo views.py, substitua a definição de função home pelo código a seguir para fornecer valores para todos os espaços reservados:

   def home():
       now = datetime.now()
       formatted_now = now.strftime("%A, %d %B, %Y at %X")
   
       return render_template(
           "index.html",
           title = "Hello Flask",
           message = "Hello, Flask!",
           content = " on " + formatted_now)
   

3. Salve suas alterações e execute seu aplicativo novamente. Desta vez, você deve ver a saída renderizada corretamente:

   

4. Você pode confirmar suas alterações no controle do código-fonte e atualizar seu repositório remoto. Para obter mais informações, consulte Confirmar alterações no controle do código-fonte.

Modelos de página separados

Os modelos geralmente são mantidos em arquivos HTML separados, mas você também pode usar um modelo embutido. Arquivos separados são recomendados para manter uma separação limpa entre marcação e código.

Use a extensão .html para modelos

A extensão .html para arquivos de modelo de página é totalmente opcional. Você sempre pode identificar o caminho relativo exato para o arquivo no primeiro argumento para a função render_template. No entanto, o Visual Studio (e outros editores) normalmente fornecem recursos como completar código automaticamente e coloração de sintaxe com ficheiros .html, o que compensa o facto de os modelos de página não serem HTML.

Quando você trabalha com um projeto Flask, o Visual Studio deteta automaticamente se o arquivo HTML que você está editando é realmente um modelo Flask e fornece determinados recursos de preenchimento automático. Se você começar a inserir um comentário de modelo de página Flask ({#), o Visual Studio fornecerá automaticamente os #} caracteres de fechamento. Os comandos Seleção de Comentário e Seleção de Cancelamento de Comentário (no menu Editar> Avançado) também usam comentários de modelo em vez de comentários HTML.

Organizar modelos em subpastas

Você pode usar subpastas e, em seguida, consultar o caminho relativo na pasta sob os modelos nas chamadas para a função render_template. Essa abordagem é uma ótima maneira de criar namespaces efetivamente para seus modelos.

Próximo passo

Etapa 3: Servir ficheiros estáticos, adicionar páginas e usar herança de templates