✔️ Aprende a crear Aplicaciones Flask con JSON – Tutorial (Parte 2)

Bienvenidos a la segunda parte de nuestro tutorial sobre cómo crear aplicaciones Flask con JSON para web. En el post anterior conectamos la vista con el controlador; ahora vamos a trabajar con el modelo y base de datos para comprender cómo se estructura el modelo de nuestra aplicación y aprenderemos a trabajar con bases de datos JSON que son y se manipulan de forma muy similar a los diccionarios en Python.

Es importante destacar que intento seguir un orden para tu aprendizaje pero que para desarrollar una aplicación en Flask con JSON que medianamente tenga sentido es necesario utilizar diferentes librerías y adquirir nuevos conceptos.

Primeramente, vamos a recordar donde habíamos quedado y como se encuentra estructurado nuestro proyecto a modo de repaso.

📚 REPASO EXPRESS - Lo que hicimos en la Parte 1

¡Recordemos rápido! Ya tenemos:

1. ✅ Estructura MVC completa de nuestro proyecto Flask
2. ✅ Carpetas organizadas: templates, static, controlador.py
3. ✅ Vista HTML creada con tablas y botones (index.html)
4. ✅ Conexión hecha entre vista y controlador usando Request
5. ✅ Condicional GET/POST implementado en el controlador

---

¡PERO OJO! Nuestra aplicación todavía está incompleta. No tiene un modelo real ni base de datos…

🎯 OBJETIVO DE LA PARTE 2: ¡Crear el Modelo y Base de Datos!

🧠 PARTE 2 – Modelo y base de datos – Aplicaciones flask con JSON

Como primer paso antes de comenzar a trabajar con los datos es preciso organizarnos y tener un conocimiento previo de los datos con los que vamos a trabajar para tener una idea de como estructurar nuestra base de datos; es decir, en este caso nuestro diccionario.

Claramente, podemos ver en nuestra vista hemos definido los siguientes campos dentro de la tabla donde mostraremos los datos completos. «Nombre, Apellido, Apodo, Teléfono, Dirección» y en la otra tabla (la que tenemos a la izquierda que ocupa menos espacio) hemos definido que se mostrarán todas las personas de nuestra base de datos y se nos permitirá realizar las siguientes acciones: «Ver, Añadir, Actualizar y Eliminar«.

Si pensamos como Desarrolladores con conocimientos en bases de datos, debemos tener en cuenta que en algún futuro algún usuario de nuestra aplicación, otro desarrollador o nosotros mismos podríamos querer añadir algún nuevo campo. Por ejemplo, una Foto de perfil del contacto y pues claro, si simplemente creamos la base de datos primero y luego el modelo al momento de añadir un nuevo Campo o Registro, tendremos que modificar la base de datos y también el modelo.

Algo similar sucedería si tenemos que mover nuestra aplicación a otro servidor o queremos cambiar nuestra base de datos de un diccionario a una base de datos relacional MySQL. En el segundo caso, tendríamos que reformar el modelo y copiar los antiguos datos a la nueva base de datos.

La cosa es que los programadores debemos suponer todo en torno de automatizar procesos y poder a futuro facilitar el mantenimiento de aquellas aplicaciones que desarrollamos. Por lo que la mejor opción es:

Desarrollar aplicaciones Flask con JSON

En otro post he hablado mucho sobre bases de datos, sobre todo teoría y la parte más importante a destacar es que existen dos tipos de bases de datos; las relacionales y las no relacionales. Si quieres leer un poco acerca de las diferencias puedes hacerlo aquí: Bases de datos modelo no relacional

Un diccionario podríamos considerarlo una base de datos no relacional, de hecho las bases de datos no relaciones JSON  (JavaScript Object Notation – Notación de Objetos de JavaScript) son básicamente diccionarios, que se almacenan con el formato «Key:Value» (par Clave:Valor) y donde a veces podemos encontrar diccionarios anidados, es decir diccionarios dentro de otros diccionarios; e incluso listas o tuplas como Key o Values.

Nosotros para utilizar este tipo de bases de datos simplemente podemos hacerlo dentro de un archivo de Python creando un diccionario, o bien podemos crear un archivo JSON y dentro establecer los diccionarios que serán nuestra base de datos. Pero lo haremos desde el modelo ¿Te animas?

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)

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 mí si, mucho! 😛

Vas a usar Diccionarios, Clases, Métodos y además vas a aprender a crear e iterar archivos en una sola lección!.

Te voy a sacar el desarrollador de adentro aunque sea a golpes de teclado!

Vamos, vamos poniéndole ganas! muajaja

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}
  ]
}

Fí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 y vamos a ver como acceder a los «datos» de test que colocamos. De esta forma sabremos claramente como posicionarnos en cada diccionario dentro de Personas y acceder a sus respectivos Pares de Clave : Valor.

