Guía de paso a paso: Implementando un proyecto de
Aplicación Web
Contenido
Guía de paso a paso: Implementando un proyecto de Aplicación Web .............................. 1
Fase 0: Situación / Problema / Necesidad ................................................................... 2
Fase 1: Análisis semántico y MER. .............................................................................. 3
Tabla resumen ....................................................................................................... 3
Diagrama MER ....................................................................................................... 3
Fase 2: Implementación del esquema en Server SQL ................................................... 6
Fase 3: Diseño y desarrollo en Flask ............................................................................ 8
Paso 1: Genere la estructura de carpetas del proyecto .............................................. 8
Paso 2: Crear entorno virtual y activar ...................................................................... 9
Paso 3: Instalar dependencias ................................................................................ 9
Paso 4: archivo __init__.py (app/__init__.py) ........................................................... 10
Paso 5: definir modelos (app/models/[Link]) ................................................. 17
Paso 6: Controladores (app/controllers/[Link]) ...................................... 18
Paso 7: Ejecutar app([Link]) ................................................................................. 20
Paso 8: Formulario en HTML(formulario_cliente.html) ............................................ 20
Paso 9: CSS (static/[Link]) ............................................................................... 24
Paso 10: /routes/[Link] ..................................................................................... 25
Paso 11: Ejecutar [Link] ....................................................................................... 25
Ing. Igor Mejia Página 1 de 25
Guía Paso a paso:
Siga este paso a paso para producir esta solución para la siguiente situación (recuerde
trate de hacer el esfuerzo de generar cada uno de estos pasos por usted mismo y luego
valide con las respuestas que se brindan en cada paso, de esta forma usted no sólo aplica
y genera conocimiento, sino que lo irá validando en la medida que vaya avanzando en el
proyecto).
Hay dos etapas en general:
1. Backend: fase 0, fase 1 y fase 2 son parte del backend. De la fase 3: la controladora
y el modelo son también parte del Backend.
2. Frontend: la vista es la parte del frontend (HTML y CSS)
Fase 0: Situación / Problema / Necesidad
Una pequeña clínica veterinaria desea digitalizar sus registros. Actualmente utilizan
formularios impresos para registrar los datos de los clientes y de sus mascotas, así como
los tratamientos que se aplican a cada mascota. Desean contar con:
• Un formulario para registrar nuevos clientes y sus mascotas.
• Un formulario para registrar tratamientos aplicados.
• Un reporte que muestre los tratamientos aplicados a cada mascota, con la
posibilidad de filtrar por cliente.
En este punto analice la situación. Genere la tabla con el análisis
semántico y genere el diagrama MER que produce esta situación. Este es
el punto de llegada del BackEnd (es decir, es donde alojaré los datos
y de donde extraeré información). Tome unos minutos para generar su
solución.
Ing. Igor Mejia Página 2 de 25
Fase 1: Análisis semántico y MER.
Tabla resumen: Análisis semántico
Sustantivo Entidad Adjetivo / Atributo Verbo Relación Cardinalidad
Complemento
Cliente Cliente Nombre, nombre, Tiene Cliente – 1:N
Teléfono, teléfono, Mascota
Email email
Mascota Mascota Nombre, nombre, Recibe Mascota - 1:N
Especie, especie, Tratamiento
Raza, raza,
Tratamiento Tratamiento Fecha, fecha,
Descripción, descripción,
Costo costo
Efectivamente en esta tabla faltan los campos lleve primaria y los campos llave foránea.
Diagrama MER
Lo puede generar en [Link], Lucida Charts, o bien en Visual Studio Code utilizando
PlantUML.
En caso de utilizar PlantUML, instale la extensión requerida. Vaya en el menú principal a la
opción View (Vista), elija Extension (Extensiones: o bien Ctrl + Shitf + x (escribe PlantUML
del editor Jebbs), instale la extensión. Luego genere un nuevo archivo, y le pone un nombre
con extensión .puml, y copia el siguiente código:
@startuml MER
entity Cliente {
+id_cliente : int <<PK>>
nombre : varchar
telefono : varchar
email : varchar
entity Mascota {
+id_mascota : int <<PK>>
nombre : varchar
especie : varchar
Ing. Igor Mejia Página 3 de 25
raza : varchar
id_cliente : int <<FK>>
entity Tratamiento {
+id_tratamiento : int <<PK>>
fecha : date
descripcion : varchar
costo : decimal
id_mascota : int <<FK>>
Cliente ||--o{ Mascota
Mascota ||--o{ Tratamiento
@enduml
Guarde o salve el archivo digital: Ctrl + s. Sobre el código haga clic derecho y busque la
opción de: Export Current Diagram, elija una extensión (pe png), verá que ahora hay una
nueva carpeta con el nombre out, allí se generó el archivo con el diagrama (ojo que este
diagrama no es basado en Método Chen sino, Crowsfoot.
Si usted no tiene la opción de exportar el diagrama es porque falta ambos o uno de los
componentes:
• Java. Abra la terminal de Visual Studio Code y digite: java -version, si no hay salida
entonces se debe instalar. Busque descargarlo desde las páginas oficiales.
• Graphviz: descárguelo desde su página oficial.
Luego abra el settings de Visual Studio Code y busca “Plantuml”, verifique que la ruta de
Graphviz esté correctamente configurada (ej. C:\Program Files\Graphviz\bin\[Link]).
Ing. Igor Mejia Página 4 de 25
En este punto, deténgase no continue, tómese el tiempo necesario y
trate de generar el script SQL para generar este esquema en el
servidor Microsoft SQL Server, revise sus ejercicios previos y
utilizando el diagrama MER, como en su última guía, genere el script.
Ing. Igor Mejia Página 5 de 25
Fase 2: Implementación del esquema en Server SQL
Ejecute con cuidado el siguiente script, haga clic en el botón ‘New Query’
, luego ejecute los bloques correspondientes del siguiente
código:
-- Crear base de datos
CREATE DATABASE ClinicaVeterinaria;
GO
-- Ejecute hasta acá el código
-- garantizamos que estemos en la base de datos correcta
USE ClinicaVeterinaria;
GO
-- Ejecute hasta acá el código
-- Crear tabla Cliente
CREATE TABLE Cliente (
id_cliente INT PRIMARY KEY IDENTITY(1,1),
nombre VARCHAR(100),
telefono VARCHAR(50),
email VARCHAR(100)
);
-- Ejecute hasta acá el código
-- Crear tabla Mascota
CREATE TABLE Mascota (
Ing. Igor Mejia Página 6 de 25
id_mascota INT PRIMARY KEY IDENTITY(1,1),
nombre VARCHAR(100),
especie VARCHAR(50),
raza VARCHAR(50),
id_cliente INT,
FOREIGN KEY (id_cliente) REFERENCES Cliente(id_cliente)
);
-- Ejecute hasta acá el código
-- Crear tabla Tratamiento
CREATE TABLE Tratamiento (
id_tratamiento INT PRIMARY KEY IDENTITY(1,1),
fecha DATE,
descripcion VARCHAR(200),
costo DECIMAL(10,2),
id_mascota INT,
FOREIGN KEY (id_mascota) REFERENCES Mascota(id_mascota)
);
Recuerde ir ejecutando este script en los bloques que se separan por
la instrucción GO o por ;
Ing. Igor Mejia Página 7 de 25
Fase 3: Diseño y desarrollo en Flask
Paso 1: Genere la estructura de carpetas del proyecto
Para esto, si usted está en Visual Studio Code, haga clic en New folder… y luego en New
File, en la secuencia correcta para generar las siguientes carpetas (es case sensitive,
genérelas tal como se establecen: todo minúsculas, observe la imagen para que lo realice
de forma correcta):
• app
o models
o controllers
o templates
o routes
o static
y los archivos:
• [Link]
• [Link]
• [Link]
• [Link]
• formulario_cliente.html
• formulario_tratamiento.html
• [Link]
• [Link]
• [Link]
• __init__.py
• db_test.py
Tiene que formarse el siguiente árbol de carpetas y archivos:
Ing. Igor Mejia Página 8 de 25
Paso 2: Crear entorno virtual y activar: la primera sentencia se ejecuta sólo una vez,
la segunda sentencia se ejecuta cada vez que usted modificará el código o ejecutará la
aplicación. Esto lo puede ejecutar desde la terminal de Visual Studio Code, o bien desde
PowerShell.
• Si está utilizando Visual Studio Code abra una terminal Ctrl+ñ (Menú View:
Terminal): primera sentencia (toma algo de tiempo que finalice, deje hasta que
vuelva a salir el prompt)
C:\MiApp\clinica_project\app\ python -m venv venv
• Segunda sentencia:
C:\MiApp\clinica_project\app\ venv\Scripts\activate
(venv) C:\MiApp\clinica_project\app\
Paso 3: Instalar dependencias
(venv) C:\MiApp\clinica_project\app\ pip install flask
flask_sqlalchemy pyodbc
Esto hará que se instalen estos, tomará cierto tiempo, hasta que vuelva a salir el prompt de
la línea de comandos, deje que se instalen todos los componentes, si salen errores
documéntelos para resolverlos posteriormente.
Ing. Igor Mejia Página 9 de 25
Paso 4: archivo __init__.py (app/__init__.py)
Ojo que debe obtener los parámetros de su SQL server si es necesario genere un usuario
para que pueda utilizar este en la conexión hacia la base de datos
# app/__init__.py
from flask import Flask
from flask_sqlalchemy import SQLAlchemy
db = SQLAlchemy()
def create_app():
app = Flask(__name__)
[Link]['SQLALCHEMY_DATABASE_URI'] =
'mssql+pyodbc://proyecto1:test123@DESKTOP-
HI51V03/ClinicaVeterinaria?driver=ODBC+Driver+17+for+SQL+Server'
[Link]['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
db.init_app(app)
# Registro de rutas
from [Link] import vistas_bp
app.register_blueprint(vistas_bp)
from [Link] import controladores_bp
app.register_blueprint(controladores_bp)
return app
Ing. Igor Mejia Página 10 de 25
usuario: será el usuario que usted genere
password: es la contraseña asignada al usuario creado
localhost: será el nombre del servidor pe. DESKTOP-45H34, desde el SQL Management
Studio, en la ventana de conexión allí puede obtener el nombre de su servidor local (tenga
presente que funciona sólo en la máquina actual).
Nombre del servidor
Para agregar un usuario:
Ing. Igor Mejia Página 11 de 25
en Logins hará un nuevo usuario, haga click derecho sobre la
carpeta Logins, seleccione ‘New Login’, continue la selección de las opciones como se
muestra en la siguiente imagen:
Agregue el valor de Login Name, SQL Server Authentication, Password y Confirm Password.
Verifique que no estén seleccionadas (deselecciónelas): Enforce password policy, Enforce
password experation, User must change password at next login.
Luego en la página de Server Roles, haga la selección como se muestra a continuación:
Ing. Igor Mejia Página 12 de 25
Luego en User Mapping realice las siguientes limitaciones del usuario, para el caso suyo
recuerde que la base de datos es ClinicaVeterinaria:
Ing. Igor Mejia Página 13 de 25
En la columna de Default Schema debe hacer clic en los tres puntos (…) y luego en la
opción Browse busque y seleccione dbo.
Aplique los cambios haciendo clic en Ok.
Actualice el string de conexión al Server SQL en el archivo __init__.py con los datos de
Usuario, Password y Localhost.
Ahora debemos asegurarnos que nuestro sistema operativo (suponiendo que es
Windows), abra el navegador y se va al sitio de Microsoft, allí busca el componente: 'ODBC
Driver 17 for SQL Server'.
Para esto digite Windows + R y escriba: odbcad32, esto abrirá el administrador de orígenes
de datos ODBC. Vaya a la pestaña Drivers y busque si hay algo como: ODBC Driver 17 ( o
18 en algunos casos), si lo está entonces ya está instalado. Si no está hay que instalarlo.
Ing. Igor Mejia Página 14 de 25
Si no está entonces sigamos los siguientes pasos para instalarle.
Descárguelo siempre de sitios oficiales de Microsoft, no de terceras partes.
Ing. Igor Mejia Página 15 de 25
Elija acorde a la arquitectura de su procesador.
Archivo: db_test.py
## /db_test.py
from app import create_app, db
from [Link] import Cliente
app = create_app()
with app.app_context():
try:
# Intentamos una consulta simple
clientes = [Link]()
print(f"✅ Conexión exitosa. Se encontraron {len(clientes)}
clientes registrados.")
except Exception as e:
print("❌ Error al conectar con la base de datos:")
print(e)
Ing. Igor Mejia Página 16 de 25
Ejecutamos en la terminal: a) está activo venv, de lo contrario activarlo:
actvate\Scripts\activate.
Luego ejecutamos:
• python db_test.py
Observemos el resultado debería decir “Conexión exitosa” o describe el error documéntelo
y obtenga soporte por vía de internet para solventarle
Paso 5: definir modelos (app/models/[Link])
## app/models/[Link]
from app import db
class Cliente([Link]):
id_cliente = [Link]([Link], primary_key=True)
nombre = [Link]([Link](100))
telefono = [Link]([Link](50))
email = [Link]([Link](100))
mascotas = [Link]('Mascota', backref='cliente')
class Mascota([Link]):
id_mascota = [Link]([Link], primary_key=True)
nombre = [Link]([Link](100))
especie = [Link]([Link](50))
raza = [Link]([Link](50))
id_cliente = [Link]([Link],
[Link]('cliente.id_cliente'))
tratamientos = [Link]('Tratamiento', backref='mascota')
class Tratamiento([Link]):
Ing. Igor Mejia Página 17 de 25
id_tratamiento = [Link]([Link], primary_key=True)
fecha = [Link]([Link])
descripcion = [Link]([Link](200))
costo = [Link]([Link])
id_mascota = [Link]([Link],
[Link]('mascota.id_mascota'))
Paso 6: Controladores (app/controllers/[Link])
# app/controllers/[Link]
from flask import Blueprint, render_template, request, redirect
from app import db
from [Link] import Cliente, Mascota, Tratamiento
from datetime import datetime
controladores_bp = Blueprint('controladores', __name__)
@controladores_bp.route('/')
def inicio():
return render_template('[Link]')
@controladores_bp.route('/agregar_cliente', methods=['POST'])
def agregar_cliente():
nuevo = Cliente(
nombre=[Link]['nombre'],
telefono=[Link]['telefono'],
email=[Link]['email']
[Link](nuevo)
Ing. Igor Mejia Página 18 de 25
[Link]()
return redirect('/')
@controladores_bp.route('/agregar_tratamiento', methods=['POST'])
def agregar_tratamiento():
nuevo = Tratamiento(
fecha=[Link]([Link]['fecha'], '%Y-%m-%d'),
descripcion=[Link]['descripcion'],
costo=[Link]['costo'],
id_mascota=[Link]['id_mascota']
[Link](nuevo)
[Link]()
return redirect('/')
@controladores_bp.route('/reporte', methods=['GET'])
def reporte():
id_cliente = [Link]('id_cliente')
tratamientos = []
if id_cliente:
tratamientos = (
[Link](Tratamiento)
.join(Mascota)
.filter(Mascota.id_cliente == id_cliente)
.all()
Ing. Igor Mejia Página 19 de 25
return render_template('[Link]', tratamientos=tratamientos)
@controladores_bp.route('/agregar_mascota', methods=['POST'])
def agregar_mascota():
nueva = Mascota(
nombre=[Link]['nombre'],
especie=[Link]['especie'],
raza=[Link]['raza'],
id_cliente=[Link]['id_cliente']
[Link](nueva)
[Link]()
return redirect('/')
Paso 7: Ejecutar app([Link])
## [Link]
from app import create_app
app = create_app()
if __name__ == '__main__':
[Link](debug=True)
Paso 8: Formulario en HTML(formulario_cliente.html)
<!--app/templates/formulario_cliente.html -->
<!DOCTYPE html>
<html>
<head>
Ing. Igor Mejia Página 20 de 25
<title>Registro Cliente</title>
<link rel="stylesheet" href="/static/[Link]">
</head>
<body>
<form action="/agregar_cliente" method="POST">
<label>Nombre:</label><input name="nombre"><br>
<label>Teléfono:</label><input name="telefono"><br>
<label>Email:</label><input name="email"><br>
<button type="submit">Guardar</button>
</form>
</body>
</html>
Ahora algo similar para: Formulario_tratamiento.html
<!--app/templates/formulario_tratamiento.html -->
<!DOCTYPE html>
<html>
<head>
<title>Registro Tratamiento</title>
<link rel="stylesheet" href="/static/[Link]">
</head>
<body>
<form action="/agregar_tratamiento" method="POST">
<label>Fecha:</label><input type="date" name="fecha"><br>
<label>Descripción:</label><input name="descripcion"><br>
<label>Costo:</label><input type="number" step="0.01"
name="costo"><br>
<label>ID Mascota:</label><input name="id_mascota"><br>
Ing. Igor Mejia Página 21 de 25
<button type="submit">Guardar</button>
</form>
</body>
</html>
Formulario_mascota.html
<!-- app/templates/formulario_mascota.html -->
<!DOCTYPE html>
<html>
<head>
<title>Registro Mascota</title>
<link rel="stylesheet" href="/static/[Link]">
</head>
<body>
<h2>Registrar Mascota</h2>
<form action="/agregar_mascota" method="POST">
<label>Nombre:</label><input name="nombre"><br>
<label>Especie:</label><input name="especie"><br>
<label>Raza:</label><input name="raza"><br>
<label>ID Cliente:</label><input name="id_cliente"><br>
<button type="submit">Guardar</button>
</form>
</body>
</html>
[Link]
<!--app/templates/formulario_tratamiento.html -->
<!DOCTYPE html>
<html>
Ing. Igor Mejia Página 22 de 25
<head>
<title>Reporte de Tratamientos</title>
<link rel="stylesheet" href="/static/[Link]">
</head>
<body>
<h2>Tratamientos por Mascota</h2>
<form method="GET" action="/reporte">
<label>ID Cliente:</label><input name="id_cliente">
<button type="submit">Buscar</button>
</form>
<ul>
{% for tratamiento in tratamientos %}
<li>Mascota: {{ [Link] }} - {{
[Link] }} ({{ [Link] }}) - ${{
[Link] }}</li>
{% endfor %}
</ul>
</body>
</html>
[Link]
<!-- app/templates/[Link] -->
<!DOCTYPE html>
<html>
<head>
<title>Inicio - Clínica Veterinaria</title>
<link rel="stylesheet" href="/static/[Link]">
</head>
Ing. Igor Mejia Página 23 de 25
<body>
<h1>Bienvenido a la Clínica Veterinaria</h1>
<ul>
<li><a href="/formulario_cliente">Registrar Cliente</a></li>
<li><a href="/formulario_mascota">Registrar Mascota</a></li>
<li><a href="/formulario_tratamiento">Registrar
Tratamiento</a></li>
<li><a href="/reporte">Ver Reporte</a></li>
</ul>
</body>
</html>
Paso 9: CSS (static/[Link])
body {
font-family: Arial;
background-color: #f0f0f0;
padding: 20px;
form {
background-color: white;
padding: 15px;
border-radius: 5px;
input {
margin-bottom: 10px;
Ing. Igor Mejia Página 24 de 25
Paso 10: /routes/[Link]
# app/routes/[Link]
from flask import Blueprint, render_template
vistas_bp = Blueprint('vistas', __name__)
@vistas_bp.route('/formulario_cliente')
def formulario_cliente():
return render_template('formulario_cliente.html')
@vistas_bp.route('/formulario_tratamiento')
def formulario_tratamiento():
return render_template('formulario_tratamiento.html')
@vistas_bp.route('/formulario_mascota')
def formulario_mascota():
return render_template('formulario_mascota.html')
Paso 11: Ejecutar [Link]
En la terminal y asegurándose de estar en el contexto o espacio virtual (venv) ejecute:
python [Link], documente cualquier error para solventarle.
Ing. Igor Mejia Página 25 de 25