Share
Todo desarrollador web sabe que crear una interfaz de administración para sus proyectos es una tarea increíblemente tediosa. Por suerte, existen herramientas que simplifican considerablemente esta tarea. En este tutorial, te mostraré cómo usar Active Admin, un marco de administración recientemente lanzado para las aplicaciones de Ruby on Rails.
Puede utilizar Active Admin para agregar una interfaz de administración a su proyecto actual, o incluso puede usarla para crear una aplicación web completa desde cero, rápida y fácilmente..
Hoy, haremos lo último, al crear un sistema de administración de proyectos bastante simple. Puede parecer un poco de trabajo, pero Active Admin hará la mayor parte del trabajo por nosotros.!
Asumiré que tiene conocimientos previos de Ruby on Rails, especialmente en lo que respecta a validaciones de modelos, ya que el resto de la interfaz de la aplicación será administrada por Active Admin. Además, debe tener un entorno de desarrollo para Ruby on Rails 3.1 ya configurado, incluido Ruby 1.9.2.
Consulte este artículo si necesita ayuda para instalar Ruby y Rails.
Cree la aplicación en la que estaremos trabajando, ejecutando el siguiente comando en su Terminal:
rieles nuevo active_admin
A continuación, abra su Gemfile Y añada las siguientes líneas:
gema 'activeadmin' gema 'meta_search', '> = 1.1.0.pre'
La última gema es necesaria para que Active Admin funcione con Rails 3.1, así que no lo olvide. Una vez hecho esto, ejecute el instalación de paquete comando para instalar las gemas. Ahora, necesitamos terminar de instalar Active Admin, ejecutando el siguiente comando:
rieles generan active_admin: instalar
Esto generará todos los inicializadores y migraciones necesarios para que Active Admin funcione. También creará un AdminUser modelo para la autentificación, así que ejecuta rastrillo db: migrar para crear todas las tablas de base de datos necesarias. Aparte de eso, necesita agregar una línea a su config / environment / development.rb archivo, por lo que el envío de correos electrónicos funciona:
config.action_mailer.default_url_options = : host => 'localhost: 3000'
Una vez hecho esto, corre servidor de rieles y apunta tu navegador a localhost: 3000 / admin. Será recibido con un formulario de inicio de sesión agradable. Solo escribe? [email protected]? como el email y la contraseña? como la contraseña, y pulsa "Iniciar sesión". Ahora debería ver una interfaz de administración agradable.
Como puede ver en la página web que acaba de generar, todavía no hay mucho que pueda hacer. Vamos a necesitar una forma de editar a nuestros usuarios, y podemos hacerlo utilizando Active Admin. El marco utiliza lo que llama "Recursos". Recursos de modelos de mapas para paneles de administración. Debe generarlos usando un comando en su terminal, para que Active Admin pueda conocer su existencia, así que adelante, ejecute:
rieles generan active_admin: recurso AdminUser
La sintaxis de ese comando es simple: simplemente escriba el nombre del modelo de base de datos al final. Esto generará un archivo dentro del app / admin carpeta, llamada admin_users.rb. Ahora, si actualiza su navegador, verá un nuevo enlace en la barra superior, llamado "Usuarios de administración". Al hacer clic en eso, accederás al panel de administración de usuarios administradores. Ahora, probablemente se verá un poco demasiado desordenado, ya que, de forma predeterminada, el Administrador activo muestra todas las columnas del modelo, y considerando que el marco utiliza la solución Devise para la autenticación, verá un montón de columnas que no son realmente necesarias. Esto nos lleva a la primera parte de nuestra personalización: la página de índice..
Personalizar los recursos de Active Admin es bastante fácil (y divertido si me lo preguntas). Abierto app / admin / admin_users.rb en tu editor de texto favorito y haz que se vea así:
ActiveAdmin.register AdminUser do index do column: columna de correo electrónico: current_sign_in_at columna: last_sign_in_at columna: sign_in_count default_actions end end
Repasemos el código:
Accentsconagua
índice Este método nos permite personalizar la vista de índice, que es la tabla que muestra todas las filas..índice Método, usted especifica qué columnas hacer Quiero aparecer en la tabla, es decir. escritura columna: correo electrónico Habrá administrador activo mostrar esa columna en la vista.default_actions es un método conveniente que crea una última columna con enlaces a los detalles, edición y eliminación de la fila.Un último paso para esta vista es personalizar el formulario. Si haces clic en? ¿Nuevo usuario administrador? enlace en la parte superior derecha, verá que el formulario también contiene todas las columnas en el modelo, lo que obviamente no es muy útil. Como Active Admin usa Devise, solo necesitamos ingresar una dirección de correo electrónico para crear un usuario, y el resto debe ser atendido por la gema de autenticación. Para personalizar los formularios que muestra Active Admin, hay un método llamado (lo has adivinado) formar:
ActiveAdmin.register AdminUser do index do #? forma final hacer | f | f.inputs "Detalles del administrador" do f.input: fin de correo electrónico f.buttons end end end
Si el código te resulta familiar, probablemente ya hayas usado la gema Formtastic. Echemos un vistazo al código:
formar Método y pasándole un bloque con un argumento (F en este caso).f.inputs crea un fieldset. Un consejo: tu tener para agregar al menos un fieldset. Los campos fuera de uno simplemente no aparecerán en la vista.f.input y pase un símbolo con el nombre de la columna del modelo, en este caso,? correo electrónico?.botones de f. crea el? Enviar? y? Cancelar? botones.Puede personalizar aún más los formularios utilizando el DSL (Lenguaje específico del dominio) proporcionado por Formtastic, así que eche un vistazo a los tutoriales sobre esta gema..
Un último paso para que funcione este formulario: dado que no estamos proporcionando una contraseña, Devise no nos permitirá crear el registro, por lo que necesitamos agregar algún código a la AdminUser modelo:
after_create | admin | admin.send_reset_password_instructions def password_required? ¿nuevo record? ? falso: super final
los after_create la devolución de llamada se asegura de que Devise envíe al usuario un enlace para crear una nueva contraseña, y la Se requiere contraseña? Este método nos permitirá crear un usuario sin proporcionar una contraseña..
Ve a probarlo. Cree un usuario y luego revise su correo electrónico en busca de un enlace que le permita crear una nueva contraseña e inicie sesión en el sistema..
Vamos a crear un sistema simple de gestión de proyectos. Sin embargo, no es algo demasiado complicado, solo algo que nos permitirá administrar proyectos y tareas para el proyecto y asignar tareas a ciertos usuarios. Lo primero, es crear un modelo de proyecto:
carriles generan modelo Título del proyecto: cadena
Active Admin se basa en los modelos de Rails para la validación, y no queremos proyectos sin título, así que agreguemos algunas validaciones al modelo generado:
# rails valida: title,: presence => true
Ahora, necesitamos generar un recurso de administración activa, ejecutando:
rieles generan active_admin: proyecto de recursos
Por ahora, eso es todo lo que necesitamos para proyectos. Después de migrar su base de datos, eche un vistazo a la interfaz que acaba de crear. La creación de un proyecto sin título falla, que es lo que esperábamos. Vea cuánto logró con solo unas pocas líneas de código?
Los proyectos no son muy útiles sin tareas, ¿verdad? Vamos a añadir que:
rieles generan modelo Tarea project_id: integer admin_user_id: integer title: string is_done: boolean due_date: date
Esto crea un modelo de tarea que podemos asociar con proyectos y usuarios. La idea es que una tarea está asignada a alguien y pertenece a un proyecto. Necesitamos establecer esas relaciones y validaciones en el modelo:
tarea de clase < ActiveRecord::Base belongs_to :project belongs_to :admin_user validates :title, :project_id, :admin_user_id, :presence => true valida: is_done, inclusión => : in => [true, false] end
Recuerde agregar las relaciones a los modelos Project y AdminUser también:
clase AdminUser < ActiveRecord::Base has_many :tasks #? end
proyecto de clase < ActiveRecord::Base has_many :tasks #? end
Migre la base de datos y registre el modelo de tarea con Active Admin:
rieles generan active_admin: recurso tarea
Ahora ve y mira el panel de tareas en tu navegador. ¡Acabas de crear un sistema de gestión de proyectos! Buen trabajo.
El sistema que acabamos de crear no es demasiado sofisticado. Afortunadamente, Active Admin no se trata solo de crear un buen sistema de andamios, sino que le da mucho más poder que eso. Empecemos por la sección de Proyectos. Realmente no necesitamos el carné de identidad, creado y actualizado Hay columnas allí, y ciertamente no necesitamos poder buscar usando esas columnas. Vamos a hacer que eso suceda:
index do column: title do | project | link_to project.title, admin_project_path (project) end default_actions end # Filtrar solo por título filtro: título
Algunas notas aquí:
filtrar para cada columna que quieras poder filtrar con.La página de detalles del proyecto es un poco aburrida, ¿no te parece? No necesitamos el fecha columnas y la carné de identidad Aquí, y podríamos mostrar una lista de las tareas más directamente. La personalización de la página de detalles se realiza utilizando el espectáculo método en el app / admin / projects.rb expediente:
show: title =>: title do panel "Tareas" do table_for project.tasks do | t | t.column ("Estado") | tarea | 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 ("Fecha de vencimiento") | tarea | task.due_date? ? l (task.due_date,: format =>: long): '-' end end end end Veamos el código:
show: title =>: title Especifica el título que tendrá la página. El segundo :título Especifica la columna del modelo que se utilizará..panel "tareas" Creamos un panel con el título dado. Dentro de ella, creamos una tabla personalizada para las tareas del proyecto, usando table_for.status_tag es un método que traduce la palabra pasada con un estilo muy agradable, y puede definir el color pasando un segundo argumento con : Okay, :advertencia y :error Para los colores verde, naranja y rojo respectivamente..¿Qué tal una forma fácil de filtrar las tareas que vencen esta semana? ¿O tareas que se retrasan? ¡Eso es fácil! Sólo tiene que utilizar un ámbito de aplicación. En el tareas.rb archivo, agregue esto:
scope: all,: default => true scope: due_this_week do | tareas | task.where ('due_date>? y 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) end Repasemos ese código:
alcance: todos Define el alcance por defecto, mostrando todas las filas..alcance acepta un símbolo para el nombre, y puede pasar un bloque con un argumento. Dentro del bloque puedes refinar una búsqueda de acuerdo a lo que necesites. También puede definir el alcance dentro del modelo y simplemente nombrarlo igual que en este archivo.usuario_admin actual.
¡Echale un vistazo! Justo encima de la tabla, verá algunos enlaces, que le muestran rápidamente cuántas tareas hay por ámbito y le permiten filtrar rápidamente la lista. Debería personalizar aún más la tabla y los filtros de búsqueda, pero le dejaré esa tarea..
Ahora vamos a modificar un poco la vista detallada de la tarea, ya que parece bastante desordenada:
show do panel "Task Details" do attributes_table_for task do row ("Status") status_tag (task.is_done? "Done": "Pending"), (task.is_done?: ok:: error) row ("Title" ) task.title row ("Project") link_to task.project.title, admin_project_path (task.project) row ("Assigned To") link_to task.admin_user.email, admin_admin_user_path (task.admin_user) row ("Fecha de vencimiento") task.due_date? ? l (task.due_date,: format =>: long): '-' end end active_admin_comments end Esto mostrará una tabla para los atributos del modelo (de ahí el nombre del método, attributes_table_for). Se especifica el modelo, en este caso. tarea, y en el bloque pasado, define las filas que desea mostrar. Es aproximadamente lo mismo que definimos para la página de detalles del proyecto, solo para la tarea. Puede preguntarse: ¿qué es eso? ¿Active_admin_comments? método de llamada para? Bueno, Active Admin proporciona un sistema de comentarios simple para cada modelo. Lo habilité aquí porque comentar sobre una tarea podría ser muy útil para discutir la funcionalidad o algo similar. Si no llamas a ese método, se ocultarán los comentarios..
Hay otra cosa que me gustaría mostrar al ver los detalles de una tarea, y eso es el resto de las tareas del asignatario para ese proyecto. Eso es fácil de hacer usando barras laterales!
barra lateral "Otras tareas para este usuario",: only =>: show do table_for current_admin_user.tasks.where (: project_id => task.project) do | t | t.column ("Estado") | tarea | status_tag (task.is_done? "Done": "Pending"), (task.is_done?: ok:: error) t.column ("Title") | task | link_to task.title, admin_task_path (task) end end end Esto crea un panel de la barra lateral, titulado "Otras tareas para este usuario", que se muestra solo en el programa? Mostrar? página. Se mostrará una tabla para el actual.administraciónusuario, y todas las tareas donde el proyecto es el mismo que el proyecto que se muestra (ve, tarea Aquí se referirá a la tarea que se muestra, ya que es una página de detalles para uno tarea). El resto es más o menos lo mismo que antes: algunas columnas con detalles de tareas.
Es posible que haya notado, cuando inició su navegador por primera vez e inició sesión en su aplicación, que había un "Panel de control". sección. Esta es una página totalmente personalizable donde puede mostrar casi cualquier cosa: tablas, estadísticas, lo que sea. Solo vamos a agregar la lista de tareas del usuario como ejemplo. Abre el dashboards.rb archivarlo y revisarlo, así:
ActiveAdmin :: Dashboards.build haga la sección "Sus tareas para esta semana" haga table_for current_admin_user.tasks.where ('due_date>? Y 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 end section "Tareas que llegan tarde" do 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 => : largo): '-' end end end end El código debe ser bastante familiar para usted. Esencialmente crea dos secciones (usando el sección método y un título), con una tabla cada uno, que muestra las tareas actuales y tardías, respectivamente.
Hemos creado una aplicación extensa en muy pocos pasos. Es posible que se sorprenda al saber que hay muchas más funciones que Active Admin tiene para ofrecer, pero no es posible cubrirlas todas en un solo tutorial, sin duda. Si está interesado en aprender más sobre esta joya, visite activeadmin.info.
También le gustaría revisar mi proyecto, llamado active_invoices en GitHub, que es una aplicación de facturación completa hecha completamente con Active Admin. Si tiene alguna pregunta, no dude en preguntar en los comentarios o envíeme un tweet..
