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

Proyecto | Express + React | CotoJs

 

CotoJs | Aplicación web

Introducción

Este proyecto fue creado en 22 de septiembre de 2024, es un proyecto que consiste en una red social de salas (grupo de conversaciones) en tiempo real, con la funcionalidad de un sistema de autenticación, es decir, el sistema permite verificar la identidad de un usuario (con login y register). 

La aplicación web cuenta con una conexión a base de datos, es decir, que almacena información en la nube, y se puede recuperar en cualquier momento.

Cada usuario se puede registrar con su nombre,  correo electrónico y una contraseña, y dentro del sistema cada perfil/cuenta puede crear, editar, eliminar y ver sala de conversación, adicionalmente cada usuario tiene su foto de perfil, cada sala tiene su portada y sus miembros visibles. 

La aplicación web, para el lado de BackEnd fue desarrollada usando : NodeJS + Express + MongoDB + Mongoose + JW Token + Socket.io + CORS + etc. Además de incluir módulos de npm como : bcryptjs, express-sesion, morgan, dotenv, http, multer, sharp, nodemon, etc.

La aplicación web, para el lado de FrontEnd fue desarrollada usando : Vite + React + Axios + Tailwind CSS + Socket.io Cliente + etc. Además de incluir módulos de npm como: dayjs, js-cookie,  sweetalert2, sweetalert2-react-content, react-tippy, react-spinners, react-infinite-scroll-component, etc.

Ver proyecto (GitHub)

Funciones

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

• Proyecto con infraestructura virtualizada o proyecto Vagrantizado.

• Proyecto dockerizado.

• Proyecto de RectJS + Axios (FrontEnd).

• Proyecto de NodeJS + Express + Mongoose (BackEnd).

• Base de datos usando MongoDB

• Mapeador de Documentos a Objetos (ODM con Mongoose).

• Notificaciones de sistema (con Toastify y SweetAlert2).

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

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

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

• Sistema de Login (con express-session).

• Encriptación de contraseña (con bicrytjs).

• CORS solo origines permitidos (con cors).

• Chat en tiempo real (con socket.io)

• Sistema de token usando JSON Web Token (con jsonwebtoken)

• Sistema de inactividad de 30 minutos (en FrontEnd y BackEnd).

¿Cómo funciona?

Para hacer funcionar la aplicación web es necesario tener instalado Node JS y MongoDB, en sus máquina de host, posteriormente puede seguir las siguientes instrucciones para poder usarlo de forma local.

Configurar variables de entorno (Obligatorio) Para BackEnd Acceder a la carpeta de `/express-api` y crear un copia de `.env.example` con nombre de `.env`. Para FrontEnd Acceder a la carpeta de `/react-vite` y crear un copia de `.env.example` con nombre de `.env`. NOTA: En caso de que prefiera usar docker o docker-compose para arrancar el proyecto es necesario modificar `localhost` por el IP de la máquina host, por ejemplo: ``192.168.63.80``, para la máquina de Vagrant + Ubuntu20.04.

Las variables de entorno en este caso sería lo siguiente: Archivo `.env` para BackEnd ```text # Ambiente de desarrollo APP_PORT=5880 APP_URL=http://192.168.63.80 APP_ENV=local NODE_ENV=development # MongoDB URI APP_MONGODB_URI=mongodb://root:secret@service_db/db-cotojs?authSource=admin # Clave secreta APP_SECRET_KEY=ssh # CORS APP_CORS_1=http://192.168.63.80:5880 APP_CORS_2=http://192.168.63.80:5173 APP_CORS_3=http://192.168.63.80:5173/api/v1 # API Socket.io APP_CLIENT_SOCKET_IO=http://192.168.63.80:5173 ```

