• No se han encontrado resultados

Desarrollo web de tienda online

N/A
N/A
Protected

Academic year: 2023

Share "Desarrollo web de tienda online"

Copied!
66
0
0

Texto completo

(1)

Trabajo de fin de grado

Desarrollo de tienda online con arquitectura de microservicios basados en Java y página web basada en Angular

Alberto Ruiz Rodríguez

Grado en Ingeniería Informática (itinerario en Tecnologías de la información) Antoni Oller Arcas

19/01/2023

(2)

Copyright

© Alberto Ruiz Rodríguez

Reservados todos los derechos. Está prohibido la reproducción total o parcial de esta obra por cualquier medio o procedimiento, comprendidos la impresión, la reprografía, el microfilme, el tratamiento informático o cualquier otro sistema, así como la distribución de ejemplares mediante alquiler y préstamo, sin la autorización escrita del autor o de los límites que autorice la Ley de Propiedad Intelectual.

(3)

FICHA DEL TRABAJO FINAL

Título del trabajo: Desarrollo de tienda online con arquitectura de microservicios basados en Java y página web Angular

Nombre del autor: Alberto Ruiz Rodríguez Nombre del consultor: Antoni Oller Arcas Fecha de entrega (mm/aaaa): 01/2023

Área del Trabajo Final: Java EE

Titulación: Grado en Ingeniería Informática (itinerario en Tecnologías de la información)

Resumen del Trabajo (máximo 250 palabras):

En este trabajo se ha llevado a cabo el desarrollo de una tienda online de tickets de eventos de diversas categorías como deportes o música. Dicha tienda contiene autenticación de usuarios con Okla, pasarela de pago securizada para tarjetas de crédito con Stripe y comunicaciones cifradas a través de HTTPS entre servidor y cliente.

La arquitectura del software de la parte servidor está basada en Java 14, usando el framework Spring para facilitar el desarrollo. Por otro lado, en la parte web se ha optado por el uso de Angular. Para la persistencia de datos, se ha escogido una base de datos relacional de tipo MySQL

(4)

Abstract (in English, 250 words or less):

The work is based on the development of an online store to sell ticket events with differents categories like music or sports. This store contains user authentication with Okla, a secure payment gateway for credit cards with Stripe and encrypted communications through HTTPS between server and client.

The server side software architecture is based on Java 14, using the Spring framework to make easy the development process. On the other hand, in the web part the use of Angular has been chosen. For data persistence, a MySQL- type relational database has been used.

Palabras clave (entre 4 y 8):

Java, Spring, Angular, HTTPS

(5)

Índice

1. Introducción ... 1

1.1 Contexto y justificación del Trabajo ... 1

1.2 Objetivos del Trabajo ... 1

1.3 Enfoque y método seguido ... 1

1.4 Planificación del Trabajo ... 2

1.5 Breve sumario de productos obtenidos ... 5

1.6 Breve descripción de los otros capítulos de la memoria... 5

2. Análisis de requerimientos, arquitectura y diseño ... 6

2.1 Casos de uso y actores ... 6

2.2 Diseño relacional de la base de datos ... 7

2.3 Diagrama de clases principales ... 8

2.4 Diagrama de arquitectura ... 9

2.5 Modelo de pantallas (prototipo) ... 11

3. Desarrollo del proyecto... 14

3.1 Entorno de desarrollo ... 14

Parte backend: ... 14

Parte frontend: ... 14

Base de datos ... 15

3.2 Implementación ... 15

Primeros pasos ... 15

Listado de eventos ... 17

Detalle de evento ... 24

Carrito de compra ... 25

Checkout ... 27

Login de promotor/cliente ... 37

Despliegue de la aplicación ... 45

3. Conclusiones ... 60

4. Bibliografía ... 61

(6)

1. Introducción

1.1 Contexto y justificación del Trabajo

La idea fundamental para comenzar este trabajo ha sido encontrar una necesidad de negocio de venta de tickets de forma online, debido a que la venta física está en claro declive en la actualidad. Por lo que se ha decidido apostar por esta oportunidad de negocio.

1.2 Objetivos del Trabajo

 Gestión de los tickets de la tienda online y persistencia de datos en una base de datos

 Autenticación de usuarios

 Pasarela de pago

 Despliegue y puesta en marcha en un entorno productivo real como Amazon Web Services, plataforma que se adecúa a las necesidades de los proyectos reales

