Cómo desarrollar una app CRUD con Flask?

33min
Descripción general
Este tutorial te guiará a través de la construcción de una aplicación CRUD (crear, leer, actualizar, eliminar) utilizando Flask. 
Integraremos Back4app como nuestro servicio backend para simplificar la gestión de datos. Aprenderás a configurar un proyecto de Back4app, diseñar una estructura de datos flexible e implementar funcionalidades CRUD utilizando Flask.
En este recorrido, primero crearás un proyecto de Back4app llamado Basic-CRUD-App-Flask que ofrece una solución robusta de almacenamiento de datos no relacional. 
Definirás tu esquema de datos con clases y campos, ya sea manualmente o utilizando el Agente de IA de Back4app.
Después de configurar tu backend con la interfaz de administración de Back4app, conectarás tu aplicación Flask al servicio a través de llamadas a la API REST. Este tutorial también cubre la gestión de acceso seguro para tus datos.
Al final, tendrás una aplicación Flask lista para producción capaz de realizar operaciones CRUD junto con autenticación de usuario segura y manejo de datos.
Lo Que Aprenderás
Cómo crear una aplicación CRUD basada en Flask con un backend no relacional.
Cómo estructurar tu backend en Back4app e integrarlo con un proyecto Flask.
Cómo utilizar la interfaz de administración de Back4app para gestionar operaciones CRUD sin esfuerzo.
Cómo desplegar tu aplicación Flask, incluyendo el uso de Docker para la contenedorización.
﻿
Requisitos Previos
Antes de comenzar, asegúrate de tener:
Una cuenta de Back4app con un proyecto configurado.
¿Necesitas ayuda? Consulta Introducción a Back4app.
Un entorno de desarrollo de Python configurado.
Usa un editor como VSCode o PyCharm e instala Python 3.8 (o posterior).
Conocimientos básicos de Python, Flask y APIs REST.
Consulta la documentación de Python si es necesario.
﻿
Paso 1 – Configuración Inicial del Proyecto
Creando Tu Proyecto en Back4app
Inicia sesión en tu cuenta de Back4app.
Haz clic en “Nueva Aplicación” desde tu panel de control.
Ingresa el nombre del proyecto: Basic-CRUD-App-Flask y completa el proceso de configuración.
Crear Nuevo Proyecto
﻿
Después de la creación, tu proyecto aparece en el panel de control, sirviendo como base para la configuración de tu backend.
﻿
Paso 2 – Construyendo el Esquema de Datos
Definiendo Tus Estructuras de Datos
Para esta aplicación, establecerás varias clases en tu proyecto de Back4app. A continuación se presentan ejemplos de las clases principales y sus campos esenciales para las operaciones CRUD.
1. Clase de Artículos
Campo
Tipo
Descripción
_id
ObjectId
Identificador único generado automáticamente.
título
Cadena
El nombre o título del artículo.
descripción
Cadena
Una breve descripción del artículo.
creadoEn
Fecha
Marca de tiempo cuando se creó el elemento.
actualizadoEn
Fecha
Marca de tiempo para la última actualización.
2. Clase de Usuarios
Campo
Tipo
Descripción
_id
ObjectId
Identificador único generado automáticamente.
nombre de usuario
Cadena
Nombre de usuario único para el usuario.
correo electrónico
Cadena
Dirección de correo electrónico única.
hashDeContraseña
Cadena
Contraseña hash segura para la autenticación.
creadoEn
Fecha
Marca de tiempo cuando se creó la cuenta de usuario.
actualizadoEn
Fecha
Marca de tiempo para la última actualización de la cuenta.
Puedes crear estas clases y agregar campos directamente en tu panel de control de Back4app.
Crear Nueva Clase
﻿
Puedes agregar columnas eligiendo un tipo de dato, nombrando el campo, estableciendo valores predeterminados y marcándolo como obligatorio.
Crear Columna
﻿
Utilizando el Agente de IA de Back4app para la Creación de Esquemas
El Agente de IA en tu panel puede establecer automáticamente el esquema basado en tus instrucciones. Esta herramienta simplifica el proceso y asegura que tu modelo de datos sea óptimo para tareas CRUD.
Cómo Usar el Agente de IA:
Abre el Agente de IA:
Inicia sesión en tu panel de Back4app y localiza el Agente de IA en la configuración del proyecto.
Describe Tu Esquema:
Proporciona un aviso detallado enumerando las clases y campos.
Confirma la Configuración:
Revisa el esquema propuesto y aprueba los cambios.
Ejemplo de Aviso
Text
Create the following classes in my Back4app project:

