👉 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á lo siguiente:

Como ves desde VSCode simplemente nos posicionamos en la carpeta «templates» y damos clic en el icono de crear nuevo archivo, colocamos el nombre y extensión «index.html» y dentro del editor he colocado «html:5» y he dado enter. Lo que automaticamente nos coloca una plantilla «html» por defecto que tiene el siguiente código:

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    
</body>
</html>

Voy a citar otro de mis post que he creado anteriormente sobre Flask para explicar brevemente:

• Línea 1: Nos indica que se trata de un archivo HTML, como puedes ver html trabaja con etiquetas que consisten en palabras reservadas dentro de los símbolos de mayor y menor, o ranitas como decía un viejo profesor. Pero en esta caso luego de la apertura de la etiqueta «<» contiene un signo de interrogación, lo que expresa que es un comentario informativo. Esta información es muy importante para el navegador del cliente!
• La siguiente etiqueta es la que abre un archivo html, esta etiqueta indica que lo que viene a continuación es puro html, y como te dije HTML al trabajar con etiquetas siempre, pero siempre las etiquetas abiertas deben ser cerradas. Echa un vistazo a la ultima línea donde se cierra el archivo HTML!
• La etiqueta que sigue «head» indica que aquí se encuentra la información de la cabecera del archivo y es dentro de esta donde normalmente se incluye el título mediante la etiqueta «title» que actualmente es «Document» y otra información también relevante a mostrar en el navegador del cliente. En el caso de Chrome este título aparecerá arriba en la pestaña.
• Las que siguen se encuentran dentro del «head» (porque se cierra más debajo englobando otras etiquetas que abren y cierran dentro de este bloque.. Cada etiqueta que abre se considera un bloque y básicamente tenemos bloques dentro de bloques en un solo bloque gigante que abre y cierra como HTML.) son etiquetas «meta». Las etiquetas meta le envían información al cliente o navegador que abra este archivo. En este caso le indica la codificación de caracteres aceptados y añade compatibilidad con el navegador de Win «Microsoft Edge».
• Finalmente cierra el bloque «head» y comienza el «body» en la línea siguiente, que refiere al cuerpo del archivo. Dentro del body se encuentra lo que se mostrará en el sitio web, divisorios, menús, barras laterales, texto, imágenes, etc.
• Con el «body» en blanco, porque esto es una plantilla automática generada por Visual Studio Code, finalmente cierra el «body» y finalmente cierra el bloque «html»

Y así es como se estructura normalmente un archivo HTML. Y todo esto que ves debajo se encuentra dentro de las etiquetas<html></html>

Bien habiendo visto esto rápidamente vamos a modificar nuestro archivo HTML primeramente para definir idioma español, cambiar el «Title» y dentro del «Body» vamos a crear unas tablas!. Si no sabes nada de HTML es momento que comiences a aprender, no te llevará más de un par de horas aprender HTML y CSS; al menos lo básico. Lo dejamos así:

<!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>

    <h1 style = "text-align:center">Directorio Telefónico - Mi primer aplicación en Flask</h1>
    <br>
    <!--Creamos una tabla-->
    <div>
        <div style="width: 60%; float:left; text-align:center;">
            <h2>Datos completos de la persona</h2>
            <table border = "1" style = "width: 100%;">
                <tr>
                    <td>Nombre</td>
                    <td>Apellido</td>
                    <td>Apodo</td>
                    <td>Teléfono</td>
                    <td>Dirección</td>

                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </div>
        <div style="width: 20%; float:right; margin-right: 10%; text-align:center;">
            <h2>Personas</h2>
            <table border = "1" style = "width: 100%;">
                <tr>
                    <td></td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

Así que nuestra vista por ahora se ve así:

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.

Aquí tienes el código HTML comentado:

<!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-->
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

La idea es que al seleccionar el nombre una persona de la tabla de la derecha se nos muestren los datos completos a la izquierda!. Bastante sencillo y cutre..

Así que ya que estamos trabajando la parte VISUAL, es decir, las vistas. ¿No crees que sería bueno ya añadir unos botones que nos permitan realizar estas acciones?

Así que yo voy a añadir al lado de donde deberían aparecer las personas en nuestra base de datos, es decir, en la columna derecha tres botones:

1. Ver
2. Editar
3. Eliminar

Para ello debemos modificar la tabla, más específicamente agregar nuevas columnas dentro de la fila (Fíjate, te resaltaré las líneas con los cambios):

<!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></td><!--Columna que mostrará el botón Ver-->
                    <td></td><!--Columna que mostrará el botón Editar-->
                    <td></td><!--Columna que mostrará el botón Eliminar-->
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

Y debajo voy a añadir un cuarto botón.. «Agregar».

Pero este botón no puede ir dentro de las misma fila, sino por cada persona tendríamos un botón agregar.. Y queremos tener un solo botón, así que creamos una nueva columna y lo colocamos allí dentro de la misma tabla. Y de paso ya añadimos estos botones usando HTML, nuevamente te resalto las líneas modificadas:

<!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>

Así que debemos pensar, cada persona que se cargue desde nuestra base de datos en la tabla de la derecha, deberá contar con 3 botones. Y aparte de ellas debajo habrá un solo botón «Agregar» para agregar nuevas personas a la base de datos!.

Nuestra vista se ve ahora así:

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

Así que nuestra vista la modificamos así; te resalto los cambios!

<!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>

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.

❓ ¿Te quedaste con ganas de más? ¡Perfecto! Eso significa que estás aprendiendo. Mientras tanto, ¿por qué no pruebas modificar el HTML para hacerlo más bonito con CSS? ¡Experimenta! Es la mejor forma de aprender. 🎨

📅 Última actualización: julio 25, 2026