Introducción
Flask es un microframework de Python diseñado para desarrollar aplicaciones web de manera rápida y sencilla. Flask ofrece un conjunto básico de herramientas y te permite agregar funcionalidades adicionales según sea necesario.
En este blog, te guiaremos paso a paso en la creación de tu primera aplicación web utilizando Flask.
Configuración del Entorno de Desarrollo
Instalación de Python
Antes de comenzar a trabajar con Flask, necesitarás tener Python instalado en tu sistema.
Si tu sistema operativo es Windows uedes descargar la última versión de Python desde el sitio web oficial y seguir las instrucciones de instalación.
Si estas trabajando con Linux ejecuta los siguientes comandos en la terminal:
sudo apt update
sudo apt install python3.10
Puedes instalar la versión de Python que prefieras y modificar el comando para instalar esa versión.
Configuración de un Entorno Virtual
Primero crea una carpeta en la que trabajarás tu proyecto.
Para mantener tu proyecto aislado y gestionar sus dependencias de manera efectiva, es una buena práctica utilizar un entorno virtual. Sigue estos pasos para configurar uno:
Instalar virtualenv
Si aún no tienes instalado virtualenv, puedes hacerlo ejecutando el siguiente comando en la terminal:
pip install virtualenv
Crear un entorno virtual
En el directorio de tu proyecto, crea un nuevo entorno virtual. Ejecuta el siguiente comando dependiendo de tu sistema operativo.
- Windows
python -m venv .venv
- Linux
sudo apt install python3.10-venv
python3 -m venv .venv
Puedes nombrar tu entorno virtual como tu decidas, en este caso se llama .venv, pero lo puedes cambiar por otro.
Activar el entorno virtual
Dependiendo de tu sistema operativo, la forma de activar el entorno virtual será diferente:
- Windows:
.\.venv\Scripts\activate
- Linux:
source .venv/bin/activate
Una vez activado el entorno virtual, cualquier paquete que instales con pip será específico de tu proyecto, lo que evita conflictos con otras aplicaciones Python en tu sistema.
Instalación de Flask
Puedes agregar Flask a tu proyecto utilizando el gestor de paquetes pip. Abre una terminal y ejecuta el siguiente comando:
pip install Flask
Creando tu Primer Proyecto en Flask
Con Flask instalado y tu entorno virtual configurado, estás listo para comenzar a construir tu primera aplicación web. Empecemos por crear una estructura básica de proyecto.
Iniciando un Nuevo Proyecto Flask
Dentro de la carpeta que creaste para tu proyecto, crea un archivo llamado app.py, que será el punto de entrada de tu aplicación. Luego, puedes definir tu aplicación Flask:
from flask import Flask
app = Flask(__name__)
if __name__ == '__main__':
app.run(debug=True)
Crea la ruta de inicio
Agrega una ruta simple y una vista a tu aplicación:
from flask import Flask
app = Flask(__name__)
@app.route('/') def inicio(): return '¡Hola, mundo!'
if __name__ == '__main__':
app.run(debug=True)
En este ejemplo, hemos utilizado una variable message que será reemplazada por un valor dinámico desde la aplicación Flask.
Tu aplicación Flask está ahora lista para recibir solicitudes web.
Trabajando con Templates
Uno de los aspectos fundamentales de cualquier aplicación web es la presentación visual. Flask permite utilizar plantillas HTML para crear páginas web dinámicas.
Uso de Plantillas HTML
Crea una carpeta llamada templates en tu directorio de proyecto, Flask buscará automáticamente las plantillas en esta ubicación.
Dentro de esta carpeta, puedes crear un archivo HTML llamado index.html con un contenido básico:
<!DOCTYPE html>
<html>
<head>
<title>Mi Aplicación Flask</title>
</head>
<body>
</body>
</html>
Ejecuta tu aplicación
Si accedes a la URL http://localhost:5000 verás el mensaje de Hola Mundo. También puedes ejecutar el siguiente comando:
python3 app.py
En el navegador observarás este resultado:
Renderizar la plantilla desde Flask
Ahora, modificaremos un poco el código.
En tu vista Flask, puedes renderizar esta plantilla y pasar datos a ella. Modifica la función inicio en tu archivo app.py de la siguiente manera:
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def hello_world():
message = 'Mi aplicación de flask'
return render_template('index.html', message=message)
if __name__ == '__main__':
app.run(debug=True)
También en tu archivo index.html modifica tu código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Aplicación Flask</title>
</head>
<body>
<h1>{{ message }}</h1><br>
</body>
</html>
La función render_template toma el nombre de la plantilla y cualquier número de variables que desees pasar a la plantilla. En este caso, hemos pasado la variable message que contiene nuestro mensaje.
Vuelve a ejecutar tu aplicación y se mostrará el mensaje.
Definiendo Rutas y Vistas Básicas
Agregar una nueva ruta
En tu archivo app.py agrega una nueva ruta utilizando el decorador @app.route(). Por ejemplo, para crear una ruta /saludo, puedes hacer lo siguiente:
@app.route('/saludo')
def saludo():
message = 'Hola'
return render_template('saludo.html', message=message)
Modifica el archivo index.html para agregar un enlace que envíe a la vista de saludo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Aplicación Flask</title>
</head>
<body>
<h1>{{ message }}</h1><br>
<a href="{{ url_for('saludo') }}"> Saludo </a>
</body>
</html>
Crea un nuevo template
Crea un archivo html llamado saludo.html dentro de la carpeta templates y escribe el siguiente código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Saludo</title>
</head>
<body>
<p>{{ message }}</p>
</body>
</html>
Ejecuta tu aplicación
Ahora en tu vista de inicio se mostrará el enlace a la vista de saludo:
Al selccionarlo se abrirá la siguente vista con el mensaje
Con estos pasos, has aprendido a crear una aplicación sencilla y cómo utilizar plantillas HTML en Flask. Puedes seguir desarrollando tu aplicación web añadiendo más rutas, vistas y plantillas para diferentes partes de tu aplicación web y personalizar la respuesta que se muestra a los usuarios en función de esas rutas.