Tutorial: Introducción al marco web de Django en Visual Studio

Django es un marco de Python de alto nivel diseñado para el desarrollo web rápido, seguro y escalable. En este tutorial se explora el marco Django en el contexto de las plantillas de proyecto. Visual Studio proporciona las plantillas de proyecto para simplificar la creación de aplicaciones web basadas en Django.

En este tutorial aprenderá a:

• Crear un proyecto básico de Django en un repositorio de Git con la plantilla "Proyecto web de Django en blanco" (paso 1)
• Crear una aplicación de Django con una página y representar esa página con una plantilla (paso 2)
• Atender archivos estáticos, agregar páginas y usar la herencia de plantilla (paso 3)
• Usar la plantilla Proyecto web de Django para crear una aplicación con varias páginas y diseño con capacidad de respuesta (paso 4)
• Autenticar usuarios (paso 5)

Requisitos previos

• Visual Studio 2022 en Windows con las siguientes opciones:
  • La carga de trabajo Desarrollo de Python (pestaña Carga de trabajo del instalador). Para obtener más instrucciones, vea Instalación de la compatibilidad con Python en Visual Studio.
  • Git para Windows en la pestaña Componentes individuales en Herramientas de código.

Las plantillas de proyecto de Django también incluyen versiones anteriores de Herramientas de Python para Visual Studio. Los detalles de la plantilla podrían diferir de lo que se describe en este tutorial (sobre todo con versiones anteriores del marco Django).

El desarrollo de Python no es compatible actualmente en Visual Studio para Mac. En Mac y Linux, use la extensión de Python en Visual Studio Code.

"Proyectos de Visual Studio" y "proyectos de Django"

En la terminología de Django, un "proyecto Django" tiene varios archivos de configuración de nivel de sitio junto con una o varias "aplicaciones". Para crear una aplicación web completa, puede implementar estas aplicaciones en un host web. Un proyecto de Django puede contener varias aplicaciones, y la misma aplicación puede estar en varios proyectos de Django.

Un proyecto de Visual Studio puede contener el proyecto de Django junto con varias aplicaciones. Siempre que en este tutorial se hable simplemente de un "proyecto", nos estaremos refiriendo al proyecto de Visual Studio. Cuando se haga referencia a la parte del "proyecto de Django" de la aplicación web, nos estaremos refiriendo específicamente a un proyecto de Django.

En el transcurso de este tutorial creará una única solución de Visual Studio que contiene tres proyectos de Django independientes. Cada uno de estos proyectos contiene una única aplicación de Django. Puede cambiar fácilmente entre distintos archivos para compararlos si mantiene los proyectos en la misma solución.

Paso 1.1: Crear una solución y un proyecto de Visual Studio

Cuando se trabaja con Django desde la línea de comandos, normalmente se inicia un proyecto mediante la ejecución del comando django-admin startproject <project_name>. En Visual Studio, la plantilla "Proyecto web de Django en blanco" ofrece la misma estructura dentro de un proyecto y una solución de Visual Studio.

1. En Visual Studio, seleccione Archivo>Nuevo>Proyecto, busque "Django", seleccione la plantilla Proyecto web de Django en blanco y, después, Siguiente.

   

2. Escriba la información siguiente y, después, seleccione Crear:

   • Nombre del proyecto: establezca el nombre del proyecto de Visual Studio en BasicProject. Este nombre también se usa para el proyecto Django.
   • Ubicación: especifique una ubicación en la que se van a crear la solución y el proyecto de Visual Studio.
   • Solución: deje este control establecido en la opción predeterminada Crear nueva solución.
   • Nombre de la solución: establézcalo en LearningDjango, que es adecuado para la solución como contenedor de varios proyectos de este tutorial.

Paso 1.2: Examinar los controles de Git y publicar en un repositorio remoto

En este paso, se familiarizará con los controles de Git de Visual Studio y con Team Explorer. Con la ventana de Team Explorer, trabajará con el control de código fuente.

1. Para confirmar el proyecto en el control de código fuente local:

   1. Seleccione el comando Agregar a control de código fuente en la esquina inferior de la ventana principal de Visual Studio.
   2. Después, seleccione la opción Git.
   3. Se le dirigirá a la ventana Create Git repository (Crear repositorio de Git), donde puede crear e insertar un nuevo repositorio.

   

