Tutorial: Creación de una aplicación de Flask con vistas y plantillas de página en Visual Studio

En este artículo se presenta el paso 2 de la serie de tutoriales Trabajar con el marco web de Flask en Visual Studio.

Visual Studio permite crear aplicaciones de Flask a partir de plantillas de proyecto que proporcionan un punto de partida más amplio para los proyectos. En el paso 1 del tutorial se describe cómo crear una aplicación de Flask con una página, donde todo el código está en un único archivo. En el paso 2, refactoriza el código y crea una estructura para las plantillas de página para habilitar el desarrollo adicional. En concreto, debe separar el código de las vistas de la aplicación de otros aspectos, como el código de inicio.

En el paso 2 del tutorial, aprenderá a:

• Refactorización del código de aplicación para separar las vistas del código de inicio
• Representación de una vista mediante una plantilla de página

Prerrequisitos

• Un proyecto de aplicación de Visual Studio y Flask creado en paso 1: Crear una solución de Visual Studio y un proyecto de Flask.

Refactorización del proyecto de Flask para un desarrollo posterior

La plantilla Proyecto web de Flask en blanco le permite crear un proyecto con un único archivo app.py que contenga código de inicio junto con una sola vista. Para permitir el desarrollo adicional de una aplicación con varias vistas y plantillas, debe separar estas funciones.

Siga estos pasos para ajustar el proyecto de Flask para permitir el desarrollo adicional:

1. En el Explorador de soluciones, haga clic con el botón derecho en la carpeta del proyecto de Flask (BasicProject) y seleccione Agregar>nueva carpeta.

   

2. Asigne a la nueva carpeta de aplicaciones el nombre HelloFlask.

3. Haga clic con el botón derecho en la carpeta HelloFlask y seleccione Agregar>nuevo elemento para crear un nuevo archivo.

4. En el cuadro de diálogo Agregar nuevo elemento , seleccione la plantilla Archivo de Python vacío :

   1. Asigne al archivo el nombre __init__.py. El nombre de archivo debe incluir dos caracteres de subrayado iniciales y dos finales (_) alrededor de la palabra init.

   2. Selecciona Agregar.

   

5. Agregue el código siguiente al nuevo archivo, que crea la Flask instancia y carga las vistas de aplicación:

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

6. En la carpeta HelloFlask , cree otro archivo de Python denominado views.py.

   Importante

   Asegúrese de especificar el nombre de archivo como views.py. El nombre views es importante debido a la declaración en el archivo __init__.py. Si el nombre vistas no es el mismo en ambas instancias, Visual Studio muestra un error en tiempo de ejecución.

7. Agregue el código siguiente al archivo views.py . Este código cambia el nombre de la función y define la ruta de retorno al /home punto de conexión:

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

   Este código también contiene el código de representación de páginas del archivo app.py e importa el app objeto declarado en el archivo __init__.py .

8. En la carpeta HelloFlask , cree una subcarpeta denominada templates. La carpeta está vacía por ahora.

9. En la carpeta del proyecto de Flask (BasicProject), reemplace el contenido del archivo app.py por el código siguiente:

   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. Después de actualizar el código, cambie el nombre del archivo app.py a runserver.py.

11. Confirme que la estructura del proyecto flask refactorizado tiene un aspecto similar al del ejemplo siguiente:

    

Ejecución del programa refactorizado y comprobación de rutas

Ahora está listo para ejecutar el proyecto en Visual Studio:

1. En Visual Studio, seleccione Depurar>Iniciar depuración (F5) o seleccione servidor web en la barra de herramientas principal (el explorador que ve puede variar):

2. Cuando la aplicación abra en el navegador, pruebe ambos puntos de conexión de ruta URL, / (raíz) y /home:

   

Ejecutar el programa actualizado en el depurador

También puede establecer puntos de interrupción en varias partes del código y seguir la secuencia de inicio de la aplicación en el depurador:

