Project

General

Profile

Herramientas utilizadas y proceso de implementación » History » Version 3

Pedro Araya, 12/22/2021 01:27 PM

1 2 Pedro Araya
h1. Herramientas utilizadas y proceso de implementación
2 2 Pedro Araya
3 2 Pedro Araya
A continuación se verán las herramientas utilizadas para la implementación del proyecto, considerando una definición general de la herramienta.
4 2 Pedro Araya
5 2 Pedro Araya
*Visual Studio Code*
6 2 Pedro Araya
7 2 Pedro Araya
Editor de código fuente desarrollado por Microsoft. Entre las características más importantes, incluye soporte para la depuración, control integrado de Git, gratuito y de código abierto. Este será el editor y depurador principal para el código fuente del proyecto.
8 2 Pedro Araya
9 2 Pedro Araya
*Node JS*
10 2 Pedro Araya
11 2 Pedro Araya
Para el desarrollo backend del proyecto, se utiliza el entorno de desarrollo Node JS, un framework basado en javascript. Este entorno será el motor principal del backend del proyecto. En específico, los servicios realizados en node, son:
12 2 Pedro Araya
13 2 Pedro Araya
* Consola virtual: Permite la visualización de la consola virtual en el navegador, y mediante el servicio, se realiza una conexión SSH a la máquina virtual correspondiente del repositorio, para ejecutar los comandos correspondientes. Todo esto posible mediante un proyecto de código abierto, llamado “webssh2” [5], para más detalles ver las referencias.
14 2 Pedro Araya
15 2 Pedro Araya
* Gestión de máquinas virtuales: Servicio que se encarga de gestionar y coordinar las máquinas virtuales de los repositorios, mediante el frontend (React) y el motor de modelos en tiempo real (Convergence). Este servicio es una elaboración propia, debido a que no existe un sistema de este tipo en código abierto.
16 2 Pedro Araya
17 2 Pedro Araya
* Gestión de cuentas de usuario y repositorios: Encargado de la gestión de usuarios, mediante la creación y validación de sesiones. Además, se encarga de gestionar los repositorios de los usuarios, en conjunto trabaja con el motor Convergence para la definición de permisos. Creación propia, debido a la particularidad del sistema.
18 2 Pedro Araya
Gestión de aula virtual: Permite la gestión de aulas virtuales, servicio principal para los usuarios profesores y alumnos.
19 2 Pedro Araya
20 2 Pedro Araya
Las librerías principales utilizadas en Node JS, son las siguientes:
21 2 Pedro Araya
22 2 Pedro Araya
* Express: Proporciona un conjunto sólido de características para la implementación de aplicaciones web.
23 2 Pedro Araya
24 2 Pedro Araya
* JWT: Conocido como JSON Web Token, es un estándar para la creación de tokens de acceso.
25 2 Pedro Araya
26 2 Pedro Araya
* SSH2: Módulo que permite la implementación de cliente y servidor SSH.
27 2 Pedro Araya
28 2 Pedro Araya
* Mysql2: Cliente Mysql que permite la conexión con un servidor de base de datos MySQL.
29 2 Pedro Araya
30 2 Pedro Araya
* WebSocket: Implementación de protocolo WebSocket, tanto cliente como servidor, utilizado para la conexión con Convergence.
31 2 Pedro Araya
32 2 Pedro Araya
* Convergence: Módulo que integra un cliente de Convergence, el cual permite utilizar la API para comunicarse con el servidor Convergence. 
33 2 Pedro Araya
34 2 Pedro Araya
*Postman*
35 2 Pedro Araya
36 2 Pedro Araya
Aplicación que permite realizar pruebas API. Es un cliente HTTP que da la posibilidad de probar solicitudes “HTTP Request”, a través de una interfaz gráfica. Está es utilizada para probar el código en desarrollo del backend.
37 2 Pedro Araya
38 2 Pedro Araya
*MySQL Community Server*
39 2 Pedro Araya
40 2 Pedro Araya
Sistema administrador de bases de datos (Database Management System, DBMS) para bases de datos relacionales, esta aplicación permite montar un servidor de base de datos MySQL con una licencia gratuita. Es la base de datos utilizada para la implementación del proyecto, en específico, la gestión de usuarios, aulas virtuales y parte de los repositorios (Debido que gran parte de la información se guarda en la base de datos de Convergence). 
41 2 Pedro Araya
42 2 Pedro Araya
*MySQL Workbench*
43 2 Pedro Araya
44 2 Pedro Araya
Herramienta visual de diseño de bases de datos que integra desarrollo de software, administración de bases de datos, diseño de bases de datos, gestión y mantenimiento para el sistema de base de datos MySQL. En el contexto de la implementación, se utiliza para la creación, gestión y realización de pruebas de la base de datos.
45 2 Pedro Araya
46 2 Pedro Araya
*Convergence*
47 2 Pedro Araya
48 2 Pedro Araya
Motor para el desarrollo rápido de aplicaciones colaborativas de tiempo real. Para ello utiliza un almacén de datos colaborativo en tiempo real, a diferencia de otros frameworks que se detienen al intentar proporcionar datos en tiempo real. Proporciona las funcionalidades que un desarrollador necesita para crear una aplicación colaborativa. Algunas características principales son:
49 2 Pedro Araya
50 2 Pedro Araya
* Datos en tiempo real: Permite a los usuarios editar el mismo dato al mismo tiempo, manteniendo todas las vistas de la información sincronizadas.
51 2 Pedro Araya
52 2 Pedro Araya
* Usuarios e identificación: Permite a los desarrolladores gestionar a los usuarios e identificar mediante el sistema en donde están colaborando y validar permisos correspondientes.
53 2 Pedro Araya
54 2 Pedro Araya
* Presencia: Permite a los usuarios conocer quién está trabajando en el modelo de tiempo real y quién está disponible, para poder trabajar de forma más efectiva con los usuarios colaboradores.
55 2 Pedro Araya
56 2 Pedro Araya
* Conciencia de colaboración (Awareness): La mejor manera de resolver conflictos de edición colaborativa, es evitarlos en primer lugar. Convergence proporciona sólidas capacidades de 
57 2 Pedro Araya
conocimiento de la colaboración que ayudan a los usuarios trabajar juntos sin conflictos.
58 2 Pedro Araya
59 2 Pedro Araya
* Chat y mensajería: Permite a los usuarios comunicarse con un chat embebido directamente en la aplicación.
60 2 Pedro Araya
61 2 Pedro Araya
* Código abierto y gratuito.
62 2 Pedro Araya
63 2 Pedro Araya
Convergence provee todas estas características y más mediante una API, reduciendo el tiempo y complejidad de implementar para diferentes frameworks. 
64 2 Pedro Araya
65 2 Pedro Araya
En el proyecto, este será el núcleo principal para el manejo de sesiones colaborativas en el entorno virtual de los usuarios del sistema SEAP-UTA. En específico, se guardarán los datos del repositorio en tiempo real, tanto elementos (carpetas y archivos) y su contenido (archivos o código de programación).
66 2 Pedro Araya
67 2 Pedro Araya
*React*
68 2 Pedro Araya
69 2 Pedro Araya
Utilizado para el desarrollo del frontend del proyecto. React es una biblioteca Javascript de código abierto diseñada para crear interfaces de usuario con el objetivo de facilitar el desarrollo de aplicaciones en una sola página. Entre sus características principales contiene:
70 2 Pedro Araya
71 2 Pedro Araya
* Componentes: Los componentes permiten separar la interfaz de usuario en piezas independientes, reutilizables y pensar en cada pieza de forma aislada.
72 2 Pedro Araya
73 2 Pedro Araya
* Propiedades: Las propiedades (también conocidas como 'props') pueden definirse como los atributos de configuración para dicho componente. Éstas son recibidas desde un nivel superior, normalmente al realizar la instancia del componente y por definición son inmutables.
74 2 Pedro Araya
75 2 Pedro Araya
* DOM (Document Object Model) virtual: React mantiene un virtual DOM propio, en lugar de confiar solamente en el DOM del navegador. Este comportamiento es clave en React y causante de su alto rendimiento, ya que cuando cambia un dato en la aplicación no necesita actualizar la vista entera.
76 2 Pedro Araya
77 2 Pedro Araya
* Elementos y JSX: React no retorna HTML. El código embebido dentro de Javascript, similar a HTML pero realmente es JSX. Similares a las funciones de Javascript, pero expresadas mediante una sintaxis propia de React llamada JSX. Lo que produce son elementos en memoria y no elementos del DOM tradicional, con lo cual las funciones no ocupan tiempo en producir pesados objetos del navegador sino simplemente elementos de un DOM virtual.
78 2 Pedro Araya
79 2 Pedro Araya
* Isomorfismo: Permite ejecutar el código tanto en el cliente como en el servidor.
80 2 Pedro Araya
81 2 Pedro Araya
En específico, en el proyecto es utilizado para la generación de vistas web del usuario. Cabe destacar que para el desarrollo del editor de código, este está basado en un ejemplo de Convergence llamado “code-editor-demo” [11], el cual en principio da una base para el desarrollo del editor de código del entorno virtual del proyecto. 
82 2 Pedro Araya
83 2 Pedro Araya
*Nginx*
84 2 Pedro Araya
85 2 Pedro Araya
Servidor web/proxy inverso ligero de alto rendimiento y un proxy para protocolos de correo electrónico.​​ Es un software libre y de código abierto, contemplando una versión de pago llamada Nginx Plus. Utilizando la versión gratuita, en el proyecto se implementa como coordinador de los diferentes servicios del proyecto, permitiendo tener un solo dominio.
86 2 Pedro Araya
87 2 Pedro Araya
*Docker*
88 2 Pedro Araya
89 2 Pedro Araya
Docker es un proyecto de código abierto que automatiza el despliegue de aplicaciones dentro de contenedores de software, proporcionando una capa adicional de abstracción y automatización de virtualización de aplicaciones en múltiples sistemas operativos. 
90 2 Pedro Araya
91 2 Pedro Araya
En el proyecto SEAP-UTA, Docker es una pieza fundamental para el despliegue de la aplicación tanto para los servicios y el coordinador. Pero no solo para despliegue, esta herramienta es fundamental para el desarrollo de entornos virtuales, en específico, para la consola virtual. Esto se aborda mediante el uso de contenedores virtuales con una imagen “linuxserver/openssh-server” [14], modificada para el propósito del repositorio en particular, en conjunto al servicio encargado de gestionar estos contenedores y derivar las sesiones a las máquinas respectivas.
92 2 Pedro Araya
93 2 Pedro Araya
El contenedor mencionado anteriormente posee un sistema operativo Linux con la distribución Alpine, el cual puede ser configurado para ejecutar múltiples lenguajes de programación y realizar diversas funciones para el desarrollo de software.
94 2 Pedro Araya
95 2 Pedro Araya
*GIT*
96 2 Pedro Araya
97 2 Pedro Araya
Git es un sistema de control de versiones distribuido, rápido y escalable, el cual funciona con un conjunto de comandos que proporciona operaciones de alto y completo acceso a los componentes internos de un proyecto.
98 2 Pedro Araya
99 2 Pedro Araya
Su propósito es llevar un registro de los cambios que se realicen en el proyecto, incluyendo  la coordinación de trabajo que está ofrece para que varios personas sobre un mismo proyecto puedan trabajar sobre un repositorio.
100 2 Pedro Araya
101 2 Pedro Araya
*Github*
102 2 Pedro Araya
103 2 Pedro Araya
GitHub es una plataforma para alojar el código de las aplicaciones y herramientas de cualquier desarrollador, y como usuario, puedes conocer a los desarrolladores y colaborar en sus proyectos. Esta trabaja en conjunto a GIT.
104 2 Pedro Araya
105 2 Pedro Araya
Esta herramienta será utilizada para general el control de versiones del proyecto, de forma que el cliente pueda monitorizar el estado actual del proyecto.
106 2 Pedro Araya
107 2 Pedro Araya
*Con respecto al proceso de implementación*
108 2 Pedro Araya
109 2 Pedro Araya
Utilizando las herramientas mencionadas, se implementaron los siguientes servicios:
110 2 Pedro Araya
111 3 Pedro Araya
!http://pomerape.uta.cl/redmine/attachments/download/1912/seap_implementaci%C3%B3n.PNG!
112 2 Pedro Araya
113 2 Pedro Araya
114 2 Pedro Araya
*Referencias*
115 2 Pedro Araya
116 2 Pedro Araya
[1] Software Modeling & Design. 2011. Hassan Gomaa.
117 2 Pedro Araya
118 2 Pedro Araya
[2] Pattern-Oriented Software Architecture Vol. 4. 2007. Frank Buschmann.
119 2 Pedro Araya
120 2 Pedro Araya
[3] Apuntes del curso de aplicaciones distribuidas avanzadas - 2021. Diego Aracena. 
121 2 Pedro Araya
122 2 Pedro Araya
[4] Visual Studio Code. 2021. Microsoft. 
123 2 Pedro Araya
      Enlace: https://code.visualstudio.com
