Aplicación de mensajería similar a WhatsApp o Discord
Hecho con C# y Typescript
📁Descargar archivo APK
Luis Miguel García Sevilla - 2º DAM Tarde
Web frontend realizada con Angular 18. Desplagada en Vercel
API realizada con ASP.NET Core .NET 8. Desplegada en MonsterASP.net
Base de datos realizada con MySQL. Desplegada en MonsterASP.net
| Dependencias del proyecto Angular | |
|---|---|
| Notificaciones toast | ngx-toastr |
| PWA | @angular/pwa |
| Paquetes del proyecto ASP.NET Core | |
| Base de datos Codefirst | EntityFrameworkCore Microsoft.EntityFrameworkCore.Tools |
| Compatibilidad con MySQL | Pomelo.EntityFrameworkCore.MySql |
| Tokens de autorización | JwtBearer |
El objetivo del proyecto es que el usuario disponga de una aplicación útil y sencilla de mensajería con una interfaz cómoda y fácil de entender, con la cual pueda mantener conversaciones con otras personas que utilicen la aplicación.
Con este proyecto pretendo explotar los conocimientos adquiridos en lenguajes como Typescript, C#, SQL y en frameworks como Angular o ASP.NET Core para realizar una aplicación funcional, con un frontend con una interfaz cómoda y clara que utilice un backend con una API y base de datos eficientes y bien estructuradas, que pueda utilizarse tanto desde un ordenador a un dispositivo móvil.
- Abrir el CMD o Bash y clonar el repositorio con el comando
git clone https://github.com/LuisM0112/C-Chat.git - En la raiz del repositorio ejecutar el comando
docker build -t db-cchat-img .para construir la imagen para la base de datos y el comandodocker run -d -p 3306:3306 --name db-cchat db-cchat-imgpara ejecutar el contenedor
Proyecto creado con Angular CLI versión 18.0.1.
En la ruta C-Chat\C-Chat-Web
Ejecuta el comando ng serve para lanzar el servidor de desarrollo. En la ruta http://localhost:4200/ se desplegará la web.
Ejecuta el comando ng build para compilar el proyecto. Los archivos se almacenarán en el directorio dist/.
Ejecuta el comando npx http-server -p 8080 -c-1 dist/c-chat-web/browser para lanzar un servidor HTTP en la ruta http://localhost:8080/. Pudiendo así hacer uso de la PWA.
Con Visual Studio abrir la solución "C-Chat-API.sln" que se encuentra en la carpeta C-Chat\C-Chat-API y ejecutar el proyecto con HTTPS.
En la ruta C-Chat\C-Chat-API\C-Chat-API ejecutar el comando dotnet run
Si tienes una cuenta, rellena el formulario de inicio de sesión y accede a la app pulsando en confirmar, puedes resetear el formulario utilizando el botón "limpiar/reset".
Si no tienes una cuenta haz click en "No tengo una cuenta", puedes cambiar el idioma en el desplegable de abajo a la izquierda.
Si no tienes una cuenta, rellena el formulario de registro y accede a la app pulsando en confirmar, puedes resetear el formulario utilizando el botón "limpiar/reset".
Si ya tienes una cuenta haz click en "Ya tengo una cuenta", para ir al inicio de sesión.
En la vista principal dispones de varios paneles:
- Encabezado, con botones para cerrar sesión y borrar la cuenta.
- Panel de la lista de chats, aquí aparecerán los chats creados, además de un barra de busqueda y el botón para crear nuevos chats.
- Panel principla del chat, cuando un chat esté abierto aparecerá aquí.
Al pulsar el botón para crear un nuevo chat, aparecerá un dialogo para introducir el nombre del chat que queremos crear.
Esta vista se verá al seleccionar un chat, aquí aparecerán una caja para escribir el mensaje a enviar y varios botones, uno para añadir usuarios otro para ver los miembros del chat y otro para borrar el chat.
En esta caja se escribe el contenido del mensaje y al pulsar "Enter" o el boton enviar se enviará.
Al pulsar el botón para añadir un usuario, aparecerá un dialogo para introducir el nombre del usuario que queremos añadir.
Al pulsar el botón para ver los usuarios del chat, aparecerá una lista de los miembros junto a una barra de busqueda y un botón para abandonar el chat.
Al pulsar el botón para abandonar un chat, aparecerá un dialogo confirmar si queremos realizar esta acción.
Al pulsar el botón para eliminar un chat, aparecerá un dialogo confirmar si queremos realizar esta acción.
Al pulsar el botón para eliminar la cuenta, aparecerá un dialogo confirmar si queremos realizar esta acción.
La interfaz utiliza la fuente Fira Code la cual es una fuente mono espaciada (todos los caracteres ocupan lo mismo) y tiene ligaduras de caracteres, es decir que se pueden combinar caracteres para "crear" otros, por ejemplo esta combinación de caracteres "->" se combinarán para formar algo similar a esta flecha "→", permitiendo elaborar mensajes más estéticos.
Por otra parte los colores de la aplicación son planos y con contraste entre los distintos apartados y con el texto, dando legibilidad a la interfaz.
Finalmente los botones por los que el usuario tiene "preferencia" para pulsar, son de un color verde que los resalta y siempre están colocados a la izquierda. Esto es así para evitar posibles accidentes por pulsar un boton que no era el deseado, ejecutando una acción irrebersible.
- 3 de abril de 2024: Creación del repositorio.
- 12 de abril de 2024: Creación del proyecto web y API.
- 29 de abril de 2024 (Backend):
- Configuración del archivo Program.cs y Añadido JWT.
- Creado dbContext.
- Creadas enidades de la base de datos.
- Endpoints registro e inicio de sesión.
- 30 de abril de 2024 (Backend): Arreglos, mensajes de respuesta y endpoint para eliminar usuarios.
- 3 de mayo de 2024 (Backend y Frontend):
- Controlador de chat.
- Endpoints para crear chats, borrarlos, añadir usuarios al chat y salir del chat.
- Endpoints para obtener la lista de chats y la lista de chats de un usuario.
- Más mensajes de respuesta.
- Dtos del resto de entidades.
- Vista principal
- Formularios de registro e inicio de sesión.
- 4 de mayo de 2024 (Frontend):
- Lista de chats.
- Formulario de creación de chats.
- Arreglos en los formularios de autenticación.
- Distribución de los componentes en la interfaz con grid layout.
- Chats seleccionables.
- Estilos básicos.
- 5 de mayo de 2024 (Frontend): Formulario para añadir usuarios al chat.
- 8 de mayo de 2024: Actualización del Readme.
- 9 de mayo de 2024: Arreglos al añadir un usuario al chat y actualización del Readme.
- 15 de mayo de 2024 (Frontend):
- Añadida lista de usuarios del chat.
- Añadidos botones para borrar el usuario, abandonar y eliminar un chat.
- Añadida barra de busqueda para la lista de chats.
- Refactorización de BehaviorSubject a Signals.
- 16 de mayo de 2024 (Frontend): Barra de busqueda para la lista de usuarios de un chat.
- 25 de mayo de 2024 (Backend y Frontend):
- Añadida capacided de enviar mensajes, los recibirán todos los usuarios pertenecientes al chat.
- Al seleccionar los chats se recibirán los mensajes anteriores.
- Añadidos scrolls para la lista de chats y el area del chat.
- 27 de mayo de 2024 (Base de datos): Migración de la base de datos a MySQL (Mensajes de error rotos).
- 28 de mayo de 2024 (Backend y Frontend): mensajes de error areglados, refactor de mensaje de Subjet a Signal y eliminados archivos no utilizados.
- 29 de mayo de 2024 (Frontend):
- Scroll automático cuando un mensaje llega y cambios en el grid.
- Al pulsar enter se envia el mensaje escrito.
- Añadida responsividad básica.
- Añadida accesibilidad con propiedades de HTML.
- Añadidos botones de reset para las vistas de autenticación.
- Añadida diferenciación a los botones preferentes, es decir, aquellos que pulsarías preferentemente y evitar posibles accidentes en lo que el usuario desea hacer.
- 1 de junio de 2024 (Backend y Frontend):
- Arreglos en la responisvidad.
- Instalación de la librería Toastr para notificaciones tipo toast.
- Añadidas notificaciones con Toastr.
- Añadido endpoint para determinar si el usuario es adminsitrador.
- 2 de junio de 2024 (Backend y Frontend):
- DB Seeder con un usuairo administrador.
- Refactorización y vista administrador.
- Manejo de errores globales e intercepción de errores HTTP.
- Añadido servicio para archivos estáticos.
- 3 de junio de 2024 (Frontend):
- Añadida PWA.
- Mejora vista de administrador.
- Añadidos scrloss para el resto de listas.
- 4 de junio de 2024 (Backend y Frontend):
- Refatorización en los controladores.
- Dialogo de confirmación para acciones irreversibles.
- Traducción de los mensajes devueltos por la API.
- 5 de junio de 2024 (Frontend):
- Traducción de la web, toma el lenguaje por defecto del navegador.
- Actualización del README.
- 6 de junio de 2024:
- Mejora de la primera ventana que ve el usuario.
- Despliegue de la base de datos.
- 7 de junio de 2024:
- Añadida autenticación para eliminar un chat.
- Añadida autorización de ADMIN para la lista de usuarios, de chats y el controlador de mensajes.
- Eliminados endpoints de prueba.
- Cambios en los mensajes de la consola.
- Despliegue del frontend.
- Despliegue del servidor.
- Cambios en las rutas.
- Mejoras en la responsividad.
- Actualización del README.
- 8 de junio de 2024: Arreglos.
- 13 de junio de 2024: Arreglo en la fecha del mensaje y actualización del README.
- 14 de junio de 2024:
- Agregados: informe y Mockup.
- Reestructuración de archivos del README.
- Actualización del README.
- 5 de julio de 2024: Cierre del despliegue de la app y cambios para publicación del repositorio.
- Angular 17: https://youtu.be/f7unUpshmpA
- Angular Signals:
- ASP.NET Core: https://youtu.be/9VYn7oWY08M
- WebSockets:
- Dictionary: https://learn.microsoft.com/es-es/dotnet/api/system.collections.generic.dictionary-2?view=net-8.0
- Concurrent dictionary: https://learn.microsoft.com/es-es/dotnet/api/system.collections.concurrent.concurrentdictionary-2?view=net-8.0
- MySQL Connection: https://youtu.be/SdtOGowW-Dk
- ngx-toastr: https://www.npmjs.com/package/ngx-toastr
- PWA Angular: https://angular.dev/ecosystem/service-workers/getting-started
- MonsterASP deploy: https://help.monsterasp.net/books/deploy/page/how-to-deploy-net-core-web-api-with-swagger-using-visual-studio
- Exception handler: https://learn.microsoft.com/es-es/aspnet/core/fundamentals/error-handling?view=aspnetcore-8.0