UNIVERSIDAD TÉCNICA DE MANABÍ

FACULTAD DE CIENCIAS INFORMÁTICAS

CARRERA DE TECNOLOGÍA DE LA INFORMACIÓN

MATERIA

DESARROLLO DE APLICACIONES WEB

TEMA

Aplicación Reserva Hotel

DOCENTE

Ing. Edison Solorzano Solorzano

ESTUDIANTE

Millet Rodríguez Jean

Sornoza Ruiz Luis Alexi

Vinces García Juan José

Enero 21, 2024

Universidad Técnica de Manabí

 INTRODUCCIÓN
El presente trabajo aborda el desarrollo de un sistema integral de gestión
hotelera utilizando Angular como framework principal. La aplicación tiene como
objetivo proporcionar a los usuarios una interfaz eficiente y amigable para administrar
clientes, habitaciones y reservaciones en un entorno hotelero. El código fuente y las
funcionalidades descritas abarcan las diversas operaciones clave necesarias para la
gestión efectiva de un hotel, desde el registro de nuevos clientes hasta la actualización y
eliminación de información relativa a habitaciones y reservaciones.

El sistema se divide en tres secciones principales: Clientes, Habitaciones y

Reservaciones, cada una con sus respectivos formularios de registro y actualización.
Además, se incluyen funcionalidades para visualizar y eliminar registros existentes en
cada categoría. El código se estructura de manera modular, utilizando componentes de
Angular para mejorar la legibilidad y mantenibilidad del código.

En la sección de Autenticación, se ha implementado un sistema de inicio de

sesión y registro que garantiza la seguridad de la información y controla el acceso a las
funcionalidades del sistema. Para la comunicación con el backend, se emplea el servicio
HttpClient de Angular para realizar operaciones CRUD (Crear, Leer, Actualizar,
Eliminar) mediante solicitudes HTTP a un servidor RESTful.

A lo largo de este trabajo, se explorará detalladamente el código fuente

proporcionado, analizando las funcionalidades implementadas, la estructura del
proyecto, así como las prácticas recomendadas en el desarrollo de aplicaciones Angular.
Asimismo, se destacarán los desafíos encontrados y las soluciones adoptadas en la
implementación del sistema de gestión hotelera. Este proyecto no solo ofrece una visión
integral de las capacidades de Angular en el desarrollo de aplicaciones robustas, sino
que también sirve como un recurso educativo para aquellos interesados en la
construcción de sistemas similares.

Universidad Técnica de Manabí

 DESARROLLO
Backend
El backend de la aplicación se desarrolló utilizando Node.js y Express, con una
base de datos PostgreSQL para gestionar la información relacionada con clientes,
habitaciones y reservaciones de un hotel. La conexión a la base de datos se establece
mediante la instancia de Pool. Se implementaron rutas para operaciones CRUD, como
el inicio de sesión y registro de usuarios, así como la gestión de clientes, habitaciones y
reservaciones. El archivo authController.js contiene controladores asincrónicos que
utilizan consultas SQL para interactuar con la base de datos a través del pool,
manejando el registro, actualización y eliminación de registros. Además, se
implementaron medidas de seguridad como la verificación de contraseñas y el manejo
de errores en cada operación. La configuración CORS se estableció para permitir el
acceso desde un origen específico.

Archivo database.js

Ilustración 1 Fragmento del código de database.js

Este archivo establece la conexión a la base de datos PostgreSQL mediante la

creación de una instancia de Pool con los detalles de conexión y la exporta para ser
utilizada en otros archivos

Universidad Técnica de Manabí

 Archivo index.js

Ilustración 2 Fragmento del código de index.js

En este archivo, se configuran las rutas y middleware de Express. Se establece la

conexión a la base de datos, se definen rutas para las operaciones CRUD y se
configuran las opciones CORS para permitir el acceso desde un origen específico.

Archivo authController.js

Ilustración 3 Fragmento del código de authController.js

Universidad Técnica de Manabí

 En este archivo, se definen los controladores para el inicio de sesión, registro de
usuarios y operaciones CRUD relacionadas con clientes, habitaciones y reservaciones.
Cada función utiliza consultas SQL para interactuar con la base de datos a través de la
instancia del pool. Las respuestas se envían en formato JSON según el resultado de las
operaciones.

