Creando una Aplicación Web similar a SoundCloud con Ruby on Rails 6 y Angular 10 – Parte 7

9 minuto(s)

Si este tutorial también tendrá muchas partes y es que quiero que conozcas todos los detalles posibles para la creación de este proyecto, en la parte anterior terminamos de crear los controladores para las vistas administrables y en esta parte 7 vamos a comenzar a crear sus vistas o interfaces UI y así sucesivamente crearemos las que siguen, bien pongamos manos a la obra, vamos con este Post.

Partes

Antes de continuar te invito a leer los siguientes artículos:

Asimismo, te invito a escuchar el Podcast: “Si No Tienes Experiencia Para Un Puesto De Trabajo, Créala !”:

Spotify SoundCloud Apple Podcasts

Bien ahora continuemos con el Post: Creando una Aplicación Web similar a SoundCloud con Ruby on Rails 6 y Angular 10 – Parte 7. 

Es importante recordar que estamos desarrollando la parte administrable que gestiona todos los datos de la aplicación y esta parte administrable la mayoría de usuarios públicos no la podemos ver. Si hacemos una revisión en la plataforma SoundCloud solo podemos ver ciertas funciones como propietario de una cuenta de SounCloud, entre las opciones que podemos ver esta la página de configuración, la pagina para subir un archivo de audio, estadísticas, mi biblioteca, etc.

Pero la vista administrable solo los ven los administradores o encargados de gestionar la plataforma SoundCloud y esta parte administrable es la que venimos desarrollando. Más adelante desarrollaremos las vistas públicas como la página de configuración, la pagina para subir un archivo de audio, mi biblioteca, etc.

En la Parte 1 de este tutorial instalamos Bootstrap 4 con sus dependencias necesarias (jQuery y Popper JS) y con este Framework vamos crear la mayoría de partes de la interface Administrativa. Para las tareas Asíncronas y dinámicas en las vistas HTML usaremos Angular.

Layout UI (Administrador)

Cuando creamos el proyecto con Rails 6, este nos creo un archivo layout llamado application.html.erb en soundcloudapp > view > layouts > application.html.erb


Este archivo application.html.erb  es un archivo de plantilla que usaremos en todas las vistas de nuestro administrador, esto es genial porque si queremos hacer un cambio que se aplique a todas nuestras vistas administrativas, solo debemos editar el archivo application.html.erb 

Y pospuesto cada vista administrativa va tener en su interior su propio contenido independiente que será diferente a todos los demás.

Abro el archivo application.html.erb y agrego lo siguiente:


Si voy a la ruta http://localhost:3000/admin/cancionesusuarios/index en el navegador, debería ver lo siguiente:

Ahora que tenemos lista nuestra plantilla o layout, pasaremos a crear las vistas del administrador sin problemas.

Canciones de Usuarios UI (Administrador)

Para este módulo vamos a crear una vista principal en donde se listarán todas las canciones de un usuario, también otra vista que contendrá un formulario para agregar canciones para un usuario y otra vista para editar las canciones de un usuario. Para la tarea de eliminar simplemente lo haremos mediante un botón que diga Eliminar en la vista principal en donde se muestran todas las canciones de los usuarios.

Vista Principal (Canciones de Usuarios)

Abro el archivo llamado index.html.erb que se encuentra en soundcloudapp > view > admin > cancionesusuarios > index.html.erb 


Borro el contenido que hay en el interior del archivo index.html.erb y agrego lo siguiente:


Y si voy nuevamente a la ruta http://localhost:3000/admin/cancionesusuarios/index en el navegador, debería ver lo siguiente:

Los datos que puedes ver en la imagen anterior son datos para maquetar o estructurar la vista de Canciones del Usuario, mas adelante usaremos datos desde la base de datos.

Agregar (Canciones de Usuarios)

Esta vista servirá para agregar canciones para un usuario determinado, abro el archivo llamado crear.html.erb que se encuentra en soundcloudapp > view > admin > cancionesusuarios > crear.html.erb 


Borro el contenido que hay en el archivo crear.html.erb y agrego lo siguiente:


Si voy a la ruta http://localhost:3000/admin/cancionesusuarios/crear en el navegador, debería ver lo siguiente:

En el formulario anterior tenemos el campo usuario, este campo será alimentado por la tabla usuarios que creamos anteriormente. Asimismo tenemos un campo llamado genero, este campo también lo podemos alimentar desde una tabla que por ejemplo se llame generos. Pero para no expandirme tanto con el tutorial, escribiré los nombres de los géneros manualmente.

Actualizar (Canciones de Usuarios)

Esta vista servirá para editar las canciones de un usuario determinado, abro el archivo llamado actualizar.html.erb que se encuentra en soundcloudapp > view > admin > cancionesusuarios > actualizar.html.erb 


Borro el contenido que hay en el archivo actualizar.html.erb y agrego lo siguiente:


Si voy a la ruta http://localhost:3000/admin/cancionesusuarios/actualizar en el navegador, debería ver lo siguiente:

En la imagen anterior he colocado unos collapse de Bootstrap 4 para poder editar cada canción del usuario.

Bien hasta aquí he creado las vistas del módulo Canciones del Usuario y más adelante las integraremos con la base de datos.

Ten Paciencia, lo que quiero es que entiendas todo el proceso para Crear este Proyecto y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje. 

Nota (s)

  • En la siguiente parte crearemos la interface administrativa del módulo Configuración.
  • No olvides que debemos utilizar la tecnología para hacer cosas buenas por el mundo. 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.