Django REST Framework & Nextjs CRUD

mkdir nextjs-restframework-crud cd nextjs-restframework-crud

Requerimientos

• Nodejs
• Python
• Visual Studio Code
• Git

Creacion de la API en Django

mkdir backend cd backend

py -m venv venv .\venv\Scripts\activate pip install django djangorestframework

Iniciando proyecto Django

django-admin startproject taskapi .

python manage.py startapp tasks

Añade los modulos

Luego actualiza el archivo settings.py para añadir la apliacion Nueva:

INSTALLED_APPS = [
    ...
    'tasks',
    'rest_framework',
]

Añadiendo Modelo de Tareas

En el archivo tasks/models.py actualiza el codigo a lo siguiente:

from django.db import models

class Task(models.Model):
  title = models.CharField(max_length=200)
  description = models.TextField()
  done = models.BooleanField(default=False)
  created_at = models.DateTimeField(auto_now_add=True)

python manage.py makemigrations
python manage.py migrate

Creando Serializers

Los serializers nos permiten convertir estructura de datos de python a json:

ve en tasks/serializers.py

from rest_framework import serializers
from .models import Task

class TaskSerializer(serializers.ModelSerializer):
    class Meta:
        model = Task
        fields = ('id', 'title', 'description', 'done', 'created_at')
        read_only_fields = ('id', 'created_at')

Creando un ViewSet

crea en tasks/api.py:

from tasks.models import Task
from rest_framework import viewsets, permissions
from .serializers import TaskSerializer

class TaskViewSet(viewsets.ModelViewSet):
    queryset = Task.objects.all()
    permission_classes = [permissions.AllowAny]
    serializer_class = TaskSerializer

include

Luego vamos a incluir las rutas en el archivo backend/urls.py:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('tasks.urls'))
]

en tasks/urls.py:

from rest_framework import routers
from .api import TaskViewSet

router = routers.DefaultRouter()

router.register('api/tasks', TaskViewSet, 'tasks')

urlpatterns = router.urls

Añadir action

from rest_framework.decorators import action
from rest_framework.response import Response
from rest_framework import status
from tasks.models import Task
from rest_framework import viewsets, permissions
from .serializers import TaskSerializer

class TaskViewSet(viewsets.ModelViewSet):
    queryset = Task.objects.all()
    permission_classes = [permissions.AllowAny]
    serializer_class = TaskSerializer

    @action(detail=True, methods=['post'], permission_classes=[permissions.IsAuthenticated])
    def done(self, request, pk=None):
        """
        Marca una tarea como hecha.
        """
        task = self.get_object()
        task.done = True
        task.save()
        return Response({'status': 'task marked as done'}, status=status.HTTP_200_OK)

Creación del Frotend Nextjs

npx create-next-app