Creați interfețe de administrare frumoase cu administratorul activ

Fiecare dezvoltator de web știe că crearea unei interfețe de administrare pentru proiectele sale este o sarcină incredibil de plictisitoare. Din fericire, există instrumente care fac această sarcină considerabil mai simplă. În acest tutorial, vă vom arăta cum să utilizați Active Admin, un cadru de administrare lansat recent pentru aplicațiile Ruby on Rails.

Puteți utiliza funcția Administrator activ pentru a adăuga o interfață de administrare la proiectul dvs. curent sau puteți chiar să o utilizați pentru a crea o aplicație web complet de la zero - rapid și ușor.

Astăzi vom face acest lucru, creând un sistem de management de proiect destul de simplu. S-ar putea suna ca un pic de muncă, dar Active Admin va face cea mai mare parte a lucrării pentru noi!


Pasul 1 - Crearea mediului de dezvoltare

Voi presupune că aveți cunoștințe anterioare privind Ruby on Rails, în special implicând validări ale modelului, deoarece restul interfeței de aplicații vor fi luate în considerare de Active Admin. În afară de asta, ar trebui să aveți un mediu de dezvoltare pentru Ruby on Rails 3.1 deja înființat, inclusiv Ruby 1.9.2.

Consultați acest articol dacă aveți nevoie de asistență pentru a instala Ruby și Rails.

Creați aplicația pe care vom lucra, executând următoarea comandă în terminalul dvs.:

șine noi active_admin

Apoi, deschide-ți Gemfile și adăugați următoarele rânduri:

 gem 'activeadmin' gem 'meta_search', '> = 1.1.0.pre'

Ultima gem este necesară pentru ca Active Admin să lucreze cu Rails 3.1, așa că nu uitați. După ce sa terminat, rulați instalare pachet comanda pentru a instala pietre. Acum, trebuie să terminăm instalarea administratorului activ, executând următoarea comandă:

șinele generează active_admin: install

Acest lucru va genera toate inițialele și migrațiile necesare pentru funcționarea activă a Administratorului. De asemenea, va crea un AdminUser model pentru autentificare, așa că alerga rake db: migrați pentru a crea toate tabelele de baze de date necesare. În afară de asta, trebuie să adăugați o linie la dvs. config / medii / development.rb dosar, astfel încât trimiterea de e-mailuri funcționează:

 config.action_mailer.default_url_options = : host => 'localhost: 3000'

Odată ce sa terminat, fugi rails server și punctul browser-ul dvs. la localhost: 3000 / admin. Veți fi întâmpinat cu un formular de autentificare frumos. Doar tastați? [email protected]? ca e-mail și parola? ca parola, și a lovit? Login ?. Ar trebui să vedeți acum o interfață de administrare frumoasă.


Pasul 2 - Configurarea modelului nostru de utilizatori

După cum puteți vedea din pagina web pe care tocmai ați generat-o, nu puteți face încă multe lucruri. Vom avea nevoie de o modalitate de a edita utilizatorii noștri și putem face acest lucru folosind Active Admin. Cadrul folosește ceea ce numește "Resurse". Resursele modelelor harta pentru panouri de administrare. Trebuie să le generați folosind o comandă în terminalul dvs., astfel încât Administratorul activ poate cunoaște existența lor, deci mergeți mai departe și rulați:

șinele generează active_admin: resource AdminUser

Sintaxa pentru comanda respectivă este simplă: trebuie doar să scrieți numele modelului bazei de date la sfârșit. Aceasta va genera un fișier în interiorul app / admin dosarul, numit admin_users.rb. Acum, dacă actualizați browserul, veți vedea un nou link în bara de sus, numit "Utilizatori Admin" ?. Dacă faceți clic pe aceasta, veți ajunge în panoul de administrare al utilizatorului de administrare. Acum, probabil că ar fi cam prea aglomerat, deoarece, în mod prestabilit, Active Admin afișează toate coloanele modelului, și având în vedere că cadrul utilizează Devise pentru autentificare, veți vedea o grămadă de coloane care nu sunt cu adevărat necesare. Acest lucru ne duce la prima parte a personalizării noastre: pagina index.

Personalizarea resurselor Active Admin este destul de ușoară (și amuzantă dacă mă întrebați). Deschis app / admin / admin_users.rb pe editorul dvs. de text preferat și faceți ca acesta să arate astfel:

 ActiveAdmin.register AdminUser indexează coloana: coloana de e-mail: coloana curentă_sign_in_at: coloana last_sign_in_at: sign_in_count default_actions sfârșitul final

