Tecnicatura Universitaria en Desarrollo de Software

Programación 2
Módulo 3: Backend
Tema 2: Web Framework
3.2. Web Framework
3.2.1 Qué es un framework

3.2.1.1 Porqué utilizar un framework

3.2.2 Introducción a Flask

3.2.2.1 Instalación

3.2.2.2 Estructura de proyecto

3.2.2.3 Configuración de una aplicación Flask

3.2.2.4 Primera aplicación Flask

3.2.2.5 Despliegue de una aplicación Flask

3.2.1. Qué es un framework

Podemos referirnos a un framework como una estructura para el desarrollo de otro

software, cuyo objetivo principal es estandarizar y simplificar el proceso del desarrollo.
Es decir que, un framework es un software que puede usarse para crear otro software.

3.2.1.1. Porqué utilizar un framework

Si bien podríamos crear nuestro propio software sin necesidad de emplear un framework,
existe cierta dificultad a la hora de escribir código, y escribir código que otros puedan
entender y manejar es aún más difícil. Debido a que hay que lidiar con la sintaxis, el
rendimiento, la coherencia y otros problemas.

Un framework nos proporcionan una plantilla en la que se han manejado casi todas las
tareas generales, lo que permite al desarrollador centrarse en las tareas más importantes
sin tener en cuenta los detalles del proceso. Para ello proveen herramientas, librerías, y
componentes que pueden ser reutilizados al momento de programar.

Existen diversos frameworks, y cada uno de ellos puede tener una finalidad en particular.
Es decir, cada framework suele centrarse en algún ámbito del desarrollo de software. Por
ejemplo, existen frameworks para el desarrollo frontend de aplicaciones web (como React
y Angular), otros para el desarrollo de aplicaciones móviles (como Flutter), otros
centrados en el desarrollo backend (como Flask, Django y Laravel). En este módulo
aprenderemos acerca de este último tipo de framework, para lo cual utilizaremos Flask.
3.2.2. Introducción a Flask

Flask es un microframework de Python. Los microframeworks son frameworks con poco o

ningún requerimiento externo. Es muy ligero y fácil de extender, diseñado para crear
aplicaciones web rápidamente y con un mínimo número de líneas de código. El mismo está
diseñado sobre el concepto de extensiones, que son módulos que aportan funcionalidades
adicionales a la aplicación.

Para que una aplicación web pueda funcionar será necesario contar con un servidor web.
Si recordamos, en el pasado hemos definido un servidor web o webserver, como el
software que se ejecuta dentro de una computadora que permite la comunicación de la
aplicación con los clientes. Su propósito es escuchar cualquier intento de comunicación
de los clientes, recibir las peticiones o requests de los mismos, llamar a la aplicación
correspondiente para que ejecute lo solicitado y devolver la respuesta o response que le
transmita la aplicación.

Flask no es un servidor web, por lo cual no puede manejar directamente las peticiones
HTTP. Para ello utiliza un servidor web WSGI.

WSGI es una especificación para la comunicación entre aplicaciones web y

servidores en Python, definida como Web Server Gateway Interface. WSGI
establece una forma de empaquetar y desplegar aplicaciones web en servidores
web.

Al momento de instalar Flask, también se instalará un servidor web WSGI llamado

Werkzeug. Este servidor web es el que se encargará de manejar las peticiones HTTP y
enviarlas a Flask para que las procese.

3.2.2.1. Instalación

Para usar Flask es recomendable tener instalada la versión más reciente de Python para
aprovechar las mejoras y correcciones de errores más recientes. Aunque este tiene soporte
desde la versión 3.8 en adelante.

Otra recomendación es crear un entorno virtual para nuestro proyecto. Lo cual se explica
en el Anexo 3.

Para realizar la instalación de Flask deberemos ingresar el comando pip install flask.

Al instalarlo, también serán instaladas las siguientes dependencias de manera

automática:
 1. Werkzeug: el servidor web WSGI que hemos mencionado anteriormente.

2. Jinja: un motor de plantillas para Python. Es un lenguaje de marcado que

permite separar la lógica de la aplicación de la vista.

3. MarkupSafe: es una librería independiente de Jinja. Implementa un

mecanismo de escape para evitar ataques XSS o Cross-Site Scripting.

4. ItsDangerous: implementa varios mecanismos de seguridad para la firma de

datos.

5. Click: es un framework para escribir aplicaciones de línea de comandos.

Proporciona el comando flask y permite agregar comandos de personalizados.

6. Blinker: es una librería de señales para Python. Permite a las aplicaciones

enviar señales y registrarlas para que otras aplicaciones puedan responder a
ellas.

Entre otras dependencias menores.

3.2.2.2. Estructura de proyecto

Una vez que contamos con Flask debemos tomar en cuenta cómo organizaremos nuestros
proyectos. Esto será de vital importancia ya que nos permitirá tener un código más limpio
y ordenado, y nos facilitará la tarea de mantener y escalar nuestros proyectos.

