Bienvenido a la parte II de la serie de tutoriales sobre la creación de una aplicación web de cuestionarios o encuestas con jQuery Mobile y Ruby on Rails. En esta parte del tutorial vamos a crear una interfaz web compatible con dispositivos móviles con jQuery Mobile para que nuestra encuesta se pueda realizar fácilmente en cualquier teléfono inteligente compatible con HTML5. Esto se puede hacer muy fácilmente ya que jQuery Mobile viene con plantillas de CSS predefinidas que se ven muy bien en los navegadores móviles, además de ser una gran biblioteca de javascript que ayuda a los desarrolladores a crear experiencias "similares a las aplicaciones" para sitios web móviles.

Antes de comenzar, he incluido una tarea de comisión adicional en el código de muestra para esta parte del tutorial que genera algunas preguntas de muestra. Para ejecutar esto, simplemente ejecute esto en la línea de comando dentro del directorio de la aplicación Rails:

 configuración del rastrillo: encuesta

La fuente de esta tarea se encuentra en lib / tasks / setup.rake

Comenzaremos generando una acción show para nuestro controlador de preguntas en app / controllers / questions_controller.rb.

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

Nuestro show de acción aquí es muy simple. Estamos cargando una pregunta de la base de datos por su ID. Estamos almacenando las opciones para la pregunta en una variable de instancia para un acceso posterior en nuestra vista. Notará que desde que configuramos una relación has_many entre las preguntas y las opciones, "automágicamente" obtenemos el método conveniente de poder recuperar todas las opciones para una pregunta llamando a "@ question.choices". Por defecto, Rails cargará nuestra vista desde el archivo show.html.erb que crearemos más adelante..

A continuación, creamos la acción de "respuesta" dentro de nuestro controlador de preguntas que tomará la respuesta del usuario a una pregunta y la almacenará en la base de datos..

 def answer @choice = Choice.find (: first,: conditions => : id => params [: id]) @answer = Answer.create (: question_id => @ choice.question_id,: choice_id => @choice .id) if 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

Como explicamos antes cuando creamos la tabla para almacenar respuestas, una respuesta es simplemente la combinación del ID de una pregunta y el ID de una opción. Como no tenemos el concepto de usuario en este sistema, simplemente vamos a almacenar las respuestas y observar los resultados. en masa mas tarde. Vamos a descomponerlo:

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

En el código anterior, estamos encontrando la opción en la base de datos por su id. Entonces estamos creando un objeto de respuesta que se compone de question_id y la identificación que obtenemos del objeto de elección.

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

Después de que un usuario responde una pregunta, tenemos una decisión que determinará qué mostrar al usuario. Si el usuario ha respondido la última pregunta que hemos almacenado en la base de datos (que podemos recuperar con "Question.last"), mostraremos nuestra vista de "gracias por completar la encuesta". Si no es la última pregunta, encontraremos la pregunta con una "posición" de la posición de la pregunta actual más 1. Luego, redirigiremos a la acción de mostrar para esa pregunta con el método de ayuda de los rieles RESTful de question_path. Para obtener más información sobre la creación de los controladores de rieles RESTful, realice una búsqueda en Google de "RESTful Rails 3" y lea algunos de los artículos que las personas han publicado..

En el mundo RESTful, no hay tal cosa como una acción de respuesta, así que tenemos que agregar esto a nuestro archivo config / route.rb.

Simplemente reemplace esta línea:

 recursos: preguntas

con este:

 recursos: preguntas que la colección obtiene: respuesta final fin

Actualmente, si un usuario accede a la URL raíz de nuestro servidor, recibirá un error. Para evitar esto, también vamos a agregar esta opción de raíz a nuestro archivo config / route.rb:

 root: to => "questions # index"

Esta línea dirigirá la solicitud de la URL raíz a la acción de índice del controlador de la pregunta. Si bien no hemos definido una acción de índice real, de manera predeterminada, Rails cargará el archivo index.html.erb como la vista. Vamos a crear este archivo más adelante..