124 2 Pedro Araya
125 2 Pedro Araya
[5] Proyecto en Github - “billchurch/webssh2”. 2021. Bill Church. 
126 2 Pedro Araya
      Enlace: https://github.com/billchurch/webssh2
127 2 Pedro Araya
128 2 Pedro Araya
[6] Productos de MySQL. Oracle. 2021. 
129 2 Pedro Araya
      Enlace: https://www.mysql.com
130 2 Pedro Araya
131 2 Pedro Araya
[7] Node JS. Open JS Foundation. 2021. 
132 2 Pedro Araya
      Enlace: https://nodejs.org/es/
133 2 Pedro Araya
134 2 Pedro Araya
[8] Express para NodeJS. Open JS Foundation. 2021. 
135 2 Pedro Araya
      Enlace: https://expressjs.com/es/
136 2 Pedro Araya
137 2 Pedro Araya
[9] Documentación de Convergence. Convergence Labs. 2021. 
138 2 Pedro Araya
      Enlace: https://convergence.io/documentation/
139 2 Pedro Araya
140 2 Pedro Araya
[10] React. Facebook Open Source. 2021. 
141 2 Pedro Araya
        Enlace: https://es.reactjs.org
142 2 Pedro Araya
143 2 Pedro Araya
[11]  Proyecto en Github - “convergencelabs/code-editor-demo”. 2021.
144 2 Pedro Araya
         Enlace: https://github.com/convergencelabs/code-editor-demo
145 2 Pedro Araya
146 2 Pedro Araya
[12] Nginx. F5 Company. 2021. 
147 2 Pedro Araya
        Enlace: https://www.nginx.com
148 2 Pedro Araya
149 2 Pedro Araya
[13] Docker Engine. Docker. 2021. 
150 2 Pedro Araya
        Enlace: https://www.docker.com
151 2 Pedro Araya
152 2 Pedro Araya
[14] Documentación de contenedor “linuxserver/openssh-server”. linuxserver.io Community. 2021
153 2 Pedro Araya
        Enlace: https://docs.linuxserver.io