A diferencia de otros frameworks, Flask no nos impone la estructura que debemos seguir
para organizar nuestros proyectos. Sino que nos brinda la libertad para elegir aquella que
mejor se adapte a nosotros.

Aun con esta libertad es recomendable establecer una estructura clara, y para ello
podemos tomar como referencia la siguiente estructura:
/../example-project/
├── app/ <- Carpeta con el nombre de nuestra aplicación

| ├── __init__.py

| ├── models.py <- Modelos

| ├── routes.py <- Gestión de endpoints

| ├── templates/ <- Plantillas HTML

| ├── static/ <- Archivos estáticos (.css, multimedia, etc.)

| └── utils/ <- Pequeños scripts y/o clases de uso común

├── tests/ <- Carpeta para testing

├── .venv/ <- Entorno virtual para este proyecto

├── requirements.txt <- Dependencias para que el proyecto funcione

├── .env <- Variables de entorno

├── config.py <- Datos de configuración

├── README.md <- Archivo con información sobre el proyecto

└── run.py <- Aplicación Flask

A medida que avancemos en este módulo veremos con más detalle cada uno de estos
elementos.

3.2.2.3. Configuración de una aplicación Flask

Una aplicación Flask es una instancia de la clase Flask. Todo lo referente a la aplicación
debe ser registrado en esta instancia, esto incluye su configuración, urls, blueprints,
entorno, entre otros.

La manera más directa para crear una aplicación Flask es crear una instancia global de la
clase Flask al principio de todo nuestro código. Sin embargo, aunque esta manera de
trabajar puede ser la más simple y útil en muchos casos, puede producir algunos errores
difíciles de solucionar en proyectos grandes.

Con la aclaración anterior proponemos, en lugar de definir una instancia global de la clase
Flask, definiremos esta instancia dentro de una función. Esta función es conocida como
application factory, y permitirá inicializar nuestra aplicación. Esta función devolverá la
aplicación Flask ya configurada.

Tomando como referencia la estructura de proyecto que hemos visto anteriormente, la

application factory se definirá en el archivo __init__.py de la carpeta app. Este archivo
contendrá la application factory y será el punto de entrada de nuestra aplicación.

Por otro lado, queremos hacer una acotación sobre el origen de la palabra factory. Esta
palabra hace referencia a un patrón de diseño conocido como factory method. Este patrón
de diseño se basa en la creación de objetos sin especificar la clase concreta a crear. Es
decir que, la application factory nos permitirá crear una aplicación sin especificar la clase
concreta de la misma.

Esto nos permitirá crear aplicaciones con diferentes configuraciones, lo cual es muy útil
cuando queremos crear aplicaciones para diferentes entornos (desarrollo, producción,
testing, etc.). En esta materia nos centraremos en el entorno de desarrollo.

3.2.2.4. Primera aplicación Flask

Ahora que hemos visto ciertas recomendaciones para organizar y gestionar una aplicación
Flask veamos un ejemplo.

Para comenzar, nuestro proyecto debería tener la siguiente estructura:

/../example-project/
├── hello_world/

| └── __init__.py

├── .venv/

| config.py

└── run.py

• Una carpeta llamada hello_world, la cual incluirá un archivo __init__.py. Este

archivo __init__.py cumplirá dos propósitos:

1. Contener la application factory.

2. Indicarle a Python que la carpeta hello_world debe ser tratada como un
paquete.
• Un archivo llamado config.py, el cual tendrá los detalles de la configuración de
nuestra aplicación Flask.
 • Un archivo llamado run.py, quien lanzará la aplicación haciendo uso del resto de
la configuración.

• Un entorno virtual llamado .venv (o como prefieras llamarlo).

Para comenzar, crearemos un entorno virtual para nuestro proyecto. Para ello, desde la
terminal, nos ubicaremos en la carpeta raíz de nuestro proyecto, el cual en este caso es
example-project. Una vez activado el entorno virtual, instalaremos Flask mediante el
comando que vimos previamente, pip install flask.

A continuación, crearemos los archivos y carpetas que hemos mencionado anteriormente.

__init__.py
from flask import Flask

from config import Config

def init_app():

"""Crea y configura la aplicación Flask"""

app = Flask(__name__, static_folder = Config.STATIC_FOLDER, templa

te_folder = Config.TEMPLATE_FOLDER)

app.config.from_object(Config)

# Un endpoint que dice 'Hola Mundo!'

@app.route('/')

def hello_world():

return 'Hola Mundo!'

return app

Antes de ejecutar nuestra aplicación Flask hablemos un poco más a detalle de la

configuración que hemos establecido.

Para comenzar, el archivo __init__.py contendrá la aplication factory. En este caso

la función se llama, init_app. Esta función contiene a la instancia de la clase Flask de
la que hablamos anteriormente, y podemos notar que al ser instanciada cuenta con
algunos parámetros.

app = Flask(__name__, static_folder = Config.STATIC_FOLDER, template_f

older = Config.TEMPLATE_FOLDER)
static_folder y template_folder indican cuáles serán las rutas donde alojaremos
archivos relacionados con la parte visual la aplicación. Cabe resaltar el hecho de no nos
centraremos en esta parte de Flask en este módulo, ya que las aplicaciones que
desarrollaremos no tendrán una vista, serán JSON API’s.

