Benvenuti alla parte II della serie di tutorial sulla creazione di un'applicazione web di quiz o sondaggio con jQuery Mobile e Ruby on Rails. In questa parte del tutorial creeremo un'interfaccia web mobile friendly con jQuery Mobile in modo che il nostro sondaggio possa essere facilmente utilizzato su qualsiasi smartphone compatibile con HTML5. Questo può essere fatto molto facilmente, poiché jQuery Mobile è dotato di modelli CSS predefiniti che sembrano grandi nei browser per dispositivi mobili oltre ad essere una fantastica libreria javascript che aiuta gli sviluppatori a creare esperienze "app-like" per i siti web mobili.

Prima di iniziare, ho incluso un compito di rake bonus all'interno del codice di esempio per questa parte del tutorial che genera alcune domande di esempio. Per eseguirlo, eseguilo semplicemente nella riga di comando all'interno della directory dell'app Rails:

 configurazione rake: sondaggio

L'origine per questa attività si trova in lib / tasks / setup.rake

Inizieremo generando un'azione dimostrativa per il nostro controller di domande in app / controllers / questions_controller.rb.

 def show @question = Question.find (params [: id]) @choices = @ question.choices fine

La nostra azione di spettacolo qui è molto semplice. Stiamo caricando una domanda dal database tramite il suo ID. Stiamo memorizzando le scelte per la domanda in una variabile di istanza per un accesso successivo nella nostra vista. Noterai che dal momento che abbiamo impostato una relazione has_many tra domande e scelte, noi "automagicamente" otteniamo il metodo di convenienza di poter recuperare tutte le scelte per una domanda chiamando "@ question.choices". Per impostazione predefinita, Rails caricherà la nostra vista dal file show.html.erb che creeremo in seguito.

Successivamente, creiamo l'azione di "risposta" all'interno del nostro controller di domande che prenderà la risposta di un utente a una domanda e la memorizzerà nel database.

 def answer @choice = Choice.find (: first,: conditions => : id => params [: id]) @answer = Answer.create (: question_id => @ choice.question_id,: choice_id => @choice .id) se Question.last == @ choice.question render: action => "thankyou" else question = Question.find (: first,: conditions => : position => (@ choice.question.position + 1) ) redirect_to question_path (: id => question.id) end end

Come abbiamo spiegato prima, quando abbiamo creato la tabella per archiviare le risposte, una risposta è semplicemente la combinazione di un ID di domanda e un ID di scelta. Dato che non abbiamo il concetto di utente in questo sistema, stiamo semplicemente andando a memorizzare le risposte e guardare i risultati in massa più tardi. Scopriamolo:

 @choice = Choice.find (: first,: conditions => : id => params [: id]) @answer = Answer.create (: question_id => @ choice.question_id,: choice_id => @ choice.id )

Nel codice sopra, stiamo trovando la scelta nel database dal suo id. Quindi stiamo creando un oggetto risposta che è composto da question_id e l'ID che otteniamo dall'oggetto choice.

 se Question.last == @ choice.question render: action => "thankyou" else question = Question.find (: first,: conditions => : position => (q.position + 1)) redirect_to question_path (: id => question.id) fine

Dopo che un utente risponde a una domanda, abbiamo una decisione che determinerà cosa mostrare all'utente. Se l'utente ha risposto all'ultima domanda che abbiamo memorizzato nel database (che possiamo recuperare con "Question.last"), renderemo la nostra vista "grazie per aver completato il sondaggio". Se non è l'ultima domanda, troveremo la domanda con una "posizione" della posizione della domanda corrente più 1. Quindi reindirizzeremo all'azione show per quella domanda con il metodo helper RESTful rails di question_path. Per maggiori informazioni sulla creazione di controller RESTful rails, fai una ricerca su google per "RESTful Rails 3" e leggi alcuni degli articoli che le persone hanno pubblicato.

Nel mondo RESTful, non esiste un'azione di risposta, quindi dobbiamo aggiungere questo al nostro file config / routes.rb.

Basta sostituire questa linea:

 risorse: domande

con questo:

 risorse: domande per la raccolta: risposta alla fine

Attualmente, se un utente raggiunge l'URL di root del nostro server, verrà visualizzato un errore. Per evitare questo, aggiungeremo questa opzione root anche al nostro file config / routes.rb:

 root: to => "domande # indice"

