Desarrollo de un repositorio de recursos educativos abiertos

Me gustaría aprovechar esta oportunidad para expresar mi más sincero agradecimiento a todas las personas que desempeñaron un papel vital en la realización de este proyecto final de tesis. Su amor incondicional, apoyo emocional y sacrificio constante fueron la base de mi éxito académico.

INTRODUCCIÓN

• R ESUMEN
• O BJETIVOS DEL T RABAJO
• P LANTEAMIENTO DEL T RABAJO
• E STRUCTURA DEL D OCUMENTO

Permitir que nuevos usuarios se registren en la plataforma a través de un formulario de registro. Desarrollo del trabajo: este apartado se centra en la estructura del trabajo en relación con los directorios y archivos existentes.

HERRAMIENTAS UTILIZADAS

T ECNOLOGÍAS P ARA LA P ARTE B ACKEND

• JavaScript
• Node.js
• Express.js
• MongoDB
• Docker
• REST API
• Paquetes NPM

Flexibilidad: Debido a su evolución se puede utilizar tanto del lado del cliente como del lado del servidor utilizando Node.js. En el entorno local se utiliza por su consistencia de datos y velocidad, simulando así, en la medida de lo posible, un entorno real.

T ECNOLOGÍAS P ARA LA P ARTE F RONT - END

• HTML 5
• CSS 3
• Bootstrap 5

Estilos definidos en línea: el atributo "estilo" se utiliza dentro de un elemento HTML para darle un diseño a un elemento específico. Orden de declaración: si varias reglas tienen la misma importancia y especificidad, se aplica la última regla CSS, dando prioridad según el orden de las reglas. Bootstrap.js: alberga la lógica de funcionamiento de los elementos y se encarga de ajustar el tamaño de la pantalla de cada usuario.

Diseño responsive: su característica más destacada es la adaptación de la página o plantillas a cualquier dispositivo. En esta aplicación se elige esta tecnología en su versión 5 por la amplia gama de plantillas y componentes y su facilidad para crear la estructura de las páginas web. Estas columnas se ajustan automáticamente según el estilo de la pantalla, solo necesita especificar cuántas columnas necesita, dividiéndolas según el tamaño de la pantalla.

Todas estas características hacen de Bootstrap una gran herramienta para integrar en el desarrollo de vistas.

T ECNOLOGÍAS DE C ONTROL DE V ERSIONES Y D ESPLIEGUE

• Git
• Azure DevOps
• Azure Web App Para Contenedo res

Una vez finalizado el trabajo sobre las ramas, esta herramienta ofrece la posibilidad de combinarlas, es decir, realizar cambios en las ramas específicas de cada desarrollador que efectivamente se encuentran en la rama principal. Esta acción crea una carpeta oculta llamada ".git" donde almacena metadatos e información del proyecto. Lo más interesante de esta herramienta es la posibilidad de tenerlo todo centralizado e integrado en una única plataforma.

Asimismo, era importante tener una integración total con Azure, debido a que la aplicación está implementada en “Azure Web App for Containers”. Escalado automático: permite aumentar los recursos de la aplicación automáticamente en función de la demanda del tráfico. Gestión de versiones e implementación continua: admite la integración de implementación y despliegue continuo (CICD) con herramientas como Azure DevOps y GitHub.

Monitoreo y diagnóstico: proporciona capacidades integradas de monitoreo y diagnóstico a través de Azure Monitor y Application Insights.

DESARROLLO DEL TRABAJO

A RQUITECTURA IMPLEMENTADA

Incluye tecnologías como Node.js y Express.js para crear un servidor y conectarse a la base de datos MongoDB ubicada en la nube mediante el módulo Mongoose. Componente de autenticación: se encarga de autenticar al usuario generando un token JWT e incluyéndolo en una cookie para mantener la sesión. Componente de indexación: permite cargar entidades al sistema en formato JSON creado en la herramienta de autoría Indie4all [1].

Se almacena en la base de datos y luego llama al generador de código. Generador automático de código: es un archivo JAR proporcionado por los directores que, pasando el modelo JSON de la unidad y utilizando comandos Java, genera el código CSS, JavaScript y HTML correspondiente para luego utilizar el componente de despliegue. Componente de implementación: implementa la unidad generada y almacena el código en la parte pública del proyecto para su correcta visualización en el navegador.

En este sistema las tecnologías más importantes de toda la infraestructura son Node.js y Express.js, las cuales permiten integrar todas las herramientas mencionadas anteriormente para crear una plataforma estable y estructurada.

E STRUCTURA D EL T RABAJO

• Controllers y Routes
• Carpetas Da tabase, Helpers y Middlewares
• Carpetas y Archivos de Gestión de Módulos
• Archivos Ignore, Env y Readme
• Carpetas y Archivos Estáticos
• Archivos Docker
• Carpeta Models
• Carpeta Views
• Archivos Contentgenerator.jar y Azu re-pipeline.yaml

Esto se utiliza para generar código unitario a partir de su modelo JSON. Package-json: archivos en formato JSON que contienen metadatos, dependencias y scripts para el trabajo y las dependencias instaladas. Activos: Consta de archivos CSS, JavaScript y otros recursos proporcionados por los directores de este trabajo para el código que se genera a partir de las unidades.

