Share
Bienvenido a la parte I de la serie de tutoriales sobre la creación de una aplicación de cuestionario o encuesta con jQuery Mobile y Rails. Esta serie demostrará cómo construir una aplicación web compatible con dispositivos móviles que permitirá a los usuarios responder a una serie de preguntas de manera similar a un asistente.
jQuery Mobile contiene varias funciones útiles y listas para usar para poder utilizar nuestra aplicación web en una variedad de dispositivos móviles. En la mayoría de los casos, la plantilla básica y los temas de CSS que vienen con jQuery Mobile serán suficientes. Sin embargo, dado que todas las plantillas se realizan en CSS, podemos personalizar la apariencia de nuestro sitio con bastante facilidad..
jQueryMobile es una opción de marco ideal cuando se crea una aplicación web móvil por muchas razones, que incluyen:
1) Dado que el marco se basa en jQuery, existe una pequeña curva de aprendizaje para cualquiera que haya usado jQuery en la web..
2) Actualmente es compatible con muchas plataformas importantes, incluyendo: iOS, Android, Blackberry, Palm WebOS, Nokia / Symbian, Windows Mobile, etc..
3) El tamaño comprimido de las bibliotecas incluidas es de aproximadamente 12k, que es muy ligero para las capacidades ofrecidas.
Para el backend, usaremos Rails 3 con algunas gemas, incluyendo Typus.
Para empezar, vamos a crear una nueva aplicación de rieles:
rieles nuevos .
Asegúrate de tener instalada la última versión de la gema Rails. Si tiene alguna aplicación que esté desarrollando que requiera Rails 2, le sugiero que investigue e instale RVM (Ruby Version Manager). Esto le ahorrará muchos dolores de cabeza que pueden ser causados por problemas con la versión de gemas..
A continuación, vamos a agregar nuestras gemas a nuestro Gemfile:
source 'http://rubygems.org' gem 'rails', '3.0.7' gem 'sqlite3-ruby',: require => 'sqlite3' gem 'jquery-rails' # Admin gema 'typus',: git = > 'http://github.com/fesplugas/typus.git' gem 'act_as_list'
Como puede ver, usaremos Rails 3.0.7 ya que es la última versión estable de Rails a partir de este escrito. También anularemos las bibliotecas predeterminadas de Prototype JS que vienen con Rails al instalar la gema jquery-rails. Como jQueryMobile obviamente requerirá la biblioteca base de jQuery, entonces realmente no tenemos ninguna razón para mantener las bibliotecas Prototype incluidas alrededor.
Para nuestra sección de administración, instalaremos las gemas Typus y act_as_list. Con solo una pequeña cantidad de configuración, Typus proporcionará un backend completo para administrar las preguntas que crearemos para nuestra encuesta. La lista de funciones funciona perfectamente con Typus y nos permitirá controlar fácilmente el orden de nuestras preguntas..
Ahora podemos ejecutar el bundler para instalar nuestras gemas:
instalación de paquete
Tanto la gema jQuery como la gema Typus tienen generadores que funcionan para hacer que las gemas se instalen. Esto se logra ejecutando los siguientes comandos en el directorio de la aplicación:
rieles generan jQuery: instalar rieles generar typus
Por defecto, Typus viene sin ningún tipo de puerta de autenticación. Ya que esto es casi como un acceso directo a la base de datos, deberíamos asegurarla como un primer paso. El método más simple para asegurarla será agregar autenticación http básica. Esto obviamente no es muy seguro, pero para los propósitos de nuestro tutorial será suficiente. Para hacer esto, necesitamos agregar las siguientes líneas al archivo config / initializers / typus.rb:
config.admin_title = "survey" config.authentication =: http_basic config.username = "admin" config.password = "pass"
Esto le pedirá al usuario que ingrese un nombre de usuario y contraseña cuando se acceda a la URL de / admin.
Ahora que nuestra aplicación está completamente configurada, podemos comenzar a generar nuestros recursos y nuestro esquema de base de datos. Podemos usar el método abreviado de Rails para hacer esto directamente desde la línea de comandos con lo siguiente:
rieles generan pregunta de recursos pregunta: posición de la cadena: rieles enteros generan elección de recursos opción: cadena question_id: enteros rieles generan respuesta de recursos question_id: integer choice_id: integer rake db: migrate
Ahora tenemos 3 tablas en nuestra base de datos. Uno albergará las preguntas que vamos a hacerle al usuario. Cada pregunta tendrá muchas opciones, y una respuesta será un registro que almacena la combinación de IES para una pregunta y una opción. Como las opciones solo tendrán una pregunta, el campo question_id en la tabla de respuestas no es realmente necesario. Lo pondremos aquí como un elemento de acceso fácil para simplificar las consultas, como por ejemplo, obtener el número de respuestas para una pregunta. El campo de posición en la tabla de preguntas nos permitirá especificar el orden de las preguntas tal como aparecerán en nuestra encuesta.
Para agregar estas relaciones a nuestros modelos, los modificaremos de la siguiente manera:
/app/models/question.rb
Pregunta de clase < ActiveRecord::Base acts_as_list has_many :choices end
Como puede ver arriba, estamos agregando el complemento act_as_list a este modelo para que podamos modificar el orden de aparición de cada pregunta en nuestra encuesta..
/app/models/choice.rb
elección de clase < ActiveRecord::Base belongs_to :question end
/app/models/answer.rb
Respuesta de clase < ActiveRecord::Base belongs_to :question belongs_to :choice end
¡Hecho! Ahora que nuestros recursos y tablas de bases de datos se han generado, necesitamos crear algunos controladores con espacio de nombre en una carpeta de administración para Typus. Para ello ejecutamos los siguientes comandos:
rieles generan controlador admin / respuestas rieles generan controlador admin / opciones rieles generan controlador admin / preguntas
A continuación, debemos cambiar las primeras líneas en cada uno de nuestros archivos de controlador para que el controlador se herede de ResourcesController en lugar de nuestro ApplicationController base. En Typus, una vez que heredamos de ResourcesController, obtenemos una potente funcionalidad de CRUD fuera de la caja sin tener que escribir ningún otro código. A continuación se presentan los reemplazos necesarios:
/app/controllers/admin/answers_controller.rb
reemplazar:
clase Admin :: AnswersController < ApplicationController
con:
clase Admin :: AnswersController < Admin::ResourcesController
/app/controllers/admin/choices_controller.rb
reemplazar:
clase Admin :: ChoicesController < ApplicationController
con:
clase Admin :: ChoicesController < Admin::ResourcesController
/app/controllers/admin/questions_controller.rb
reemplazar:
clase Admin :: QuestionsController < ApplicationController
con:
clase Admin :: QuestionsController < Admin::ResourcesController
¡Casi allí! Ahora necesitamos agregar algunas declaraciones de configuración a nuestro archivo de configuración de Typus. Si hay otros archivos yaml ubicados en el directorio config / typus, podemos eliminarlos porque no son necesarios. Typus probablemente creó archivos de configuración de muestra cuando ejecutamos nuestra declaración del generador. Vamos a crear un archivo llamado typus.yml ubicado aquí: config / typus
Primero, agregaremos las declaraciones de configuración para el modelo de elección:
Elección: campos: predeterminado: elección, pregunta_id, formulario de pregunta: elección, pregunta_id, orden de pregunta: relaciones: pregunta filtros: created_at, búsqueda de pregunta: aplicación: encuesta Pregunta: campos: predeterminado: pregunta, forma de posición: orden de pregunta: relaciones de posición: Filtros de opciones: created_at search: question application: survey
Vamos a desglosar esto:
Elección: campos: por defecto: elección, question_id, formulario de pregunta: elección, question_id, pregunta
En solo unas pocas líneas de configuración, Typus creará una gran cantidad de funciones de back-end para nosotros. Para empezar, especificaremos los campos que podemos editar. La sección predeterminada de la definición de los campos nos permitirá establecer qué campos se mostrarán en nuestra lista. En este caso, es el mismo conjunto de campos que permitiremos que nuestro administrador establezca en nuestros formularios de creación y actualización. Esto se especifica en la sección de formulario de la definición de campos..
order_by:
Por defecto, nuestras elecciones se ordenarán en el orden en que se crean, por lo que no necesitamos especificar nada para order_by.
relaciones: pregunta
Cada elección pertenece a una pregunta, por lo que podemos definir una relación de pregunta con nuestro modelo de elección. Typus diseñará automáticamente nuestros formularios para tener en cuenta cómo los registros de datos se relacionan entre sí..
filtros: created_at, question
Los filtros se pueden definir en typus simplemente listando campos y / o relaciones en la definición de los filtros. Según el tipo de campo, typus creará una funcionalidad de filtro en el backend. En el caso de created_at, este será un conjunto de menús desplegables para especificar una fecha. Para preguntas, este será un menú desplegable de todas las preguntas almacenadas en la base de datos.
búsqueda: aplicación: encuesta
La definición de búsqueda no nos sirve para este modelo, ya que probablemente no buscaremos ninguna opción. Sin embargo, si hubiéramos especificado los campos aquí, typus nos proporcionaría un cuadro de búsqueda para que pudiéramos filtrar los registros almacenados en nuestra base de datos por un término de búsqueda. La definición de aplicación aquí es el nombre de la aplicación en la que se encuentran nuestros modelos, bajo el cual llamamos "encuesta".
Como paso final de limpieza, eliminemos el archivo public / index.html que bloqueará nuestra ruta predeterminada.
Ahora podemos iniciar nuestro servidor:
rieles
Visite la siguiente URL en su navegador para probar nuestro nuevo administrador creado:
http: // localhost: 3000 / admin
Con esto concluye la parte I de nuestra serie de tutoriales sobre cómo crear una aplicación de cuestionarios o encuestas en Rails y jQueryMobile. Manténgase atento a la Parte II, donde implementaremos nuestra interfaz de jQueryMobile..
Accentsconagua