2. Después de crear un repositorio, aparece un conjunto de nuevos controles de Git en la parte inferior. De izquierda a derecha, estos controles muestran confirmaciones sin insertar, cambios pendientes de confirmación, la rama actual y el nombre del repositorio.

   

3. Seleccione el botón Git changes (Cambios de Git). Visual Studio abre la página Git Changes (Cambios de Git) en Team Explorer. No verá cambios pendientes porque el proyecto recién creado ya se ha confirmado automáticamente en el control de código fuente.

   

4. En la barra de estado de Visual Studio, haga clic en el botón de confirmaciones sin insertar (la flecha arriba con 2) para abrir la página Sincronización en Team Explorer. La páginaSincronización proporciona opciones sencillas para publicar el repositorio local en diferentes repositorios remotos.

   

   Puede elegir cualquier servicio que quiera para los proyectos. En este tutorial se muestra el uso de GitHub, donde se mantiene el código de ejemplo completo del tutorial en el repositorio Microsoft/python-sample-vs-learning-django.

5. Al seleccionar cualquiera de los controles de Publicar, Team Explorer le pedirá más información. Por ejemplo, al publicar el ejemplo para este tutorial, es necesario crear primero el repositorio en sí mismo. En este caso, se usó la opción Insertar en repositorio remoto con la dirección URL del repositorio.

   

   Si no tiene ningún repositorio, las opciones Publish to GitHub (Publicar en GitHub) e Insertar en Azure DevOps le permiten crear uno directamente desde Visual Studio.

6. Mientras esté trabajando en este tutorial, adopte la costumbre de usar los controles de Visual Studio periódicamente para confirmar e insertar los cambios. Este tutorial se lo recuerda en los momentos adecuados.

Sugerencia

Para desplazarse rápidamente por Team Explorer, seleccione el encabezado (donde pone Changes o Push en las imágenes anteriores) para ver un menú emergente de las páginas disponibles.

Pregunta: ¿Cuáles son algunas de las ventajas del uso de control de código fuente desde el principio de un proyecto?

Respuesta: Usar el control de código fuente desde el principio, especialmente si también se utiliza un repositorio remoto, proporciona una copia de seguridad periódica externa del proyecto. A diferencia de lo que sucede al mantener un proyecto en un sistema de archivos local, el control de código fuente proporciona un historial de cambios completo y la capacidad de revertir con facilidad un único archivo o todo el proyecto a un estado anterior. El historial de cambios ayuda a determinar la causa de las regresiones (errores de prueba). Cuando varias personas trabajan en un proyecto, el control de código fuente administra la sobrescritura y ofrece una solución para los conflictos.

Por último, el control de código fuente, que es básicamente una forma de automatización, permite la automatización de las compilaciones, las pruebas y la administración de versiones. Es el primer paso para usar DevOps para un proyecto. Realmente no hay ninguna razón que impida usar el control de código fuente desde el principio, ya que las barreras de entrada son bajas.

Para obtener más información sobre el control de código fuente como automatización, consulte Una fuente fiable: el rol de los repositorios en DevOps, un artículo de MSDN Magazine escrito para aplicaciones móviles que se aplica también a las aplicaciones web.

Pregunta: ¿Puedo evitar que Visual Studio confirme automáticamente un nuevo proyecto?

Respuesta : Sí. Para deshabilitar la confirmación automática, vaya a la página Configuración en Team Explorer. Seleccione Git>Configuración global, desactive la opción con la etiqueta Commit changes after merge by default (Confirmar los cambios después de la combinación de forma predeterminada) y seleccione Actualizar.

Paso 1.3: Crear el entorno virtual y excluirlo del control de código fuente

Ahora que ha configurado el control de código fuente para el proyecto, puede crear el entorno virtual que contiene los paquetes necesarios de Django para el proyecto. A continuación, puede usar Team Explorer para excluir la carpeta del entorno del control de código fuente.

1. En el Explorador de soluciones, haga clic con el botón derecho en el nodo Entornos de Python y seleccione Agregar entorno.

   

2. Seleccione Crear para aceptar los valores predeterminados en el cuadro de diálogo de Agregar entorno virtual. (Puede cambiar el nombre del entorno virtual si lo desea, lo cual simplemente cambia el nombre de su subcarpeta, pero env es una convención estándar).

   

