Création d'un back-office avec Ruby on Rails

La quasi totalité des sites ou applications web actuelles disposent d’un back-office, il est donc nécessaire lors du développement de ne pas négliger cette partie. Il existe des gems ou autres outils qui vous permettent de créer facilement et rapidement un back-office.

Dans un premier temps, nous allons étudier le fonctionnement d’ActiveAdmin puis nous verrons qu’il est assez simple d’utiliser Twitter-Bootstrap et SimpleForm pour vous faciliter la vie si vous vous passez d’Active Admin.

Il est tout de même nécessaire de rappeler que si l’usage de gems telles qu’Active Admin est un vrai gain de temps au départ, cela peut dans certains cas s’avérer bloquant. En effet, si vous avez des usages particuliers ou si vous souhaitez des fonctionnalités en particulier, il est parfois difficile de les intégrer à ces gems.

Active Admin

Active Admin est un DSL qui vous permet de créer facilement votre back-office dans le contexte d’une application Rails, il est disponible sous forme de gem pour toutes les applications utilisant Rails 3.0 ainsi que les versions supérieures. Pour l’utiliser, il vous suffit de l’ajouter à votre Gemfile :

gem 'activeadmin'

Attention, pour ceux qui utilisent une version de Rails supérieure ou égale à Rails 3.1, il est nécessaire d’ajouter ces quelques gems dans votre Gemfile :

gem 'sass-rails'
gem 'meta_search', '>= 1.1.0.pre'

Une fois que les gems ont été ajoutées et que vous avez lancé la commande bundle install, une commande est nécessaire pour finaliser l’installation.

rails generate active_admin:install

Active Admin est maintenant utilisable dans votre application. Un répertoire app/admin a été créé afin d’y ajouter les éléments de configuration de votre back-office. Un initializer a également été ajouté.

Il est nécessaire de rancer les migrations avant de pouvoir tester votre application :

rake db:migrate

Vous pouvz maintenant vous rendre sur votre site, “http://mon_application.dev/admin”, pour voir à quoi cela ressemble, par défaut les identifiants d’accès sont “admin@example.com” et “password”.

Pour ajouter de nouveaux modèles dans votre back-office, ils suffit de lancer la commande suivante :

rails generate active_admin:resource [MyModel]

Ceci ajoutera un ficher my_model.rb dans le répertoire app/admin/ de votre application et c’est ce fichier qui vous permettra de configurer Active Admin pour le modèle en question. Par défaut, ce dernier contient uniquement les lignes suivantes :

ActiveAdmin.register MyModel do
end

La configuration des pages du back-office se fait ensuite de façon très simple. Vous pouvez choisir les champs à afficher sur la page d’index ou dans les formulaires par exemple :

ActiveAdmin.register MyModel do
  index do
    column :name
    column :description
    column :created_at
    default_actions
  end

  form do |f|
    f.inputs "My model" do
      f.input :name
      f.input :description
    end
    f.buttons
  end
end

Il est bien sûr possible d’aller plus loin dans la configuration de ces pages, je vous invite à vous rendre sur ces liens pour plus d’informations : index, formulaires.

Il est également possible de configurer les menus présents sur les pages du back-office par exemple ou encore bien d’autres éléments.

Attention, si vous mettez à jour votre version d’Active Admin, il est fortement conseillé de re-générer les assets via la commande suivante afin d’éviter tout problème.

rails generate active_admin:assets

Active Admin utilise d’autres gems en ce qui concerne la gestion des utilisateurs ou encore la pagination telles que Devise, Kaminari ou Formtastic.

Twitter Bootstrap et SimpleForm

Grâce à ces deux gems, il vous est possible de créer facilement votre back-office sans avoir besoin de vous souciez du design ou de la création des formulaires.

Twitter Bootstrap

En effet, la gem Twitter Bootstrap vous permet d’avoir un design de back-office plus que convenable de façon très simple. De plus, via le site Wrap Bootstrap, vous pouvez acheter d’autres designs si celui par défaut ne vous convient pas.

Pour utiliser Twitter Bootstrap dans votre application, il vous faut ajouter la gem nécessaire :

gem "twitter-bootstrap-rails", :group => :assets

Puis, lancer la commande bundle install. Pour finaliser, l’installation, lancer la commande suivante :

rails g bootstrap:install

Ensuite, vous pouvez générer vos layouts :

rails g bootstrap:layout my_layout

Il vous est possible de surcharger le style de Twitter Bootstrap afin modifier le design de votre application. Pour cela, un fichier bootstrap_and_overrides est créé afin que vous y mettiez vos modifications.

SimpleForm

En ce qui concerne SimpleForm, là aussi cet outil se présente sous la forme d’une gem. Vous pouvez l’ajouter à votre Gemfile avant de lancer la commande bundle install :

gem 'simple_form'

Ensuite, il faut finaliser l’installation (ici nous allons utiliser la version de SimpleForm qui s’intègre avec Twitter Bootstrap) :

rails generate simple_form:install --bootstrap

Cette gem va vous permettre de gérer facilement vos formulaires afin d’avoir un back-office qui soit le plus ergonomique et pratique possible. Pour créer un formualire via SimpleForm il suffit d’utiliser les méthodes mises à disposition :

<%= simple_form_for @post do |f| %>
  <%= f.input :title %>
  <%= f.input :content, :as => :text %>

  <%= f.simple_fields_for :comments do |comments_builder| %>
    <%= comments_builder.association :author %>
    <%= comments_builder.input :content, :as => :text %>
  <% end %>

  <%= f.button :submit %>
<% end %>

Vous pouvez donc avoir un formulaire complet qui gère les associations, les nested_attributes…

Authentification et routes

Contrairement à Active Admin qui gère la partie partie authentification au back-office, ici c’est à vous de le faire. Il est donc nécessaire d’avoir des utilisateurs avec éventuellement des droits d’accès. Devise est une solution mais ce n’est pas la seule, à vous de voir ce qui vous correspond le plus.

Ensuite, il faut également gérer un namespace dans le fichier routes.rb pour avoir des routes semblable à celle d’Active Admin, “/admin/my_object”.

namespace :admin do
  resources :posts
  resources :comments
end

Vous pouvez donc avoir un back-office plus simplement que si vous décidez de tout faire vous même. Le gain de temps (et d’argent) au niveau du design n’est pas négligeable. Reste ensuite à chacun, suivant le projet, de trouver ce qui lui convient le mieux.

Conclusion

Il est donc possible d’utiliser ces outils pour vous faciliter la tâche lors du développement de votre back-office. C’est à vous de faire votre choix, en jugeant ce qui vous paraît le plus approprié.

D’autres outils sont également disponibles, RailsAdmin par exemple. D’autres gems sont visibles sur TheRubyToolbox. Celles présentées ci-dessus ne représentent qu’une partie de ces outils. Il est également possible de développer vous même cette partie de l’application si vous jugez qu’il y a trop de spécificités mais la plupart des gems disponibles proposent de nombreuses personnalisations possibles.

L’équipe Synbioz.

Libres d’être ensemble.