DEV Community

loading...
Cover image for Tu primer Web App con Flask: Parte 4

Tu primer Web App con Flask: Parte 4

gareisdev profile image Leonel G. ・4 min read

Hey! Estamos devuelta con otra entrega de 'Tu primer web app con Flask".

Hoy vamos a estar estructurando un poco mejor nuestro proyecto. Y para esto, vamos a estar viendo un concepto conocido como 'aplicaciones modulares' con la ayuda de Blueprints.
Empezamos!

Que son las aplicaciones modulares?

La programación modular es un paradigma que consiste en romper o dividir una aplicación (o programa, como quieras llamarle) en módulos, con el fin de incrementar su mantenimiento y legibilidad.

Por el momento, nuestra aplicación es pequeña, es decir, no contamos con miles y miles de lineas de código. Pero a medida que avances en otros proyectos (con python u otros lenguajes), te vas a dar cuenta que el mas mínimo cambio que quieras implementar, te llevaría horas. Esto se debe a que:

  1. Si la funcionalidad existe, hay que encontrar donde se encuentra. Sino, se procede a crearla.
  2. Evaluar las dependencias existentes. Si estas por editar algo, es muy probable que dependa de otras cosas (clases, funciones, recursos, etc.).
  3. Es probable que debas reescribir otras partes del código para adaptar lo que querés agregar. Esto nos devuelve al paso 1.

Cuando nuestra aplicación se encuentra modularizada, es mas sencillo implementar cambios ya que las cosas están organizadas y separadas. Es distinto buscar una función dentro de un archivo con 10000 lineas, a buscarla en un archivo de un directorio perteneciente a un modulo especifico.

Dejame que te lo explique de otra forma si lo anterior no te cierra:

Hasta ahora, solo teníamos instrucciones referentes a la gestión de alumnos. Imagina que ahora necesitamos manejar el inicio de sesiones y los registros de nuevos usuarios.

Podríamos seguir volcando todas las rutas y vistas dentro del archivo app.py, o modularizar la aplicación.

Podríamos tener módulos como:

  • alumnos: todo el código relacionado a operaciones de alumnos
  • usuarios: todo el código relacionado a operaciones de login, logout y registro.

Acá es donde entra en juego Blueprints

Blueprints

Un objeto de Blueprint trabaja de forma similar a como trabajábamos con app en app.py, pero sin ser una aplicación nueva. Mas bien, es una forma de extender esta misma.

Reestructuración

Para poder poner en marcha esto, debemos de hacer una serie de cambios.
Vamos a crear dos módulos:

  1. ModuloPrincipal: sera el modulo que contendrá la configuración inicial del proyecto, conexión a la base de datos, etc.
  2. ModuloAlumnos: sera el modulo encargado de las operaciones CRUD de Alumnos.

ModuloPrincipal

Creamos un directorio en la raíz del proyecto llamado ModuloPrincial cuyo contenido sera:

ModuloPrincipal/config.py

from flask import Flask
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.secret_key = 'TU SUPER CLAVE VA ACÁ'
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///alumnos.sqlite3'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False

db = SQLAlchemy(app)

Enter fullscreen mode Exit fullscreen mode

Ahora creamos un directorio dentro de ModuloPrincial al que llamaremos 'templates'. Dentro, colocamos base.html e index.html

Para que este directorio sea tomado en cuenta por python como un paquete, debemos incorporar un archivo vacío llamado __init__.py

Debería quedarnos así:

ModuloPrincipal
├── config.py
├── __init__.py
└── templates
    ├── base.html
    └── index.html
Enter fullscreen mode Exit fullscreen mode

ModuloAlumnos

Ahora creamos otro directorio en la raíz del proyecto, al que llamaremos 'ModuloAlumnos'.

Igual que en el caso de ModuloPrincipal, debemos agregar un __init__.py.

Si recordás de capitulos anteriores, en app.py habíamos definido el modelo de Alumnos. Ese modelo, lo vamos a mover a un nuevo archivo llamado AlumnosModelo dentro del modulo en cuestión.

Este es el contenido:

from ModuloPrincipal.config import db

class Alumno(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    nombre = db.Column(db.String(80), unique=True, nullable=False)
    email = db.Column(db.String(120), unique=True, nullable=False)
    calificacion = db.Column(db.Integer)

    def __repr__(self):
        return '<Alumno %r>' % self.nombre
Enter fullscreen mode Exit fullscreen mode

A continuación, movemos a ModuloAlumnos el FormularioAlumnos.

Por ultimo, creamos un archivo Alumnos.py en el que definiremos las rutas, las vistas, etc.

Debería verse así

from flask import Blueprint, render_template, redirect, request, url_for
from .FormularioAlumnos import FormularioAlumnos
from .AlumnosModelo import Alumno
from ModuloPrincipal.config import db

alumnos_modulo = Blueprint('alumno_bp', __name__, template_folder='templates')

@alumnos_modulo.route('/')
def index():
    alumnos = Alumno.query.all()
    return render_template('index.html', alumnos=alumnos)

@alumnos_modulo.route('/registro/', methods=['GET', 'POST'])
def registro():
    if request.method == 'POST':

        formulario = FormularioAlumnos(request.form)

        alumno = Alumno(
            nombre = formulario.nombre.data,
            calificacion=formulario.calificacion.data,
            email=formulario.email.data,
        )

        db.session.add(alumno)
        db.session.commit()

        return redirect(url_for('alumno_bp.index'))
    else:
        formulario = FormularioAlumnos()
    return render_template('registro_alumno.html', formulario=formulario)

Enter fullscreen mode Exit fullscreen mode

En este archivo podemos notar unos cambios notables.

  1. Nos estamos trayendo 'db' de ModuloPrincial.
  2. Las rutas las estamos definiendo desde un objeto Blueprint y no desde un app.
  3. En url_for indicamos que se trabaje con el index del alumnos_bp.

La organización de este modulo finalmente, debería verse así:

ModuloAlumnos
├── AlumnosModelo.py
├── Alumnos.py
├── FormularioAlumnos.py
├── __init__.py
└── templates
    └── registro_alumno.html 
Enter fullscreen mode Exit fullscreen mode

Esto está tomando forma.

Registrando el Blueprint

Para que esto realmente funcione, debemos de decirle a nuestra app que existe un blueprint y que debe registrarlo.

Nuestro app.py:

from ModuloPrincipal.config import app, db
from ModuloAlumnos.Alumnos import alumnos_modulo


app.register_blueprint(alumnos_modulo)

if __name__ == '__main__':
    db.create_all()
    app.run(port=3000, debug=True)
Enter fullscreen mode Exit fullscreen mode

Ahora si lanzamos la aplicación, veremos que todo sigue funcionando con normalidad. Sin embargo, ahora los cambios que decidamos implementar, serán una tarea mas sencilla.


Felicidades! Hoy aprendiste a modularizar una app de Flask con Blueprint.


Si queres darle una mirada al codigo, te dejo el link acá

Discussion (0)

pic
Editor guide