Proyecto | Angular v18 + Spring Boot v3 + Laravel v11 | LibHubTec

 

Proyecto | LibHubTec

Introducción

El proyecto consiste en reservar libros de una biblioteca de universidad desde un portal web llamada “LibHubTec” que es usado por alumnos de la universidad, el proyecto cuenta con una API para realizar peticiones desde el portal web “LibHubTec”. Adicionalmente, el proyecto tiene una aplicación web llamada “AdminPanel” con una arquitectura de “Monolitica”, que es usado por usuarios administradores.

LibHubTec 

Es un portal web con una arquitectura de “FrontEnd y BackEnd desacoplados”,  creada con Angular v18, PrimeNG, PrimeFlex, PrimeIcons.  Está conectado con una API para realizar peticiones. Este portal web, es usado por alumnos, con un correo electrónico y una contraseña para poder ingresar. 

API

Este un API para ser consumido desde el portal “LibHubTec”, está creado con Spring Boot v3, Spring Data JPA, Spring Security, JWT, Spring Email, Spring Web, Lombok, etc. 

Utiliza MySQL como base de datos para almacenar y recuperar la información, y proporcionar para el portal web “LibHubTec”.

AdminPanel

Este es una aplicación web con una arquitectura “Monolitica”, creada con Laravel 11, Moonshine Laravel, MySQL. Esta aplicación web es usada por administradores, para registrar administradores, alumnos, libros, enviar notificaciones, ver dashboard, etc.

Ver proyecto (GitHub Pages)

Funciones

El proyecto está conformado con dos aplicaciones web y una API, adicionalmente se usa Docker y Docker Compose para levantar todos los servicios.

LibHubTec 

• Login 

• Notificaciones 

• Listar notificaciones de la cuenta

• Marcar como leído

• Libros 

• Ver libros disponibles

• Reservar libros

• Listar libro reservados

• Anuncios 

• Ve anuncios de la universidad

• Búsquedas

• Ver búsquedas realizadas

• Eliminar búsquedas realizadas

API

• Leer libros

• Consultar un libro

• Consultar una cuenta

• Autenticarte desde portal de LibHub (con Angular 18.x)

• Refrescar un token de autenticación

• Verificar un token de autenticación

• Enviar un código y token para recuperación de cuenta desde portal de LibHub (con Angular 18.x)

• Verificar un token de recuperación de cuenta

• Recuperar una cuenta desde portal de LibHub (con Angular 18.x)

• etc.

AdminPanel

• Un dashboard

• CRUD para anuncios

• CRUD para administradores

• CRUD para cuentas

• CRUD para libros

• CRUD para reservar libros

• CRUD para notificar cuentas

• Logs para recuperación de cuentas

• Logs para búsquedas realizadas

¿Cómo funciona?

Para arrancar el proyecto, es necesario instalar docker y docker-compose, para automatizar e iniciar los servicios de forma automática. 

Arrancar servicios (del proyecto) usando Docker-compose

Paso 1) 

Acceder a la ruta raíz (root) el proyecto, a la par de archivo `docker-compose.yml`

Ejecuta el siguiente comando, desde la terminal.

```shell

$ cd workspace

```

Paso 2)

Convertir el archivo `setup.sh` en un archivo ejecutable o script de linux y ejecutarlo. 

Además de crear variable de entorno, instalar nodejs, y crear alias para linux

Ejecuta el siguiente comando, desde la terminal.

```shell

$ dos2unix ./setup.sh && ./setup.sh && source ~/.bashrc 

```

Paso 3) 

Construir todos los servicios de docker-compose

Se construye la imagen, contenedor y ejecuta cada servicio que compone docker-compose 

```shell

$ doc-again

```

Paso 4)

Comienza a probar el proyecto

Felicidades ya puedes acceder a los sitios del proyecto, que son:

- Sitio de servicio Laravel 11.x: [http://192.168.33.99:8000](http://192.168.33.99:8000)

    usuario: admin@admin.com

    contraseña: password

- Sitio de servicio Angular 18.x: [http://192.168.33.99:4200](http://192.168.33.99:4200)

    usuario: victor.maximo@example.com

    

    contraseña: password

- Sitio de servicio SpringBoot 3.x: [http://192.168.33.99:5800](http://192.168.33.99:5800)

- Sitio de servicio Mailpit: [http://192.168.33.99:8025](http://192.168.33.99:8025)

Vista previas

Leer más

Práctica | ReactJS + SpringBoot | CRUD Full-Stack

CRUD | Full-Stack

Introducción

Esta práctica consiste en crear un CRUD para empleados con la información de nombre, puesto, correo electrónico. Fue creado por mi mismo, el día 5 de diciembre de 2021.

Este proyecto tiene una arquitectura de "FrontEnd y BackEnd desacoplados", fue desarrollado usando ReactJS + Axios para el lado de "FrontEnd" y usando Spring Boot + MySQL para el lado del "BackEnd". 

También se utilizó la base de datos de MySQL para almacenar los datos usando Hibernate + JPA DATA como ORM, por lo que los datos se guardan en la nube, y pueden ser fácilmente recuperados.

Ver proyecto (GitHub)

Objetivo

El objetivo de la práctica es usar la arquitectura que se enfoque completo y moderno para el desarrollo de aplicaciones web, integrando frontend, backend, y bases de datos.

Este conjunto de tecnologías y características para este aplicación web:

• Proyecto de RectJS + Axios (FrontEnd).

• Proyecto de SpringBoot + MySQL (BackEnd).

• Base de datos usando MySQL

• Mapeo Objeto-Relacional (ORM con Hibernate y Data JPA).

• CRUD para mascotas (crear, leer, eliminar, actualizar).

Las herramientas utilizadas para la práctica son:

• Visual Studio Code (editor de texto)

• NPM (gestor de paquetes)

• Git (control de versiones)

• GitHub (almacenamiento de repositorios)

• MySQL (base de datos)

• Terminal 

• etc.

Conocimientos obtenidos

Spring Boot es un framework basado en Java que se utiliza para crear aplicaciones web y servicios backend de manera rápida y sencilla. 

ReactJS es una biblioteca de JavaScript de código abierto utilizada para construir interfaces de usuario, especialmente para aplicaciones web de una sola página (SPA, por sus siglas en inglés).

Axios es una biblioteca de JavaScript utilizada para realizar solicitudes HTTP desde el navegador o Node.js.

Al desarrollar la práctica se obtiene conocimientos acerca de 

• SpringBoot   Para crear un servicio backend.

• ReactJs  Para crear una aplicación web.

• Hibernate y Data JPA  Manipular la base de datos en aplicaciones Java usando ORM.

• MySQL  Para crear base de datos, crear tablas, insertar datos, actualizar datos, eliminar datos, consultar datos, etc.

• Axios  Para enviar solicitudes de tipo GET, POST, PUT, DELETE, etc.

• NPM  Para descargar, instalar y desinstalar paquetes.

• Git  Para crear commit, crear ramas, fusionar ramas, subir repositorio a GitHub, etc.

• etc.

Notas

• El proyecto se ha desarrollado con una arquitectura de "BackEnd y FrontEnd desacoplado", por lo que, es necesario iniciar los servicios por separado.

¿Cómo funciona?

Correr aplicación de forma independiente (Usando npm)

Es necesario ejecutar el siguiente comando desde donde se encuentra el archivo **package.json** de cada respectivo proyecto. 

Configuración previa

Antes de ejecutar los proyectos Frontend (ReactJs) y Backend (API SpringBoot) es necesario configurar el archivo `.env`  de cada respectivo proyecto. 

Ejecutar Frontend

Es necesario ejecutar el proyecto frontend usando el sig. comando dentro del path **./react-app/**

$ npm install

$ npm run start

Ejecutar Backend

Es necesario ejecutar el proyecto backend usando el sig. comando dentro del path **./spring-api/**

$ mvn clean install

$  mvn spring-boot:run

 

Vista previas

Leer más