En cuanto a el primer parámetro recibido (__name__) este hace alusión al nombre de la

aplicación y coincidirá con el nombre de la carpeta donde se encuentre __init__.py, ya
que lo estamos gestionando como un paquete. En este caso, nuestra aplicación tendrá el
nombre hello_world. Aunque podríamos nombrarla como quisiéramos.

Luego de haber instanciado la aplicación, le indicamos cual es la configuración que deberá

tener mediante el método config.from_object. Este método recibirá un objeto con
todos los datos para desplegar la aplicación Flask, en este caso, Config es quien se
encarga de esta tarea, y podemos verlo en el archivo config.py.

config.py
class Config:

SERVER_NAME = "127.0.0.1:5000"

DEBUG = True

TEMPLATE_FOLDER = "templates/"

STATIC_FOLDER = "static_folder/"

En la clase Config contamos con atributos de clase, los cuales tienen algún dato
relevante sobre nuestra aplicación:

• SERVER_NAME: el nombre de nuestro servidor.

• DEGUB: indica si estamos en modo de desarrollo o producción.
• TEMPLATE_FOLDER y STATIC_FOLDER: indican las rutas donde tendremos las
plantillas html para la vista de nuestra aplicación y las rutas de los estilos,
archivos (imágenes, videos, etc).

En esta ocasión incluimos una configuración simple para nuestro proyecto, pero veremos
a lo largo de las próximas clases como complementar esta configuración.

Regresando al archivo __init__.py veremos que se ha definido un endpoint, elemento

fundamental en una API:
@app.route('/')

def hello_world():

return 'Hola Mundo!'

Hablaremos con más detalle sobre la definición de endpoints próximamente, así que por
el momento omitiremos una explicación sobre este elemento.

Finalmente hemos de hablar del archivo run.py, sin el cual no podríamos iniciar nuestra
aplicación cómodamente.

run.py
1. from hello_world import init_app

2.

3. app = init_app()

4.

5. if __name__ == "__main__":

6. app.run()

Vemos que en la primera línea importamos la aplication factory que definimos en

__init__.py.

En la tercera línea invocamos la aplication factory, la cual nos devolverá la aplicación

Flask ya configurada que asignaremos a la variable app.

En la línea 5 establecemos que cuando run.py sea pasado directamente al intérprete de

Python para su ejecución, entonces ejecutará la línea 6.

Finalmente, en la línea 6 invocamos el método run de la clase Flask para dar inicio a
nuestra aplicación.

Si bien el método run puede recibir los parámetros de configuración de

aplicación, esta es una tendencia que no se recomienda. Razón por la cual la
hemos configurado previamente en la aplication factory.

3.2.2.5. Despliegue de una aplicación Flask

Para desplegar una aplicación Flask existen diversas alternativas. Por ejemplo,
desplegarla mediante un servidor web como Apache o Nginx, empleando un servidor
WSGI como Gunicorn, Waitress o el mismo Werkzeug que se encuentra al instalar Flask.
 Emplear Werkzeug para desplegar una aplicación Flask no es recomendable
para entornos de producción, ya que este servidor web no está diseñado para
ello. Sin embargo, es una buena alternativa para entornos de desarrollo y como
herramienta de aprendizaje.

También debemos aclarar donde desplegaremos nuestra aplicación. En este caso, lo

haremos localmente en nuestra computadora.

Para ello, en la terminal, ejecutaremos el comando python run.py.

Como vimos en la configuración, lanzaremos la aplicación en modo debug ya que la

aplicación aún se encuentra en desarrollo. El modo debug muestra un debugger
interactivo cuando una página lanza una excepción, y reinicia el servidor cuando hacemos
cambios en el código. De esta manera podremos dejar la aplicación ejecutándose y solo
deberemos recargar el navegador para ver los cambios que hemos realizado.

En la terminal veremos una salida similar a la siguiente:

* Serving Flask app "hello_world"

* Debug mode: on

* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

* Restarting with stat

* Debugger is active!

* Debugger PIN: nnn-nnn-nnn

Ahora, cuando visitemos http://127.0.0.1:5000/ en el navegador deberíamos ver el

mensaje de Hola Mundo!

Atención: si otro programa en ejecución está usando el puerto 5000 veremos el

mensaje de error OSError: [Errno 98] o OSError: [WinError 10013]
cuando el servidor intente iniciar. Para corregir este error podemos cambiar el
puerto de escucha de la aplicación Flask. Para ello, en el archivo config.py
podemos cambiar el valor de SERVER_NAME por otro puerto, por ejemplo,
SERVER_NAME = "127.0.0.1:5001".
Bibliografía
• https://es.wikipedia.org/wiki/Framework
• Developer Mozilla - Server-side web frameworks
• Flask Documentation
• Flask Installation
• Flask Application Factories
• Flask Quickstart