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

  • Artigo

O Django é uma estrutura do Python de alto nível projetada para um desenvolvimento da Web rápido, seguro e escalonável. Este tutorial explora a estrutura do Django no contexto dos modelos de projeto. O Visual Studio fornece os modelos de projeto para simplificar a criação de aplicativos Web baseados no Django.

Neste tutorial, você aprenderá como:

  • Criar um projeto básico do Django em um repositório Git usando o modelo "Projeto Web em Branco do Django" (etapa 1).
  • Criar um aplicativo do Django com uma página e renderizar essa página usando um modelo (etapa 2).
  • Fornecer arquivos estáticos, adicionar páginas e usar a herança do modelo (etapa 3).
  • Usar o modelo de projeto Web do Django para criar um aplicativo com várias páginas e um design responsivo (etapa 4).
  • Autenticar usuários (etapa 5).

Pré-requisitos

  • Visual Studio 2017 ou posteriores no Windows com as seguintes opções:
    • A carga de trabalho desenvolvimento do Python (guia Carga de Trabalho no instalador). Para obter instruções, confira Instalar o suporte do Python no Visual Studio.
    • GIT para Windows e Extensão GitHub para Visual Studio na guia Componentes individuais em Code Tools.
  • Visual Studio 2022 no Windows com as seguintes opções:
    • A carga de trabalho desenvolvimento do Python (guia Carga de Trabalho no instalador). Para obter mais instruções, confira Instalar o suporte do Python no Visual Studio.
    • Git para Windows na guia Componentes individuais em Frramentas de código.

Os modelos de projeto do Django também incluem versões anteriores do plug-in Ferramentas Python para Visual Studio. Os detalhes do modelo podem ser diferentes do que é discutido neste tutorial (especialmente diferente das versões anteriores da estrutura do Django).

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

"Projetos do Visual Studio" e "Projetos do Django"

Na terminologia do Django, um "projeto do ngo" tem vários arquivos de configuração no nível do site, juntamente com um ou mais "aplicativos". Para criar um aplicativo Web completo, você pode implantar esses aplicativos em um host da Web. Um projeto do Django pode conter vários aplicativos e o mesmo aplicativo pode estar presente em vários projetos do Django.

Um projeto do Visual Studio ode conter o projeto do Django juntamente com vários aplicativos. Sempre que este tutorial se referir apenas a um "projeto," ele estará se referindo ao projeto do Visual Studio. Quando se referir ao "projeto do Django" do aplicativo Web, ele estará se referindo ao "projeto do Django" especificamente.

No decorrer deste tutorial, você criará uma única solução do Visual Studio que contém três projetos independentes do Django. Cada projeto contém um único aplicativo do Django. Você pode alternar facilmente entre arquivos diferentes para comparação, mantendo os projetos na mesma solução.

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

