Resumen de Flask – Teoría + Práctica + Ejemplos

Buenas a todos!. Vamos a continuar con el módulo de desarrollo realizando un resumen de flask, nuestro framework favorito hasta ahora. Lo más importante a destacar en esta entrada es que se trata más bien de una guía de comandos, un repaso por la teoría con algunas prácticas ilustrativas a modo de ejemplo. También intentaré resolver algunas dudas básicas e ir complementando nuestra forma de desarrollar aplicaciones explicando algunas herramientas y librerías útiles.

Si aún no has realizado desde el comienzo mi tercer módulo «Desarrollo» te invito a comenzar por el primer post que titulé «Desarrollo de aplicaciones con Python» haciendo clic en el enlace.

Si por el contrario vienes siguiendo esta serie del tercer módulo continúa leyendo y estoy seguro que vas a añadir esta guía de Flask a tus marcadores para cuando necesites recordar algún concepto o sintaxis. Para comenzar voy a responder algunas dudas que he visto por ahí explicando como funciona Flask y cuales son los pasos a seguir para crear una mínima aplicación funcional.

Resumen de flask – ¿Cómo crear una aplicación o página web correctamente?

Primero lo primero y como esto es un resumen de flask no me voy a parar a explicar que es flask y para que sirve. Ya deberías saberlo!

Para crear una mínima aplicación en Flask que funcione y podamos probar debemos primeramente instalar Flask como framework dentro de nuestro «entorno de desarrollo». Y aquí es momento de explicar básicamente de que hablamos cuando decimos entorno de desarrollo y porque es importante comprender esto a la hora de comenzar a desarrollar aplicaciones:

1- Nuestro entorno de desarrollo debe ser virtual (venv)

Normalmente el entorno de un programador o desarrollador profesional está constituido por su sistema operativo y las herramientas que utiliza para crear aplicaciones. Como herramienta principal se encuentra nuestro editor IDE (entorno de desarrollo integrado), que actualmente como el más común se suele utilizar VSCode y este consta de una columna para los archivos, una ventana donde editaremos código y normalmente se puede desplegar una terminal integrada.

A través de esta terminal integrada podremos ingresar diversos comandos de las diferentes herramientas de desarrollo que complementan nuestro trabajo y ojalá ya las conocieras. Pero si no las conoces luego hablaremos bien de ellas y como debes utilizarlas, pero lo más importante a destacar aquí es que debes tener Flask instalado pero NO EN TU SISTEMA PRINCIPAL. Así que para ello usaremos un ENTORNO VIRTUAL.

Un gestor de paquetes de Python – pip

Para instalar paquetes, librerías y demás lo hacemos como un paquete de Python simplemente utilizando Python-pip o «pip» que es un gestor de paquetes para python y puedes adquirirlo aquí: Pypi

Realice un post al respecto sobre su instalación y uso aquí: Instalar pip – Tutorial de Flask

Instalar un entorno virtual

Una vez instalado nuestro gestor de paquetes es momento de instalar un entorno virtual para evitar instalar Flask más todas las librerías que vas a ir usando y probando en tu proyecto dentro tu sistema. En vez de eso instalarás todo dentro de un entorno virtual que te permitirá mantener aislados frameworks, módulos, librerías de tu sistema pero ligados estrictamente a tu proyecto en su versión original en que fueron instalados. ¿Me comprendes?

Aquí he redactado también al respecto de lo que es un entorno virtual de desarrollo y porqué debes utilizarlo, además de las buenas prácticas de desarrollo y todo lo que debes tener en cuenta:

Desarrollo de aplicaciones en Python

Y aquí te explico específicamente como instalar virtualenv(venv): Entorno virtual virtualenv

Para instalar virtualenv entonces simplemente ejecutas:

pip install virtualenv

Instalar Flask + librerías dentro del entorno virtual (venv)

Debemos de instalar Flask y también podremos instalar las librerías que vamos a usar en nuestro proyecto.. Pero ojo!! Todas las librerías incluido Flask como FRAMEWORK NO se instalarán en tu sistema.

¿Por qué?

