INFORME DE PRÁCTICA DE LABORATORIO Versión 1.

0
PROGRAMA DE INGENIERÍA MECATRÓNICA Periodo 2022-1

Tienda virtual por medio de Django y MysQL .

Mendoza Javier, Bermudez Jean, y Castellanos Juan
{est.javier.mendoza, est.jean.bermudez, y est.juanse.castell2}@unimilitar.edu.co
Profesor: Palacios Angela

Abstract-In the following report, a web page programmed in

python Django is configured to carry out transactions
through a database hosted on a local server and the
implementation of a physical device controlled by a
microcontroller.

Palabras clave—Django, MySQL, base de datos, servidor.

I. Introducción
El desarrollo de los diferentes lenguajes de programación con
el paso de los años ha brindado un sin fin de herramientas a
los usuarios para el desarrollo de aplicaciones y páginas web
de tal manera que la facilidad con la que se puede realizar
dichas acciones e integrarlas junto base de datos es mayor,
como ejemplo tomamos a Django el framework web de alto
nivel utilizado para el desarrollo de páginas web y
aplicaciones en el cual incluye una base de datos con la cual Fig 1. Diseño Banda transportadora
trabajar de manera local. [1]

En el siguiente laboratorio implementaremos por medio de

dicho framework el desarrollo y configuración de una página
web alojada en un servidor local en MySQL en la
implementación de una tienda virtual además de implementar
un sistema físico manejado por múltiples sensores para llevar
a cabo compras de manera física y ver reflejado dicho cambio
en la base de datos que maneja dicha tienda .

Por lo que el desarrollo de la práctica se seccionó en tres

etapas: montaje físico, implementación de la página web y
manejo de base de datos por medio de MySQL.

II. MÉTODOS Y MATERIALES

● Motor paso a paso.
● Estructura banda transportadora.
● Led emisor/receptor infrarrojo
● dispositivo RFID
● Computador Fig 2. Estructura Banda transportadora.
● Microcontrolador Arduino
III. PROCEDIMIENTO Luego de resolver el movimiento de la banda procedemos a
probar y configurar los diferentes sensores para que estos
Inicialmente se realizó el diseño de la banda transportadora
respondan a las condiciones impuestas al momento de
utilizando como motor de impulso un motor paso a paso,
ejecutar el funcionamiento de la banda transportadora .
dicho motor cumplia la funcion que se le fue asignada la cual
es impulsar la anda y permitir el movimiento de esta, pero
debido a la baja velocidad que está desarrollaba
implementamos una relación de engranajes para resolver
dicha problemática .
 INFORME DE PRÁCTICA DE LABORATORIO Versión 1.0
PROGRAMA DE INGENIERÍA MECATRÓNICA Periodo 2022-1

Fig 5. Módulos para cada función que implementa la página

Fig 3. Implementación de sensores a la banda.

Una vez tenemos cada módulo terminado procedemos a
probar uno por uno para luego poder integrarlos en un solo
programa citándolos por medio de referencias .
Confirmado ya el funcionamiento de los distintos dispositivos
se procede a configurar e implementación de una página web
para esto utilizamos el framework Django para la realización
de esta y usamos MySQL como base de datos de manera local
para, para el desarrollo de la página web Django cuenta con
una herramienta que permite utilizar lenguaje HTML para
poder facilitar la programación de esta permitiendo añadir de
manera mucho más fácil estilos e imágenes en nuestra página
web.

Fig 4. Estructura Base de codigo pagina web Fig 6. Funciones definidas para los botones y procesos que maneja la
Django ya contaba con algunos programas externos que página
facilitaron la programación de la página web como es el uso
de bootstrap 5[2] el cual nos presenta opciones para
autocompletar códigos al momento de implementar botones
en nuestra página o simplemente añadir mucha más estética a
dicha a ella.
 INFORME DE PRÁCTICA DE LABORATORIO Versión 1.0
PROGRAMA DE INGENIERÍA MECATRÓNICA Periodo 2022-1

Fig 7. Rutas para realizar el respectivo llamado de las funciones.

Con la base de la página ya montada procedemos a

Fig 11. Página principal de la tienda virtual
implementar el uso de una base de datos, aunque Django ya
cuenta con una base de datos SQlite optamos por
implementadas MySQL y alojarla en un servidor local
mediante XAMPP

Fig8 . Estructura Base para la implementación de MySQL

Fig 12. Carrito de compras tienda virtual.

Posteriormente se define el desarrollar una aplicación

móvil que cumpla la misma función que la página web para
que los servicios ofrecidos por la aplicación los pueda utilizar
cualquier persona desde su dispositivo android por medio de
la herramienta de trabajo App Inventor.

Fig 9.Software XAMPP para la imlemetacion de la base de datos

Fig 10. Base de datos implementada en MySQL

Una vez montada la base procedemos a realizar pruebas en
nuetra pagina y comprobar si esta realiza administración de
los elementos en venta, así como poder realizar una compra a
través de esta
 INFORME DE PRÁCTICA DE LABORATORIO Versión 1.0
PROGRAMA DE INGENIERÍA MECATRÓNICA Periodo 2022-1

Fig 13. Interfaz de usuario App Inventor

Para la aplicación se decide implementar diferentes
pantallas y menús los cuales permitan al usuario un
desempeño dentro de la aplicación considerablemente más
cómodo.
Fig 15. Login del aplicativo
Una vez completado el proceso de login el sistema
enseñará al usuario una nueva interfaz en la cual podrá definir
cuál será su paso a escoger, el paso principal será el de
comprar productos.

Fig 14. Menús de la aplicación

Posterior a esta pantalla inicial se debe iniciar sesión para

que el dispositivo sea capaz de reconocer y cargar las
credenciales de cada usuario desde la base de datos.

Fig 16. Pantalla de decisión

Una vez dentro del apartado de compras se podrá visualizar

los diferentes productos que puede el usuario adquirir dentro
del comercio.
 INFORME DE PRÁCTICA DE LABORATORIO Versión 1.0
PROGRAMA DE INGENIERÍA MECATRÓNICA Periodo 2022-1

V. REFERENCIAS
[1] RESOURCES FOR DEVELOPERS BY DEVELOPERS.
https://developer.mozilla.org/es/docs/Learn/Server-side/D
jango Recuperado el 20 de mayo de 2022.

[2] Build fast, responsive sites with

Bootstrap.HTTPS://GETBOOTSTRAP.COM/DOCS/5.2/GETTING-STA
RTED/INTRODUCTION/ . RECUPERADO EL 19 DE MARZO DE
2022.

Fig 17. Pantalla de productos

Una vez culminado el proceso de selección de productos

esa misma pantalla servirá como “carrito de compras” y estará
constantemente calculando el precio total de los productos
seleccionados y al presionar el botón de pagar hará la los
respectivos cálculos y validación de que el usuario cuente con
los fondos necesarios para el pago. Una vez confirmado el
pago se descontará de la base de datos la cantidad de
productos que sean necesarios.

Conclusiones
● Por medio del desarrollo de la práctica de laboratorio
es posible para el ingeniero mecatrónico adquirir
habilidades de simulación de redes de conexión
utilizando servidores, diferentes equipos y tipos de
cables entendiendo el uso de cada uno de los
implementos mencionados y la configuración que
estos deben poseer para que su funcionamiento sea
óptimo.
● El manejo de desarrollo de página web por medio de
Django en gran medida se facilitó debido a las
herramientas que proporciona el programa así como
al acceso de utilizar código HTML para el manejo de
configuración para la página.
.