Ao trabalhar com o Django na linha de comando, você geralmente inicia um projeto executando o comando django-admin startproject <project_name>. No Visual Studio, o modelo "Projeto Web em Branco do Django", fornecerá a mesma estrutura em uma solução e um projeto do Visual Studio.

  1. No Visual Studio, escolha Arquivo>Novo>Projeto, pesquise "Django" e escolha o modelo Projeto Web Django em Branco. (Você também pode encontrar o modelo em Python>Web na lista à esquerda).

    New project dialog in Visual Studio for the Blank Django Web Project

  2. Nos campos, na parte inferior da caixa de diálogo, insira as informações a seguir (conforme mostrado no gráfico anterior) e, em seguida, escolha OK:

    • Nome: defina o nome do projeto do Visual Studio como BasicProject. Esse nome também é usado para o projeto do Django.
    • Local: especifique um local no qual criar o projeto e a solução do Visual Studio.
    • Solução: mantenha esse controle definido com a opção padrão Criar nova solução.
    • Nome da solução: definido como LearningDjango, que é apropriado para a solução como um contêiner para vários projetos neste tutorial.
    • Criar diretório para a solução: deixar definido (o padrão).
    • Criar um novo repositório Git: escolha essa opção (que é clara por padrão) para que o Visual Studio crie um repositório Git local quando criar a solução. Caso essa opção não seja exibida, execute o instalador do Visual Studio e adicione o GIT para Windows e a Extensão do GitHub para Visual Studio à guia Componentes individuais em Ferramentas de código.

  3. Após alguns instantes, o Visual Studio fará uma solicitação em uma caixa de diálogo com a mensagem Este projeto exige pacotes externos (mostrado abaixo). Essa caixa de diálogo é exibida porque o modelo inclui um arquivo requirements.txt que referencia o último pacote do Django 1.x. Escolha Mostrar pacotes necessários para ver as dependências exatas.

    Prompt saying that the project requires external packages

  4. Escolha a opção Eu vou instalá-los sozinho. Crie o ambiente virtual logo em seguida para garantir que ele será excluído do controle do código-fonte. (Você sempre pode criar o ambiente com base no requirements.txt).

  1. No Visual Studio, escolha Arquivo>Novo>Projeto, pesquise "Django" e selecione o modelo Projeto Web Django em Branco e, em seguida, selecione Avançar.

    New project dialog in Visual Studio for the Blank Django Web Project.

  2. Insira as seguintes informações e selecione Criar:

    • Nome do Projeto: defina o nome do projeto do Visual Studio como BasicProject. Esse nome também é usado para o projeto do Django.
    • Local: especifique um local para criar o projeto e a solução do Visual Studio.
    • Solução: mantenha esse controle definido com a opção padrão Criar nova solução.
    • Nome da solução: definido como LearningDjango, que é apropriado para a solução de um contêiner para vários projetos neste tutorial.

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

Como você selecionou Criar novo repositório Git na caixa de diálogo Novo Projeto, já será feito commit do projeto no controle do código-fonte local assim que o processo de criação for concluído. Nesta etapa, familiarize-se com os controles do Git do Visual Studio e a janela do Team Explorer onde você trabalha com o controle do código-fonte.

  1. Observe os controles do Git no canto inferior da janela principal do Visual Studio. Da esquerda para direita, esses controles mostram confirmações não enviadas, as alterações não confirmadas, o nome do repositório e a ramificação atual:

    Git controls in the Visual Studio window

    Observação

    Se você não marcar a opção Criar novo repositório Git na caixa de diálogo Novo Projeto, os controles do Git mostrarão apenas um comando Adicionar ao controle do código-fonte que criará um repositório local.

    Add to Source Control appears in Visual Studio if you've not created a repository

  2. Marque o botão de alterações e o Visual Studio abrirá a janela do Team Explorer na página Alterações. Como o projeto recém-criado já está automaticamente confirmado no controle do código-fonte, você não verá as alterações pendentes.

    Team Explorer window on the Changes page

  3. Na barra de status do Visual Studio, marque o botão de confirmação não enviada (a seta para cima com um 2) para abrir a página Sincronização no Team Explorer. Como você tem apenas um repositório local, a página oferece opções simples para publicar o repositório em diferentes repositórios remotos.

    Team Explorer window showing available Git repository options for source control

    Você pode escolher o serviço que desejar para seus próprios projetos. Este tutorial mostra o uso do GitHub, em que o código de exemplo concluído do tutorial é mantido no repositório Microsoft/python-sample-vs-learning-django.

  4. Ao selecionar qualquer um dos controles Publicar, o Team Explorer solicitará mais informações. Por exemplo, ao publicar o exemplo deste tutorial, o próprio repositório teve que ser criado primeiro, caso em que a opção Enviar por Push para o Repositório Remoto foi usada com a URL do repositório.

    Team Explorer window for pushing to an existing remote repository

    Se você não tiver um repositório, as opções Publicar no GitHub e Enviar por Push para o Azure DevOps permitirão criar um repositório diretamente no Visual Studio.

  5. Ao trabalhar com este tutorial, adquira o hábito de usar periodicamente os controles no Visual Studio para confirmar e enviar alterações por push. Este tutorial envia-lhe lembretes nos pontos apropriados.

