Ruby on Rails Clones - Evernote - Videos 26 - 34 - Homework Four

[jendiamond]

Create Pinterest App

The repository of the code

26. Getting started with EverNote Web App Replica
27. Adding Notes and Installing Gems
28. Display Notes and Basic Navigation
29. Edit and Delete Notes
30. User and Notes Association (making notes private)
31. Modifications to User and Notes
32. Styling and Structure (import custom styling)
33. Adding Styling to Notes and Final Corrections
34. Yes... You made it.

26. Getting started with EverNote Web App Replica

$ rails new ever_note_clone

$ cd ever_note_clone

$ rails g controller Welcome index

      create  app/controllers/welcome_controller.rb
       route  get 'welcome/index'
      invoke  erb
      create    app/views/welcome
      create    app/views/welcome/index.html.erb
      invoke  test_unit
      create    test/controllers/welcome_controller_test.rb
      invoke  helper
      create    app/helpers/welcome_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/welcome.coffee
      invoke    scss
      create      app/assets/stylesheets/welcome.scss

config/routes.rb

Rails.application.routes.draw do
  get 'welcome/index'
  root 'welcome#index'
end

Update the your Gemfile with the gems we will be using and so you can push to Heroku, then bundle again to install all the new gems

• Add the Haml gem `gem 'haml', '~> 4.0.7'
• Add the simple_form gem `gem 'simple_form', '~> 3.1.1'
• Add the devise gem gem 'devise', '~> 3.5.2'

source 'https://rubygems.org'
# ruby 2.1.4p265

gem 'rails', '4.2.4'
gem 'sqlite3'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc
gem 'haml', '~> 4.0.7'
gem 'simple_form', '~> 3.1.1'
gem 'devise', '~> 3.5.2'

group :development, :test do
  gem 'sqlite3'
  gem 'byebug', '~> 6.0.2'
  gem 'web-console', '~> 2.0'
  gem 'spring'
  gem 'rspec-rails', '~> 3.0'
end

group :production do
  gem 'pg'
  gem 'rails_12factor'
end

group :test do
  gem 'launchy'
  gem 'capybara'
end

$ bundle

Rename app/views/welcome/index.html.erb to app/views/welcome/index.html.haml and update the html to haml

%h1 NeverNotes

27. Adding Notes and Installing Gems

$ rails g model Note title:string content:text

invoke  active_record
      create    db/migrate/20150902070050_create_notes.rb
      create    app/models/note.rb
      invoke    rspec
      create      spec/models/note_spec.rb

$ rake db:migrate

Install simple_form rails generate simple_form:install --bootstrap

      create  config/initializers/simple_form.rb
       exist  config/locales
      create  config/locales/simple_form.en.yml
      create  lib/templates/erb/scaffold/_form.html.erb

Inside your views, use the 'simple_form_for' with one of the Bootstrap form
classes, '.form-horizontal' or '.form-inline', as the following:

`= simple_form_for(@user, html: { class: 'form-horizontal' }) do |form|`

