Share
Ogni sviluppatore web sa che creare un'interfaccia di amministrazione per i propri progetti è un compito incredibilmente noioso. Fortunatamente, ci sono strumenti che rendono questo compito notevolmente più semplice. In questo tutorial, ti mostrerò come utilizzare Active Admin, un framework di amministrazione lanciato di recente per le applicazioni Ruby on Rails.
Puoi utilizzare Active Admin per aggiungere un'interfaccia di amministrazione al tuo progetto attuale, o puoi persino usarlo per creare un'applicazione web completa da zero, in modo rapido e semplice.
Oggi faremo il secondo, creando un sistema di gestione del progetto abbastanza semplice. Potrebbe sembrare un bel po 'di lavoro, ma Active Admin farà il grosso del lavoro per noi!
Immagino che tu abbia qualche conoscenza precedente di Ruby on Rails, in particolare per quanto riguarda le convalide del modello, dal momento che il resto dell'interfaccia dell'applicazione verrà gestito da Active Admin. Oltre a questo, dovresti avere un ambiente di sviluppo per Ruby on Rails 3.1 già configurato, incluso Ruby 1.9.2.
Fare riferimento a questo articolo se si necessita assistenza per l'installazione di Ruby e Rails.
Crea l'applicazione su cui lavoreremo, eseguendo il seguente comando nel tuo terminale:
rota nuovo active_admin
Quindi, apri il tuo Gemfile e aggiungi le seguenti linee:
gem 'activeadmin' gem 'meta_search', '> = 1.1.0.pre'
L'ultimo gioi è necessario affinché Active Admin funzioni con Rails 3.1, quindi non dimenticarlo. Fatto questo, esegui il installazione bundle comando per installare le gemme. Ora, dobbiamo completare l'installazione di Active Admin, eseguendo il seguente comando:
rails genera active_admin: installa
Ciò genererà tutti gli inizializzatori e le migrazioni necessarie affinché Active Admin funzioni. Creerà anche un AdminUser modello per l'autenticazione, quindi esegui rake db: migrate per creare tutte le tabelle del database necessarie. Oltre a questo, devi aggiungere una linea al tuo config / ambienti / development.rb file, quindi l'invio di email funziona:
config.action_mailer.default_url_options = : host => 'localhost: 3000'
Una volta fatto, corri rails server e indirizza il tuo browser a localhost: 3000 / admin. Sarai accolto con un bel modulo di accesso. Basta digitare? [email protected]? come email e? password? come password e premi? Accedi ?. Ora dovresti vedere una bella interfaccia di amministrazione.
Come puoi vedere dalla pagina web che hai appena generato, non c'è ancora molto che tu possa fare. Avremo bisogno di un modo per modificare i nostri utenti, e possiamo farlo usando Active Admin. Il framework utilizza ciò che chiama? Resources ?. Le risorse mappano i modelli ai pannelli di amministrazione. È necessario generarli utilizzando un comando nel terminale, in modo che Active Admin possa conoscerne l'esistenza, quindi andare avanti ed eseguire:
rails genera active_admin: resource AdminUser
La sintassi per tale comando è semplice: basta scrivere il nome del modello del database alla fine. Questo genererà un file all'interno del App / admin cartella, chiamata admin_users.rb. Ora, se aggiorni il tuo browser vedrai un nuovo link nella barra in alto, chiamato? Admin Users ?. Facendo clic su questo ti porterà al pannello di amministrazione Utente amministratore. Ora, probabilmente sarà un po 'troppo disordinato, poiché per impostazione predefinita, Active Admin mostra tutte le colonne del modello, e considerando che il framework usa Devise per l'autenticazione, vedrai un mucchio di colonne che non sono realmente necessarie. Questo ci porta alla prima parte della nostra personalizzazione: la pagina indice.
La personalizzazione delle risorse Active Admin è abbastanza semplice (e divertente se me lo chiedi). Aperto app / admin / admin_users.rb sul tuo editor di testo preferito e fallo apparire così:
ActiveAdmin.register AdminUser do index do column: colonna email: current_sign_in_at colonna: last_sign_in_at colonna: sign_in_count default_actions end end
Rivediamo il codice:
Accentsconagua
indice il metodo ci consente di personalizzare la vista indice, che è la tabella che mostra tutte le righe.indice metodo, si specifica quali colonne si fare voglio apparire sul tavolo, cioè. scrittura colonna: email avrà Admin attivo mostrerà quella colonna sulla vista.default_actions è un metodo comodo che crea un'ultima colonna con collegamenti al dettaglio, all'edizione e alla cancellazione della riga.Un ultimo passaggio per questa visualizzazione è la personalizzazione del modulo. Se si fa clic su? Nuovo utente amministratore? link in alto a destra, vedrai che il modulo contiene anche tutte le colonne sul modello, che ovviamente non è molto utile. Poiché Active Admin utilizza Devise, dobbiamo solo inserire un indirizzo email per creare un utente, e il resto dovrebbe essere curato dal gioiello di autenticazione. Per personalizzare i moduli visualizzati da Active Admin, c'è un metodo, chiamato (lo hai indovinato) modulo:
ActiveAdmin.register AdminUser do index do #? forma finale do | f | f.inputs "Dettagli amministratore" do f.input: email end f.buttons end end
Se il codice ti sembra familiare, probabilmente hai già usato la gemma Formtastic in precedenza. Diamo un'occhiata al codice:
modulo metodo e passando un blocco con un argomento (f in questo caso).f.inputs crea un fieldset. Un consiglio: tu avere aggiungere almeno un fieldset. I campi al di fuori di uno semplicemente non appariranno sulla vista.f.input e passare un simbolo con il nome della colonna del modello, in questo caso, "email"?.f.buttons crea il? Invia? e? Annulla? pulsanti.Puoi personalizzare ulteriormente i moduli utilizzando il DSL (Domain Specific Language) fornito da Formtastic, quindi dai un'occhiata ai tutorial su questa gemma.
Un ultimo passo per il funzionamento di questo modulo: dato che non stiamo fornendo una password, Devise non ci permetterà di creare il record, quindi dobbiamo aggiungere del codice al AdminUser modello:
after_create | admin | admin.send_reset_password_instructions def password_required? nuovo record? ? falso: super fine
Il after_create la funzione di callback fa in modo che Devise invii all'utente un link per creare una nuova password, e il Password richiesta? il metodo ci consentirà di creare un utente senza fornire una password.
Vai a provarlo. Crea un utente, quindi controlla la tua email per un link, che dovrebbe consentire di creare una nuova password e accedere al sistema.
Creeremo un semplice sistema di gestione dei progetti. Non è qualcosa di troppo complicato, solo qualcosa che ci consentirà di gestire progetti e attività per il progetto e di assegnare compiti a determinati utenti. La prima cosa è creare un modello di progetto:
rails genera il modello Titolo del progetto: string
Active Admin si basa sui modelli di Rails per la convalida e non vogliamo progetti privi di titolo, quindi aggiungiamo alcune convalide al modello generato:
# rails convalida: title,: presence => true
Ora, dobbiamo generare una risorsa Active Admin, eseguendo:
rails genera active_admin: resource Project
Per ora, questo è tutto ciò di cui abbiamo bisogno per i progetti. Dopo aver migrato il tuo database, dai un'occhiata all'interfaccia appena creata. La creazione di un progetto senza titolo fallisce, ed è quello che ci aspettavamo. Guarda quanto hai realizzato con poche righe di codice?
I progetti non sono molto utili senza compiti giusti? Aggiungiamo che:
rails genera il modello Task project_id: intero admin_user_id: intero titolo: stringa is_done: boolean due_date: date
Questo crea un modello di attività che possiamo associare a progetti e utenti. L'idea è che un'attività è assegnata a qualcuno e appartiene a un progetto. Abbiamo bisogno di impostare quelle relazioni e convalide nel modello:
compito di classe < ActiveRecord::Base belongs_to :project belongs_to :admin_user validates :title, :project_id, :admin_user_id, :presence => true convalida: is_done,: inclusion => : in => [vero, falso] fine
Ricorda di aggiungere le relazioni anche ai modelli Project e AdminUser:
AdminUser di classe < ActiveRecord::Base has_many :tasks #? end
progetto di classe < ActiveRecord::Base has_many :tasks #? end
Migrare il database e registrare il modello di attività con Active Admin:
rails genera active_admin: resource Task
Ora vai a dare un'occhiata al pannello delle attività nel tuo browser. Hai appena creato un sistema di gestione del progetto! Buon lavoro.
Il sistema che abbiamo appena creato non è troppo sofisticato. Fortunatamente, Active Admin non si limita a creare un buon sistema di scaffolding, ma offre molto più potere di quello. Iniziamo con la sezione Progetti. Non abbiamo davvero bisogno del id, creato e aggiornato colonne lì, e certamente non abbiamo bisogno di essere in grado di cercare usando quelle colonne. Facciamolo accadere:
indice do colonna: titolo do | progetto | link_to project.title, admin_project_path (project) end default_actions end # Filtro solo per filtro titolo: titolo
Alcune note qui:
filtro per ogni colonna con cui vuoi filtrare.La pagina dei dettagli del progetto è un po 'noiosa, non credi? Non abbiamo bisogno del Data colonne e il id qui, e potremmo mostrare un elenco delle attività più direttamente. La personalizzazione della pagina dei dettagli si ottiene usando il mostrare metodo nel app / admin / projects.rb file:
mostra: title =>: title fa panel "Tasks" fa table_for project.tasks do | t | t.column ("Stato") | compito | status_tag (task.is_done? "Done": "In attesa"), (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 Passiamo attraverso il codice:
mostra: title =>: title specifica il titolo della pagina. Il secondo :titolo specifica la colonna del modello che verrà utilizzata.pannello "Compiti" creiamo un pannello con il titolo dato. Al suo interno, creiamo una tabella personalizzata per le attività del progetto, utilizzando table_for.status_tag è un metodo che rende la parola passata con uno stile molto bello, e puoi definire il colore passando un secondo argomento con entrambi : ok, :avvertimento e :errore per i colori verde, arancione e rosso rispettivamente.Che ne dici di un modo semplice per filtrare le attività che sono dovute questa settimana? O compiti in ritardo? Questo è facile! Basta usare un cannocchiale. Nel tasks.rb file, aggiungi questo:
scope: all,: default => true scope: due_questo_successivo do | tasks | tasks.where ('due_date>? e due_data < ?', 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) fine Rivediamo quel codice:
ambito: tutto definisce l'ambito di default, mostrando tutte le righe.scopo accetta un simbolo per il nome e puoi passare un blocco con un argomento. All'interno del blocco puoi perfezionare una ricerca in base a ciò che ti serve. È inoltre possibile definire l'ambito all'interno del modello e denominarlo semplicemente come in questo file.current_admin_user.
Controlla! Appena sopra la tabella, vedrai alcuni link, che mostrano rapidamente quante attività ci sono per scope e ti permettono di filtrare rapidamente l'elenco. Devi personalizzare ulteriormente la tabella e i filtri di ricerca, ma lascerò questo compito a te.
Ora modificheremo un po 'la vista dei dettagli dell'attività, poiché appare piuttosto disordinata:
mostra il pannello "Task Details" do attributes_table_for task do row ("Status") status_tag (task.is_done? "Fatto": "Pending"), (task.is_done?: ok:: error) row ("Title") ) task.title riga ("Progetto") link_to task.project.title, admin_project_path (task.project) riga ("Assigned To") link_to task.admin_user.email, admin_admin_user_path (task.admin_user) riga ("Data di scadenza") task.due_date? ? l (task.due_date,: format =>: long): '-' end end active_admin_comments end Questo mostrerà una tabella per gli attributi del modello (da qui il nome del metodo, attributes_table_for). Specificare il modello, in questo caso compito, e nel blocco passato, definisci le righe che vuoi mostrare. È approssimativamente lo stesso che abbiamo definito per la pagina dei dettagli del progetto, solo per l'attività. Forse ti starai chiedendo: che cos'è? Active_admin_comments? metodo di chiamata? Bene, Active Admin fornisce un semplice sistema di commenti per ogni modello. L'ho abilitato qui perché commentare un'attività potrebbe essere molto utile per discutere di funzionalità o qualcosa di simile. Se non chiami quel metodo, i commenti saranno nascosti.
C'è un'altra cosa che vorrei mostrare durante la visualizzazione dei dettagli di un'attività, e questo è il resto delle attività dell'assegnatario per quel progetto. È fatto facilmente usando le barre laterali!
barra laterale "Altre attività per questo utente",: only =>: mostra do table_for current_admin_user.tasks.where (: project_id => task.project) do | t | t.column ("Stato") | compito | status_tag (task.is_done? "Done": "In attesa"), (task.is_done?: ok:: error) t.column ("Title") | task | link_to task.title, admin_task_path (task) end end Questo crea un pannello della barra laterale, intitolato? Altre attività per questo utente ?, che viene visualizzato solo nello spettacolo? pagina. Mostrerà una tabella per la correnteAdminutente e tutte le attività in cui il progetto è uguale al progetto mostrato (vedi), compito qui farà riferimento all'attività mostrata, poiché è una pagina di dettaglio per uno compito). Il resto è più o meno lo stesso di prima: alcune colonne con i dettagli dell'attività.
Potresti aver notato, quando hai lanciato il browser per la prima volta e effettuato l'accesso alla tua app, che c'era un? Dashboard? sezione. Questa è una pagina completamente personalizzabile in cui puoi mostrare quasi tutto: tabelle, statistiche, qualsiasi cosa. Stiamo solo andando ad aggiungere l'elenco delle attività dell'utente come esempio. Apri il dashboards.rb file e modificarlo, in questo modo:
ActiveAdmin :: Dashboards.build fai sezione "I tuoi compiti per questa settimana" fai table_for current_admin_user.tasks.where ('due_date>? E due_data < ?', 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 "Attività in ritardo" fai 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): '-' end end end Il codice dovrebbe essere abbastanza familiare per te. In sostanza crea due sezioni (usando il sezione metodo e un titolo), con una tabella ciascuno, che visualizza rispettivamente le attività correnti e in ritardo.
Abbiamo creato un'applicazione estesa in pochissimi passaggi. Potresti essere sorpreso di sapere che ci sono molte altre funzionalità che Active Admin ha da offrire, ma non è possibile coprirle tutte in un solo tutorial, certamente. Se sei interessato a saperne di più su questa gemma, visita activeadmin.info.
Potresti anche voler controllare il mio progetto, chiamato active_invoices su GitHub, che è un'applicazione di fatturazione completa realizzata interamente con Active Admin. Se avete domande, sentitevi liberi di chiedere loro nei commenti, o mandatemi un tweet.
