100 Días de Código en Python — Día 55: Rutas con variables, HTML desde Flask y el juego "Mayor o menor" en la web

📝 Contenido original del curso#

Hoy se profundiza en Flask: cómo devolver HTML, cómo leer lo que el usuario escribe en la URL y cómo usar decoradores avanzados que reciben argumentos posicionales y de palabra clave.

Todo termina en un juego de adivinar un número en la web: la ruta de inicio / pide adivinar un número entre 0 y 9; si visitas /3, la página responde si es muy bajo, muy alto o correcto, con un título de color y un GIF distinto en cada caso.

Prerequisitos: Flask básico y decoradores (Día 54), HTML y CSS en línea (Días 41 a 44), clases (Días 16 a 20), *args y **kwargs (Día 27), el juego de adivinar el número (Día 12) y "Mayor o menor" (Día 14).

🎯 Objetivo de aprendizaje#

Capturar partes de la URL como variables, convertirlas al tipo correcto y usar el depurador de Flask para encontrar errores.

📝 Contenido original del curso#

Reglas variables. Para capturar lo que el usuario escribe en una parte de la ruta, se encierra entre corchetes angulares. Flask pasa ese valor a la función como un argumento con el mismo nombre:

@app.route("/username/<name>")
def greet(name):
    return f"Hello there {name}!"

Visitar /username/Angela muestra "Hello there Angela!". Se puede agregar texto antes y después de la variable (/username/<name>/1).

Modo de depuración. Cada cambio en el servidor exige detenerlo y volver a ejecutarlo; si no, aparece un 404 aunque la ruta ya exista en el código. Con el modo de depuración:

if __name__ == "__main__":
    app.run(debug=True)

• se activa el recargador automático: al guardar el archivo, el servidor se reinicia solo;
• se activa el depurador en el navegador cuando hay un error.

El depurador en acción. La profesora provoca dos errores:

1. Cambia la ruta a <username> pero deja la función con el parámetro name → TypeError: greet() got an unexpected keyword argument 'username'.
2. Hace name + 12 → TypeError: can only concatenate str (not "int") to str. El depurador señala el archivo y la línea del error.

Al pulsar el ícono de la consola en la página de error, Flask pide el PIN que aparece en la terminal. Con él se abre una consola en ese punto del código, donde puedes escribir name y ver su valor. El PIN existe para que, si el sitio estuviera en Internet con el modo de depuración activo, un extraño no pudiera usar esa consola.

Convertidores. Por defecto la variable es un texto sin barras (string). Se puede especificar otro tipo:

@app.route("/username/<path:name>")          # acepta barras: /username/Angela/1 → "Angela/1"
@app.route("/username/<name>/<int:number>")  # número entero: /username/Angela/12
def greet(name, number):
    return f"Hello there {name}, you are {number} years old!"

📖 Explicación conceptual#

Los convertidores más usados (verificado con Flask 3.1):

Tres consecuencias importantes:

• Sin int:, el valor es texto: "15" + 1 lanza TypeError y "15" == 15 es False.
• Con int:, Flask rechaza lo que no sea un entero con un 404 antes de llamar a tu función. Es validación gratis. Si necesitas negativos: <int(signed=True):v> (verificado: /valor/-3 → -3).
• float no acepta 15 sin punto decimal (verificado). Si quieres aceptar 15 y 4.5, registra dos rutas (una int y una float) sobre la misma función, o recibe texto y conviértelo tú con float() dentro de un try.

🛠️ Nota técnica: hoy también puedes activar la depuración sin tocar el código, al ejecutar: flask --app server run --debug. Y nunca publiques un sitio con debug=True: la consola del depurador permite ejecutar código Python en el servidor, y el PIN es solo una barrera, no una garantía.

🛠️ Nota técnica (verificado): la barra final importa. Con @app.route("/username/<name>"), la URL /username/Ana/ (con barra al final) da 404.

⚠️ Errores frecuentes#

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1 — Aplicación: una ruta /cuadrado/<int:n> que devuelva el cuadrado de n.
• 🟡 Reto 2 — Ampliación: /saludo/<nombre>/<int:edad> que diga cuántos años le faltan para cumplir 18 (o que ya es mayor de edad).
• 🟠 Reto 3 — Desafío: provoca a propósito un TypeError en una ruta, abre la consola del depurador con el PIN e inspecciona tres variables. Toma captura.
• 🔴 Reto 4 — Pensamiento computacional: diseña las rutas (solo las URL, sin código) de una biblioteca escolar: ver un libro por código, ver los libros de un autor, ver los préstamos de un estudiante por su número de lista. ¿Qué convertidor usa cada variable y por qué?