1.3 Enfoque y método seguido

El trabajo comenzó como una oportunidad de negocio entre amigos, debido a que la venta de tickets físicos no está atravesando su mejor momento en cuanto a resultados económicos.

Surge la idea de desarrollar una tienda online de distintos tipos de eventos.

Se inicia una fase previa de análisis de requerimientos a alto nivel, en la cual se diseñaron de forma conceptual las entidades de negocio que iban a coexistir dentro de la aplicación para poder abordar los casos de uso que se elaboraron posteriormente.

(7)

A continuación, se elabora una planificación para poder abordar de forma cohesionada y coherente los distintos hitos necesarios para la consecución exitosa del proyecto. Se detallará en el siguiente apartado.

Después de esta planificación, se comenzó con diversas pruebas de concepto de las tecnologías planteadas inicialmente para estudiar la viabilidad de poder trabajar con ellas.

Tras dichas pruebas, el desarrolló se inició conforme a dicha planificación.

1.4 Planificación del Trabajo

La planificación se elaboró en PEC 1 y consta de tres hitos, coincidiendo con la funcionalidad que realiza cada uno de los tipos de usuario de la aplicación, teniendo en cuenta además el despliegue de la aplicación.

Diagrama de Gantt

(8)

En el diagrama de recursos, las líneas sombreadas en amarillo serían los días libres asignados a ese recurso, que en este caso sería yo mismo.

(9)

Diagrama PERT

Se ha obtenido una tienda online conformada con dos desarrollos software:

Por un lado, la parte servidor, encargada de recopilar la información albergada de la base de datos y por otro lado de almacenar en ella la información procedente del usuario de la aplicación web.

Por otro lado, la parte cliente. Visualiza la información de los distintos eventos que pueden ser ofertados y permite poder adquirir tickets de ellos a través de un habitual proceso de carrito de compra, incluyendo el uso de una pasarela de pago securizada.

(10)

1.5 Breve sumario de productos obtenidos

Se ha obtenido una tienda online conformada con dos desarrollos software:

Por un lado, la parte servidor, encargada de recopilar la información albergada de la base de datos y por otro lado de almacenar en ella la información procedente del usuario de la aplicación web.

Por otro lado, la parte cliente. Visualiza la información de los distintos eventos que pueden ser ofertados y permite poder adquirir tickets de ellos a través de un habitual proceso de carrito de compra, incluyendo el uso de una pasarela de pago securizada.

1.6 Breve descripción de los otros capítulos de la memoria

En el segundo capítulo se realizará un análisis de los requerimientos y se propondrá una arquitectura y diseño para el proyecto. En el tercer capítulo se mostrarán los principales aspectos relacionados con la implementación y desarrollo. El cuarto contendrá las conclusiones y el quinto y último capítulo se compondrá de la bibliografía.

(11)

2. Análisis de requerimientos, arquitectura y diseño

2.1 Casos de uso y actores

 Login (Actor: Promotor)

o Precondiciones: Debe haber un promotor registrado o Flujo principal:

 Un usuario logado recibirá un mensaje de bienvenida y podrá visualizar el botón de “promotors” y “orders”

o Postcondiciones: El promotor registrado será capaz de usar la plataforma.

 Comprar ticket (Actores: comprador)

o Flujo principal:

 Alta de ticket: Cuando un comprador selecciona un evento y pincha en el botón “comprar ticket”, automáticamente se genera un nuevo ticket asociado a un evento y a un

comprador.

 Consulta de tickets: Un comprador podrá consultar la lista de tickets adquridos

o Postcondiciones: El comprador podrá interactuar con los tickets asociados a los eventos.

(12)

2.2 Diseño relacional de la base de datos

Donde PK corresponde a clave primaria, CK a un campo con restricciones de formato, FK corresponde a clave foránea y NN equivale a campo no vacío.

Un comprador podrá tener asociados varios tickets o ninguno (0 a n) mientras que un ticket solo podrá tener asociado un comprador (1)

Un evento podrá tener asociados varios tickets o ninguno (0 a n) mientras que un ticket solo podrá tener asociado un evento (1)

Un promotor podrá tener asociados varios eventos o ninguno (0 a n) mientras que un evento solo podrá tener asociado un promotor (1).

Cabe mencionar que un ticket se generará solo cuando un comprador adquiera su participación en un evento.

