📑 El Modelo – Tutorial Flask y JSON (Parte 2)

En el post anterior conectamos la vista con el controlador, ahora es momento de aprender a trabajar en flask con json. Por lo que nos vamos a concentrar en el modelo y la base de datos. Vamos a crear un archivo JSON que funcionará como almacén de datos, y aprenderemos a leerlo y escribirlo desde Python usando diccionarios.

Si ya sabes cómo funcionan los diccionarios en Python, esto te resultará muy familiar. Las bases de datos JSON se manipulan exactamente igual.


📚 Repaso — Lo que ya tenemos

✅ Estructura MVC
Proyecto Flask organizado
✅ Carpetas listas
templates/ · static/ · controlador.py
✅ Vista HTML
index.html con tablas y botones
✅ Conexión vista → controlador
Usando Request
✅ GET / POST
Condicional implementado
⚠️ Falta el modelo
¡No hay base de datos todavía!

🔴 El problema: nuestra aplicación es una cáscara vacía. No guarda datos, no muestra contactos reales, los botones no hacen nada útil.


🎯 Objetivo de la Parte 2 – Flask y JSON | Tutorial parte 2

Vamos a crear el modelo de nuestra aplicación que se va a encargar de interactuar con nuestra base de datos no relacional (JSON) cuando lo solicite el controlador.

🗄️ Modelo y base de datos

  • ✅ Crear archivo JSON (DB/base_de_datos.json)
  • ✅ Leer y escribir JSON desde Python
  • ✅ Crear clase Persona con atributos
  • ✅ Convertir objetos en diccionarios con __dict__

🔗 Conexiones avanzadas

  • ✅ Conectar modelo con JSON (librerías os y json)
  • ✅ Navegar en datos JSON / diccionarios anidados
  • ✅ Preparar la estructura para CRUD (Parte 3)
  • ✅ Entender el flujo: Modelo → JSON → Controlador → Vista

🎯 Resultado final de hoy: Tendremos una base de datos JSON funcionando y sabremos exactamente cómo acceder y manipular los datos desde nuestro modelo Python.


 

Modelo y campos de la base de datos JSON

Antes de escribir código, tenemos que tener claro qué datos vamos a manejar y cómo los vamos a organizar. En nuestra vista hemos definido estos campos:

Nombre
Apellido
Apodo
Teléfono
Dirección

Y también necesitaremos identificar de forma única cada persona, así que añadiremos un campo id.

 

🔮 ¿Y si en el futuro queremos añadir más campos?

Imagina que mañana decides añadir una foto de perfil o un email. Si tu base de datos está en un archivo JSON y tu modelo está bien diseñado, el cambio es mínimo. Pero si has mezclado la lógica de datos con el controlador, el cambio se convierte en un dolor de cabeza.

Lo mismo pasa si más adelante quieres migrar de JSON a una base de datos relacional como MySQL. Un modelo limpio y separado te permite hacer ese cambio sin tocar ni la vista ni el controlador.

✅ La forma correcta (MVC)

  • 🔹 El modelo define los datos y las reglas de negocio.
  • 🔹 El controlador usa el modelo, pero no sabe cómo se guardan los datos.
  • 🔹 La vista solo muestra la información.
  • Beneficio: Cambias el modelo y todo sigue funcionando.

❌ La forma incorrecta

  • 🔸 Mezclar el acceso a datos dentro del controlador.
  • 🔸 Escribir consultas JSON directamente en las rutas.
  • 🔸 No tener una capa de modelo.
  • Consecuencia: Cambiar algo implica reescribir medio proyecto.

🎯 Nuestra misión hoy: Construir un modelo sólido que se comunique con un archivo JSON, respetando MVC y preparando el terreno para el CRUD de la Parte 3.


🗂️ ¿Cómo vamos a estructurar el modelo y la base de datos?

Vamos a crear una clase Persona en models.py. Cada vez que creemos una instancia de esta clase, la convertiremos en un diccionario (con __dict__) y lo guardaremos en un archivo JSON.

La estructura final de nuestra base de datos sería así:

{
«Personas»: [
{
«id»: 0,
«nombre»: «Mariano»,
«apellido»: «Laca»,
«apodo»: «Pyromaniac»,
«telefono»: «34343434»,
«direccion»: «pythones.net»
},
{ … }
] }

Cada persona es un diccionario dentro de una lista. La clave "Personas" contiene esa lista. Así de simple.

