En esta página:
Has visto la popular plataforma SoundCloud, es genial ya que es una aplicación web que permite subir archivos de audio a los usuarios de manera gratuita hasta cierta cantidad de minutos, en sus inicios SoundCloud fue construido con Ruby on Rails, en la actualidad usa otras tecnologías como React JS, PHP, Java y otras más. Te gustaría aprender a crear una aplicación web similar a SoundCloud ?, pues sígueme en esta nueva aventura en donde usaremos los frameworks Ruby on Rails 6 y Angular 10 para crearla junto a otras tecnologías o herramientas.
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: “Herramientas Online Para El Trabajo En Equipo”:
| 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 1.
Para poder hacer este tutorial, debes de tener instalado y configurado Ruby y Node JS, en los siguientes artículos te explico como configurar cada una de ellas:
Bueno entonces continuemos con el tutorial.
Creación del Proyecto con Ruby on Rails
Hasta la fecha de este tutorial, la última versión de Ruby on Rails (RoR) es la 6.0.3.2 y comenzaré creando un nuevo proyecto, para esto 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 |
rails new soundcloudapp create create README.md create Rakefile create .ruby-version create config.ru create .gitignore ... ... (Continua la Instalación) ... ... ├─ wbuf@1.7.3 ├─ webpack-dev-middleware@3.7.2 ├─ webpack-dev-server@3.11.0 └─ ws@6.2.1 Done in 18.58s. Webpacker successfully installed <img draggable="false" data-mce-resize="false" data-mce-placeholder="1" data-wp-emoji="1" class="emoji" alt="🎉" src="https://s.w.org/images/core/emoji/12.0.0-1/svg/1f389.svg"> <img draggable="false" data-mce-resize="false" data-mce-placeholder="1" data-wp-emoji="1" class="emoji" alt="🍰" src="https://s.w.org/images/core/emoji/12.0.0-1/svg/1f370.svg"> # Ingreso al directorio que Ruby on Rails me creo para el proyecto cd soundcloudapp |
A mi proyecto le he puesto el nombre soundcloudapp y luego que Ruby on Rails (RoR) termina de crear mi proyecto, me ha generado un directorio con el nombre del proyecto y dentro de este directorio, se ha generado una estructura de directorios y archivos necesarios para que el proyecto funcione correctamente.
|
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 ├── Gemfile.lock ├── package.json ├── postcss.config.js ├── Rakefile ├── yarn.lock |
Tal como mencione al inicio de este Post, debes de tener instalado y configurado Ruby on Rails 6 correctamente, igualmente Angular 10, no me enfocaré en ello, ya que para este tutorial debes de tener un nivel avanzado en Ruby on Rails 6 y por ende debes de saber como instalar al menos Ruby on Rails. Si necesitas ayuda con ello o tienes problemas, puedes ingresar a a los canales de comunicación de la comunidad (WhatsApp, Discord, Telegram) o dejar tu consulta en los comentarios de este Post.
Bootstrap
Angular 10 cuenta con sus propios componentes de Angular Material, pero el aspecto no sería muy similar a SoundCloud, así que trabajaré con Bootstrap, que se aproxima más al diseño de la plataforma SoundCloud.
Bueno para usar Bootstrap en Ruby on Rails instalo la Gema bootstrap añadiéndola en el archivo Gemfile, ademas voy a instalar las gemas jquery-rails y popper_js que son dependencias necesarias para que Bootstrap funcione correctamente.
El archivo Gemfile de Ruby on Rails (RoR) se encuentra en el directorio principal del proyecto, es decir en soundcloudapp > Gemfile
|
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 |
Entonces abro el archivo Gemfile y le añado las dependencias correspondientes:
|
1 2 3 4 5 6 7 8 9 10 |
# Bootstrap 4 gem 'bootstrap', '~> 4.5.0' # Popper_js gem 'popper_js', '~> 1.16.0' # Jquery-rails gem 'jquery-rails', '~> 4.4.0' |
Las versiones de las dependencias Bootstrap 4, Popper JS y Jquery rails son las versiones actuales hasta la fecha de este tutorial, en el futuro pueden cambiar.
Ahora para instalar las dependencias, ejecuto el siguiente comando.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
bundle install Fetching gem metadata from https://rubygems.org/............. Fetching gem metadata from https://rubygems.org/. Resolving dependencies... Using rake 13.0.1 ... ... (Continua la instalación) ... Using web-console 4.0.3 Using webdrivers 4.4.1 Using webpacker 4.2.2 Bundle complete! 17 Gemfile dependencies, 75 gems now installed. Use `bundle info [gemname]` to see where a bundled gem is installed. |
Ruby on Rails (RoR) me instalo las 3 dependencias anteriores y también las que estaban en el archivo Gemfile, las cuales aún no las había instalado.
Ahora para estar seguros de que el proyecto se ha creado correctamente con Ruby on Rails 6, corro el servidor ejecutando el siguiente comando.
Nota: Si tienes problemas con el archivo webpacker.yml al arrancar el servidor de Ruby on Rails, te recomiendo seguir esta solución que brinda el usuario Fer Trovati en Stack Overflow, dicha solución es la primera y la que más puntos tiene.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
rails server => Booting Puma => Rails 6.0.3.2 application starting in development => Run `rails server --help` for more startup options *** SIGUSR2 not implemented, signal based restart unavailable! *** SIGUSR1 not implemented, signal based restart unavailable! *** SIGHUP not implemented, signal based logs reopening unavailable! Puma starting in single mode... * Version 4.3.5 (ruby 2.6.5-p114), codename: Mysterious Traveller * Min threads: 5, max threads: 5 * Environment: development * Listening on tcp://[::1]:3000 * Listening on tcp://127.0.0.1:3000 Use Ctrl-C to stop Started GET "/" for ::1 at 2020-07-11 00:32:39 -0500 (3.5ms) SELECT sqlite_version(*) Processing by Rails::WelcomeController#index as HTML Rendering C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/railties-6.0.3.2/lib/rails/templates/rails/welcome/index.html.erb Rendered C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/railties-6.0.3.2/lib/rails/templates/rails/welcome/index.html.erb (Duration: 28.8ms | Allocations: 416) Completed 200 OK in 107ms (Views: 53.6ms | ActiveRecord: 0.0ms | Allocations: 2384) |
Voy al navegador y abro el servidor local con el puerto 3000 http://localhost:3000/ y debería ver la página por defecto que Ruby on Rails me crea para el nuevo proyecto.
Bueno con esto ya tengo Desplegado Ruby on Rails 6 y Bootstrap para comenzar a crear la aplicación web similar a SoundCloud.
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 Ruby, Ruby on Rails y Bootstrap, que suelen cambiar sus opciones de despliegue y configuración en futuras versiones.
- En el siguiente capitulo continuare con la configuración de la Base de Datos, migraciones y demás aspectos.
- 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.