Icono del sitio Blog de Programación y Desarrollo – Nube Colectiva

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

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:

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.


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.


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


Entonces abro el archivo Gemfile y le añado las dependencias correspondientes:


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.


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.


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)

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

Salir de la versión móvil