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

7 minuto(s)

En esta página:

En la Parte anterior llamada Creando una Aplicación Web similar a SoundCloud con Ruby on Rails 6 y Angular 10 – Parte 1 creamos un nuevo proyecto con Ruby on Rails 6, asimismo integramos Bootstrap 4 con sus dependencias respectivas y verificamos si todo quedo listo para comenzar a crear nuestro proyecto, en esta Parte 2 del tutorial, comenzaremos con la creación de la vista HTML del proyecto, vamos con ello.

Partes

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

Que es Ruby on Rails (RoR) y otros detalles
Tu primer Hola Mundo con Ruby on Rails
Como crear un CRUD con Ruby on Rails 6 y Bootstrap 4 – Parte 1
Lee más artículos en la categoría Ruby on Rails.

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

Spotify:	Sound Cloud:

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

Para guardar los datos de los usuarios que se registran en la plataforma, las canciones de cada usuario, datos de configuración del usuario y otros datos más, necesito una base de datos, voy a usar MySQL para estas tareas.

Base de Datos

Voy a instalar la Base de Datos MySQL mediante la gema mysql2 que hasta la fecha de este Post se encuentra en la versión 0.5.3, para instalarla abro el archivo Gemfile que se encuentra en el directorio principal de mi proyecto.


/soundcloudapp
├── /app  
├── /bin
├── /config
├── /db
├── /lib
├── /log
├── /node_modules
├── /public
├── /storage
├── /test
├── /tmp
├── /vendor
├──  .browserslistrc
├──  .ruby-version
├──  babel.config.js
├──  config.ru
├──  Gemfile // Abro este Archivo 
├──  Gemfile.lock
├──  package.json
├──  postcss.config.js
├──  Rakefile
├──  yarn.lock

/soundcloudapp

├── /app

├── /bin

├── /config

├── /db

├── /lib

├── /log

├── /node_modules

├── /public

├── /storage

├── /test

├── /tmp

├── /vendor

├── .browserslistrc

├── .ruby-version

├── babel.config.js

├── config.ru

├── Gemfile // Abro este Archivo

├── Gemfile.lock

├── package.json

├── postcss.config.js

├── Rakefile

├── yarn.lock

En la página con la información de la Gema mysql2, esta me brinda un código para copiarlo y pegarlo dentro del archivo Gemfile


gem 'webpacker', '~> 4.0'

gem 'turbolinks', '~> 5'

gem 'jbuilder', '~> 2.7' 

# Gema mysql2 
gem 'mysql2', '~> 0.5.3' 

# gem 'redis', '~> 4.0'

# gem 'bcrypt', '~> 3.1.7'

# gem 'image_processing', '~> 1.2'

gem 'bootstrap', '~> 4.5.0' 

gem 'jquery-rails', '~> 4.4.0'

gem 'webpacker', '~> 4.0'

gem 'turbolinks', '~> 5'

gem 'jbuilder', '~> 2.7'

# Gema mysql2

gem 'mysql2', '~> 0.5.3'

# gem 'redis', '~> 4.0'

# gem 'bcrypt', '~> 3.1.7'

# gem 'image_processing', '~> 1.2'

gem 'bootstrap', '~> 4.5.0'

gem 'jquery-rails', '~> 4.4.0'

Para proceder a instalar la gema, ejecuto el siguiente comando en mi consola de comandos.


bundle install
Fetching gem metadata from https://rubygems.org/.............
Fetching gem metadata from https://rubygems.org/.
Resolving dependencies...
Using rake 13.0.1
Using concurrent-ruby 1.1.6
Using i18n 1.8.3

...
... (Continua la instalación) 
...

Using jbuilder 2.10.0
Using jquery-rails 4.4.0
Using mysql2 0.5.3 (x64-mingw32) # Gema mysql2
Using puma 4.3.5
Using webdrivers 4.4.1
Using webpacker 4.2.2

Bundle complete! 19 Gemfile dependencies, 80 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.

bundle install

Fetching gem metadata from https://rubygems.org/.............