🎯 Objetivo de aprendizaje#

Devolver etiquetas HTML con atributos y estilos desde una función de Flask, manejando bien las comillas.

📝 Contenido original del curso#

Cuando una función devuelve un texto simple, Flask lo mete en el <body> sin más estructura. Pero Flask acepta HTML en el return:

@app.route("/")
def hello_world():
    return '<h1 style="text-align: center">Hello, World!</h1>' \
           '<p>This is a paragraph.</p>' \
           '<img src="https://media.giphy.com/media/hvS1eKlR75hMr0l7VJ/giphy.gif" width=200>'

• Puedes usar cualquier etiqueta, atributos y CSS en línea.
• Para varias líneas, PyCharm corta la cadena al presionar Enter y agrega una barra invertida \ al final de la línea.
• Un <img> no necesita etiqueta de cierre, pero sí src. También sirven los GIF (por ejemplo, de Giphy), y puedes ajustar su width.
• Comillas: si el return usa comillas simples por fuera, los atributos van con comillas dobles por dentro, y viceversa.

📖 Tres formas de escribir HTML largo (adaptación)#

Aun así, escribir páginas enteras dentro de Python es incómodo: no tienes el resaltado ni el autocompletado de un archivo HTML. El Día 56 moverás el HTML a plantillas.

⚠️ Errores frecuentes#

🎯 Objetivo de aprendizaje#

Reconocer que lo que llega en la URL lo controla el usuario y escaparlo antes de ponerlo en HTML.

📖 Explicación conceptual#

Junta las dos lecciones anteriores: una ruta con variable y un return que se interpreta como HTML.

@app.route("/username/<name>")
def greet(name):
    return f"Hello there {name}!"

¿Qué pasa si alguien visita /username/<h1 style='color:red'>HACKEADO<h1>? Verificado con Flask 3.1, la respuesta es:

Hello there <h1 style='color:red'>HACKEADO<h1>!

El navegador dibuja ese HTML. Con etiquetas más peligrosas, un atacante podría ejecutar JavaScript en la página de otra persona que abra un enlace preparado. Este ataque se llama XSS (Cross-Site Scripting) y está entre los más comunes en la web.

La solución: escapar. Escapar convierte los caracteres especiales en texto inofensivo (< pasa a <). Flask incluye la función escape (del paquete markupsafe, que se instala con Flask). De hecho, el propio Quickstart de Flask la usa en su ejemplo de rutas variables:

from markupsafe import escape

@app.route("/username/<name>")
def greet(name):
    return f"Hello there {escape(name)}!"

Resultado verificado: Hello there <h1 style='color:red'>HACKEADO<h1>! El navegador lo muestra como texto; no lo ejecuta.

💡 El Día 56 usarás plantillas con render_template, que escapan automáticamente las variables. Mientras construyas HTML con f-strings, el responsable eres tú.

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1: prueba la ruta sin escape con <b>hola</b> y con <i>hola</i>. Luego agrega escape y compara el código fuente de la página (Ctrl + U).
• 🟡 Reto 2: ¿las variables con <int:...> necesitan escape? Justifica tu respuesta con lo que sabes de los convertidores.
• 🟠 Reto 3: escribe una lista de verificación de 4 puntos para revisar la seguridad de cualquier ruta que devuelva HTML.

📝 Ejercicio original del curso#

Envolver un texto en <b>, <em> y <u> a mano es propenso a errores tipográficos y difícil de editar. El reto: crear tres decoradores, make_bold, make_emphasis y make_underlined, que se ponen debajo de @app.route(...) y envuelven el texto que devuelve la función en la etiqueta correspondiente:

@app.route("/bye")
@make_bold
@make_emphasis
@make_underlined
def bye():
    return "Bye!"

Resultado esperado: el texto "Bye!" en negrita, cursiva y subrayado. Tiempo sugerido: 10 minutos.

🔍 Antes de programar#

• La función decorada devuelve un texto. ¿Qué debe devolver el wrapper? (Pista: no basta con llamar a la función, como en el Día 54.)
• Si apilas tres decoradores, ¿en qué orden se aplican? ¿Cuál queda por fuera?
• ¿Qué recibe @app.route: la función original o la ya envuelta?

