Création d'un système de commentaires anonymes sécurisé avec Django, Twilio et Pinata

Dans ce guide, je vais vous guider dans la création d'un système de commentaires anonymes sécurisé à l'aide de Django, Twilio pour les notifications SMS, Pinata pour les téléchargements multimédias sécurisés et TailwindCSS pour un style réactif. À la fin de ce didacticiel, vous disposerez d'un système de commentaires entièrement fonctionnel dans lequel les utilisateurs pourront soumettre des commentaires, éventuellement télécharger des médias et recevoir des notifications par SMS, le tout dans un souci de sécurité et de confidentialité.

Démo : lien en direct

Principales caractéristiques :

• Soumission anonyme de commentaires : les utilisateurs peuvent soumettre des commentaires ou des demandes d'assistance de manière anonyme.
• Téléchargements multimédias sécurisés : les utilisateurs peuvent télécharger des fichiers multimédias en toute sécurité via Pinata, stockés sur IPFS.
• Notifications SMS Twilio : envoie automatiquement une confirmation par SMS aux utilisateurs via Twilio.
• Interface utilisateur réactive : conçue avec TailwindCSS pour un design transparent et moderne.

Technologies utilisées :

• Django : Framework backend pour le système de feedback.
• Twilio : gère les notifications par SMS.
• Pinata : fournit un stockage multimédia sécurisé basé sur IPFS.
• TailwindCSS : pour un style frontal réactif.

Étape 1 : configuration du projet et dépendances

1.1. Créer et configurer un environnement virtuel
Commencez par configurer l’environnement de votre projet. Assurez-vous que Python est installé et configurez un environnement virtuel :

python3 -m venv venv
source venv/bin/activate

Sous Windows :

venv\Scripts\activate

Installez les packages nécessaires :

pip install django twilio python-decouple requests gunicorn

1.2. Démarrer un projet Django
Initialisez un nouveau projet et une nouvelle application Django :

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

Étape 2 : Créer le système de soumission de commentaires

2.1. Créer un modèle de rétroaction
Définissez un modèle pour stocker les commentaires soumis dans 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}"

Ce modèle capture les commentaires, les e-mails, les numéros de téléphone et les URL de médias facultatifs.

2.2. Créer des vues pour gérer les commentaires et les notifications par SMS
Dans feedback/views.py, créez des vues pour traiter les commentaires et envoyer des notifications par 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')

Cette vue gère les soumissions de formulaires, télécharge des médias facultatifs sur Pinata et envoie des SMS à l'aide de Twilio.

2.3. Création du formulaire de commentaires
Créez un formulaire HTML pour soumettre des commentaires. Dans votre dossier de modèles, créez 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>

Image du Front-end

Image du tableau de bord Pinata montrant les fichiers téléchargés

Étape 3 : Configuration de Twilio et Pinata

3.1. Configurer les variables d'environnement
Créez un fichier .env dans le répertoire racine de votre projet pour stocker des informations sensibles telles que les clés API Twilio et 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

Assurez-vous d'ajouter .env à votre fichier .gitignore afin qu'il ne soit pas poussé vers GitHub :

.env

3.2. Mettre à jour settings.py pour utiliser les variables d'environnement
Utilisez python-decouple pour charger en toute sécurité les variables d'environnement à partir du fichier .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')

Étape 4 : Transférer vers GitHub

4.1. Initialisez Git et envoyez-le vers GitHub

1. Initialisez un dépôt Git à la racine de votre projet :

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

1. Ajoutez votre référentiel GitHub en tant que distant et poussez votre projet :

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

Conclusion

Dans ce didacticiel, vous avez créé un système de commentaires anonymes sécurisé en utilisant Django, Twilio pour les notifications SMS et Pinata pour les téléchargements multimédias. Vous avez également appris à transférer votre projet vers GitHub et à sécuriser les informations sensibles à l'aide de variables d'environnement. Ce système garantit la confidentialité tout en permettant aux utilisateurs de soumettre des commentaires et de recevoir des notifications par SMS.

N'hésitez pas à étendre davantage le système en ajoutant plus de fonctionnalités ou en améliorant la sécurité. Si vous avez trouvé ce guide utile, partagez vos commentaires ou vos questions dans les commentaires !

Le Repo du Projet peut être trouvé ici : Repo

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!