Fetching gem metadata from https://rubygems.org/.

Resolving dependencies...

Using rake 13.0.1

Using concurrent-ruby 1.1.6

Using i18n 1.8.3

...

... (Continua la instalación)

...

Using jbuilder 2.10.0

Using jquery-rails 4.4.0

Using mysql2 0.5.3 (x64-mingw32) # Gema mysql2

Using puma 4.3.5

Using webdrivers 4.4.1

Using webpacker 4.2.2

Bundle complete! 19 Gemfile dependencies, 80 gems now installed.

Use `bundle info [gemname]` to see where a bundled gem is installed.

Luego de ejecutar el comando anterior Ruby on Rails (RoR), me ha instalado la gema mysql2, con esto entonces ya tengo soporte para poder usar la base de datos MySQL en mi proyecto.

Creo mi base de datos manualmente ingresando a phpMyAdmin, a mi base de datos le pondré de nombre soundcloudbd con codificación utf8mb4_unicode_ci y dentro de ella crearé más adelante las tablas con las relaciones correspondientes y otras configuraciones, para gestionar los datos y procesos de la aplicación.

Ahora configuraremos la conexión a la Base de Datos, para esto abro el archivo llamado database.yml que se encuentra en config > database.yml


/soundcloudapp
├── /app  
├── /bin
├── /config
    ├── /environments
    ├── /initializers
    ├── /locales
    ├── /webpack
    ├── application.rb 
    ├── boot.rb 
    ├── cable.yml
    ├── credentials.yml.enc
    ├── database.yml // Abro este archivo 
    ├── environment.rb
    ├── master.key 
    ├── puma.rb
    ├── routes.rb
    ├── storage.yml
    ├── webpacker.yml
├── /db
├── /lib
├── /log
├── /node_modules
├── /public
├── /storage
├── /test
├── /tmp
├── /vendor
├──  .browserslistrc
├──  .ruby-version
├──  babel.config.js
├──  config.ru
├──  Gemfile  
├──  Gemfile.lock
├──  package.json
├──  postcss.config.js
├──  Rakefile
├──  yarn.lock

/soundcloudapp

├── /app

├── /bin

├── /config

├── /environments

├── /initializers

├── /locales

├── /webpack

├── application.rb

├── boot.rb

├── cable.yml

├── credentials.yml.enc

├── database.yml // Abro este archivo

├── environment.rb

├── master.key

├── puma.rb

├── routes.rb

├── storage.yml

├── webpacker.yml

├── /db

├── /lib

├── /log

├── /node_modules

├── /public

├── /storage

├── /test

├── /tmp

├── /vendor

├── .browserslistrc

├── .ruby-version

├── babel.config.js

├── config.ru

├── Gemfile

├── Gemfile.lock

├── package.json

├── postcss.config.js

├── Rakefile

├── yarn.lock

En el archivo database.yml agrego los siguiente valores en la línea development


development:
  adapter: mysql2        # Motor MySQL
  encoding: utf8         # Codificación
  database: soundcloudbd # Nombre de la Base de Datos
  username: root         # Usuario de la Base de Datos
  password:              # Password de la Base de Datos
  host: 127.0.0.1        # Servidor 
  port: 3306             # Puerto

development:

adapter: mysql2 # Motor MySQL

encoding: utf8 # Codificación

database: soundcloudbd # Nombre de la Base de Datos

username: root # Usuario de la Base de Datos

password: # Password de la Base de Datos

host: 127.0.0.1 # Servidor

port: 3306 # Puerto

Con esto ya tenemos conectado Ruby on Rails (RoR) a la base de datos soundcloudbd y podré crear mis tablas con sus respectivas relaciones. Para no tener problemas más adelante con las tablas y relaciones, es recomendable realizar primero el modelado de la base de datos, es decir la estructura de las tablas y las relaciones que va tener la aplicación, esto lo veremos a continuación.

Modelos de las Migraciones