Dica

Para navegar rapidamente no Team Explorer, selecione o cabeçalho (que indica Alterações ou Efetuar Push nas imagens acima) para ver um menu pop-up das páginas disponíveis.

Nesta etapa, você se familiarizará com os controles do Git do Visual Studio e o Team Explorer. Com a janela do Team Explorer, você trabalhará com o controle do código-fonte.

  1. Para fazer commit do projeto no controle do código-fonte local:

    1. Selecione o comando Adicionar ao Controle do Código-Fonte no canto inferior da janela principal do Visual Studio.
    2. Em seguida, selecione a opção Git.
    3. Agora, você será levado para a janela Criar repositório Git, na qual poderá criar e enviar por push um novo repositório.

    Create a Git repository.

  2. Depois de criar um repositório, um conjunto de novos controles do Git aparecerá na parte inferior. Da esquerda para direita, esses controles mostram commits não enviados, alterações não confirmadas, o branch atual e o nome do repositório.

    Git controls in the Visual Studio window.

  3. Selecione o botão Alterações do Git. Em seguida, o Visual Studio abre a página Alterações do Git no Team Explorer. Você não vê nenhuma alteração pendente, pois já foi feito commit do projeto recém-criado automaticamente no controle do código-fonte.

    Team Explorer window on the Git Changes page.

  4. Na barra de status do Visual Studio, marque o botão de confirmação não enviada (a seta para cima com um 2) para abrir a página Sincronização no Team Explorer. A página Sincronização fornece opções fáceis para publicar o repositório local em outros repositórios remotos.

    Team Explorer window showing available Git repository options for source control.

    Você pode escolher o serviço que você quiser para seus projetos. Este tutorial mostra o uso do GitHub, em que o código de exemplo concluído do tutorial é mantido no repositório Microsoft/python-sample-vs-learning-django.

  5. Ao selecionar qualquer um dos controles Publicar, o Team Explorer solicitará mais informações. Por exemplo, ao publicar o exemplo deste tutorial, o próprio repositório teve que ser criado primeiro, e a opção Enviar por Push para o Repositório Remoto foi usada com a URL do repositório.

    Team Explorer window for pushing to an existing remote repository.

    Se você não tiver um repositório, as opções Publicar no GitHub e Enviar por Push para o Azure DevOps permitirão criar um repositório diretamente no Visual Studio.

  6. Ao trabalhar com este tutorial, adquira o hábito de usar periodicamente os controles no Visual Studio para confirmar e enviar alterações por push. Este tutorial envia-lhe lembretes nos pontos apropriados.

Dica

Para navegar rapidamente no Team Explorer, selecione o cabeçalho (que indica Alterações ou Efetuar Push nas imagens acima) para ver um menu pop-up das páginas disponíveis.

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 usa um repositório remoto, fornece um backup regular do projeto em um local externo. Em vez de manter um projeto em um sistema de arquivos local, o controle do código-fonte oferece um histórico de alterações completo e facilita a reversão de um único arquivo ou todo o projeto para o estado anterior. O histórico de alterações ajuda a determinar a causa das regressões (falhas de teste). Quando várias pessoas estão trabalhando em um projeto, o controle do código-fonte gerencia a substituição e fornece resolução de conflitos.

Por fim, o controle do código-fonte, que é basicamente uma forma de automação, deixa você preparado para automatizar o gerenciamento de builds, testes e versões. É a primeira etapa no uso do DevOps em um projeto. Na verdade, não há razão para não usar o controle do código-fonte desde o início, pois as barreiras à sua adoção são poucas.

Para uma discussão mais aprofundada sobre o controle do código-fonte usado como automação, confira A fonte 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 faça commit automaticamente de um novo projeto?

