在本指南中，我將引導您使用 Django、用於簡訊通知的 Twilio、用於安全媒體上傳的 Pinata 以及用於響應式樣式的 TailwindCSS 建立安全匿名回饋系統。在本教程結束時，您將擁有一個功能齊全的反饋系統，用戶可以在其中提交反饋、選擇上傳媒體以及接收短信通知 - 所有這些都考慮到安全和隱私。
示範：即時連結
主要特點：
- 匿名回饋提交：使用者可以匿名提交回饋或支援請求。
- 安全媒體上傳：使用者可以透過 Pinata 安全上傳儲存在 IPFS 上的媒體檔案。
- Twilio 簡訊通知：透過 Twilio 自動向使用者發送簡訊確認。
- 響應式 UI：採用 TailwindCSS 設計，實現無縫、現代的設計。
使用的技術：
- Django：回饋系統的後端框架。
- Twilio：處理簡訊通知。
- Pinata：提供基於 IPFS 的安全媒體儲存。
- TailwindCSS：用於響應式前端樣式。
第 1 步：項目設定和依賴項
1.1。建立並設定虛擬環境
首先設定您的專案環境。確保您已安裝 Python 並設定虛擬環境：
python3 -m venv venv
source venv/bin/activate
登入後複製
在 Windows 上：
venv\Scripts\activate
登入後複製
安裝必要的軟體套件：
pip install django twilio python-decouple requests gunicorn
登入後複製
1.2。啟動 Django 專案
初始化一個新的 Django 專案和應用程式：
django-admin startproject config .
python manage.py startapp feedback
登入後複製
第2步：建構回饋提交系統
2.1。建立回饋模型
在feedback/models.py中定義一個模型來儲存回饋提交：
from django.db import models
class Feedback(models.Model):
message = models.TextField()
sender_email = models.EmailField()
sender_phone = models.CharField(max_length=15)
media_url = models.URLField(null=True, blank=True)
created_at = models.DateTimeField(auto_now_add=True)
def __str__(self):
return f"Feedback from {self.sender_email}"
登入後複製
此模型可擷取回饋、電子郵件、電話號碼和選用媒體 URL。
2.2。建立用於處理回饋和簡訊通知的視圖
在feedback/views.py中，建立視圖來處理回饋並發送簡訊通知：
from django.shortcuts import render
from django.http import HttpResponse
from .models import Feedback
from twilio.rest import Client
from django.conf import settings
import requests
def upload_to_pinata(file):
url = "https://api.pinata.cloud/pinning/pinFileToIPFS"
headers = {
'pinata_api_key': settings.PINATA_API_KEY,
'pinata_secret_api_key': settings.PINATA_SECRET_API_KEY,
}
files = {'file': file}
response = requests.post(url, files=files, headers=headers)
return response.json().get('IpfsHash')
def submit_feedback(request):
if request.method == 'POST':
message = request.POST.get('message')
sender_email = request.POST.get('sender_email')
sender_phone = request.POST.get('sender_phone')
file = request.FILES.get('media_file', None)
media_url = None
if file:
media_url = upload_to_pinata(file)
feedback = Feedback.objects.create(
message=message,
sender_email=sender_email,
sender_phone=sender_phone,
media_url=media_url
)
# Send SMS using Twilio
client = Client(settings.TWILIO_ACCOUNT_SID, settings.TWILIO_AUTH_TOKEN)
client.messages.create(
body=f"Feedback received from {sender_phone}: {message}",
from_=settings.TWILIO_PHONE_NUMBER,
to=sender_phone
)
return HttpResponse("Feedback submitted successfully!")
return render(request, 'feedback_form.html')
登入後複製
此視圖處理表單提交、將可選媒體上傳到 Pinata 以及使用 Twilio 發送簡訊。
2.3。建立回饋表
建立 HTML 表單來提交回饋。在模板資料夾中，建立feedback_form.html：
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Submit Feedback</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
<div class="container mx-auto px-4 py-6">
<h1 class="text-3xl font-bold text-center">Submit Feedback</h1>
<form method="POST" action="" enctype="multipart/form-data" class="bg-white p-6 rounded shadow-md">
{% csrf_token %}
<div class="mb-4">
<label for="message" class="block text-lg font-semibold">Your Feedback</label>
<textarea name="message" id="message" class="w-full p-2 border rounded" required></textarea>
</div>
<div class="mb-4">
<label for="sender_email" class="block text-lg font-semibold">Your Email</label>
<input type="email" name="sender_email" id="sender_email" class="w-full p-2 border rounded" required>
</div>
<div class="mb-4">
<label for="sender_phone" class="block text-lg font-semibold">Your Phone Number</label>
<input type="tel" name="sender_phone" id="sender_phone" class="w-full p-2 border rounded" required>
</div>
<div class="mb-4">
<label for="media_file" class="block text-lg font-semibold">Upload Media (Optional)</label>
<input type="file" name="media_file" id="media_file" class="w-full p-2 border rounded">
</div>
<div class="text-center">
<button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded">Submit</button>
</div>
</form>
</div>
</body>
</html>
登入後複製
前端圖片
Pinata 儀表板的圖像，顯示已上傳的檔案
步驟 3：設定 Twilio 和 Pinata
3.1。設定環境變數
在專案的根目錄中建立一個 .env 檔案來儲存 Twilio 和 Pinata API 金鑰等敏感資訊：
SECRET_KEY=your-django-secret-key
DEBUG=True
TWILIO_ACCOUNT_SID=your_twilio_account_sid
TWILIO_AUTH_TOKEN=your_twilio_auth_token
TWILIO_PHONE_NUMBER=your_twilio_phone_number
PINATA_API_KEY=your_pinata_api_key
PINATA_SECRET_API_KEY=your_pinata_secret_api_key
登入後複製
確保將 .env 新增到您的 .gitignore 檔案中，這樣它就不會被推送到 GitHub：
3.2。更新 settings.py 以使用環境變數
使用 python-de Couple 從 .env 檔案安全地載入環境變數：
from decouple import config
SECRET_KEY = config('SECRET_KEY')
DEBUG = config('DEBUG', default=False, cast=bool)
TWILIO_ACCOUNT_SID = config('TWILIO_ACCOUNT_SID')
TWILIO_AUTH_TOKEN = config('TWILIO_AUTH_TOKEN')
TWILIO_PHONE_NUMBER = config('TWILIO_PHONE_NUMBER')
PINATA_API_KEY = config('PINATA_API_KEY')
PINATA_SECRET_API_KEY = config('PINATA_SECRET_API_KEY')
登入後複製
第四步：推送到GitHub
4.1。初始化Git並推送到GitHub
- 在專案根目錄中初始化 Git 儲存庫：
git init
git add .
git commit -m "Initial commit for feedback system"
登入後複製
- 將您的 GitHub 儲存庫新增為遠端倉庫並推送您的專案：
<p>git remote add origin https://github.com/yourusername/feedback-system.git<br>
git push -u origin main</p>
登入後複製
結論
在本教程中，您使用 Django、用於簡訊通知的 Twilio 和用於媒體上傳的 Pinata 建立了一個安全的匿名回饋系統。您還了解如何將專案推送到 GitHub 並使用環境變數保護敏感資訊。該系統確保隱私，同時使用戶能夠提交回饋和接收簡訊通知。
您可以透過增加更多功能或增強安全性來進一步擴展系統。如果您發現本指南有幫助，請在評論中分享您的回饋或問題！
專案的儲存庫可以在這裡找到：Repo
以上是使用 Django、Twilio 和 Pinata 建立安全的匿名回饋系統的詳細內容。更多資訊請關注PHP中文網其他相關文章！