`$ rails g controller Notes

      create  app/controllers/notes_controller.rb
      invoke  erb
      create    app/views/notes
      invoke  rspec
      create    spec/controllers/notes_controller_spec.rb
      invoke  helper
      create    app/helpers/notes_helper.rb
      invoke    rspec
      create      spec/helpers/notes_helper_spec.rb
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/notes.coffee
      invoke    scss
      create      app/assets/stylesheets/notes.scss

Create the CRUD actions in the Note controller

app/controllers/notes_controller.rb

class NotesController < ApplicationController
  def index

  end

  def show
  end

  def new
    @note = Note.new
  end

  def create
    @note = Note.new(note_params)
  end

  def edit
  end

  def update
  end

  def destroy
  end

private

  def find_note
  end

  def note_param
    params.require(:note).permite(:title, :content)
  end

end

Update the routes config/routes.rb to add the CRUD actions

Rails.application.routes.draw do
  get 'welcome/index'

  root 'welcome#index'

  resources :notes
end

28. Display Notes and Basic Navigation

Update the Note controller create action

app/controllers/notes_controller.rb

class NotesController < ApplicationController
  ... other methods (def blah) ...
  def create
    @note = Note.new(note_params)

    if @note.save
      redirect_to @note
    else
      render 'new'
    end 
  end 
end

Create a view for the notes

app/views/notes/show.html.haml

%h1=  @note.title
%p= @note.content

Update the Note controller private method find_note app/controllers/notes_controller.rb

The (params[:id]) refers to the url parameter and the note id which here is 1 >> localhost:3000/notes/1

app/controllers/notes_controller.rb

class NotesController < ApplicationController
+  before_action :find_note, only; [:show, :edit, :update, :destroy]
  ... other methods (def blah) ...
  private

  def find_note
+    @note = Note.find(params[:id])
  end
end

Add a Link to show the note created in app/views/notes/show.html.haml

 %h1= @note.title
 %p= @note.content

+ = link_to "All Notes", notes_path

Update the index action in the `app/controllers/notes_controller.rb to show all the notes in descending order

class NotesController < ApplicationController
  before_action :find_note, only: [:show, :edit, :update, :destroy]
  def index
 +   @notes = Note.all.order("created_at DESC")
  end

Add a Link to show all the notes in app/views/notes/index.html.haml

- @notes.each do |note|
    %h2= link_to note.title, note
    %p= time_ago_in_words(note.created_at)                                       

---

29. Edit and Delete Notes

Update the Note controller update and destroy method in app/controllers/notes_controller.rb

class NotesController < ApplicationController
   ... other methods (def blah) ...

  def update
+    if @note = update(note_params)
+      redirect_to @note
+    else
+      render 'edit'
+    end
  end 

  def destroy
+    @note.destroy
+    redirect_to @note
  end

end

Add a Link to show the note created in app/views/notes/show.html.haml

 %h1= @note.title
 %p= @note.content

 = link_to "All Notes", notes_path

+ = link_to "Edit", edit_note_path(@note)
+ = link_to "Delete", note_path(@note), method: :delete, data: {confirm "Are you
sure?"}

Create the Edit page app/views/notes/edit.html.haml

%h1 Edit Your Note

= render 'form'

= link_to "Cancel", note_path

Add a Link to create a new note in app/views/notes/index.html.haml

  - @notes.each do |note|  
      %h2= link_to note.title, note  
      %p= time_ago_in_words(note.created_at)      
+ = link_to "Create a new Note", new_note_path                                   

---

30. User and Notes Association (making notes private)

Setting up Devise

In your terminal run:

$ rails g devise:install

Go to config/environments/development.rb and add this line to the botton of the file before the final end statement

  # Needed for Devise
  config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }

Add this to app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>Phoebesnotes</title>
  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>

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

  <%= yield %>

</body>
</html>

In your terminal run:

$ rails g devise:views

      invoke  Devise::Generators::SharedViewsGenerator
      create    app/views/devise/shared
      create    app/views/devise/shared/_links.html.erb
      invoke  simple_form_for
      create    app/views/devise/confirmations
      create    app/views/devise/confirmations/new.html.erb
      create    app/views/devise/passwords
      create    app/views/devise/passwords/edit.html.erb
      create    app/views/devise/passwords/new.html.erb
      create    app/views/devise/registrations
      create    app/views/devise/registrations/edit.html.erb
      create    app/views/devise/registrations/new.html.erb
      create    app/views/devise/sessions
      create    app/views/devise/sessions/new.html.erb
      create    app/views/devise/unlocks
      create    app/views/devise/unlocks/new.html.erb
      invoke  erb
      create    app/views/devise/mailer
      create    app/views/devise/mailer/confirmation_instructions.html.erb
      create    app/views/devise/mailer/reset_password_instructions.html.erb
      create    app/views/devise/mailer/unlock_instructions.html.erb

In your terminal run:

$ rails g devise User

      invoke  active_record
      create    db/migrate/20150916213906_devise_create_users.rb
      create    app/models/user.rb
      invoke    rspec
      create      spec/models/user_spec.rb
      insert    app/models/user.rb
       route  devise_for :users

In your terminal run:

$ rake db:migrate

In your terminal run:

$ rails g migration add_user_id_to_notes

      invoke  active_record
      create    db/migrate/20150916214443_add_user_id_to_notes.rb  user_id:integer

which creates: db/migrate/20150916214610_add_user_id_to_notes.rb

class AddUserIdToNotes < ActiveRecord::Migration
  def change
    add_column :notes, :user_id, :integer
  end
end

Associate the Notes with the User app/models/note.rb

class Note < ActiveRecord::Base
  belongs_to :user
end

Associate the User with the Notes app/models/user.rb

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

In app/controllers/notes_controller.rb replace Note.new with current_user.notes.build to associate the note with the user and the user _id as per Devise

  def new 
+    @note = current_user.notes.build
  end 

  def create
+    @note = current_user.notes.build(note_params)

    if @note.save
      redirect_to @note
    else
      render 'new'
    end 
  end 

---

31. Modifications to User and Notes

Update the index method in app/controllers/notes_controller.rb to only show the notes by the current user

  def index
    @notes = Note.where(user_id: current_user)
  end 

Re-adjust the routes config/routes.rb so if you are signed in you can go right to your notes

Rails.application.routes.draw do
  devise_for :users
  get 'welcome/index'
  resources :notes

  authenticated :user do
    root 'notes#index', as: "authenticated_root"
  end

  root 'welcome#index'

end

---

32. Styling and Structure (import custom styling)

Renameapp/assets/stylesheets/application.css to app/assets/stylesheets/application.css/scss

require self includes the styling on this page
require tree . includes the other style sheets

/*
 *= require_self
 */

@import 'normalize.css';
@import 'global.css.scss';
@import 'notes.css.scss';
@import 'welcome.css.scss';

Create app/assets/stylesheets/normalize.css and copy every thing from the link below into it

https://github.com/CrashLearner/EvernoteClone/blob/master/app/assets/stylesheets/normalize.css

Create app/assets/stylesheets/normalize.css and copy every thing from the link below into it

https://github.com/CrashLearner/EvernoteClone/blob/master/app/assets/stylesheets/global.css.scss

Change app/assets/stylesheets/notes.scss to app/assets/stylesheets/notes.css.scss and copy every thing from the link below into it

https://github.com/CrashLearner/EvernoteClone/blob/master/app/assets/stylesheets/notes.css.scss

Change app/assets/stylesheets/welcome.scss to app/assets/stylesheets/welcome.css.scss and copy every thing from the link below into it

https://github.com/CrashLearner/EvernoteClone/blob/master/app/assets/stylesheets/welcome.css.scss

Change app/views/layouts/application.html.erb to app/views/layouts/application.html.haml and update it to haml syntax

!!!
%html
%head
  %title Phoebe's Notes
  = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
  = javascript_include_tag 'application', 'data-turbolinks-track' => true
  = csrf_meta_tags
%body
  %header
    .header_inner
      = link_to "Phoebe's Notes", root_path, id: "logo"
      %nav
        - if user_signed_in?
          = link_to "New Note", new_note_path
          = link_to "Sign Out", destroy_user_session_path, method: delete

        -else
          = link_to "Log In", new_user_session_path
  %p.notice= notice
  %p.alert= alert

  = yield

Go to app/views/welcome/index.html.haml and add something similar to this:

https://github.com/CrashLearner/EvernoteClone/blob/master/app/views/welcome/index.html.haml

33. Adding Styling to Notes and Final Corrections

Add

34. Yes... You made it.

Add

35. Let's make it better...

[aundriab]

Hi Jen -
I apologize for the late notice, but I won't be able to make it tonight's
meet-up. Hope you have fun on your trip next week!

Andrea

Hi Andrea,

Thanks for letting me know feel free to email next time at [email protected] I don't have your email. Juan Luna will be there next week to help everyone. :)