Să examinăm codul:

  • Prima linie este creată de Active Admin și, așa cum se spune, înregistrează o nouă resursă. Acest lucru a creat legătura de meniu din bara de sus și toate acțiunile implicite, cum ar fi tabelul pe care tocmai l-ați văzut.
  • index ne permite să personalizăm vizualizarea index, care este tabelul care arată toate rândurile.
  • În interiorul blocului treceți la index metodă, specificați care dintre coloane sunteți do doriți să apară pe masă, adică. scris coloană: e-mail va avea Active Admin să afișeze coloana din vizualizare.
  • default_actions este o metodă convenabilă care creează o ultimă coloană cu legături către detaliu, ediție și ștergere a rândului.

Un ultim pas pentru această viziune este personalizarea formularului. Dacă faceți clic pe "Utilizator nou administrator"? linkul din partea dreaptă sus, veți vedea că formularul conține, de asemenea, toate coloanele din model, ceea ce, evident, nu este foarte util. Deoarece Active Admin utilizează Devise, trebuie să introduceți doar o adresă de e-mail pentru a crea un utilizator, iar restul ar trebui să fie luate în considerare de gem autentificare. Pentru a personaliza formularele afișate de Administratorul activ, există o metodă numită (ați ghicit-o) formă:

 ActiveAdmin.register AdminUser face indicele # #? forma finală nu | f | f.inputs "Detalii administrator" fa f.input: sfârșitul e-mailului f.buttons sfârșitul final

Dacă codul vă arată familiar, ați folosit probabil bijuteria Formtastic înainte. Să aruncăm o privire la cod:

  • Specificați vizualizarea formularului prin apelarea formă metodă și trecând un bloc cu un argument (f în acest caz).
  • f.inputs creează un set de câmpuri. Cuvant de sfat: tu avea pentru a adăuga cel puțin un set de câmpuri. Câmpurile din afara unuia nu vor apărea pur și simplu în vizualizare.
  • Pentru a crea un câmp, pur și simplu sunați f.input și treceți un simbol cu ​​numele coloanei modelului, în acest caz, "e-mail"?.
  • f.buttons creează "Trimiteți"? și? Anulați? butoane.

Puteți personaliza și mai mult formularele utilizând formatul DSL (Domain Specific Language) oferit de Formtastic, deci aruncați o privire la tutoriale despre această bijuterie.

Un ultim pas pentru ca acest formular să funcționeze: deoarece nu furnizăm o parolă, Devise nu ne va permite să creăm înregistrarea, așa că trebuie să adăugăm un cod la AdminUser model:

 după_create | admin | admin.send_reset_password_instructions def parola_required? un nou record? ? fals: super-sfârșit

after_create inversarea apelurilor asigură faptul că Devise trimite utilizatorului o legătură pentru a crea o nouă parolă și password_required? metoda ne va permite să creăm un utilizator fără a ne oferi o parolă.

Du-te și încercați. Creați un utilizator și apoi verificați e-mailul pentru un link, care vă va permite să creați o nouă parolă și să vă conectați la sistem.


Pasul 3 - Proiecte

Vom crea un simplu sistem de management al proiectelor. Nu este ceva prea complicat, ci doar ceva care ne va permite să gestionăm proiectele și sarcinile pentru proiect și să atribuim sarcini anumitor utilizatori. Primul lucru este de a crea un model de proiect:

șinele generează un model Titlul proiectului: șir

Active Admin se bazează pe modelele Rails pentru validare și nu vrem proiecte fără titlu, deci adăugăm câteva validări modelului generat:

# șine validează: titlu,: prezență => adevărat

Acum, trebuie să generăm o resursă Active Admin, executând:

șinele generează activ_admin: resource Project

Pentru moment, asta e tot ce avem nevoie pentru proiecte. După migrarea bazei dvs. de date, aruncați o privire la interfața pe care tocmai ați creat-o. Crearea unui proiect fără titlu nu reușește, ceea ce ne-am așteptat. Vedeți cât de mult ați realizat cu doar câteva rânduri de cod?


Pasul 4 - Sarcini

Proiectele nu sunt foarte utile fără a avea dreptate? Să adăugăm că:

 șine genera modelul Task project_id: integer admin_user_id: nume întreg: string is_done: boolean due_date: date

Acest lucru creează un model de activitate pe care îl putem asocia cu proiectele și utilizatorii. Ideea este că o sarcină este atribuită unei persoane și aparține unui proiect. Trebuie să stabilim aceste relații și validări în model:

 clasa Task < ActiveRecord::Base belongs_to :project belongs_to :admin_user validates :title, :project_id, :admin_user_id, :presence => validează valid: is_done,: inclusion => : in => [true, false] sfârșit

