Ing. Sistemas Computacionales

Mostrando las entradas con la etiqueta proyecto. Mostrar todas las entradas
Mostrando las entradas con la etiqueta proyecto. Mostrar todas las entradas

sábado, 7 de diciembre de 2024

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

diciembre 07, 2024 Creado por Victor Jesus Maximo Abundio Sin comentarios

 

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

















sábado, 19 de octubre de 2024

Proyecto | Vite + ReactJS | PizarraJs

octubre 19, 2024 Creado por Victor Jesus Maximo Abundio Sin comentarios

 

Proyecto | PizzaraJs

Introducción

El proyecto consiste en crear una aplicación web de una sola página (SPA) que permite dibujar figuras básicas como: círculo, triángulo, cuadrado, líneas y utilizar una herramienta de lápiz. Además, incluye opciones avanzadas como:

  • Modificación del color de los bordes y el fondo de cada figura.

  • Ajuste del grosor de los bordes para cada figura.


También se han implementado herramientas adicionales, como:

  • Gestión de capas.

  • Herramienta de borrador.

  • Exportar el lienzo en formato PNG o JPG.

  • Funcionalidades de rehacer y deshacer.

  • Exportar e importar lienzos en formato JSON.

  • Como características adicionales, se incluye la opción de dibujar una figura de corazón y agregar texto como herramienta.


El sitio es completamente adaptable (responsive), optimizado para dispositivos táctiles, tabletas, laptops y computadoras de escritorio. Además, incluye mejoras de accesibilidad como tooltips para cada herramienta.


Ver proyecto (GitHub Pages)


Funciones

El sitio web usa react-router-dom, componentes, custom hooks , context y provider para el funcionamiento del sitio con React. Además de usar e incluir módulos externos de npm para React.


Este sitio web tiene las siguientes funciones:

  • Dibujar trazos

  • Capas

    • Agregar 

    • Eliminar

    • Ocultar

    • Activar

  • Dibujar formas

    • Círculo

    • Cuadrado

    • Triángulo

    • Corazón

    • Línea

    • Lápiz

    • Texto

  • Exportar e importar capas, trazos y formas en un archivo JSON

  • Deshacer y Rehacer capas, trazos y formas

  • Exportar a imagen PNG y JPG

  • Modificar herramientas para cada forma

  • Herramienta de borrador


Este conjunto de tecnologías y características para este sitio web:

  • Proyecto dockerizado. (*)

  • Proyecto vagratizado. (*)

  • Estilos de Tailwind CSS

  • Componentes funcionales de ReactJS

  • Hooks personalizados

  • Context y Provider

  • Canvas HTML 5

  • React Icons (Bootstrap)

  • React Tooltip

  • Etiquetas de Open Graph (para SEO)


¿Cómo funciona?

Al entrar al sitio web, por defecto se selecciona la herramienta de lápiz, que puedes comenzar a dibujar sobre la pizarra, el sitio web  tiene un sistema de historial para deshacer y rehacer los trazos. 


Al hacer clic en el botón, que está a un lado del logo, se mostrará las herramientas avanzadas, con que, puedes crear capas ocultar y mostrar capas, puedes exportar el dibujo en una imagen PNG o JPG, puedes exportar en un archivo JSON e importar un JSON de los trazos dibujados.


Adicionalmente, puedes presionar cambiar de herramienta para dibujar formas, tales como: 

  • Lápiz

  • Línea

  • Texto

  • Círculo

  • Triángulo

  • Cuadrado

  • Corazón

Vista previas