📖 Explicación conceptual#

La diferencia con el Día 54: allí el wrapper solo llamaba a la función. Aquí debe usar su resultado y devolverlo modificado:

def make_bold(function):
    def wrapper():
        return f"<b>{function()}</b>"
    return wrapper

Los decoradores se aplican de abajo hacia arriba: el más cercano a la función la envuelve primero. @app.route queda arriba, así que registra la versión ya decorada.

🛠️ Nota técnica (verificado): con un solo uso funciona, pero si decoras dos rutas con make_bold, Flask se detiene al arrancar:

1

AssertionError: View function mapping is overwriting an existing endpoint function: wrapper

Flask identifica cada ruta por el nombre de la función (su endpoint). Ambas rutas le entregan una función llamada wrapper, y Flask no permite dos con el mismo nombre. La solución estándar es functools.wraps, que copia el nombre (y la documentación) de la función original al wrapper:

1234567

import functools

def make_bold(function):
    @functools.wraps(function)
    def wrapper():
        return f"<b>{function()}</b>"
    return wrapper

Es buena práctica ponerlo en todo decorador que escribas.

⚠️ Errores frecuentes#

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1: agrega make_heading que envuelva en <h1>.
• 🟡 Reto 2: cambia el orden de los decoradores y mira el código fuente (Ctrl + U). Explica el orden de las etiquetas.
• 🟠 Reto 3: escribe una sola función envolver_en(etiqueta) que fabrique decoradores: @envolver_en("b"), @envolver_en("mark"). (Pista: una función que devuelve un decorador, que devuelve un wrapper: tres niveles. Es lo mismo que hace @app.route("/").)
• 🔴 Reto 4: ¿make_bold sirve para una ruta con variable como greet(name)? Pruébalo, explica el error y resuélvelo con lo que aprenderás en la sección 5.

🎯 Objetivo de aprendizaje#

Escribir decoradores que funcionen con funciones que reciben argumentos, y usar esos argumentos dentro del wrapper.

📝 Contenido original del curso#

Hasta ahora los wrappers llamaban a la función sin argumentos. ¿Y si la función los necesita, o si el decorador debe revisar algo antes de llamarla?

La profesora simula un blog donde solo los usuarios que iniciaron sesión pueden publicar:

class User:
    def __init__(self, name):
        self.name = name
        self.is_logged_in = False


def is_authenticated_decorator(function):
    def wrapper(*args, **kwargs):
        if args[0].is_logged_in == True:
            function(args[0])
    return wrapper


@is_authenticated_decorator
def create_blog_post(user):
    print(f"This is {user.name}'s new blog post.")


new_user = User("angela")
new_user.is_logged_in = True
create_blog_post(new_user)

Por qué *args y **kwargs: sin ellos, create_blog_post(new_user) falla con "wrapper() takes 0 positional arguments but 1 was given": la función que realmente se llama es el wrapper, y no aceptaba argumentos. Con *args (argumentos posicionales ilimitados) y **kwargs (de palabra clave ilimitados), el wrapper recibe lo que le pasen. args[0] es el primer argumento posicional: el usuario.

Si is_logged_in es False, no se imprime nada; al cambiarlo a True, se publica.

📖 Explicación conceptual#

Mejora 1: reenviar todo. El código del curso llama function(args[0]), que solo sirve para funciones con un argumento. La forma general reenvía todo lo que llegó y devuelve el resultado:

def wrapper(*args, **kwargs):
    ...
    return function(*args, **kwargs)

Mejora 2: no depender de la posición. Verificado: si alguien llama create_blog_post(user=new_user) (por nombre), args está vacío y args[0] lanza IndexError: tuple index out of range. Una versión más robusta busca el usuario en los dos lugares:

import functools

def is_authenticated_decorator(function):
    @functools.wraps(function)
    def wrapper(*args, **kwargs):
        user = args[0] if args else kwargs.get("user")
        if user is not None and user.is_logged_in:
            return function(*args, **kwargs)
        print("Acceso denegado: inicia sesión primero.")
    return wrapper

• if user.is_logged_in: es más claro que == True.
• Informar "acceso denegado" es mejor que no hacer nada en silencio.

💡 Este patrón es exactamente el de la vida real: en el Día 68 del curso usarás @login_required, un decorador que protege rutas de Flask para que solo las vean usuarios autenticados.