Nu uitați să adăugați relațiile la modelele Project și AdminUser:

 clasa AdminUser < ActiveRecord::Base has_many :tasks #? end
 clasă < ActiveRecord::Base has_many :tasks #? end

Migrați baza de date și înregistrați modelul de activitate cu Active Admin:

șinele generează activ_admin: resursă Activitate

Acum, mergeți și aruncați o privire la panoul de sarcini din browserul dvs. Tocmai ați creat un sistem de management de proiect! Bună treabă.


Pasul 5 - Îmbunătățirea

Sistemul pe care tocmai l-am creat nu este prea sofisticat. Din fericire, Active Admin nu are doar rolul de a crea un sistem frumos de schele, ci vă oferă mult mai multă putere decât asta. Să începem cu secțiunea Proiecte. Nu avem nevoie de adevărat id, creată și la curent coloane acolo, și cu siguranță nu trebuie să putem căuta utilizând coloanele respective. Să facem acest lucru:

 index face coloana: titlu nu | proiect | link_to project.title, admin_project_path (project) sfârșitul default_actions end # Filtrați numai după filtrul de titlu: titlu

Câteva note aici:

  • Când specificați coloane, puteți personaliza ceea ce este imprimat pe fiecare rând. Pur și simplu treceți un bloc cu un argument la el și întoarceți tot ce doriți acolo. În acest caz, tipărim un link către pagina cu detalii a proiectului, ceea ce este mai ușor decât să dați clic pe "Vizualizare"? link-ul din dreapta.
  • Filtrele din partea dreaptă sunt, de asemenea, personalizabile. Doar adăugați un apel la filtru pentru fiecare coloană cu care doriți să filtrați.

