TFG DAW

PROYECTO FINAL módulo de comunicaciones

TFG desarrollo de aplicaciones web

Tutora TFG: Palanco, Rosa María Autores: Palacios Pérez, Alba Fernandez Sanchez, Juan

02.contexto

03.objetivos

01.INTRODUCCIÓN

04. investigación previa

TABLA DE CONTENIDO

08.pruebas y resultados

06.Funcionalidades y características

05.Análisis y diseño

07.implementación

01

introducción

01. INTRODUCCIÓN

INTRODUCCIÓN

Este módulo de comunicaciones presentado en este Trabajo de Fin de Grado (TFG) es una extensión de un proyecto previo (ARGOS) que se ha basado en el establecimiento de comunicaciones de voz y mensajería para los usuarios de una empresa minera. En este proyecto, se ha implementado un sistema de comunicación basado en llamadas web y chat permitiendo la interacción entre los técnicos y los operarios en la mina. Para ello se han tenido que llevar a cabo investigaciones tales como tecnologías que nos permitieran dichas comunicaciones (WebSocket, SIP…) tanto como un nuevo lenguaje con el que la propia empresa pretende actualizar sus programas, React (ya que actualmente lo tienen basado en puro PHP).

02

contexto

02. contexto

INNTELIA Soluciones Tecnológicas, creado por el Departamento de Innovación y Tecnología de IPH, se enfoca en proyectos de innovación en Minería, Topografía y Medio Ambiente. Destacan proyectos como SAMBA (inspecciones en zonas aéreas de difícil acceso), MAMBO (exploración detallada en medios acuáticos) y ARGOS (optimización de comunicaciones en entornos mineros). El TFG se centra en una extensión del proyecto ARGOS, implementando comunicaciones de voz y mensajería para los usuarios de una empresa minera. Se han investigado tecnologías como WebSocket y SIP, así como el uso del lenguaje de programación React para actualizar los programas de la empresa.

03

OBJETIVOS

03. OBJETIVOS

El objetivo de este Trabajo Fin de Grado es consolidar y ampliar los conocimientos teóricos y prácticos adquiridos durante el curso de Desarrollo de Aplicaciones Web, a través de la realización de un proyecto que aborde el desarrollo de un módulo de comunicaciones en tiempo real. Se busca adquirir experiencia práctica, profundizar en las tecnologías utilizadas y enfrentar desafíos reales, con el fin de fortalecer las habilidades y competencias necesarias para el desarrollo de aplicaciones web de calidad.

04

investigación previa

04. INVESTIGACIÓN PREVIA

React

Es una elección ideal debido a su enfoque basado en componentes, actualización eficiente de la interfaz de usuario y renderizado del lado del cliente. Además, es compatible con librerías y APIs externas, lo que permite aprovechar bibliotecas y herramientas existentes y trabajar con otras tecnologías necesarias para la comunicación en tiempo real.

04. INVESTIGACIÓN PREVIA

Sip (Session Initiation Protocol)

Protocolo de señalización utilizado para establecer, modificar y finalizar sesiones de comunicación en redes IP. Es ampliamente utilizado en aplicaciones de comunicaciones en tiempo real, como voz sobre IP (VoIP), videoconferencias y mensajería instantánea. Es uno de los protocolos más utilizados para la comunicación en tiempo real a través de IP. Permite la integración con otros protocolos.

04. INVESTIGACIÓN PREVIA

Websocket Interface implementado en las llamadas:

WebSocket se elige por su flexibilidad, control, comunicación bidireccional, amplia compatibilidad y por la utilización de esta biblioteca. Es la opción preferida para aplicaciones en tiempo real que requieren interactividad y rendimiento óptimo. La utilización de websocket se debe a que la biblioteca JsSIP utiliza este protocolo de transporte y para aprovechar todas las funcionalidades y características de la biblioteca implica la necesidad de utilizarlo.

04. INVESTIGACIÓN PREVIA

Socket.io

