Rating is a great way to get feedback from the user. Generally, the 5-Star rating system used to get feedback. The Five-Star Quality Rating System was developed as an easy-to-understand rating system for users.
In SUSI iOS we are using the Star Rating field to get feedback of SUSI skills. We enable the user to rate the skills from one to five star. In the rating submission, we get the number of stars user picked.
The stars help show if you would recommend the skill to others. The values start at 1 (being the lowest) and go to 5 (being the highest), as seen below –
Server-Side Implementation –
fiveStarRatings
API is using to submit users rating. Whenever the user taps the star fiveStarRatings
being called:
func submitRating(_ params: [String: AnyObject], _ completion: @escaping(_ updatedRatings: Ratings?, _ success: Bool, _ error: String?) -> Void) { let url = getApiUrl(UserDefaults.standard.object(forKey: ControllerConstants.UserDefaultsKeys.ipAddress) as! String, Methods.fiveStarRateSkill) _ = makeRequest(url, .get, [:], parameters: params, completion: { (results, message) in // handle request .... }) }
The following params we send in the request:
- Model
- Group
- Language
- Skill
- Stars
- Access Token
After successfully rating submission we get updated ratings for each star of the particular skill. The following response we get from the server after successfully submitted rating:
{ "ratings": { "one_star": 0, "four_star": 1, "five_star": 0, "total_star": 1, "three_star": 0, "avg_star": 4, "two_star": 0 }, "session": {"identity": { "type": "email", "name": "abc@a.com", "anonymous": false }}, "accepted": true, "message": "Skill ratings updated" }
We use ratings
object from fiveStarRatings
API to update the ratings displayed on charts and labels and also, we use ratings object to update Skill model which we passed from SkillListingController to SkillDetailController so the user can see updated rating chart when clicking back to skill.
func updateSkill(with ratings: Ratings) {..}
If the user already submitted ratings for a skill, we are using getRatingByUser
API with same params as in fiveStarRatings
except ratings to get already submitted user rating and we display that ratings as initial ratings in UI.
Implementation of Submit Rating UI –
RatingView
is behind the submit rating UI. FloatRatingViewDelegate
protocol is implemented to get ratings is updating or get updated.
@objc public protocol FloatRatingViewDelegate { /// Returns the rating value when touch events end @objc optional func floatRatingView(_ ratingView: RatingView, didUpdate rating: Double) /// Returns the rating value as the user pans @objc optional func floatRatingView(_ ratingView: RatingView, isUpdating rating: Double) }
Rating updated on rating display chart:
Now see, how we handle the case when Skill is not rated before and the user first time rate the skill.
There is a label that shows the “Skill not rated yet” when a skill is not rated. When the user rates the skill, the label is hidden and chart bar and the label is shown.
if self.ratingsBackViewHeightConstraint.constant == 0 { self.ratingsBackViewHeightConstraint.constant = 128.0 self.contentType.topAnchor.constraint(equalTo: self.ratingBackView.bottomAnchor, constant: 16).isActive = true self.ratingsBackStackView.isHidden = false self.topAvgRatingStackView.isHidden = false self.notRatedLabel.isHidden = true }
Resources –
- Swift Protocol: https://docs.swift.org/swift-book/LanguageGuide/Protocols.html
- SUSI Skills: https://skills.susi.ai/
- SUSI Server Link: https://github.com/fossasia/susi_server
- SUSI iOS Link: https://github.com/fossasia/susi_iOS