Existen varias herramientas para modelar nuestras bases de datos MySQL, algunas son gratis como MySQL Workbench y otras de pago como Navicat for MySQL, pero yo trabajaré con las herramientas nativas que trae phpMyAdmin que son sencillas pero muy útiles.

A mi Base de Datos le agregaré las tablas usuarios, configuracion, cancionesusuario e historialreproducciones, veamos a continuación para que servirá cada una de ellas y de paso creamos su modelo en Ruby on Rails (RoR).

Tabla usuarios

Esta tabla servirá para almacenar los usuarios que se registran y también para verificar el inicio de sesión del usuario en la plataforma.

Voy a crear el modelo que me permitirá usar mi tabla usuarios, para crear mi modelo voy a mi consola de comandos y ejecuto el siguiente comando para crear mi modelo usuario, hasta la fecha de este Post, Ruby on Rails me pide que le de el nombre en singular a mi modelo, es decir usuario y no usuarios


rails g model usuario 

      invoke  active_record
      create    db/migrate/20200829164315_create_usuarios.rb
      create    app/models/usuario.rb
      invoke    test_unit
      create      test/models/usuario_test.rb
      create      test/fixtures/usuarios.yml

rails g model usuario

invoke active_record

create db/migrate/20200829164315_create_usuarios.rb

create app/models/usuario.rb

invoke test_unit

create test/models/usuario_test.rb

create test/fixtures/usuarios.yml

Luego de ejecutar el comando anterior puedes ver que se me ha creado un archivo de migración llamado 20200829164315_create_usuarios.rb, el modelo con el nombre usuario.rb, y 2 archivos de pruebas unitarias usuario_test.rb y usuarios.yml, todos estos archivos Ruby on Rails los ha colocado en sus respectivas ubicaciones o directorios que se aprecian en la consola de comandos.

Tabla configuracion

Esta tabla servirá para gestionar los datos personales de un usuario, como el correo, teléfono, contraseña, país, foto de perfil, etc.

Voy a crear el modelo que me permitirá usar mi tabla configuracion, para crear mi modelo voy a mi consola de comandos y ejecuto el siguiente comando para crear mi modelo configuracion


rails g model configuracion

      invoke  active_record
      create    db/migrate/20200829165846_create_configuracions.rb
      create    app/models/configuracion.rb
      invoke    test_unit
      create      test/models/configuracion_test.rb
      create      test/fixtures/configuracions.yml

rails g model configuracion

invoke active_record

create db/migrate/20200829165846_create_configuracions.rb

create app/models/configuracion.rb

invoke test_unit

create test/models/configuracion_test.rb

create test/fixtures/configuracions.yml

Luego de ejecutar el comando anterior puedes ver que se me ha creado un archivo de migración llamado 20200829165846_create_configuracions.rb, el modelo con el nombre configuracion.rb, y 2 archivos de pruebas unitarias configuracion_test.rb y configuracions.yml, todos estos archivos Ruby on Rails los ha colocado en sus respectivas ubicaciones o directorios que se aprecian en la consola de comandos.

Tabla cancionesusuario

Esta tabla servirá para almacenar las canciones que un usuario publica o sube a su cuenta en la plataforma.

Voy a crear el modelo que me permitirá usar mi tabla cancionesusuario, para crear mi modelo voy a mi consola de comandos y ejecuto el siguiente comando para crear mi modelo cancionesusuario


rails g model cancionesusuario

      invoke  active_record
      create    db/migrate/20200829170525_create_cancionesusuarios.rb
      create    app/models/cancionesusuario.rb
      invoke    test_unit
      create      test/models/cancionesusuario_test.rb
      create      test/fixtures/cancionesusuarios.yml

rails g model cancionesusuario

invoke active_record

create db/migrate/20200829170525_create_cancionesusuarios.rb

create app/models/cancionesusuario.rb

invoke test_unit

create test/models/cancionesusuario_test.rb

create test/fixtures/cancionesusuarios.yml

