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

3 minuto(s)

En esta página:

En la anterior parte llamada Creando una Aplicación Web similar a SoundCloud con Ruby on Rails 6 y Angular 10 – Parte 8 creamos la interface visual del módulo configuración, haciendo uso del framework Bootstrap. En esta nueva parte vamos a crear la interface visual (UI) del modulo administrativo historial de reproducciones que gestionará todas las canciones que fueron reproducidas por un usuario, vamos con ello.

Partes

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

Asimismo, te invito a escuchar el Podcast: “Razones Por Las Cuales Te Cuesta Aprender A Programar”:

Spotify:	Sound Cloud:	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 9.

Historial de Reproducciones UI (Administrador)

Este módulo va ser para tener un control en cuanto a vista previa de las canciones que escucho un usuario, no va tener funciones adicionales, por lo que será una vista sencilla.

Vista Principal (Historial de Reproducciones)

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


/soundcloudapp 
├── /app
    ├── /assets 
    ├── /channels 
    ├── /controllers 
    ├── /helpers
    ├── /javascript
    ├── /jobs
    ├── /mailers
    ├── /models
    ├── /views
        ├── /admin 
            ├── /cancionesusuarios
            ├── /configuracion
            ├── /historialreproducciones
                ├── actualizar.html.erb 
                ├── crear.html.erb 
                ├── index.html.erb // Abro este Archivo
                ├── leer.html.erb 
            ├── /usuarios
        ├── /layouts 
├── /bin
├── /config
├── /db
├── /lib
├── /log
├── /public
├── /storage
├── /test
├── /tmp
├── /vendor
├──  .gitignore
├──  .ruby-version
├──  config.ru
├──  Gemfile  
├──  Gemfile.lock
├──  package.json
├──  Rakefile
├──  Gemfile.lock
├──  README.md

/soundcloudapp

├── /app

├── /assets

├── /channels

├── /controllers

├── /helpers

├── /javascript

├── /jobs

├── /mailers

├── /models

├── /views

├── /admin

├── /cancionesusuarios

├── /configuracion

├── /historialreproducciones

├── actualizar.html.erb

├── crear.html.erb

├── index.html.erb // Abro este Archivo

├── leer.html.erb

├── /usuarios

├── /layouts

├── /bin

├── /config

├── /db

├── /lib

├── /log

├── /public

├── /storage

├── /test

├── /tmp

├── /vendor

├── .gitignore

├── .ruby-version

├── config.ru

├── Gemfile

├── Gemfile.lock

├── package.json

├── Rakefile

├── Gemfile.lock

├── README.md

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


<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
  <h1 class="h2">Historial de Reproducciones (Usuarios)</h1>
</div>

<div class="table-responsive">
  <table class="table table-striped table-sm text-center">
    <thead>
      <tr>
        <th>#</th>
        <th>Canción</th>
        <th>Autor</th>
        <th>Fecha de Reproducción</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>La Luna Grande</td>
        <td>DJ Astronomo</td>
        <td>25-08-2021</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Podcast: Como Ser Emprendedor</td>
        <td>Dr. Carlos Torres</td>
        <td>24-08-2021</td>        
      </tr>
      <tr>
        <td>3</td>
        <td>Arroz con Leche</td>
        <td>Banda Grupal</td>
        <td>10-02-2021</td>
      </tr>
    </tbody>
  </table>
</div>

<h1 class="h2">Historial de Reproducciones (Usuarios)</h1>

</div>

<thead>

<tr>

<th>Canción</th>

<th>Autor</th>

<th>Fecha de Reproducción</th>

</tr>

</thead>

<tbody>

<tr>

<td>La Luna Grande</td>

<td>DJ Astronomo</td>

</tr>

<tr>

<td>Podcast: Como Ser Emprendedor</td>

<td>Dr. Carlos Torres</td>

</tr>

<tr>

<td>Arroz con Leche</td>

<td>Banda Grupal</td>

</tr>

</tbody>

</table>

</div>

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

En la imagen anterior puedes ver que mostramos el nombre de la canción, autor de la canción (no el usuario propietario) y la fecha en que se hizo la reproducción de esa canción.

Bueno hasta aquí he creado la única interface que tendrá la vista del módulo Historial de Reproducciones, parece sencilla pero al final de todo el proyecto suma y teniendo este módulo creado, le podríamos agregar algunas funcionalidades extras más adelante si es que las requerimos.

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 Usuarios.
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.