Share
Hver webutvikler vet at å skape et administrasjonsgrensesnitt for sine prosjekter er en utrolig kjedelig oppgave. Heldigvis finnes det verktøy som gjør denne oppgaven betydelig enklere. I denne veiledningen viser jeg deg hvordan du bruker Active Admin, et nylig lansert administrasjonsramme for Ruby on Rails-applikasjoner.
Du kan bruke Active Admin til å legge til et administrasjonsgrensesnitt for ditt nåværende prosjekt, eller du kan til og med bruke den til å lage et komplett webprogram fra bunnen av - raskt og enkelt.
I dag skal vi gjøre det sistnevnte ved å skape et ganske enkelt prosjektstyringssystem. Det kan høres ut som en del arbeid, men Active Admin vil gjøre mesteparten av arbeidet for oss!
Jeg kommer til å anta at du har noen tidligere Ruby on Rails kunnskap, spesielt med modellvalideringer, siden resten av applikasjonsgrensesnittet skal tas vare på av Active Admin. Bortsett fra det, bør du ha et utviklingsmiljø for Ruby on Rails 3.1 allerede satt opp, inkludert Ruby 1.9.2.
Se denne artikkelen hvis du trenger hjelp med å installere Ruby and Rails.
Opprett søknaden vi skal jobbe med, ved å kjøre følgende kommando i Terminal:
skinner nytt active_admin
Deretter åpner du Gemfile og legg til følgende linjer:
perle 'activeadmin' perle 'meta_search', '> = 1.1.0.pre'
Den siste perlen er nødvendig for Active Admin for å jobbe med Rails 3.1, så ikke glem det. Etter det er det gjort, kjør bunt installasjon kommandoen for å installere edelstenene. Nå må vi fullføre installasjonen av Active Admin, ved å kjøre følgende kommando:
skinner genererer active_admin: installere
Dette vil generere alle nødvendige initiativer og overføringer for Active Admin til å fungere. Det vil også skape en AdminUser modell for autentisering, så kjøre rake db: migrere å opprette alle nødvendige databasetabeller. Bortsett fra det, må du legge til en linje til din konfig / miljøer / development.rb fil, så sender e-postmeldinger:
config.action_mailer.default_url_options = : host => 'localhost: 3000'
Når det er gjort, løp skinner server og pek nettleseren din til localhost: 3000 / admin. Du blir møtt med et fint påloggingsskjema. Skriv bare [email protected]? som e-post og passord? som passord, og klikk? Logg inn ?. Du bør nå se et godt administrasjonsgrensesnitt.
Som du kan se fra nettsiden du nettopp har generert, er det ikke mye du kan gjøre, enda. Vi skal ha en måte å redigere brukerne på, og vi kan gjøre det ved hjelp av Active Admin. Rammen bruker hva det kaller? Ressurser ?. Ressurser kartmodeller til administrasjonspaneler. Du må generere dem ved å bruke en kommando i terminalen din, så Active Admin kan kjenne deres eksistens, så fortsett å kjøre:
skinner genererer active_admin: ressurs AdminUser
Syntaxen for den kommandoen er enkel: skriv bare navnet på databasemodellen på slutten. Dette vil generere en fil inne i app / admin mappe, kalt admin_users.rb. Nå, hvis du oppdaterer nettleseren din, ser du en ny lenke øverst på linjen, kalt? Admin-brukere ?. Hvis du klikker på det, tar du deg til administrasjonspanelet. Nå vil det nok se litt for rotete, siden standardadministrasjonen viser alle modellens kolonner, og i betraktning at rammen bruker Devise for authentication, ser du en haug med kolonner som ikke er virkelig nødvendige. Dette tar oss til den første delen av tilpasningen vår: indekssiden.
Å tilpasse Active Admin-ressurser er ganske enkelt (og morsomt hvis du spør meg). Åpen app / admin / admin_users.rb på din favoritt tekstredigerer og få det til å se slik ut:
ActiveAdmin.register AdminUser gjør indeks kolonne: e-post kolonne: current_sign_in_at kolonne: last_sign_in_at kolonne: sign_in_count default_actions end end
La oss se på koden:
Accentsconagua
index Metoden lar oss tilpasse indeksvisningen, som er tabellen som viser alle rader.index Metode, du angir hvilke kolonner du gjøre vil dukke opp på bordet, dvs. skriving kolonne: e-post vil ha aktiv administrator vise denne kolonnen på visningen.default_actions er en bekvemmelighetsmetode som lager en siste kolonne med lenker til detalj, utgave og sletting av raden.Et siste skritt for denne visningen er å tilpasse skjemaet. Hvis du klikker på? Ny Admin Bruker? lenke øverst til høyre, ser du at skjemaet også inneholder alle kolonnene på modellen, som åpenbart ikke er veldig nyttig. Siden Active Admin bruker Devise, trenger vi bare å skrive inn en e-postadresse for å opprette en bruker, og resten skal tas vare på av autentiseringsemien. For å tilpasse skjemaene som Active Admin viser, er det en metode som kalles (du gjettet det) skjema:
ActiveAdmin.register AdminUser gjør indeks gjør #? sluttform do | f | f.inputs "Admin Details" gjør f.input: e-post slutten av f.buttons slutten
Hvis koden er kjent for deg, har du sikkert brukt Formtastic-perlen før. La oss ta en titt på koden:
skjema metode og passerer den en blokk med et argument (f i dette tilfellet).f.inputs skaper et feltsett. Ord av råd: deg ha å legge til minst ett feltsett. Felt utenfor en vil ikke vises på utsikten.f.input og send et symbol med navnet på modellens kolonne, i dette tilfellet? e-post?.f.buttons lager? Send? og? Avbryt? knapper.Du kan videre tilpasse skjemaene ved hjelp av DSL (Domain Specific Language) levert av Formtastic, så ta en titt på opplæringen om denne perlen.
Et siste skritt for dette skjemaet for å jobbe: Siden vi ikke oppgir et passord, vil Devise ikke la oss lage opptaket, så vi må legge til noe kode til AdminUser modell:
after_create | admin | admin.send_reset_password_instructions def password_required? ny rekord? ? false: super end
De after_create tilbakeringing sørger for at Devise sender brukeren en lenke for å opprette et nytt passord, og Passord kreves? Metoden vil tillate oss å opprette en bruker uten å gi et passord.
Gå prøve den ut. Opprett en bruker, og kontroller deretter e-posten din for en kobling, som skal la deg opprette et nytt passord, og logge deg inn i sytemet.
Vi skal lage et enkelt prosjektstyringssystem. Ikke noe for komplisert, men bare noe som lar oss styre prosjekter og oppgaver for prosjektet, og tildele oppgaver til bestemte brukere. Første ting er å skape en prosjektmodell:
skinner generere modell Prosjekt tittel: streng
Aktiv Admin er avhengig av Rails 'modeller for validering, og vi vil ikke ha prosjekter uten tittel, så la oss legge til noen valideringer til den genererte modellen:
# rails validates: title,: presence => true
Nå må vi generere en Active Admin-ressurs ved å kjøre:
skinner genererer active_admin: ressursprosjekt
For nå er det alt vi trenger for prosjekter. Etter å ha migrert databasen, ta en titt på grensesnittet du nettopp har opprettet. Opprette et prosjekt uten tittel feiler, noe som vi forventet. Se hvor mye du oppnådde med bare noen få linjer med kode?
Prosjekter er ikke veldig nyttige uten oppgaver riktig? La oss legge til at:
skinner generere modell Oppgave project_id: integer admin_user_id: heltall tittel: streng is_done: boolean due_date: date
Dette skaper en oppgavemodell som vi kan knytte til prosjekter og brukere. Tanken er at en oppgave er tildelt noen og tilhører et prosjekt. Vi må sette disse relasjonene og valideringene i modellen:
klasseoppgave < ActiveRecord::Base belongs_to :project belongs_to :admin_user validates :title, :project_id, :admin_user_id, :presence => ekte validater: is_done,: inclusion => : in => [true, false] slutt
Husk å legge til relasjonene til Prosjekt- og AdminUser-modellene også:
klassen AdminUser < ActiveRecord::Base has_many :tasks #? end
klasseprosjekt < ActiveRecord::Base has_many :tasks #? end
Migrere databasen, og registrer oppgavemodellen med Active Admin:
skinner genererer active_admin: ressursoppgave
Gå nå og ta en titt på oppgavepanelet i nettleseren din. Du har nettopp opprettet et prosjektstyringssystem! Godt jobbet.
Systemet vi nettopp har opprettet er ikke så sofistikert. Heldigvis, Active Admin handler ikke bare om å skape et fint stillasystem, det gir deg langt mer kraft enn det. La oss starte med Prosjekt-delen. Vi trenger ikke virkelig id, opprettet og oppdatert kolonner der, og vi trenger absolutt ikke å kunne søke med disse kolonnene. La oss få det til å skje:
indeks do kolonne: title do | project | link_to project.title, admin_project_path (prosjekt) avslutt default_actions end # Filter bare etter tittelfilter: tittel
Noen få notater her:
filter for hver kolonne du vil kunne filtrere med.Prosjektets detaljside er litt kjedelig, tror du ikke? Vi trenger ikke Dato kolonner og id her, og vi kunne vise en liste over oppgavene mer direkte. Tilpasse detaljsiden gjøres ved å bruke vise fram metode i app / admin / projects.rb fil:
show: title =>: title panel "Oppgaver" gjør table_for project.tasks do | t | t.column ("Status") | oppgave | status_tag (task.is_done? "Ferdig": "Venter"), (oppgave.is_done?: ok:: feil) t.column ("Title") | oppgave | link_to task.title, admin_task_path (oppgave) t.column ("Tilordnet til") | oppgave | task.admin_user.email t.column ("Forfallsdato") | oppgave | task.due_date? ? l (task.due_date,: format =>: long): '-' slutten slutten La oss gå gjennom koden:
show: title =>: title Angir tittelen siden vil ha. Den andre :tittel spesifiserer modellens kolonne som skal brukes.panel "Oppgaver" Vi lager et panel med den oppgitte tittelen. Innenfor det lager vi et tilpasset bord for prosjektets oppgaver, ved hjelp av table_for.status_tag er en metode som gjør at ordet passerer med en veldig fin stil, og du kan definere fargen ved å sende et annet argument med enten : ok, :advarsel og :feil for fargene grønn, oransje og rød henholdsvis.Hva med en enkel måte å filtrere oppgaver på grunn av denne uken? Eller oppgaver som er sent? Det er enkelt! Bare bruk et omfang. I tasks.rb fil, legg til dette:
omfang: alt,: default => sant omfang: due_this_week do | tasks | tasks.where ('due_date>? og 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) slutten La oss se på denne koden:
omfang: alt definerer standard omfanget, viser alle rader.omfang aksepterer et symbol for navnet, og du kan sende en blokk med et argument. Inne i blokken kan du avgrense et søk etter hva du trenger. Du kan også definere omfanget inne i modellen og bare nevne det samme som i denne filen.current_admin_user.
Sjekk det ut! Like over bordet ser du noen koblinger, som raskt viser deg hvor mange oppgaver det er per rekkevidde, og lar deg raskt filtrere listen. Du bør videre tilpasse tabellen og søkefiltrene, men jeg lar deg legge den oppgaven.
Vi skal nå justere oppgavens detaljvisning litt, siden det ser ganske rotete ut:
vis panelet "Oppgavedetaljer" gjør attributes_table_for oppgavelinje ("Status") status_tag (task.is_done? "Ferdig": "Venter"), (oppgave.is_done?: ok:: feil) rad ) task.title rad ("prosjekt") link_to task.project.title, admin_project_path (task.project) rad ("Tilordnet til") link_to task.admin_user.email, admin_admin_user_path (task.admin_user) rad ("Forfallsdato") task.due_date? ? l (task.due_date,: format =>: long): '-' slutten endte active_admin_comments end Dette vil vise et bord for egenskapene til modellen (derav metodens navn, attributes_table_for). Du angir modellen, i dette tilfellet oppgave, og i blokken gått, definerer du rader du vil vise. Det er omtrent det samme som vi definerte for prosjektets detaljside, bare for oppgaven. Du kan spørre deg selv: Hva er det? Active_admin_comments? metode kaller for? Vel, Active Admin gir et enkelt kommentarsystem for hver modell. Jeg aktiverte det her fordi det var veldig nyttig å kommentere en oppgave å diskutere funksjonalitet eller noe lignende. Hvis du ikke ringer den metoden, vil kommentarer bli skjult.
Det er en annen ting jeg vil gjerne vise når jeg ser på en oppgave, og det er resten av oppdragsgivers oppgaver for det prosjektet. Det gjøres enkelt ved hjelp av sidebjelker!
sidebar "Andre oppgaver for denne brukeren",: bare =>: Vis gjør tabell_for current_admin_user.tasks.where (: project_id => task.project) do | t | t.column ("Status") | oppgave | status_tag (task.is_done? "Ferdig": "Venter"), (oppgave.is_done?: ok:: feil) t.column ("Title") | oppgave | link_to task.title, admin_task_path (oppgave) slutten Dette oppretter et sidebar panel med tittelen? Andre oppgaver for denne brukeren?, Som bare vises på showet? side. Det vil vise et bord for gjeldendeadminbruker og alle oppgaver der prosjektet er det samme som prosjektet blir vist (du ser, oppgave Her vil du se på oppgaven som vises, siden det er en detaljside for en oppgave). Resten er mer eller mindre den samme som før: Noen kolonner med oppgavedetaljer.
Du har kanskje lagt merke til at når du først lanserte nettleseren din og logget på appen din, var det et? Dashboard? seksjon. Dette er en fullstendig tilpassbar side hvor du kan vise nesten alt: tabeller, statistikk, uansett. Vi skal bare legge til brukerens oppgaveliste som et eksempel. Åpne opp dashboards.rb filen og revidere den, slik som:
ActiveAdmin :: Dashboards.build gjør delen "Dine oppgaver for denne uken" gjør table_for current_admin_user.tasks.where ('due_date>? Og 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): '-' sluttenavsnitt "Oppgaver som er sent" gjør 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): '-' slutten slutten Koden skal være ganske kjent for deg. Det skaper i hovedsak to seksjoner (ved hjelp av seksjon metode og tittel), med ett bord hver, som viser henholdsvis gjeldende og sentlige oppgaver.
Vi har laget et omfattende program i svært få trinn. Du kan bli overrasket over å vite at det er mange flere funksjoner som Active Admin har å tilby, men det er ikke mulig å dekke dem alle i bare én opplæring, sikkert. Hvis du er interessert i å lære mer om denne perlen, kan du gå til activeadmin.info.
Du kan også gjerne sjekke ut prosjektet mitt, kalt active_invoices på GitHub, som er et komplett faktureringsprogram som er gjort helt med Active Admin. Hvis du har spørsmål, kan du spørre dem i kommentarene, eller send meg en tweet.
