👉 Aprende a crear Aplicaciones Flask | Tutorial Flask

Bienvenido a un nuevo post de mi blog sobre python flask; anteriormente vimos como funciona la arquitectura MVC, creamos un proyecto y aprendimos a crear el controlador de nuestra aplicación; en este post vamos a aprender a crear Aplicaciones Flask web continuando con nuestro proyecto.

En el post anterior: creamos  nuestro controlador que hasta ahora es genérico, no hay nada en él aún que determine que tipo de aplicación vamos a realizar, es una simple «plantilla» de controlador donde creamos nuestra app y definimos algunas rutas casi «vacías».

Así que vamos a utilizar esa misma estructura para comenzar a crear cada una de nuestras primeras aplicaciones flask.

✨ Tutorial: Crear Aplicaciones Flask – ¿Qué aprenderemos y cómo?

¿Recuerdas cuando empezaste a aprender Python y pensaste «¿y esto cómo lo conecto con una página web?»? Pues hoy es el día en que esa pregunta deja de ser un misterio.

En el post anterior sentamos las bases: arquitectura MVC, estructura de proyecto, y un controlador básico con Flask. Pero era una «plantilla vacía», una carcasa sin contenido. Ahora llega el momento de darle vida.

En este tutorial vamos a crear nuestra primera aplicación Flask funcional: un directorio telefónico sencillo pero completo, donde podrás añadir, ver y gestionar contactos. Lo mejor de todo: lo harás paso a paso y entenderás cada línea de código.

Y no, no necesitas bases de datos ni frameworks complejos. Por ahora, usaremos un simple diccionario de Python como almacén de datos. Así empezamos con lo básico, entendemos el flujo y luego, cuando quieras, añadimos complejidad.

Mira lo que vas a construir al final de este tutorial:

¿No te parece increíble? Esa aplicación que ves funcionando la harás tú mismo. Y no te preocupes por el diseño feo (aún no le hemos puesto estilo), lo importante es que funciona y la entiendes al 100%.

En este tutorial aprenderás a conectar el controlador con las vistas, a manejar peticiones GET y POST, y a usar render_template para mostrar HTML dinámico. Todo explicado en español, sin tecnicismos innecesarios.

Así que si estás listo para dejar de lado la teoría y empezar a construir, ponte cómodo, abre tu editor de código, y comencemos.

📋 ¿Qué vamos a hacer exactamente? (Checklist completo del Tutorial)

🎯 ¿Por qué empezar así?

Porque funciona. No vamos a complicarnos la vida con bases de datos reales todavía. Primero entendemos los conceptos, luego añadimos complejidad.

El modelo con diccionarios será el encargado (mediante métodos CRUD) de crear, leer, actualizar y borrar datos de nuestro «diccionario-base-de-datos».

La vista (nuestro HTML) será la encargada de recibir los datos cuando añadas un contacto y mostrarlos cuando quieras verlos.

El controlador… ¡ah! Este es el jefe. Se encargará de hacer de intermediario entre la vista y el modelo, interpretando lo que tú quieres hacer y gestionando las rutas.

Crear aplicaciones en Flask – El Controlador

Estructura del proyecto:

Recordarás que en la entrada anterior estuvimos modificando el controlador para crear una ruta de inicio de nuestra app. Esto era un simple hola mundo.

Ahora creamos lo que se mostrará en esas rutas, tu controlador quedaría así para tener una url inicial (inicio «/») y una url («agradecer» /agradecimiento):

from flask import Flask #Importamos clase Flask de flask (librería)
app = Flask(__name__) #Creamos una app instanciando la clase Flask (automáticamente el nombre de la app)

#Rutas - (argumentos: Url) - Función

@app.route('/') #Decoramos con método de app que es una instancia de la clase Flask y argumentamos "slash"
def inicio(): #Definimos una función llamada Inicio
    return 'Esta es la página de inicio!' #Retorno de la función

