👉 Aprende a crear Aplicaciones Flask – Tutorial (Parte 1)

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?

¿Listo para crear tu primera de muchas aplicaciones flask web? ¡Venga que te mata la curiosidad! En este tutorial vamos a construir algo útil, divertido y, sobre todo, ¡que vas a entender de cabo a rabo!

¿Qué vamos a hacer? Una aplicación sencilla (HTML puro) que funciona como un directorio telefónico. ¿La base de datos? ¡Un simple diccionario de Python! Así de fácil para empezar.

¡Ojo! No te asustes con eso del “Modelo-Vista-Controlador“. Te lo voy a explicar tan claro que después vas a decir “¡pero si era obvio!”.

📋 ¿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.

🔥 ¿Qué obtendrás al terminar este tutorial?

• ✅ Una aplicación flask web funcional; que podrás mostrar con orgullo
• ✅ Comprensión real del patrón MVC (no solo teoría)
• ✅ Bases sólidas de Python y Flask para proyectos más grandes
• ✅ Código que entiendes al 100% (nada de copiar y pegar sin saber)
• ✅ Ejercicios prácticos para que sigas aprendiendo (Parte 2)

¡Simple y sencillo! Va a quedar espectacular y lo harás en un santiamén, ya verás. ¿La mejor parte? Cuando termines, vas a decir “¿esto era todo?” y te darás cuenta de lo poderoso que es saber Python para crear Aplicaciones Flask Web.

Así que… ¿preparado? ¡Manos a la obra! 🚀

💡 Pro tip: No te saltes ningún paso. Cada línea de código tiene su razón de ser y te aseguro que cuando lleguemos al final, todo va a tener sentido.

❓ ¿Dudas durante el tutorial? ¡Pregunta en los comentarios o en Discord! Estoy aquí para ayudarte.

¿Listo para empezar? Sigue leyendo que ahora viene lo bueno… 👇

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 a los lectores novatines. 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 comentado por si no entiendes «joraca» de HTML:

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

Y además de ver los datos completos quiero poder añadir, editar y eliminar personas. Ufff..

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

🤔 Reflexión: ¿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)

• Aprendimos a crear plantillas o templates HTML.
• Aprendimos a admitir una o ambas solicitudes dentro de nuestras Rutas.
• Ya sabemos como crear un condicional dentro de la función de la ruta inicio (‘/’) de nuestro controlador.
• Aprendimos a usar el método “method” del objeto Request para identificar el tipo de solicitud.
• También aprendimos a usar la función render_template para retornar un template HTML desde nuestra función “inicio()” que se ejecuta al cargar la ruta “inicio”.
• Creamos la vista de nuestra primera de muchas aplicaciones flask y la conectamos a nuestro controlador.py.

📅 ¡La PARTE 2 del Tutorial de aplicaciones Flask viene con todo!

¡Muy bien! Ya tenemos nuestra vista HTML conectada al controlador. Pero si te fijas bien… ¡nuestra aplicación está más vacía que un estadio el lunes por la mañana!

En la PARTE 2 vamos a ponerle carne a este esqueleto. Aquí te dejo el checklist de LO QUE VAMOS A HACER en el próximo tutorial:

❓ ¿Te quedaste con ganas de más? ¡Perfecto! Eso significa que estás aprendiendo. En el próximo tutorial flask vamos a convertir esta “cáscara vacía” en una aplicación que SÍ guarda y muestra datos.

Mientras tanto… ¿por qué no pruebas modificar el HTML para hacerlo más bonito con CSS? ¡Experimenta! Es la mejor forma de aprender. 🎨