Público: Es fundamental en proyectos Node.js y se utiliza para almacenar recursos estáticos así como el código de las unidades generadas. App.js: ejecuta el servidor Express.js y es el punto de entrada para el servidor Node.js. Por un lado cabe destacar que el archivo server.js no define un objeto a almacenar en la base de datos, sino que es el modelo que contiene la configuración y organización del servidor Express.

Por otro lado, se definen los modelos role.js, unit.js y user.js que hacen referencia al rol de usuario, unidad de aprendizaje y usuario almacenados en la base de datos. Entidad: Todos los documentos que hacen referencia a las páginas de la entidad, en este caso la vista de lista de entidades y el formulario para editar una entidad. Sirve para, dado un modelo JSON de una entidad de aprendizaje, generar todo el código HTML, CSS y JavaScript de las entidades para que se puedan mostrar correctamente en el navegador.

B ASE DE D ATOS

• Creación y Configuración de MongoDB Atlas
• Conexión entre Node.js y MongoDB

Finalmente se creará un usuario para poder conectarse a la aplicación además de ingresar o elegir a qué IP puede acceder. En este caso, al estar instalada en la nube y todo gestionado por Microsoft Azure, no se sabe la ubicación exacta de la aplicación, por lo que introducimos la IP 0.0.0.0, lo que significa que la base de datos será accesible desde cualquier lugar. Para conectar la plataforma a esta base de datos, primero tome los controladores de la opción "Conectar" seleccionando la versión de Node.js utilizada.

Como se mencionó anteriormente, el paquete “mongoose” [26] se utiliza para conectarse y consultar la base de datos.

R EGISTRO E I NICIO DE S ESIÓN

• Inicio de Sesión y Generación de Token
• Registro de Nu evo Usua rio
• Google Sign In

Hay dos métodos de inicio de sesión disponibles en esta aplicación: mediante el método tradicional ingresando la dirección de correo electrónico y la contraseña o mediante el uso de una cuenta de Google. Verifique que el usuario exista, que esté activo y que su cuenta no esté vinculada a una cuenta de Google. Para iniciar sesión de forma completa y segura se ha implementado la posibilidad de hacerlo con una cuenta de Google o comúnmente conocido como “Google Sign In”.

Este método es muy utilizado por su fácil manejo, con un solo “click” el usuario puede autenticarse en una aplicación sin pasar por ningún formulario y con sus datos de correo electrónico de Google. Este botón, al presionarlo, genera un token para autenticar la aplicación con el servicio de Google creado previamente conocido como ID token. En la línea 43, utilizando middleware, se verifica si el ID del token de Google existe o no.

Lógica para crear el usuario asociado a la cuenta de Google y generar el token como cookie.

V ISTAS S EGÚN TU R OL

• Página Principal
• Perfil de Usuario
• Crud de Unidades
• Crud de Usua rios

Este encabezado se ajusta dinámicamente según el estado de la sesión y la función del usuario. La segunda parte trata de la vista principal, lo que el usuario ve a primera vista. Por último, pero no menos importante, este look se remata al pie de la página.

Consta de información dirigida a los usuarios, como nombre y acceso directo a la página de la universidad, información legal, política de cookies, entre otros. Si el usuario tiene la función de administrador, tiene la posibilidad de editar, eliminar y ver todas las unidades disponibles. Lo único que cambia en esta vista para pantallas más pequeñas es el número de columnas visibles, para tablets cambia a dos, mientras que para móviles solo se ve una.

Si un usuario tiene una función de administrador, tendrá acceso a esta vista y su contenido, y la capacidad de eliminar, editar y agregar nuevos usuarios.

DESPLIEGUE Y PRU EBAS

Una vez guardadas las imágenes, si hay un cambio en el repositorio, reinicia la aplicación web que muestra la imagen con la última etiqueta. Esto hace que el contenedor descargue esa imagen nuevamente e incluya los últimos cambios.

P RUEBAS DE LA A PLICACIÓN

PROPUESTAS DE FU TURO Y CONCLUSIONES

P ROPUESTAS DE FUTURO

Cuanto más avance en el camino del desarrollo web, más mejoras potenciales y problemas surgirán. Acceso a un mejor creador de contenidos que no maneja imágenes en base64 porque reduce el rendimiento de la aplicación [1]. Actualice sus herramientas en la nube para utilizar más recursos, no solo los del nivel gratuito.

C ONCLUSIONES

Durante este proceso se ha desarrollado una aplicación educativa que no solo implementa la visualización y gestión de unidades de aprendizaje, sino que también gestiona los usuarios disponibles mediante la asignación de roles. Además, uno de los aspectos más enriquecedores de este trabajo fue la oportunidad de familiarizarse y trabajar con tecnologías comúnmente utilizadas en la industria, como Node.js, Express.js y Bootstrap. Estas herramientas han ampliado significativamente mis habilidades y me han preparado para afrontar desafíos más complejos en el futuro.

La ventaja de trabajar con estas tecnologías radica en su amplia documentación y su gran presencia en la comunidad de desarrollo. Personalmente, este trabajo ha ampliado mis conocimientos y experiencia en desarrollo web y al mismo tiempo me ha ayudado a desarrollar una plataforma valiosa y distintiva con la que estoy muy satisfecho. Finalmente, estoy profundamente agradecido por las nuevas oportunidades que se abren para mí y la posibilidad de ser parte de este trabajo.

11] Mozilla Corporation y Mozilla Foundation 2002, Mozilla Developer, consultado el 20 de agosto de 2023, .