1) Class: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)

2) Class: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
Create the following classes in my Back4app project:

1) Class: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)

2) Class: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
﻿
Este proceso impulsado por IA ahorra tiempo y garantiza un modelo de datos consistente y efectivo.
﻿
Paso 3 – Habilitando la Interfaz de Administración y Manejo de Operaciones CRUD
Descripción general de la Interfaz de Administración
La interfaz de administración de Back4app proporciona una solución sin código para gestionar tus datos de backend. Con sus características de arrastrar y soltar, puedes realizar fácilmente operaciones CRUD, como agregar, editar o eliminar registros.
Habilitando la Interfaz de Administración
Ve al menú “Más” en tu panel de control de Back4app.
Selecciona “Admin App” y haz clic en “Habilitar Admin App.”
Crea tu cuenta de administrador, que también configura roles iniciales como B4aAdminUser.
Habilitar Admin App
﻿
Después de la activación, inicia sesión en la interfaz de administración para gestionar los datos de tu proyecto.
Panel de Control de la App de Administración
﻿
Usando la Interfaz de Administración para CRUD
Dentro de la interfaz de administración, puedes:
Insertar Nuevas Entradas: Haz clic en “Agregar Registro” dentro de una clase (por ejemplo, Artículos) para crear nuevos datos.
Ver y Modificar Entradas: Selecciona cualquier registro para ver detalles o actualizar campos.
Eliminar Registros: Elimina entradas que ya no son necesarias.
Esta interfaz fácil de usar mejora la productividad al simplificar la gestión del backend.
﻿
Paso 4 – Conectando tu Aplicación Flask a Back4app
Con tu backend configurado, el siguiente paso es vincular tu aplicación Flask a Back4app.
Realizando llamadas a la API desde Flask
Dado que no hay un SDK de Parse dedicado para Flask, utilizarás llamadas a la API REST. En tu aplicación Flask, puedes utilizar la requests biblioteca para realizar operaciones CRUD.
Ejemplo: Configuración de la comunicación API
Instalar la biblioteca Requests:
Ejecute el siguiente comando en su terminal:
Bash
pip install requests
pip install requests
﻿
Configurar un módulo de Python para llamadas a la API:
Cree un archivo llamado back4app_api.py:
Python
# back4app_api.py
import requests

APPLICATION_ID = "YOUR_APPLICATION_ID"
REST_API_KEY = "YOUR_REST_API_KEY"
BASE_URL = "https://parseapi.back4app.com/classes"

HEADERS = {
    "X-Parse-Application-Id": APPLICATION_ID,
    "X-Parse-REST-API-Key": REST_API_KEY,
    "Content-Type": "application/json"
}

def get_items():
    response = requests.get(f"{BASE_URL}/Items", headers=HEADERS)
    return response.json()

def create_item(title, description):
    data = {"title": title, "description": description}
    response = requests.post(f"{BASE_URL}/Items", headers=HEADERS, json=data)
    return response.json()

def update_item(object_id, title, description):
    data = {"title": title, "description": description}
    response = requests.put(f"{BASE_URL}/Items/{object_id}", headers=HEADERS, json=data)
    return response.json()

def delete_item(object_id):
    response = requests.delete(f"{BASE_URL}/Items/{object_id}", headers=HEADERS)
    return response.json()
# back4app_api.py
import requests

APPLICATION_ID = "YOUR_APPLICATION_ID"
REST_API_KEY = "YOUR_REST_API_KEY"
BASE_URL = "https://parseapi.back4app.com/classes"

HEADERS = {
    "X-Parse-Application-Id": APPLICATION_ID,
    "X-Parse-REST-API-Key": REST_API_KEY,
    "Content-Type": "application/json"
}

def get_items():
    response = requests.get(f"{BASE_URL}/Items", headers=HEADERS)
    return response.json()

def create_item(title, description):
    data = {"title": title, "description": description}
    response = requests.post(f"{BASE_URL}/Items", headers=HEADERS, json=data)
    return response.json()

def update_item(object_id, title, description):
    data = {"title": title, "description": description}
    response = requests.put(f"{BASE_URL}/Items/{object_id}", headers=HEADERS, json=data)
    return response.json()

def delete_item(object_id):
    response = requests.delete(f"{BASE_URL}/Items/{object_id}", headers=HEADERS)
    return response.json()
﻿
Integrar funciones de API en sus rutas de Flask:
Por ejemplo, en app.py:
Python
# app.py
from flask import Flask, request, jsonify, render_template
from back4app_api import get_items, create_item, update_item, delete_item