Porque sino estarás limitado a trabajar con determinada versión del FRAMEWORK FLASK y determinadas versiones de librerías, además de instalar todo dentro de tu sistema lo cual puede ser algo DESORDENADO y puede acarrear problemas complejos cuando el próximo año se actualice tu versión de flask y alguna función haya cambiado y ya no funcione tu programa hasta que modifiques estos cambios. ¿Mejor?

Iniciar nuestro sistema virtual!

Para ello ejecutas en la terminal de VSCODE, si utilizas esta para más comodidad:

python3 -m venv nuevoproyecto

Donde «nuevoproyecto» es el nombre del directorio donde se alojará tu proyecto. Este comando creará dentro de ese directorio una nueva carpeta oculta llamada «.venv»

Dependiendo ahora de tu sistema operativo deberás iniciar el entorno virtual para trabajar dentro de él cada vez que ejecutes comandos:

En Windows:

nuevoproyecto\Scripts\activate.bat

En Linux o MacOS, ejecuta:

source nuevoproyecto/bin/activate

#PARA DESACTIVAR EL ENTORNO ES IGUAL PERO CAMBIAS «activate» por «deactivate»

Verás que se ha iniciado el entorno VENV porque aparecerá entre paréntesis antes de tu usuario y el cursor de la terminal.

Ahora sí puedes instalar FLASK y mientras trabajes en este proyecto deberás mantener abierto el entorno virtual para que los cambios e instalaciones de librerías siempre se realicen dentro del entorno y NO EN TU SISTEMA.

pip install flask

Además de flask puedes instalar las librerías que vallas a usar en tu proyecto por ejemplo blueprints, bootstrap, etc. Pero todo dentro de tu entorno virtual, por lo que se instalarán en la misma carpeta dentro de tu proyecto.

2- Debemos usar sistema de control de versiones (GIT + GITHUB)

Esto nos brindará numerosos beneficios como antes he explicado y de hecho he realizado varios post al respecto sobre el uso de Git:

• Tutorial de Git
• Git + Kraken (Ahora usaría GitHub Desktop)
• Repositorio remoto – GitHub

Sin embargo es preciso aclarar que debemos ignorar la carpeta de nuestro entorno virtual (normalmente llamada «venv») en el archivo «ignore» para evitar subirla a GitHub y redactar un documento README donde se especifiquen los requisitos y versiones de software que utilizamos para que nuestro proyecto pueda funcionar y probarse en otro ordenador u otro sistema operativo.

3- Organizar nuestro proyecto siguiendo el MVC.

Existen diferentes arquitecturas de software e incluso tu puedes programarlo sin seguir ninguna arquitectura ni organización consciente. Sin embargo resulta de mucha utilidad seguir una arquitectura MVC ya que de hecho nuestro framework nos facilita esta tarea, también existen librerías que te permitirán organizar tu proyecto en caso que se tratara de un proyecto grande con registros de usuarios y/o bases de datos, etc.

Hablé antes de la arquitectura Modelo – Vista – Controlador y porque nos será de utilidad al momento de desarrollar aplicaciones usando FLASK:

La arquitectura de software: Modelo vista controlador.

Sumado a respetar determinada arquitectura de software, es importante también una vez tenemos alguna idea de como vamos a desarrollar nuestra aplicación y cuales serán las funciones o métodos alojados en el controlador o como estará estructurado nuestro modelo debemos tener en cuenta también la realización de «Diagramas de Flujo o pseudocódigo«. Para así antes de comenzar a programar tener una noción gráfica o impresa de como se va a estructurar nuestro software y evitar en el futuro (tras abandonar nuestro proyecto por algún tiempo) encontrarnos con alguna confusión sobre nuestro propio código. Y en el caso que necesites ayuda o quieras recurrir a otros desarrolladores poder explicar tu idea. Básicamente es una ruta, guía o explicación de como llevarás a cabo el software que quieres realizar y como funcionará internamente.

4- Opción: usar BluePrints para aplicaciones grandes.