3. Dé su consentimiento para los privilegios de administrador si se le solicita y, después, espere unos minutos mientras Visual Studio descarga e instala los paquetes. Durante este tiempo, se transfieren miles de archivos a numerosas subcarpetas. Puede ver el progreso en la ventana Salida de Visual Studio. Mientras espera, consulte la sección Preguntas a continuación.

4. En los controles de Git de Visual Studio (en la barra de estado), seleccione el indicador de cambios (que muestra 99*) que abre la página Cambios en Team Explorer.

   La creación del entorno virtual implica miles de cambios, pero no es necesario que incluya ninguno de ellos en el control de código fuente, dado que usted (o cualquier usuario que clone el proyecto) siempre puede volver a crear el entorno a partir de requirements.txt.

5. Para excluir el entorno virtual, haga clic con el botón derecho en la carpeta env y seleccione Omitir estos elementos locales.

   

6. Después de excluir el entorno virtual, los únicos cambios que faltan son en el archivo de proyecto y en el archivo .gitignore. El archivo .gitignore contiene una entrada agregada para la carpeta del entorno virtual. Puede hacer doble clic en el archivo para ver las diferencias.

7. Escriba un mensaje de confirmación y seleccione el botón Confirmar todo. Después, inserte las confirmaciones en el repositorio remoto.

Pregunta: ¿Por qué es conveniente crear un entorno virtual?

Respuesta: Un entorno virtual es una excelente manera de aislar las dependencias exactas de la aplicación. Este tipo de aislamiento evita conflictos dentro de un entorno de Python global y contribuye a las pruebas y la colaboración. Con el tiempo, a medida que desarrolle una aplicación, es inevitable que incorpore muchos paquetes útiles de Python. Puede actualizar fácilmente el archivo requirements.txt del proyecto si mantiene los paquetes en un entorno virtual específico del proyecto. El archivo requirements.txt describe el entorno, que se incluye en el control de código fuente. Cuando el proyecto se copia en otros equipos, como los servidores de compilación, los servidores de implementación y otros equipos de desarrollo, es fácil volver a crear el entorno con solo requirements.txt (por este motivo no es necesario que el entorno esté en el control de código fuente). Para obtener más información, vea Use virtual environments (Usar entornos virtuales).

Pregunta: ¿Cómo se quita un entorno virtual que ya se ha confirmado en el control de código fuente?

Respuesta: En primer lugar, edite el archivo .gitignore para excluir la carpeta. Busque la sección al final con el comentario # Python Tools for Visual Studio (PTVS) y agregue una nueva línea para la carpeta del entorno virtual, como /BasicProject/env. (Visual Studio no muestra el archivo en el Explorador de soluciones. Para abrir el archivo directamente, vaya a Archivo>Abrir>Archivo. También puede abrir el archivo desde Team Explorer. Vaya a la página Configuración y seleccione Configuración de repositorios. Ahora, vaya a la sección Ignore & Attributes Files (Archivos de omisión y de atributos) y seleccione el vínculo Editar situado junto a .gitignore).

En segundo lugar, abra una ventana de comandos y vaya a una carpeta como BasicProject. La carpeta BasicProject contiene la carpeta del entorno virtual, como env, y ejecuta git rm -r env. A continuación, confirme esos cambios desde la línea de comandos (git commit -m 'Remove venv'), o bien desde la página Cambios de Team Explorer.

Paso 1.4: Examinar el código reutilizable

Una vez que finalice la creación del proyecto, examine el código del proyecto de Django reutilizable (que es de nuevo el mismo que se generó por el comando de la CLI django-admin startproject <project_name>).

1. La raíz del proyecto contiene manage.py, la utilidad administrativa de línea de comandos de Django que Visual Studio establece automáticamente como archivo de inicio del proyecto. Ejecute la utilidad en la línea de comandos usando python manage.py <command> [options]. Para las tareas comunes de Django, Visual Studio proporciona los comandos de menú pertinentes. Haga clic con el botón derecho en el proyecto en el Explorador de soluciones y seleccione Python para ver la lista. Encontrará algunos de estos comandos en el transcurso de este tutorial.

   