app = Flask(__name__)

@app.route("/")
def index():
    items = get_items()
    return render_template("index.html", items=items.get("results", []))

@app.route("/add", methods=["POST"])
def add_item():
    title = request.form.get("title")
    description = request.form.get("description")
    result = create_item(title, description)
    return jsonify(result)

@app.route("/update/<item_id>", methods=["PUT"])
def modify_item(item_id):
    data = request.get_json()
    result = update_item(item_id, data.get("title"), data.get("description"))
    return jsonify(result)

@app.route("/delete/<item_id>", methods=["DELETE"])
def remove_item(item_id):
    result = delete_item(item_id)
    return jsonify(result)

if __name__ == "__main__":
    app.run(debug=True)
# app.py
from flask import Flask, request, jsonify, render_template
from back4app_api import get_items, create_item, update_item, delete_item

app = Flask(__name__)

@app.route("/")
def index():
    items = get_items()
    return render_template("index.html", items=items.get("results", []))

@app.route("/add", methods=["POST"])
def add_item():
    title = request.form.get("title")
    description = request.form.get("description")
    result = create_item(title, description)
    return jsonify(result)

@app.route("/update/<item_id>", methods=["PUT"])
def modify_item(item_id):
    data = request.get_json()
    result = update_item(item_id, data.get("title"), data.get("description"))
    return jsonify(result)

@app.route("/delete/<item_id>", methods=["DELETE"])
def remove_item(item_id):
    result = delete_item(item_id)
    return jsonify(result)

if __name__ == "__main__":
    app.run(debug=True)
﻿
Este ejemplo ilustra cómo usar llamadas REST dentro de Flask para interactuar con su backend de Back4app.
﻿
Paso 5 – Protegiendo tu Backend
Implementando Controles de Acceso
Protege tus datos configurando controles de acceso. Por ejemplo, al crear un nuevo elemento, podrías restringir el acceso a su creador.
A continuación se muestra un ejemplo utilizando llamadas a la API con acceso controlado:
Python
import requests

def create_private_item(title, description, user_token):
    data = {"title": title, "description": description}
    headers = {
        "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
        "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
        "X-Parse-Session-Token": user_token,
        "Content-Type": "application/json"
    }
    response = requests.post("https://parseapi.back4app.com/classes/Items", headers=headers, json=data)
    return response.json()
import requests

def create_private_item(title, description, user_token):
    data = {"title": title, "description": description}
    headers = {
        "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
        "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
        "X-Parse-Session-Token": user_token,
        "Content-Type": "application/json"
    }
    response = requests.post("https://parseapi.back4app.com/classes/Items", headers=headers, json=data)
    return response.json()
﻿
Configurando Permisos a Nivel de Clase
Ajusta los Permisos a Nivel de Clase (CLPs) directamente en el panel de control de Back4app para asegurar que solo los usuarios autenticados puedan acceder a clases específicas.
﻿
Paso 6 – Implementando la Autenticación de Usuarios
Configurando la Gestión de Usuarios
Back4app ofrece gestión de usuarios integrada a través de su clase de Usuarios. En tu aplicación Flask, puedes crear puntos finales para el registro y el inicio de sesión.
Ejemplo: Registro e Inicio de Sesión de Usuarios
Python
# auth.py
import requests

APPLICATION_ID = "YOUR_APPLICATION_ID"
REST_API_KEY = "YOUR_REST_API_KEY"
HEADERS = {
    "X-Parse-Application-Id": APPLICATION_ID,
    "X-Parse-REST-API-Key": REST_API_KEY,
    "Content-Type": "application/json"
}

def register_user(username, password, email):
    data = {"username": username, "password": password, "email": email}
    response = requests.post("https://parseapi.back4app.com/users", headers=HEADERS, json=data)
    return response.json()

def login_user(username, password):
    params = {"username": username, "password": password}
    response = requests.get("https://parseapi.back4app.com/login", headers=HEADERS, params=params)
    return response.json()
# auth.py
import requests

APPLICATION_ID = "YOUR_APPLICATION_ID"
REST_API_KEY = "YOUR_REST_API_KEY"
HEADERS = {
    "X-Parse-Application-Id": APPLICATION_ID,
    "X-Parse-REST-API-Key": REST_API_KEY,
    "Content-Type": "application/json"
}

def register_user(username, password, email):
    data = {"username": username, "password": password, "email": email}
    response = requests.post("https://parseapi.back4app.com/users", headers=HEADERS, json=data)
    return response.json()