Ahora que nuestro trabajo Rails está esencialmente terminado, vamos a comenzar a crear las vistas que harán uso del marco jQuery Mobile. Comenzaremos creando un diseño global para nuestra plantilla en app / views / layouts / application.html.erb.

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

En la sección principal, notará que estamos cargando 2 archivos específicos de jQuery Mobile desde el sitio de jQuery: 1 archivo CSS y 1 archivo JS. Esto está bien para el modo de desarrollo, pero si lo pusiéramos en modo de producción, querríamos llevar estos archivos a nuestra aplicación localmente.

En la sección del cuerpo de nuestra plantilla, estamos creando nuestro DIV de nivel superior que contendrá toda la funcionalidad para nuestro sitio móvil:

 
 <%= yield %> 

Hay algunas cosas que señalar en este DIV. Primero, vamos a utilizar uno de los temas predefinidos de jQuery Mobile para este sitio. El tema que hemos elegido se llama "Tema B". Al colocar el atributo data-theme = "b" en nuestro DIV de nivel superior, estamos asignando ese elemento para heredar los estilos del Tema B. Para ver todas las opciones de tema predeterminadas para jQuery Mobile, puede visitar la siguiente URL: http : //jquerymobile.com/demos/1.0a4.1/#docs/api/themes.html

Los elementos de nivel superior de todas las aplicaciones de jQuery Mobile se denominan "páginas". Para definir una página, establecemos el atributo. data-role = "page" en un elemento. En nuestra aplicación, vamos a definir solo una página y luego cargaremos todas las páginas subsiguientes a través de llamadas Ajax. Sin embargo, si tuviéramos un sitio esencialmente estático, podríamos definir múltiples elementos de data-role = "page" de repente. Luego podríamos crear enlaces simples que navegarían por estas "páginas" y realizarían transiciones atractivas entre ellas. La página principal cuando el navegador carga el sitio debe tener un estado "activo". En este caso, dado que solo estamos mostrando un elemento de una sola página, esto no es tan importante. Sin embargo, para fines ilustrativos estamos asignando la clase. "ui-page-active" para indicar que este DIV es el que debe mostrarse cuando el navegador carga el sitio.

El siguiente paso es crear nuestras vistas. Comenzaremos con nuestra vista index.html.erb:

 
 
Encuesta
 
 
 <%= link_to "Begin Survey", question_path(Question.find(:first)), "data-role"=>"botón"%> 
 
 
Copyright 2011
 

La anatomía de una página de jQuery Mobile es bastante simple. Cada página contiene 3 secciones principales: el encabezado, el contenido y el pie de página. Los archivos CSS y javascript están diseñados para que con un HTML muy simple, pueda crear una experiencia dinámica y nativa dentro de un sitio web móvil. Para nuestro encabezado, simplemente especificando el data-role = "header" Atributo, hemos creado una barra de encabezado de buen aspecto con un fondo degradado que es específico del tema. Entraremos en más opciones sobre esto más adelante..

En nuestra sección de contenido, hemos agregado un enlace HTML estándar con el método de ayuda de Rails de enlace a. Hemos añadido el data-role = "button" atributo para convertir ese enlace ordinario en un botón estilizado. La URL del enlace es una ruta a la primera pregunta en nuestra base de datos definida por el segundo parámetro que estamos pasando a enlace a método.

La parte interesante sobre la creación de sitios con jQuery Mobile es que intenta imitar el comportamiento de las aplicaciones nativas de forma predeterminada. En lugar de este enlace que redirige nuestro navegador a una página nueva, como un sitio web típico, la biblioteca de jQuery Mobile realmente lo convertirá en un enlace Ajax que extraerá contenido del servidor y lo mostrará dentro de un elemento de "página" recién creado. Una vez que se carga, se llama a una función de devolución de llamada que mostrará una animación de transición a la nueva página. Por defecto, esta nueva página se "deslizará" desde la izquierda. Nuevamente, jQuery Mobile ha logrado este objetivo al permitir que el desarrollador cree esta experiencia nativa sin un marcado especial o una funcionalidad avanzada de javascript.