📝 Ejercicio de práctica: decorador que registra llamadas#

(El video anuncia "un ejercicio de codificación para probar esta nueva forma avanzada de decoradores". Su enunciado no está entre los archivos suministrados; este es un ejercicio equivalente propuesto por esta adaptación.)

Crea logging_decorator que, al llamar a la función decorada, imprima su nombre, los argumentos con que se llamó y el valor que devolvió:

@logging_decorator
def a_function(a, b, c):
    return a * b * c

a_function(1, 2, 3)
# Salida esperada (el formato exacto es tuyo):
# Llamaste a_function(1, 2, 3)
# Devolvió: 6

Condiciones: debe funcionar con cualquier número de argumentos, debe devolver el resultado (no solo imprimirlo) y debe usar functools.wraps.

⚠️ Errores frecuentes#

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1: agrega a User un atributo es_docente y crea @solo_docentes para una función calificar(user, nota).
• 🟡 Reto 2: aplica logging_decorator a una función con argumentos por nombre (precio(valor, descuento=0.1)) y muestra también los kwargs.
• 🟠 Reto 3: reescribe make_bold (sección 4) con *args y **kwargs para que funcione con la ruta greet(name).
• 🔴 Reto 4 — Pensamiento computacional: termina el decorador @reintentar que diseñaste el Día 54: que reenvíe los argumentos y reintente hasta 3 veces si hay una excepción. Pruébalo con una función que falle al azar el 50 % de las veces (random.random() < 0.5).

📝 Ejercicio original del curso#

Es el juego de adivinar del Día 14, pero ahora como sitio web.

