WhatsApp

  
Desarrollando Tu Primera Aplicación Web con Flask

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.



Compartir

Alexandra Maya 22 septiembre, 2023
Compartir


Iniciar sesión dejar un comentario

  
Creación de una Aplicación Web con Flask y Angular