Share
Velkommen til del I i opplæringsserien om å lage en quiz eller en undersøkelsesapp med jQuery Mobile og Rails. Denne serien vil demonstrere hvordan man bygger et mobilkompatibelt webprogram som lar brukere svare på en rekke spørsmål i en veiviser som mote.
jQuery Mobile inneholder flere nyttige, utelukkende funksjoner for å gjøre vårt webprogram brukbart på en rekke mobile enheter. I de fleste tilfeller vil de grunnleggende malene og CSS-temaene som følger med jQuery Mobile, være tilstrekkelig. Men siden alle templeringene er gjort i CSS, kan vi tilpasse utseendet på nettstedet vårt ganske enkelt.
jQueryMobile er et ideelt rammeverk når du bygger en mobil webapplikasjon av mange grunner, blant annet:
1) Siden rammen er bygget på jQuery, er det en liten læringskurve for alle som har brukt jQuery på nettet.
2) Den er for øyeblikket kompatibel med mange store plattformer, inkludert: iOS, Android, Blackberry, Palm WebOS, Nokia / Symbian, Windows Mobile, etc.
3) Den komprimerte størrelsen på de inkluderte bibliotekene er omtrent 12k, som er svært lett for de tilbudte funksjonene.
For backend vil vi bruke Rails 3 med noen få perler, inkludert Typus.
For å starte, kan vi lage en ny rails-app:
skinner nytt .
Pass på at du har den nyeste versjonen av skinnemynten installert. Hvis du har noen programmer du utvikler som krever Rails 2, foreslår jeg at du undersøker og installerer RVM (Ruby Version Manager). Dette vil spare deg for mange hodepine som kan skyldes problemer med perleversjonering.
Deretter kan vi legge til våre edelstener til vår Gemfile:
kilde 'http://rubygems.org' perle 'skinner', '3.0.7' perle 'sqlite3-ruby',: krever => 'sqlite3' perle 'jquery-rails' # Admin perle 'typus',: git = > 'http://github.com/fesplugas/typus.git' perle 'acts_as_list'
Som du kan se, bruker vi Rails 3.0.7 som det er den siste stabile versjonen av Rails fra denne skrivingen. Vi overstyrer også standard Prototype JS-biblioteker som følger med Rails ved å installere jquery-rails-perlen. Siden jQueryMobile åpenbart vil kreve jQuery-basebiblioteket, har vi egentlig ingen grunn til å holde de medfølgende Prototype-bibliotekene rundt.
For admin-delen vår, installerer vi Typus-perlen og acts_as_list. Med bare en liten mengde konfigurasjon, vil Typus gi en hel backend for å håndtere spørsmålene vi skal lage for vår undersøkelse. Handlinger som liste fungerer sømløst med Typus og vil tillate oss å enkelt kontrollere rekkefølgen på våre spørsmål.
Nå kan vi kjøre bunteren for å installere våre perler:
bunt installasjon
Både jQuery-perlen og Typus-perlen har generatorer som arbeider for å i hovedsak ha edelstenene installere seg selv. Dette oppnås ved å kjøre følgende kommandoer i app-katalogen:
skinner generere jquery: installere skinner generere typus
Som standard kommer Typus uten noen form for godkjenningsport. Siden dette er nesten som direkte tilgang til databasen, bør vi sikre det som et første skritt. Den enkleste metoden for å sikre det vil være å legge til grunnleggende http auth. Dette er åpenbart ikke hyper sikker, men det er nok for vår veiledning. For å gjøre dette må vi legge til følgende linjer i filen config / initializers / typus.rb:
config.admin_title = "survey" config.authentication =: http_basic config.username = "admin" config.password = "pass"
Dette vil be brukeren om å skrive inn et brukernavn og passord når / URL-adressen er tilgjengelig.
Nå som vår app er fullt oppsett, kan vi begynne å generere ressurs- og databaseskjemaet. Vi kan bruke Rails shorthand-metoden for å gjøre dette rett fra kommandolinjen med følgende:
skinner generere ressurs spørsmål spørsmål: streng posisjon: heltall skinner generere ressurs valg valg: streng question_id: heltall skinner generere ressurs svar question_id: heltall valg_id: heltall rake db: migrere
Vi har nå 3 tabeller i vår database. Man vil huske spørsmålene vi skal spørre brukeren. Hvert spørsmål vil ha mange valg, og et svar vil være et rekord lagre kombinasjonen av I.D.s for et spørsmål og et valg. Siden valgene bare har ett spørsmål, er question_id-feltet i svartabellen ikke nødvendig. Vi skal legge det til som en enkel tilgang for å forenkle spørringer som å trekke antall svar på et spørsmål. Posisjonsfeltet i spørsmålstabellen vil tillate oss å spesifisere rekkefølge av spørsmål som de vil vises i vår undersøkelse.
For å legge til disse relasjonene til våre modeller, vil vi endre dem på følgende måte:
/app/models/question.rb
klasse spørsmål < ActiveRecord::Base acts_as_list has_many :choices end
Som du ser ovenfor legger vi til act_as_list-pluginet til denne modellen slik at vi kan endre rekkefølgen på utseende for hvert spørsmål i vår undersøkelse.
/app/models/choice.rb
klasse valg < ActiveRecord::Base belongs_to :question end
/app/models/answer.rb
klasse Svar < ActiveRecord::Base belongs_to :question belongs_to :choice end
Ferdig! Nå som våre ressurser og databasetabeller er generert, må vi opprette noen kontroller namespaced under en admin-mappe for Typus. For å gjøre dette kjører vi følgende kommandoer:
skinner generere controller admin / svar skinner generere controller admin / valg skinner generere controller admin / spørsmål
Deretter må vi endre de første linjene i hver av våre kontrollerfiler for å gjøre kontrolleren arv fra ResourcesController i stedet for vår base ApplicationController. I Typus, når vi arver fra ResourcesController, får vi litt kraftig CRUD-funksjonalitet ut av boksen uten å måtte skrive noen ytterligere kode. Nedenfor er de nødvendige erstatninger:
/app/controllers/admin/answers_controller.rb
erstatte:
klassen Admin :: SvarController < ApplicationController
med:
klassen Admin :: SvarController < Admin::ResourcesController
/app/controllers/admin/choices_controller.rb
erstatte:
klassen Admin :: ChoicesController < ApplicationController
med:
klassen Admin :: ChoicesController < Admin::ResourcesController
/app/controllers/admin/questions_controller.rb
erstatte:
klassen Admin :: QuestionsController < ApplicationController
med:
klassen Admin :: QuestionsController < Admin::ResourcesController
Nesten der! Nå må vi legge til noen konfigurasjonserklæringer i vår Typus konfigurasjonsfil. Hvis det finnes noen andre yaml-filer som ligger i config / typus-katalogen, kan vi slette dem fordi de ikke er nødvendige. Typus sannsynligvis opprettet prøvekonfigurasjonsfiler når vi kjørte generasjonserklæringen. La oss lage en fil som heter typus.yml her: config / typus
Først legger vi til konfigurasjonserklæringene for valgmodellen:
Valg: felt: standard: valg, spørsmål_id, spørreskjema: valg, spørsmål_id, spørsmål order_by: relasjoner: spørsmålsfiltre: created_at, spørsmålssøk: søknad: spørreundersøkelse Spørsmål: felt: standard: spørsmål, stillingsformular: spørsmål order_by: valgfiltre: created_at søk: spørsmålet søknad: undersøkelse
La oss bryte dette ned:
Valg: felt: standard: valg, question_id, spørreskjema: valg, question_id, spørsmål
På bare noen få linjer med konfigurasjon, vil Typus skape en stor backend-funksjonalitet for oss. For å starte, vil vi spesifisere feltene som vi har lov til å redigere. Standard delen av feltdefinisjonen tillater oss å angi hvilke felt som skal vises i vår liste. I dette tilfellet er det samme sett med felter som vi vil tillate administrasjonen vår i våre opprett og oppdateringsskjemaer. Dette er spesifisert i skjema delen av feltdefinisjonen.
rekkefølge etter:
Som standard vil våre valg bestilles i den rekkefølgen de er opprettet, så vi trenger ikke spesifisere noe for order_by.
forhold: spørsmål
Hvert valg tilhører ett spørsmål, så vi kan definere et forhold mellom spørsmål til vår valgmodell. Typus vil automatisk utforme våre skjemaer for å redegjøre for hvordan dataposter relaterer seg til hverandre.
filtre: created_at, question
Filtre kan defineres i skrivefeil ganske enkelt ved å oppgi felt og / eller relasjoner i filtredefinisjonen. Basert på felttype, vil typus opprette filterfunksjonalitet i backend. I tilfelle av created_at, vil dette være et sett med drop downs for å angi en dato. For spørsmål vil dette være en nedfelling av alle spørsmålene som er lagret i databasen.
søk: søknad: undersøkelse
Søkefinisjonen er ikke til nytte for oss for denne modellen, da vi sannsynligvis ikke vil søke etter noen valg. Hadde vi angitt felt her, ville typus gi oss en søkeboks, slik at vi kunne filtrere postene som er lagret i vår DB med et søkeord. Søknadsdefinisjonen her er navnet på søknaden våre modeller er under hvilke vi kaller "undersøkelse".
Som et endelig oppryddingstrinn la vi fjerne filen public / index.html som kommer til å blokkere vår standardrute.
Nå kan vi starte serveren vår:
skinner s
Gå til følgende nettadresse i nettleseren din for å teste ut vår nyopprettede admin:
http: // localhost: 3000 / admin
Dette avsluttes del I i vår opplæringsserie om å lage quiz eller undersøkelsesapp i Rails og jQueryMobile. Hold deg oppdatert på del II hvor vi skal implementere vår jQueryMobile frontend.
Accentsconagua