Implement API Rating field and widget

[bajiat]

Feature

Create a rating feature for API Backends. Users can select a rating, and aggregate ratings are displayed on the API Backend page and API Backends catalog.

Design

Resources

• jQuery Rate It package

Related

Related to #471

[brylie]

Co-pilot: @elnzv

[55]

Related design file - https://github.com/apinf/docs/blob/master/docs/design/%23471_rating_field_widget.png

[kyyberi]

Somehow add the amount of ratings to option one. Could it be number in parenthesis after the stars? This is vital since its different level of credibility if there is just two ratings or 200 ratings.

[brylie]

This current feature development branch is focused on the basic, single-user rating widget. I have created a follow up design task to show the aggregate ratings (including number of ratings and average result).

[kyyberi]

Ah, ok.

[brylie]

I am able to get the individual rating in a column of the API Catalog. Also, users who are anonymous or who have not rated the API Backend will see an average of existing ratings. There is an open bug report/feature request for search/sort within collection helper columns on the upstream package.

One problem I am getting is that we can not sort by the rating column, so users may not be able to 'show highest rated' by clicking the column title.

[brylie]

I have gone with a four star max rating, as opposed to five. This is to encourage users to lean one way or the other, rather than going with a three star rating.

[brylie]

I am not sure how to show both the aggregate rating and individual rating in the same table cell, but could create an additional column for 'average rating' or similar. This may not be the best in terms of space usage, but would differentiate the user rating from the aggregate.

[brylie]

I am implementing the rating widget in a similar fashion to Netflix movie rating functionality.

When a user has not rated an API backnd, they are shown the aggregate rating, e.g. red stars. When the user has rated an API backend, they are shown their individual rating, e.g. in yellow stars to differentiate.

[bajiat]

@brylie I like the approach on separating the user ratings and aggregated ratings with different color.

[brylie]

PR Open: #572

[kyyberi]

+1 for the idea

[brylie]

Below is a screenshot of the current API Catalogue table, showing user rating in yellow and aggregate rating in red:

Note: the interface shows user rating when available, and falls back to aggregate rating or empty stars when no aggregate exists.

[brylie]

I have added the user count to aggregate rating display:

A grey 'badge' appears next to the rating showing the aggregate count and a 'user' icon. The use of the icon avoids string translation and saves space.

[kyyberi]

See also Kin Lane's thoughts on this https://www.linkedin.com/pulse/how-we-going-create-standard-poors-moodys-api-economy-kin-lane

[brylie]

A lot of the ideas in that article seem also related to our API Metadata entry form task (#472). E.g. we can build an 'API Metadata' form that conforms to existing standards (including possibly Swagger specification), and provides fields such as outlined in the previous article.