Crea un sistema de clasificación por estrellas

¿Cómo hacer un sistema de clasificación por estrellas con Django Rest Framework?

Denisse Avatar

Por:

Denisse Abreu
Mar 23, 2022 8pm ET

Eng/Spa 2-min

Hola 👋🏼, en este artículo te enseñaré cómo hacer un sistema de clasificación por estrellas para tu tienda de compras en línea. Si deseas revisar primero el 'frontend', hágalo aquí: ¿Cómo crear un sistema de clasificación por estrellas con Vue, Vuetify y Django? Primero, configuremos nuestro entorno. Como servidor estaré usando Django y Django Rest Framework. Para el lado del cliente, estaré usando Vuejs Options API, y para la clasificación por estrellas, estaré usando la clasificación por estrellas de Vuetify. Esta guía asumirá que tiene experiencia previa en el manejo de Django. Ya tengo el proyecto en mi repositorio, Puedes darle fork aquí: Django Shopping Store.

  • Instala todas las librerías que necesites.
Instalar a través de pip
pip install djangorestframework

Comencemos por crear nuestro modelo. Primero, trae el modelo del Producto y vincula cada producto con su propia base de datos del sistema de calificación de estrellas; Construya la base de datos usando palabras como encabezados de la tabla. La data de la tabla de estrellas es un número entero positivo que irá aumentando uno a uno. El método "string dunder" evaluará la base de datos y devolverá la columna que tenga el número más grande.

store/models
class Rating(models.Model): product = models.ForeignKey(Product, related_name='rating', on_delete=models.CASCADE) one = models.PositiveIntegerField(default=0, null=True, blank=True) two = models.PositiveIntegerField(default=0, null=True, blank=True) three = models.PositiveIntegerField(default=0, null=True, blank=True) four = models.PositiveIntegerField(default=0, null=True, blank=True) five = models.PositiveIntegerField(default=0, null=True, blank=True) class Meta: ordering = ['product'] def __str__(self): # Extraiga todos los valores y devuelva el valor máximo. # Invierte este dictado si hay un empate y quieres la última clave. rating_list = { '1': self.one, '2': self.two, '3': self.three, '4': self.four, '5': self.five } return str(max(rating_list, key=rating_list.get))

Django Admin Dashboard

Cree un 'serializers.py' dentro del "store folder". Trae el modelo Producto con todos sus campos y agregue la lista 'rating' al final.

store/serializers
from .models import Product from rest_framework import serializers class ProductSerializer(serializers.ModelSerializer): rating = serializers.StringRelatedField(many=True) class Meta: model= Product fields = ['id', 'name', 'slug', 'image', 'price', 'qty', 'inventory', 'description', 'rating']

Ahora estamos listos para implementar nuestro 'class view'; importa el' rest framwork viewset', el 'serializer' del producto y el modelo del producto.

store/views
from rest_framework import viewsets from .serializers import ProductSerializer from .models import Product # Obtenga todos los productos en orden aleatorio class ProductViewSet(viewsets.ModelViewSet): queryset = Product.objects.all().order_by('?') serializer_class = ProductSerializer

Por último, pero no menos importante, tenemos que implementar nuestras rutas para que el servidor pueda recibir el objeto del producto con su 'rating' cuando lo envíe el front-end. Crea las rutas en el archivo URL de la tienda (store/urls), importa el 'product view set' del archivo views, y routers de Django Rest Framework. La variable router del Rest Framework trabaja como un 'controller' de rutas.

store/urls
from django.urls import path, include from rest_framework import routers from .views import ProductViewSet router = routers.DefaultRouter() router.register(r'products', ProductViewSet) urlpatterns = [ path('', include(router.urls)), path('api/', include('rest_framework.urls', namespace='rest_framework')) ]

La siguiente imagen muestra el objeto del producto que se enviará al front-end, la lista de calificación (rating) significa que la copa roja tiene 3 estrellas. Si desea implementar el lado del cliente de esta guía, hágalo aquí: ¿Cómo crear un sistema de clasificación por estrellas con Vue, Vuetify y Django?

Rest Framework API Object