구 원트노/gorails

[gorails]Using ActiveAdmin to Build an Admin UI

ActiveAdmin gem으로 Admin page 만들기


이제 일주일마다 gorails episode들을 정리하겠습니다.


ActiveAdmin gem을 사용해서 admin page 쉽게 만들기입니다. 


실제 개발 단계에서 admin page를 만드는 작업은 매우 귀찮은 작업입니다.


저는 제 서비스를 개발하는 상황이라면 admin page는 pass하고 개발합니다. 시간 대비 개발 효과가 거의 없거든요.. 


하지만 이렇게 gem으로 쉽게 admin page를 개발한다면 오랜 시간을 소비하지 않고 개발을 할 수 있습니다. 




1. gem 설치 및 초기 설정

일단 activeadmin document에 가보겠습니다.



하지만 저희는 추가로 devise까지 설치하겠습니다. (admin page 권한 설정)


Gemfile

1
2
3
gem 'activeadmin', github: 'activeadmin'
# # Plus integrations with:
gem 'devise'
cs


이렇게 작성하고 bundle install 해줍니다.  다음으로 


Bash

1
rails g active_admin:install
cs


입력해줍니다.  이 후 여러 파일들이 생성되어지는데 먼저 db/migrate 폴더를 확인해보겠습니다.



devise_create_admin_users.rb는 어드민 권한을 가진 AdminUser model을 만드는 마이그레이트 파일입니다.

create_active_admin_comments.rb는 댓글을 달 수 있는 Comment model을 만들어주는데 polymorphic으로 구현해서 다른 모델에도 사용할 수 있습니다.


이제 seed파일로 가보겠습니다.



미리 어드민 계정 하나가 만들어져 있습니다. 자신이 원하는 계정으로 수정해준 후 


1
2
3
rake db:migrate
rake db:seed
rails s
cs


마이그레이트 후 서버를 실행해줍니다.


이제 '/admin/login' page로 접속해보겠습니다.


로그인 후 

이렇게 메뉴가 설정되어 있는 것을 확인할 수 있습니다.


2. 메뉴 추가하기

이제 어드민 페이지에 다른 model을관리할 수 있는 메뉴들을 추가하겠습니다.

1
2
rails g scaffold User name email
rails g scaffold Post title body:text published_at:datetime user:references
cs


User, Post를 scaffold를 통해 만들었습니다.


1
2
3
rake db:migrate
rails g active_admin:resource User
rails g active_admin:resource Post
cs


마이그레이트 후 active_admin:resource 명령어를 사용해서 User와 Post를 추가해줍니다.



그리고 app/admin에 생성된 파일을 수정해줍니다.


1
2
3
4
5
6
7
8
9
#app/admin/post.rb
ActiveAdmin.register Post do
    permit_params :title, :body, :published_at, :user_id
end
#app/admin/user.rb
ActiveAdmin.register User do
    permit_params :name, :email
end
 
cs



posts와 users가 추가되어진 것을 볼 수 있습니다.


3. 기능 추가하기

posts page에 publish 기능을 만들어 보겠습니다.


app/admin/post.rb

1
2
3
4
5
member_action :publish, method: :put do
    post = Post.find(params[:id])
    post.update(published_at: Time.zone.now)
    redirect_to admin_post_path(post)
end
cs


이거는 route.rb에 resources :posts 에 member를 추가시키는 역활을 합니다.


추가로 이어서 


app/admin/post.rb

1
2
3
action_item :publish, only: :show do
    link_to "publish", publish_admin_post_path(post), method: :put unless post.published_at?
end
cs


이 구문은 show 페이지에서 publish 기능을 추가하는데 이는 link_to 헬퍼를 사용해서 구현합니다. 중간에 있는 publish_admin_post_path(post) 경로는 위의 member_action을 통해 생성 되었습니다.


이제 posts의 show 부분에 가보면 publish 버튼이 생성된 것을 확인할 수 있습니다.



마찬가지로 publish 되어있을때 unpublish 해주는 기능도 만들 수 있습니다.


app/admin/post.rb

1
2
3
4
5
6
7
8
9
 action_item :unpublish, only: :show do
    link_to "unpublish", unpublish_admin_post_path(post), method: :put if post.published_at?
 end
    
 member_action :unpublish, method: :put do
    post = Post.find(params[:id])
    post.update(published_at: nil)
    redirect_to admin_post_path(post)
 end
cs


이제 index에 publish 된 것과 아닌 것, 그리고 전부 볼 수 있는 필터를 추가해보겠습니다.


app/models/post.rb

1
2
scope :published, -> {where.not(published_at: nil)}
scope :unpublished, -> {where(published_at: nil)}
cs


이렇게 scope(scope는 클래스 메소드와 같은 기능을 한다라고 생각하면 됩니다.)를 추가해주고


app/admin/post.rb

1
2
3
scope :all
scope :published
scope :unpublished
cs


이렇게 필터 기능이 완성됬습니다.




이번 예제 코드는 github에 있습니다.


더 많은 기능을 사용하고 싶다면 https://activeadmin.info/documentation.html 에 참고하면 됩니다.


궁금하신 점 있으시면 댓글 남겨주세요!!


'구 원트노 > gorails' 카테고리의 다른 글

[gorails]Using ActiveAdmin to Build an Admin UI  (0) 2017.07.09
1 2 3 4 5 6 7 8 9 ··· 41