2. En el proyecto, hay una carpeta con el mismo nombre que el proyecto. Contiene los archivos de proyecto Django básicos:

   • __init.py: se trata de un archivo vacío que indica a Python que esta carpeta es un paquete de Python.
   • settings.py: contiene la configuración del proyecto de Django, que se modificará durante el desarrollo de una aplicación web.
   • urls.py: contiene una tabla de contenido para el proyecto de Django, que también se modificará durante el desarrollo.
   • wsgi.py: consiste en un punto de entrada para los servidores web compatibles con WSGI que van a servir al proyecto. Normalmente dejará los archivos tal cual, puesto que sirven de enlace a los servidores web de producción.

   

3. Como se ha indicado anteriormente, la plantilla de Visual Studio también agrega un archivo requirements.txt al proyecto que especifica la dependencia del paquete de Django. La presencia de este archivo es lo que le invita a crear un entorno virtual cuando empiece a crear el proyecto.

Pregunta: ¿Puede Visual Studio generar un archivo requirements.txt a partir de un entorno virtual después de instalar otros paquetes?

Respuesta : Sí. Expanda el nodo Entornos de Python, haga clic con el botón derecho en su entorno virtual y seleccione el comando Generar requirements.txt. Es conveniente usar este comando periódicamente a medida que modifica el entorno, y confirmar los cambios de requirements.txt en el control de código fuente junto con cualquier otro cambio de código que dependa de ese entorno. Si configura la integración continua en un servidor de compilación, debe generar el archivo y confirmar los cambios cada vez que se modifique el entorno.

Paso 1.5: Ejecutar el proyecto de Django vacío

1. En Visual Studio, seleccione Depurar>Iniciar depuración (F5) o use el botón Servidor web de la barra de herramientas (el explorador podría variar):

   

2. La ejecución del servidor implica la ejecución del comando manage.py runserver <port>, que inicia el servidor de desarrollo integrado de Django. Si Visual Studio indica No se pudo iniciar el depurador con un mensaje relacionado con la falta de un archivo de inicio, haga clic con el botón derecho en manage.py en el Explorador de soluciones y seleccione Establecer como archivo de inicio.

3. Al iniciar el servidor, verá que se abre una ventana de consola en la que también se muestra el registro del servidor. Visual Studio abre automáticamente un explorador en http://localhost:<port>. Dado que el proyecto de Django no tiene ninguna aplicación, Django muestra solo una página predeterminada para confirmar que lo que tiene hasta ahora funciona correctamente.

   

4. Cuando haya terminado, detenga el servidor cerrando la ventana de la consola o con el comando Depurar>Detener depuración en Visual Studio.

Pregunta: ¿Django es un servidor web y una plataforma?

Respuesta: Sí y no. Django tiene un servidor web integrado que se usa para fines de desarrollo. Este servidor web se usa al ejecutar la aplicación web localmente, como al depurar en Visual Studio. Sin embargo, cuando realiza una implementación en un host web, Django utiliza el servidor web del host en su lugar. El módulo wsgi.py del proyecto de Django se ocupa de enlazar con los servidores de producción.

Pregunta: ¿Cuál es la diferencia entre el uso de los comandos de menú de depuración y los comandos de servidor en el submenú de Python del proyecto?

Respuesta: Además de con los comandos de menú de Depurar y los botones de la barra de herramientas, también puede iniciar el servidor mediante los comandos Python>Run server (Ejecutar servidor) o Python>Run debug server (Iniciar el servidor de depuración) en el menú contextual del proyecto. Ambos comandos abren una ventana de consola en la que se verá la dirección URL local (localhost:port) del servidor en ejecución. Aun así, debe abrir manualmente un explorador con esa dirección URL, y la ejecución del servidor de depuración no inicia automáticamente el depurador de Visual Studio. Si quiere, puede adjuntar un depurador al proceso en ejecución mediante el comando Depurar>Asociar al proceso.

Pasos siguientes

En este momento, el proyecto de Django básico no contiene ninguna aplicación. Creará una aplicación en el paso siguiente. Dado que trabajará más con las aplicaciones de Django que con el proyecto de Django, por ahora no necesita saber más acerca de los archivos de código reutilizable.

Creación de una aplicación de Django con vistas y plantillas de página

Profundizar un poco más

• Código del proyecto Django: Escribiendo su primera aplicación en Django, parte 1 (docs.djangoproject.com)
• Utilidad administrativa: django-admin and manage.py (django-admin y manage.py) (docs.djangoproject.com)
• Código fuente del tutorial en GitHub: Microsoft/python-sample-vs-learning-django