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
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
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
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')
4.1. Initialisez Git et envoyez-le vers GitHub
git init git add . git commit -m "Initial commit for feedback system"
<p>git remote add origin https://github.com/yourusername/feedback-system.git<br> git push -u origin main</p>
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!
Que faire si une erreur se produit dans le script de la page actuelle
Comment ouvrir le registre
Introduction à la signification des fenêtres de téléchargement cloud
Comment configurer les variables d'environnement Tomcat
Comment démarrer le service SVN
La différence entre UCOS et Linux
Solution au problème xlive.dll manquant
Quel est le format png
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