@app.route('/agradecimiento') #Decoramos con método routes la próxima función arguementando la url "/agradecimiento"
def agradecer(): #Definimos una función llamada agradecer
    return 'Gracias pythones.net!' #Retorno de la función

#Iniciar app

if __name__ == '__main__': #Condicional de que si la aplicación ejecutada se coincide al nombre de la aplicación
    app.run('127.0.0.1', 5000, debug=True) #Método que inicia la app con la dirección, puertos y modo de argumentos

Entonces ya tendríamos en nuestro controlador una nueva url que al visitarla devolvería el texto «Gracias pythones.net». Pero se ve bastante mal, parece más un bloc de notas que una página web; ¿verdad?.

Así que vamos a encargarnos de añadir una parte visual a nuestra aplicación y a construir la estructura base de un sitio web (HTML).

Crear aplicaciones en Flask – Crear las Vistas

Ha llegado el momento de crear nuestras vistas, para ello simplemente vamos a crear un archivo «.html» dentro de la carpeta «templates» que llamaremos «index.html» y contendrá el siguiente código (no te preocupes por entender cada etiqueta ahora, céntrate en que luego Flask lo va a servir):

<!DOCTYPE html>
<html lang="es"> <!--Cambiamos a español-->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi primer App en Flask</title> <!--Modificamos el Título-->
</head>
<body><!--Aquí comienza el cuerpo de nuestro HTML-->

    <h1 style = "text-align:center">Directorio Telefónico - Mi primer aplicación en Flask</h1> <!--Titulo principal centrado-->
    <br>

    <div>    <!--Creamos un div contenedor-->
        <div style="width: 60%; float:left; text-align:center;">    <!--Creamos el div de la izquierda-->
            <h2>Datos completos de la persona</h2>  <!--Titulo-->
            <table border = "1" style = "width: 100%;"> <!--Creamos la tabla con borde-->
                <tr><!--Creamos una fila-->
                    <td>Nombre</td> <!--Dentro de la fila las columnas-->
                    <td>Apellido</td>
                    <td>Apodo</td>
                    <td>Teléfono</td>
                    <td>Dirección</td>

                </tr>
                <tr><!--creamos otra fila-->
                    <td></td> <!--Aquí se cargarán los datos correspondientes-->
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>    <!--Fin de la tabla-->
        </div>  <!--Cierre del div de la izquierda-->

        <div style="width: 20%; float:right; margin-right: 10%; text-align:center;"> <!--Div de la derecha-->
            <h2>Personas</h2> <!--Titulo-->
            <table border = "1" style = "width: 100%;"><!--Tabla de la derecha-->
                <tr><!--Fila-->
                    <td></td><!--Columna que mostrará el nombre y apellido-->
                    <td><button name = "ver">Ver</button></td><!--Columna que mostrará el botón Ver-->
                    <td><button name = "editar">Editar</button></td><!--Columna que mostrará el botón Editar-->
                    <td><button name = "eliminar">Eliminar</button></td><!--Columna que mostrará el botón Eliminar-->
                </tr>
                <tr>
                    <td><button name = "agregar">Agregar</button></td><!--Columna que mostrará el botón Agregar-->
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

Un archivo HTML básicamente tiene una cabecera (head) donde va el título y metadatos, y un cuerpo (body) donde va todo lo que se ve: títulos, tablas, botones… Con eso es suficiente por ahora. Si quieres profundizar, HTML se aprende en un par de horas.

Bueno bueno que tu tampoco te ves tan bonito!

Horrible, pero intento no usar demasiados «estilos» para evitar confundir ahora. Así que básicamente hemos creado dos divs donde dentro de cada uno colocamos una tabla que ocupe el 80% y otra del 20%. En la tabla principal incluiremos los datos completos de la persona y en la otra tendremos una lista con «personas o contactos» donde solo mostraremos el Nombre. Y ya le hemos añadido botones para Ver, Editar, Eliminar y Agregar.

Nuestra vista se ve ahora así:

Tiene un poco más de sentido ahora, ¿verdad?