1. Establezca varios puntos de interrupción, como los siguientes:

   • Primera línea del archivo runserver.py
   • Primera línea del archivo __init__.py
   • Línea return "Hello Flask!" del archivo views.py

2. Inicie la aplicación en el depurador seleccionando DepurarIniciar depuración> o F5.

3. Mientras se ejecuta el depurador , recorra el código con F10 o ejecute el código desde cada punto de interrupción con F5. También puede usar controles de depuración en la barra de herramientas principal de Visual Studio, como las opciones Continuar, Detener, Reiniciar y Paso :

   

4. Cuando haya terminado, seleccione Ctrl+C seguido de cualquier tecla para detener la aplicación. También puede cerrar las ventanas abiertas del explorador para las rutas.

Confirmación de los cambios en el control de código fuente

Después de refactorizar el código y probar las actualizaciones, puede revisar y confirmar los cambios en el control de código fuente:

1. Guarde los cambios en los archivos del proyecto, como con el método abreviado de teclado Ctrl+S .

2. En la barra de controles de Git, seleccione los cambios no confirmados (lápiz 5) para abrir la ventana Cambios de Git :

   

3. En la ventana Cambios de Git , escriba un mensaje de confirmación y seleccione Confirmar todo:

   

   Cuando se completa la confirmación, Visual Studio muestra el mensaje Commit <hash> creado localmente.

4. (Opcional) Inserte los cambios confirmados en el repositorio remoto:

   1. En la barra de controles de Git, seleccione las confirmaciones salientes o entrantes (flechas 1/0).

   2. Seleccione Sincronizar (extraer y, a continuación, insertar) o Insertar.

   

   También puede acumular varias confirmaciones locales antes de insertarlas en el repositorio remoto.

Para los procedimientos posteriores de esta serie de tutoriales, puede consultar esta sección para conocer los pasos para confirmar los cambios en el control de código fuente.

Determinar la frecuencia de confirmaciones e inserciones

Realizar cambios en el control de código fuente crea un registro en el registro de cambios y un punto al que puede revertir el repositorio, cuando sea necesario. También puede examinar cada compromiso para revisar los cambios específicos.

Las confirmaciones en Git son económicas. Puede ser preferible enviar los cambios en pequeñas cantidades con confirmaciones frecuentes, en lugar de acumular un gran número de cambios y enviarlos como confirmación única.

No es necesario confirmar todos los pequeños cambios en los archivos individuales. Es habitual realizar una confirmación al agregar una característica, cambiar una estructura como se muestra en este paso de la serie de tutoriales o refactorizar código. También es recomendable verificar con sus colaboradores el nivel de detalle de las confirmaciones que funciona mejor para todos.

La frecuencia con la que se confirma y la frecuencia con la que se insertan confirmaciones en un repositorio remoto son dos cuestiones diferentes. Es posible que se acumulen varias confirmaciones en el repositorio local antes de que las envíe al repositorio remoto. La frecuencia de las confirmaciones depende de cómo el equipo quiera administrar el repositorio.

Usar plantillas para representar páginas y vistas

La home función del archivo views.py genera una respuesta HTTP de texto sin formato para la página. La mayoría de las páginas web del mundo real responden con páginas HTML enriquecidas que a menudo incorporan datos activos. La razón principal por la que los desarrolladores definen vistas mediante una función es generar contenido dinámicamente.

El valor devuelto de la vista es simplemente una cadena. Puede compilar cualquier CÓDIGO HTML dentro de una cadena mediante el contenido dinámico. Dado que es mejor separar el marcado de los datos, es mejor colocar el marcado en una plantilla y mantener los datos en el código.

Ajustar vistas para usar HTML en línea

El primer paso es convertir el procesamiento de la vista para utilizar HTML en línea para la página con algo de contenido dinámico.

1. Reemplace el contenido del archivo views.py por el código siguiente:

   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. Guarde los cambios y vuelva a ejecutar la aplicación.

3. Actualice la página varias veces para confirmar que se realizan las actualizaciones de la fecha y la hora. Cuando haya terminado, detenga la aplicación.

