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



    

        
Submit Feedback
        

            {% csrf_token %}
            

                Your Feedback
                
            

                Your Email
                
            

                Your Phone Number
                
            

                Upload Media (Optional)
                
            

                Submit
            
        
    

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

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

ステップ 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 リポジトリをリモートとして追加し、プロジェクトをプッシュします:

git remote add origin https://github.com/yourusername/feedback-system.git

git push -u origin main

結論

このチュートリアルでは、Django、SMS 通知用の Twilio、メディア アップロード用の Pinata を使用して、安全な匿名フィードバック システムを構築しました。また、プロジェクトを GitHub にプッシュし、環境変数を使用して機密情報を保護する方法も学びました。このシステムはプライバシーを確​​保しながら、ユーザーがフィードバックを送信したり SMS 通知を受信したりできるようにします。

機能を追加したり、セキュリティを強化したりして、システムをさらに拡張してください。このガイドが役に立ったと思われる場合は、コメントでフィードバックや質問を共有してください。

プロジェクトのリポジトリはここにあります: リポジトリ