Una aplicación web requiere de una parte que pueda ver el usuario la cual es llamada view o vista y consiste de una interfaz escrita en HTML que nos permite mostrar los datos estáticos y dinámicos según la ruta a la cual acceda el usuario.
Cuando trabajamos con microframeworks como Flask, por defecto no es necesario para mostrar la vista utilizar elementos adicionales, únicamente retornando el código HTML correspondiente podemos lograr mostrar datos coherentes.
El problema surge cuando nuestra aplicación empieza a crecer y tenemos varias vistas, la repetición del código va llenando nuestra aplicación de elementos que pudiéramos reutilizar y que hacerlo de forma manual nos representa un trabajo mayor. Para evitar este problema tenemos los motores de plantillas, quienes nos ayudan a reutilizar los archivos HTML y con ello reducir la cantidad de código además de aumentar la legibilidad de nuestro programa.
Jinja2 es un motor de plantillas escrito totalmente en Python y fue modelado a partir del motor de plantillas de Django, este nos permite colocar porciones de código HTML y con código propio del motor incluir etiquetas que luego serán sustituidas por datos de nuestra aplicación.
En la última versión de Flask este motor está incluido en la instalación por lo que su utilización resulta más fácil y rápida.
Habíamos hablado que crear una vista en Flask era tan sencillo como imprimir el código HTML en la función de la ruta deseada, sin embargo para quienes son nuevos en este framework esto puede sonar muy confuso.
En el siguiente ejemplo vamos a crear una vista donde recibiremos un parámetro y lo imprimiremos en el resultado, lo interesante es que este parámetro puede ser introducido por el usuario, por lo que la vista es dinámica hasta cierto punto, veamos el código y luego pasaremos a la explicación:
Luego ya en la función creamos nuestra instrucción return y aquí le indicamos que va a retornar un String que contiene el HTML para la vista. Si probamos este programa obtendremos un resultado aceptable en el navegador veamos:
Ahora vamos a crear la misma vista pero utilizando el motor de plantillas que hemos descrito al inicio del tutorial, para lograr el ejemplo debemos hacer algunas preparaciones, estas tienen que ver con la estructura de nuestro proyecto, ya que si vamos a utilizar archivos de plantillas lo mejor es separarlos de la aplicación en otras carpetas y con ello dividir nuestra capa visual de la capa lógica y de reglas del negocio.
Sabiendo esto entonces debemos crear una carpeta para nuestras plantillas, para efectos de convención la llamaremos templates, sin embargo también debemos tener otras cosas por ejemplo debemos tener una carpeta que servirá de módulo y la llamaremos con el nombre de la vista que vamos a crear, ademas que tenemos que contar con algunos archivos, en la siguiente imagen veremos la estructura completa y luego pasaremos al código relevante para hacer que todo funcione.
Este archivo es el que nos permite ejecutar la aplicación, de ahí su nombre, generalmente se puede llamar run.py también, pero a efectos de este tutorial le colocamos un nombre que sea más comprensible por la comunidad hispano parlante, aquí debemos colocar el siguiente código:
Este es el archivo que esta en la raíz de la aplicación, es necesario para poder establecer que se va a ejecutar y sus dependencias, en este archivo es donde definimos también que se va a utilizar el archivo views.py de la carpeta bienvenido que hemos visto antes, este puede tener cualquier nombre pero views.py es una convención que nos ayudará a mantener una aplicación amigable, aquí debemos colocar lo siguiente:
Este archivo debe ir vacío ya que solo necesitamos que exista para que Flask interprete que esta carpeta es un módulo de nuestra aplicación.
Ya que tenemos los archivos base de nuestra aplicación es hora de crear la vista y utilizar la plantilla. Lo primero que haremos será crear nuestra vista, esta va a ser muy similar a la vista anterior pero mejorada, para ello debemos trabajar en el archivo views.py y colocar lo siguiente:
Acto seguido definimos las rutas que van a hacer que se muestre esta vista, en este caso es la raíz / y también cuando se coloque la palabra bienvenido.
Finalmente definimos nuestra función bienvenido que asigna a la variable nombre los parámetros que obtiene de la petición del navegador y luego hacemos un return de la función render_template, esta es la que llamará a la plantilla y le pasará como parámetros la variable nombre, donde también indicamos el nombre de la plantilla.
Llega el turno de crear la plantilla, esta es básicamente un archivo con contenido HTML y con algunas etiquetas que nos ayudarán a darle dinamismo, el archivo a modificar es el index.html que está en la carpeta templates, veamos el código que utilizaremos:
Con esto finalizamos este tutorial, hemos aprendido a utilizar las plantillas en aplicaciones hechas con Flask, dicha forma de trabajo nos ahorrará esfuerzo y repetición de código, sobre todo si nos apoyamos en la documentación oficial de Jinja2 para sacar el mayor provecho del motor de plantillas. Es muy importante establecer una estructura de proyecto y separar los diferentes tipos de archivos, ya que de esta forma mantendremos un proyecto amigable para el resto de nuestro equipo de desarrollo o en el caso que queramos subirlo a una red de código como GitHub para compartir el trabajo realizado con la comunidad.
Cuando trabajamos con microframeworks como Flask, por defecto no es necesario para mostrar la vista utilizar elementos adicionales, únicamente retornando el código HTML correspondiente podemos lograr mostrar datos coherentes.
El problema surge cuando nuestra aplicación empieza a crecer y tenemos varias vistas, la repetición del código va llenando nuestra aplicación de elementos que pudiéramos reutilizar y que hacerlo de forma manual nos representa un trabajo mayor. Para evitar este problema tenemos los motores de plantillas, quienes nos ayudan a reutilizar los archivos HTML y con ello reducir la cantidad de código además de aumentar la legibilidad de nuestro programa.
Jinja2
Jinja2 es un motor de plantillas escrito totalmente en Python y fue modelado a partir del motor de plantillas de Django, este nos permite colocar porciones de código HTML y con código propio del motor incluir etiquetas que luego serán sustituidas por datos de nuestra aplicación.
¿Qué más incluye?
También incluye funciones propias que nos ayudan a dar formato a los datos que recibimos, además de manejar condicionales, funciones de fecha y otros elementos que nos ayudan a programar el comportamiento de la plantilla de una forma sencilla y expresiva.
En la última versión de Flask este motor está incluido en la instalación por lo que su utilización resulta más fácil y rápida.
Crear una vista de la forma antigua
Habíamos hablado que crear una vista en Flask era tan sencillo como imprimir el código HTML en la función de la ruta deseada, sin embargo para quienes son nuevos en este framework esto puede sonar muy confuso.
En el siguiente ejemplo vamos a crear una vista donde recibiremos un parámetro y lo imprimiremos en el resultado, lo interesante es que este parámetro puede ser introducido por el usuario, por lo que la vista es dinámica hasta cierto punto, veamos el código y luego pasaremos a la explicación:
from flask import Flaskapp = Flask(__name__)@app.route('/')@app.route('/bienvenido')@app.route('/bienvenido/<nombre>')def bienvenido(nombre=None): nombre = nombre or 'Usuario' return '''<html> <head> <title>Bienvenido!</title> </head> <body> <h1>Hola %s!</h1> <p>Esta es nuestra vista hecha en Flask!</p> </body></html>''' % nombreif __name__ == '__main__': app.run()Aquí lo que hacemos es algo muy sencillo, primero importamos las librerías que contienen al framework, luego definimos tres rutas clave, todas ellas nos llevan a una misma función que se llama bienvenido y recibe un parámetro que es opcional donde en caso de no recibirlo simplemente se ignorará dentro del programa.Luego ya en la función creamos nuestra instrucción return y aquí le indicamos que va a retornar un String que contiene el HTML para la vista. Si probamos este programa obtendremos un resultado aceptable en el navegador veamos:
Crear una vista utilizando Jinja2
Ahora vamos a crear la misma vista pero utilizando el motor de plantillas que hemos descrito al inicio del tutorial, para lograr el ejemplo debemos hacer algunas preparaciones, estas tienen que ver con la estructura de nuestro proyecto, ya que si vamos a utilizar archivos de plantillas lo mejor es separarlos de la aplicación en otras carpetas y con ello dividir nuestra capa visual de la capa lógica y de reglas del negocio.
Sabiendo esto entonces debemos crear una carpeta para nuestras plantillas, para efectos de convención la llamaremos templates, sin embargo también debemos tener otras cosas por ejemplo debemos tener una carpeta que servirá de módulo y la llamaremos con el nombre de la vista que vamos a crear, ademas que tenemos que contar con algunos archivos, en la siguiente imagen veremos la estructura completa y luego pasaremos al código relevante para hacer que todo funcione.
Contenido de los archivos
Antes de pasar a la generación y uso de la plantilla, debemos ver el contenido de los archivos que harán que nuestra aplicación pueda ejecutarse sin problemas, veremos brevemente cada archivo para no perder mucho tiempo. Es importante acotar que esta es una estructura sugerida, sin embargo Flask permite que cada desarrollador haga la estructura que más le convenga según su objetivo.
ejecutar.py
Este archivo es el que nos permite ejecutar la aplicación, de ahí su nombre, generalmente se puede llamar run.py también, pero a efectos de este tutorial le colocamos un nombre que sea más comprensible por la comunidad hispano parlante, aquí debemos colocar el siguiente código:
from flasko import appapp.run(debug=True)
__init__.py
Este es el archivo que esta en la raíz de la aplicación, es necesario para poder establecer que se va a ejecutar y sus dependencias, en este archivo es donde definimos también que se va a utilizar el archivo views.py de la carpeta bienvenido que hemos visto antes, este puede tener cualquier nombre pero views.py es una convención que nos ayudará a mantener una aplicación amigable, aquí debemos colocar lo siguiente:
from flask import Flaskapp = Flask(__name__)import flasko.bienvenido.views
bienvenido/__init__.py
Este archivo debe ir vacío ya que solo necesitamos que exista para que Flask interprete que esta carpeta es un módulo de nuestra aplicación.
Creando la vista
Ya que tenemos los archivos base de nuestra aplicación es hora de crear la vista y utilizar la plantilla. Lo primero que haremos será crear nuestra vista, esta va a ser muy similar a la vista anterior pero mejorada, para ello debemos trabajar en el archivo views.py y colocar lo siguiente:
from flask import render_template, requestfrom flasko import app@app.route('/')@app.route('/bienvenido')def bienvenido_web(): nombre = request.args.get('nombre', 'Usuario') return render_template('index.html', nombre=nombre)Lo primero que hacemos es desde el framework importar la librería que nos permite mostrar las plantillas y una librería para procesar las peticiones del navegador.Acto seguido definimos las rutas que van a hacer que se muestre esta vista, en este caso es la raíz / y también cuando se coloque la palabra bienvenido.
Finalmente definimos nuestra función bienvenido que asigna a la variable nombre los parámetros que obtiene de la petición del navegador y luego hacemos un return de la función render_template, esta es la que llamará a la plantilla y le pasará como parámetros la variable nombre, donde también indicamos el nombre de la plantilla.
Crear la plantilla
Llega el turno de crear la plantilla, esta es básicamente un archivo con contenido HTML y con algunas etiquetas que nos ayudarán a darle dinamismo, el archivo a modificar es el index.html que está en la carpeta templates, veamos el código que utilizaremos:
<html> <head> <title>Bienvenido {{nombre}}</title> </head> <body> <h1>Hola {{ nombre }}!</h1> <p>Estamos utilizando Flask!</p> </body></html>Este código es simple, hacemos nuestro HTML básico y luego donde queremos que aparezca el contenido generado en la vista, simplemente colocamos dobles llaves {{}} y dentro, el nombre del parámetro, esto hace que cuando se ejecute la aplicación se sustituya este valor con el contenido que deseamos. Si vemos en la siguiente imagen nos daremos cuenta como se coloca el nombre que pasamos como parámetro por la URL:
Diferentes plantillas
Lo interesante de este asunto es que podemos jugar con diferentes plantillas para diferentes partes de nuestra aplicación, esto separa la capa de presentación pura de lo que realmente programamos, al quitar el HTML del medio podemos separarnos en dos equipos y con ello trabajar de forma adecuada sin tener confusiones.
Con esto finalizamos este tutorial, hemos aprendido a utilizar las plantillas en aplicaciones hechas con Flask, dicha forma de trabajo nos ahorrará esfuerzo y repetición de código, sobre todo si nos apoyamos en la documentación oficial de Jinja2 para sacar el mayor provecho del motor de plantillas. Es muy importante establecer una estructura de proyecto y separar los diferentes tipos de archivos, ya que de esta forma mantendremos un proyecto amigable para el resto de nuestro equipo de desarrollo o en el caso que queramos subirlo a una red de código como GitHub para compartir el trabajo realizado con la comunidad.