(13)

2.3 Diagrama de clases principales

Se representan las clases principales, así como los métodos asociados a cada una de ellas, definiendo también el tipo de datos de cada uno de sus parámetros.

Así mismo, definimos una herencia entre la clase padre Persona y las clases hijas Promotor, Comprador y Administrador.

Por último, podemos comentar la relación de asociación entre la clase Ticket y la clase Evento, debido a que un ticket no podría existir sin un evento, y entre la clase Ticket y la clase Comprador, también debido a que un ticket no podría existir sin un comprador.

(14)

2.4 Diagrama de arquitectura

Este diagrama representaría a alto nivel la arquitectura de la aplicación. Sobre la tecnología a utilizar en la base de datos se están realizando pruebas de concepto con bases de datos relacionales, concretamente con MySQL, aunque no es descartable el uso de una tecnología como MongoDB.

En cuanto al backend, se quiere utilizar la última versión en estos momentos (Java 19) junto con la versión 2.7.5 del módulo de Spring Boot Parent. También se requiere del uso de otros módulos de Spring como Spring Boot Data JPA y Spring Boot Data Rest.

El primero está orientado a facilitarnos el acceso a la capa de persistencia con ayuda del protocolo JPA, mientras que el primero nos facilita el acceso y disponibiliza a su vez una serie de métodos para crear un REST API que pueda ser consumido por el frontend.

También se quiere utilizar el proyecto Lombok para automatizar la creación de clases de tipo getter y setter, así como para facilitar la creación de instancias de cada clase. Así se logra evitar la utilización de código redundante.

(15)

En cuanto a la parte frontend, se han iniciado pequeñas pruebas de concepto, configurando el entorno detallado en la siguiente imagen:

La versión de Angular es la 14, concretamente 14.2.8 lanzada el 2022-10-26.

(16)

2.5 Modelo de pantallas (prototipo)

 Login de usuario

 Listado de eventos disponibles

(17)

 Detalle de evento

 Alta de ticket (pago de evento)

(18)

 Consulta de tickets vendidos

(19)

3. Desarrollo del proyecto

3.1 Entorno de desarrollo

El primer paso para comenzar con el proyecto fue la instalación de las herramientas necesarias para poder desarrollar tanto la parte backend como la parte frontend.

Parte backend:

Para la parte backend es necesario instalar el JDK de Java, que es el kit de desarrollo que se necesita para poder desarrollar aplicaciones

También se necesita instalar Apache Maven, herramienta que sirve para facilitar las fases de compilación del proyecto, así como para poder gestionar la distribución de librerías de Spring, en este caso concreto.

Como IDE, se va a utilizar Intel IJ IDEA Community Edition que es la versión gratuita de este software.

Parte frontend:

En cuanto a la parte frontend hay que instalar Node.js que es el entorno de ejecución para Javascript.

También tenemos que instalar npm, que es el manejador de paquetes de Javascript y nos va a servir para descargarnos y gestionar las dependencias externas de librerías que necesitemos durante el desarrollo.

Para poder desarrollar con el framework Angular, el cual está basado en Typescript, hay que instalar tsc que es el compilador de Typescript y permite transformar el código Typescript a Javascript, que es el formato que interpretan los navegadores web

En cuanto al IDE, se instaló Visual Studio Code que es un editor de código fuente gratuito desarrollado por Microsoft y tiene la ventaja de que se integra muy bien con Typescript, permitiendo el uso de extensiones o plugins que facilitan mucho las tareas de desarrollo, así como la detección de errores de tipado.

(20)

Base de datos

Para la persistencia de datos de los productos de la tienda, así como para registrar los datos de los pedidos, es necesario utilizar una base de datos. Se ha optado por una base de datos relacional de tipo MySQL.

Es necesario instalar el motor de la base de datos para poder utilizarla. Para facilitar su manejo, se ha utilizado MySQL Workbench como programa cliente de acceso.

3.2 Implementación

Primeros pasos

Para empezar a desarrollar el proyecto, comenzamos con la creación de un microservicio Java basado en Spring Boot. Para ello utilizamos la web Spring Initializr (Spring Initializr), la cual nos va a mostrar qué versión de Spring Boot queremos utilizar así como la versión de Java.

En mi caso, yo escogí la versión de Java 19 y la versión 2.7.5 de Spring Boot

(21)