Vamos a ver ahora.. ¿Y de donde diablos salen los datos, donde se almacenarán?. Ahora llegamos al punto:

• Tenemos desarrollado nuestro controlador con sus respectivas rutas.
• Tenemos la vista «index.html».

Lo que sucede es que aún no hemos conectado el controlador, con las vistas, ni con el modelo. Porque claro! Ni hemos creado un modelo aún ni tampoco tenemos una base de datos aún.

Conectando nuestra vista al controlador

Bien ha llegado el momento entonces de visualizar nuestro template HTML llamado «index.html» para ello debemos procesarlo como una vista dentro de nuestro controlador. ¿Cómo lo hacemos?

Hasta ahora en nuestro controlador solo hemos mostrado una lineal de texto algo insulsa que decía:

@app.route('/') #Decoramos con método de app que es una instancia de la clase Flask y argumentamos "slash"
def inicio(): #Definimos una función llamada Inicio
    return 'Esta es la página de inicio!' #Retorno de la función

Fíjate que al cargar la url de inicio (127.0.0.1:5000/) de nuestro sitio web se cargará el mensaje que se encuentra dentro del return de la función de nuestra ruta. Ahora no queremos mostrar una cadena sino un archivo HTML completo.

Para ello debemos utilizar un objeto de flask que será capaz de procesar las solicitudes que haga un cliente a nuestro controlador y devolverle como vista un template HTML entre otras cosas..

El objeto Request – Devolver un archivo HTML en Flask

Request puede no solo retornar un archivo estático HTML sino que nos permitirá también trabajar diferentes argumentos y retornar contenido almacenado dentro de variables para ser mostrados o utilizados en dicha función. Esta librería seguramente la utilizarás en la mayoría de aplicaciones flask que vayas a desarrollar.

No solo eso la librería request permite identificar el Tipo de solicitud que un cliente hace a nuestras aplicaciones flask. Por ejemplo si nuestro cliente quiere «visualizar» el sitio web, o quiere «enviarle datos«; ambas peticiones deben ser administradas de forma diferente por nuestra aplicación web.

No es lo mismo recibir una petición de visualización, que recibir una petición de cargar datos.

Ahora sí, continuando… Igualmente dejaré un diagrama donde intentaré explicar cómo utilizamos el objeto Request para (en este caso) detectar el tipo de solicitud del cliente o usuario.

if request.method == 'POST':
    # Es una solicitud de ENVÍO de datos
    → Consulta al modelo
    → Verifica datos
    → Envía a la base de datos
    → Muestra página 'Éxito al registrar tus datos'
else:
    # Es una solicitud de VISUALIZACIÓN (GET)
    → Muestra la página 'Formulario'

🔄 Solicitudes y flujo en aplicaciones flask usando Request:

Así funciona el ciclo de solicitudes GET y POST en nuestra aplicación:

1. Solicitud GET inicial – El cliente pide ver nuestra página de inicio
2. Controlador detecta GET – Flask identifica que es una solicitud de visualización
3. Carga formulario HTML – Entra en el ELSE del condicional y carga el formulario
4. Sirve template formulario.html – Muestra el formulario al usuario
5. ⬇️ Cliente completa y envía – Usuario llena datos y hace clic en «Registrarse»
6. Solicitud POST – El botón envía una solicitud POST con los datos
7. Entra en bloque IF – Flask detecta POST y entra en el condicional
8. Procesamiento de datos – Valida datos, consulta modelo, guarda en base de datos
9. Respuesta de la BD – Base de datos confirma que los datos se guardaron
10. Continúa en IF – Controlador sigue ejecutando código dentro del condicional
11. Sirve template éxito – Muestra la página exito.html al usuario

GET → Formulario → POST → Procesamiento → Éxito

🤔 ¿Cómo funciona realmente una aplicación flask?

Utilizando el objeto Request para procesar solicitudes en aplicaciones flask