Cuando nos encontramos realizando una aplicación en flask de antemano sabemos cuan grande en sentido de la cantidad de código necesario y su estructura u organización podría ser algo engorrosa. Imaginemos una aplicación con registro de usuarios, post, biografías, imágenes de portada y de perfil, vamos.. Una red social completa. ¿No crees que nuestro controlador y modelo se encontrarán muy sobrecargados de código al punto que en determinado momento sería un caos?

Siguiendo la estructura o arquitectura que te he enseñado tradicionalmente tendríamos un controlador, un modelo y las carpetas «templates» y «static» donde dentro de la primera encontraremos las plantillas html y en la siguiente nuestro CSS, JS y archivos de IMÁGENES, entre otros.

Pero una aplicación de tal magnitud tendrá por ejemplo un panel para el administrador del sitio web, otro para los usuarios, otro para algún moderador, etc. Y todo ello en un solo controlador resulta tedioso, engorroso y peligroso. Debido a que estamos hablando de restricciones de acceso y diferentes permisos de lectura, modificación, etc según el tipo de usuario en la base de datos.

Blueprints al rescate

Para organizarnos mejor existe una librería llamada «blueprints» que podemos utilizar con FLASK y que nos ayudará a estructurar mejor nuestros proyectos a la vez que nos permitirá organizar nuestro proyecto de diferentes maneras a tu propia elección. Pudiendo tener un controlador principal que solemos llamar «run.py» y será el que se encargará únicamente de las «rutas», de las url’s. Y por otro lado podemos agrupar lo demás según su funcionalidad o su estructura. Logrando así dividir nuestra aplicación en módulos independientes, asegurándonos que si queremos modificar algo respecto del código de «login» de los usuarios encontraremos aparte en una carpeta todos los archivos relacionados a esta funcionalidad dependiendo como lo hayamos planificado. Por ejemplo en el caso de una organización funcional dentro de la carpeta «users»:

..users

.. ..routes.py

.. ..static/

.. ..templates/

.. ..models.py

.. ..form.py

Si lo analizamos con un diagrama como es mi costumbre, será más fácil comprender:

5- Nuestra aplicación organizada y mínima-mente funcional.

Considero muy importante al comenzar con una aplicación en FLASK el tema de la organización de nuestra aplicación, resulta de vital importancia comenzar como he explicado y en el caso de ser necesario sub-dividir nuestra aplicación en blueprints si se tratase de un proyecto grande. Pero mientras hayas respetado los primeros 3 pasos vas directo a un desarrollo exitoso puesto que sostienes la arquitectura de software correcta, trabajas en un entorno virtual y llevas un control de versiones de tu proyecto en caso de encontrarte con algún inconveniente en el camino.

Un consejo importante es que al realizar tu aplicación intentes que esta sea «funcional» lo antes posible, para mi gusto al menos me resulta más útil desarrollar primero la parte funcional (backend) sin hacer demasiado hincapié en la parte visual o «frontend» para evitar en el transcurso del desarrollo de un diseño perder la noción de la idea esencial de nuestra aplicación o sitio web. En el camino claro que creo los archivos visuales, plantillas html, pero sin ningún estilo demasiado complejo, lo básico primero!. Para así enfocarme en que mi aplicación funcione bien lo antes posible, y finalmente luego cuando esta parte está bastante completa me tomo el tiempo de mejorar la parte frontend. Pero bueno al menos esta es mi forma de trabajar porque pienso más en el sentido de un fullstack.

Pasos para crear una aplicación mínima-mente funcional en flask

