Introducción

Hasta ahora, nuestra aplicación Flask tiene los siguientes elementos (figura del lado derecho):

1. Un archivo application.py que contiene tres bloques de información. Primero, un bloque donde importamos las funcionalidades que necesitamos para construir nuestra aplicación y donde definimos nuestra aplicación Flask. Segundo, un bloque de información donde definimos nuestras rutas y las funciones asociadas con esas rutas. Tercero, un bloque de información donde ejecutamos nuestra aplicación.
2. Una carpeta de plantillas donde colocamos todos los archivos HTML de nuestra aplicación.
3. Una carpeta estática donde colocamos todos los archivos CSS de nuestra aplicación, así como las imágenes, iconos, currículos, ensayos, etcétera.

Esta forma de organizar la aplicación no es muy eficiente porque en el archivo application.py, estamos colocando rutas con funciones que hacen cosas muy diferentes. Además, una vez que el proyecto crece en complejidad, el número de rutas crece sustancialmente, y es muy difícil organizar esas rutas en un solo archivo application.py. Además, si añadimos más elementos a nuestra aplicación, como formularios o bases de datos, la arquitectura del software se vuelve aún más compleja. Por lo tanto, necesitamos diseñar una arquitectura de software eficiente. Flask Blueprint es la herramienta implementada en Flask para lograr ese objetivo.

Arquitectura de la aplicación - Antes de Blueprint -

C:.
│   application.py
│   requirements.txt
│   
├───static
│   │   light_talk.css
│   │   home.css
│   │   layout.css
│   │   business.css
│   │   
│   └───icons
│           home.svg
│           light_talk.svg
│           business1.svg
│           business2.svg
│
└───templates
        light_talk.html
        home.html
        layout.html
        business.html
                

¿Qué es un Blueprint?

Cada Flask Blueprint es un objeto que funciona de manera muy similar a una aplicación Flask. Ambos pueden tener recursos, como archivos estáticos, plantillas y vistas que están asociados con rutas.

Sin embargo, un Flask Blueprint no es realmente una aplicación. Necesita ser registrado en una aplicación antes de que puedas ejecutarlo. Cuando registras un Flask Blueprint en una aplicación, estás extendiendo la aplicación con los contenidos del Blueprint.

Este es el concepto clave detrás de cualquier Flask Blueprint. Registran operaciones para ser ejecutadas más tarde cuando los registras en una aplicación. Por ejemplo, cuando asocias una vista a una ruta en un Flask Blueprint, registra esta asociación para que se haga más tarde en la aplicación cuando se registre el Blueprint.

¿Cómo construir una aplicación Flask básica usando Flask Blueprints?

Vamos a usar Flask Blueprints para mejorar la arquitectura de nuestra aplicación (figura del lado derecho). Es importante notar que hay muchas maneras de definir la arquitectura de nuestra aplicación utilizando Flask Blueprint. Te enseñaré una manera que considero simple, fácil y eficiente. Sin embargo, hay muchas formas de hacerlo, y te animo a leer los enlaces que coloqué al principio de la sección para obtener más información. Así, puedes decidir sobre la arquitectura que deseas crear para tu aplicación.

Vamos a seguir cuatro pasos para reestructurar la arquitectura de software de nuestra aplicación:

1. Crear un Flask Blueprint. Creamos tres carpetas (home, business y light_talk). Dentro de cada carpeta, creamos dos archivos .py (__init__.py y routes.py).
   
   El archivo __init__.py consiste en un único elemento #. Tan pronto como introducimos un archivo __init__.py en una carpeta, esa carpeta se convierte en un paquete en Python, es decir, vamos a organizar nuestra aplicación utilizando paquetes de Python.

Arquitectura de la aplicación - Después de Blueprint -

C:.
│   application.py
│
└───capp
    │   __init__.py
    │
    ├───light_talk
    │   │   routes.py
    │   └───__init__.py
    │                       
    ├───home
    │   │   routes.py
    │   └───__init__.py
    │
    ├───business
    │   │   routes.py
    │   └───__init__.py
    │
    ├───static
    │   │   light_talk.css
    │   │   home.css
    │   │   layout.css
    │   │   business.css
    │   │
    │   └───icons
    │           home.svg
    │           light_talk.svg
    │           business.svg
    │
    └───templates
            light_talk.html
            home.html
            layout.html
            business.html
                

