[gorails]Using ActiveAdmin to Build an Admin UI

ActiveAdmin gem으로 Admin page 만들기

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

이번에는 https://gorails.com/episodes/using-activeadmin-to-build-an-admin-ui 

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

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

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

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

---

1. gem 설치 및 초기 설정

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

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

Gemfile

gem 'activeadmin', github: 'activeadmin'
# # Plus integrations with:
gem 'devise'

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

Bash

rails g active_admin:install

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

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

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

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

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

rake db:migrate
rake db:seed
rails s

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

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

로그인 후 

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

2. 메뉴 추가하기

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

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

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

rake db:migrate
rails g active_admin:resource User
rails g active_admin:resource Post

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

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

#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
 

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

3. 기능 추가하기

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

app/admin/post.rb

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

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

추가로 이어서 

app/admin/post.rb

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

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

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

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

app/admin/post.rb

 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

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

app/models/post.rb

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

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

app/admin/post.rb

scope :all
scope :published
scope :unpublished

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

---

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

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

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