Rails Project 3 — Spotify/Vinyl. My third project for the Flatiron Web…
By: Kevin Kang
Tags: Spotify, Coding, Music, Flatiron School, Ruby on Rails

Getting Started

First step was to create the Rail’s program by writing:

'rails new rails-spotify --database=postgresql'

By running the above command, you can create all the basic Ruby files required to start writing the application. By setting the database as PostgreSQL, you are letting Rail’s know to use PostgreSQL instead of SQLite as the preferred Database manager.

A bit about PostgreSQL

PostgreSQL is a popular database, similar to SQLite. The main difference, from my limited knowledge of database management systems, between SQLite and PostgreSQL is where the database information is stored. We were told that PostgreSQL was recommended for this project since SQLite does not work if we wish to deploy our project via Heroku.

I installed PostgreSQL for Windows via https://www.postgresql.org/.

Once PostgreSQL was installed on my computer, I followed the below guide by Flatiron alumni, Micha Shute.

Setting up Window’s Subsystem for Linux WSL

Gems Utilized

I installed the following gems’ into my Gemfile:

##Bootstrap##

gem 'jquery-rails'

gem 'bootstrap-sass', "~> 3.4.1"

gem 'sassc-rails', ">= 2.1.0"

gem 'popper_js', "~> 1.12.9" ##Devise##

gem 'devise'

gem 'omniauth-facebook' ##RSpotify##

gem 'rspotify

I will only be describing my process for utilizing Devise and RSpotify. Bootstrap deserves its own blog post, given the amount of errors and problems it caused.

Devise

First, add the gem ‘devise’ to the Gemfile and run ‘bundle install’

Next, run the following code once Devise has been successfully installed.

rails g devise:install

A list of four instructions will be displayed in the terminal. You can skip the first one. The second instruction notes to define a root_url. I defined my root url in my config/routes.rb file as:

root 'welcome#home'

The third instruction are for various alerts and notices that Devise will use when user’s login, sign up, or log out.

I created a new file under views/layouts as ‘_alerts.html.erb’. I copied the two lines of code into my new layout file:

<p class="notice"><%= notice %></p>

<p class="alert"><%= alert %></p>

I then added the following in my views/layouts/application.html.erb:

<body>

<%= yield %>

<%= render 'layouts/alerts' %>

</body>

I decided to render the _alerts.html.erb at the bottom of the body, as rendering if at the top of the page caused the web page to have an ugly gap between the navbar and the yielded page.

Next step is to create the User table by running:

rails g devise User

Once successfully created, run:

rails g devise:views

This generates all the view files in the folder views/devise, which allows us to edit the pages as we see fit.

Once the devise view files have been created, run db:migrate.

Now that Devise has been correctly set up to be used by our program, we can link to routes such as “/users/sign_in”, “/users/sign_out”, “/users/sign_up”.

For example, we can link to the Sign Up page, Sign In page, and Sign Out page by writing:

<%= link_to "Sign Up", new_user_registration_path %>

<%= link_to "Sign In", new_user_session_path %>

<%= link_to "Sign Out", destroy_user_session_path, method: :delete %>

RSpotify

The RSpotify gem is a wrapper that allows us to access the Spotify API by using Ruby code. Add the RSpotify gem to the Gemfile and run ‘bundle’:

gem 'rspotify'

I then created an Artist controller, which allows us to list the searched artist as well as show the correlated API data.

rails g controller artists index show search

I added the routes to be used in the Spotify Search:

#config/routes.rb get '/artists', to: 'artists#index'

get '/artists/:id', to: 'artists#show', as: 'artist'

get '/search', to: 'artists#search'

I then created a new file inside views/artists, ‘search.html.erb’ and added the following form:

<%= form_tag artists_path, method: "get", html: { class: "form" } do %> <div class="form-group col-xs-4"> <%= text_field_tag(:artist_name, "", placeholder: "Enter artist name", class: "form-control") %> </div> <%= submit_tag "Search", class: "btn btn-primary" %> <% end %>

This form uses a GET method to render the artists index page.

Now in my ArtistsController, we can use the various methods made available to use via RSpotify. (Please see the documentation for more information).

#controllers/artists_controller.rb class ArtistsController < ApplicationController



def search

end def index

if !params[:artist_name].empty?

@artists = RSpotify::Artist.search(params[:artist_name])

else

redirect_to root_path

end

end def show

@artist = RSpotify::Artist.find(params[:id])

end end

The search form returns params[:artist_name] and RSpotify allows us to search for the Artist via ‘RSpotify::Artist.search(params[:artist_name]’. This search method will return an array of Artist objects ordered by popularity.

Now on our view page for index for the ArtistsController:

#views/artists/index.html.erb <h1 class="page-header">Artists Matching <%= params[:artist_name] %></h1> <ul>

<% @artists.each do |artist| %>

<li><%= artist.name %> | <%= link_to "Show", artist_path(artist.id) %> </li>

</ul>

The index page will iterate through the array that was returned to us by using the search method provided by RSpotify and provide links to the show page for each artist that was matched.

For the show view page, we can use the artist’s id to show the instance of the Artist object. Then we can iterate through the Artist object to list out the associated album names as well as the tracks for each album.