Cuando utiliza una tecnología o marco de backend como Django, Laravel o Node.js para escribir API REST, necesita tener una habilidad de frontend adicional usando marcos como React, Angular y Vue para consumir la API puntos finales. Pero ese no es siempre el caso, puedes consumir las API en Django usando plantillas de Django.

Configuración de un proyecto Django y puntos finales API

El primer paso será crear un directorio de proyecto. Abra su terminal y cree un directorio para su proyecto.

mkdir payment_wallet_project
cd payment_wallet_project

En este tutorial, creará API para una billetera de pagos.

El código fuente completo está disponible en un repositorio de GitHub.

Comienza por creando un entorno virtual. En este caso, utilizará la biblioteca Pipenv.

pipenv install django djangorestframework

Este comando instala las bibliotecas necesarias y crea un entorno virtual.

Active el entorno virtual usando el siguiente comando:

pipenv shell

Crea un nuevo proyecto Django llamado Aplicación de pago.

django-admin startproject PayApp .

Usando el punto (.) al final de administrador-django El comando garantiza que el proyecto evite la creación de un directorio duplicado del directorio del proyecto.

Crear un nueva aplicación Django dentro del directorio del proyecto.

python manage.py startapp wallet

Ahora, proceda a crear su aplicación API siguiendo los pasos a continuación.

Creación de una API REST de billetera de pago

Abre el billetera/modelos.py archivar y definir los modelos de billetera y transacción.

from django.db import models
classWallet(models.Model):
 user = models.CharField(max_length=100)
 balance = models.DecimalField(max_digits=10, decimal_places=2)
 date_created = models.DateTimeField(auto_now_add=True)
 date_modified = models.DateTimeField(auto_now=True)
def__str__(self):
return self.user
classTransaction(models.Model):
 wallet = models.ForeignKey(Wallet, on_delete=models.CASCADE)
 amount = models.DecimalField(max_digits=10, decimal_places=2)
 timestamp = models.DateTimeField(auto_now_add=True)

En el billetera directorio, cree un nuevo archivo serializadores.pyy escriba los serializadores del modelo de transacción y billetera.

from rest_framework import serializers
from .models import Wallet, Transaction
classWalletSerializer(serializers.ModelSerializer):
classMeta:
 model = Wallet
 fields = '__all__'
classTransactionSerializer(serializers.ModelSerializer):
classMeta:
 model = Transaction 
 fields = '__all__'

Los serializadores consideran todos los campos de los modelos de billetera y transacción.

En billetera/vistas.py, escriba las vistas para manejar la lógica de implementar la funcionalidad de billetera. Esto incluye las capacidades de depósito y retiro.

from rest_framework import generics, status
from rest_framework.response import Response
from rest_framework.decorators import action
from decimal import Decimal
from .models import Wallet, Transaction
from .serializers import WalletSerializer, TransactionSerializer
classWalletViewSet(viewsets.ModelViewSet):
 queryset = Wallet.objects.all()
 serializer_class = WalletSerializer
 @action(detail=True, methods=['post'])
defdeposit(self, request, pk=None):
 wallet = self.get_object()
 amount = Decimal(request.data['amount'])
 wallet.balance += amount
 wallet.save() 
 serializer = WalletSerializer(wallet)
return Response(serializer.data)

 @action(detail=True, methods=['post'])
defwithdraw(self, request, pk=None):
 wallet = self.get_object()
 amount = Decimal(request.data['amount'])
if wallet.balance < amount:
return Response({'error': 'Insufficient funds'},
 status=status.HTTP_400_BAD_REQUEST)
 wallet.balance -= amount
 wallet.save()
 serializer = WalletSerializer(wallet)
return Response(serializer.data)'
classTransactionViewSet(viewsets.ModelViewSet):
 queryset = Transaction.objects.all()
 Serializer_class = TransactionSerializer

A continuación, defina el enrutamiento de URL para la API creando un billetera/url.py archivo:

from django.urls import path, include
from rest_framework.routers import DefaultRouter
from .views import WalletViewSet, TransactionViewSet, wallet_view
router = DefaultRouter()
router.register(r'wallets', WalletViewSet, basename='wallets')
router.register(r'transactions', TransactionViewSet, basename='transactions')
urlpatterns = [
 path('api/', include(router.urls)),
 path('wallets//deposit/', WalletViewSet.as_view({'post': 'deposit'}),
 name='wallet-deposit'),
 path('wallets//withdraw/', WalletViewSet.as_view({'post': 'withdraw'}),
 name='wallet-withdraw'),
]

En tu proyecto URL.py, incluya las URL de la aplicación:

from django.contrib import admin
from django.urls import path, include
urlpatterns = [
 path('admin/', admin.site.urls),
 path('', include('wallet.urls')),
]

En el Aplicación de pago/settings.py archivo, agregue el billetera y aplicaciones rest_framework hacia INSTALLED_APPS lista.

