Share
Benvenuto nella parte I della serie di tutorial sulla creazione di un'app di quiz o sondaggio con jQuery Mobile e Rails. Questa serie mostrerà come costruire un'applicazione web compatibile mobile che consentirà agli utenti di rispondere a una serie di domande in un wizard come la moda.
jQuery Mobile contiene diverse funzioni utili e pronte all'uso per rendere la nostra applicazione Web utilizzabile su vari dispositivi mobili. Nella maggior parte dei casi, il modello di base e i temi CSS forniti con jQuery Mobile saranno sufficienti. Tuttavia, dal momento che tutti i modelli sono fatti in CSS, possiamo personalizzare l'aspetto del nostro sito abbastanza facilmente.
jQueryMobile è una scelta di framework ideale per la creazione di un'applicazione web mobile per molte ragioni, tra cui:
1) Poiché il framework è basato su jQuery, c'è una piccola curva di apprendimento per chiunque abbia usato jQuery sul web.
2) Attualmente è compatibile con molte piattaforme principali tra cui: iOS, Android, Blackberry, Palm WebOS, Nokia / Symbian, Windows Mobile, ecc..
3) La dimensione compressa delle librerie incluse è approssimativamente 12k che è molto leggera per le funzionalità offerte.
Per il backend, utilizzeremo Rails 3 con alcune gemme, tra cui Typus.
Per iniziare, creiamo una nuova app per i binari:
rotaie nuove .
Assicurati di avere l'ultima versione della gemma rails installata. Se hai app che stai sviluppando che richiedono Rails 2, ti suggerisco di cercare e installare RVM (Ruby Version Manager). Questo ti farà risparmiare molti mal di testa che possono essere causati da problemi di versioning della gemma.
Successivamente, aggiungiamo le nostre gemme al nostro Gemfile:
fonte 'http://rubygems.org' gem 'rails', '3.0.7' gem 'sqlite3-ruby',: require => 'sqlite3' gem 'jquery-rails' # Admin gem 'typus',: git = > 'http://github.com/fesplugas/typus.git' gemma 'act_as_list'
Come puoi vedere, utilizzeremo Rails 3.0.7 poiché è l'ultima versione stabile di Rails al momento della stesura di questo articolo. Sovrascriveremo anche le librerie JS Prototype predefinite fornite con Rails installando la gem jquery-rails. Dal momento che jQueryMobile richiede ovviamente la libreria di base di jQuery, quindi non abbiamo alcun motivo per mantenere le librerie Prototype incluse in giro.
Per la nostra sezione di amministrazione, installeremo la gemma Typus e act_as_list. Con una piccola quantità di configurazione, Typus fornirà un intero backend per la gestione delle domande che creeremo per il nostro sondaggio. Funziona come lista funziona perfettamente con Typus e ci permetterà di controllare facilmente l'ordine delle nostre domande.
Ora possiamo eseguire il bundler per installare le nostre gemme:
installazione bundle
Sia la gemma jQuery che la gemma Typus hanno generatori che funzionano essenzialmente per installare le gemme. Questo si ottiene eseguendo i seguenti comandi mentre si trova nella directory dell'app:
rails genera jquery: i binari di installazione generano errori di battitura
Di default, Typus viene fornito senza alcun tipo di porta di autenticazione. Poiché questo è quasi come l'accesso diretto al database, dovremmo assicurarlo come primo passo. Il metodo più semplice per proteggerlo sarà aggiungere un'autenticazione http di base. Questo ovviamente non è iper sicuro, ma per gli scopi del nostro tutorial sarà sufficiente. Per fare ciò, dobbiamo aggiungere le seguenti linee al file config / initializers / typus.rb:
config.admin_title = "survey" config.authentication =: http_basic config.username = "admin" config.password = "pass"
Questo richiederà all'utente di inserire un nome utente e una password quando si accede all'URL di / admin.
Ora che la nostra app è completamente configurata, possiamo iniziare a generare le nostre risorse e lo schema del database. Possiamo usare il metodo di abbreviazione Rails per fare ciò direttamente dalla riga di comando con quanto segue:
rails genera una domanda di domande sulla risorsa: posizione delle stringhe: le rotaie intere generano la scelta della risorsa scelta: stringa question_id: rotaia intera genera risposta risorsa question_id: intero choice_id: intero rake db: migrate
Ora abbiamo 3 tabelle nel nostro database. Uno ospiterà le domande che chiederemo all'utente. Ogni domanda avrà molte scelte e una risposta sarà una registrazione che memorizzerà la combinazione di I.D.s per una domanda e una scelta. Dal momento che le scelte avranno solo una domanda, il campo question_id nella tabella delle risposte non è realmente necessario. Lo metteremo qui come un facile accesso per semplificare le query come tirare il numero di risposte per una domanda. Il campo posizione nella tabella delle domande ci permetterà di specificare l'ordine delle domande così come appariranno nel nostro sondaggio.
Per aggiungere queste relazioni ai nostri modelli, le modificheremo come segue:
/app/models/question.rb
domanda di classe < ActiveRecord::Base acts_as_list has_many :choices end
Come puoi vedere sopra, stiamo aggiungendo il plugin acts_as_list a questo modello in modo che possiamo modificare l'ordine di apparizione per ogni domanda nel nostro sondaggio.
/app/models/choice.rb
Scelta di classe < ActiveRecord::Base belongs_to :question end
/app/models/answer.rb
risposta di classe < ActiveRecord::Base belongs_to :question belongs_to :choice end
Fatto! Ora che le nostre risorse e le nostre tabelle di database sono state generate, abbiamo bisogno di creare alcuni controller assegnati ai nomi in una cartella di amministrazione per Typus. Per fare ciò eseguiamo i seguenti comandi:
rails generare controller admin / risposte rails generare controller admin / scelte rails generare controller admin / domande
Successivamente, abbiamo bisogno di cambiare le prime linee in ciascuno dei nostri file controller per fare in modo che il controller erediti da ResourcesController invece del nostro ApplicationController di base. In Typus, una volta ereditato da ResourcesController, otteniamo alcune potenti funzionalità CRUD senza dover scrivere alcun altro codice. Di seguito sono riportate le sostituzioni necessarie:
/app/controllers/admin/answers_controller.rb
sostituire:
amministratore di classe :: AnswersController < ApplicationController
con:
amministratore di classe :: AnswersController < Admin::ResourcesController
/app/controllers/admin/choices_controller.rb
sostituire:
amministratore di classe :: ChoicesController < ApplicationController
con:
amministratore di classe :: ChoicesController < Admin::ResourcesController
/app/controllers/admin/questions_controller.rb
sostituire:
class Admin :: QuestionsController < ApplicationController
con:
class Admin :: QuestionsController < Admin::ResourcesController
Quasi lì! Ora dobbiamo aggiungere alcune istruzioni di configurazione al nostro file di configurazione Typus. Se ci sono altri file yaml che si trovano nella directory config / typus, possiamo cancellarli perché non sono necessari. Probabilmente Typus ha creato file di configurazione di esempio quando abbiamo eseguito la nostra dichiarazione del generatore. Creiamo un file chiamato typus.yml che si trova qui: config / typus
Innanzitutto, aggiungeremo le istruzioni di configurazione per il modello Choice:
Scelta: campi: default: choice, question_id, question question: choice, question_id, question order_by: relationships: question filters: created_at, question search: application: question Question: fields: default: question, position form: question order_by: position relationships: filtri di scelta: created_at search: domanda application: survey
Rompiamo questo:
Scelta: campi: default: choice, question_id, question question: choice, question_id, question
In poche righe di configurazione, Typus creerà per noi una grande quantità di funzionalità di back-end. Per iniziare, specificheremo i campi che siamo autorizzati a modificare. La sezione predefinita della definizione dei campi ci consentirà di impostare quali campi verranno visualizzati nel nostro elenco. In questo caso, è lo stesso insieme di campi che consentiremo al nostro amministratore di impostare nei nostri moduli di creazione e aggiornamento. Questo è specificato nella sezione del modulo della definizione dei campi.
ordinato da:
Di default le nostre scelte saranno ordinate nell'ordine in cui sono state create, quindi non è necessario specificare nulla per order_by.
relazioni: domanda
Ogni scelta appartiene a una domanda, quindi possiamo definire una relazione di domanda con il nostro modello di scelta. Typus realizzerà automagicamente i nostri moduli per tenere conto del modo in cui i record di dati si correlano tra loro.
filtri: created_at, question
I filtri possono essere definiti in typo semplicemente elencando i campi e / o le relazioni nella definizione dei filtri. In base al tipo di campo, typus creerà funzionalità di filtro nel back-end. Nel caso di created_at, questo sarà un insieme di menu a discesa per specificare una data. Per domande, questo sarà un elenco a discesa di tutte le domande memorizzate nel database.
ricerca: applicazione: sondaggio
La definizione di ricerca non ci è di alcuna utilità per questo modello poiché difficilmente cercheremo le scelte possibili. Se avessimo specificato i campi qui, tuttavia, typus ci fornirà una casella di ricerca in modo da poter filtrare i record memorizzati nel nostro DB con un termine di ricerca. La definizione dell'applicazione qui è il nome dell'applicazione che i nostri modelli sono sotto il quale stiamo chiamando "sondaggio".
Come passaggio finale, rimuoviamo il file public / index.html che bloccherà la nostra rotta predefinita.
Ora possiamo avviare il nostro server:
rotaie s
Visita il seguente URL nel tuo browser per testare il nostro admin appena creato:
http: // localhost: 3000 / admin
Questo conclude la parte I della nostra serie di tutorial sulla creazione di app di quiz o sondaggio in Rails e jQueryMobile. Restate sintonizzati per la parte II dove implementeremo il nostro frontend jQueryMobile.
Accentsconagua