Con esto, el modelo será el encargado de leer, escribir, modificar y eliminar estos diccionarios. El controlador solo llamará a los métodos del modelo, y la vista mostrará los datos que el controlador le pase.

¿Estás listo? Vamos a crear el archivo JSON y a conectar todo. 🚀


🗄️ ¿Qué es JSON y por qué lo usamos?

En otro post ya hablamos de bases de datos relacionales y no relacionales. Si quieres profundizar, te recomiendo leer esta guía sobre modelos de bases de datos.

Ejemplo de estructura JSON
Ejemplo de JSON con pares clave:valor

Un diccionario en Python es, en esencia, una base de datos no relacional. Las bases de datos JSON (JavaScript Object Notation) funcionan exactamente igual: almacenan información en pares clave: valor, y pueden contener diccionarios anidados, listas, tuplas, etc.

Para usar JSON en nuestra aplicación, tenemos dos opciones:

  • Opción A: Crear un diccionario directamente en un archivo Python.
  • Opción B: Crear un archivo .json con la estructura de datos.

Nosotros vamos a elegir la Opción B, porque es más limpia y se acerca más a lo que haríamos con una base de datos real. Y lo haremos desde el modelo, respetando la arquitectura MVC.

¿Te animas? Vamos a crear nuestro primer archivo JSON y a conectarlo con Python. 🚀

Venga! Dentro de la carpeta principal de tu proyecto, en mi caso «Pruebas en Python» crea un directorio llamado «DB«.

Dentro de este directorio estará el archivo JSON que contendrá diccionarios como base de datos.

 

¿Cómo lo haremos?

Lo primero que vamos a crear en nuestro modelo es una clase que se llamará Personas y contendrá como atributos los datos que necesitamos almacenar «Nombre, Apellido, Apodo, Teléfono, Dirección» y cada instancia de esta clase, es decir, cada vez que creemos un objeto a partir de ella deberá crearnos un diccionario. De esta forma crearemos un diccionario por cada entidad, digamos, por cada persona.

Así si yo añado a «Daniel Vallejos» a mi base de datos, este será un diccionario dentro de otro diccionario más grande llamado Personas{}. Y este diccionario donde se añade a Daniel Vallejos tendrá un numero de Id que lo identifica frente a los demás, y luego sus datos.

¿Cómo se estructura el modelo y la base de datos?

Así que basicamente nuestro modelo debe poder:

  1. Alojar una clase Personas con los atributos deseados «Id, Nombre, Apellido, Apodo, Teléfono, Dirección«.
  2. Permitirnos exportar esos datos a una base de datos JSON como diccionario anidado y tambíen leerlos, modificarlos o borrarlos. (CRUD)
🗄️ Estructura base de datos JSON

Nuestra base de datos JSON contendrá un diccionario llamado «Personas» que dentro contendrá otros diccionarios; cada uno de estos diccionarios corresponderá a una persona y será creado a partir de la clase Persona de nuestro modelo!. Así nuestro modelo podrá crear nuevos diccionarios dentro del diccionario «Personas», también podrá listar datos (mostrarlos), modificarlos y eliminarlos.

Entonces, si nuestro modelo cumple con el concepto CRUD (Create, Read, Update y Delete) lo único que tendremos que hacer desde el controlador es llamar al método correspondiente de la clase Persona alojada en nuestro modelo. Y solo con esto el modelo debe poder escarbar en la base de datos JSON y devolver un resultado a nuestro controlador para que este lo muestre al usuario en la vista. ¿Comprendes?. Sino lo harás pronto, ya verás!

Si te fijaras dentro del modelo tienes la clase «Persona» a partir de la cual se creará un objeto diccionario que se almacenará dentro del JSON a su vez dentro del diccionario mayor «Personas«. Y si continúas mirando el modelo verás el método «ver_personas» que recibe de parámetro la «id«, pues este podría ser un método que permita buscar una persona dentro del diccionario «Personas» del JSON según su valor de «id» y mostrarla en la vista.. ¿Va tomando sentido para tí?. Pues para mi si, mucho! 😛

Lo primero será crear e importar esta base de datos JSON para poder trabajar con ella, sino, ni modo!

 

Crear e importar el archivo JSON

Así que como primer paso crea el archivo «base_de_datos.json» dentro de la carpeta o directorio «DB» de nuestro proyecto y añade el diccionario llamado «Personas» como te muestro más abajo.

Archivo «DB/base_de_datos.json»

{
  "Personas": [
    {"test": 1},
    {"test": 2}
  ]
}

