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 |