Sesión y clave secreta

Si has configurado Flask.secret_key (o lo ha configurado desde SECRET_KEY), puede usar sesiones en aplicaciones Flask. Una sesión hace posible recordar información de una solicitud a otra. La forma en que Flask hace esto es mediante una cookie firmada. El usuario puede ver el contenido de la sesión, pero no puede modificarlo a menos que conozca la clave secreta, por lo que asegúrate de que sea algo complejo e imposible de adivinar.

La clave secreta es útil para proteger nuestra aplicación de ataques de Cross Site Request Forgery. El Cross-Site Request Forgery (CSRF) es un ataque que obliga a los usuarios autenticados a enviar una solicitud a una aplicación web en la que están autenticados. Los ataques CSRF explotan la confianza que una aplicación web tiene en un usuario autenticado. (Por el contrario, los ataques de cross-site scripting (XSS) explotan la confianza que un usuario tiene en una aplicación web en particular). Un ataque CSRF explota una vulnerabilidad en una aplicación web si no puede diferenciar entre una solicitud generada por un usuario individual y una solicitud generada por un usuario sin su consentimiento.

Para obtener más información sobre sesiones, claves secretas y ataques de Cross Site Request Forgery, consulte:

Cómo crear una clave secreta aleatoria

1. Abre un terminal en Visual Studio.


2. En el terminal de Visual Studio, escribe python y luego verás tres flechas que indican que estás en un terminal de Python >>>


3. En el terminal de Python, escribe: import os


4. Escribe nuevamente: os.urandom(24).hex()


5. Obtendrás un número aleatorio que puede ser su clave secreta: application.config['SECRET_KEY'] = 'tu clave secreta' Debemos colocar esa línea de código en el archivo __init__.py donde definimos nuestra aplicación flask.


6. Puedes cerrar el terminal de Python escribiendo quit().


7. Para proteger nuestra clave secreta, cuando implementemos nuestra aplicación en AWS, protegeremos la clave utilizando una variable de entorno.

Creación de formularios

Para crear WTForms, procedemos en tres pasos diferentes:

1. Necesitamos instalar algunos paquetes para usar WTForms.
   1. pip install flask-wtf
   2. pip install email-validator


2. Necesitamos importar algunos paquetes y algunos validadores.


3. Creamos una clase llamada RegistrationForm con cuatro campos y un botón de envío. Para cada campo, creamos una etiqueta e introducimos algunos validadores para garantizar que el usuario introduzca el tipo de información correcto. En la sección de mensajes de notificación, mostraremos algunos mensajes al usuario si la información introducida no cumple con los requisitos de los validadores.

Creación de un formulario

    from flask_wtf import FlaskForm
    from wtforms import StringField, PasswordField, SubmitField
    from wtforms.validators import DataRequired, Length, Email, EqualTo   
    
    class RegistrationForm(FlaskForm):
        username = StringField('Nombre de usuario', 
                        validators=[DataRequired(), Length(min=2, max=30)])
        email = StringField('Correo electrónico',
                        validators=[DataRequired(), Email()])
        password = PasswordField('Contraseña', validators=[DataRequired()])
        confirm_password = PasswordField('Confirmar Contraseña',
                        validators=[DataRequired(), EqualTo('password')])
        submit = SubmitField('Registrarse')
    

2. Necesitamos importar la clase RegistrationForm que hemos creado previamente. Esa clase se encuentra en la carpeta capp, el paquete users en el archivo forms.py.


3. Cuando definimos la ruta, necesitamos seguir cuatro pasos:
   1. Necesitamos crear una ruta para el formulario de registro. Esa ruta no solo acepta solicitudes GET, sino también solicitudes POST, ya que el usuario introducirá algunos datos en el formulario.
   2. En la función register(), necesitamos definir el form= RegistrationForm().
   3. Si el usuario no valida el formulario, mostraremos un archivo register.html donde el usuario introduce su información. Definimos ese archivo register.html en la siguiente sección.
   4. Si el usuario valida el formulario haciendo clic en el botón de envío, redirigimos al usuario a la página de inicio.

Validación de un formulario

    from flask import render_template, Blueprint, redirect, flash, url_for
    from capp.users.forms import RegistrationForm
    
    users=Blueprint('users',__name__)
    
    @users.route('/register', methods=['GET','POST'])
    def register():
        form = RegistrationForm()
        if form.validate_on_submit():
            return redirect(url_for('home.home_home'))
        return render_template('users/register.html', title='register', form=form)
    

