Django、Twilio、Pinata を使用した安全な匿名フィードバック システムの構築

このガイドでは、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 %}



    <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">


    <div class="container mx-auto px-4 py-6">
        <h1 id="Submit-Feedback">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>

フロントエンドのイメージ

アップロードされたファイルを表示するピニャータ ダッシュボードの画像

ステップ 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 にプッシュする

1. プロジェクトのルートで Git リポジトリを初期化します:

git init
git add .
git commit -m "Initial commit for feedback system"

1. 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 サイトの他の関連記事を参照してください。