Pagina detaliilor proiectului este un pic plictisitor, nu crezi? Nu avem nevoie de ele Data coloanele și id aici, și am putea arăta mai direct o listă a sarcinilor. Particularizarea paginii cu detalii se realizează prin utilizarea funcției spectacol metodă în app / admin / projects.rb fişier:

 arată: title =>: panoul de titlu "Sarcini" nu face table_for project.tasks do | t | t.column ("Stare") | task status_tag (task.is_done? "Done": "În așteptare"), (task.is_done ?: ok:: error) t.column ("Title" link_to task.title, admin_task_path (task) t.column ("Atribuit la") | task | task.admin_user.email t.column ("Data expirării") | task | task.due_date? ? l (task.due_date,: format =>: lung): '-' end end end

Să mergem prin cod:

  • arată: titlu =>: titlu specifică titlul pe care îl va avea pagina. Al doilea :titlu specifică coloana modelului care va fi utilizată.
  • Sunând panoul "Sarcini" vom crea un panou cu titlul dat. În cadrul acestuia, vom crea o tabelă personalizată pentru sarcinile proiectului, folosind table_for.
  • Apoi specificăm fiecare coloană și conținutul pe care ar trebui să îl aibă pentru fiecare rând.
    • Statusul? coloana va conține? sau? În așteptare? dacă sarcina se face sau nu. status_tag este o metodă care face ca cuvântul să treacă cu un stil foarte frumos și puteți defini culoarea prin trecerea unui al doilea argument cu oricare dintre acestea : O.K, :avertizare și :eroare pentru culorile verde, portocaliu și roșu.
    • Titlul? coloana va conține un link către sarcină, astfel încât să îl putem edita.
    • A fost atribuit? coloana conține doar e-mailul persoanei responsabile.
    • Data scadentă? va conține data la care se datorează sarcina sau doar o? -? dacă nu există o dată stabilită.

Pasul 6 - Unele trucuri pentru sarcinile

Ce zici de o modalitate ușoară de a filtra sarcinile care se datorează în această săptămână? Sau sarcini care sunt întârziate? Asta e ușor! Utilizați doar un domeniu de aplicare. În tasks.rb fișier, adăugați aceasta:

 domeniu: toate,: implicit => adevărat domeniu de aplicare: due_this_week do | tasks tasks.where ("due_date>? and 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) sfârșit

Să examinăm codul respectiv:

  • domeniul de aplicare: toate definește domeniul de aplicare implicit, afișând toate rândurile.
  • domeniu acceptă un simbol pentru nume și puteți trece un bloc cu un argument. În interiorul blocului puteți rafina o căutare în funcție de ceea ce aveți nevoie. De asemenea, puteți defini domeniul de aplicare al modelului și pur și simplu îl numiți la fel ca în acest fișier.
  • După cum puteți vedea, puteți accesa obiectul curent al utilizatorului înregistrat utilizând current_admin_user.

Verifică! Chiar deasupra tabelului, veți vedea câteva linkuri, care vă vor arăta rapid câte sarcini există pe domeniu și vă permit să filtrați rapid lista. Ar trebui să personalizați în continuare tabelele și filtrele de căutare, dar vă voi lăsa acea sarcină.

Acum vom schimba un detaliu al detaliilor sarcinii, deoarece pare destul de aglomerat:

 a se vedea panoul "Detalii de sarcină" nu face attributes_table_for sarcina do row ("Stare") status_tag (task.is_done? "Done": "În așteptare"), (task.is_done?: ok: ) rând task.title ("Proiect") link_to task.project.title, admin_project_path (task.project) rând ("Atribuit la") link_to task.admin_user.email, admin_admin_user_path (task.admin_user) ("Data la termen") task.due_date? ? l (task.due_date,: format =>: lung): '-' end end activ_admin_comments sfarsit

Aceasta va arăta un tabel pentru atributele modelului (de aici numele metodei, attributes_table_for). Specificați modelul, în acest caz sarcină, iar în blocul trecut ați definit rândurile pe care doriți să le afișați. Este aproximativ același lucru pe care l-am definit pentru pagina de detaliu a proiectului, numai pentru sarcină. S-ar putea să vă întrebați: Ce este asta? Active_admin_comments? metoda de apel pentru? Ei bine, Active Admin oferă un sistem simplu de comentare pentru fiecare model. L-am activat aici pentru că comentarea unei sarcini ar putea fi foarte utilă pentru a discuta despre funcționalitate sau ceva similar. Dacă nu numiți această metodă, comentariile vor fi ascunse.

Mai este un lucru pe care aș dori să-l arăt atunci când văd detaliile unei sarcini, și asta e restul sarcinilor cesionarului pentru acel proiect. Acest lucru este ușor de făcut folosind bare laterale!

 bara laterala "Alte sarcini pentru acest utilizator",: only =>: show do table_for current_admin_user.tasks.where (: project_id => task.project) nu | t.column ("Stare") | task status_tag (task.is_done? "Done": "În așteptare"), (task.is_done ?: ok:: error) t.column ("Title" link_to task.title, admin_task_path (task) capăt sfârșit

Acest lucru creează un panou de bara laterală, intitulat? Alte sarcini pentru acest utilizator ?, care este afișat numai pe "show"? pagină. Acesta va arăta un tabel pentru curentadminutilizatorul și toate sarcinile în care proiectul este același cu proiectul prezentat (vedeți, sarcină aici se va face referire la sarcina afișată, deoarece este o pagină de detaliu pentru unu sarcină). Restul este mai mult sau mai puțin același ca înainte: unele coloane cu detalii despre sarcină.


Pasul 7 - Tabloul de bord

S-ar putea să fi observat, când ați lansat pentru prima oară browserul dvs. și v-ați conectat la aplicația dvs., că a existat un tablou de bord? secțiune. Aceasta este o pagină complet personalizabilă unde puteți afișa aproape orice: tabele, statistici, orice. Vom adăuga lista de sarcini a utilizatorului ca exemplu. Deschideți dashboards.rb fișier și revizuiți-l, după cum urmează:

 ActiveAdmin :: Dashboards.build do secțiunea "Sarcinile dvs. pentru această săptămână" face table_for current_admin_user.tasks.where ("due_date>? And 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): '-' capăt capăt secțiunea "Sarcini care sunt târziu" face 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): '-' sfârșitul capătului final

Codul ar trebui să vă fie destul de familiar. Creează, în esență, două secțiuni (folosind secțiune metoda și un titlu), fiecare cu câte un tabel, care afișează sarcinile actuale și cele târzii.


Concluzie

Am creat o aplicație extinsă în câțiva pași. S-ar putea să fiți surprins să aflați că există mult mai multe caracteristici pe care Active Admin le poate oferi, dar nu este posibil să le acoperiți pe toate într-un singur tutorial, desigur. Dacă sunteți interesat să aflați mai multe despre această bijuterie, vizitați activadmin.info.

De asemenea, ați putea dori să verificați proiectul meu, numit activ_invoices pe GitHub, care este o aplicație completă de facturare realizată în întregime cu Active Admin. Dacă aveți întrebări, nu ezitați să le întrebați în comentarii sau trimiteți-mi un tweet.

Cod