ratings | blog.fossasia.org

Post feedback for SUSI Skills in SUSI.AI Android App

Post author:Arundhati Gupta
Post published:August 19, 2018
Post category:Android FOSSASIA GSoC SUSI.AI
Post comments:0 Comments

Feedback from users is one of the most important aspect of software development. This helps developers collect data about the bugs that need to be fixed and the improvements that need to be done in a software. This also provides them with an insight into what needs to be done for the long term sustainability of the app.

SUSI.AI Android, web and iOS clients allow user to rate the SUSI Skills allow the user to post feedback about a skill. Users can send their invaluable feedback about how helpful a skill is for them and how could it be improved. This blog focuses on the implementation of the feature to post feedback from the SUSI.AI Android client.

Steps to post feedback

Log into the app. You will see the Chat Activity once you are logged into the app.
Tap the FAB on the upper right corner of the Chat Activity.
You will see the list of all skills.
Tap on any skill of your choice.
Write feedback about SUSI skill

Click on POST button to post the skill feedback. A toast, with the message “Skill feedback updated”, will appear at the bottom of the screen.

Note : An anonymous user cannot submit feedback for the skill. You must be logged-in in order to post feedback. If you are not logged-in, the post feedback section would not be visible. Instead you will see a text message saying “Please login to post feedback”.

Implementation of post skill feedback feature

Case 1 : The user is logged in i.e. the access token is not null.

This is how the post feedback UI looks like, when the user is logged in :

Now, add the following code inside a service to make a post request to feedbackSkill.json API.

/**
    * Post feedback given by the user for the skill to the server
    *
    * @param model    Model of the skill (e.g. general)
    * @param group    Group of skill (e.g. Knowledge)
    * @param language Language directory in which the skill resides (e.g. en)
    * @param skill    Skill Tag of object in which the skill data resides
    * @param feedback Feedback to be sent to the server
    * @return the call
    */
   @POST("/cms/feedbackSkill.json")
   Call<PostSkillFeedbackResponse> postFeedback(
                           @Query("model") String model,
                           @Query("group") String group,
                           @Query("language") String language,
                           @Query("skill") String skill,
                           @Query("feedback") String feedback);

Further, attach an OnClickListener with the POST button and call the postFeedback() present in the presenter layer, as can be seen in the following code :

/**
* Set up the feedback section
*
* If the user is logged in, show the post feedback section otherwise display an appropriate message
*/
private fun setFeedback() {
   if (PrefManager.getToken() != null) {
       tvPostFeedbackDesc.visibility = View.VISIBLE
       layoutPostFeedback.visibility = View.VISIBLE
       buttonPost.setOnClickListener {
           if (etFeedback.text.toString().isNotEmpty()) {
               skillDetailsPresenter.postFeedback(skillData.model, skillData.group, skillData.language,
                       skillTag, etFeedback.text.toString())
           } else {
               Toast.makeText(context, getString(R.string.toast_empty_feedback), Toast.LENGTH_SHORT).show()
           }
       }
   } else {
       tvAnonymousPostFeedback.visibility = View.VISIBLE
   }
}

The postFeedback() in the presenter will now invoke the postFeedback() method present in the model as follows :

skillDetailsModel.postFeedback(model, group, language, skill, feedback, this)

Here is how the postFeedback() method in the model looks like :