Questa linea indirizzerà la richiesta dell'URL di root all'azione index del controller della domanda. Anche se non abbiamo definito un'azione di indice reale, per impostazione predefinita Rails caricherà il file index.html.erb come vista. Creeremo questo file in seguito.

Ora che il nostro Rails funziona, in sostanza, inizieremo a creare le viste che faranno uso del framework jQuery Mobile. Inizieremo creando un layout globale per il nostro modello in app / views / layouts / application.html.erb.

         <%= csrf_meta_tag %>   
 <%= yield %> 
  

Nella sezione head, noterai che stiamo caricando 2 file jQuery Mobile specifici dal sito jQuery: 1 file CSS e 1 file JS. Questo va bene per la modalità di sviluppo, ma se dovessimo spingere questo in modalità di produzione, vorremmo portare questi file nella nostra app localmente.

Nella sezione del corpo del nostro modello stiamo creando il nostro DIV di livello superiore che conterrà tutte le funzionalità per il nostro sito mobile:

 
 <%= yield %> 

Ci sono alcune cose da sottolineare in questo DIV. Per prima cosa, useremo uno dei temi jQuery Mobile predefiniti per questo sito. Il tema che abbiamo scelto è chiamato "Tema B." Inserendo l'attributo data-theme = "b" nel nostro DIV di primo livello, assegniamo quell'elemento per ereditare gli stili per il tema B. Per vedere tutte le opzioni di tema predefinite per jQuery Mobile puoi visitare il seguente URL: http : //jquerymobile.com/demos/1.0a4.1/#docs/api/themes.html

Gli elementi di livello superiore di tutte le app jQuery Mobile sono chiamate "pagine". Per definire una pagina, impostiamo l'attributo data-role = "pagina" su un elemento. Nella nostra app, definiremo solo una pagina e quindi caricherete tutte le pagine successive tramite le chiamate Ajax. Tuttavia, se avessimo un sito essenzialmente statico, potremmo definire più elementi di data-role = "pagina" tutto in una volta. Potremmo quindi creare semplici collegamenti che navighino queste "pagine" e facciano transizioni piacevoli tra di loro. La pagina principale quando il browser carica il sito dovrebbe avere uno stato "attivo". In questo caso, dal momento che stiamo visualizzando solo un singolo elemento di pagina, questo non è così importante. Tuttavia, a scopo illustrativo, stiamo assegnando la classe "Ui-page-attiva" per indicare che questo DIV è quello che deve essere visualizzato quando il browser carica il sito.

Il prossimo passo è creare le nostre opinioni. Inizieremo con la nostra vista index.html.erb:

 
 
Sondaggio
 
 
 <%= link_to "Begin Survey", question_path(Question.find(:first)), "data-role"=>"Pulsante" %> 
 
 
Copyright 2011
 

L'anatomia di una pagina jQuery Mobile è piuttosto semplice. Ogni pagina contiene 3 sezioni principali: l'intestazione, il contenuto e il piè di pagina. I file CSS e javascript sono progettati in modo che con un HTML molto semplice, puoi creare un'esperienza dinamica simile a quella nativa all'interno di un sito web mobile. Per la nostra intestazione, semplicemente specificando il Dati-role = "header" attributo, abbiamo creato una bella barra di intestazione con uno sfondo sfumato specifico per tema. Entreremo in più opzioni su questo più tardi.

Nella nostra sezione dei contenuti, abbiamo aggiunto un collegamento HTML standard con il metodo helper di Rails di Collegamento a. Abbiamo aggiunto il data-role = "button" attributo per trasformare quel collegamento ordinario in un pulsante stilizzato. L'URL per il collegamento è un percorso per la prima domanda nel nostro database come definito dal secondo parametro che stiamo passando a Collegamento a metodo.

La parte interessante sull'esecuzione di siti con jQuery Mobile è che tenta di simulare il comportamento dell'app nativa per impostazione predefinita. Invece di reindirizzare il nostro browser a una nuova pagina, come un tipico sito Web, la libreria jQuery Mobile lo convertirà in un collegamento Ajax che estrae il contenuto dal server e lo visualizza all'interno di un elemento "pagina" appena creato. Una volta caricato, viene chiamata una funzione di callback che mostrerà un'animazione di transizione alla nuova pagina. Di default questa nuova pagina "scorrerà" da sinistra. Ancora una volta, jQuery Mobile ha raggiunto questo obiettivo consentendo allo sviluppatore di creare questa esperienza simile a quella nativa senza markup speciali o funzionalità javascript avanzate.