Recordemos que un objeto es una instancia de una clase, es decir un objeto que fue creado a partir de una clase y hereda ciertos atributos de esta. En el caso del objeto Request es importado desde la librería flask así que bastará con añadir a nuestro controlador en la primer línea:

from flask import Flask, request #Importamos clase Flask y objeto request de flask (librería)
app = Flask(__name__) #Creamos una app instanciando la clase Flask (automáticamente el nombre de la app)

#Rutas - (argumentos: Url) - Función

@app.route('/') #Decoramos con método de app que es una instancia de la clase Flask y argumentamos "slash"
def inicio(): #Definimos una función llamada Inicio
    return 'Esta es la página de inicio!' #Retorno de la función

@app.route('/agradecimiento') #Decoramos con método routes la próxima función arguementando la url "/agradecimiento"
def agradecer(): #Definimos una función llamada agradecer
    return 'Gracias pythones.net!' #Retorno de la función

#Iniciar app

if __name__ == '__main__': #Condicional de que si la aplicación ejecutada se coincide al nombre de la aplicación
    app.run('127.0.0.1', 5000, debug=True) #Método que inicia la app con la dirección, puertos y modo de argumentos

Servir un template HTML usando la función render_template

Para mostrar nuestro template HTML Flask utiliza la librería Jinja2 mediante la función «render_template«. Más adelante en una entrada puramente teórica vamos a repasar cada aspecto de esta lección y a comprender entre otras cosas los parámetros de dicha función, que argumentos admite y como utilizarlo. Ahora vamos a enfocarnos en desplegar nuestro template al momento de cargar la url de inicio de nuestra primer aplicación en flask cuando se realiza una solicitud GET.

from flask import Flask, request, render_template #Importamos clase Flask, objeto request y función render_template de flask (librería)
app = Flask(__name__) #Creamos una app instanciando la clase Flask (automáticamente el nombre de la app)

#Rutas - (argumentos: Url) - Función

@app.route('/', methods = ['GET', 'POST']) #Decoramos con método de app que es una instancia de la clase Flask y argumentamos "slash"
def inicio(): #Definimos una función llamada Inicio
    if request.method == 'POST':
        pass
    else:
        return render_template('/index.html') #Retornornamos el template usando RENDER_TEMPLATE()

@app.route('/agradecimiento', methods = ['GET']) #Decoramos con método routes la próxima función arguementando la url "/agradecimiento"
def agradecer(): #Definimos una función llamada agradecer
    return 'Gracias pythones.net!' #Retorno de la función

#Iniciar app

if __name__ == '__main__': #Condicional de que si la aplicación ejecutada se coincide al nombre de la aplicación
    app.run('127.0.0.1', 5000, debug=True) #Método que inicia la app con la dirección, puertos y modo de argumentos

Devolverá:

🎯 Conclusión – Aplicaciones Flask (Parte 1)

Hasta aquí hemos sentado las bases de nuestra primera aplicación Flask. En esta parte hemos:

• ✅ Conectado nuestra vista HTML al controlador usando render_template().
• ✅ Aprendido a diferenciar GET y POST con el objeto request.
• ✅ Creado la estructura visual de nuestra app (aunque sea cutre, ¡es nuestra!).

Pero si miramos bien, nuestra aplicación sigue siendo una cáscara vacía: no guarda datos, no muestra contactos de verdad, y los botones aún no hacen nada útil. 🫣

🚀 ¿Qué sigue?

En el próximo tutorial vamos a darle vida a esta app. Esto es lo que vas a aprender:

En resumen: vamos a convertir esta “maqueta” en una aplicación funcional. Los botones van a dejar de ser adornos y empezarán a hacer magia. ✨

💡 Spoiler: En la Parte 2 verás cómo esos botones «Ver», «Editar» y «Eliminar» cobran vida. Y lo mejor: vas a entender cada línea de código.

Prueba modificar el HTML para hacerlo más bonito con CSS si lo deseas. ¡Experimenta! Es la mejor forma de aprender. 🎨

📅 Última actualización: agosto 1, 2026