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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
/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
|
1 2 3 4 5 6 7 8 9 10 |
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
|
1 2 3 4 5 6 7 8 9 10 |
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
|
1 2 3 4 5 6 7 8 9 10 |
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
|
1 2 3 4 5 6 7 8 9 10 |
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
|
1 2 3 4 5 6 7 8 9 10 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
/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.