En la sección anterior aprendimos cómo crear y validar un WTForm. En esta sección, aprenderemos cómo conectar el formulario con el archivo register.html donde el usuario puede completar el formulario de registro. Procedemos en diferentes pasos:

1. Definimos el formulario, y debemos introducir el método POST que permite al usuario enviar información.


2. Para proteger el formulario, necesitamos introducir el código: {{ form.hidden_tag() }}


3. Definimos un fieldset donde creamos diferentes campos que permiten al usuario interactuar con el formulario que creamos en la sección anterior.

Conectar formularios con plantillas HTML

    <form method="POST" action="">
    {{ form.hidden_tag() }}
    <fieldset class="form-group">
       <legend class="border-bottom mb-4">Únete hoy</legend>
       <div class="form-group">
          {{ form.username.label(class="form-control-label") }}
          {{ form.username(class="form-control form-control-lg") }}
       </div>
    </form>
    

Mensajes Flash.

Los enlaces al video de YouTube y la cuenta de GitHub para esta sección están abajo:

Vamos a mostrar dos tipos de mensajes. Primero, en el archivo register.html, mostramos mensajes cuando el usuario introduce información que no cumple con los requisitos de validación introducidos en el archivo forms.py. Segundo, en el archivo home.html mostramos un mensaje cuando el usuario registra su información correctamente.

Mensajes en el archivo register.html. Usando Jinja, introducimos una sentencia if-else que nos ayuda a gestionar los mensajes de error.

Si el usuario introduce alguna información en el campo de nombre de usuario que viola los requisitos de validación introducidos en el archivo forms.py, recopilamos esos errores y los mostramos dentro de un contenedor con la clase de bootstrap “invalid-feedback”. De lo contrario, no mostramos ningún mensaje de error.

Mensajes en el archivo home.html. Usando Jinja, introducimos una sentencia with, una if y una for statement en nuestro archivo home.html para mostrar información al usuario cuando se registra en la aplicación.

En esas sentencias, tomamos los mensajes flash de la ruta y los mostramos teniendo en cuenta la categoría del mensaje y creando un bootstrap específico dependiendo de la categoría del mensaje.

Mensajes en el archivo register.html

    <div class="form-group">
        {{ form.username.label(class="form-control-label") }}
        {% if form.username.errors %}
            {{ form.username(class="form-control form-control-lg is-invalid") }}
            <div class="invalid-feedback">
                {% for error in form.username.errors %}
                    <span>{{ error }}</span>
                {% endfor %}
            </div>
        {% else %}
            {{ form.username(class="form-control form-control-lg") }}
        {% endif %}
    </div>  
    

Mensajes en el archivo home.html

    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                <div class="alert alert-{{ category }}">
                    {{ message }}
                </div> 
            {% endfor %}
        {% endif %}
    {% endwith %}  
    

Despliegue de nuestra aplicación en AWS

El enlace al video de YouTube está a continuación:

Para desplegar nuestra aplicación en AWS, necesitamos considerar dos cosas:

1. En el archivo requirements.txt, debemos agregar todos los paquetes que hemos utilizado en este capítulo, para que el servidor pueda instalar los mismos paquetes.


2. Necesitamos proteger nuestra clave secreta utilizando variables de entorno. Por favor, mira el video en el que muestro los cambios que deben introducirse en el archivo __init__.py antes de colocar ese archivo en GitHub y los cambios que necesitamos introducir en AWS para crear una variable de entorno que proteja nuestra clave secreta.

¿Qué son las variables de entorno? Las variables de entorno son valores predeterminados que generalmente se utilizan para proporcionar la capacidad de configurar un valor en tu código desde fuera de tu aplicación.

¿Cómo puedo mantener seguros estos archivos? Por ejemplo, las claves de AWS son un recurso valioso. Existen bots cuyo único propósito es tratar de escanear GitHub en busca de claves. Si alguien encuentra una clave de AWS, podría usarla para acceder a recursos, como ejecutar una operación de minería de bitcoins a tu costa. Esto no es para asustarte, es para que estés consciente y evites que tus claves sean comprometidas.

La información sobre variables de entorno ha sido tomada del siguiente enlace: