Cómo crear tu primera aplicación web usando Flask y Python 3

El autor seleccionó el Fondo de Código Abierto Libre para recibir una donación como parte del programa Write for DOnations.

Introducción

Flask es un framework web liviano en Python que proporciona herramientas y características útiles para crear aplicaciones web en el lenguaje Python. Ofrece a los desarrolladores flexibilidad y es un framework accesible para nuevos desarrolladores porque puedes construir una aplicación web rápidamente utilizando solo un solo archivo Python. Flask también es extensible y no impone una estructura de directorio particular ni requiere código repetitivo complicado antes de empezar.

Aprender Flask te permitirá crear rápidamente aplicaciones web en Python. Puedes aprovechar las bibliotecas de Python para añadir características avanzadas a tu aplicación web, como almacenar tus datos en una base de datos o validar formularios web.

En este tutorial, construirás una pequeña aplicación web que renderiza texto HTML en el navegador. Instalarás Flask, escribirás y ejecutarás una aplicación Flask, y ejecutarás la aplicación en modo de desarrollo. Utilizarás el enrutamiento para mostrar varias páginas web que cumplen diferentes propósitos en tu aplicación web. También usarás funciones de vista para permitir que los usuarios interactúen con la aplicación a través de rutas dinámicas. Finalmente, utilizarás el depurador para solucionar errores.

Requisitos previos

• Un entorno de programación local en Python 3. Sigue el tutorial para tu distribución en la serie Cómo Instalar y Configurar un Entorno de Programación Local para Python 3. En este tutorial llamaremos a nuestro directorio de proyecto flask_app.

• Un conocimiento de los conceptos básicos de Python 3, como tipos de datos, listas, funciones, y otros conceptos similares. Si no estás familiarizado con Python, revisa nuestra serie Cómo Programar en Python 3.

• Un conocimiento de los conceptos básicos de HTML. Puedes revisar la serie de tutoriales Cómo Construir un Sitio Web con HTML para obtener conocimientos de fondo.

Paso 1 — Instalando Flask

En este paso, activarás tu entorno de Python e instalarás Flask utilizando el instalador de paquetes pip.

Primero, activa tu entorno de programación si no lo has hecho ya:

source env/bin/activate

Una vez que hayas activado tu entorno de programación, instala Flask usando el comando pip install:

pip install flask

Una vez que se complete la instalación, verás una lista de paquetes instalados en las últimas partes de la salida, similar a lo siguiente:

Output
...

Installing collected packages: Werkzeug, MarkupSafe, Jinja2, itsdangerous, click, flask
Successfully installed Jinja2-3.0.1 MarkupSafe-2.0.1 Werkzeug-2.0.1 click-8.0.1 flask-2.0.1 itsdangerous-2.0.1

Esto significa que la instalación de Flask también instaló varios otros paquetes. Estos paquetes son dependencias que Flask necesita para realizar diferentes funciones.

Has creado la carpeta del proyecto, un entorno virtual e instalado Flask. Ahora puedes pasar a configurar una aplicación simple.

Paso 2 — Creando una Aplicación Simple

Ahora que tienes tu entorno de programación configurado, comenzarás a usar Flask. En este paso, crearás una pequeña aplicación web Flask dentro de un archivo Python, en el cual escribirás código HTML para mostrar en el navegador.

En tu directorio flask_app, abre un archivo llamado app.py para editar, usa nano o tu editor de texto favorito:

nano app.py

Escribe el siguiente código dentro del archivo app.py:

from flask import Flask

app = Flask(__name__)


@app.route('/')
def hello():
    return '<h1>Hello, World!</h1>'

Guarda y cierra el archivo.

En el bloque de código anterior, primero importas el objeto Flask desde el paquete flask. Luego lo usas para crear tu instancia de aplicación Flask, dándole el nombre app. Pasas la variable especial __name__, que contiene el nombre del módulo de Python actual. Este nombre le indica a la instancia dónde está ubicada; necesitas esto porque Flask configura algunas rutas detrás de escena.

Una vez que creas la instancia app, puedes usarla para manejar solicitudes web entrantes y enviar respuestas al usuario. @app.route es un decorador que convierte una función Python regular en una función vista de Flask, que convierte el valor de retorno de la función en una respuesta HTTP para ser mostrada por un cliente HTTP, como un navegador web. Pasas el valor '/' a @app.route() para indicar que esta función responderá a las solicitudes web para la URL /, que es la URL principal.

La función de vista hello() devuelve la cadena '<h1>Hello, World!</h1>' como respuesta HTTP.

Ahora tienes una sencilla aplicación Flask en un archivo de Python llamado app.py, en el siguiente paso, ejecutarás la aplicación para ver el resultado de la función de vista hello() renderizada en un navegador web.

Paso 3 — Ejecutar la Aplicación

Después de crear el archivo que contiene la aplicación Flask, la ejecutarás utilizando la interfaz de línea de comandos de Flask para iniciar el servidor de desarrollo y renderizar en el navegador el código HTML que escribiste como valor de retorno para la función de vista hello() en el paso anterior.

Primero, estando en tu directorio flask_app con tu entorno virtual activado, indica a Flask dónde encontrar la aplicación (app.py en tu caso) usando la variable de entorno FLASK_APP con el siguiente comando (en Windows, usa set en lugar de export):

export FLASK_APP=app

Luego, especifica que deseas ejecutar la aplicación en modo de desarrollo (para poder usar el depurador para capturar errores) con la variable de entorno FLASK_ENV:

export FLASK_ENV=development

Finalmente, ejecuta la aplicación usando el comando flask run:

flask run

Una vez que la aplicación esté en ejecución, la salida será algo como esto:

Output
 * Serving Flask app "app" (lazy loading)
 * Environment: development
 * Debug mode: on
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 296-353-699

La salida anterior contiene varias piezas de información, tales como:

• El nombre de la aplicación que estás ejecutando ("app").
• El entorno en el que se está ejecutando la aplicación (development).
• Debug mode: on indica que el depurador de Flask está en funcionamiento. Esto es útil durante el desarrollo porque proporciona mensajes de error detallados cuando algo sale mal, lo que facilita la resolución de problemas.
• La aplicación se está ejecutando localmente en la URL http://127.0.0.1:5000/. 127.0.0.1 es la IP que representa el localhost de tu máquina y :5000 es el número de puerto.

Abre un navegador y escribe la URL http://127.0.0.1:5000/. Verás el texto Hello, World! en un encabezado <h1> como respuesta. Esto confirma que tu aplicación se está ejecutando correctamente.

Si deseas detener el servidor de desarrollo, presiona CTRL+C.

Para continuar desarrollando la aplicación app.py, deja el servidor de desarrollo en ejecución y abre otra ventana de terminal. Muévete al directorio flask_app, activa el entorno virtual, establece las variables de entorno FLASK_ENV y FLASK_APP, y continúa con los siguientes pasos. (Estos comandos se enumeran anteriormente en este paso.)

Output
OSError: [Errno 98] Address already in use

flask run -p 5001

Ahora tienes una pequeña aplicación web Flask. Has ejecutado tu aplicación y mostrado información en el navegador web. A continuación, aprenderás sobre las rutas y cómo utilizarlas para servir múltiples páginas web.

Paso 4 — Rutas y Funciones de Vista

En este paso, agregarás algunas rutas a tu aplicación para mostrar diferentes páginas dependiendo de la URL solicitada. También aprenderás sobre las funciones de vista y cómo utilizarlas.

Una ruta es una URL que puedes usar para determinar qué recibe el usuario cuando visita tu aplicación web en su navegador. Por ejemplo, http://127.0.0.1:5000/ es la ruta principal que podría usarse para mostrar una página de índice. La URL http://127.0.0.1:5000/about podría ser otra ruta utilizada para una página “Acerca de” que proporciona al visitante alguna información sobre tu aplicación web. De manera similar, puedes crear una ruta que permita a los usuarios iniciar sesión en tu aplicación en http://127.0.0.1:5000/login.

Tu aplicación Flask actualmente tiene una ruta que sirve a los usuarios que solicitan la URL principal (http://127.0.0.1:5000/). Para demostrar cómo agregar una nueva página web a tu aplicación, editarás tu archivo de aplicación para agregar otra ruta que proporcione información sobre tu aplicación web en http://127.0.0.1:5000/about.

Primero, abre tu archivo app.py para editar:

nano app.py

Edita el archivo agregando el siguiente código resaltado al final del archivo:

from flask import Flask

app = Flask(__name__)


@app.route('/')
def hello():
    return '<h1>Hello, World!</h1>'


@app.route('/about/')
def about():
    return '<h3>This is a Flask web application.</h3>'

Guarda y cierra el archivo.

Añadiste una nueva función llamada `about()`. Esta función está decorada con el `@app.route()` que la convierte en una función vista que maneja las solicitudes para el punto final `http://127.0.0.1:5000/about`.

Con el servidor de desarrollo en ejecución, visita la siguiente URL usando tu navegador:

http://127.0.0.1:5000/about

Verás el texto `This is a Flask web application.` renderizado en un encabezado HTML `<h3>`.

También puedes usar múltiples rutas para una función vista. Por ejemplo, puedes servir la página de índice tanto en `/` como en `/index/`. Para hacer esto, abre tu archivo `app.py` para editar:

nano app.py

Edita el archivo añadiendo otro decorador a la función vista `hello()`:

from flask import Flask

app = Flask(__name__)

@app.route('/')
@app.route('/index/')
def hello():
    return '<h1>Hello, World!</h1>'

@app.route('/about/')
def about():
    return '<h3>This is a Flask web application.</h3>'

Guarda y cierra el archivo.

Después de añadir este nuevo decorador, puedes acceder a la página de índice tanto en `http://127.0.0.1:5000/` como en `http://127.0.0.1:5000/index`.

Ahora entiendes qué son las rutas, cómo usarlas para crear funciones vista, y cómo añadir nuevas rutas a tu aplicación. A continuación, utilizarás rutas dinámicas para permitir que los usuarios controlen la respuesta de la aplicación.

Paso 5 — Rutas Dinámicas

En este paso, utilizarás rutas dinámicas para permitir que los usuarios interactúen con la aplicación. Crearás una ruta que capitaliza palabras pasadas a través de la URL y una ruta que suma dos números y muestra el resultado.

Normalmente, los usuarios no interactúan con una aplicación web editando manualmente la URL. Más bien, el usuario interactúa con elementos en la página que llevan a diferentes URLs dependiendo de la entrada y acción del usuario, pero con el propósito de este tutorial, editarás la URL para demostrar cómo hacer que la aplicación responda de manera diferente con diferentes URLs.

Primero, abre tu archivo app.py para editar:

nano app.py

Si permites que el usuario envíe algo a tu aplicación web, como un valor en la URL como vas a hacer en la siguiente edición, siempre debes tener en cuenta que tu app no debe mostrar directamente datos no confiables (datos que el usuario envía). Para mostrar datos de usuario de manera segura, utiliza la función escape() que viene con el paquete markupsafe, que se instaló junto con Flask.

Edita app.py y añade la siguiente línea al principio del archivo, encima de la importación de Flask:

from markupsafe import escape
from flask import Flask

# ...

Luego, añade la siguiente ruta al final del archivo:

# ...

@app.route('/capitalize/<word>/')
def capitalize(word):
    return '<h1>{}</h1>'.format(escape(word.capitalize()))

Guarda y cierra el archivo.

Esta nueva ruta tiene una sección variable <word>. Esto indica a Flask que tome el valor de la URL y lo pase a la función de vista. La variable de URL <word> pasa un argumento de palabra clave a la función de vista capitalize(). El argumento tiene el mismo nombre que la variable de URL (word en este caso). Con esto, puedes acceder a la palabra pasada a través de la URL y responder con una versión en mayúsculas utilizando el método capitalize() en Python.

Utilizas la función escape() que importaste anteriormente para renderizar la cadena word como texto. Esto es importante para evitar ataques de Cross Site Scripting (XSS). Si el usuario envía JavaScript malicioso en lugar de una palabra, escape() lo renderizará como texto y el navegador no lo ejecutará, manteniendo tu aplicación web segura.

Para mostrar la palabra en mayúsculas dentro de un encabezado HTML <h1>, utilizas el método format() de Python, para más información sobre este método, consulta Cómo usar formateadores de cadenas en Python 3

Con el servidor de desarrollo en ejecución, abre tu navegador y visita las siguientes URLs. Puedes reemplazar las palabras resaltadas con cualquier palabra de tu elección.

http://127.0.0.1:5000/capitalize/hello
http://127.0.0.1:5000/capitalize/flask
http://127.0.0.1:5000/capitalize/python

Puedes ver la palabra en la URL en mayúsculas dentro de una etiqueta <h1> en la página.

También puedes utilizar múltiples variables en una ruta. Para demostrar esto, agregarás una ruta que suma dos números enteros positivos y muestra el resultado.

Abre tu archivo app.py para editar:

nano app.py

Agrega la siguiente ruta al final del archivo:

# ...

@app.route('/add/<int:n1>/<int:n2>/')
def add(n1, n2):
    return '<h1>{}</h1>'.format(n1 + n2)

Guarda y cierra el archivo.

En esta ruta, utilizas un conversor especial int con la variable de URL (/add/<int:n1>/<int:n2>/) que solo acepta números enteros positivos. Por defecto, las variables de URL se asumen como cadenas y se tratan como tales.

Con el servidor de desarrollo en ejecución, abre tu navegador y visita la siguiente URL:

http://127.0.0.1:5000/add/5/5/

El resultado será la suma de los dos números (10 en este caso).

Ahora tienes una comprensión de cómo usar rutas dinámicas para mostrar diferentes respuestas en una sola ruta dependiendo de la URL solicitada. A continuación, aprenderás cómo solucionar problemas y depurar tu aplicación Flask en caso de un error.

Paso 6 — Depurar una Aplicación Flask

Al desarrollar una aplicación web, te encontrarás con situaciones frecuentes donde la aplicación muestra un error en lugar del comportamiento que esperas. Podrías escribir mal una variable o olvidarte de definir o importar una función. Para facilitar la corrección de estos problemas, Flask proporciona un depurador cuando ejecutas la aplicación en modo de desarrollo. En este paso, aprenderás cómo corregir errores en tu aplicación utilizando el depurador de Flask.

Para demostrar cómo manejar errores, crearás una ruta que salude a un usuario de una lista de nombres de usuario.

Abre tu archivo app.py para editar:

nano app.py

Agrega la siguiente ruta al final del archivo:

# ...

@app.route('/users/<int:user_id>/')
def greet_user(user_id):
    users = ['Bob', 'Jane', 'Adam']
    return '<h2>Hi {}</h2>'.format(users[user_id])

Guarda y cierra el archivo.

En la ruta anterior, la función de vista greet_user() recibe un argumento user_id desde la variable URL user_id. Utilizas el convertidor int para aceptar enteros positivos. Dentro de la función, tienes una lista de Python llamada users, que contiene tres cadenas que representan nombres de usuario. La función de vista devuelve una cadena que se construye dependiendo del user_id proporcionado. Si el user_id es 0, la respuesta será Hola Bob en una etiqueta <h2> porque Bob es el primer elemento de la lista (el valor de users[0]).

Con el servidor de desarrollo en funcionamiento, abre tu navegador y visita las siguientes URLs:

http://127.0.0.1:5000/users/0
http://127.0.0.1:5000/users/1
http://127.0.0.1:5000/users/2

Recibirás las siguientes respuestas:

Output
Hi Bob
Hi Jane
Hi Adam

Hasta ahora, esto funciona bien, pero puede fallar cuando solicitas un saludo para un usuario que no existe. Para demostrar cómo funciona el depurador de Flask, visita la siguiente URL:

http://127.0.0.1:5000/users/3

Verás una página que se ve así:

En la parte superior, la página te proporciona el nombre de la excepción de Python, que es IndexError, indicando que el índice de la lista (3 en este caso) está fuera del rango de la lista (que solo va desde 0 hasta 2 porque la lista solo tiene tres elementos). En el depurador, puedes ver el seguimiento que te indica las líneas de código que generaron esta excepción.

Las últimas dos líneas del seguimiento generalmente indican el origen del error. En tu caso, las líneas pueden ser algo como lo siguiente:

File "/home/USER/flask_app/app.py", line 28, in greet_user
    return '<h2>Hi {}</h2>'.format(users[user_id])

Esto te indica que el error proviene de la función greet_user() dentro del archivo app.py, específicamente en la línea return.

Conocer la línea original que genera la excepción te ayudará a determinar qué salió mal en tu código y decidir qué hacer para solucionarlo.

En este caso, puedes usar una cláusula simple try...except para corregir este error. Si la URL solicitada tiene un índice fuera del rango de la lista, el usuario recibirá un error 404 Not Found, que es un error HTTP que indica al usuario que la página que están buscando no existe.

Abre tu archivo app.py para editar:

nano app.py

Para responder con un error HTTP 404, necesitarás la función abort() de Flask, que se puede utilizar para hacer respuestas de error HTTP. Cambia la segunda línea en el archivo para también importar esta función:

from markupsafe import escape
from flask import Flask, abort

Luego edita la función de vista greet_user() para que se vea como sigue:

# ...

@app.route('/users/<int:user_id>/')
def greet_user(user_id):
    users = ['Bob', 'Jane', 'Adam']
    try:
        return '<h2>Hi {}</h2>'.format(users[user_id])
    except IndexError:
        abort(404)

Utilizas try arriba para probar la expresión return en busca de errores. Si no hubo error, lo que significa que user_id tiene un valor que coincide con un índice en la lista users, la aplicación responderá con el saludo apropiado. Si el valor de user_id está fuera del rango de la lista, se levantará una excepción IndexError, y utilizas except para capturar el error y responder con un error HTTP 404 usando la función auxiliar abort() de Flask.

Ahora, con el servidor de desarrollo en ejecución, visita la URL nuevamente:

http://127.0.0.1:5000/users/3

Esta vez verás una página de error 404 estándar informando al usuario que la página no existe.

Al final de este tutorial, tu archivo app.py se verá así:

from markupsafe import escape
from flask import Flask, abort

app = Flask(__name__)


@app.route('/')
@app.route('/index/')
def hello():
    return '<h1>Hello, World!</h1>'


@app.route('/about/')
def about():
    return '<h3>This is a Flask web application.</h3>'

@app.route('/capitalize/<word>/')
def capitalize(word):
    return '<h1>{}</h1>'.format(escape(word.capitalize()))

@app.route('/add/<int:n1>/<int:n2>/')
def add(n1, n2):
    return '<h1>{}</h1>'.format(n1 + n2)

@app.route('/users/<int:user_id>/')
def greet_user(user_id):
    users = ['Bob', 'Jane', 'Adam']
    try:
        return '<h2>Hi {}</h2>'.format(users[user_id])
    except IndexError:
        abort(404)

Ahora tienes una idea general de cómo usar el depurador de Flask para solucionar tus errores y ayudarte a determinar la acción apropiada para corregirlos.

Conclusión

Ahora tienes un conocimiento general de qué es Flask, cómo instalarlo y cómo usarlo para escribir una aplicación web, cómo ejecutar el servidor de desarrollo y cómo usar rutas y funciones de vista para mostrar diferentes páginas web que tienen propósitos específicos. También has aprendido a usar rutas dinámicas para permitir que los usuarios interactúen con tu aplicación web a través de la URL, y cómo usar el depurador para solucionar errores.

Si deseas leer más sobre Flask, consulta la página de temas de Flask.