Go to Hackademy website

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

Alexandre Salaun

Posté par Alexandre Salaun dans les catégories back

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.

Articles connexes

Ruby, Sidekiq et Crystal

25/07/2019

Dans le cadre d’une application web il nous est tous déjà arrivé de devoir effectuer une tâche assez longue en asynchrone pour ne pas gêner le flux de notre application. En Ruby la solution la plus...

Du dosage à la rouille

13/06/2019

Parlons de la rouille, cette délicieuse sauce qui accompagne nos soupes de poisson. Le bon dosage des ingrédients ravira le palais vos convives ! Pour faire une portion de rouille les ingrédients...

Une brève histoire d'Elixir et Erlang/OTP

31/01/2019

Je développe depuis plusieurs années en Ruby. Depuis mon arrivée chez Synbioz, j’expérimente en plus avec Elixir de façon assez naturelle. En quoi Elixir est-il différent, me demanderez-vous ? Pour...

Écrire une thread pool en Ruby

10/01/2019

Pouvoir exécuter plusieurs tâches en parallèle, que ce soit dans un script ou une application, peut être vraiment très utile, surtout dans le cas où le traitement de ces tâches peut être très long....