Archivo `.env` para FrontEnd ```text # API Express VITE_API_URL=http://192.168.63.80:5880/api/v1 # API Socket.io VITE_SOCKET_IO_DOMAIN=http://192.168.63.80:5880 VITE_SOCKET_IO_PATH=/api/v1/socket.io ``` Usando pnpm (BackEnd y FrontEnd) Paso 1) Ejecuta el siguiente comando desde el directorio `/express-api` para instalar las dependencias. ```shell $ pnpm install ``` Paso 2) Ejecuta el siguiente comando desde el directorio `/express-api` para correr el servicio API RestFul. ```shell $ pnpm run dev ``` Paso 3) Ejecuta el siguiente comando desde el directorio `/react-vite` para instalar las dependencias. ```shell $ pnpm install ``` Paso 4) Ejecuta el siguiente comando desde el directorio `/react-vite` para correr el servicio React + Vite. ```shell $ pnpm run dev ``` Usando docker (BackEnd y FrontEnd) Paso 1) Ejecuta el siguiente comando desde el directorio `/express-api` para crear una red y correr el servidor mongodb ```shell $ docker network create cotojs-network $ docker run --network cotojs-network --name cotojs-mongodb-run -p 27017:27017 -d mongo:4.4` ``` Paso 2) Ejecuta el siguiente comando desde el directorio `/express-api`, para crear una imagen y crear un contenedor docker con: Express + Mongoose + Socket.io + JWT + CORS + Multer + etc ```shell $ docker build -t cotojs-api-build -f api.Dockerfile . $ docker run --network cotojs-network --name cotojs-api-run -p 5880:5880 -d cotojs-api-build ``` Paso 3) Ejecuta el siguiente comando desde el directorio `/react-vite`, para crear una imagen y crear un contenedor docker con: React + Vite ```shell $ docker build -t cotojs-react-build -f react.Dockerfile . $ docker run --network cotojs-network --name cotojs-react-run -p 5173:3000 -d cotojs-react-build ``` Usando docker-compose (BackEnd y FrontEnd) Paso 1) Ejecuta el siguiente comando desde el directorio raíz `/`, para crear servicios, volúmenes y redes de docker-compose ```shell $ docker-compose up --build -d ``` Paso 2) Ejecuta el siguiente comando desde el directorio raíz `/`, para eliminar servicios, volúmenes y redes de docker-compose ```shell $ docker-compose down ```

Vista previas

Leer más

Práctica | Desarrollar plantilla Vagrant + Ubuntu 20.40LTS + Docker + Docker-compose

Desarrollar plantilla Vagrant  + Ubuntu 20.40LTS + Docker + Docker-compose

Introducción

Vagrant es una herramienta que permite crear, configurar y gestionar máquinas virtuales de VirtualBox. Por otro lado, Docker es una herramienta para gestionar contenedores en entornos de desarrollo y producción, mientras que Docker-compose te permite gestionar dependencias y la orquestación de servicios. Docker y Docker-compose se complementan mutuamente. 

En este práctica vamos a crear una plantilla usando Vagrant para crear una maquina virtual con Ubuntu 20.04 LTS, y dentro de la máquina virtual se instala Docker y Docker Compose, esto será como una guía paso a paso para configurar un entorno de desarrollo eficiente y reproducible.

Ver proyecto (GitHub)

Objetivo

Esta plantilla sirve para aquellas personas que tienen pocos recursos en su maquina host, como bien se sabe Docker y Docker compose no está disponible para Windows, por lo que es necesario instalar un Subsistema de Windows para Linux (WSL) para poder usar Docker y Docker-compose, pero este consume muchos recursos en la máquina. Para intentar solventar esto creamos una máquina virtual usando Vagrant + Ubuntu 20.4LTS, que en lo particular me ha servido bastante.

Conocimientos obtenidos

Vagrant es una herramienta de software que se utiliza para crear y gestionar entornos de desarrollo virtualizados de manera sencilla y reproducible. Vagrant sirve para automatizar el proceso de creación, configuración y gestión de máquinas virtuales que funcionan como entornos de desarrollo aislados. 

Docker y Docker Compose son herramientas utilizadas en la gestión de aplicaciones basadas en contenedores. Facilitan la creación, despliegue y ejecución de aplicaciones en entornos aislados y reproducibles, mejorando la eficiencia y la consistencia en el desarrollo y la producción.

Ubuntu es una distribución del sistema operativo Linux basada en Debian, desarrollada y mantenida por Canonical Ltd.

Al desarrollar la práctica se obtiene conocimientos acerca de 

• Vagrant   Para crear y configurar una máquina virtual.

• Docker  Para descargar imágenes desde DockerHub

• Docker-compose  Para complementar con Docker.

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

• etc. 

Notas

• La plantilla es solo una base para dockerizar o vagratizar un proyecto.

¿Cómo funciona?

Para poder simplificar las cosas, vamos a usar un repositorio github, que puedes consultarlo aquí

Estos son los pasos a seguir para poder levantar la caja de Vagrant

Paso 1)

Instalar VirtualBox, Extension_Pack para VirtualBox y Vagrant.

Paso 2)

Inicializar un nuevo caja Vagrant.

$ vagrant init  

Paso 3)

Copiar todo el contenido del archivo Vagrantfile de este repositorio, y reemplazarlo por el archivo generado por el paso anterior.

Paso 4)

Descargar los archivos script shell para linux llamados, setup.sh y vagrant.sh. Y colocarlos en la carpeta raíz del proyecto junto con el archivo Vagrantfile.

Paso 5)

Ejecuta el siguiente comando para arrancar la caja de vagrant. (Esto dura aprox. 15 min. la primera vez)

$ vagrant up

Paso 6)

Entrar a la caja de vagrant

$ vagrant ssh

Paso 7) (Opcional)

Instalar NVM, instalar la última versión de NodeJS y crear alias para Docker y Docker-compose

$ cd ~/workspace

$ dos2unix ./setup.sh

$ ./setup.sh

$ source ~/.bashrc

Paso 8) (Opcional)

Verificar toda la instalación de NodeJS, NVM, Docker, Docker-compose, Imagenes Docker, alias

$ node --version

$ nvm --version

$ docker --version

$ docker-compose --version

$ docker images

$ alias

Vista previas

Leer más