Lo primero será importar nuestro archivo «.json» y buscar una librería que nos facilite esta tarea añadiendo soporte para JSON. Pero 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.

Vamos a probar abrir nuestro archivo JSON desde nuestro models.py con el código que aprendimos anteriormente:

# BLOQUE IMPORT
import json

#BLOQUE CONEXIÓN CON BASE DE DATOS JSON
with open ("./DB/base_de_datos.json", "r") as f: #->Abrimos y almacenamos en "f"
    print(f.read()) #-> Imprimos usando el método read() del objeto f

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:

Logramos acceder con éxito a nuestro archivo. Obviamente debemos especificar en que carpeta se encuentra al momento de utilizar la función open(). En mi experiencia personal he tenido problemas al momento de subir una aplicación a un servidor con el tema de los «path’s» o directorios configurados por defecto. Por ejemplo en algunos casos el interprete no logra ubicar el archivo, ya sea por conflictos con nombres de directorios o a veces porque no se le da la gana, les juro he pasado horas renegando con ese tema y he encontrado la solución, que aquí os dejo:

#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" que contiene este código.
my_file = os.path.join(THIS_FOLDER + '/DB/' 'base_de_datos.json') #-> A ese directorio le sumamos el del archivo. La ruta total se almacena en my_file

#Aquí "os" detecta el directorio donde se ejecuta nuestro archivo python es decir en este caso "models.py" y a partir de allí almacena esta ruta en THIS_FOLDER. Luego ya sabiendo que la ruta es donde está "models.py" bastará agregarle el directorio DB y finalmente indicar el nombre de archivo.

# --> Conexión, apertura e imprimir archivo
with open (my_file, "r") as f: #->Abrimos pasando como arg la variable my_file que contiene ruta completa
    print(f.read()) #-> Imprimos usando el método read() del objeto f

En mi caso usaré el segundo código que he posteado aquí por las dudas.. Bien ahora 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. Así que vamos a intentar leer el contenido del primer diccionario dentro de la lista que es valor de «Personas». Lo que sería «test:1»

¿Cómo acceder a un dato de la base de datos JSON desde el modelo?

Nuestra base de datos se basa en diccionarios, así que lo que tenemos que hacer simplemente es «cargar» nuestro archivo json y leer los diccionarios que se encuentran dentro pasando un numero de index (porque es una lista) y el nombre de la «Clave» de la cual queremos obtener los datos.

¿Cómo cargamos un archivo JSON?

En vez de leerlo con ese asqueroso f.read(), usamos json.load().

Esto nos permitirá abrir un JSON pero no pasando la ruta del archivo he!. Debes pasarle como argumento la variable «f» porque allí almacenamos cuando lo abrimos. ¿Recuerdas que usamos whit open () as «f«. «ASSS FFF»

1. El contenido de nuestro JSON se almacena en «f«.
2. Luego dentro de una variable llamada «datos» metemos el resultado de json.load(f)
3. Esa variable datos es ahora un diccionario cuya CLAVE es «Personas» y cuyos VALORES son los demás dicionarios. Así que ya te imaginas como sigue..
4. Accedemos igualmente que lo haríamos con diccionarios. Fíjate el código que he usado:

#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" que contiene este código.
my_file = os.path.join(THIS_FOLDER + '/DB/' 'base_de_datos.json') #-> A ese directorio le sumamos el del archivo. La ruta total se almacena en my_file
#Aquí "os" detecta el directorio donde se ejecuta nuestro archivo python es decir en este caso "models.py" y a partir de allí almacena esta ruta en THIS_FOLDER. Luego ya sabiendo que la ruta es donde está "models.py" bastará agregarle el directorio DB y finalmente indicar el nombre de archivo.

# --> Cargar archivo JSON   
with open (my_file, "r") as f: #->Abrimos pasando como arg la variable my_file que contiene ruta completa Y ALMACENAMOS EN "f"
    datos = json.load(f) #-> Almacenamos en la variable "datos" la interpreteación de nuestro JSON que está almacenado en "f"

#Ahora datos es un diccionario.Así que probamos imprimir el valor de la clave "Personas":

print(datos['Personas'])

Fíjate el resultado:

Como ves nos imprime los diccionarios que se encuentran 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.

Ahora que ya sabemos como acceder a el contenido de la lista nos faltará acceder a la clave de determinado diccionario.

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

Por ende para evitar usar un bucle for o cualquier otro método nos conviene almacenar directamente los diccionarios que se encuentran dentro de la lista en una variable que llamaré (datos_personas), concediéndonos así un acceso más rápido a los datos, fíjate y no uses bucles for:

#Ahora datos es un diccionario.
#Almacenamos los diccionarios en una sola variable:
datos_personas = datos['Personas']
#Ahora "Personas" almacena los diccionarios.
#Así que nos basta con indicar el index y el nombre de CLAVE PARA IMPRIMIR UN VALOR
print(datos_personas[0]['test'])