Por último, crearemos un elemento de pie de página. data-role = "pie de página" Abrazar el fondo de nuestra sección de contenido..

A continuación, crearemos nuestra vista show.html.erb para mostrar nuestra pregunta de la encuesta al usuario:

 
 
Encuesta
 
 
 
 
<%= @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
 

El formato de esta vista es casi idéntico, como puede ver. Dentro de nuestro elemento "contenido", notará que tenemos una etiqueta de lista desordenada con un rol de datos de "vista de lista".

Cuando una lista desordenada se establece en este rol de datos, se convierte en un tipo de elemento de navegación con flechas hacia la derecha de forma predeterminada. Este es un paradigma bastante común en las aplicaciones móviles, ya que puede usarse tanto para menús anidados como para una especie de presentación de diapositivas donde cada pantalla es una tarjeta diferente en una pila..

Dentro de nuestra lista desordenada, notará que el elemento de lista tiene un atributo de tema de datos especificado:

Esto ilustra cómo el motor de temática de jQuery Mobile nos permite modificar cualquier elemento y asignarle un nuevo tema. En este caso, la combinación del elemento principal del Tema B pero la lista de elementos del Tema C se ve realmente bien.

Dentro del elemento de la lista, estamos usando el método de ayuda de Rails para crear un enlace nuevamente que responda efectivamente a la pregunta que estamos mostrando. Nuevamente es interesante notar que no estamos haciendo ninguna llamada especial de Javascript o Ajax aquí con este enlace. Por defecto, una etiqueta de anclaje simple cargará la URL especificada en el atributo href en un nuevo elemento de "página" a través de Ajax y luego se la mostrará al usuario.

Por último, vamos a crear una vista que tenga un mensaje de agradecimiento una vez que el usuario haya completado la encuesta. Este archivo se encuentra aquí: app / views / questions / thankyou.html.erb.

 
 Casa 
Gracias!
 
 
 
 Gracias por contestar la encuesta! ¡Tenga un buen día! :) 
 

Esta vista es muy similar a las otras con una excepción. El enlace dentro del elemento "encabezado" tiene un atributo rel = "externo" que efectivamente bloquea a jQuery Mobile para que no cambie el enlace estándar a un cargador Ajax. Poniendo rel = "externo" dentro de una etiqueta de anclaje forzará el enlace a comportarse normalmente y redirigirá completamente el navegador cuando se haga clic.

Es posible que haya notado en las capturas de pantalla que cuando un usuario responde una pregunta, se le presenta la siguiente pregunta inmediatamente. De forma predeterminada, jQuery Mobile coloca un botón Atrás dentro del elemento "encabezado" que abraza el lado izquierdo de la pantalla. jQuery Mobile tiene un método sofisticado para determinar la ruta o el historial de un usuario a través de la aplicación. Al presionar el botón Atrás, el usuario regresará a una nueva "página" en la aplicación que se ha cargado dinámicamente a través de la llamada Ajax.

Al colocar este enlace dentro del elemento "encabezado", se crea una anulación de una característica interesante. Los enlaces que se colocan a la izquierda de la etiqueta del título h1 reemplazarán al botón Atrás. Ya que estamos al final de la encuesta en esta pantalla, no queremos que el usuario vuelva hacia atrás a través de las preguntas. Este enlace de inicio redirigirá completamente el navegador a la página de inicio para que el usuario pueda responder las preguntas de la encuesta nuevamente.

Recomiendo a todos que echen un vistazo a las demostraciones y el enlace de documentación en el sitio web de jQuery Mobile para obtener información sobre los conceptos que se describen aquí: Documentación de jQuery Mobile

¡Y ahí lo tenemos! Espero que hayan disfrutado esta serie de tutoriales sobre cómo hacer una aplicación web móvil con Ruby on Rails y jQuery Mobile.