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

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 2, 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 el ProductViewSet; importa del Rest Framework viewsets, el ProductSerializer 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 ProductViewSet 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 2, Vuetify y Django?

Rest Framework API Object