Ofrece una comunicación eficiente y en tiempo real entre el servidor y los clientes. Esto nos ha permitido ofrecer una experiencia fluida y actualizada instantáneamente, aprovechando las ventajas del protocolo de WebSockets y la capacidad de escalar horizontalmente nuestra aplicación.

04. INVESTIGACIÓN PREVIA

LIbrerias y bibliotecas

- Ant Design (antd) es una biblioteca de componentes de interfaz de usuario (UI) de React.- Jssip proporciona funcionalidad para establecer, modificar y finalizar sesiones de comunicación en tiempo real a través de redes IP. - Axios permite realizar peticiones HTTP desde el lado del cliente o del servidor. - React-icons ofrece una amplia variedad de iconos listos para usar en aplicaciones React. - Styled-components permite escribir estilos CSS directamente en los componentes React. - Cors es un paquete de middleware para Express, un marco de aplicación web de Node.js, que habilita el intercambio de recursos de origen cruzado (CORS, por sus siglas en inglés). - Lodash proporciona funciones y métodos para simplificar la manipulación de datos y la programación funcional. - Luxon facilita el manejo y la manipulación de fechas y horas. - Express es un marco de aplicación web rápido, minimalista y flexible para Node.js.

05

Análisis y diseño

05. ANÁLISIS Y DISEÑO

mockup vista general :

05. ANÁLISIS Y DISEÑO

VISTA MODAL / tabs grupos

05. ANÁLISIS Y DISEÑO

resultado vista general

06

Funcionalidades y características

06. METODOLOGÍA

funcionalidades

caracteristicas

Los usuarios que están destinados a usar esta aplicación son tantos los funcionarios de la mina, como los de oficina. Desconocemos los niveles informáticos de ambos, por lo que la aplicación tiene que ser en principio sencilla de usar e intuitiva. Para poder hacer uso de la aplicación, los usuarios necesitarán disponer de dispositivos preparados para su ejecución, para ello, los dispositivos deben de disponer de los principales navegadores web, así como una conexión estable a internet. También deberá de disponer de micrófono integrado, o en su defecto algún puerto para la conexión de alguno.

• Ver listado de contactos
• Ver listado de grupos de contactos
• Buscar un contacto en concreto
• Realizar llamada a un contacto
• Crear nueva conversación con un contacto
• Hacer llamada desde teclado numérico
• Ver lista de conversaciones abiertas
• Ver historial de mensajes con un contacto
• Enviar mensajes
• Borrar conversaciones

07

implementación

07. IMPLEMENTACIÓN

servidor SIP para llamadas

Conexion con el servidor:

07. IMPLEMENTACIÓN

llamadas sip

Eventos de manejo de los estados de la llamada

Eventos de informacion sobre conexión

07. IMPLEMENTACIÓN

llamadas sip

Error en la sesion:

07. IMPLEMENTACIÓN

configuración llamadas

Configuracion de los detalles de la sesion una vez hecha:

07. IMPLEMENTACIÓN

llamadas sip

Restablecer valores iniciales:

07. IMPLEMENTACIÓN

LLAMADA SIP

Modal de error:

07. IMPLEMENTACIÓN

configuración SOCKET.io PARA LA MENSAJERÍA

Crear servidor y establecer configuración.

07. IMPLEMENTACIÓN

configuración SOCKET.io PARA LA MENSAJERÍA

Objeto "clients" para controlar inicios de sesión.

07. IMPLEMENTACIÓN

configuración SOCKET.io PARA LA MENSAJERÍA

Controlar usuarios conectados

07. IMPLEMENTACIÓN

configuración SOCKET.io PARA LA MENSAJERÍA

Controlar usuarios conectados

07. IMPLEMENTACIÓN

configuración SOCKET.io PARA LA MENSAJERÍA

Eventos para conexión cliente-servidor

07. IMPLEMENTACIÓN

base de datos y api

07. IMPLEMENTACIÓN

base de datos y api

07. IMPLEMENTACIÓN

base de datos y api

08

pruebas y resultados

pruebas y resultados

chat individual, grupal y notificaciones

vista lista contactos

chat desde lista contactos

llamada lista contactos

llamada teclado numérico

Gracias por vuestra atención