В этом руководстве рассказывается, как добавить функцию оценки в приложение Rails. В нем будут рассмотрены некоторые из наиболее популярных гемов Ruby, которые предоставляют такую функциональность, а также способы реализации рейтинга с нуля. Мы будем использовать то же приложение, которое использовалось в статье «Интернет-магазин» Карима Эль Хуссени , в которой подробно описан основной процесс создания приложения. Пожалуйста, обратитесь к этому посту, чтобы узнать, как Карим строил леса и разрабатывал базовое приложение.
Вот форк репозитория, который мы будем использовать для нашего приложения.
цели
Как видно из репозитория, это интернет-магазин фильмов. Нам нужно добавить функциональность рейтинга к каждому фильму. Каждый пользователь сможет дать оценку доступным фильмам. Затем каждый фильм будет иметь оценку, рассчитанную на основе всего пользовательского рейтинга, во многом как то, что делает IMDB .
Основные характеристики
- Рейтинг фильмов: рейтинг доступных магазинов фильмов. (Требуется логин)
- Показать рейтинг пользователя: Каждый пользователь может посетить свою панель инструментов и посмотреть фильмы, которые он оценил. Рейтинги могут быть изменены в любое время.
- Смена номеров звездочек. Значения звездочек можно установить в соответствии с характером приложения.
- Показывать счет в цифрах Оценочный рейтинг также можно рассматривать как цифры рядом со звездами.
- Общая средняя оценка фильма : у каждого фильма есть оценка, основанная на всех пользовательских оценках. Этот показатель рассчитывается по всем параметрам фильма, то есть визуальным эффектам, привычному дизайну и т. Д.
- Возможность отключения рейтинга Рейтинг можно отключить после первой оценки и перевести в режим только для чтения.
- Настраиваемые значки Значки звездочки и отмены можно изменить.
- Отмена рейтинга: пользователь может отменить оценку, присвоенную любому фильму, в любое время.
Необходимые навыки
- Опыт работы с Ruby on Rails.
- Базовые знания HTML / CSS3.
- Понимание концепции адаптивных CSS-фреймворков.
инструменты
- Ruby
(2.1.0)— язык программирования - Rails
(4.1.1)— Внутренний каркас - Foundation 5 — интерфейсный CSS-фреймворк
- Ratyrate — рубиновый камень
- Devise — аутентификация пользователя
Ratyrate Gem
Ratyrate — это Ruby-гем, заключающий в себе функциональность плагина Raty jQuery. Также добавлено несколько помощников в стиле рейтинга IMDB. Я раздобыл его из драгоценного камня под названием Letsrate из-за бездействия Letsrate. У Ratyrate есть несколько потрясающих, новых функций, так что вы можете его отметить 🙂
Шаг 1: Установка драгоценного камня Ratyrate
Чтобы установить этот Ruby gem, просто Gemfile его в свой Gemfile следующим образом:
gem 'ratyrate'
В терминале запускаем:
bundle install
Возможно, вы захотите посмотреть репозиторий и использовать разрабатываемую версию Ratyrate, потому что я все время добавляю новые функции. Чтобы использовать гем разработки, добавьте в свой Gemfile следующее :
gem 'ratyrate', :github => 'wazery/ratyrate', :branch => 'development'
Шаг 2: Подготовка заявки
Я предполагаю, что вы уже клонировали репозиторий в видеомагазине и находитесь в его каталоге. Если вы не знаете, как это сделать, вот команды:
$ git clone '[email protected]:wazery/moviestore.git' $ cd moviestore
Теперь вам нужно запустить генератор gem, чтобы скопировать необходимые ресурсы и файлы (файлы плагинов jQuery Raty, значки звездочек и файлы JavaScript) в их правильные местоположения в приложении Rails. В терминале запускаем:
$ rails g ratyrate User
Как видите, эта команда принимает один аргумент: имя вашей существующей пользовательской модели Devise. Это необходимо для привязки данных пользователя и рейтинга.
Выходные файлы:
create app/assets/javascripts/jquery.raty.js create app/assets/images/star-on.png create app/assets/images/star-off.png create app/assets/images/star-half.png identical app/assets/images/mid-star.png identical app/assets/images/big-star.png create app/assets/images/cancel-on.png create app/assets/images/cancel-off.png create app/assets/javascripts/ratyrate.js.erb create app/controllers/rater_controller.rb create app/models/rate.rb create app/models/rating_cache.rb create app/models/average_cache.rb identical app/models/overall_average.rb route post '/rate' => 'rater#create', :as => 'rate' create db/migrate/20140814135421_create_rating_caches.rb identical db/migrate/20140706144643_create_rates.rb create db/migrate/20140814135422_create_average_caches.rb create db/migrate/20140814135423_create_overall_averages.rb
Запустите миграции, созданные с помощью этого генератора, которые создадут необходимые таблицы для оценки функциональности. Чтобы запустить миграцию:
$ rake db:migrate
пример
Предположим, у вас есть пользовательская модель Devise с именем User . Затем генератор Devise и генератор ratirate выглядят так:
$ rails g devise:install $ rails g devise user $ rails g ratyrate user # => user is the model generated by devise
Этот генератор создаст модели Rate и RatingCache связанные с вашей моделью User . В нашем случае, однако, вам не нужно запускать генераторы Devise, так как репозиторий в видеомагазине уже сделал это.
Шаг 3: добавление ратирующих ассоциаций
Откройте модель Movie или любую другую модель, к которой вы хотите добавить возможности ролей, и добавьте следующую строку:
ratyrate_rateable 'visual_effects', 'original_score', 'director', 'custome_design'
Это добавляет некоторые измерения, которые пользователь может оценить. Здесь мы добавили четыре измерения. Эта строка также создает необходимые ассоциации.
Вам также необходимо определить модель, которая будет выполнять актуальную оценку. Для нашего приложения MovieStore это модель User , поэтому добавьте в нее следующую строку:
ratyrate_rater
Это также добавляет требуемую связь к модели User .
Шаг 4: Использование помощника Ratyrate в представлениях
Откройте представление «show» фильмов, которое вы можете найти в app / views / movies / show.html.erb
<div class="row"> <div class="small-2 large-2 columns"> <%= imdb_style_rating_for @movie, current_user%> </div> <br> <div class="small-2 large-4 columns"> <% if current_user %> Visual Effects: <%= rating_for @movie, "visual_effects" %> <br> Original Score: <%= rating_for @movie, "original_score" %> <br> Director: <%= rating_for @movie, "original_score" %> <br> Custome Design: <%= rating_for @movie, "custome_design" %> <% end %> </div> </div>
Представление использует предоставленный помощник rating_for чтобы показать оценку для каждого указанного измерения.
Шаг 5: ** Изучите рейтинг_ для параметров
Вот как это выглядит в настоящее время:
Как видите, пользователь может отменить рейтинг. Эта функция может быть отключена, как мы узнаем позже.
Звезды
Количество звезд можно изменить, просто используя опцию звезд :
Visual Effects: <%= rating_for @movie, "visual_effects", stars: 10 %>
Отключить / Включить рейтинг
По умолчанию, после того, как пользователь предоставил рейтинг, звезды отключены. Однако есть возможность оставить его включенным, чтобы пользователь мог изменить рейтинг. Эта опция отключена после оценки , которая по умолчанию имеет значение true . Установите значение false следующим образом:
Visual Effects: <%= rating_for @movie, "visual_effects", disable_after_rate: false %>
Теперь звезды не будут отключены после первого рейтинга пользователя.
Половина Звезд
Когда существует несколько рейтингов, вполне вероятно, что средний балл будет иметь пол-звезды и, таким образом, будет выделен наполовину. Это поведение по умолчанию, но если вы хотите отключить половину звезд, используйте параметр half_show :
Visual Effects: <%= rating_for @movie, "visual_effects", half_show: false %>
Рейтинг с большей точностью
Есть полезная опция, в которой пользователь может оценивать, используя половинные значения, которая по умолчанию отключена. Чтобы включить его, просто используйте эту опцию:
Visual Effects: <%= rating_for @movie, "visual_effects", enable_half: true %>
Настройка значков звездочек
Одним из наиболее полезных параметров в этом помощнике является настройка значков звездочек. Предоставленные значки включают в себя:
- Отключенные звезды (star_off)
- Включенные звезды
- Половина звезд
- Кнопка отмены в выключенном состоянии
- Кнопка отмены в нажатом состоянии
Вы можете настроить каждый значок, используя его конкретную опцию, или просто изменить путь к другим значкам с таким же именем.
Вот как можно изменить путь:
Visual Effects: <%= rating_for @movie, "visual_effects", path: 'star_icons' %>
А вот как изменить каждую иконку отдельно:
- star_on
- star_off
- star_half
- cancel_on
- cancel_off
Изменение положения кнопки отмены
Кнопка Отмена отображается слева по умолчанию. Вы можете изменить это право, если хотите:
Visual Effects: <%= rating_for @movie, "visual_effects", cancel_place: 'right' %>
Добавление подсказки для кнопки отмены
Существует возможность добавить пользовательскую подсказку к кнопке отмены. По умолчанию сообщение «Отменить текущий рейтинг!»:
Visual Effects: <%= rating_for @movie, "visual_effects", cancel_hint: 'Cancel this vote!' %>
Пространство между звездами
Вы можете легко включить / выключить расстояние между звездами:
Visual Effects: <%= rating_for @movie, "visual_effects", space: true %>
Это ложь по умолчанию.
Получение среднего балла
Одна из новых опций, которые я добавил в этот драгоценный камень, — это среднее значение стиля IMDB. Это немного сложно включить, так как вам нужно включить две опции ( disable_after_rate и imdb_avg ):
Original Score: <%= rating_for @movie, "original_score", disable_after_rate: true, imdb_avg: true %>
Звезды изменятся, чтобы отобразить среднюю оценку рейтинга, используя звездочки стиля IMDB после обновления страницы.
Отображение подсказки
Вы можете отображать подсказки с оценками (плохие, плохие, обычные, великолепные) или подсказку отмены в пользовательском div вместо отображения их во всплывающих подсказках:
Original Score: <%= rating_for @movie, "original_score", target: '#hintDiv' %> <div id="hintDiv"></div>
Как видите, «hintDiv» выбирается по его идентификатору. Он не ограничивается только div , так как вы можете установить цель для текстовых полей, текстовых областей или блоков выбора.
Добавить текст к подсказке
Вы можете установить заполнитель текста для целевого div (пользовательский div, который вы выбрали):
Original Score: <%= rating_for @movie, "original_score", target: '#hintDiv', targetText: 'Some text goes here!' %>
Изменение типа целевого текста
Вы можете отобразить некоторые подсказки (плохие, плохие и т. Д.) Или просто цифры счета. Чтобы изменить это, у вас есть два варианта:
По умолчанию это «подсказка» :
Original Score: <%= rating_for @movie, "original_score", target: "#hintDiv", targetType: "hint" %>
И значения баллов:
Original Score: <%= rating_for @movie, "original_score", target: "#hintDiv", targetType: "score" %>
Изменение формата целевого текста
Что если вы хотите отобразить подсказки или значения баллов в произвольном формате, например «Оценка: 5» или «Оценка: хорошо»? Это очень просто, просто посмотрите на эти два примера:
Original Score: <%= rating_for @movie, "original_score", target: "#hintDiv", targetFormat: "Score: {score}" %>
Original Score: <%= rating_for @movie, "original_score", target: "#hintDiv", targetFormat: "Rating: {hint}" %>
Рейтинг пользователя Helper
Было бы неплохо увидеть рейтинг оценки текущего пользователя, чтобы его можно было изменить. Для этой цели есть помощник с именем rating . Он принимает оцениваемый объект ( объект фильма в нашем случае приложения), текущий вошедший в систему пользователь (предоставленный Devise), измерение, для которого предназначен рейтинг, и параметры . Если текущий пользователь еще не предоставил оценку, он будет отображать одну звездочку. Например, если оценка присвоена 2, на ней отображаются две звезды, которые можно изменить на одну, то есть пользователь не может повысить данную оценку.
Вот как это использовать:
Visual Effects: <%= rating_for_user @movie, current_user, "visual_effects" %>
IMDB Стиль Рейтинг Помощник
Еще один полезный помощник — это общий средний балл по всем параметрам, как и IMDB. Этот помощник довольно прост в использовании, просто передайте оцениваемый объект (который является фильмом в нашем приложении) и текущий зарегистрированный пользователь:
<%= imdb_style_rating_for @movie, current_user %>
Резюме
В этом руководстве драгоценный камень Ratyrate добавил функцию оценки фильмов в приложение MovieStore. Мы подробно рассмотрели, как использовать камень Ratyrate , а также доступные в нем помощники и опции. Я надеюсь, что этот урок высоко ценит вас сегодня!