1. Crear nuestro entorno virtual.
2. Instalar Flask y librerías que vamos a utilizar.
3. Crear un repositorio GIT local y si es necesario uno remoto en GitHub.
4. Dar una estructura o arquitectura MVC a la app. Creando la carpeta templates, statics, creando también los archivos «index.html» correspondiente a la página de inicio, etc.
5. Comenzar a desarrollar el controlador principal para mostrar las distintas URL’S que tendrá nuestro proyecto. Y que sí aún no tenemos ningún archivo o plantilla podemos dejarlas vacías añadiendo simplemente un «pass«. Pero es importante ir plasmando las rutas en el controlador desde el principio para evitar confusiones posteriores y teniendo en cuenta si se permitirán solicitudes GET, POST, DELETE, etc.
6. Si se trata de una aplicación grande en la que vamos a usar blueprints es importante comenzar creando todas las carpetas con sus respectivos archivos (los HTML pueden tener solo la estructura básica) y sub-carpetas y crear los «routes.py» correspondientes a cada blueprint.
7. Finalmente enlazamos todo al controlador principal y comprobamos que todas las rutas funcionen bien.
8. Nos encargamos de añadir y probar las funcionalidades extras fuera de una aplicación básica. De hecho considero mejor comenzar con aquellas que sabemos nos resultarán más difíciles y engorrosas, como lo sería un registro de usuario, upload de imágenes, todo esto si lo hubiera, etc.
9. Finalmente cuando tengamos una aplicación funcional que cumple con nuestras expectativas, nos podemos dedicar a realizar el diseño FrontEnd, es decir, enfocarnos en todos los archivos HTML y CSS que representan la parte visual de nuestra aplicación.

Sintaxis de JINJA2 – Templates base

Para realizar una plantilla base o mejor dicho estructurar nuestro diseño de tal manera que nos evite repetir código y nos facilite crear nuevas páginas debemos tener presentes la sintaxis de JINJA2 que nos permite incrustar el resultado de la ejecución de código python en nuestro diseño HTML. Así como también crear variables que podemos usar como temporales o «incrustar» código python en el html para crear bucles for que filtren resultados, entre otros beneficios.

JINJA2 es el motor de renderizado de plantillas que utiliza FLASK.

Si aún no sabes que es el motor JINJA2 o deseas repasar estos conocimientos aquí está el post donde explico muchas de las cosas que se pueden hacer con JINJA2:

¿Qué son los bloques JINJA2?

Sintaxis de JINJA2

Documentación oficial de JINJA2

Ejemplo de la creación de un sitio web en Flask con formulario y envío de emails + Guía completa

A continuación vemos un ejemplo de la creación de una aplicación básica en flask sin bases de datos y sin usar blueprints siguiendo estos pasos antes mencionados. Simplemente una página web que desarrolle como portfolio mientras fui creando una guía de FLASK que si aún no la has leído te la recomiendo, y te recomiendo también que intentes crear tu propio portfolio replicando mis post:

Tutorial de Flask desde cero

Continuar aprendiendo a desarrollar con FLASK

Para continuar con este tercer módulo es importante que hayas leído los post que te he dejado en este resumen y comprendas bien de que se trata todo esto. No te preocupes por blueprint ni bases de datos, que es lo que continuaremos viendo en el siguiente post.

Pero si preocúpate por tener medianamente asimilado el uso de:

• Un entorno virtual.
• Un sistema de gestión de versiones: GIT.
• Arquitectura MVC: Comprender y utilizar esta arquitectura es base para continuar.
• La sintaxis de JINJA2.
• Creación de plantillas y uso de Bootstrap (frontend).
• Creación y uso de formularios usando WTFORM.
• El uso de Bases de datos no relacionales en flask.
• Comprender los conceptos de bases de datos y organización de la información. Lo que me recuerda..

Bases de datos relacionales y no relacionales con flask

Próximamente estaremos viendo el uso de bases de datos de forma intensiva con Flask y probablemente añadiremos registro de usuarios y demás funcionalidades a nuestros proyectos por lo que te recomiendo eches un vistazo a los post que he redactado sobre bases de datos para que tengas una idea de la diferencia entre SQL y NoSQL (relacional vs no relacional) y puedas aplicar esta teoría a las siguientes prácticas de este tercer módulo:

• Introducción a bases de datos en python
• Bases de datos – Introducción a los modelos
• El modelo relacional de bases de datos
• Normalización de bases de datos relacionales

Una vez hayas leído todos estos post que he redactado podrás continuar al siguiente post. Vamos a realizar una nueva aplicación donde usaremos bases de datos y blueprint.

Así que venga, nos vemos en la siguiente donde vamos a aplicar todo esto y sumaremos bases de datos no relacionales. Abrazo!