1. Devise를 통한 인증 기능 추가

페이스북 등 앱에도 있는 로그인 기능을 추가해 보세요.
devise의gem를 프로그램에 설치하여 설정합니다.
Coach:gem이 어떤 물건인지 간단하게 설명해 주세요.

1.1. devise gem 추가

응용 프로그램Gemfile을 열고 다음 줄을 추가합니다.
Gemfile

gem 'devise'

그런 다음 터미널이나 명령 프롬프트(Windows용)를 열고 응용 프로그램 디렉토리로 이동하여 다음 명령을 실행합니다.

bundle install

bcrypt로 드랍 시 아래 내용 참조
https://github.com/codahale/bcrypt-ruby/issues/149
gm를 설치했습니다.Rails 서버를 재부팅하는 것을 잊지 마십시오!

1.2. 응용 프로그램에서 devise 설정

다음은 아까 디렉터리에서 이 명령을 실행합니다.

rails generate devise:install

1.3. Devise 환경 설정

환경 파일에 기본 URL 옵션을 정의합니다.config/environments/development.rb를 열고 마지막 줄의 end에 다음 줄을 추가합니다.
config/environments/development.rb

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

추가 열기app/views/layouts/application.html.erbapp/views/layouts/application.html.erb

<% if notice %>
  <p class="alert alert-success"><%= notice %></p>
<% end %>
<% if alert %>
  <p class="alert alert-danger"><%= alert %></p>
<% end %>

다음 줄 위에 추가합니다.
app/views/layouts/application.html.erb

<%= yield %>

또한, 열기app/views/ideas/show.html.erbapp/views/ideas/show.html.erb

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

삭제합니다.
마찬가지로 app/views/comments/show.html.erb도 삭제한다.이 notice 줄들은 app/views/layouts/application.html.erb 파일에 같은 줄을 추가했기 때문에 필요 없습니다.

1.4. User 모델 설정

gener를 사용하여 User 모델을 만듭니다.
터미널 또는 명령 프롬프트(Windows용)를 열고 응용 프로그램 디렉토리로 이동하여 다음 명령을 실행합니다.

rails generate devise user
rails db:migrate

1.5. 사용자 작성

현재 사용자를 만들 준비가 되어 있습니다.Devise는 계정 생성, 로그인, 로그아웃 등과 관련된 모든 코드와 루트를 생성합니다.
Rails를 시작하는 경우 Rails를 다시 시작합니다.Rails가 시작되지 않으면 를 시작합니다.
Rails 서버가 시작되었는지 확인한 후 브라우저http://localhost:3000/users/sign_up에서 사용자를 만듭니다.

1.6.서명 및 로그인 링크 추가

그리고 사용자가 로그인할 수 있는 적절한 링크나 마법사를 내비게이션 표시줄 오른쪽 상단에 추가하는 것도 필수적이다.
이렇게 하려면 app/views/layouts/application.html.erbapp/views/layouts/application.html.erb

<p class="navbar-text float-right">
<% if user_signed_in? %>
  Logged in as <strong><%= current_user.email %></strong>.
  <%= link_to 'Edit profile', edit_user_registration_path, :class => 'navbar-link' %> |
  <%= link_to "Logout", destroy_user_session_path, method: :delete, :class => 'navbar-link'  %>
<% else %>
  <%= link_to "Sign up", new_user_registration_path, :class => 'navbar-link'  %> |
  <%= link_to "Login", new_user_session_path, :class => 'navbar-link'  %>
<% end %>
</p>

다음 줄의 다음 줄에 추가합니다.
app/views/layouts/application.html.erb

<ul class="navbar-nav mr-auto">
  <li class="nav-item active">
    <a class="nav-link" href="/ideas">Ideas</a>
  </li>
  ...
</ul>

마지막으로 로그인할 때 등록하지 않은 내용을 확인할 수 없습니다.app/controllers/application_controller.rb를 열고 end라고 적힌 곳에 가기 전에 다음 줄을 추가합니다.
app/controllers/application_controller.rb

before_action :authenticate_user!

