[🛠] Journal de développement Secret Messenger #2 : Flutter Web + Django, roadmap, anglais

✨ Résumé de GPT 　

Une journée à basculer la stack technique vers Flutter Web + Django, puis à établir l’ensemble de la roadmap de développement et un environnement de développement fondé sur l’anglais.

🚀 Roadmap

To-Do List étape par étape pour les phases 1 à 4 — couvrant :

1. 🧠 Planification du projet, choix de la stack technique et achat du domaine
2. 🛠️ Build Flutter Web + intégration statique Django (dev local)
3. 🔗 Implémentation de base de l’API de déclenchement
4. 🌐 Déploiement VPS, configuration Nginx et service sécurisé du domaine

---

✅ PHASE 1 — Planification initiale et décisions stratégiques

• 🧠 Définir le périmètre du projet et la stratégie de sécurité
  • Public cible : transfuges nord-coréens sans papiers vivant en Chine
  • Objectif : fournir un outil de communication sécurisé, déguisé et basé sur le navigateur
  • Stratégie UX : imiter une interface de calculatrice pour dissimuler la vraie fonctionnalité
• 🤖 Choisir une approche de développement assistée par AI
  • Utiliser GPT-4o et o1 pour aider à la conception et à l’implémentation
  • Appliquer un workflow de “Vibe Coding” — langage naturel et prototypage itératif avec l’AI
• ⚙️ Choisir la stack technique
  • Frontend : Flutter Web (pour une UI soignée, proche d’une app, déguisée en calculatrice)
  • Backend : Django + Django REST Framework (pour des API structurées, l’admin intégré et la sécurité)
  • Déploiement : conteneur VPS unique servant à la fois les fichiers statiques Flutter et l’API Django
• 🌐 Acheter le domaine de déguisement
  • Domaine : ___.net
  • Objectif : apparence plausible d’utilitaire de calculatrice
  • Prix : ₩18,000/an via un bureau d’enregistrement coréen

---

✅ PHASE 2 — Développement local : intégration Flutter Web + Django

🔧 1. Configuration de l’environnement projet

• 🧱 Créer le projet Django
  • django-admin startproject stealthcore .
• ⚙️ Créer l’app Django (pour l’API)
  • python manage.py startapp api
• 🧩 Ajouter 'api' et 'rest_framework' à INSTALLED_APPS
• 🐍 Créer l’environnement virtuel et installer les dépendances
  • python -m venv venv && source venv/bin/activate
  • pip install django djangorestframework whitenoise

---

🛠️ 2. Build Flutter Web

• 💻 Initialiser l’app Flutter
  • flutter create ____web
  • Remplacer l’UI par défaut par un TextField et un bouton Send
• 🧪 Envoyer la saisie via http.post() vers /api/check-trigger/
• 🔨 Générer le build Web
  • flutter build web
• 📁 Déplacer les fichiers de build
  • Créer le dossier frontend_static/ à la racine Django
  • cp -r build/web/* frontend_static/

---

⚙️ 3. Service des fichiers statiques par Django

• 🧷 Mettre à jour settings.py :

  STATIC_URL = '/static/'
  STATICFILES_DIRS = [ BASE_DIR / 'frontend_static' ]
  

• (Optionnel) Activer WhiteNoise
  • Ajouter 'whitenoise.middleware.WhiteNoiseMiddleware' à MIDDLEWARE
• 🎛️ Copier build/web/index.html vers templates/index.html

• 🛠️ Corriger les chemins d’assets dans index.html :

  <script src="/static/main.dart.js"></script>
  

---

🔗 4. Connecter Flutter à Django

• 🧪 Créer l’endpoint /api/check-trigger/
  • Accepte POST { input: "..." }
  • Retourne { status: "success" } si la saisie vaut '1004'
• 🔐 Vérifier qu’aucune chaîne de déclenchement n’existe dans le code source frontend
• 🧪 Confirmer l’intégration frontend avec http.post(...)

---

✅ PHASE 3 — Déploiement VPS (Vultr)

🛒 1. Configuration serveur

• Créer une instance Vultr (Ubuntu 22.04, 1 Go RAM)
• 🔑 Configurer l’accès SSH (ssh root@<ip>)
• 📦 Installer les dépendances :
  • sudo apt update && sudo apt upgrade
  • sudo apt install python3 python3-pip nginx git
  • sudo apt install certbot python3-certbot-nginx

---

🚀 2. Déployer Django

• Uploader le projet (scp ou git clone)
• Configurer l’environnement virtuel
  • python3 -m venv venv && source venv/bin/activate
  • pip install -r requirements.txt
• 🔫 Installer et tester Gunicorn
  • pip install gunicorn
  • gunicorn stealthcore.wsgi:application

---

🌐 3. Servir avec Nginx

• Créer la config Nginx :

  server {
      listen 80;
      server_name ___.net;
  
      location /static/ {
          alias /home/youruser/project/frontend_static/;
      }
  
      location / {
          proxy_pass http://127.0.0.1:8000;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
      }
  }
  

• 🔐 Activer HTTPS avec Let’s Encrypt
  • sudo certbot --nginx -d ___.net
• 🔄 Redémarrer Nginx :
  • sudo systemctl restart nginx

---

✅ PHASE 4 — Tests finaux et durcissement

• 💻 Visiter https://___.net
  • Confirmer que l’UI de calculatrice se charge correctement
• 🔍 Saisir '1004' dans le champ Flutter et envoyer
  • Django doit répondre avec { "status": "success" }
• 🧪 Tester qu’une saisie invalide retourne un message de refus

---

✅ Notes finales

• 🧼 Retirer toute logique sensible du frontend
• 🔒 Protéger les futurs endpoints API par validation de jeton de session
• 🧊 Peaufiner le déguisement : mettre à jour l’icône de l’app, le titre de page et ajouter de faux éléments utilitaires
• 🧠 Rédiger une documentation interne (deploy.md) pour des déploiements reproductibles

---

💭 Journal

Il y a eu de grands changements comme ceux-ci.

• J’ai changé de direction vers Flutter Web (Frontend) + Django (Backend).
  • Parce que je pense continuer à pousser cette même combinaison quand je développerai des apps à l’avenir.
  • Et parce que ce sont deux frameworks que j’ai déjà utilisés, donc je peux espérer une productivité bien plus rapide.
• J’ai décidé d’écrire toute la documentation, tous les commentaires et tous les messages de commit en anglais.
  • Parce qu’écrire les prompts en anglais peut apporter, même légèrement, une amélioration de performance.
  • Parce que la plupart des connaissances les plus récentes du monde sont traitées en anglais.
  • Parce que je dois prendre l’habitude d’utiliser souvent l’anglais pour qu’il me devienne plus familier.
• J’ai décidé que la convention des messages de commit Git devait absolument suivre le format standard du secteur du développement.

  • from

    * 21adba0 25.04.03 Thu <Hyuk Min> Chore | README.md: Add more details to roadmap
    

  • to

    * 21adba0 25.04.03 Thu <Hyuk Min> docs(README): add more details to roadmap
    

  • Parce que, sauf si je compte vivre toute ma vie comme développeur solo, il est juste de prendre tôt l’habitude de suivre le standard du secteur.
  • Parce que plus tard, si j’utilise un programme lié aux change logs, il faudra un format standard pour que les messages soient parsables.

Si je regarde seulement la roadmap elle-même, je pense qu’elle donne des lignes directrices assez bonnes pour être suivies.

Demain, je devrais continuer à recevoir des retours de GPT, la peaufiner, puis la suivre telle quelle.