Infine, creeremo un elemento footer di data-role = "footer" per abbracciare la parte inferiore della nostra sezione dei contenuti.

Successivamente, creeremo la nostra vista show.html.erb per visualizzare la nostra domanda di sondaggio all'utente:

 
 
Sondaggio
 
 
 
 
<%= @question.question %>
 
 
 <% @choices.each_with_index do |c, i| %> <% i = i + 1 %> 
 <%= link_to "#i. #c.choice", answer_questions_path(:id => c.id)%> 
 <% end %> 
 
 
 
Copyright 2011
 

Il formato di questa vista è quasi identico, come puoi vedere. All'interno del nostro elemento "contenuto" noterai che abbiamo un tag elenco non ordinato con un ruolo dati di "listview".

Quando un elenco non ordinato è impostato su questo ruolo dati, per impostazione predefinita diventa una sorta di elemento di navigazione con le frecce a destra. Questo è un paradigma piuttosto comune nelle app mobili in quanto può essere utilizzato sia per i menu nidificati che per una sorta di presentazione in cui ogni schermata è una carta diversa in una pila.

All'interno della nostra lista non ordinata noterai che l'elemento elenco ha un attributo tema-tema specificato:

Questo illustra come il motore tematico di jQuery Mobile ci consente di modificare qualsiasi elemento e assegnargli un nuovo tema. In questo caso, il mix tra l'elemento genitore del tema B ma l'elemento-elenco di Theme C sembra davvero buono.

All'interno dell'elemento list stiamo usando il metodo helper di Rails per creare nuovamente un link che risponda efficacemente alla domanda che stiamo visualizzando. È di nuovo interessante notare che non stiamo facendo nessuna chiamata speciale Javascript o Ajax qui con questo link. Per impostazione predefinita, un semplice tag di ancoraggio carica l'URL specificato nell'attributo href in un nuovo elemento "pagina" tramite Ajax e quindi lo visualizza all'utente.

Infine, creeremo una vista che ha un messaggio di ringraziamento una volta che l'utente ha completato il sondaggio. Questo file si trova qui: app / views / questions / thankyou.html.erb.

 
 Casa 
Grazie!
 
 
 
 Grazie per aver risposto al sondaggio! Buona giornata! :) 
 

Questa vista è molto simile alle altre con un'eccezione. Il collegamento all'interno dell'elemento "header" ha un attributo rel = "external" che blocca efficacemente jQuery Mobile dal cambiare il link standard in un caricatore Ajax. Mettendo rel = "esterno" all'interno di un tag di ancoraggio si costringerà il collegamento a comportarsi normalmente e reindirizzare completamente il browser quando si fa clic.

Potresti aver notato negli screenshot che quando un utente risponde a una domanda, viene immediatamente presentata la domanda successiva. Per impostazione predefinita, jQuery Mobile posiziona un pulsante indietro all'interno dell'elemento "header" che abbraccia il lato sinistro dello schermo. jQuery Mobile ha un metodo sofisticato per determinare il percorso o la cronologia di un utente attraverso l'app. Premendo il pulsante Indietro, l'utente torna a una nuova "pagina" nell'app che è stata caricata dinamicamente tramite la chiamata Ajax.

Inserendo questo link all'interno dell'elemento "header", crea un'interruzione di funzionalità interessante. I collegamenti posizionati a sinistra del tag title h1 sostituiranno il pulsante back. Dato che siamo alla fine del sondaggio su questo schermo, non vogliamo che l'utente viaggi di nuovo indietro tra le domande. Questo collegamento home reindirizzerà completamente il browser alla pagina iniziale in modo che l'utente possa rispondere nuovamente alle domande del sondaggio.

Invito tutti a dare un'occhiata al link demo e documentazione sul sito web jQuery Mobile per informazioni sui concetti trattati qui: jQuery Mobile Documentation

E lì ce l'abbiamo! Spero ti sia piaciuta questa serie di tutorial su come realizzare un'applicazione web mobile con Ruby on Rails e jQuery Mobile.