Resposta: Sim. Para desabilitar o commit automático, acesse a página Configurações no Team Explorer. Selecione Git>Configurações globais, desmarque a opção rotulada Confirmar alterações após a mesclagem por padrão e selecione 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 projeto, é possível criar o ambiente virtual que contém os pacotes necessários do Django para o projeto. Você pode usar o Team Explorer para excluir a pasta do ambiente do controle do código-fonte.

  1. No Gerenciador de Soluções, clique com o botão direito do mouse no nó Ambientes do Python e escolha Adicionar Ambiente Virtual.

    Add Virtual environment command in Solution Explorer

  2. Será exibida a caixa de diálogo Adicionar Ambiente Virtual com a mensagem Encontramos um arquivo requirements.txt, indicando que o Visual Studio usará esse arquivo para configurar o ambiente virtual.

    Add virtual environment dialog with requirements.txt message

  3. Escolha Criar para aceitar os padrões. (Se desejar, o nome do ambiente virtual pode ser alterado. Essa ação alterará apenas o nome da subpasta, mas env é uma convenção padrão).

  4. Caso seja solicitado, concorde com os privilégios de administrador e aguarde alguns minutos enquanto o Visual Studio faz o download e instala pacotes. Para o Django isso significa expandir vários milhares de arquivos em muitas subpastas! Você pode ver o progresso na janela Saída no Visual Studio. Enquanto você aguarda, analise as seções de perguntas a seguir.

  5. Nos controles do Git do Visual Studio (na barra de status), selecione o indicador de alterações (que mostra 99*) que abre a página Alterações no Team Explorer.

    A criação do ambiente virtual apresentou milhares de alterações, mas nenhuma delas precisará ser incluída no controle do código-fonte já que você (ou qualquer outra pessoa que venha a clonar o projeto) poderá sempre recriar o ambiente com base em requirements.txt.

    Para excluir o ambiente virtual, clique com o botão direito do mouse na pasta env e selecione Ignorar estes itens locais.

    Ignoring a virtual environment in source control changes

  6. Depois de excluir o ambiente virtual, as únicas alterações restantes são as referentes ao arquivo de projeto e a .gitignore. O arquivo .gitignore contém uma entrada adicional para a pasta do ambiente virtual. Você pode clicar duas vezes no arquivo para ver uma comparação.

  7. Digite uma mensagem de confirmação, escolha o botão Confirmar Todos e, em seguida, envie as confirmações por push para o repositório remoto.

  1. No Gerenciador de Soluções, clique com o botão direito do mouse no nó Ambientes do Python e selecione Adicionar Ambiente.

    Add Virtual environment command in Solution Explorer.

  2. Selecione Criar para aceitar os padrões na caixa de diálogo Adicionar Ambiente Virtual. (Se desejar, o nome do ambiente virtual pode ser alterado. Essa ação alterará apenas o nome da subpasta, mas env é uma convenção padrão).

    Add virtual environment dialog with requirements.txt message.

  3. Dê a concessão aos privilégios de administrador, se solicitado, e aguarde alguns minutos enquanto o Visual Studio baixa e instala os pacotes. Durante esse tempo, milhares de arquivos são transferidos para muitas subpastas. Confira o progresso na janela Saída no Visual Studio. Enquanto você aguarda, analise as seções de perguntas a seguir.

  4. Nos controles do Git do Visual Studio (na barra de status), selecione o indicador de alterações (que mostra 99*) que abre a página Alterações no Team Explorer.

    A criação do ambiente virtual gerou milhares de alterações, mas nenhuma delas precisará ser incluída no controle do código-fonte já que você (ou qualquer outra pessoa que venha a clonar o projeto) poderá sempre recriar o ambiente com base no requirements.txt.

  5. Para excluir o ambiente virtual, clique com o botão direito do mouse na pasta env e selecione Ignorar estes itens locais.

    Ignoring a virtual environment in source control changes.

  6. Depois de excluir o ambiente virtual, as únicas alterações restantes são as referentes ao arquivo do projeto e ao arquivo .gitignore. O arquivo .gitignore contém uma entrada adicional para a pasta do ambiente virtual. Você pode clicar duas vezes no arquivo para ver uma comparação.

  7. Digite uma mensagem de confirmação, escolha o botão Confirmar Todos e envie as confirmações por push para o repositório remoto.

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. Você pode atualizar facilmente o arquivo requirements.txt do projeto mantendo pacotes em um ambiente virtual específico do projeto. O arquivo requirements.txt descreve o ambiente, que está 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 final que traz o comentário # Python Tools for Visual Studio (PTVS) e adicione uma nova linha para a pasta do ambiente virtual, como /BasicProject/env. (O Visual Studio não mostra o arquivo no Gerenciador de Soluções. Para abrir o arquivo diretamente, vá para Arquivo>Abrir>Arquivo. Você também pode abrir o arquivo do Team Explorer. Vá para a página Configurações e selecione Configurações do Repositório. Agora, navegue até a seção Ignorar e Arquivos de Atributos e selecione o link Editar ao lado de .gitignore.)

