Django、Twilio、Pinata を使用した安全な匿名フィードバック システムの構築
- Susan Sarandonオリジナル
- 2024-10-06 06:13:30727ブラウズ
このガイドでは、Django、SMS 通知用の Twilio、安全なメディア アップロード用の Pinata、レスポンシブ スタイル用の TailwindCSS を使用して、安全な匿名フィードバック システムを構築する手順を説明します。このチュートリアルを完了すると、ユーザーがフィードバックを送信したり、オプションでメディアをアップロードしたり、SMS 通知を受信したりできる、すべてセキュリティとプライバシーを考慮した完全に機能するフィードバック システムが完成します。
デモ: ライブリンク
主な特徴:
- 匿名のフィードバック送信: ユーザーはフィードバックやサポート リクエストを匿名で送信できます。
- 安全なメディア アップロード: ユーザーは、IPFS に保存されているメディア ファイルを Pinata 経由で安全にアップロードできます。
- Twilio SMS 通知: Twilio 経由でユーザーに SMS 確認を自動的に送信します。
- レスポンシブ UI: TailwindCSS でスタイル設定され、シームレスでモダンなデザインを実現します。
使用されているテクノロジー:
- Django: フィードバック システムのバックエンド フレームワーク。
- Twilio: SMS 通知を処理します。
- 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.フィードバック モデルを作成する
フィードバックの送信を Facebook/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.フィードバックと SMS 通知を処理するためのビューを作成する
Facebook/views.py で、フィードバックを処理し、SMS 通知を送信するためのビューを作成します。
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 を使用して SMS を送信します。
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>
フロントエンドのイメージ
アップロードされたファイルを表示するピニャータ ダッシュボードの画像
ステップ 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
GitHub にプッシュされないように、.gitignore ファイルに .env を必ず追加してください:
.env
3.2.環境変数を使用するように settings.py を更新
Python-decouple を使用して、.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')
ステップ 4: 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、SMS 通知用の Twilio、メディア アップロード用の Pinata を使用して、安全な匿名フィードバック システムを構築しました。また、プロジェクトを GitHub にプッシュし、環境変数を使用して機密情報を保護する方法も学びました。このシステムはプライバシーを確保しながら、ユーザーがフィードバックを送信したり SMS 通知を受信したりできるようにします。
機能を追加したり、セキュリティを強化したりして、システムをさらに拡張してください。このガイドが役に立ったと思われる場合は、コメントでフィードバックや質問を共有してください!
プロジェクトのリポジトリはここにあります: リポジトリ
以上がDjango、Twilio、Pinata を使用した安全な匿名フィードバック システムの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。