Share
Elke webontwikkelaar weet dat het creëren van een beheerinterface voor hun projecten een ongelooflijk saaie taak is. Gelukkig zijn er tools die deze taak aanzienlijk eenvoudiger maken. In deze zelfstudie laat ik u zien hoe u Active Admin gebruikt, een recent gelanceerd administratief kader voor Ruby on Rails-toepassingen.
U kunt Active Admin gebruiken om een beheerinterface toe te voegen aan uw huidige project, of u kunt het zelfs gebruiken om vanuit het niets een complete webtoepassing te maken - snel en gemakkelijk.
Vandaag doen we dit door een vrij eenvoudig projectbeheersysteem te maken. Het klinkt misschien als best een beetje werk, maar Active Admin zal het grootste deel van het werk voor ons doen!
Ik ga ervan uit dat je wat kennis van Ruby on Rails hebt, vooral met betrekking tot modelvalidaties, omdat de rest van de applicatie-interface door Active Admin wordt verzorgd. Afgezien van dat, zou je een ontwikkelomgeving voor Ruby on Rails 3.1 moeten hebben, inclusief Ruby 1.9.2.
Raadpleeg dit artikel als u hulp nodig hebt bij het installeren van Ruby en Rails.
Maak de applicatie waaraan we zullen werken, door de volgende opdracht in uw Terminal uit te voeren:
rails nieuwe active_admin
Open vervolgens je Gemfile en voeg de volgende regels toe:
gem 'activeadmin' gem 'meta_search', '> = 1.1.0.pre'
Het laatste juweel is vereist voor Active Admin om met Rails 3.1 te werken, dus vergeet het niet. Nadat dat is gebeurd, voert u de bundel installeren commando om de edelstenen te installeren. Nu moeten we Active Admin installeren door de volgende opdracht uit te voeren:
rails genereren active_admin: installeren
Hiermee genereert u alle benodigde initializers en migraties voor actieve Admin om te werken. Het maakt ook een AdminUser model voor authenticatie, dus uitvoeren rake db: migreren om alle benodigde databasetabellen te maken. Afgezien daarvan moet je een regel toevoegen aan je config / omgevingen / development.rb bestand, dus het verzenden van e-mails werkt:
config.action_mailer.default_url_options = : host => 'localhost: 3000'
Als dat is gebeurd, ren dan rails server en wijs uw browser naar localhost: 3000 / admin. Je wordt begroet met een mooi inlogformulier. Typ gewoon [email protected]? als het e-mailadres en het wachtwoord? als het wachtwoord en klik op? Inloggen ?. Je zou nu een mooie beheerinterface moeten zien.
Zoals je kunt zien op de webpagina die je zojuist hebt gegenereerd, kun je nog niet veel doen. We hebben een manier nodig om onze gebruikers te bewerken, en dat kunnen we doen met behulp van Active Admin. Het raamwerk gebruikt wat het noemt? Bronnen ?. Resources brengen modellen in kaart voor beheerderspanels. U moet ze genereren met behulp van een opdracht in uw terminal, dus Active Admin kan hun bestaan kennen, dus ga je gang en voer:
rails genereren active_admin: resource AdminUser
De syntaxis voor die opdracht is eenvoudig: schrijf gewoon de naam van het databasemodel aan het einde. Dit genereert een bestand binnen de app / admin map, genaamd admin_users.rb. Als u nu uw browser ververst, ziet u een nieuwe link op de bovenste balk, genaamd? Admin-gebruikers ?. Als u hierop klikt, gaat u naar het beheerdersdashboard Beheer. Het ziet er nu waarschijnlijk een beetje te rommelig uit, omdat Active Admin standaard alle kolommen van het model toont en aangezien het framework Devise gebruikt voor authenticatie, zie je een aantal kolommen die niet echt nodig zijn. Dit brengt ons bij het eerste deel van onze aanpassing: de indexpagina.
Het aanpassen van Active Admin-bronnen is vrij eenvoudig (en leuk als je het mij vraagt). Open app / admin / admin_users.rb op je favoriete teksteditor en laat het er zo uitzien:
ActiveAdmin.register AdminUser do index do column: email kolom: current_sign_in_at kolom: last_sign_in_at kolom: sign_in_count default_actions end end
Laten we de code herzien:
Accentsconagua
inhoudsopgave Met deze methode kunnen we de indexweergave aanpassen, de tabel met alle rijen.inhoudsopgave methode, geeft u aan welke kolommen u gebruikt do wil op de tafel verschijnen, dat wil zeggen. schrift kolom: e-mail zal Active Admin die kolom in de weergave tonen.default_actions is een gemakkelijke methode waarmee een laatste kolom wordt gemaakt met koppelingen naar detail, editie en verwijdering van de rij.Een laatste stap voor deze weergave is om het formulier aan te passen. Als u op de? Nieuwe beheerder-gebruiker klikt? link in de rechterbovenhoek, zult u zien dat het formulier ook alle kolommen in het model bevat, wat uiteraard niet erg handig is. Aangezien Active Admin Devise gebruikt, hoeven we alleen maar een e-mailadres in te voeren om een gebruiker te maken, en de rest moet worden afgehandeld door het authenticatiemiddel. Om de formulieren aan te passen die Active Admin weergeeft, is er een methode, genaamd (u raadt het al) het formulier:
ActiveAdmin.register AdminUser do index do #? einde vorm do | f | f.inputs "Admin-details" doen f.input: e-mail einde f.buttons einde
Als de code u bekend voorkomt, hebt u waarschijnlijk eerder het juweel Formtastic gebruikt. Laten we de code eens bekijken:
het formulier methode en een blok doorgeven met een argument (f in dit geval).f.inputs maakt een veldset. Woord van advies: jij hebben om ten minste één veldset toe te voegen. Velden buiten een venster verschijnen gewoon niet in de weergave.f.input en geef een symbool door met de naam van de kolom van het model, in dit geval? e-mail?.f.buttons maakt de? Submit? en? Annuleren? toetsen.U kunt de formulieren verder aanpassen met behulp van de DSL (Domain Specific Language) van Formtastic, dus bekijk de tutorials over dit juweeltje.
Nog een laatste stap voor dit formulier: aangezien we geen wachtwoord verstrekken, laat Devise ons de record niet maken, dus we moeten wat code toevoegen aan de AdminUser model:
after_create | admin | admin.send_reset_password_instructions def password_required? nieuw record? ? false: super end
De after_create callback zorgt ervoor dat Devise de gebruiker een koppeling stuurt om een nieuw wachtwoord aan te maken, en de wachtwoord benodigd? methode zal ons toelaten om een gebruiker aan te maken zonder een wachtwoord op te geven.
Ga het uitproberen. Maak een gebruiker en controleer vervolgens uw e-mail op een link, waarmee u een nieuw wachtwoord kunt maken en u kunt aanmelden bij het systeem.
We gaan een eenvoudig projectbeheersysteem maken. Maar niet iets te gecompliceerd, alleen iets waarmee we projecten en taken voor het project kunnen beheren en taken aan bepaalde gebruikers kunnen toewijzen. Allereerst, is het maken van een projectmodel:
rails genereren model Projecttitel: string
Actieve Admin vertrouwt op de modellen van Rails voor validatie en we willen geen projecten zonder titel, dus laten we wat validaties aan het gegenereerde model toevoegen:
# rails valideert: title,: presence => true
Nu moeten we een Active Admin-resource genereren door het volgende uit te voeren:
rails genereren active_admin: resourceproject
Voor nu is dat alles wat we nodig hebben voor projecten. Bekijk na het migreren van uw database de interface die u zojuist hebt gemaakt. Het maken van een project zonder titel mislukt, wat we verwachtten. Kijk hoeveel je hebt bereikt met slechts een paar regels code?
Projecten zijn niet erg nuttig zonder taken toch? Laten we hieraan toevoegen:
rails genereren model Task project_id: integer admin_user_id: integer title: string is_done: boolean due_date: date
Hiermee wordt een taakmodel gemaakt dat we kunnen koppelen aan projecten en gebruikers. Het idee is dat een taak wordt toegewezen aan iemand en deel uitmaakt van een project. We moeten die relaties en validaties in het model instellen:
klastaak < ActiveRecord::Base belongs_to :project belongs_to :admin_user validates :title, :project_id, :admin_user_id, :presence => true valideert: is_done,: inclusion => : in => [true, false] end
Vergeet niet om ook de relaties toe te voegen aan de Project- en AdminUser-modellen:
klasse AdminUser < ActiveRecord::Base has_many :tasks #? end
klasse Project < ActiveRecord::Base has_many :tasks #? end
Migreer de database en registreer het taakmodel met Active Admin:
rails genereren active_admin: hulpmiddel Taak
Ga nu eens kijken naar het takenpaneel in uw browser. U hebt zojuist een projectbeheersysteem gecreëerd! Goed gedaan.
Het systeem dat we zojuist hebben gemaakt, is niet al te geavanceerd. Gelukkig gaat Active Admin niet alleen over het maken van een mooi steigersysteem, het geeft je ook veel meer kracht dan dat. Laten we beginnen met de sectie Projecten. We hebben het echt niet echt nodig ID kaart, aangemaakt en bijgewerkt kolommen daar, en we moeten zeker niet kunnen zoeken met die kolommen. Laten we dat laten gebeuren:
index do kolom: titel do | project | link_to project.title, admin_project_path (project) end default_actions end # Filter alleen op titelfilter: titel
Een paar opmerkingen hier:
filter voor elke kolom waarmee u wilt filteren.De detailpagina van het project is een beetje saai, vind je niet? We hebben het niet nodig datum kolommen en de ID kaart Hier kunnen we een lijst met taken directer weergeven. Het aanpassen van de detailpagina wordt bereikt met behulp van de laten zien methode in de app / admin / projects.rb het dossier:
show: title =>: titel do panel "Tasks" do table_for project.tasks 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 Laten we de code eens doorlopen:
show: title =>: titel specificeert de titel die de pagina zal hebben. De seconde :titel geeft de kolom van het model aan die zal worden gebruikt.paneel "Taken" we maken een paneel met de gegeven titel. Daarin creëren we een aangepaste tabel voor de taken van het project, met behulp van table_for.status_tag is een methode waarmee het woord wordt doorgegeven met een heel mooie stijl, en je kunt de kleur definiëren door een tweede argument door te geven met een van beide : OK, :waarschuwing en :fout voor de kleuren groen, oranje en rood respectievelijk.Hoe zit het met een eenvoudige manier om taken die deze week moeten worden gefilterd te filteren? Of taken die te laat zijn? Dat is eenvoudig! Gebruik gewoon een scope. In de tasks.rb bestand, voeg dit toe:
scope: all,: default => true scope: due_this_week do | tasks | tasks.where ('due_date>? en 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) einde Laten we die code eens bekijken:
bereik: alles definieert het standaardbereik en toont alle rijen.strekking accepteert een symbool voor de naam en je kunt een blok met een argument passeren. In het blok kun je een zoekopdracht verfijnen op basis van wat je nodig hebt. U kunt ook de scope binnen het model definiëren en deze dezelfde naam geven als in dit bestand.current_admin_user.
Bekijken! Net boven de tabel ziet u enkele links, die u snel laten zien hoeveel taken er per scope zijn, en waarmee u de lijst snel kunt filteren. Je moet de tabel en zoekfilters verder aanpassen, maar ik laat die taak aan jou over.
We gaan nu de detailweergave van de taak een beetje aanpassen, omdat het er nogal rommelig uitziet:
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 rij ("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) rij ("Vervaldatum") task.due_date? ? l (task.due_date,: format =>: long): '-' end-end active_admin_comments end Dit toont een tabel voor de attributen van het model (vandaar de naam van de methode, attributes_table_for). U geeft in dit geval het model aan taak, en in het doorgegeven blok definieert u de rijen die u wilt weergeven. Het is ongeveer hetzelfde dat we hebben gedefinieerd voor de detailpagina van het project, alleen voor de taak. U vraagt zich misschien af: wat is dat? Active_admin_comments? methode oproep voor? Welnu, Active Admin biedt een eenvoudig commentaarsysteem voor elk model. Ik heb het hier ingeschakeld omdat commentaar op een taak erg handig zou kunnen zijn om functionaliteit te bespreken, of iets dergelijks. Als u die methode niet aanroept, worden de opmerkingen verborgen.
Er is nog iets dat ik zou willen laten zien bij het bekijken van het detail van een taak, en dat is de rest van de taken van de toegewezen persoon voor dat project. Dat is eenvoudig gedaan met behulp van zijbalken!
zijbalk "Andere taken voor deze gebruiker",: only =>: show do table_for current_admin_user.tasks.where (: project_id => task.project) 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) end end Hiermee wordt een zijpaneel gemaakt met de titel? Andere taken voor deze gebruiker ?, die alleen wordt weergegeven in de? Show? pagina. Het toont een tabel voor de stroombeheerdergebruiker en alle taken waarbij het project hetzelfde is als het project dat wordt getoond (zie je, taak hier wordt verwezen naar de taak die wordt weergegeven, omdat het een detailpagina is een taak). De rest is min of meer hetzelfde als voorheen: enkele kolommen met taakdetails.
U hebt misschien gemerkt, toen u uw browser voor het eerst lanceerde en inlogde op uw app, dat er een? Dashboard? sectie. Dit is een volledig aanpasbare pagina waar je bijna alles kunt laten zien: tabellen, statistieken, wat dan ook. We voegen gewoon de takenlijst van de gebruiker toe als voorbeeld. Open de dashboards.rb bestand en herzien, zoals zo:
ActiveAdmin :: Dashboards.build do sectie "Uw taken voor deze week" doet table_voor current_admin_user.tasks.where ('due_date>? En 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 => : lang): '-' einde sectie "Taken die te laat zijn" doen 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 => : lang): '-' end end end De code moet u redelijk bekend voorkomen. Het maakt in essentie twee secties (met behulp van de sectie methode en een titel), met telkens één tabel, die actuele en late taken weergeeft.
We hebben een uitgebreide applicatie in slechts enkele stappen gemaakt. Het zal je misschien verbazen dat er nog veel meer functies zijn die Active Admin te bieden heeft, maar het is niet mogelijk om ze allemaal in slechts één tutorial te gebruiken, zeker. Als je meer wilt weten over dit juweeltje, ga dan naar activeadmin.info.
Je zou ook graag mijn project bekijken, active_invoices genaamd op GitHub, een complete facturatie-applicatie die volledig is gemaakt met Active Admin. Als je vragen hebt, stel ze dan gerust in de comments, of stuur me een tweet.
