Добро пожаловать в первую часть серии руководств по созданию приложения для викторин или опросов с помощью jQuery Mobile и Rails. В этой серии статей будет продемонстрировано, как создать совместимое с мобильными устройствами веб-приложение, которое позволит пользователям отвечать на ряд вопросов в стиле мастера.
jQuery Mobile содержит несколько полезных функций, которые позволяют использовать наше веб-приложение на различных мобильных устройствах. В большинстве случаев достаточно базового шаблона и CSS-тем, которые поставляются с jQuery Mobile. Однако, поскольку все шаблоны сделаны в CSS, мы можем довольно легко настроить внешний вид нашего сайта.
jQueryMobile является идеальным выбором фреймворка при создании мобильного веб-приложения по многим причинам, включая:
1) Поскольку фреймворк построен на jQuery, существует небольшая кривая обучения для всех, кто использовал jQuery в Интернете.
2) В настоящее время он совместим со многими основными платформами, включая: iOS, Android, Blackberry, Palm WebOS, Nokia / Symbian, Windows Mobile и т. Д.
3) Сжатый размер включенных библиотек составляет приблизительно 12 КБ, что очень мало для предлагаемых возможностей.
Для бэкэнда мы будем использовать Rails 3 с несколькими драгоценными камнями, включая Typus.
Для начала давайте создадим новое приложение rails:
|
1
|
rails new .
|
Убедитесь, что у вас установлена последняя версия самоцвета rails. Если у вас есть какие-либо приложения, которые вы разрабатываете, для которых требуется Rails 2, я предлагаю вам изучить и установить RVM (Ruby Version Manager). Это избавит вас от многих головных болей, которые могут быть вызваны проблемами с версионированием гемов.
Далее, давайте добавим наши драгоценные камни в наш Gemfile:
|
1
2
3
4
5
6
7
8
9
|
source ‘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’
gem ‘acts_as_list’
|
Как видите, мы будем использовать Rails 3.0.7, так как это последняя стабильная версия Rails на момент написания этой статьи. Мы также переопределим стандартные библиотеки JS Prototype, поставляемые с Rails, установив гем jquery-rails. Поскольку jQueryMobile, очевидно, потребует базовую библиотеку jQuery, у нас действительно нет никаких причин хранить включенные библиотеки Prototype.
Для нашего административного раздела мы установим гем Typus и acts_as_list. Благодаря небольшому количеству настроек Typus предоставит полный бэкэнд для управления вопросами, которые мы создадим для нашего опроса. Действует как список работает без проблем с Typus и позволит нам легко контролировать порядок наших вопросов.
Теперь мы можем запустить упаковщик для установки наших гемов:
|
1
|
bundle install
|
Как в геме jQuery, так и в геме Typus есть генераторы, которые работают, по сути, для самоцветов. Это достигается путем запуска следующих команд в каталоге приложения:
|
1
2
|
rails generate jquery:install
rails generate typus
|
По умолчанию Typus поставляется без каких-либо аутентификационных шлюзов. Поскольку это почти как прямой доступ к базе данных, мы должны обеспечить ее в качестве первого шага. Самым простым способом обеспечения безопасности будет добавление базовой http-аутентификации. Это, очевидно, не является сверхбезопасным, но для целей нашего руководства этого будет достаточно. Для этого нам нужно добавить следующие строки в файл config / initializers / typus.rb:
|
1
2
3
4
|
config.admin_title = «survey»
config.authentication = :http_basic
config.username = «admin»
config.password = «pass»
|
Это побудит пользователя ввести имя пользователя и пароль при доступе к URL-адресу / admin.
Теперь, когда наше приложение полностью настроено, мы можем начать генерировать наши ресурсы и схему базы данных. Мы можем использовать сокращенный метод Rails, чтобы сделать это прямо из командной строки:
|
1
2
3
4
5
6
7
|
rails generate resource question question:string position:integer
rails generate resource choice choice:string question_id:integer
rails generate resource answer question_id:integer choice_id:integer
rake db:migrate
|
Теперь у нас есть 3 таблицы в нашей базе данных. Один будет содержать вопросы, которые мы собираемся задать пользователю. У каждого вопроса будет много вариантов, и ответом будет запись, содержащая комбинацию идентификаторов для вопроса и выбора. Поскольку у вариантов будет только один вопрос, поле question_id в таблице ответов на самом деле не обязательно. Мы собираемся поместить его здесь в качестве удобного инструмента для упрощения запросов, таких как получение количества ответов на вопрос. Поле позиции в таблице вопросов позволит нам указать порядок вопросов, которые будут отображаться в нашем опросе.
Чтобы добавить эти отношения в наши модели, мы изменим их следующим образом:
/app/models/question.rb
|
1
2
3
4
|
class Question < ActiveRecord::Base
acts_as_list
has_many :choices
end
|
Как вы можете видеть выше, мы добавляем плагин act_as_list к этой модели, чтобы мы могли изменять порядок появления для каждого вопроса в нашем опросе.
/app/models/choice.rb
|
1
2
3
|
class Choice < ActiveRecord::Base
belongs_to :question
end
|
/app/models/answer.rb
|
1
2
3
4
|
class Answer < ActiveRecord::Base
belongs_to :question
belongs_to :choice
end
|
Выполнено! Теперь, когда наши ресурсы и таблицы базы данных созданы, нам нужно создать пространство имен некоторых контроллеров в папке администратора для Typus. Для этого мы запускаем следующие команды:
|
1
2
3
|
rails generate controller admin/answers
rails generate controller admin/choices
rails generate controller admin/questions
|
Затем нам нужно изменить первые строки в каждом из наших файлов контроллера, чтобы контроллер наследовал от ResourcesController вместо нашего базового ApplicationController. В Typus, как только мы наследуем ресурсы от ResourcesController, мы получаем некоторые мощные функции CRUD из коробки без необходимости писать какой-либо дополнительный код. Ниже приведены необходимые замены:
/app/controllers/admin/answers_controller.rb
заменить:
|
1
|
class Admin::AnswersController < ApplicationController
|
с:
|
1
|
class Admin::AnswersController < Admin::ResourcesController
|
/app/controllers/admin/choices_controller.rb
заменить:
|
1
|
class Admin::ChoicesController < ApplicationController
|
с:
|
1
|
class Admin::ChoicesController < Admin::ResourcesController
|
/app/controllers/admin/questions_controller.rb
заменить:
|
1
|
class Admin::QuestionsController < ApplicationController
|
с:
|
1
|
class Admin::QuestionsController < Admin::ResourcesController
|
Почти готово! Теперь нам нужно добавить несколько операторов конфигурации в наш файл конфигурации Typus. Если в каталоге config / typus есть другие файлы yaml, мы можем их удалить, поскольку они не нужны. Типус, вероятно, создал образцы файлов конфигурации, когда мы запустили наш оператор генератора. Давайте создадим файл с именем typus.yml, расположенный здесь: config / typus
Сначала добавим операторы конфигурации для модели Choice:
Выбор: поля: по умолчанию: выбор, вопрос_ид, вопрос форма: выбор, вопрос_ид, вопрос Сортировать по: отношения: вопрос фильтры: созданные_ат, вопрос поиск: применение: опрос Вопрос: поля: по умолчанию: вопрос, позиция форма: вопрос order_by: позиция отношения: выбор фильтры: созданный поиск: вопрос применение: опрос
Давайте разберем это:
Выбор: поля: по умолчанию: выбор, вопрос_ид, вопрос форма: выбор, вопрос_ид, вопрос
Всего за несколько строк конфигурации Typus создаст для нас множество базовых функций. Для начала мы укажем поля, которые нам разрешено редактировать. Раздел по умолчанию определения полей позволит нам указать, какие поля будут отображаться в нашем списке. В этом случае это тот же набор полей, который мы позволим нашему администратору устанавливать в наших формах создания и обновления. Это указано в разделе формы определения полей.
Сортировать по:
По умолчанию наш выбор будет упорядочен в порядке их создания, поэтому нам не нужно ничего указывать для order_by.
отношения: вопрос
Каждый выбор относится к одному вопросу, поэтому мы можем определить отношение вопроса к нашей модели выбора. Typus автоматически разработает наши формы, чтобы учесть, как записи данных связаны друг с другом.
фильтры: созданные_ат, вопрос
Фильтры могут быть определены в typus просто путем перечисления полей и / или отношений в определении фильтров. В зависимости от типа поля typus создаст функциональность фильтра в бэкэнде. В случае create_at это будет набор раскрывающихся списков для указания даты. На вопрос, это будет выпадающий список всех вопросов, хранящихся в базе данных.
поиск: применение: опрос
Определение поиска бесполезно для этой модели, так как мы вряд ли будем искать какие-либо варианты. Если бы мы указали здесь поля, typus предоставил бы нам окно поиска, чтобы мы могли фильтровать записи, хранящиеся в нашей БД, по поисковому запросу. Определение приложения здесь — это название приложения, под которым наши модели мы называем «опрос».
В качестве последнего шага очистки давайте удалим файл public / index.html, который будет блокировать наш маршрут по умолчанию.
Теперь мы можем запустить наш сервер:
|
1
|
rails s
|
Посетите следующий URL в вашем браузере, чтобы проверить нашего недавно созданного администратора:
HTTP: // локальный: 3000 / администратор
В следующий раз. , ,
На этом мы завершаем первую часть нашей серии учебных пособий по созданию приложения для опроса или опроса в Rails и jQueryMobile. Оставайтесь с нами во второй части, где мы реализуем наш интерфейс jQueryMobile.