REDIELUZ
ISSN 2244-7334 / Depósito legal pp201102ZU3769 Vol. 15 N° 1 • Enero - Junio 2025: 120 - 124
WEB application for the simulation of a laboratory aimed at learning digital electronics
Universidad Rafael Urdaneta. Venezuela
ORCID: 0009-0009-3019-6917, 0009-0003-4792-274X, 0009-0003-8615-9927
giovanniurdanetatulli@gmail.com, juanjoseromerozabala47@gmail.com, jubertperez@gmail.com
El presente trabajo de investigación tuvo como objetivo desarrollar una aplicación web para la si- mulación de un laboratorio dirigido al aprendizaje de la electrónica digital. Su propósito principal fue ofrecer una alternativa a las prácticas de labora- torio presenciales, que refuerce el aprendizaje de la electrónica digital y que elimine la necesidad de asistir presencialmente y de costear los dispositivos electrónicos. El sistema se dividió en un componen- te cliente, que comprende la interfaz de usuario y un componente servidor, que consiste en el almacena- miento y seguridad de los datos, conectándose a una base de datos relacional, así como también en la gestión de la comunicación entre usuarios. Se realizó una encuesta a profesores de la Universi- dad Rafael Urdaneta para medir su efectividad. La investigación fue de tipo descriptiva y transaccio- nal, con un diseño no experimental. El desarrollo se dividió en 3 fases, siguiendo una metodología tradicional. El cumplimiento de estas permitió ana- lizar los dispositivos a simular, diseñar la estructu- ra a través de diagramas, elaborar un componente cliente y servidor, realizar pruebas de software y construir un prototipo de la aplicación web.
The present research work aimed to develop an educational web application for learning digital elec- tronics. Its main purpose was to offer an alternati- ve to in-person laboratory practices that reinforce the learning of digital electronics and eliminate the need for in-person attendance and the cost of elec-
tronic devices. The system was divided into a client component, which includes the user interface, and a server component, which consists of data storage and security, connecting to a relational database, as well as managing communication between users. A survey was conducted with professors from Rafael Urdaneta University to measure its effectiveness. The research was descriptive and transactional in nature, with a non-experimental design. The de- velopment was divided into 3 phases, following a traditional methodology. The completion of these phases allowed for the analysis of the devices to be simulated, the design of the structure through diagrams, the development of a client and server component, software testing, and the construction of a prototype of the web application.
En la actualidad, la tecnología ha transformado
radicalmente el mundo, desde la forma en que nos comunicamos hasta las opciones de entretenimien- to. La electrónica digital ha revolucionado la mane- ra en que manejamos la información, haciéndola in- dispensable para cualquier campo relacionado con la tecnología. Su estudio se ha vuelto obligatorio para aquellos que buscan desenvolverse en este ámbito.
Las puertas lógicas, bloques lógicos y circui- tos lógicos son componentes fundamentales de la electrónica digital. Estos elementos trabajan juntos para procesar señales electrónicas y generar sali-
das de acuerdo con reglas específicas. Son herra- mientas esenciales en el estudio y experimentación de la tecnología digital, permitiendo comprender su funcionamiento y su impacto en diversos ámbitos, desde computadoras hasta nuevos dispositivos electrónicos.
El problema surge cuando se imparte la electró- nica digital en un laboratorio, debido a que se re- quiere una presencia física de estudiantes y profe- sor. El avance de la tecnología hasta el punto en el que se encuentra, nos ha enseñado que es válido considerar este detalle como una limitante, y que no está de más intentar superarlo. Por otra parte, centrándonos en la enseñanza de este campo en Venezuela, existen dificultades a la hora de conse- guir los componentes electrónicos necesarios para cumplir dicha actividad. Estas limitantes pueden afectar considerablemente a los estudiantes duran- te el aprendizaje de esta materia, pues no contarían con la actividad práctica requerida.
Ante esta problemática, el presente trabajo de investigación tuvo como objetivo desarrollar una aplicación web para la simulación de un laborato- rio dirigido al aprendizaje de la electrónica digital a través del análisis de dispositivos electrónicos fundamentales para ser utilizados en la simulación, el diseño de la estructura del sistema a través de diversos diagramas, la elaboración de un compo- nente cliente y servidor que sigan el esquema di- señado, la realización de pruebas de software y la elaboración de un prototipo que demuestre la fun-
cionalidad del sistema.
La elaboración de un sistema con estas carac- terísticas podría reducir de manera considerable los costos para instalar y mantener un laboratorio físico de electrónica digital. De igual forma, ofrece un ambiente que promueve el autoaprendizaje, ya que cualquier usuario tiene acceso a un laboratorio digital, con la posibilidad de desenvolverse en el rol de profesor o estudiante. Asimismo, un factor que convierte a esta aplicación web en una experiencia flexible es la anulación de la asistencia presencial.
Todos los factores previamente mencionados convierten a este sistema en una potencial herra- mienta para la educación con modalidad remota que puede extenderse a instituciones educativas no solo en Venezuela, sino en el mundo entero, debido a que permite impartir a nivel práctico una materia que es dictada en cualquier institución, en cualquier país. Por último, se buscó con el presente trabajo de investigación inspirar a otras investiga- ciones que tengan una idea y objetivos similares.
La investigación se realizó entre enero y agos- to del año 2024, dentro del área de ingeniería en Computación y de la sub-área de desarrollo de apli- caciones web en la Universidad Rafael Urdaneta (URU), ubicada en Maracaibo, estado Zulia, Vene- zuela.
A continuación, se presentan los trabajos de in- vestigación tomados como antecedentes por reali- zar diversos aportes al presente trabajo de investi- gación:
Título | Autor | Año | Aporte |
El software como apoyo didácti- co en la enseñanza de la electró- nica digital superior en México | Pérez, R. | 2021 | Evaluación del alcance del proyecto en cuanto a la simulación de dispo- sitivos electrónicos |
Laboratorio remoto de electróni- ca digital basado en FPGA | Oballe, O., Castellanos, J., Sánchez, J., Navas, R., Daza, A., Botín, J. | 2020 | Diseño del laboratorio virtual pro- puesto |
Aplicación web para la comuni- cación audiovisual en entornos educativos | Marrero, F. | 2019 | Selección de arquitecturas y tecno- logías a utilizar |
METODOLOGÍA
La presente investigación es de tipo descriptiva, debido a que en ella se realiza una caracterización de cada tecnología, fase y procedimiento que se ejecutó para cumplir su objetivo general, el cual es desarrollar una aplicación web para la simulación
Fuente: Urdaneta, Romero, Pérez (2024)
de un laboratorio dirigido al aprendizaje de la elec- trónica digital. De igual manera, se considera una investigación transversal, puesto que la recolección de información ocurre en un momento único, no en un período evolutivo en el tiempo.
El diseño es no experimental, puesto que no se manipulan variables deliberadamente; es decir, los
campos de conocimiento que se estudian y se des- criben, como la electrónica digital y las tecnologías utilizadas para desarrollar el sistema, no son modi- ficadas o manipuladas de forma experimental, sino que se adaptan al problema para poder encontrar una solución al mismo.
Según Arias (2012), una encuesta es una técni- ca que pretende obtener información que suminis- tra un grupo o muestra de sujetos acerca de sí mis- mos, o en relación con un tema en particular, esta puede ser oral o escrita. Un cuestionario de pregun- tas cerradas establece previamente las respuestas posibles para el encuestado, ya sean dicotómicas o selección simple. Esta técnica de recolección de datos fue la seleccionada para medir la efectividad de la aplicación web a futuro. La encuesta fue apli- cada a un conjunto de profesores de la Universidad Rafael Urdaneta en Maracaibo, Estado Zulia.
La metodología utilizada para desarrollar la aplicación web fue definida como “tradicional” por Cantone (2011) y se divide en 3 fases o etapas. La primera es la planificación, en esta se plantea la gestión técnica, económica y temporal. La segunda es la implementación, la cual, consiste en las acti- vidades que constituyen el desarrollo del sistema. La tercera es la puesta en producción, donde se elabora un prototipo funcional y utilizable.
Se aplicó una encuesta para medir la efectividad de la aplicación web a 8 profesores de la Univer- sidad Rafael Urdaneta. De los cuales, la mayoría
expresó que la aplicación facilita la enseñanza de la materia, presenta un esquema de comunicación efectivo, es conveniente para el aprendizaje debi- do a sus simulaciones, reduce considerablemente los costos en componentes electrónicos, facilita la asistencia de los estudiantes y no disminuye la comprensión de la práctica.
El alcance de la aplicación web, comprendió la simulación de componentes o dispositivos electró- nicos para diseñar circuitos combinacionales, pues se trata de la rama más básica a nivel práctico de la electrónica digital, según, Morris (2003). En dicho proceso, se omiten factores relacionados con una implementación real como el voltaje o condiciones de temperatura. Los componentes simulados fue- ron los siguientes: compuerta NOT (TTL 74LS04), compuerta AND (TTL 74LS08), compuerta OR (TTL 74LS32), compuerta XOR (TTL 74LS86), com- puerta NAND (TTL 74LS00), compuerta NOR (TTL 74LS02), compuerta XNOR (CMOS CD4077), LED,
dip-switch de 1 bit, decodificador BCD a 7 segmen- tos (TTL 74LS48), display de 7 segmentos y cables. Todas las compuertas simuladas son de 2 entradas.
Se realizaron diagramas de casos de uso, de actividad, de secuencia, de arquitectura, de enti- dad-relación y bosquejos de interfaz gráfica para el diseño visual del sistema. Esta etapa fue indispen- sable para definir la estructura de la aplicación web.
El desarrollo de la aplicación web, se llevó a cabo siguiendo una arquitectura de capas, ya que, es una opción que resulta escalable, modular y or- ganizada. El frontend, el backend y la base de da- tos son componentes individuales.
Figura 1. Diagrama de arquitectura.
Fuente: Urdaneta, Romero, Pérez (2024)
Se implementó una base de datos relacional para almacenar los datos de la aplicación web, por la seguridad y organización de su estructura. El sis- tema gestor de base de datos fue PostgreSQL. La base de datos está conformada por tres tablas, cada una haciendo referencia a las entidades o recursos fundamentales del sistema. Una tabla maestra refe- rencia a los roles o perfiles y dos tablas enlazadas hacen referencia a los usuarios y proyectos.
Se desarrolló, el componente servidor en un solo repositorio, utilizando el lenguaje JavaScript con la herramienta TypeScript, haciendo uso del framework Express.js, ambos se ejecutan en el en- torno de ejecución Node.js. Para el apartado de la comunicación bidireccional, se utilizó la librería de Node.js Socket.io.
El componente cliente fue desarrollado en Ja- vaScript, haciendo uso de la librería React. El am- biente de desarrollo Vite.js fue utilizado para trans- pilar y para ejecutar esta librería en el entorno de ejecución de JavaScript Node.js. Para estilizar la in- terfaz, se utilizaron los frameworks de CSS Boots- trap 5 y Material UI.
La estructura de código del circuito permite que se puedan programar y agregar más componentes electrónicos al mismo, lo que lo convierte en un sistema escalable. De igual manera, la estructu- ra basada en componentes de toda la aplicación cliente también permite que agregar más pantallas a la misma sea un proceso mucho más ágil, esto gracias al uso de React. Es importante aclarar que el código del cliente puede ser optimizado para que la rapidez de transmisión y el comportamiento del circuito se agilice.
Por tanto, la comunicación de audio fue llevada a cabo con un desarrollo basado en el esquema WebRTC, haciendo uso de la librería de peerjs, que abstrae gran parte de la lógica detrás de este pro- ceso. El navegador obtiene la información necesa- ria para el protocolo de comunicación a través del servidor público de peerjs. Es importante destacar que, la implementación actual no permite que los dispositivos deben estar conectados a la misma red local para que la implementación de webrtc vía audio funcione. Esta limitación corresponde a la li- brería y puede ser solucionada configurando servi- dores STUN y/o TURN en el proceso.
En el componente servidor se realizaron prue- bas unitarias y de integración, haciendo uso de la librería jest. De igual manera, se realizaron prue- bas manuales de integración entre el Frontend y el Backend, con ambos desplegados en local. Final- mente se pudo comprobar que el cliente accedía correctamente a la API e interactuaba con la base de datos, comprobando la correcta integración de la aplicación web.
Para construir el prototipo a utilizar, se desplegó la base de datos, el servidor y el cliente por sepa- rado, haciendo uso del servicio Render, el cual se encarga de toda la infraestructura de la aplicación. Para realizar el despliegue, se accedió a www.ren- der.com, y se aplicaron las configuraciones perti- nentes para cada servicio en específico, tomando en cuenta las variables de entorno del servidor y del cliente.
Figura 2. Pantalla de estudiante en laboratorio online.
Fuente: Urdaneta, Romero, Pérez (2024)
A pesar de haber realizado un prototipo que muestra todas las funcionalidades del sistema, hay algunas mejoras que podrían implementarse, entre las cuales están: mecanismo de verificación de co- rreo, opción para recuperar contraseña, funcionali- dad para banear usuarios por parte del administra- dor, manejo de privacidad en salas, simulación de componentes de electrónica digital más avanzados.
Es significativo, aclarar que el uso de los planes gratuitos del servicio Render para desplegar los diferentes componentes del sistema no conforma una infraestructura robusta o que pueda escalar a soportar un gran tráfico de información, por lo que sería conveniente para la expansión de este sis- tema realizar un despliegue que ofrezca mayores garantías.
El presente trabajo de investigación cumplió su objetivo de desarrollar una aplicación web para la simulación de un laboratorio dirigido al aprendizaje de la electrónica digital a través de una metodología “tradicional”, siguiendo una fase de planificación, otra de implementación y una última de puesta en producción.
Esta aplicación puede ser considerada una po- tencial herramienta para la educación de este cam- po de conocimiento, debido a que reduce los costos en componentes electrónicos y anula la necesidad de asistencia presencial por parte de estudiantes y profesores.
Asimismo, el desarrollo presentado permite pro- gramar más componentes electrónicos con facili- dad, lo que convierte a este sistema en un proyecto escalable, que abre las puertas a mejoras para brin- dar una experiencia de aprendizaje más completa.
Arias, F. (2012). El Proyecto de Investigación. Intro- ducción a la metodología científica (Ed. 6). Cara- cas, Venezuela: Episteme, C.A.
Cantone, D. (2011). Implementación y debugging. Ciudad Autónoma de Buenos Aires, Argentina: Vi- Da Global.
Marrero, F. (2019). Aplicación web para la comuni- cación audiovisual en entornos educativos. (Pro- yecto final de carrera para optar por título de In- geniería Informática). Universidad de Las Palmas de Gran Canaria, Gran Canaria, España.
Morris, M. (2003). Diseño digital (Ed. 3). Naucalpan de Juárez, México: Pearson.
Oballe Ó., Castellanos J., Sánchez J., Navas R., Daza A., Botín J. (2020). Laboratorio remoto de electrónica digital basado en FPGA. XIV Congre- so de Tecnologías Aplicadas a la Enseñanza de la Electrónica.
Pérez, R. (2021). El software como apoyo didáctico en la enseñanza de la electrónica digital superior en México. Runas Journal of Education & Culture.