브라우저를 열고 로그인 또는 로그아웃을 시도하십시오.

2. 디자인을 추가해 보자

헤더, 레이아웃 디자인,footer,button의 디자인을 추가하세요.

2.1. 헤더를 디자인해 주세요.

app/assets/stylesheets/application.css의 마지막에 다음 코드를 추가하십시오.
app/assets/stylesheets/application.css

nav.navbar {
  min-height: 38px;
  background-color: #f55e55;
  background-image: none;
}

그리고 이 줄들을 코드의 밑에 추가합니다.
app/assets/stylesheets/application.css

.navbar a.navbar-brand { font-size: 18px; }
.navbar a.navbar-brand:hover {
  color: #fff;
  background-color: transparent;
  text-decoration: none;
}

2.2.디자인

app/views/ideas/index.html.erb에서 행을 찾아 다음과 같이 바꾸십시오.
app/views/ideas/index.html.erb

<%= image_tag idea.picture_url(:thumb) if idea.picture.present?%>

↓
app/views/ideas/index.html.erb

<%= image_tag(idea.picture_url, width: 600) if idea.picture.present? %>

이러면 사진이 너무 커요. width 숫자를 150으로 바꾸세요.app/assets/stylesheets/ideas.scss의 마지막에 다음 코드를 추가합니다.
app/assets/stylesheets/ideas.scss

.container a:hover {
  color: #f55e55;
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0);
}

2.3.footer에 스타일 추가

app/assets/stylesheets/application.css의 마지막 부분에 이 코드를 추가합니다.
app/assets/stylesheets/application.css

footer {
  background-color: #ebebeb;
  padding: 30px 0;
}

2.4. button에 콘셉트 추가하세요.

http://localhost:3000/ideas/new를 열고 Create Idea 버튼을 찾으십시오.app/assets/stylesheets/ideas.scss에 이 코드를 추가합니다.
app/assets/stylesheets/ideas.scss

.container input[type="submit"] {
   height: 30px;
   font-size: 13px;
   background-color: #f55e55;
   border: none;
   color: #fff;
 }

Coach: 업데이트 페이지에서 변경 사항을 확인합니다.그리고 눈썹 색깔을 바꾸어 보세요.http://color.uisdc.com/에서 색상의 참고를 볼 수 있습니다.
16진수 컬러 코드를 사용하여 색상을 설정할 수 있습니다.16진수 컬러 코드(ex:#f55e55)는 왼쪽부터 2비트마다 RGB를 나타냅니다.
실제로 footer의 색깔을 바꾸어 보세요.

3. 관리 화면 추가

관리 화면은 사이트의 관리자가 볼 수 있는 페이지를 가리킨다.데이터 추가, 편집, 발언 관리 등이 가능하다.
rails_admin의gem를 사용하여 화면을 추가 관리하세요.

3.1. Gemfile에 추가하십시오.

Gemfile에 다음 행을 추가하십시오.
Gemfile

gem 'rails_admin', '~> 2.0'

그리고 터미널에서 다음 명령을 사용합니다

bundle install

설치하다.

3.2. 설정

단말기

rails g rails_admin:install

모든 항목에서 enter

3.3. 관리 화면에 접속해 보세요.

프로그램을 다시 시작하여 다음 내용에 접근해 보십시오
http://localhost:3000/admin

3.4. 사은품(시간이 되면 devise와 합작해 보세요)

devise와 협력
아래 부분은 논평하지 마세요.
config/initializers/rails_admin.rb

config.authenticate_with do
  warden.authenticate! scope: :user
end
config.current_user_method(&:current_user)

로그인하지 않았을 때 등록한 내용을 확인할 수 있도록 관리 화면은 로그인해야 볼 수 있고, 일반 화면은 로그인하지 않아도 볼 수 있다.
app/controllers/application_controller.rb를 열고 다음 줄을 삭제합니다.
app/controllers/application_controller.rb

before_action :authenticate_user!

rails 다시 시작
- 로그인 시
- 로그아웃 시
... 을 누르다
http://localhost:3000/admin
액세스할 수 있는지 확인합니다.