base de datos json + explicaciónFíjate comenzamos abriendo con llaves lo que indica que se trata de un archivo JSON y dentro de esas llaves colocamos simplemente un par <Clave>:<Valor>. En este caso la Clave «Personas» que obtiene como Valor una lista, que dentro contiene más diccionarios, en el caso del ejemplo dos diccionarios con la Clave «test» y el valor «1 y 2» respectivamente.

Estos valores los hemos añadido simplemente para comprobar que podemos acceder a estos datos, posteriormente los vamos a borrar.

 

Importar la base de datos JSON al modelo para comprobar el acceso

Vamos a conectar ahora nuestra base de datos al modelo para comprobar que tenemos acceso. Lo primero será importar nuestro archivo «.json» y buscar una librería que nos facilite esta tarea añadiendo soporte para JSON. Esta librería debemos importarla dentro de nuestro modelo:

Código de «modelo.py»

#BLOQUE IMPORT
import json

Ahora debemos intentar acceder a nuestro archivo JSON aplicando un poco de la teoría que hemos aprendido en la lección sobre apertura, lectura y escritura de archivos en python. Pero como este post es sobre modelo y bases de datos voy a pedirte que le des un repaso rápido porque no voy a explayarme demasiado aquí sobre estos conceptos.

⚠️ Solución para errores de rutas al abrir archivos

Un detalle importante: las rutas relativas pueden fallar al subir la aplicación a un servidor. He pasado horas renegando con este tema, y la solución es usar la librería os para construir rutas absolutas de forma automática.

En lugar de escribir la ruta «a mano», podemos usar la librería os para que Python detecte automáticamente la ubicación del archivo y construya la ruta completa.

import os
import json

# Detectamos el directorio donde está este script
THIS_FOLDER = os.path.dirname(os.path.abspath(__file__))

# Construimos la ruta completa al archivo JSON
my_file = os.path.join(THIS_FOLDER + '/DB/' 'base_de_datos.json')

# Abrimos el archivo
with open(my_file, "r") as f:
    print(f.read())

Con este código, no importa en qué servidor esté tu aplicación: Python siempre encontrará el archivo. También podrías añadir un condicional para crear el archivo si no existe, pero eso lo dejo a tu criterio.

Bien, usando el código de arriba, si probamos a ejecutar «models.py» en la terminal inmediatamente se mostrará el contenido de nuestro archivo JSON tal cual está allí, es decir, se mostrará el código, fíjate:

modelo-y-base-de-datos-JSON-accediendo-al-archivo-min.png

Logramos acceder con éxito a nuestro archivo. Ahora bien, solo estamos imprimiendo el «contenido» de nuestra base de datos y eso no sirve para nada. Lo que nosotros queremos es poder acceder a los datos como si fueran diccionarios de Python, para poder navegar por ellos. Así que vamos a usar json.load() en lugar de f.read().

 

1. Abrir y cargar el archivo JSON

En vez de leerlo con f.read() (que devuelve texto crudo), usamos json.load(), que convierte ese texto en un diccionario de Python.

#BLOQUE IMPORT
import os
import json

#BLOQUE APERTURA ARCHIVO JSON
THIS_FOLDER = os.path.dirname(os.path.abspath(__file__)) #-> Detectamos el directorio de este archivo ".py"
my_file = os.path.join(THIS_FOLDER + '/DB/' 'base_de_datos.json') #-> Ruta completa

# --> Cargar archivo JSON   
with open (my_file, "r") as f: #-> Abrimos y almacenamos en "f"
    datos = json.load(f) #-> ¡Aquí está la magia! Convertimos el JSON en un diccionario de Python

Esa variable datos es ahora un diccionario cuya CLAVE es «Personas» y cuyos VALORES son los demás diccionarios. Así que ya te imaginas como sigue…

 

2. Navegar por los datos (diccionarios y listas)

Ahora que tenemos el diccionario cargado, vamos a acceder al primer elemento de prueba que guardamos.

# Ahora datos es un diccionario. Accedemos a la lista 'Personas'
datos_personas = datos['Personas']

# Ahora "datos_personas" almacena la lista de diccionarios.
# Así que nos basta con indicar el index de la lista y el nombre de CLAVE para imprimir un valor
print(datos_personas[0]['test'])  # Resultado: 1

Como ves nos imprime el diccionario que se encuentra dentro de la lista que la clave «Personas» toma como valor.

Lo importante es darnos cuenta que cada uno de esos diccionarios que nos muestre será entonces el registro de cada persona almacenada en nuestra base de datos JSON.