Em segundo lugar, abra uma janela de comando, navegue até uma pasta como a BasicProject. A pasta BasicProject 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ê

Após concluir a criação do projeto, analise o código do projeto do Django de texto clichê (que é novamente o mesmo gerado pelo comando django-admin startproject <project_name> da CLI).

  1. A raiz do projeto tem o manage.py, o utilitário administrativo de linha de comando do Django que o Visual Studio define automaticamente como o arquivo de inicialização do projeto. Execute o utilitário na linha de comando usando python manage.py <command> [options]. Para tarefas comuns do Django, o Visual Studio fornece comandos de menu apropriados. Clique com o botão direito do mouse no projeto no Gerenciador de Soluções e escolha Python para ver a lista. Você vai se deparar com alguns desses comandos no decorrer deste tutorial.

    Django commands on a Python project context menu.

  2. Em seu projeto, há uma pasta com o mesmo nome do projeto. Ela contém os arquivos do projeto básico do Django:

    • __init.py: um arquivo vazio que informa o Python se essa pasta é um pacote do Python.
    • settings.py: contém as configurações do projeto do Django, que você vai modificar no decorrer do desenvolvimento de um aplicativo Web.
    • urls.py: contém um sumário do projeto do Django, que você também vai modificar no decorrer do desenvolvimento.
    • wsgi.py: um ponto de entrada para os servidores Web compatíveis com WSGI para atender ao projeto. Este arquivo normalmente fica no estado em que se encontra, pois ele fornece os ganchos para os servidores Web de produção.

    Django project files in Solution Explorer.

  3. Conforme observado anteriormente, o modelo do Visual Studio também adiciona um arquivo requirements.txt ao projeto especificando a dependência de pacote do Django. A presença desse arquivo é que faz com que você seja convidado a criar um ambiente virtual ao desenvolver o projeto pela primeira vez.

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 vazio do Django

  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):

    Run web server toolbar button in Visual Studio.

  2. Executar o servidor significa executar o comando manage.py runserver <port>, que inicia o servidor de desenvolvimento interno do Django. 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 manage.py no Gerenciador de Soluções e selecione Definir como Arquivo de Inicialização.

  3. Ao iniciar o servidor, você vê uma janela do console aberta que também exibe o log do servidor. O Visual Studio abre automaticamente um navegador com a página http://localhost:<port>. Como o projeto do Django não tem aplicativos, o Django mostra apenas uma página padrão para confirmar que o que você tem até agora está funcionando corretamente.

    Django project default view.

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

Pergunta: O Django é um servidor Web e uma estrutura?

Resposta: Sim e não. O Django tem um servidor Web interno que é usado para fins de desenvolvimento. Esse servidor Web é usado quando você executa o aplicativo Web localmente, por exemplo, durante a depuração no Visual Studio. No entanto, quando você implanta em um host da Web, o Django usa o servidor Web do host. O módulo wsgi.py no projeto do Django cuida da conexão com os servidores de produção.

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ê vai ver 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 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 Django não tem aplicativos. Você vai criar um aplicativo na próxima etapa. Como você vai trabalhar mais com aplicativos do Django do que com o projeto do Django, não será necessário saber detalhes dos arquivos boilerplate por enquanto.

Criar um aplicativo do Django com modos de exibição e modelos de página

Aprofunde-se um pouco mais