Tutorial: Criar um aplicativo Flask com exibições e modelos de página no Visual Studio

Este artigo apresenta a Etapa 2 na série de tutoriais Trabalhar com a estrutura web do 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. A etapa 1 no tutorial descreve como criar um aplicativo Flask com uma página, em que 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 habilitar o desenvolvimento adicional. Em particular, você deseja separar o código para as exibições do aplicativo de outros aspectos, como o código de inicialização.

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

• Refatorar o código do aplicativo para separar exibições do código de inicialização
• Renderizar uma visão usando um modelo de página

Pré-requisitos

• Uma solução do Visual Studio e um projeto de aplicativo Flask criados na Etapa 1: criar a solução do Visual Studio e o projeto Flask.

Refatorar o projeto Flask para evolução contínua

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

Siga estas etapas para ajustar seu projeto do Flask para permitir mais desenvolvimento:

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

   

2. Nomeie a nova pasta de 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 de Arquivo Python Vazio :

   1. Nomeie o arquivo __init__.py. O nome do arquivo deve incluir dois caracteres de sublinhado (_) antes e depois da palavra init.

   2. Selecione Adicionar.

   

5. Adicione o seguinte código ao novo arquivo, que cria a Flask instância 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

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

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

   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 app objeto declarado no arquivo __init__.py .

8. Na pasta HelloFlask , crie uma subpasta chamada modelos. 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 sua estrutura de projeto flask refatorada é semelhante ao 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 Depuração (F5) ou selecione Servidor Web na barra de ferramentas principal (o navegador que você vê pode variar):

2. Quando o aplicativo for aberto no navegador, experimente os pontos de extremidade de rota de URL / (root) e /home no navegador:

   

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 o aplicativo no Depurador selecionando Depurar>Iniciar Depuração ou F5.

3. Enquanto o Depurador estiver em execução, percorra o código com F10 ou execute o código 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 opções Continuar, Parar, Reiniciar e Etapa :

   

4. Quando terminar, selecione Ctrl+C seguido de qualquer chave para interromper o aplicativo. Você também pode fechar todas as janelas abertas do navegador para as rotas.

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

Depois de refatorar o código e testar as atualizações, você poderá examinar 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 git, selecione as alterações não confirmadas (lápis 5) para abrir a janela Alterações do Git :

   

3. Na janela Alterações do Git, insira uma mensagem de confirmação e selecione Confirmar Tudo:

   

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

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

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

   2. Selecione Sincronizar (Pull e 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 frequência de confirmações e pushes

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 examinar cada confirmação para verificar alterações específicas.

O custo de confirmações no Git é baixo. Pode ser preferível enviar suas alterações em pequenas quantidades com confirmações frequentes, em vez de acumular um grande número de alterações e enviá-las como uma única confirmação.

Você não precisa confirmar cada pequena alteração em arquivos individuais. É comum fazer uma confirmação ao adicionar um recurso, alterar uma estrutura conforme mostrado nesta etapa da série de tutoriais ou refatorar algum código. Também é recomendado discutir com colaboradores para chegar a um acordo sobre a granularidade ideal de confirmações para todo mundo.

A frequência com que você confirma e a frequência com que envia confirmações por push para um repositório remoto são duas preocupações diferentes. Você pode acumular várias confirmações no 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 exibições

A home função no arquivo views.py gera uma resposta HTTP de texto sem formatação para a página. A maioria das páginas da Web do mundo real responde com páginas HTML avançadas que geralmente incorporam dados dinâmicos. O principal motivo pelo qual os desenvolvedores definem exibições usando uma função é gerar conteúdo dinamicamente.

O valor retornado para a exibição é apenas uma cadeia de caracteres. Você pode criar qualquer HTML em 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 exibições para usar HTML embutido

A primeira etapa é converter o processamento de exibição para usar HTML embutido para a página com algum conteúdo dinâmico:

1. Substitua o conteúdo do arquivo views.py pelo 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 se a data e a hora são atualizadas. Quando terminar, interrompa 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 de 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>
   

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

Ajustar a função home para carregar o modelo

Você precisa modificar a home função para usar o render_template método. 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 da home função 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)
   

   O Flask procura automaticamente modelos na pasta de modelos , portanto, 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 é renderizada como HTML, porque o mecanismo de modelagem (Jinja) ignora automaticamente o conteúdo HTML. O escape automático evita vulnerabilidades acidentais a ataques de injeção.

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

   Quando terminar, interrompa o aplicativo.

Usar espaços reservados distintos

Você pode usar marcadores de posição distintos para cada dado na marcação 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 da home função 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ê deverá 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 saber mais, confira Confirmar as 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 oferece recursos como preenchimento de código e coloração de sintaxe com arquivos .html, o que compensa o fato de os templates de página não serem HTML.

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

Organizar modelos em subpastas

É possível usar subpastas e, em seguida, referir-se ao caminho relativo na pasta templates em chamadas para a função render_template. Essa abordagem é uma ótima maneira de criar namespaces efetivamente para seus modelos.

Próxima etapa

Etapa 3: Fornecer arquivos estáticos, adicionar páginas e usar a herança do modelo