Drafty
Una Aplicación Basada en IA para Generar Planos
DXF desde Imágenes 2D
Autores:
Yulian Stiven Bedoya Buriticá
Alejandro Guaranguay Solarte
Alexander Aly Peláez Giraldo
Estudiantes y egresados de la Universidad Nacional de Colombia
Curso de Arquitectura en la Nube
Bootcamp Talento Tech - AWS Cloud Foundational
Universidad Nacional de Colombia
Marzo 2025
Arquitectura en la nube Drafty
Índice
1. Descripción general del proyecto 2
2. Diagrama de la aplicación 3
3. Entorno de desarrollo utilizado (framework) 4
4. Guı́a paso a paso con capturas de pantalla de la implementación de los
servicios: VPC, RDS y EC2 5
5. Capturas de pantalla de la aplicación en funcionamiento 16
6. Conclusiones 18
Referencias 19
1
Arquitectura en la nube Drafty
Descripción general del proyecto
Drafty es una aplicación web que permite transformar bocetos o planos en papel en
archivos digitales DXF, utilizables en software CAD. Su objetivo principal es optimizar
el flujo de trabajo técnico mediante inteligencia artificial (IA), permitiendo a estudiantes,
diseñadores y profesionales del área generar planos desde imágenes de forma rápida y precisa.
El proyecto Drafty se desarrolló utilizando Amazon AWS para gestionar la infraestructura
de la aplicación. La solución contempla:
Frontend: Desarrollo en HTML, CSS y JavaScript para una experiencia de usuario
responsiva.
Backend: Sistema en PHP que gestiona la autenticación, el procesamiento de imágenes
y la simulación de la generación del archivo DXF.
Base de datos: MySQL, inicialmente en entorno local y posteriormente migrada a
Amazon RDS.
Infraestructura en la nube: Despliegue en AWS EC2, con configuraciones de red
en VPC y servicios adicionales como RDS para la base de datos.
2
Arquitectura en la nube Drafty
Diagrama de la aplicación
A continuación se muestra un diagrama general de la arquitectura de la aplicación:
diagrama_aplicacion.png
Figura 1: Diagrama de la arquitectura de Drafty.
3
Arquitectura en la nube Drafty
Entorno de desarrollo utilizado (framework)
El desarrollo de Drafty se realizó utilizando las siguientes tecnologı́as y herramientas:
Lenguajes: PHP, HTML, CSS, JavaScript.
Framework/Entorno: Se empleó un entorno basado en XAMPP para pruebas lo-
cales. Posteriormente, se migró la aplicación a Amazon Web Services (AWS) para su
despliegue en la nube.
Base de datos: MySQL, inicialmente en un entorno local y luego migrada a Amazon
RDS.
Control de versiones: GitHub para el registro de cambios y colaboración.
Documentación: Overleaf para la redacción del informe y la documentación formal.
4
Arquitectura en la nube Drafty
Guı́a paso a paso con capturas de pantalla de la imple-
mentación de los servicios: VPC, RDS y EC2
A continuación se describe detalladamente el proceso de implementación de la infraes-
tructura en AWS, acompañado de capturas de pantalla que ilustran cada paso:
Paso 1: Creación de la VPC
Esta imagen muestra la VPC que se creó para poder montar el proyecto.
Figura 2: Vista general de la VPC creada.
Paso 2: Configuración de Zonas de Disponibilidad y Subredes
La VPC creada contiene dos zonas de disponibilidad, y en cada una se configuraron dos
subredes: una pública y una privada. Esta configuración permite ubicar los servicios de base
de datos en el segmento privado y la webapp en el segmento público.
Figura 3: Distribución de subredes en las zonas de disponibilidad.
5
Arquitectura en la nube Drafty
Paso 3: Continuación de la Configuración de la VPC
Se muestra la continuación de la imagen anterior, evidenciando la configuración completa
de la VPC y sus componentes.
Figura 4: Detalle adicional de la configuración de la VPC.
Paso 4: Creación de Grupos de Seguridad
Se crearon dos grupos de seguridad: uno para permitir las conexiones remotas a la ins-
tancia EC2 y el tráfico HTTP, y otro para habilitar la conexión desde la instancia EC2 a la
base de datos.
Figura 5: Grupos de seguridad creados para EC2 y para la conexión a la base de datos.
Paso 5: Reglas del Web Security Group
En esta imagen se muestran las reglas implementadas para el Web Security Group, que
permiten la conexión por RDP y el tráfico HTTP.
Figura 6: Reglas configuradas para el Web Security Group.
6
Arquitectura en la nube Drafty
Paso 6: Grupo de Seguridad para la Conexión EC2 a la Base de
Datos
Esta imagen muestra el grupo de seguridad que permite la conexión desde la instancia
EC2 a la Base de Datos SQL.
Figura 7: Grupo de seguridad para la conexión EC2 a la Base de Datos SQL.
Paso 7: Instancia EC2 para la Aplicación Web
Se muestra la instancia EC2, que cuenta con un servidor Windows y XAMPP, el cual
hospeda la aplicación web.
Figura 8: Instancia EC2 con servidor Windows y XAMPP.
Paso 8: Creación de la Base de Datos SQL
En este paso se creó una base de datos SQL para gestionar los usuarios de la aplicación.
Figura 9: Creación de la base de datos SQL.
7
Arquitectura en la nube Drafty
Paso 9.1: Zona de disponibilidad A y réplica en B
La base de datos se creó en la zona de disponibilidad us-east-1a y se configuró una
réplica en la zona us-east-1b, lo que garantiza alta disponibilidad y redundancia.
Figura 10: Configuración de la BD principal en us-east-1a y réplica en us-east-1b.
Paso 9.2: Vista de la BD en us-east-1b
Esta captura de pantalla muestra la base de datos en la zona de disponibilidad us-east-1b,
confirmando la réplica en la segunda AZ.
Figura 11: Réplica de la base de datos en us-east-1b.
8
Arquitectura en la nube Drafty
Paso 9.3: Configuración detallada de la BD y su réplica
En esta imagen se aprecia más información de la instancia y la réplica, ası́ como los
parámetros de seguridad y redes asociados.
Figura 12: Detalle de la configuración y seguridad de la base de datos.
Paso 10: Creación de un grupo de subredes para las bases de datos
Se creó un grupo de subredes independiente para la conexión entre las bases de datos,
garantizando ası́ una configuración más organizada y segura.
Figura 13: Grupo de subredes dedicado a las bases de datos.
Paso 11: Bases de datos drafty y drafty db
La aplicación maneja dos bases de datos principales (drafty y drafty db) para la gestión
de usuarios y demás entidades del proyecto.
9
Arquitectura en la nube Drafty
Figura 14: Listado de bases de datos, incluyendo drafty y drafty db.
Paso 12: Servidor XAMPP en máquina EC2 con Windows
En la instancia EC2 (Windows), se configuró XAMPP para alojar la aplicación web y su
backend en PHP.
Figura 15: Panel de control de XAMPP en la instancia EC2 Windows.
10
Arquitectura en la nube Drafty
Paso 13: Archivos de la aplicación en el servidor XAMPP-Windows
Esta imagen muestra la estructura de archivos del proyecto [Link] dentro de la
carpeta htdocs de XAMPP, desde donde se despliega la aplicación web.
Figura 16: Estructura de archivos del proyecto en el servidor XAMPP Windows.
11
Arquitectura en la nube Drafty
Implementación local del proyecto en PHP
El desarrollo del proyecto Drafty comenzó de manera local utilizando el stack clásico
compuesto por PHP, HTML, CSS, y MySQL, gestionado a través de XAMPP. Este entorno
permitió construir, probar e iterar rápidamente sobre las funcionalidades base antes de pensar
en el despliegue en la nube.
Estructura inicial del proyecto
Se definió una estructura de carpetas clara para separar responsabilidades entre frontend,
backend, almacenamiento y configuración. A continuación, se muestra el esquema inicial del
proyecto:
Nota: En la imagen se aprecia, por ejemplo, public/, src/, .env, [Link], etc.
Inicialización del servidor local
Se utilizó XAMPP como entorno de pruebas. Se configuró Apache para servir el contenido
desde la carpeta public y se activó el módulo MySQL para la base de datos. Luego, se creó
una base de datos llamada drafty y se definió la tabla users.
Lógica de autenticación y sesiones
El primer módulo funcional fue el sistema de autenticación. Se desarrolló un formulario
de login que valida credenciales contra la base de datos y establece una sesión PHP. En caso
de éxito, redirige al usuario al dashboard.
Zona protegida y carga de imagen
Una vez autenticado, el usuario accede al dashboard, donde puede subir una imagen. Esta
imagen se guarda localmente y se simula la generación de un archivo DXF.
En esta vista ([Link]), se muestra el nombre del usuario logueado y un input para
cargar la imagen. De esta forma, se validaron las principales funcionalidades locales de Drafty
(autenticación, carga de archivos y simulación de DXF) antes de llevarlo a la nube.
12
Arquitectura en la nube Drafty
13
Arquitectura en la nube Drafty
Figura 2: Panel de control de XAMPP con Apache y MySQL activos
Figura 3: Formulario de login del proyecto Drafty
14
Arquitectura en la nube Drafty
Figura 4: Zona protegida con formulario para cargar imagen y generar archivo DXF
15
Arquitectura en la nube Drafty
Capturas de pantalla de la aplicación en funcionamiento
A continuación se presentan algunas capturas de pantalla que muestran la aplicación
Drafty en operación:
aplicacion_funcionando_1.png
Figura 17: Interfaz de inicio de sesión.
16
Arquitectura en la nube Drafty
aplicacion_funcionando_2.png
Figura 18: Pantalla de carga de imágen y simulación de generación del archivo DXF.
17
Arquitectura en la nube Drafty
Conclusiones
El desarrollo del proyecto Drafty ha permitido la integración de diversas tecnologı́as y
servicios de AWS en un entorno real. La implementación de VPC, RDS y EC2 ha facilitado
la creación de una infraestructura escalable y segura, mientras que el uso de PHP y MySQL
en el backend respalda la lógica de la aplicación.
Aunque actualmente la funcionalidad de generación de archivos DXF es simulada, la
arquitectura modular y flexible abre la posibilidad de incorporar modelos de IA avanzados
en futuras versiones. Esta experiencia resultó sumamente enriquecedora, proporcionando
conocimientos prácticos sobre el despliegue en la nube, la configuración de servicios y el
desarrollo de aplicaciones web de alto impacto.
18
Arquitectura en la nube Drafty
Referencias
Talento Tech. (2025). Bootcamp de Arquitectura en la Nube - AWS Cloud Foundational.
[Material de curso].
Amazon Web Services. (2025). AWS Documentation. Recuperado de [Link]
.com/documentation/
19