Diagrama de arquitectura de aplicación, instalación de flask (+componentes necesarios) y creación del diagrama de arquitectura de aplicación

 Fecha: sábado 21 de marzo de 2026

Hora de inicio: 12:00 p.m.

Hora de finalización: 4:30 p.m.

Hora de inicio: 6:00 p.m.

Hora de finalización: 7:30 p.m.

Horas trabajadas: 6h

Una vez hecha la mayor parte correspondiente a SQL Server Express y SSMS, se debía continuar con la parte de Python y Flask.

Actividades realizadas

12:00 m.d. - 12:40 p.m

Nos reunimos por Teams para repartir (de manera general) las actividades del día y las generalidades para mañana.
La división fue la siguiente:

JJ (yo):
  • Sentar las bases para un controlador funcional 
  • Diagrama de arquitectura de aplicación
  • app.py
VB (Valeria Bermudez):
  • Modelo funcional (para poder conectarlo al controlador).
  • Test de conexión ente la BD y Flask.
  • Config.py


1:00 p.m. - 4:30

Una vez terminada la reunión por Teams. Decicí en primer lugar asegurarme de que Python estuviera instalado correctamente en mi computadora. Lo estaba, pero era un versión algo antigua.

Por lo que decidí ir a Download Python | Python.org y descargar la versión estable más reciente (en este caso la 3.13.12.

Antes de escribir código, me dediqué a investigar los conceptos necesarios para esta etapa, por ejemplo:

  • Qué es un entorno virtual en Python y para qué sirve
  • Qué es pyodbc y cómo funciona como puente entre Python y SQL Server
  • Qué es ODBC y qué rol cumple el driver en la conexión
  • Qué es un Blueprint en Flask y para qué se usa
  • Qué son las expresiones regulares en Python y cómo usarlas para validar texto
  • Qué es render_template y @app.route
  • Métodos GET y POST
  • etc.
Configuración del entorno virtual

Creé mi entorno virtual con la instrucción: py -m venv venv
Al intentar activarlo con venv\Scripts\activite me apareció el siguiente error:
                          Img 1
Este error ocurrió porque PowerShell por defecto no permite ejecutar scripts por razones de seguridad. La solución fue ejecutar:

       Img 2

Lo anterior permite a PowerShell ejecutar scripts locales. Después de esto el entorno virtual se activó correctamente:
                                    Img 3

 

Instalación de Flask y otros

Con el entorno virtual activo, instalé Flask y pyodbc: pip install flask pyodbc

Luego, para verificar que ODBC (Open Database Connectivity)ya estaba instalado ejecuté:
python -c "import pyodbc; print(pyodbc.drivers())"

Lo anterior imprime una lista de los controladores ODBC que están instalados en la computadora. Con esto comprobé que ya esa parte estaba lista, la librería Pyodbc permite conectar Python con BD mediante ODBC, por eso era tan importante asegurarme que esto ya estaba.

Archivos __init__.py

Al intentar ejecutar app.py por primera vez apareció el siguiente error:

"ModuleNotFoundError: No module named 'app.controllers'; 'app' is not a package"

Este error ocurre porque Python necesita un archivo especial llamado __init__.py dentro de cada carpeta para reconocerla como un package importable, yo lo había olvidado. Sin este archivo, Python no puede hacer imports desde esas carpetas.

La solución fue simplemente crear dichos archivos en cada carpeta. Luego hice commit y push.

Creación del controlador

Se creó el archivo controlador_empleado.py en app/controllers/. Este archivo implementa el patrón MVC como controlador, definiendo las rutas de Flask sin contener lógica de base de datos ni HTML (es lo que conecta la vista con el modelo básicamente).

El controlador contiene:

  • Un Blueprint llamado empleado para agrupar las rutas relacionadas con empleados
  • Ruta GET "/":muestra la lista de empleados (pendiente conectar con el model)
  • Ruta GET "insertar": muestra el formulario de insercion
  • Ruta POST "insertar" : valida los datos e invoca el model para insertar (pendiente esto último)

Las validaciones implementadas en capa de presentación fueron:

  1. Campos de nombre y salario no vacíos.
  2. Nombres cumpliendo las concidicones
  3. Salario siendo un número válido positivo.

Se dejó pendiente la llamada al modelo en ambas rutas que lo requieren. Los comentarios en el código marcan exactamente dónde deben integrarse esas llamadas.

También se renombró la carpeta de views a templates para seguir la convención estándar de Flask, que busca los archivos HTML en una carpeta con ese nombre.


6:00 p.m. - 7:30 p.m.

Durante este lapso me dediqué a crear el diagrama de arquitectura de aplicación utilizando draw.io.

El diagrama representa el patrón MVC implementado en el proyecto, mostrando las tres capas con sus tecnologías correspondientes:

  • Vista (View): HTML + CSS (Bootstrap) + Jinja2, que va a ser implementada en los html de inicio e inserción.
  • Controlador (Controller): Python + Flask, implementado en controlador_empleado.py.
  • Modelo (Model): Python + pyodbc.

La comunicación entre el browser y la capa de Vista se realiza mediante HTTP, y la comunicación entre el Modelo y SQL Server se realiza mediante TCP/IP a través de HAMACHI.

Se consultó al profesor sobre el diagrama y mencionó que le parecía un poco similar a un diagrama de actividad, pero que estaba bien (quedo pendiente de actualizaciones sobre esto para modificar lo que resulte necesario). También preguntó por la biblioteca de acceso a datos, que en nuestro caso es pyodbc.


                                        Img 4

Forma de trabajo del equipo

Hoy trabajamos en paralelo. En un incio hicimos una reunión por Teams para repartir equitativamente el trabajo, y luego coordinamos por WhatsAapp cuando habían dudas o había que tomar desiciones que nos afectaban a ambas.

Buenas prácticas descubiertas

  • Crear el entorno virtual antes de instalar cualquier librería evita conflictos de versiones entre proyectos.
  • Es importante verificar que el entorno virtual esté activo antes de instalar librerías, de lo contrario se instalan de forma global.
  • Separar las validaciones en la capa de presentación y no en el modelo mantiene el código limpio.

Referencias












Comentarios

Publicar un comentario

Entradas más populares de este blog

Instalación del servidor

Fecha: lunes 9 de marzo de 2026 Hora de inicio: 4:00 p.m. Hora de finalización:  9:20 p.m. Horas trabajadas:  3 h 40 min El plan para esta sesión de trabajo era establecer el ambiente de desarrollo desde cero, esto incluye la instalación del servidor de bases de datos, la configuración de la red para que ambas pudiéramos acceder y dejar todo listo para empezar a trabajar con la base de datos y la aplicación web. Actividades realizadas 4:00 p.m. - 5:30 p.m. Primeramente, decidimos que yo, Valeria, sería quien instalaría el servidor en mi equipo. Para esto, instalé SQL Server Express y SQL Server Management Studio (SSMS) siguiendo un video de YouTube. Una vez instalados, habilité el usuario sa, cambié su contraseña y activé la autenticación mixta (SQL Server y Windows) desde SSMS. Hice esto porque para conectarse desde otra máquina con un usuario diferente de Windows, se hace a través de la autenticación de SQL Server (usuario y contraseña). Problema encontrado Al intentar cone...
Leer más

Configuración inicial: stack tecnológico, GitHub y estructura del proyecto

Imagen
  Fecha: martes 10 de marzo 2026 Hora de inicio: 6:30 pm Hora de finalización: 10:00 pm Horas trabajadas: 3 h y 30 min   Actividades realizadas 6:00 pm – 8:40pm En primera instancia durante este tiempo, yo, JJ, estuve investigando un poco sobre que lenguaje/framework usar para el backend, ya que ni VB ni yo hemos trabajado nunca en desarrollo web ni en conexión de web browser con una base de datos. Después le pregunté a VB sobre que había investigado ella al respecto, y después de discutirlo llegamos a la decisión de usar Python + Flask para la parte de capa lógica. Durante el proceso, además de Python + Flask (decisión final), se tomaron en cuenta Java + Springboot, JavaScript (node.js), Python+Django, entre otros. Por motivos de tiempo (para este punto del proceso quedan 15 días para entregar el trabajo) y tomando también en cuenta los otros cursos que ambas llevamos, consideramos que lo mejor para un primer acercamiento es utilizar Python (lenguaje que a...
Leer más

Creación de la base de datos y el primer stored procedure

Imagen
Fecha:  sábado 14 de marzo de 2026 Hora de inicio:  1:00 p.m. Hora de finalización:  8:30 p.m. Horas trabajadas:  5 h 50 min Con el ambiente de desarrollo ya listo, el día de hoy queríamos crear la base de datos, la tabla, cargar datos y escribir los primeros stored procedures. Para empezar, nos reunimos y dividimos las tareas. Actividades realizadas 1:00 p.m. – 1:40 p.m.:  Reunión de planificación Nos reunimos por Teams para organizar el trabajo del día. La división quedó así: Valeria (yo):   Crear la base de datos y la tabla Empleado. Insertar 10 empleados manualmente. Crear el SP para obtener la lista de empleados. Johana: Insertar 30 empleados a la tabla. Crear el SP para insertar un nuevo empleado. Hacer el diagrama de contexto de desarrollo. 2:30 p.m. – 5:10 p.m.:  Base de datos, tabla e inserción de datos Empecé clonando el repositorio que Johana había creado días atrás. Antes de escribir una sola línea de SQL, me dediqué a...
Leer más