Fíjate solo con eso, ya nos organizamos para poder mostrar el dato que deseemos. Solo nos bastará llamar a la variable «datos_personas» que contiene una lista de diccionarios, por lo que primero indicamos el numero de index al cual queremos acceder, lo que será un diccionario, y finalmente la clave del diccionario de la cual queremos mostrar el valor!

Así que nuestro código organizado queda así:

#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" que contiene este código.
my_file = os.path.join(THIS_FOLDER + '/DB/' 'base_de_datos.json') #-> A ese directorio le sumamos el del archivo. La ruta total se almacena en my_file
#Aquí "os" detecta el directorio donde se ejecuta nuestro archivo python es decir en este caso "models.py" y a partir de allí almacena esta ruta en THIS_FOLDER. Luego ya sabiendo que la ruta es donde está "models.py" bastará agregarle el directorio DB y finalmente indicar el nombre de archivo.

# --> Cargar archivo JSON   
with open (my_file, "r") as f: #->Abrimos pasando como arg la variable my_file que contiene ruta completa Y ALMACENAMOS EN "f"
    datos = json.load(f) #-> Almacenamos en la variable "datos" la interpreteación de nuestro JSON que está almacenado en "f"


#Ahora datos es un diccionario.
#Almacenamos los diccionarios en una sola variable:
datos_personas = datos['Personas']
#Ahora "datos_personas" almacena los diccionarios.
#Así que nos basta con indicar el index de la lista correspondiente y el nombre de CLAVE PARA IMPRIMIR UN VALOR
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

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__)) #-> Detectamos el directorio de este archivo ".py" que contiene este código.
my_file = os.path.join(THIS_FOLDER + '/DB/' 'base_de_datos.json') #-> A ese directorio le sumamos el del archivo. La ruta total se almacena en my_file
#Aquí "os" detecta el directorio donde se ejecuta nuestro archivo python es decir en este caso "models.py" y a partir de allí almacena esta ruta en THIS_FOLDER. Luego ya sabiendo que la ruta es donde está "models.py" bastará agregarle el directorio DB y finalmente indicar el nombre de archivo.

# --> Cargar archivo JSON   
with open (my_file, "r") as f: #->Abrimos pasando como arg la variable my_file que contiene ruta completa Y ALMACENAMOS EN "f"
    datos = json.load(f) #-> Almacenamos en la variable "datos" la interpreteación de nuestro JSON que está almacenado en "f"


#Ahora datos es un diccionario.
#Almacenamos los diccionarios en una sola variable:
datos_personas = datos['Personas']
#Ahora "datos_personas" almacena los diccionarios.
#Así que nos basta con indicar el index y el nombre de CLAVE PARA IMPRIMIR UN VALOR
#print(datos_personas[0]['test'])

#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.

#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!. Solo nos faltaría añadir estos datos a nuestra base de datos JSON. Claro que esto es puro ejemplo y palabrería.

Código completo de nuestro models.py hasta ahora:

#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" que contiene este código.
my_file = os.path.join(THIS_FOLDER + '/DB/' 'base_de_datos.json') #-> A ese directorio le sumamos el del archivo. La ruta total se almacena en my_file
#Aquí "os" detecta el directorio donde se ejecuta nuestro archivo python es decir en este caso "models.py" y a partir de allí almacena esta ruta en THIS_FOLDER. Luego ya sabiendo que la ruta es donde está "models.py" bastará agregarle el directorio DB y finalmente indicar el nombre de archivo.

# --> Cargar archivo JSON   
with open (my_file, "r") as f: #->Abrimos pasando como arg la variable my_file que contiene ruta completa Y ALMACENAMOS EN "f"
    datos = json.load(f) #-> Almacenamos en la variable "datos" la interpreteación de nuestro JSON que está almacenado en "f"


#Ahora datos es un diccionario.
#Almacenamos los diccionarios en una sola variable:
datos_personas = datos['Personas']
#Ahora "datos_personas" almacena los diccionarios.
#Así que nos basta con indicar el index y el nombre de CLAVE PARA IMPRIMIR UN VALOR
#print(datos_personas[0]['test'])

#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

persona_test = Persona(0, "Mariano", "Laca", "Pyromaniac", "34343434", "pythones.net").__dict__
print(persona_test)

Resultado:

{‘id’: 0, ‘nombre’: ‘Mariano’, ‘apellido’: ‘Laca’, ‘apodo’: ‘Pyromaniac’, ‘telefono’: ‘34343434’, ‘direccion’: ‘pythones.net’}

📊 RESUMEN DE LO LOGRADO EN PARTE 2

¿Listo para la Parte 3 donde todo cobrará vida y tendrás tu primera aplicación Flask COMPLETA? ¡Nos vemos en el próximo tutorial! 🚀

# 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__)