Share
Chaque développeur Web sait que créer une interface d'administration pour ses projets est une tâche extrêmement fastidieuse. Heureusement, il existe des outils qui simplifient considérablement cette tâche. Dans ce tutoriel, je vais vous montrer comment utiliser Active Admin, un framework d'administration récemment lancé pour les applications Ruby on Rails..
Vous pouvez utiliser Active Admin pour ajouter une interface d'administration à votre projet actuel, ou même l'utiliser pour créer une application Web complète à partir de rien - rapidement et facilement..
Aujourd'hui, nous allons le faire en créant un système de gestion de projet assez simple. Cela peut sembler un peu de travail, mais Active Admin fera le gros du travail pour nous!
Je suppose que vous possédez déjà des connaissances préalables sur Ruby on Rails, notamment en ce qui concerne la validation des modèles, car le reste de l'interface de l'application sera pris en charge par Active Admin. En dehors de cela, vous devriez avoir un environnement de développement pour Ruby on Rails 3.1 déjà configuré, y compris Ruby 1.9.2..
Reportez-vous à cet article si vous avez besoin d'aide pour installer Ruby and Rails..
Créez l'application sur laquelle nous allons travailler en exécutant la commande suivante dans votre terminal:
rails new active_admin
Ensuite, ouvrez votre Gemfile et ajoutez les lignes suivantes:
gem 'activeadmin' gem 'meta_search', '> = 1.1.0.pre'
La dernière gemme est requise pour qu'Active Admin fonctionne avec Rails 3.1, alors ne l'oubliez pas. Après cela, lancez le installation groupée commande pour installer les gemmes. Maintenant, nous devons terminer l’installation d’Active Admin en exécutant la commande suivante:
Les rails génèrent active_admin: install
Cela générera tous les initialiseurs et migrations nécessaires au fonctionnement d'Active Admin. Cela créera également un AdminUser modèle pour l'authentification, alors exécutez rake db: migrer pour créer toutes les tables de base de données nécessaires. En dehors de cela, vous devez ajouter une ligne à votre config / environnements / développement.rb fichier, donc envoyer des emails fonctionne:
config.action_mailer.default_url_options = : host => 'localhost: 3000'
Une fois que c'est fait, lancez serveur de rails et pointez votre navigateur sur localhost: 3000 / admin. Vous serez accueilli avec un formulaire de connexion agréable. Il suffit de taper [email protected]? comme email et? mot de passe? en tant que mot de passe, et cliquez sur? Connexion ?. Vous devriez maintenant voir une belle interface d'administration.
Comme vous pouvez le constater sur la page Web que vous venez de générer, vous ne pouvez pas encore faire grand chose. Nous allons avoir besoin d'un moyen de modifier nos utilisateurs, et nous pouvons le faire en utilisant Active Admin. Le framework utilise ce qu'il appelle? Ressources ?. Les ressources cartographient les modèles aux panneaux d'administration. Vous devez les générer à l'aide d'une commande de votre terminal pour qu'Active Admin puisse en connaître l'existence, lancez-vous:
rails générer actif_admin: ressource AdminUser
La syntaxe de cette commande est simple: écrivez simplement le nom du modèle de base de données à la fin. Cela va générer un fichier à l'intérieur du app / admin dossier, appelé admin_users.rb. Désormais, si vous actualisez votre navigateur, vous verrez un nouveau lien dans la barre supérieure, appelé "Utilisateurs de l'administrateur". En cliquant dessus, vous accédez au panneau d’administration de l’utilisateur Admin. Maintenant, ça va probablement paraître un peu trop encombré, car par défaut, Active Admin affiche toutes les colonnes du modèle et, étant donné que la structure utilise Devise pour l'authentification, vous verrez apparaître un tas de colonnes qui ne sont pas vraiment nécessaires. Ceci nous amène à la première partie de notre personnalisation: la page d’index.
Personnaliser les ressources Active Admin est assez facile (et amusant si vous me le demandez). Ouvrir app / admin / admin_users.rb sur votre éditeur de texte préféré et faites-le ressembler à ceci:
ActiveAdmin.register AdminUser do index do colonne: colonne email: current_sign_in_at colonne: last_sign_in_at colonne: sign_in_count default_actions end end
Passons en revue le code:
Accentsconagua
indice méthode nous permet de personnaliser la vue index, qui est la table qui montre toutes les lignes.indice méthode, vous spécifiez quelles colonnes vous faire vouloir apparaître sur la table, à savoir. l'écriture colonne: email Active Admin affichera cette colonne dans la vue.default_actions est une méthode pratique qui crée une dernière colonne avec des liens vers les détails, l'édition et la suppression de la ligne.Une dernière étape pour cette vue consiste à personnaliser le formulaire. Si vous cliquez sur? Nouvel utilisateur administrateur? lien en haut à droite, vous verrez que le formulaire contient également toutes les colonnes du modèle, ce qui n’est évidemment pas très utile. Étant donné qu'Active Admin utilise Devise, il suffit d'entrer une adresse électronique pour créer un utilisateur, le reste devrait être géré par la gemme d'authentification. Pour personnaliser les formulaires affichés par Active Admin, il existe une méthode appelée (vous l'avez devinée) forme:
ActiveAdmin.register AdminUser do index do #? forme finale do | f | f.inputs "Détails de l'administrateur" do f.input: fin du courrier électronique f.buttons end end
Si le code vous semble familier, vous avez probablement déjà utilisé la gemme Formtastic auparavant. Jetons un coup d'oeil au code:
forme méthode et en lui passant un bloc avec un argument (F dans ce cas).f.inputs crée un fieldet. Mot de conseil: vous avoir ajouter au moins un champs. Les champs en dehors de l'un n'apparaîtront tout simplement pas sur la vue.f.input et passez un symbole avec le nom de la colonne du modèle, dans ce cas,? email?.f.boutons crée le? Soumettre? et? Annuler? boutons.Vous pouvez personnaliser davantage les formulaires à l'aide du langage DSL (Domain Specific Language) fourni par Formtastic. Consultez donc des tutoriels sur ce bijou..
Une dernière étape pour que ce formulaire fonctionne: comme nous ne fournissons pas de mot de passe, Devise ne nous laissera pas créer l’enregistrement, nous devons donc ajouter du code à la liste. AdminUser modèle:
after_create | admin | admin.send_reset_password_instructions def password_required? nouvel enregistrement? ? faux: super fin
le after_create callback s'assure que Devise envoie à l'utilisateur un lien pour créer un nouveau mot de passe, et le Mot de passe requis? méthode nous permettra de créer un utilisateur sans fournir de mot de passe.
Allez l'essayer. Créez un utilisateur, puis recherchez dans votre courrier électronique un lien qui vous permettra de créer un nouveau mot de passe et de vous connecter au système..
Nous allons créer un système simple de gestion de projet. Rien de trop compliqué cependant, juste quelque chose qui nous permettra de gérer des projets et des tâches pour le projet et d’attribuer des tâches à certains utilisateurs. La première chose à faire est de créer un modèle de projet:
rails générer le modèle Titre du projet: chaîne
Active Admin s'appuie sur les modèles de Rails pour la validation, et nous ne voulons pas de projets sans titre, ajoutons donc quelques validations au modèle généré:
# rails valide: title,: presence => true
Maintenant, nous devons générer une ressource Active Admin, en exécutant:
rails generent active_admin: projet de ressources
Pour l'instant, c'est tout ce dont nous avons besoin pour des projets. Après avoir migré votre base de données, examinez l'interface que vous venez de créer. La création d'un projet sans titre échoue, ce à quoi nous nous attendions. Voyez combien vous avez accompli avec seulement quelques lignes de code?
Les projets ne sont pas très utiles sans tâches, n'est-ce pas? Ajoutons que:
rails generer le modèle Tâche project_id: integer id_utilisateur_admin: entier titre: string is_done: boolean échéance: date
Cela crée un modèle de tâche que nous pouvons associer à des projets et à des utilisateurs. L'idée est qu'une tâche est assignée à quelqu'un et appartient à un projet. Nous devons définir ces relations et validations dans le modèle:
classe tâche < ActiveRecord::Base belongs_to :project belongs_to :admin_user validates :title, :project_id, :admin_user_id, :presence => true valide: is_done,: inclusion => : in => [true, false] end
N'oubliez pas d'ajouter les relations aux modèles Project et AdminUser:
classe AdminUser < ActiveRecord::Base has_many :tasks #? end
projet de classe < ActiveRecord::Base has_many :tasks #? end
Migrez la base de données et enregistrez le modèle de tâche avec Active Admin:
rails generent active_admin: ressource Task
Allez maintenant dans le panneau des tâches de votre navigateur. Vous venez de créer un système de gestion de projet! Bon travail.
Le système que nous venons de créer n'est pas trop sophistiqué. Heureusement, Active Admin ne consiste pas seulement à créer un bon système d'échafaudage, il vous donne bien plus de pouvoir que cela. Commençons par la section Projets. Nous n'avons pas vraiment besoin de identifiant, créé et mis à jour colonnes là-bas, et nous n'avons certainement pas besoin de pouvoir rechercher à l'aide de ces colonnes. Faisons en sorte que cela se produise:
index do colonne: titre do | projet | link_to project.title, admin_project_path (projet) end default_actions end # Filtre uniquement par titre Filtre: titre
Quelques notes ici:
filtre pour chaque colonne que vous voulez pouvoir filtrer avec.La page de détail du projet est un peu ennuyeuse, vous ne pensez pas? Nous n'avons pas besoin de rendez-vous amoureux les colonnes et les identifiant ici, et nous pourrions montrer une liste des tâches plus directement. La personnalisation de la page de détail s’effectue à l’aide de la spectacle méthode dans le app / admin / projects.rb fichier:
show: title =>: title panneau do "Tasks" do table_for project.tasks do | t | t.column ("Status") | task | status_tag (task.is_done? "Done": "En attente"), (task.is_done?: ok:: erreur) t.column ("Titre") | task | link_to task.title, admin_task_path (tâche) t.column ("Assigned To") | task | task.admin_user.email t.column ("Date d'échéance") | task | task.due_date? ? l (task.due_date,: format =>: long): '-' end end end Passons en revue le code:
show: titre =>: titre spécifie le titre de la page. La deuxième :Titre spécifie la colonne du modèle qui sera utilisée.panneau "tâches" nous créons un panneau avec le titre donné. Dans ce cadre, nous créons un tableau personnalisé pour les tâches du projet, en utilisant table_pour.status_tag est une méthode qui rend le mot passé avec un très beau style, et vous pouvez définir la couleur en passant un deuxième argument avec : D'accord, :Attention et :Erreur pour les couleurs respectivement vert, orange et rouge.Pourquoi ne pas filtrer facilement les tâches à effectuer cette semaine? Ou des tâches qui sont en retard? C'est facile! Il suffit d'utiliser un oscilloscope. dans le tâches.rb fichier, ajoutez ceci:
scope: all, default => true scope: due_this_week do | tasks | tasks.where ('due_date>? et due_date < ?', Time.now, 1.week.from_now) end scope :late do |tasks| tasks.where('due_date < ?', Time.now) end scope :mine do |tasks| tasks.where(:admin_user_id => current_admin_user.id) fin Passons en revue ce code:
portée: tout définit la portée par défaut, montrant toutes les lignes.portée accepte un symbole pour le nom et vous pouvez passer un bloc avec un argument. À l'intérieur du bloc, vous pouvez affiner votre recherche en fonction de vos besoins. Vous pouvez également définir la portée à l'intérieur du modèle et simplement la nommer comme dans ce fichier..current_admin_user.
Vérifiez-le! Juste au-dessus de la table, vous verrez des liens qui indiquent rapidement le nombre de tâches par étendue et vous permettent de filtrer rapidement la liste. Vous devez personnaliser davantage le tableau et les filtres de recherche, mais je vous laisse cette tâche..
Nous allons maintenant modifier légèrement la vue détaillée de la tâche, car elle semble plutôt encombrée:
affiche le panneau "Détails de la tâche", attribue la tâche tâche_attributs à la ligne ("Statut") statut_tag (tâche.is_done? "Terminé": "En attente"), (tâche.is_done?: ok:: erreur) ligne ("Titre") ) task.title row ("Projet") link_to task.project.title, admin_project_path (task.project) row ("Attribué à") link_to task.admin_user.email, admin_admin_user_path (task.admin_user) row ("Date d'échéance") task.due_date? ? l (task.due_date,: format =>: long): '-' end end active_admin_comments end Cela montrera une table pour les attributs du modèle (d'où le nom de la méthode, attributs_table_pour). Vous spécifiez le modèle, dans ce cas tâche, et dans le bloc passé, vous définissez les lignes que vous souhaitez afficher. C'est à peu près le même que nous avons défini pour la page de détail du projet, uniquement pour la tâche. Vous vous demandez peut-être: Qu'est-ce que c'est? Active_admin_comments? appel de méthode pour? Eh bien, Active Admin fournit un système de commentaires simple pour chaque modèle. Je l'ai activé ici parce que commenter une tâche pourrait être très utile pour discuter des fonctionnalités ou de quelque chose de similaire. Si vous n'appelez pas cette méthode, les commentaires seront cachés.
Il y a une autre chose que j'aimerais montrer lors de la visualisation des détails d'une tâche: il s'agit du reste des tâches du destinataire pour ce projet. Cela se fait facilement en utilisant les barres latérales!
encadré "Autres tâches pour cet utilisateur",: only =>: show do table_for current_admin_user.tasks.where (: id_projet => task.project) do | t | t.column ("Status") | task | status_tag (task.is_done? "Done": "En attente"), (task.is_done?: ok:: erreur) t.column ("Titre") | task | link_to task.title, admin_task_path (tâche) end end Cela crée un panneau de la barre latérale, intitulé "Autres tâches pour cet utilisateur", qui s'affiche uniquement sur le diaporama. page. Il montrera un tableau pour le courantadminutilisateur, et toutes les tâches pour lesquelles le projet est identique au projet affiché (vous voyez, tâche ici fera référence à la tâche affichée, car il s'agit d'une page de détail pour un tâche). Le reste est plus ou moins le même qu’auparavant: quelques colonnes avec les détails de la tâche.
Vous avez peut-être remarqué, lors de la première utilisation de votre navigateur et de votre connexion à votre application, qu'il y avait un? Tableau de bord? section. Ceci est une page entièrement personnalisable où vous pouvez afficher presque tout: tableaux, statistiques, peu importe. Nous allons simplement ajouter la liste des tâches de l'utilisateur à titre d'exemple. Ouvrez le tableaux de bord.rb le déposer et le réviser, comme suit:
ActiveAdmin :: Dashboards.build section "Vos tâches pour cette semaine" fait table_for current_admin_user.tasks.where ('due_date>? Et due_date < ?', Time.now, 1.week.from_now) do |t| t.column("Status") |task| status_tag (task.is_done ? "Done" : "Pending"), (task.is_done ? :ok : :error) t.column("Title") |task| link_to task.title, admin_task_path(task) t.column("Assigned To") |task| task.admin_user.email t.column("Due Date") |task| task.due_date? ? l(task.due_date, :format => : long): '-' end end section "Les tâches qui sont en retard" font table_for current_admin_user.tasks.where ('due_date < ?', Time.now) do |t| t.column("Status") |task| status_tag (task.is_done ? "Done" : "Pending"), (task.is_done ? :ok : :error) t.column("Title") |task| link_to task.title, admin_task_path(task) t.column("Assigned To") |task| task.admin_user.email t.column("Due Date") |task| task.due_date? ? l(task.due_date, :format => : long): '-' fin fin fin Le code devrait vous être assez familier. Il crée essentiellement deux sections (en utilisant le section et un titre), avec un tableau chacun, qui affiche les tâches en cours et en retard, respectivement.
Nous avons créé une application complète en très peu d'étapes. Vous serez peut-être surpris de savoir qu'il existe de nombreuses autres fonctionnalités qu'offre Active Admin, mais il n'est pas possible de toutes les couvrir dans un seul tutoriel, bien sûr. Si vous souhaitez en savoir plus sur ce joyau, visitez activeadmin.info.
Vous pouvez également consulter mon projet, appelé active_invoices on GitHub, qui est une application de facturation complète entièrement réalisée avec Active Admin. Si vous avez des questions, n'hésitez pas à les poser dans les commentaires ou à m'envoyer un tweet.
