AHORA NUESTROS CURSOS TAMBIÉN ONLINE
ONLINE
Contactar
Menu
ALUMNOS
Contactar

Proyecto destacado de Full Stack, Komika

19 de agosto de 2020 13:48:55 CEST

Komika es el proyecto final para el Full Stack Bootcamp que desarrollaron Álvaro Moreno Álvarez y Antonio Fernández Perales, se trata de una plataforma desde la que puedes leer y compartir cómics de todas las escuelas, épocas y editoriales, todo, en un mismo espacio.

El lector, tiene, a través de Komika, acceso a un amplio catálogo mediante suscripción, ahorrando desplazamientos, costes asociados a la impresión y distribución, y por supuesto, con la ventaja de tener grandes contenidos sin ocupar espacio en la estantería y a un simple clic.

 

El objetivo es ofrecer una gran variedad de contenido dando cabida a tebeos de todo tipo, con la posibilidad de darle a nuevos artistas un espacio donde difundir sus creaciones. El proyecto se elaboró con obras de dominio público por cuestiones de propiedad intelectual.

¿Cómo se desarrolló Komika?  Tecnologías

Se planteó como una aplicación web optando por JavaScript como lenguaje principal siguiendo el Stack MEAN. El entorno Back-End se desarrolló con Node.js, basado en ese mismo lenguaje, y el framework de Angular para el Front-End, que permitió una estructuración modular más ordenada y mayor control del código con la implementación de TypeScript. Veamos con algo más de detalle.

Galería de la aplicación web Komika

El Back-End, los procesos de la aplicación web

Se eligió Express como framework, que es una infraestructura web rápida para Node.js, para manejar las rutas y las peticiones HTTP por la sencillez que ofrece en el trabajo en servidor. 

Peticiones del servidor a la base de datos

La primera función de la que debía ocuparse el Back-End consistía en gestionar las peticiones del servidor a la base de datos, que había sido realizada con MySQL y hospedada en Heroku

La base de datos engloba en las siguientes tablas: 

  • “comics”,  que recoge la información de los tebeos e incluye un token de acceso al servidor donde se encuentra alojado 
  • “autores” que relaciona a los creadores con sus obras 
  • “usuarios” que gestiona los datos de los miembros; 

La tabla de índices establecería la relación entre “comics” y “usuarios”, lo que permite hacer un seguimiento de las valoraciones globales e individuales de la comunidad, así como de las lecturas actuales de cada usuario registrado. 

Tabla de índice de la base de datos Komika

Gestión de registro y login

Durante el registro, se otorga un rol por defecto, el cual solo puede ser reasignado de forma manual por los administradores. Tanto el login como el registro, comprueba la existencia o no del usuario y su correo electrónico. 

La gestión del token de acceso y sus permisos se comprueban con jsonwebtoken, mientras que para su encriptación se hace uso de bcrypt, ambas librerías de Node.js. 

El token devuelto permite gestionar un acceso más seguro a la aplicación, el tiempo máximo de conexión y el rol de usuario adjudicado, con sus funcionalidad extendidas en el caso correspondiente. 

Front-End 

Algo que preocupó al inicio del proyecto, fue que todas las publicaciones se vieran correctamente, para ello, finalmente se optó por la librería ngx-extended-pdf-viewer, ya que permite un alto grado de personalización y tiene un diseño cómodo para los usuarios.

visualizador_komika

Para la maquetación se utilizó HTML, la librería de diseño de BootStrap y CSS. También agradecer al artista Sampler Man su trabajo y sus maravillosas ilustraciones tipo Pop Art.

Todas las peticiones al servidor generadas desde la aplicación de Angular, a excepción del archivo de descarga, se gestionaron a través de servicios (uno para los usuarios y otro para los cómics), facilitando así la gestión de la información a través de los distintos componentes.

Los principales componentes son: home, registro, perfil, galería, visualizador y un área de administración.

Desde la home se realiza el login a la aplicación, la cual hace petición al servidor, comprueba que los datos son correctos y diferencia entre los distintos roles y sus permisos.

Respecto al registro, dentro del perfil de usuario existe la opción de editar la información suministrada: nombre, usuario, email y una foto de perfil, que se guarda en los servicios de Firebase. Además, se puede llevar a cabo un seguimiento de los cómics que se están leyendo y los ya terminados. 

En la galería se puede realizar búsquedas en el catálogo y filtrar por categorías. Entrando en el visualizador, se accede a la lectura del del tebeo, la aplicación guardará el título y el progreso en el perfil. Los usuarios también podrán votar las publicaciones, obteniendo una valoración media de la comunidad. 

administrador_komika

En último lugar, estaría el área de administración, desde el que se puede crear, editar y eliminar registros existentes de la base de datos. 

Firebase para el almacenamiento de archivos

Firebase ofrece un servicio de almacenamiento de archivos de forma gratuita, por lo que, a pesar de sus limitaciones, se escogió para guardar tanto las fotos de perfil, las portadas como los cómics en sí. 

De tal forma, cuando se crea una nueva entrada, se sube el archivo a Firebase, se recoge el token de descarga, lo guardamos en la base de datos y al acceder al visualizador el token es recuperado de la propia base y el archivo descargado para su lectura. Como se ha dicho, existen limitaciones de descarga y almacenamiento, por lo que en un futuro debería buscarse un servidor de pago sin restricciones.

Evolución y futuro de Komika

La idea original era una plataforma sencilla en la que se pudieran leer los cómics, pero, poco a poco el proyecto fue creciendo rápidamente hacia algo más ambicioso añadiendo más funcionalidades y roles.

esquema_inicial_komika

Se trata de un proyecto fácilmente escalable, en un futuro sería interesante desarrollar perfiles de “creadores” para iniciar una comunidad de autores que pudieran subir sus trabajos.

Muchas gracias Álvaro Moreno Álvarez y Antonio Fernández Perales por vuestro trabajo y esfuerzo.


Si tú también quieres aprender a desarrollar aplicaciones web como Komika, no lo pienses más, apúntate a nuestro Full Stack Bootcamp.

También te puede interesar

Estos post sobre Full Stack

Suscríbete a nuestro email

Todavía no hay comentarios

Dinos que estás pensando