Luego de ejecutar el comando anterior puedes ver que se me ha creado un archivo de migración llamado 20200829170525_create_cancionesusuarios.rb, el modelo con el nombre cancionesusuario.rb, y 2 archivos de pruebas unitarias cancionesusuario_test.rb y cancionesusuarios.yml, todos estos archivos Ruby on Rails los ha colocado en sus respectivas ubicaciones o directorios que se aprecian en la consola de comandos.

Tabla historialreproducciones

Esta tabla servirá para almacenar las canciones que un usuario ha escuchado en la plataforma.

Voy a crear el modelo que me permitirá usar mi tabla historialreproducciones, para crear mi modelo voy a mi consola de comandos y ejecuto el siguiente comando para crear mi modelo historialreproduccion, hasta la fecha de este Post, Ruby on Rails me pide que le de el nombre en singular a mi modelo, es decir historialreproduccion y no historialreproducciones


rails g model historialreproduccion 

      invoke  active_record
      create    db/migrate/20200829171011_create_historialreproduccions.rb
      create    app/models/historialreproduccion.rb
      invoke    test_unit
      create      test/models/historialreproduccion_test.rb
      create      test/fixtures/historialreproduccions.yml

rails g model historialreproduccion

invoke active_record

create db/migrate/20200829171011_create_historialreproduccions.rb

create app/models/historialreproduccion.rb

invoke test_unit

create test/models/historialreproduccion_test.rb

create test/fixtures/historialreproduccions.yml

Luego de ejecutar el comando anterior puedes ver que se me ha creado un archivo de migración llamado 20200829171011_create_historialreproduccions.rb, el modelo con el nombre historialreproduccion.rb, y 2 archivos de pruebas unitarias historialreproduccion_test.rb y historialreproduccions.yml, todos estos archivos Ruby on Rails los ha colocado en sus respectivas ubicaciones o directorios que se aprecian en la consola de comandos.

Todos los archivos de los modelos para las migraciones, Ruby on Rails 6 los ha colocado en db > migrate


/soundcloudapp
├── /app  
├── /bin
├── /config
├── /db
    ├── /migrate // Directorio de Migraciones 
        ├── 20200829164315_create_usuarios.rb 
        ├── 20200829165846_create_configuracions.rb
        ├── 20200829170525_create_cancionesusuarios.rb
        ├── 20200829171011_create_historialreproduccions.rb 
    ├── development.sqlite3
    ├── schema.rb 
    ├── seeds.rb 
├── /lib
├── /log
├── /node_modules
├── /public
├── /storage
├── /test
├── /tmp
├── /vendor
├──  .browserslistrc
├──  .ruby-version
├──  babel.config.js
├──  config.ru
├──  Gemfile // Abro este Archivo 
├──  Gemfile.lock
├──  package.json
├──  postcss.config.js
├──  Rakefile
├──  yarn.lock

/soundcloudapp

├── /app

├── /bin

├── /config

├── /db

├── /migrate // Directorio de Migraciones

├── 20200829164315_create_usuarios.rb

├── 20200829165846_create_configuracions.rb

├── 20200829170525_create_cancionesusuarios.rb

├── 20200829171011_create_historialreproduccions.rb

├── development.sqlite3

├── schema.rb

├── seeds.rb

├── /lib

├── /log

├── /node_modules

├── /public

├── /storage

├── /test

├── /tmp

├── /vendor

├── .browserslistrc

├── .ruby-version

├── babel.config.js

├── config.ru

├── Gemfile // Abro este Archivo

├── Gemfile.lock

├── package.json

├── postcss.config.js

├── Rakefile

├── yarn.lock

Bien hasta aquí hemos configurado y conectado la base de Datos MySQL, asimismo hemos creado los modelos de las migraciones para cada una de las tablas del proyecto.

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)

Los Pasos y opciones mencionadas en este capitulo del tutorial pueden cambiar, esto no depende de nosotros, si no de las empresas que dan soporte a estas herramientas como la Gema mysql2 y Ruby on Rails (RoR), que suelen cambiar sus opciones de despliegue y configuración en futuras versiones.
En el siguiente capitulo crearemos los campos de cada cada tabla, definiremos las relaciones correspondientes, entre otras tareas.
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.