1. Crea un proyecto higher-lower con un archivo server.py.
2. Una aplicación Flask cuya ruta de inicio muestre un <h1> que diga "Guess a number between 0 and 9" y un GIF de tu elección de giphy.com (o el que propone el curso: https://media.giphy.com/media/3o7aCSPqXE5C6T8tBC/giphy.gif).
3. Genera un número aleatorio entre 0 y 9 (u otro rango que elijas).
4. Crea una ruta que detecte el número que el usuario escribe en la URL (por ejemplo URL/3 o URL/9) y lo compare con el número aleatorio: muy bajo, muy alto o correcto. Intenta que el <h1> tenga un color distinto en cada caso. Por ejemplo, si el número fuera 5: 3 es muy bajo, 7 es muy alto y 5 es correcto.

GIF del curso (verificados, siguen disponibles): muy alto …/3o6ZtaO9BZHcOjmErm/giphy.gif, muy bajo …/jD4DwBtqPXRXa/giphy.gif, correcto …/4T7e4DmcrP9du/giphy.gif (todos en https://media.giphy.com/media/). "Es mucho más divertido buscar los tuyos".

Problema y contexto#

El juego de consola del Día 14 solo lo podía jugar quien estaba frente al computador. Como sitio web, cualquier persona en la red del salón puede jugar desde su celular escribiendo una URL.

🔍 Antes de programar#

• ¿Qué información tenemos? El número que el usuario escribe en la URL.
• ¿Dónde se genera el número secreto: dentro de la función de la ruta o fuera? ¿Qué pasaría en cada caso? (Pista: si se genera dentro, ¡cambia en cada visita!)
• ¿Qué convertidor usarás para que /abc no llegue a tu función?
• ¿Qué salidas hay? Tres páginas, cada una con color y GIF propios.

Requisitos funcionales#

1. / con el <h1> y el GIF de inicio.
2. /<int:intento> con tres respuestas posibles, cada una con color y GIF distintos.
3. Si el número está fuera del rango (por ejemplo, /15), un mensaje que lo diga.

Restricciones técnicas#

• Número secreto generado una sola vez, fuera de las funciones.
• Convertidor int en la ruta.
• HTML largo con paréntesis o triple comilla (sección 2).

Planificación#

1. Comprender. 2. Entrada: el número en la URL. 3. Proceso: comparar con el secreto. 4. Salidas: tres páginas. 5. Dividir: ruta de inicio, ruta de intento. 6. Diseñar la tabla de colores y GIF. 7. Implementar. 8. Probar. 9. Corregir. 10. Mejorar.

Construcción paso a paso#

• Versión 1: la ruta / con el título y el GIF.
• Versión 2: la ruta de intento que solo repite el número recibido.
• Versión 3: la comparación con un número secreto fijo (por ejemplo, 5) para poder probarla.
• Versión 4: el número aleatorio.
• Versión final: colores, GIF y el mensaje de fuera de rango.

Pruebas#

(Fija temporalmente el número secreto en 5 para probar.)

🛠️ Nota técnica: con el modo de depuración activo, cada vez que guardas el archivo el servidor se reinicia y el número secreto cambia. No es un error: el módulo se vuelve a ejecutar. Además, el número es el mismo para todos los jugadores de la red: el servidor tiene una sola variable. Para que cada jugador tenga su propio número harían falta cookies o sesiones (Día 68 del curso).

🧪 Prueba y depuración#

import random
from flask import Flask
app = Flask(__name__)

@app.route("/<intento>")
def adivinar(intento):
    secreto = random.randint(0, 9)
    if intento < secreto:
        return "<h1 style="color: red">Muy bajo</h1>"
    elif intento > secreto:
        return "<h1 style='color: purple'>Muy alto</h1>"

Encuentra cuatro problemas: falta int: (comparar texto con número lanza TypeError), el número secreto se genera en cada visita, las comillas dobles dentro y fuera dan SyntaxError, y falta el caso correcto (la función devolvería None y Flask mostraría un error).

⭐ Extensión del proyecto#

• Una ruta /nuevo que genere otro número secreto (pista: la palabra clave global, Día 12).
• Contar los intentos y mostrarlos al acertar.
• Un enlace "Volver a intentar" en cada página.

Situación#

El docente de matemáticas quiere una herramienta rápida para verificar operaciones desde el celular, escribiendo una URL como /sumar/12/30.

Requisitos#

1. Rutas para al menos cuatro operaciones: /sumar/<a>/<b>, /restar/..., /multiplicar/..., /dividir/..., con el convertidor adecuado (decide si int o float, y cómo aceptar negativos).
2. Un diccionario de funciones (Día 54, sección 4) en lugar de cuatro funciones de ruta repetidas: una sola ruta /<operacion>/<a>/<b>.
3. La división entre cero muestra un mensaje amable, no el depurador.
4. Un decorador @registrar (con *args, **kwargs y functools.wraps) que guarde cada operación en historial.txt.
5. Una ruta /historial que muestre las últimas 10 operaciones, con escape sobre lo que se lee del archivo.

Decisiones que debes tomar (y justificar)#

• ¿/dividir/7/2 debe dar 3.5 o 3? ¿Y cómo aceptas /sumar/2.5/3, si el convertidor float rechaza 3 y el int rechaza 2.5? (Revisa la tabla de la sección 1.)
• ¿Qué respuesta das a /potencia/2/3 si no implementaste potencia: un 404 o un mensaje propio?

Casos de prueba#

• /sumar/12/30 → 42.
• /dividir/1/0 → mensaje "No se puede dividir entre cero".
• /restar/5/-3 → 8 (solo si aceptas negativos).
• Tras 3 operaciones, /historial muestra 3 líneas.

Conceptuales#

1. ¿Qué hacen los corchetes angulares en @app.route("/usuario/<nombre>")?
2. ¿Qué dos ventajas da el modo de depuración? ¿Por qué nunca debe usarse en un sitio público?
3. ¿Para qué sirve el convertidor int además de convertir el tipo?
4. ¿Qué es XSS y cómo lo evita escape?
5. ¿Por qué el decorador de autenticación necesita *args y **kwargs?

Análisis de código#

@app.route("/doble/<n>")
def doble(n):
    return f"{n * 2}"

¿Qué muestra /doble/21? ¿Por qué no es 42? ¿Cómo lo corriges?

Predicción#

def make_bold(f):
    def w():
        return "<b>" + f() + "</b>"
    return w

def make_underlined(f):
    def w():
        return "<u>" + f() + "</u>"
    return w

@make_underlined
@make_bold
def texto():
    return "Hola"

print(texto())

Depuración#

def is_authenticated(function):
    def wrapper():
        if user.is_logged_in:
            function(user)
    return wrapper

¿Qué errores aparecen al usarlo con create_blog_post(new_user)? Corrígelos.

Modificación#

Cambia el proyecto "Mayor o menor" para que el rango sea de 1 a 100 y el mensaje diga "muy bajo" o "un poco bajo" según la distancia al número secreto (más o menos de 10).

Creación#

Escribe desde cero un decorador @contar_llamadas que lleve la cuenta de cuántas veces se ha llamado a la función y la imprima en cada llamada.