Indice del contenido
Bienvenidos a un nuevo post, 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 crear nuestra primer aplicación en Flask modificando nuestro proyecto.
La verdad es que nuestro controlador 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».
Desarrollando nuestra primer aplicación en flask
Venga que te mata la curiosidad!!. Como primer aplicación en flask vamos a desarrollar una red social nueva y muy novedosa!.
Que no, que no!. Que es broma!.
Haremos un sitio web sencillo (HTML puro) que nos permitirá almacenar datos de personas como si se tratará de un directorio telefónico y para ello usaremos Diccionarios como si fuera nuestra base de datos. De esta forma podré explicar el funcionamiento de los tres elementos de la arquitectura Modelo – Vista – Controlador. Y tu podrás comenzar a realizar ejercicios que iré dejándote posteriormente.
Así el modelo será el encargado mediante un conjunto de métodos CRUD de crear, leer, actualizar y borrar datos de nuestra base de datos que será el diccionario.
Y nuestra vista diseñada en HTML será la encargada de recibir los datos de entrada al momento de añadir un «contacto o persona al directorio» y mostrárnoslo cuando lo deseemos.
Nuestro controlador se encargará de hacer de intermediario entre la vista y el modelo interpretando las solicitudes del usuario.
Simple y sencillo, va a quedar espectacular y lo harás en un santiamén ya verás!. Así que manos a la obra!!
Nuestra primer aplicación en flask – El controlador
Abrimos nuestro proyecto en VSCode o en tu editor favorito:
Recordarás que en la entrada anterior estuvimos modificando el controlador de nuestra aplicación añadiendo rutas. Pronto haremos uso de esas rutas, pero primero debemos crear lo que se mostrará en esas rutas. Pero lo teníamos así:
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
Crear las «vistas» de nuestra primer aplicación en Flask
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:
- Ver
- Editar
- Eliminar
Para ello debemos modificar la tabla, más especificamente 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 abrá 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 almacenanará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 con el controlador usando libería Request
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 linea 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
Porque sí!, 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.
No solo eso la librería request permite identificar el Tipo de solicitud que un cliente hace a nuestra aplicación. Por ejemplo si nuestro cliente quiere «visualizar» el sitio web, o quiere «enviar datos» a nuestro sitio web; 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 igualmetne dejaré un diagrama donde intentaré explicar como utilizamos el objeto Request para (en este caso) detectar el tipo de solicitud del cliente o usuario de nmar. Así mediante un condicional (IF) hacemos uso del objeto request y le decimos al interprete, si es una solicitud de envío de datos (POST) haz determinada acción (Consulta al modelo, etc), y si no es (ELSE) entonces se trata de una solicitud de visualización (GET), haz esto otro (Mostrar el contenido del sitio, template HTML). Se tratará de un condicional similar al siguiente:
(IF)Si el Método del objeto Request es POST, entonces:
Comprueba si los datos son correctos con el modelo.
Si lo son envía a la base de datos.
Muestra la página ‘Exito al registrar tus datos’
(ELSE)Si el Método del objeto Request no es POST:
#Si no es post, entonces debe ser GET
Muestra la página ‘Formulario’
Puedes leer dicho post si aún no has comprendido o deseas profundizar.
De esta manera en nuestra aplicación intentaremos seguir algo similar al siguiente diagrama:
- El cliente realiza una solicitud GET desde su navegador pretendiendo ver nuestra página de inicio.
- El controlador mediante el método del objeto Request interpreta que se trata de una solicitud GET y no POST, por ende entra dentro del ELSE del condicional y simplemente carga un archivo HTML que dentro tiene un formulario (es decir una serie de elementos donde el usuario podrá ingresar datos).
- Se le «sirve» en bandeja de plata nuestro template HTML llamado por ejemplo «formulario.html«..
- El cliente completa este formulario añadiendo sus datos y entonces da clic en el boton por ejemplo «Registrarse» entonces este botón está asociado a la solicitud POST, es decir, nuestro cliente esta solicitando enviarnos sus datos.
- El servidor al tratarse de una solicitud POST ingresa dentro del bloque del primer IF y por ende deberá consultar la validez de los datos y compararlos con el modelo, etc
- Agregarlos a la base de datos, etc.
- La base de datos responde como resultado que «fueron agregados correctamente».
- Continua nuestro controlador dentro del bloque IF entonces siguiendo el flujo como los datos se agregaron correctamente..
- Sirve en bandeja de plata el template que indicará que los datos han sido registrados con exito llamado «exito.html«.
-¿La aplicación funciona algo así como un bucle de servicio? . Cuando le piden da.. Completan lo que les dió y les envían otra cosa..
Claro! Como un servicio.. Nos está sirviendo a nuestras solicitudes siempre y cuando respetemos las reglas que nos impone..
Podría asemejarse a ir a comer a un restaurant:
-Vas como un GET..
-Te sirven el Menu (la vista)
-Elijes un elemento y envías una solicitud POST, porque le envías la información de lo que quieres, por ejemplo el elemento 3 del menu «Sabrozo pollo al espiedo con papas».
Te sirven tu plato nuevamente.. Otra vista, pero mas deliciosa xD
Cuando tu te registras en un sitio web, eso es aproximadamente lo que ocurre detrás del sitio web con el que tu estás interactuando!.
Utilizando el objeto Request para procesar solicitudes
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 argumentosCon eso ya estaremos importando Request, ahora será momento de utilizar el método de este objeto en nuestras rutas. Pero cierto que es debemos indicar dos cosas, en la ruta y en la función que ejecuta al ser visitada:
- En el método «route» del objeto app, debemos indicar dentro de los parentesis los tipos de solicitudes que admite esa ruta («Argumentos para los parámetros de «route«). Y esto es importante, ya que no todas las direcciones url o rutas de nuestro sitio necesitarán procesar solicitudes POST, algunas quizás solo podrían tener texto informativo e imágenes y no necesitan procesar datos que envíe el usuario. ATENCIÓN que si permites solicitudes POST en rutas que no la procesan adecuadamente podrías estar incurriendo en un grave error que podría convertirse en una vulnerabilidad.
- Dentro de la función, debemos tratar de reconocer cual de las solicitudes que hemos permitido en el método «route» está enviando nuestro cliente. Si permitimos GET y POST, ¿Cúal de las dos no está enviando?. Entonces procesamos determinado bloque de código si es una u otra. Para ello utilizamos un condicional (IF/ELSE) y el método «method» de el objeto Request.. Algo como (If request.method == ‘POST‘)
Vamos con el primer paso, que es que nuestra «url o ruta» acepte solicitudes GET y POST, para ello modificamos nuestras rutas así:
@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
return 'Esta es la página de inicio!' #Retorno de la función
@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ónComo ves dentro del parentisis de nuestro método «routes» añadimos los argumentos en forma de lista con las solicitudes que admite.. Siempre deben ser pasadas en este formato.
Ahora nuestra primer ruta es decir la de la página de inicio (‘/’) acepta ambas solicitudes. Sin embargo la página agradecimiento no lo hace.. ¿Por qué la de inicio si y la otra no?
Porque en la de inicio vamos a aceptar solicitudes POST cuando el cliente o usuario desee ingresar, actualizar o eliminar una nueva persona a la agenda o directorio. En caso contrario que solo se tratara de visualizar las personas, el método POST no nos sería necesario incluirlo y nos bastaría con aceptar solo GET.
Es un error TREMENDO y HORRIBLE aceptar solicitudes GET y POST solo porque no se comprende la diferencia entre una y otra o «por las dudas si luego necesito aceptar un POST«.
Nunca, pero nunca jamás debes aceptar solicitudes POST si no es estrictamente necesario procesar datos que nos envía el usuario y serán debidamente comprobados.
En algún post explicaré la vulnerabilidad que representa tanto incluir POST «porque si» como no COMPROBAR y VALIDAR los tipos de datos que nos envian.. Pueden enviarte código (entre otras cosas), en ves de texto y tu servidor lo estaría aceptando.
Cómo ir al restaurant desnudo pretendiendo a los gritos «Dame el jodido pollo al espiedo!. ¿Tu crees que el gerente del restaurant aceptará que comas allí?. ¿Entonces porque tu servidor si lo haría?
Los datos que serán aceptados mediante solicitud POST deben ser comprobados y validados, sino no se deben añadir a la base de datos, ni mostrar, ni nada.. Simplemente se deberá disparar un error o advertencia.
Ahora vamos al paso 2 que será crear un condicional para comprobar que tipo de solicitud se nos está enviando y en base a ello ejecutar un bloque de código u otro. Fíjate:
@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 'Esta es la página de inicio!' #Retorno de la función
Utilizando «request.method» con el operador de igualdad comprobamos si se trata de una solicitud POST, si ese es el caso se ejecutará el bloque dentro del IF, que en este caso solo he colocado «pass» porque aún no vamos a trabajar en este bloque.
En caso que no se cumpla el IF saltará al ELSE ya que no se trata de una solicitud POST, obviamente entonces se tratará de una solicitud GET, es decir, una solicitud de vista y por tanto se cargará el return que definimos anteriormente.. Pero aún no estamos mostrando nuestro template HTML «index.html» que contiene las tablas que creamos anteriormente. ¿Recuerdas?
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 parametros 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.
Si has probado tu aplicación recargando el sitio web local: 127.0.0.1:5000 habrás visto que aún recibimos el texto «Esta es la página de inicio»
Porque definimos en nuestro controlador que al ser una solicitud GET simplemente la función retornará una cadena de texto.
Ahora para utilizar la función debemos importarla al igual que hicimos con Request. Y finalmente pasar como argumento para el parametro del return de la función «inicio» la función render_template con la dirección de nuestro template como argumento. Si, se ha liado un poco pero cuando lo veas lo entederás mejor:
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 argumentosEn la primer línea importamos render_template de Flask. Y en línea 11 añadimos al return dicha función con la dirección de nuestro template como argumento.
Bien si recargas tu sitio web 127.0.0.1:5000 y has ejecutado controlador.py como cualquier archivo Python sin errores, verás en el navegador nuestra plantilla:
Conclusión:
- 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 primer aplicación en flask y la conectamos a nuestro controlador.py.
Así que eso es todo por ahora, ya tenemos conectado el controlador a nuestro template HTML. En la siguiente entrada vamos a crear el modelo y nuestra base de datos utilizando diccionarios y vamos a conectarlo también al controlador para poner en funcionamiento nuestra sencilla aplicación.
| Entrada anterior! | Siguiente entrada! |
Genio,sigo tu curso y me encanta.
En esta ocasión me topé con un error que hacía que mi controlador soltase un error de Jinja2 en el cual me informaba de que no había encontrado el archivo «index.html» y el fallo solo se daba en la conexión entre ese archivo y el controlador. Lo pude arreglar agregando en la línea 2 la carpeta en la que está ubicado el archivo de modo que te queda:
app = Flask (__name__,template_folder=’Templates’)
«Templates» es el nombre de la carpeta donde tengo «index.html» y se ve que en mi ocasión es lo que solucionó el problema.
Muchas gracias por tu trabajo,estoy aprendiendo mucho.
Hola alexis definitivamente a veces ocurren estos errores, y cuando sucede lo importante es poder interpretarlo y volver a indicar la ubicación de ese archivo, librería o carpeta que no encuentra. Me alegra que te sea de ayuda y aprendas junto a mí! Un abrazo grande!