Daily Record http://daily-record.herokuapp.com

Simple use multi-track collaborative music blog

Starting off following this tutorial. It’s kind of old, but let’s see what we can get out of it anyway. For portions that I know are out of date, I am referencing onemonthrails.

Files

Generate Track scaffold

rails g scaffold tracks author:string title:string reflection:text
rake db:migrate

Install the ‘aws-sdk’ ruby gem

Gemfile

gem 'aws-sdk', '~> 1.47.0'

Install paperclip

Gemfile

gem 'paperclip', '~> 4.2.0'

Setup Devise

https://github.com/plataformatec/devise

Gemfile

Install Devise

gem 'devise'
bundle install
rails g devise:install

Setup Devise

• [ ] Define default url options in environments files
  • [ ] development.rb

    config.action_mailer.default_url_options = { host: 'localhost:3000' }
            

  • [ ] production.rb

    config.action_mailer.default_url_options = { host: 'http://daily-record.herokuapp.com' }
            

• [ ] Define root_url to something

  routes.rb

  root to: "tracks#index"
      

• [ ] Place flash messages

  application view

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

• [ ] Generate Devise views

  rails g devise:views
      

• [ ] Generate Devise User model

  rails g devise User
  rake db:migrate
      

Configure tracks model with paperclip

track.rb

belongs_to :user
has_attached_file :audio

Generate a paperclip migration

rails g paperclip track audio
rake db:migrate

Update the Tracks controller for strong parameters

tracks controller

def track_params
  params.require(:track).permit(:author, :title, :reflection, :audio)
end

• [ ] As of version 4.0, all attachments are required to include a content_type validation, a file_name validation, or to explicitly state that they’re not going to have either. Paperclip raises ‘MissingRequiredValidatorError’ if you do not do this.

  http://stackoverflow.com/questions/21897725/papercliperrorsmissingrequiredvalidatorerror-with-rails-4

  • [ ] add to Track Model

    validates_attachment_content_type :audio, :content_type => ['audio/mp3','audio/mpeg','audio/wav']
            

• [ ] WAV type?

Update Tracks views

• [ ] Form

  <div class="form-group">
    <%= f.label :audio %>
    <%= f.file_field :audio, class: "form-control" %>
  </div>
      

• [ ] Show

  http://apidock.com/rails/ActionView/Helpers/AssetTagHelper/audio_tag

  <p>
    <strong>Audio:</strong>
    <%= audio_tag @track.audio.url %>
  </p>
      

• [ ] Index

  ./app/views/tracks/index.html.erb

  <td><%= audio_tag track.audio.url %></td>
      

Configure S3

production.rb

config.paperclip_defaults = {
  :storage => :s3,
  :s3_credentials => {
    :bucket => ENV['AWS_BUCKET'],
    :access_key_id => ENV['AWS_ACCESS_KEY_ID'],
    :secret_access_key => ENV['AWS_SECRET_ACCESS_KEY']
  }
}

• [ ] Create an S3 bucket in AWS

  dailyRecordTracks

  • [ ] Grant permission to everyone to upate/delete, edit, view

Get secret keys from AWS and configure heroku configs

heroku config:set AWS_BUCKET=dailyRecordTracks
heroku config:set AWS_ACCESS_KEY_ID=***
heroku config:set AWS_SECRET_ACCESS_KEY=***

Set up for audio playback

• [ ] MediaelementRails

  Gemfile

  gem 'mediaelement_rails'
  bundle install
      

  application.js

  //= require mediaelement_rails
      

  ./app/assets/stylesheets/application.css.scss Stylesheets

  *= require mediaelement_rails
      

  and optionally:

  *= require mediaelement_rails/mejs-skins
      

User/Track associations

rails g migration add_user_id_to_tracks user_id:integer:index
rake db:migrate

track.rb

belongs_to :user

user.rb

class User < ActiveRecord::Base
  # Include default devise modules. Others available are:
  # :token_authenticatable, :confirmable,
  # :lockable, :timeoutable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :trackable, :validatable

:

  has_many :tracks
end

Authentication

Tracks Controller

Set up Bootstrap

Bootstrap-sass

• [ ] Create custom bootstrap stylesheet

  ./app/assets/stylesheets/bootstrap_and_customization.css.scss

  • [ ] create file

    echo "@import 'bootsrap';" > app/assets/stylesheets/bootstrap_and_customization.css.scss
            

  NOTE Place new variables before “@import ‘bootstrap’”

  • [ ] Fonts

    EXAMPLE:

  @import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,700italic,700|Clicker+Script);
      

  • [ ] Variables

  $phill-grn: #3f8000;
      

• [ ] Require Bootstrap’s Javascript, after jquery_ujs

  ./app/assets/javascripts/application.js

  //= require jquery
  //= require jquery_ujs
  //= require bootstrap
  //= require turbolinks
  //= require_tree .
      

Configure Views

Application

Application View

Header

Static Pages

Songs

Style

Stylesheets

Custom Bootstrap

Tracks Styles