Al añadir las dependencias, escogemos las siguientes:

 Spring Data JPA: Es un módulo de Spring que nos va facilitar bastante la creación de consultas e inserciones en la base de datos.

 Rest repositories: Es un módulo de Spring que nos ayuda a exponer la capa de repositorio de nuestra aplicación a través de servicios REST utilizando Spring Data REST

 MySQL Driver: Controlador utilizado para comunicar el microservicio Java con la base de datos de tipo MySQL.

 Lombok: Herramienta de desarrollo que ayuda a limpiar el código y simplifica algunos tipos de clase.

(22)

Para la parte front, se instalaron npm y node con las siguientes versiones:

Después de estas instalaciones, se tuvo que instalar Angular CLI, la cual es una interfaz de comandos que permite crear proyectos Angular, así como módulos, componentes, servicios o directivas con diversas instrucciones. Para instalarlo usando el gestor de paquetes npm se utilizó la siguiente instrucción

“npm install -g @angular/cli”.

Para crear el proyecto Angular inicial, se utilizó la instrucción “ng new nombreProyecto”.

Listado de eventos

La primera funcionalidad que se comenzó a desarrollar fue el listado de eventos dado que servía de base para empezar a estructurar y evolucionar la aplicación.

Se empezaron a crear las distintas entidades en la base de datos:

Tabla event

(23)

Tabla event_category

Tabla promoter

Como se puede apreciar, la tabla event alberga las claves foráneas relativas a los identificadores de las tablas event_category y promoter, puesto que un evento pertenece a una categoría y, a su vez, a un promotor.

Asimismo, comenzamos a crear dichas entidades en el backend. Se creó un paquete llamado entity dentro de la estructura del proyecto para albergar este tipo de clases.

(24)

Clase Event

(25)

Clase EventCategory

(26)

Clase Promoter

Estas clases contienen diversas anotaciones:

 @Entity: Es una anotación JPA que indica que esa clase representa datos que pueden ser persistidos en la base de datos

 @Data: Es una anotación Lombok que nos ahorra declarar los métodos getter y setter de cada una de las clases en las que se utiliza.

 @Getter y @Setter: Son anotaciones Lombok que nos ahorra declarar los métodos getter y setter, respectivamente.

 @Table: Es una anotación JPA que indica el nombre de la tabla en base

(27)

 @Id: Anotación de JPA que especifica la clave primaria de una entidad.

 @GeneratedValue: Anotación de JPA que indica la estrategía a seguir para creación de claves primarias en las entidades. En estas entidades usamos la estrategia IDENTITY, la cual genera un nuevo valor autoincremental con cada operación de inserción en la base de datos.

 @Column: Anotación de JPA que específica el nombre de la columna en base de datos correspondiente a ese campo.

 @ManyToOne: Anotación de JPA que representa una relación n a 1.

 @OneToMany: Anotación de JPA que representa una relación 1 a n.

 @JoinColumn: Anotación de JPA que especifica el nombre de la columna en una de las relaciones anteriores a las que hace referencia dicho campo.

A continuación, creamos las clases de tipo repository para poder exponer dichas entidades:

Clase EventRepository

(28)

Clase EventCategoryRepository

Clase PromoterRepository

En la parte front, construimos un servicio llamado event.service.ts, el cual se encarga de realizar las peticiones al back. Dicho servicio es usado por el componente event.component.ts. Este componente maneja la lógica de la pantalla y determina a qué servicio llamar dependiendo qué parte visual de la pantalla de eventos estemos utilizando.

Para conformar la visualización de esta pantalla se ha utilizado event.component-grid.html. Es una página html que alberga los elementos html de la página, como el botón “Add to cart”, así como elementos Angular como el componente ngb-pagination, encargado de la paginación.

En cuanto a la estructura del proyecto front, podemos comprobar la similitud que tiene con respecto al microservicio Java, debido a la división en paquetes o carpetas de los distintos ficheros, atendiendo a su funcionalidad. Ambos proyectos siguen un patrón de diseño conocido como Modelo, Vista y Controlador (MVC).

El modelo se encarga de la parte de manejo de datos de la aplicación, la vista se encarga de visualizar o recoger la información para el usuario y el controlador alberga la lógica necesaria para procesar los datos del modelo junto con las órdenes procedentes de la vista.

(29)

Captura del listado de eventos

El listado de eventos soporta además búsquedas por categorías, usando el componente event-category-menu, representado en la captura anterior por la columna blanca de la izquierda, búsquedas por nombre, usando el componente search y paginación, usando el componente Angular ngb-pagination

Detalle de evento

Para acceder al detalle de cada evento, hay que pinchar en cada descripción y nos aparecerá la siguiente ventana:

(30)

Para desarrollar esta funcionalidad en el frontend se ha creado el componente event-details. Este componente utiliza el servicio event.service con el método getEvent para poder recuperar la información de dicho evento y visualizarla en la pantalla.

Carrito de compra

Para la funcionalidad de carrito de compra se ha creado un componente llamado cart-status para la previsualización en la pantalla de listado de eventos de la suma de los tickets y su importe

Si continuamos con el proceso de compra, pinchando en el componente previamente rodeado en rojo en la captura anterior, abriremos la siguiente ventana:

(31)

Dicha pantalla se alimenta del componente cart-details y nos permite visualizar el detalle del carrito, modificar el número de tickets del evento que queramos adquirir o eliminarlo, así como visualizar los importes totales y cantidades.

Para visualizar esta información, dicho componente se apoya de la clase CartItem presente en la carpeta common

(32)

Checkout

La pantalla de checkout nos permite rellenar la información del cliente, la dirección de envío de los tickets, la dirección de facturación, los datos de la tarjeta bancaria y un pequeño resumen del pedido

Se usa el componente checkout, que es bastante complejo. Utiliza el servicio formService para la carga de los países y sus provincias, utilizando servicios del backend (CountryRepository y StateRepository), así como sus clases entidades respectivas

Clase CountryRepository (backend)

(33)

Clase StateRepository (backend)

Tablas en base de datos

(34)

En este componente integramos la API de Stripe para poder soportar los pagos con tarjeta. Para ello, obtenemos la clave pública para acceder a nuestra cuenta del servicio de dicho API:

A continuación, insertamos dicha clave en nuestro fichero environments.ts:

(35)

En checkout-component.ts, leemos dicha clave:

(36)

Y creamos el componente de Stripe

(37)

Y lo visualizamos en el html

Además del formService comentado anteriormente, el componente checkout utiliza otros dos servicios:

 CartService: Maneja con el localStorage del navegador los ítem del carrito, así como su importe y unidades.

 CheckoutService: Consta de dos servicios. Por un lado, placeOrder que almacena la orden de compra y createPaymentIntent que manda la orden de compra a Stripe para procesar el pago.

o placeOrder: Invoca al endpoint /purchase expuesto en el CheckoutController del backend. Utiliza el CheckoutService con el método placeOrder para persistir la información en las tablas Customer, Orders, order_item y address, gracias al dto Purchase

(38)

o createPaymentIntent: Invoca al endpoint /payment-intent, el cual se encarga de enviar la orden de pago a Stripe mediante utilizando el objeto PaymentInfo. Dicho objeto es propio del API Stripe, añadido como dependencia en el backend

(39)

Detalle del servicio de Stripe

Cuando se completa el pedido y la orden de pago ha llegado a Stripe de forma correcta, obtenemos el siguiente mensaje:

(40)

Revisamos el último pago en el listado de pagos de la consola de administración de Stripe

Pinchamos en él y nos aparece el detalle de la transacción, así como los datos del cliente que hemos recogido en la web

(41)

Stripe también nos ofrece la posibilidad de enviar el recibo a la dirección de correo del cliente, con la opción “Enviar recibo”

Email con recibo del pedido

Comprobamos en la base de datos que el pedido ha sido registrado, así como la dirección de facturación, la dirección del cliente y los datos personales del cliente:

(42)

Login de promotor/cliente

Esta funcionalidad ha sido desarrollada utilizando Okta que es una empresa que provee de servicios de autorización y autenticación de usuarios.

Tanto en el front como en el back es necesario añadir las dependencias de este servicio y diversas configuraciones

Parte back:

Dependencia en el pom

Clave de autorización de client y url del servicio

(43)

Configuración de seguridad para el visualizado del endpoint /orders encargado de mostrar los pedidos de un cliente previamente autenticado

(44)

Parte front:

Dependencias de Okta

El widget de Okta, contenido en el componente de login

(45)

Variables de configuración de Okta como el identificador de cliente, el servidor, la redirección al ser exitosa la autenticación y el ámbito.