def login_user(username, password):
    params = {"username": username, "password": password}
    response = requests.get("https://parseapi.back4app.com/login", headers=HEADERS, params=params)
    return response.json()
﻿
Puedes crear rutas de Flask correspondientes para manejar el registro y el inicio de sesión de usuarios utilizando estas funciones.
﻿
Paso 7 – Desplegando tu Aplicación Flask
Back4app simplifica el despliegue. Puedes desplegar tu aplicación Flask a través de varios métodos, incluyendo Docker.
7.1 Empaquetando tu Aplicación Flask
Prepara tu Aplicación:
Asegúrate de que todos los archivos y dependencias requeridos estén incluidos.
Prueba Localmente:
Ejecuta tu aplicación localmente con:
Bash
flask run
flask run
﻿
7.2 Organizando la Estructura de tu Proyecto
Una estructura típica podría ser:
Text
Basic-CRUD-App-Flask/
|-- app.py
|-- back4app_api.py
|-- auth.py
|-- templates/
|     |-- index.html
|-- static/
|-- requirements.txt
|-- Dockerfile
Basic-CRUD-App-Flask/
|-- app.py
|-- back4app_api.py
|-- auth.py
|-- templates/
|     |-- index.html
|-- static/
|-- requirements.txt
|-- Dockerfile
﻿
7.3 Contenerizando con Docker
Incluye un Dockerfile en la raíz del proyecto:
Dockerfile
# Use a lightweight Python image
FROM python:3.9-slim

# Set the working directory
WORKDIR /app

# Install dependencies
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt

# Copy the application code
COPY . .

# Expose the port Flask runs on
EXPOSE 5000

# Start the Flask app
CMD ["python", "app.py"]
# Use a lightweight Python image
FROM python:3.9-slim

# Set the working directory
WORKDIR /app

# Install dependencies
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt

# Copy the application code
COPY . .

# Expose the port Flask runs on
EXPOSE 5000

# Start the Flask app
CMD ["python", "app.py"]
﻿
7.4 Despliegue a través de Back4app Web Deployment
Conecta tu repositorio de GitHub:
Asegúrate de que tu código esté enviado a GitHub.
Configura la configuración de despliegue:
En el panel de Back4app, utiliza la Web Deployment para vincular tu repositorio (por ejemplo, Basic-CRUD-App-Flask) y selecciona tu rama.
Define los comandos de construcción:
Especifica el comando de construcción (por ejemplo, pip install -r requirements.txt) y la ubicación de tu aplicación.
Desplegar:
Haz clic en Desplegar y monitorea los registros hasta que tu aplicación esté en línea.
﻿
Paso 8 – Conclusiones y Direcciones Futuras
¡Gran trabajo! Has creado con éxito una aplicación CRUD basada en Flask integrada con Back4app. 
Estableciste un proyecto llamado Basic-CRUD-App-Flask, definiste modelos de datos para Items y Usuarios, y gestionaste tu backend a través de la interfaz de administración de Back4app. 
Además, conectaste tu aplicación Flask utilizando llamadas a la API REST e implementaste medidas de seguridad.
¿Qué sigue?
Expandir Funcionalidad:
Considera agregar características como búsqueda avanzada, vistas detalladas de artículos o actualizaciones en tiempo real.
Mejorar Servicios de Backend:
Explora funciones en la nube, integra APIs de terceros o implementa control de acceso basado en roles.
Profundiza tus Habilidades:
Visita la documentación de Back4app y otros recursos para refinar aún más tu aplicación.
¡Feliz codificación y buena suerte con tu aplicación CRUD en Flask!
Campo	Tipo	Descripción
_id	ObjectId	Identificador único generado automáticamente.
título	Cadena	El nombre o título del artículo.
descripción	Cadena	Una breve descripción del artículo.
creadoEn	Fecha	Marca de tiempo cuando se creó el elemento.
actualizadoEn	Fecha	Marca de tiempo para la última actualización.
Campo	Tipo	Descripción
_id	ObjectId	Identificador único generado automáticamente.
nombre de usuario	Cadena	Nombre de usuario único para el usuario.
correo electrónico	Cadena	Dirección de correo electrónico única.
hashDeContraseña	Cadena	Contraseña hash segura para la autenticación.
creadoEn	Fecha	Marca de tiempo cuando se creó la cuenta de usuario.
actualizadoEn	Fecha	Marca de tiempo para la última actualización de la cuenta.
How to Build a CRUD App with Python?
How to Build a Basic CRUD App with Java?