Membina Sistem Maklum Balas Tanpa Nama Selamat dengan Django, Twilio dan Pinata

Dalam panduan ini, saya akan membimbing anda membina Sistem Maklum Balas Tanpa Nama Selamat menggunakan Django, Twilio untuk pemberitahuan SMS, Pinata untuk muat naik media selamat dan TailwindCSS untuk penggayaan responsif. Pada penghujung tutorial ini, anda akan mempunyai sistem maklum balas berfungsi sepenuhnya di mana pengguna boleh menyerahkan maklum balas, memuat naik media secara pilihan dan menerima pemberitahuan SMS—semuanya dengan mengambil kira keselamatan dan privasi.

Demo: Pautan Langsung

Ciri-ciri Utama:

• Penyerahan Maklum Balas Tanpa Nama: Pengguna boleh menyerahkan maklum balas atau permintaan sokongan tanpa nama.
• Muat Naik Media Selamat: Pengguna boleh memuat naik fail media dengan selamat melalui Pinata, disimpan di IPFS.
• Pemberitahuan SMS Twilio: Menghantar pengesahan SMS secara automatik kepada pengguna melalui Twilio.
• UI Responsif: Digayakan dengan TailwindCSS untuk reka bentuk moden yang lancar.

Teknologi yang Digunakan:

• Django: Rangka kerja hujung belakang untuk sistem maklum balas.
• Twilio: Mengendalikan pemberitahuan SMS.
• Pinata: Menyediakan storan media selamat berasaskan IPFS.
• TailwindCSS: Untuk penggayaan bahagian hadapan yang responsif.

Langkah 1: Persediaan Projek dan Ketergantungan

1.1. Cipta dan Sediakan Persekitaran Maya
Mulakan dengan menyediakan persekitaran projek anda. Pastikan anda memasang Python dan menyediakan persekitaran maya:

python3 -m venv venv
source venv/bin/activate

Pada Windows:

venv\Scripts\activate

Pasang pakej yang diperlukan:

pip install django twilio python-decouple requests gunicorn

1.2. Mulakan Projek Django
Mulakan projek dan apl Django baharu:

django-admin startproject config .
python manage.py startapp feedback

Langkah 2: Bina Sistem Penyerahan Maklum Balas

2.1. Cipta Model Maklum Balas
Tentukan model untuk menyimpan penyerahan maklum balas dalam maklum balas/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}"

Model ini menangkap maklum balas, e-mel, nombor telefon dan URL media pilihan.

2.2. Cipta Pandangan untuk Mengendalikan Maklum Balas dan Pemberitahuan SMS
Dalam feedback/views.py, buat paparan untuk memproses maklum balas dan hantar pemberitahuan 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')

Paparan ini mengendalikan penyerahan borang, memuat naik media pilihan ke Pinata dan menghantar SMS menggunakan Twilio.

2.3. Mencipta Borang Maklum Balas
Buat borang HTML untuk menghantar maklum balas. Dalam folder templat anda, buat 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>

Imej Bahagian Hadapan

Imej Papan Pemuka Pinata menunjukkan fail yang dimuat naik

Langkah 3: Mengkonfigurasi Twilio dan Pinata

3.1. Sediakan Pembolehubah Persekitaran
Buat fail .env dalam direktori akar projek anda untuk menyimpan maklumat sensitif seperti kunci API Twilio dan Pinata:

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

Pastikan anda menambah .env pada fail .gitignore anda supaya ia tidak akan ditolak ke GitHub:

.env

3.2. Kemas kini settings.py untuk Menggunakan Pembolehubah Persekitaran
Gunakan python-decouple untuk memuatkan pembolehubah persekitaran dengan selamat daripada fail .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')

Langkah 4: Menolak ke GitHub

4.1. Mulakan Git dan Tekan ke GitHub

1. Memulakan repositori Git dalam akar projek anda:

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

1. Tambah repositori GitHub anda sebagai alat kawalan jauh dan tolak projek anda:

<p>git remote add origin https://github.com/yourusername/feedback-system.git<br>
git push -u origin main</p>

Kesimpulan

Dalam tutorial ini, anda telah membina sistem maklum balas tanpa nama yang selamat menggunakan Django, Twilio untuk pemberitahuan SMS dan Pinata untuk muat naik media. Anda juga telah mempelajari cara untuk menolak projek anda ke GitHub dan melindungi maklumat sensitif menggunakan pembolehubah persekitaran. Sistem ini memastikan privasi sambil membolehkan pengguna menyerahkan maklum balas dan menerima pemberitahuan SMS.

Jangan ragu untuk mengembangkan lagi sistem dengan menambahkan lebih banyak ciri atau meningkatkan keselamatan. Jika anda mendapati panduan ini membantu, kongsi maklum balas atau soalan anda dalam ulasan!

Repo kepada Projek boleh didapati di sini: Repo

Atas ialah kandungan terperinci Membina Sistem Maklum Balas Tanpa Nama Selamat dengan Django, Twilio dan Pinata. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!