Sabemos que estos diccionarios son elementos de una lista, por tanto se organizarán por «index» por lo que el primero será index : 0.

Así que nuestro código organizado para acceder a los datos de prueba queda así:

#BLOQUE IMPORT
import os
import json

#BLOQUE APERTURA ARCHIVO JSON
THIS_FOLDER = os.path.dirname(os.path.abspath(__file__))
my_file = os.path.join(THIS_FOLDER + '/DB/' 'base_de_datos.json')

# --> Cargar archivo JSON   
with open (my_file, "r") as f:
    datos = json.load(f)

#Ahora datos es un diccionario. Almacenamos la lista en una variable:
datos_personas = datos['Personas']

#Accedemos al primer elemento (index 0) y a su clave 'test'
print(datos_personas[0]['test'])

Resultado: 1

Bueno, ya sabemos acceder a los datos y nos será fácil entonces modificarlos, borrarlos, etc. Ya podemos trabajar muy comodamente simplemente aplicando la teoría que aprendimos para acceder a Listas y Diccionarios!

Ahora debemos diseñar el modelo, crear una clase Persona para poder añadir nuevas personas y los métodos para poderlas ver, modificar y eliminar!.

Vamos a ello!!

Creando el modelo de tu aplicación flask

Ya conocemos los datos que vamos a utilizar. Así que vamos a crear la clase «Persona» dentro del modelo, esta clase será la que modele los datos en la base de datos y dispondrá de los métodos encargados de mostrar, agregar, modificar y eliminar elementos.

Un aspecto importante a tener en cuenta además de los datos antes mencionados «Nombre, Apellido, Apodo, Teléfono, Dirección» es que debemos incluir una Clave única que diferencie un elemento de otro. Así cada persona tendra su clave única y en el caso que dos personas tengan el mismo nombre, o incluso todos los mismos datos no causarán inconsistencia en nuestra base de datos. Aquí no parece tan importante porque se trata de una aplicación muy simple y estamos utilizando una base de datos no relacional (JSON). Pero en otros casos o quizás en el caso que necesitemos exportar los datos en un futuro resulta muy importante y una buena práctica añadir un «id» o Clave única.

Así que añadiendo la clase «Persona» nuestro modelo.py queda así:

#BLOQUE IMPORT
import os
import json

#BLOQUE APERTURA ARCHIVO JSON
THIS_FOLDER = os.path.dirname(os.path.abspath(__file__))
my_file = os.path.join(THIS_FOLDER + '/DB/' 'base_de_datos.json')

# --> Cargar archivo JSON   
with open (my_file, "r") as f:
    datos = json.load(f)

#Ahora datos es un diccionario. Almacenamos la lista en una variable:
datos_personas = datos['Personas']

#BLOQUE CLASE PERSONA Y CRUD

class Persona(object):
    def __init__(self, id, nombre, apellido, apodo, telefono, direccion):
        self.id = id
        self.nombre = nombre
        self.apellido = apellido
        self.apodo = apodo
        self.telefono = telefono
        self.direccion = direccion

 

A partir de aquí recordarás que instanciando un nuevo objeto de la clase Persona tendrá estos atributos y que debes pasarlos al momento de crear dicha instancia.

👤 Clase Persona → Diccionario
Lo que tenemos que hacer ahora es que al momento de crear un objeto de la clase «Persona» este tenga la forma de un diccionario!

Y eso lo hacemos de la siguiente manera usando __dict__:

#Ejemplo creamos la instancia "persona_test" con mis datos y usamos "__dict__" para convertirlo en diccionario
 
persona_test = Persona(0, "Mariano", "Laca", "Pyromaniac", "34343434", "pythones.net").__dict__

print(persona_test)

Y listo!.

¡Y ahora, un bonus! Ya que tenemos el diccionario creado, vamos a guardarlo en nuestro archivo JSON para ver cómo se escribe:

# --- EJEMPLO DE GUARDADO (para que veas cómo funciona) ---
# Añadimos la persona de prueba a la lista de datos
datos['Personas'].append(persona_test)

# Guardamos los cambios en el archivo JSON
with open(my_file, "w") as f:
    json.dump(datos, f, indent=2)
    
print("¡Persona guardada en la base de datos JSON!")

Con esto, has creado un objeto, lo has convertido en diccionario y lo has guardado en tu base de datos. ¿Ves qué fácil? En la Parte 3 vamos a profundizar en esto y a conectar cada botón de la vista con estas acciones. 🚀

Código completo de nuestro models.py hasta ahora con el ejemplo de guardado:

#BLOQUE IMPORT
import os
import json

#BLOQUE APERTURA ARCHIVO JSON
THIS_FOLDER = os.path.dirname(os.path.abspath(__file__))
my_file = os.path.join(THIS_FOLDER + '/DB/' 'base_de_datos.json')

# --> Cargar archivo JSON   
with open (my_file, "r") as f:
    datos = json.load(f)

#Almacenamos la lista en una variable para acceder rápido:
datos_personas = datos['Personas']

#BLOQUE CLASE PERSONA Y CRUD
class Persona(object):
    def __init__(self, id, nombre, apellido, apodo, telefono, direccion):
        self.id = id
        self.nombre = nombre
        self.apellido = apellido
        self.apodo = apodo
        self.telefono = telefono
        self.direccion = direccion

# Ejemplo de uso: Crear una persona y guardarla
persona_test = Persona(0, "Mariano", "Laca", "Pyromaniac", "34343434", "pythones.net").__dict__
print("Persona creada:", persona_test)

# Guardamos la persona en el JSON
datos['Personas'].append(persona_test)
with open(my_file, "w") as f:
    json.dump(datos, f, indent=2)
print("¡Persona guardada en la base de datos JSON!")

Resultado en consola:

{‘id’: 0, ‘nombre’: ‘Mariano’, ‘apellido’: ‘Laca’, ‘apodo’: ‘Pyromaniac’, ‘telefono’: ‘34343434’, ‘direccion’: ‘pythones.net’}
¡Persona guardada en la base de datos JSON!

 

📚 Código completo de la Parte 2

Aquí tienes el models.py completo con lo que hemos construido hoy:

# models.py - PARTE 2 COMPLETO
import os
import json

# Detectar ruta del archivo JSON
THIS_FOLDER = os.path.dirname(os.path.abspath(__file__))
my_file = os.path.join(THIS_FOLDER + '/DB/' 'base_de_datos.json')

# Cargar base de datos JSON
with open(my_file, "r") as f:
    datos = json.load(f)

# Acceder a los datos
datos_personas = datos['Personas']
print("Datos de prueba:", datos_personas[0]['test'])  # Resultado: 1

# Clase Persona - NUESTRO MODELO
class Persona(object):
    def __init__(self, id, nombre, apellido, apodo, telefono, direccion):
        self.id = id
        self.nombre = nombre
        self.apellido = apellido
        self.apodo = apodo
        self.telefono = telefono
        self.direccion = direccion

# Ejemplo de uso
persona_ejemplo = Persona(0, "Mariano", "Laca", "Pyromaniac", "34343434", "pythones.net")
print("Persona como diccionario:", persona_ejemplo.__dict__)

# --- Guardar en el JSON (demostración) ---
datos['Personas'].append(persona_ejemplo.__dict__)
with open(my_file, "w") as f:
    json.dump(datos, f, indent=2)
print("¡Persona guardada en la base de datos JSON!")

¡Descarga, prueba, modifica y aprende! La práctica hace al maestro. 👨‍💻

 


📊 Resumen de la Parte 2

🗄️ Base de datos JSON

  • ✅ Carpeta DB/ y archivo base_de_datos.json
  • ✅ Estructura: {"Personas": [{"id": 0, ...}]}
  • ✅ Navegación: datos['Personas'][0]['clave']

🔗 Python + JSON

  • ✅ Librerías os y json
  • ✅ Rutas automáticas con os.path
  • ✅ Lectura con json.load() y escritura con json.dump()

👤 Modelo Persona

  • ✅ Clase con 6 atributos (id + datos)
  • ✅ Conversión a diccionario con __dict__
  • ✅ Ejemplo de guardado en JSON

🎯 Lo más importante: Una base de datos puede ser tan simple como un archivo JSON. ¡No necesitas MySQL para empezar, lo importante aquí es aprender el modelo de desarrollo!


🚀 ¿Qué viene en la Parte 3?

🗄️ CRUD completo
Crear, Leer, Actualizar y Eliminar personas en el JSON.
🔗 Conexión MVC total
Modelo → Controlador → Vista, con Jinja2.
🔄 GET / POST reales
Formularios que envían datos y los procesan.
🎮 Botones funcionales
Ver, Editar, Eliminar, Agregar… ¡hacen algo real!

¿Listo para la Parte 3? ¡Nos vemos en el próximo tutorial!


 

 

📅 Última actualización: agosto 5, 2026

¡Compartir es una forma de agradecer! :)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio