Sử dụng API Django một cách dễ dàng với Mẫu Django
Khi sử dụng công nghệ hoặc khung phụ trợ như Django, Laravel hoặc Node.js để viết API REST, bạn cần có thêm kỹ năng giao diện người dùng bằng cách sử dụng các khung như React, Angular và Vue để sử dụng các điểm cuối API. Nhưng không phải lúc nào cũng như vậy, bạn có thể sử dụng các API trong Django bằng cách sử dụng các mẫu Django.
Thiết lập dự án Django và điểm cuối API
Bắt đầu quá trình, chúng ta sẽ bắt đầu bằng cách thiết lập một thư mục dự án trong hệ thống tệp của mình. Bằng cách sử dụng ứng dụng Terminal, vui lòng điều hướng đến vị trí mong muốn và tạo một thư mục mới để đóng vai trò là trung tâm tổ chức cho dự án của bạn.
mkdir payment_wallet_project
cd payment_wallet_project
Để làm theo hướng dẫn hướng dẫn này, bạn sẽ xây dựng các giao diện lập trình ứng dụng (API) nhằm mục đích sử dụng liên quan đến ví kỹ thuật số được sử dụng cho các giao dịch tài chính.
Mã nguồn hoàn chỉnh có thể được truy cập thông qua kho lưu trữ GitHub, sẵn có để tham khảo và khám phá thêm.
Để bắt đầu, hãy thiết lập một môi trường ảo sử dụng thư viện Pipenv làm nền tảng cho bối cảnh phát triển dự án của chúng tôi.
pipenv install django djangorestframework
Việc thực thi lệnh này sẽ dẫn đến việc cài đặt các thư viện cần thiết và thiết lập một môi trường ảo.
Để kích hoạt môi trường ảo, vui lòng thực thi lệnh sau trong thiết bị đầu cuối hoặc dấu nhắc lệnh của bạn:bashsource/venv/bin/activateVui lòng thay thế bằng đường dẫn thực tế đến thư mục dự án trên máy tính của bạn. Điều này sẽ kích hoạt môi trường ảo và cho phép bạn sử dụng bất kỳ gói nào được cài đặt trong đó cho tập lệnh Python của bạn.
pipenv shell
Để tạo một dự án Django mới, hãy điều hướng đến thư mục ưa thích của bạn và thực hiện lệnh “django-admin startproject PayApp”. Điều này sẽ bắt đầu tạo một dự án mới có tên là “PayApp” ở vị trí được chỉ định.
django-admin startproject PayApp .
Việc sử dụng dấu chấm câu kết thúc (. https://en.wikipedia.org/wiki/. ) sau lệnh “django-admin” sẽ giảm thiểu khả năng xảy ra lỗi một bản sao trùng lặp của cấu trúc thư mục chính của dự án trong ứng dụng Django mới được tạo.
Để tạo một ứng dụng Django mới trong thư mục dự án hiện có, hãy làm theo các bước sau:1. Mở terminal của bạn và điều hướng đến thư mục gốc của dự án Django bằng lệnh cd.2. Khi bạn đã vào đúng thư mục, hãy chạy lệnh sau để tạo một ứng dụng Django mới có tên là “myapp”:bashpython manager.py startapp myapp3. Điều này sẽ tạo ra một thư mục mới có tên “myapp” bên trong thư mục “apps” trong dự án Django của bạn. Trong thư mục này, bạn sẽ tìm thấy một số tệp tạo nên cấu trúc cơ bản của ứng dụng mới của bạn.
python manage.py startapp wallet
Để bắt đầu xây dựng ứng dụng API của bạn, vui lòng làm theo các nguyên tắc đã nêu
Tạo API REST của ví thanh toán
Để triển khai phần phụ trợ toàn diện cho ứng dụng tiền điện tử của bạn, điều cần thiết là mở tệp wallet/models.py trong dự án Django của bạn và tạo hai mô hình riêng biệt cho ví và giao dịch. Các mô hình này sẽ đóng vai trò là nền tảng của lược đồ cơ sở dữ liệu của bạn và cung cấp cấu trúc cần thiết để lưu trữ và truy xuất dữ liệu liên quan đến tài khoản người dùng và giao dịch trong hệ thống.
from django.db import models
class Wallet(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
class Transaction(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)
Để thiết lập một tệp mới trong thư mục ví có tên “serializers.py”, chúng ta sẽ tiến hành tạo một bộ serializers cho cả mô hình ví và giao dịch. Điều này sẽ tạo điều kiện thuận lợi cho việc tổ chức và quản lý dữ liệu hiệu quả trong hệ thống phụ trợ của ứng dụng của chúng tôi.
from rest_framework import serializers
from .models import Wallet, Transaction
class WalletSerializer(serializers.ModelSerializer):
class Meta:
model = Wallet
fields = '__all__'
class TransactionSerializer(serializers.ModelSerializer):
class Meta:
model = Transaction
fields = '__all__'
Bộ tuần tự hóa tính đến mọi thuộc tính có trong cả lược đồ ví và mô hình giao dịch.
Trong tệp wallet/views.py, chúng tôi sẽ xác định các chức năng xem cần thiết để xử lý các chức năng gửi và rút tiền của ví. Các chức năng này sẽ chịu trách nhiệm xử lý các yêu cầu của người dùng và cập nhật dữ liệu liên quan vào cơ sở dữ liệu cho phù hợp. Bằng cách triển khai các chế độ xem này, chúng tôi có thể triển khai hiệu quả tính năng ví trong ứng dụng của mình.
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
class WalletViewSet(viewsets.ModelViewSet):
queryset = Wallet.objects.all()
serializer_class = WalletSerializer
@action(detail=True, methods=['post'])
def deposit(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'])
def withdraw(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)'
class TransactionViewSet(viewsets.ModelViewSet):
queryset = Transaction.objects.all()
Serializer_class = TransactionSerializer
Để thiết lập giao diện lập trình ứng dụng web (API) và chỉ định cách truy cập từng điểm cuối, chúng tôi sẽ tạo một tệp Python mới có tên “wallet/urls.py” trong cấu trúc thư mục dự án của chúng tôi. Tệp này đóng vai trò là thành phần thiết yếu của kiến trúc tổng thể, cho phép giao tiếp liền mạch giữa các thành phần giao diện người dùng và dịch vụ phụ trợ.
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/<int:pk>/deposit/', WalletViewSet.as_view({'post': 'deposit'}),
name='wallet-deposit'),
path('wallets/<int:pk>/withdraw/', WalletViewSet.as_view({'post': 'withdraw'}),
name='wallet-withdraw'),
]
Kết hợp các mẫu URL của ứng dụng của bạn trong tệp theurls.py của dự án, bao gồm các mẫu dành cho ứng dụng được chỉ định.
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('wallet.urls')),
]
Để kết hợp chức năng của ví kỹ thuật số trong ứng dụng của bạn, cần phải bao gồm cả thư viện “wallet” và “rest\_framework” trong danh sách “INSTALLED\_APPS” nằm trong “PayApp/settings.py"tài liệu. Điều này sẽ đảm bảo rằng các ứng dụng này được cài đặt và tích hợp đúng cách với hệ thống tổng thể.
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
]
Đăng ký các ứng dụng ví và phần còn lại\_framework vào sổ đăng ký ứng dụng của dự án Django là một quá trình cho phép sử dụng các mô-đun này trong bối cảnh rộng hơn của dự án, nâng cao chức năng của chúng bằng cách tận dụng các tài nguyên do khung Django cung cấp.
Sử dụng API với mẫu Django
Để phát triển giao diện thân thiện với người dùng để tương tác với API phụ trợ của chúng tôi bằng cách sử dụng các mẫu Django, chúng tôi sẽ cần thiết lập một mẫu mới trong thư mục “ví” nằm trong thư mục “mẫu”. Mẫu cụ thể được yêu cầu có tên là “wallet.html” và phải chứa mã HTML tiếp theo được cung cấp bên dưới.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Wallet</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/
css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Wallets</h1>
<table class="table">
<thead>
<tr>
<th>User</th>
<th>Balance</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ wallet.user }}</td>
<td id="balance">{{ wallet.balance }}</td>
<td>
<div id="loading-indicator" class="d-none">
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<p>Please wait while the deposit is being processed.</p>
</div>
<form id="deposit-form" method="post">
{% csrf_token %}
<input type="number" name="amount" step="0.01" min="0" required>
<button type="submit" class="btn btn-success">Deposit</button>
</form>
<form method="post" id="withdraw-form">
{% csrf_token %}
<input type="number" name="amount" step="0.01" min="0" required>
<button type="submit" class="btn btn-danger">Withdraw</button>
</form>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Tài liệu HTML trình bày hiệu quả các giao diện lập trình ứng dụng gửi và rút tiền trong giao diện người dùng đồ họa đẹp mắt, sử dụng khung Bootstrap hấp dẫn trực quan cho mục đích thiết kế.
Tương tác của người dùng với biểu mẫu
Trong tài liệu HTML, hãy kết hợp phần tử tập lệnh và tích hợp nó trong trình xử lý sự kiện được liên kết với sự kiện gửi của biểu mẫu gửi tiền.
<script>
document.querySelector('#deposit-form').addEventListener('submit', function (event) {
event.preventDefault();
document.querySelector('#loading-indicator').classList.remove('d-none');
const amount = parseFloat(document.querySelector("#deposit-form " \+
"input[name='amount']").value);
fetch("{% url 'wallet-deposit' wallet.id %}", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-CSRFToken": getCookie("csrftoken")
},
body: JSON.stringify({ amount: amount })
})
.then(response => response.json())
.then(data => {
console.log(data);
if (data.balance !== undefined) {
// Convert to number and format
const newBalance = parseFloat(data.balance).toFixed(2);
document.querySelector("#balance").textContent = newBalance;
document.querySelector('#loading-indicator').classList.
add('d-none');
}
})
.catch(error => {
console.error("Error:", error);
document.querySelector('#loading-indicator')
.classList.add('d-none');
});
});
</script>
Sau đó, kết hợp trình xử lý sự kiện để gửi biểu mẫu rút tiền bằng cách sử dụng mã được cung cấp như sau:
<script>
document.querySelector('#withdraw-form').addEventListener('submit', function (event) {
event.preventDefault();
document.querySelector('#loading-indicator').classList.remove('d-none');
const amount = parseFloat(document.querySelector("#withdraw-form " \+
"input[name='amount']").value);
fetch("{% url 'wallet-withdraw' wallet.id %}", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-CSRFToken": getCookie("csrftoken")
},
body: JSON.stringify({ amount: amount })
})
.then(response => response.json())
.then(data => {
console.log(data);
if (data.balance !== undefined) { // Change to 'balance' for withdrawal
const newBalance = parseFloat(data.balance).toFixed(2);
document.querySelector("#balance").textContent = newBalance;
document.querySelector('#loading-indicator').classList.add('d-none');
}
})
.catch(error => {
console.error("Error:", error);
document.querySelector('#loading-indicator').classList.add('d-none');
});
});
</script>
Trình xử lý sự kiện chịu trách nhiệm quản lý việc gửi biểu mẫu gửi và rút tiền, được liên kết với các phần tử “#deposit-form” và “#withdraw-form” tương ứng.
URL của yêu cầu tìm nạp tương ứng với các URL được liên kết với hành động gửi và rút tiền.
Quá trình này bao gồm việc phân tích cú pháp các phản hồi JSON của cả giao dịch gửi và rút tiền để truy xuất số dư tài khoản hiện tại, sau đó được truy xuất thông qua thuộc tính data.balance. Sau đó, những giá trị này được chuyển đổi và trình bày trên trang web.
Để hiển thị nội dung ví kỹ thuật số của người dùng trên ứng dụng web, cần phải sửa đổi tệp wallet/views.py bằng cách kết hợp phiên bản cập nhật của hàm render() để hiển thị wallet.html mẫu. Chức năng này sẽ tính đến mọi thay đổi được thực hiện đối với mô hình Ví và đảm bảo rằng thông tin được hiển thị phản ánh chính xác trạng thái hiện tại của ví của người dùng.
from django.shortcuts import render
def wallet_view(request):
# Retrieve the wallet to display
wallet = Wallet.objects.first()
return render(request, 'wallet.html', {'wallet': wallet})
Trong ví dụ minh họa này, chúng tôi sẽ sử dụng chức năng thực dụng của phương thức first() để chọn danh mục ảo của một người dùng nhằm mục đích thể hiện hoạt động của nó.
Vui lòng cập nhật tệp urls.py trong dự án của bạn bằng cách kết hợp tuyến URL cho wallet\_view , chỉ định đường dẫn thích hợp như hiển thị bên dưới:
from .views import wallet_view
urlpatterns = [
...
path('home/', wallet_view, name='wallet-page'),
]
“ http://127.0.0.1:8000/home/ ”.
Để xác minh rằng tất cả các thay đổi đã được áp dụng thành công cho cơ sở dữ liệu, bạn nên thực hiện một loạt các bước. Trước tiên, hãy đảm bảo rằng các phần phụ thuộc cần thiết đã được cài đặt bằng cách chạy lệnh “makemigrations” trong terminal hoặc dấu nhắc lệnh. Điều này sẽ tạo các tệp di chuyển dựa trên mọi sửa đổi được thực hiện đối với các mô hình trong dự án. Tiếp theo, áp dụng các di chuyển này bằng lệnh “di chuyển”. Khi cả hai quá trình đã hoàn tất mà không có lỗi, điều này cho thấy các thay đổi đã được triển khai đúng cách. Cuối cùng, khởi chạy ứng dụng Django bằng lệnh “python management.py runserver” trong terminal hoặc dấu nhắc lệnh. Máy chủ bây giờ đã sẵn sàng để sử dụng, cho phép bạn truy cập trang web hoặc dịch vụ thông qua trình duyệt web.
python manage.py makemigrations
python manage.py migrate
python manage.py runserver
Để được truy cập vào điểm cuối của giao diện lập trình ứng dụng của chúng tôi, vui lòng hướng trình duyệt web của bạn tới URL http://127.0.0.1:8000/api/.
Sản lượng dự kiến:
Điều hướng đến localhost để tương tác với ví.
Sản lượng dự kiến:
Ví kỹ thuật số của người dùng hiển thị số dư tài khoản hiện tại của họ, cung cấp cho họ phương tiện thuận tiện để thực hiện cả việc gửi và rút tiền khi cần.
Tìm hiểu về mẫu Django và vai trò của chúng trong việc sử dụng API
Mặc dù các mẫu Django vượt trội trong việc hiển thị dữ liệu cố định, nhưng chúng có những hạn chế khi tích hợp với Giao diện lập trình ứng dụng (API).
Hệ thống tạo khuôn mẫu của Django cung cấp mức độ thích ứng hạn chế hơn so với các lựa chọn thay thế khác như Jinja2 hoặc Twig. Điều này là do nó phụ thuộc vào các chiến lược hiển thị được xác định trước đòi hỏi phải thao tác thủ công khi làm việc với các cấu trúc dữ liệu phức tạp thu được từ các API cung cấp thông tin được định dạng JSON.
Django, một khung web hiện đại được sử dụng rộng rãi, vốn không cung cấp hỗ trợ riêng để xử lý các yêu cầu không đồng bộ trong hệ thống tạo khuôn mẫu của nó. Bất chấp hạn chế này, các framework hiện đại khác như Flask đã chấp nhận việc sử dụng cú pháp async/await trong quá trình phát triển của chúng. Do đó, khi sử dụng công cụ tạo mẫu của Django, cần phải hoàn thành tất cả các yêu cầu một cách tuần tự trước khi hiển thị trang web, ngay cả khi cần có nhiều nguồn dữ liệu để tạo nội dung.
Các mẫu Django thiếu cơ chế tự nhiên để xử lý các lỗi có thể phát sinh khi sử dụng API. Không có gì lạ khi các trường hợp ngoại lệ được đưa ra trong các hoạt động như vậy, đòi hỏi phải có sự can thiệp thủ công để xử lý chúng trong giới hạn của mẫu. Điều này có thể dẫn đến mã rườm rà và khó bảo trì.
Xây dựng các ứng dụng có thể mở rộng
Các mẫu Django hỗ trợ việc tách các lớp trình bày khỏi logic nghiệp vụ, cho phép các nhà phát triển tập trung vào việc soạn mã bền vững và có thể tái sử dụng. Tuy nhiên, do những hạn chế của chúng, các mẫu Django có thể không tối ưu để xử lý API ở quy mô rộng. Trong những tình huống như vậy, các khung máy khách như React tiếp tục có liên quan trong việc xây dựng các hệ thống phần mềm có thể mở rộng.