override fun postFeedback(model: String, group: String, language: String, skill: String, feedback: String, listener: ISkillDetailsModel.OnUpdateFeedbackFinishedListener) {

       updateFeedbackResponseCall = ClientBuilder().susiApi.postFeedback(model, group, language, skill, feedback)

       updateFeedbackResponseCall.enqueue(object : Callback<PostSkillFeedbackResponse> {
           override fun onResponse(call: Call<PostSkillFeedbackResponse>, response: Response<PostSkillFeedbackResponse>) {
               listener.onUpdateFeedbackModelSuccess(response)
           }

           override fun onFailure(call: Call<PostSkillFeedbackResponse>, t: Throwable) {
               t.printStackTrace()
               listener.onUpdateFeedbackError(t)
           }
       })

Once the call is made successfully to the server, the next step is to update the UI. This is achieved with the help of the onUpdateFeedbackModelSuccess() called above, if the response is received.

override fun onUpdateFeedbackModelSuccess(response: Response<PostSkillFeedbackResponse>) {
       if (response.isSuccessful && response.body() != null) {
           Timber.d(response.body().message)
           skillDetailsView?.updateFeedback()
       } else {
           Timber.d("Could not update feedback")
       }
   }

Clearly, if the response is successful and the response body is non-null, it implies that the feedback submitted by the user has been successfully updated on the server. Thus, we display a toast to notify the user of the successful submission of the feedback. This is achieved with the help of the updateFeedback() method in the view, as follows :

override fun updateFeedback() {
   Toast.makeText(context, getString(R.string.toast_feedback_updated), Toast.LENGTH_SHORT).show()
}

Note : The response from the server to the above post request would be similar to the one shown below :

{
  feedback: "Helpful",
  session: 
    {
      ...
    },
  accepted: true,
  message: "Skill feedback updated"
}

Case 2 : The user is not logged in.

In this case simply display a text message saying “Please login to post feedback”.

This is how the post feedback feature has been implemented in SUSI.AI Android App.

Resources

TextInputLayout | Android Developers
https://developer.android.com/reference/android/support/design/widget/TextInputLayout
Styling Buttons | Android Developers
https://developer.android.com/guide/topics/ui/controls/button#Style

Allowing user to submit ratings for skills in SUSI iOS

Post author:Jogendra Kumar
Post published:July 25, 2018
Post category:FOSSASIA GSoC SUSI.AI
Post comments:0 Comments

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

Post feedback for SUSI Skills in SUSI iOS

Post author:Jogendra Kumar
Post published:June 27, 2018
Post category:FOSSASIA GSoC SUSI.AI
Post comments:0 Comments

SUSI iOS, web and Android clients allow the user to rate the SUSI Skills in a 5-star rating system. Users can write about how much particular skill is helpful for them or if improvements are needed. Users can rate skills from one to five star as well. Here we will see how to submit feedback for SUSI skills and how it is implemented on SUSI iOS.

How to submit feedback –

Go to Skill Listing Screen < Skill Detail Screen
Scroll to the feedback section
Write feedback about SUSI skill
Click on POST button to post the skill feedback

An anonymous user can not submit skill feedback. You must have to logged-in in order to post skill feedback. If you are not logged-in and click POST button to post skill feedback, an alert is presented with Login option, by clicking Login, the user is directed to Login screen where the user can log in and later can post skill feedback.

Implementation of posting skill feedback –

Google’s Material textfield is used for skill feedback text field. We have assigned TextField class from Material target to skill feedback text field to make it very interactive and give better user experience.

Skill feedback text field in the normal state –

Skill feedback text field in the active state –

When the user clicks POST after writing skill feedback, we check if the user is logged-in or not.

if let delegate = UIApplication.shared.delegate as? AppDelegate, let user = delegate.currentUser {
...
}

We have saved the logged-in user globally using AppDelegate shared method during login and using it here. The AppDelegate is sort of like the entry point for the application. It implements UIApplicationDelegate and contains methods that are called when application launches, when is going to the background (i.e. when the user hit the home key), when it’s opened back up, and more. The AppDelegate object is stored as a property on the UIApplication class and is accessible from anywhere in swift classes.

Case 1: If the user is not logged-in, we show a popup to the user with the login option

By clicking Login, the user is directed to Login screen where the user can log in and later can post skill feedback.

Case 2: If the user is already logged-in, we use the endpoint below for posting skill feedback –

http://api.susi.ai/cms/feedbackSkill.json

ModelWith following parameters –

Group
Skill
Feedback
Access token

Client.sharedInstance.postSkillFeedback(postFeedbackParam) { (feedback, success, responseMessage) in
DispatchQueue.main.async {
if success {
self.skillFeedbackTextField.text = ""
self.skillFeedbackTextField.resignFirstResponder()
self.view.makeToast(responseMessage)
} else {
self.view.makeToast(responseMessage)
}
}
}

In return response, we get feedback posted by the user –

{
feedback: "Helpful",
session:
{
...
},
accepted: true,
message: "Skill feedback updated"
}

Resources –