Creación de una plantilla HTML

A continuación, convierta el proceso de representación de páginas para usar una plantilla HTML:

1. Haga clic con el botón derecho en la carpeta templates y seleccione Agregar>nuevo elemento para crear un nuevo archivo.

2. En el cuadro de diálogo Agregar nuevo elemento , seleccione la plantilla archivo de página HTML . Asigne al archivo el nombreindex.html y seleccione Agregar.

3. Reemplace el contenido proporcionado del archivo HTML por el marcado siguiente:

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

   En este código, la {{ content }} instrucción es un marcador de posición o un token de reemplazo (también denominado variable de plantilla) para el que se proporciona un valor en el código.

Ajustar la función de inicio para cargar la plantilla

Debe modificar la home función para usar el render_template método . Este método carga la plantilla HTML y proporciona un valor para {{ content }} mediante un argumento con nombre que coincide con el nombre del marcador de posición.

1. En el archivo views.py , reemplace la definición de función home por el código siguiente:

   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 busca automáticamente plantillas en la carpeta templates , por lo que la ruta de acceso a la plantilla es relativa a esa carpeta.

2. Guarde los cambios del proyecto y vuelva a ejecutar la aplicación.

   Observe que la sintaxis del HTML (\<strong> ...) del valor content no se representa como HTML porque el motor de plantillas (Jinja) efectúa un escape automático del contenido HTML. El escape automático evita vulnerabilidades accidentales a ataques por inyección.

   Los desarrolladores suelen recopilar información de una página y emplearla como valor en otra usando un marcador de posición de plantilla. El escape también sirve como recordatorio de que es mejor mantener HTML fuera del código.

   Cuando haya terminado, detenga la aplicación.

Usa marcadores de posición distintos

Puede usar marcadores de posición distintos para cada fragmento de datos dentro del marcado HTML. A continuación, vuelva a ajustar la home función para proporcionar los valores de marcador de posición específicos:

1. Reemplace el contenido del archivo index.html por el marcado siguiente:

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

2. En el archivo views.py , reemplace la definición de función home por el código siguiente para proporcionar valores para todos los marcadores de posición:

   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. Guarde los cambios y vuelva a ejecutar la aplicación. Esta vez debería ver la salida representada correctamente:

   

4. Puede confirmar los cambios en el control de código fuente y actualizar el repositorio remoto. Para obtener más información, consulte Confirmar cambios en el control de código fuente.

Plantillas de página independientes

Normalmente, las plantillas se mantienen en archivos HTML independientes, pero también puede usar una plantilla insertada. Se recomienda separar los archivos para mantener una separación limpia entre el marcado y el código.

Uso de la extensión .html para plantillas

La extensión .html para los archivos de plantilla de página es totalmente opcional. Siempre puede identificar la ruta de acceso relativa exacta al archivo en el primer argumento de la render_template función. Aun así, Visual Studio (y otros editores) suelen proporcionar características como la finalización de código y el coloreado de sintaxis con archivos .html, lo que compensa con creces el hecho de que las plantillas de página no sean HTML.

Cuando trabaja con un proyecto de Flask, Visual Studio detecta automáticamente si el archivo HTML que está editando es realmente una plantilla de Flask y proporciona determinadas características de autocompletar. Si empieza a escribir un comentario de plantilla de página de Flask ({#), Visual Studio suministra automáticamente los caracteres de cierre #}. Los comandos Selección con comentarios y Selección sin comentarios (en el menú Editar>Opciones avanzadas) también utilizan comentarios de plantilla en lugar de comentarios HTML.

Organiza plantillas en subcarpetas

Se pueden usar subcarpetas y luego hacer referencia a la ruta de acceso relativa en la carpeta templates en las llamadas a la función render_template. Este enfoque es una excelente manera de crear espacios de nombres de forma efectiva para las plantillas.

Paso siguiente

Paso 3: Servir archivos estáticos, agregar páginas y usar la herencia de plantillas