(46)

Lógica del componente de login

(47)

Si accedemos al dashboard de Okta, encontramos los siguientes recursos:

Servidor de autenticación

El identificador como cliente de nuestra aplicación

(48)

Registro de usuarios. Actualmente [email protected] es el usuario activo y es el que usamos para realizar nuestras pruebas con la aplicación

Tras hacer login nos aparecen las opciones de logout, promoter y orders:

Dichas opciones se gestionan a través del componente login-status.

(49)

El botón promoters redirecciona hacia el componente promoter-page

El botón orders redirecciona hacia el componente order-history, el cual nos muestra el histórico de pedidos del cliente, gracias al servicio OrderHistoryService

OrderHistoryService

(50)

Este servicio invoca al backend, concretamente al método findByCustomerEmailOrderByDateCreatedDesc de la clase OrderRepository, el cual nos va a devolver todos los pedidos de ese usuario ordernados por fecha descendente

Despliegue de la aplicación

Para el despliegue de la aplicación se ha usado Amazon Web Services (AWS) con las versiones de capa gratuita que ofrece. No tienen un rendimiento óptimo para satisfacer las necesidades de un entorno productivo real, pero sirven para realizar pruebas.

Me basé en el siguiente tutorial: Amazon Web Services: Despliegue Full Stack MySQL + Spring Boot + Angular con Elastic Compute Cloud - YouTube

Lo primero que se creó fue la base de datos con Amazon RDS

A la que nos podemos conectar con los siguientes datos de conexión:

(51)

Configuramos el cliente MySQL Workbench con dicha conexión

(52)

Creamos el schema de la base de datos y usamos el script de carga de tablas y datos para poblar la base de datos. Ya tenemos configurada la base de datos en AWS

En cuanto al backend, se ha utlizado una instancia EC2 de tipo Ubuntu y de capa gratuita

(53)

Para establecer la conexión, hay que crear un par de claves:

Nos descargará un archivo .pem, el cual abriremos con la herramienta Putty que es la que usaremos para conectarnos a la instancia. Link de descarga:

Download PuTTY - a free SSH and telnet client for Windows

(54)

Tras instalarlo, abriremos Puttygen y pincharemos en load para cargar la clave privada

A continuación, pincharemos en el botón “Save private key” y guardaremos la clave privada en formato .ppk

(55)

Para conectarnos, abrimos Putty y copiamos los datos de conexión usando el puerto 22 que es el que se utiliza en las conexiones de tipo SSH

(56)
(57)

En el menú de categorías de la izquierda, pinchamos en SSH/Auth/Credentials

Y en el campo Private key file for authentication cargamos la clave privada .ppk creada anteriormente

(58)

Una vez cargada, pinchamos en el botón Open. Nos preguntará que si confíamos en la conexión, aceptamos y accederemos a la instancia Ubuntu

Lo primero que deberemos de hacer es instalar la versión de Java que hemos estado utilizando durante el desarrollo. Para ello, ejecutamos el comando java –version y nos saldrá algo parecido a lo siguiente:

(59)

Necesitamos la versión 19 por lo que ejecutamos el comando sudo apt install openjdk-19-jre-headless. Tras ejecutarlo e instalarlo volvemos a ejecutar el comando java –version para verificar que la instalación ha sido correcta

(60)

Una vez instalado el jre de Java, debemos subir nuestro proyecto en formato .jar. Para generarlo, nos vamos a Intel IJ y ejecutamos el comando mvn package como se adjunta en la imagen

(61)

Tras este paso, debemos crear en AWS un bucket en S3 para cargar este fichero .jar y poder acceder a él desde nuestra instancia EC2. Es importante desmarcar la siguiente opción durante el proceso de creación:

Una vez ya creado el bucket, cargamos el fichero .jar del proyecto

Para acceder al recurso desde la instancia EC2, copiamos la url del objeto y ejecutamos el comando wget urlDelObjeto y se nos descargará

(62)

Para ejecutar el microservicio tecleamos el comando java –jar backend- 1.0.0.jar y nos arrancará.

Pero hay un problema y es el siguiente. Si nosotros cerramos esta conexión nuestro microservicio muere por lo que es necesario crear un servicio dentro de la instancia Ubuntu para poder levantar de forma permanente dicho .jar.

(63)