Frontend
En el frontend, se implementó una interfaz de usuario utilizando Angular. En el
componente LoginComponent, se diseñó un formulario que permite a los usuarios
iniciar sesión o registrarse. El formulario se controla mediante el uso de propiedades de
dos interfaces, LoginData y RegistrationData, que definen la estructura de los datos
necesarios para estas acciones. Se emplea la directiva estructural *ngIf para alternar
entre la visualización del formulario de inicio de sesión y el de registro, dependiendo de
la variable showRegistrationForm. Además, se utiliza el módulo HttpClient para
realizar solicitudes HTTP al servidor backend, específicamente para las operaciones de
inicio de sesión y registro.

Ilustración 4 Fragmento del código de login.component.html

Universidad Técnica de Manabí

 Ilustración 5 Interfaz gráfica del login

En el componente InicioComponent, se desarrolló la interfaz principal del

sistema. Se incluye una barra de navegación y secciones para gestionar clientes,
habitaciones y reservaciones. El contenido de cada sección se muestra u oculta
dinámicamente según las acciones del usuario. Además, se implementaron formularios
para agregar y actualizar clientes, habitaciones y reservaciones, cada uno controlado
mediante el uso de directivas estructurales *ngIf.

Ilustración 6 Fragmento del código de inicio.component.html

Universidad Técnica de Manabí

 Ilustración 7 Interfaz gráfica del inicio

Estos componentes hacen uso extensivo de Angular's Two-Way Data Binding

([(ngModel)]) para mantener sincronizados los datos de los formularios y las
propiedades del componente. Además, se integran servicios del módulo HttpClient para
realizar operaciones CRUD (Crear, Leer, Actualizar, Eliminar) hacia el servidor
backend, que se comunica con rutas específicas para gestionar clientes, habitaciones y
reservaciones.

Ilustración 8 Formulario para registrar un cliente

Por último, la aplicación implementa funciones específicas para realizar

acciones como registrar, actualizar y eliminar clientes, habitaciones y reservaciones,
utilizando las solicitudes HTTP adecuadas hacia el backend.

Universidad Técnica de Manabí

 Link de acceso al código en GitHub
https://github.com/jeanexe123/Proyecto-de-Curso

Link de acceso al código en Drive y al video explicativo

https://drive.google.com/drive/folders/1Gap_k_TCcCMnVBKnSRPKJtdhZGe9a
m3i?usp=sharing

Universidad Técnica de Manabí

 CONCLUSIONES
En el transcurso del desarrollo y análisis de nuestro sistema de gestión hotelera
basado en Angular, hemos identificado varios aspectos clave que resaltan la eficiencia y
versatilidad de este framework en el ámbito de las aplicaciones web. A continuación, se
presentan algunas conclusiones destacadas:

1. Estructura Modular y Legibilidad del Código: Angular ofrece una estructura modular
que facilita la organización del código fuente. La creación de componentes
independientes para cada sección del sistema no solo mejora la legibilidad, sino que
también favorece el mantenimiento y la escalabilidad de la aplicación.
2. Implementación de CRUD con HttpClient: La utilización del servicio HttpClient de
Angular para realizar operaciones CRUD proporciona una comunicación eficiente
con el backend. Las solicitudes HTTP permiten una integración sencilla con
servidores RESTful, lo que simplifica el manejo de datos y la sincronización con la
base de datos.
3. Sistema de Autenticación y Seguridad: La implementación de un sistema de
autenticación robusto garantiza la seguridad de la información y controla el acceso a
las funcionalidades del sistema. La combinación de Angular con tecnologías de
autenticación como JWT (JSON Web Tokens) proporciona una capa adicional de
seguridad.
4. Interfaz de Usuario Amigable: La creación de interfaces de usuario intuitivas y
amigables es uno de los puntos fuertes de Angular. El uso de directivas y enlace
bidireccional de datos facilita la creación de formularios dinámicos y la actualización
en tiempo real de la interfaz en respuesta a las acciones del usuario.
5. Desafíos y Soluciones: A lo largo del desarrollo, nos enfrentamos a desafíos
inherentes al diseño y la implementación de sistemas complejos. La resolución de
estos desafíos ha requerido un enfoque metódico y creativo, destacando la
importancia de la resiliencia y la adaptabilidad en el desarrollo de software.

Universidad Técnica de Manabí