INSTALLED_APPS = [
"django.contrib.admin",
"django.contrib.auth",
"django.contrib.contenttypes",
"django.contrib.sessions",
"django.contrib.messages",
"django.contrib.staticfiles",
"rest_framework", # new
"wallet", # new
]

Esto registrará las aplicaciones wallet y rest_framework en la aplicación del proyecto Django.

Consumiendo la API con plantillas de Django

Ahora, usarás las plantillas de Django para crear una interfaz simple para consumir la API. Crear un billetera.html archivo en el billetera/plantillas/ directorio y agregue el código HTML a continuación.

"en">

"UTF-8">
"viewport" content="width=device-width, initial-scale=1">


"stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/
 css/bootstrap.min.css">



class="container">
Wallets

class="table">

















User
Balance
Actions






{{ wallet.user }}
"balance">{{ wallet.balance }}


"loading-indicator"class="d-none">

class="spinner-bordertext-primary" role="status">
class="sr-only">Loading...span>



Please wait while the deposit is being processed.




"deposit-form" method="post">
 {% csrf_token %}
"number" name="amount" step="0.01" min="0" required>
"submit"class="btnbtn-success">Depositbutton>



"post" id="withdraw-form">
 {% csrf_token %}
"number" name="amount" step="0.01" min="0" required>
"submit"class="btnbtn-danger">Withdrawbutton>

El archivo HTML representa las API de depósito y retiro en una hermosa interfaz de usuario diseñada con Bootstrap.

Interacción del usuario con formularios

En el archivo HTML, cree una etiqueta de secuencia de comandos y agregue el siguiente código al detector de eventos de envío del formulario de depósito.

A continuación, agregue el detector de eventos para el envío del formulario de retiro usando el siguiente código:

El detector de eventos es responsable de manejar el depósito y el retiro (#formulario-de-depósito y #formulario-de-retirada) envíos de formularios.

La URL de la solicitud de recuperación sirve para hacer coincidir las URL de las acciones de depósito y retiro.

Luego, las respuestas JSON para los depósitos y retiros se analizan para obtener el saldo actualizado (balance.de.datos). Luego se formatean y se muestran en la página.

A continuación, en el billetera/vistas.py, agregue la siguiente actualización para representar la página wallet.html:

from django.shortcuts import render
defwallet_view(request):
# Retrieve the wallet to display
 wallet = Wallet.objects.first() 
return render(request, 'wallet.html', {'wallet': wallet})

En este ejemplo, utilizará el primero() Método de consulta para seleccionar la billetera de un solo usuario con fines de demostración.

Actualizar el URL.py archivo agregando una ruta al vista_billetera como sigue:

from .views import wallet_view
urlpatterns = [
 ...
 path('home/', wallet_view, name='wallet-page'),
]

Acceda a la página de la billetera desde la URL: http://127.0.0.1:8000/home/.

Con todo configurado y funcionando como se esperaba, ejecute el hacer migraciones y emigrar comandos. Finalmente, ejecute la aplicación:

python manage.py makemigrations
python manage.py migrate
python manage.py runserver

Para acceder a los puntos finales de la API, navegue hasta http://127.0.0.1:8000/api/.

Rendimiento esperado:

Navega hasta el servidor local para interactuar con la billetera.

Rendimiento esperado:

La billetera muestra el saldo y le da la opción de depositar o retirar.

Comprender las plantillas de Django y su papel en el consumo de API

A pesar de ser excelentes para presentar contenido estático, las plantillas de Django tienen ciertas restricciones al usar API:

• Flexibilidad limitada: Las plantillas de Django son menos flexibles que las creadas con Jinja2 o Twig, ya que se utilizan para mostrar estructuras específicas. Por ejemplo, tendría que analizar manualmente el JSON e insertar los datos en la plantilla si necesita consumir una API que devuelva datos JSON. Esto puede resultar complicado, sobre todo si la API ofrece estructuras de datos complejas.
• No hay soporte para solicitudes asincrónicas: Las plantillas de Django carecen de forma nativa de la capacidad de manejar solicitudes asincrónicas. Las plantillas aún necesitan procesamiento sincrónico a pesar de que los marcos web contemporáneos async/await como Flask y Django admiten la sintaxis. Esto significa que tendría que esperar a que finalicen todas las solicitudes antes de producir la plantilla si necesita adquirir datos de numerosas fuentes antes de representar una página.
• Manejo de errores limitado: Es posible que se produzcan errores con regularidad al utilizar las API. No existen mecanismos integrados para el manejo elegante de errores en las plantillas de Django. Debería detectar la excepción y administrarla dentro de la propia plantilla si falla una llamada API, lo que podría resultar en un código torpe y difícil de mantener.

Cree aplicaciones escalables

Al proporcionar una forma de separar la capa de presentación de la lógica empresarial, las plantillas de Django permiten a los desarrolladores centrarse en la creación de código reutilizable y mantenible. Sin embargo, debido a sus limitaciones, es posible que las plantillas de Django no sean la mejor opción cuando se consumen API a escala. Los marcos de clientes como React siguen siendo útiles para crear aplicaciones escalables.