Seguimos este tutorial: Create A Service to Run Jar File In Background on AWS EC2 - Devstringx

(64)

Ahora ya con esto podemos acceder al API del backend publicado en AWS https://ec2-3-82-200-197.compute-1.amazonaws.com:8443/api

En cuanto a la parte front, se realizaron pruebas subiendo el empaquetado del proyecto Angular con un bucket S3 como página estática pero tuve problemas para configurar el certificado con AWS al ser necesario para establecer conexiones HTTPS con el backend. Por lo que quedaría como tarea pendiente de desplegar en AWS.

(65)

3. Conclusiones

Este trabajo ha supuesto un gran aprendizaje para mí, sobre todo en cuanto a la parte del front, ya que nunca había podido trabajar con Angular y ha supuesto todo un reto para mí. Especialmente retador ha sido sin duda la integración con APIs de terceros como Stripe o Okta, tanto en la parte frontend como en la parte backend.

También he podido introducirme a trabajar con AWS, una de las tecnologías en la nube más demandadas en el mercado laboral actual, aunque la experiencia no ha sido todo lo satisfactoria que debería al no poder haber desplegado con éxito el front.

Se ha tratado de seguir la planificación según lo previsto inicialmente aunque han surgido contratiempos que han hecho que haya que hacer modificaciones en cuanto a tiempos o funcionalidades.

En cuanto a las funcionalidades que no se han podido completar, por cuestión de plazos, ha sido el alta de nuevos eventos por parte de los promotores y la aprobación de los distintos promotores que se registren en la plataforma y puedan subir nuevos eventos, debido a que el despliegue de la aplicación requirió más tiempo del previsto en un principio.

Para próximos proyectos, espero contar sobre todo con más conocimiento de la herramienta AWS, ya que en mi caso particular apenas he encontrado documentación para poder desplegar un proyecto en Angular con comunicación HTTPS, aspecto imprescindible de cara a tratar con datos personales de clientes y de pago.

(66)

4. Bibliografía

- Gautam, Deepak. Última revisión (15/01/23). Create A Service to Run Jar File In Background As System Service on AWS EC2. Devstringx.

https://www.devstringx.com/run-jar-file-in-background-on- aws-ec2

- Luigi Code (25/04/21). Amazon Web Services: Despliegue Full Stack MySQL + Spring Boot + Angular con Elastic ComputeCloud.Youtube.

https://www.youtube.com/watch?v=XwAKI3UkfWk

- Leong, Damon. (25/10/21). How to deploy HTTPS Angular to AWS CloudFront with S3 and Custom Domain. Medium.

https://medium.com/@damon.leong/how-to-deploy-https- angular-to-aws-cloudfront-with-s3-and-custom-domain- 206351e992bb

- Herrera, Fernando. Última actualización (Enero 2023).

Angular: De cero a experto. Udemy

https://www.udemy.com/course/angular-fernando-herrera/

- Okta. Consultado en diciembre de 2022. Okta developer.

https://developer.okta.com/

- Stripe. Consultado en diciembre de 2022. Stripe docs https://stripe.com/docs

Referencias

Documento similar

Sanz (Universidad Carlos III-IUNE): "El papel de las fuentes de datos en los ranking nacionales de universidades".. Reuniones científicas 75 Los días 12 y 13 de noviembre

(Banco de España) Mancebo, Pascual (U. de Alicante) Marco, Mariluz (U. de València) Marhuenda, Francisco (U. de Alicante) Marhuenda, Joaquín (U. de Alicante) Marquerie,

Missing estimates for total domestic participant spend were estimated using a similar approach of that used to calculate missing international estimates, with average shares applied

The part I assessment is coordinated involving all MSCs and led by the RMS who prepares a draft assessment report, sends the request for information (RFI) with considerations,

En cada antecedente debe considerarse como mínimo: Autor, Nombre de la Investigación, año de la investigación, objetivo, metodología de la investigación,

Se hace presente el instrumento a ser aplicado en la empresa CONSUTIC dentro del área de Sistemas informáticos en los servicios de mesa de ayuda mediante un

Ciaurriz quien, durante su primer arlo de estancia en Loyola 40 , catalogó sus fondos siguiendo la división previa a la que nos hemos referido; y si esta labor fue de

información que el individuo puede procesar por su sistema nervioso, y los factores relacionados van a influir en las habilidades y destrezas sociales, que pondrá al uso al