[🛠] Diario de desarrollo de Secret Messenger #2: Flutter Web + Django, Roadmap, English

✨ Resumen de GPT 　

Un día dedicado a cambiar el stack técnico a Flutter Web + Django, y a establecer la hoja de ruta completa de desarrollo y un entorno de desarrollo basado en inglés.

🚀 Roadmap

Lista To-Do paso a paso para las fases 1-4, que cubre:

1. 🧠 Planificación del proyecto, selección del stack técnico y compra del dominio
2. 🛠️ Build de Flutter Web + integración estática con Django (desarrollo local)
3. 🔗 Implementación básica de la API de disparador
4. 🌐 Despliegue en VPS, configuración de Nginx y servicio seguro del dominio

---

✅ FASE 1 — Planificación inicial y decisiones estratégicas

• 🧠 Definir alcance del proyecto y estrategia de seguridad
  • Público objetivo: desertores norcoreanos indocumentados que viven en China
  • Objetivo: proporcionar una herramienta de comunicación segura, disfrazada y basada en navegador
  • Estrategia UX: imitar una interfaz de calculadora para ocultar la funcionalidad real
• 🤖 Elegir enfoque de desarrollo asistido por IA
  • Usar GPT-4o y o1 para ayudar en diseño e implementación
  • Aplicar un flujo de trabajo de “Vibe Coding”: usar lenguaje natural y prototipado iterativo con IA
• ⚙️ Elegir stack técnico
  • Frontend: Flutter Web (para una UI pulida, tipo app, disfrazada como calculadora)
  • Backend: Django + Django REST Framework (para API estructuradas, admin incorporado y seguridad)
  • Despliegue: un único contenedor VPS que sirve tanto archivos estáticos de Flutter como la API de Django
• 🌐 Comprar dominio de disfraz
  • Dominio: ___.net
  • Propósito: apariencia plausible de utilidad de calculadora
  • Precio: ₩18,000/año mediante registrador coreano

---

✅ FASE 2 — Desarrollo local: integración Flutter Web + Django

🔧 1. Configuración del entorno del proyecto

• 🧱 Crear proyecto Django
  • django-admin startproject stealthcore .
• ⚙️ Crear app Django (para API)
  • python manage.py startapp api
• 🧩 Añadir 'api' y 'rest_framework' a INSTALLED_APPS
• 🐍 Crear entorno virtual e instalar dependencias
  • python -m venv venv && source venv/bin/activate
  • pip install django djangorestframework whitenoise

---

🛠️ 2. Build de Flutter Web

• 💻 Inicializar app Flutter
  • flutter create ____web
  • Reemplazar la UI predeterminada por un TextField y un botón Send
• 🧪 Enviar entrada mediante http.post() a /api/check-trigger/
• 🔨 Generar salida Web
  • flutter build web
• 📁 Mover archivos del build
  • Crear carpeta frontend_static/ en la raíz de Django
  • cp -r build/web/* frontend_static/

---

⚙️ 3. Servicio de archivos estáticos en Django

• 🧷 Actualizar settings.py:

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

• (Opcional) Habilitar WhiteNoise
  • Añadir 'whitenoise.middleware.WhiteNoiseMiddleware' a MIDDLEWARE
• 🎛️ Copiar build/web/index.html a templates/index.html

• 🛠️ Corregir rutas de assets en index.html:

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

---

🔗 4. Conectar Flutter con Django

• 🧪 Crear endpoint /api/check-trigger/
  • Acepta POST { input: "..." }
  • Devuelve { status: "success" } si la entrada es '1004'
• 🔐 Asegurar que no existan cadenas de disparador en el código fuente del frontend
• 🧪 Confirmar la integración del frontend con http.post(...)

---

✅ FASE 3 — Despliegue en VPS (Vultr)

🛒 1. Configuración del servidor

• Crear una instancia de Vultr (Ubuntu 22.04, 1GB RAM)
• 🔑 Configurar acceso SSH (ssh root@<ip>)
• 📦 Instalar dependencias:
  • sudo apt update && sudo apt upgrade
  • sudo apt install python3 python3-pip nginx git
  • sudo apt install certbot python3-certbot-nginx

---

🚀 2. Desplegar Django

• Subir el proyecto (scp o git clone)
• Configurar entorno virtual
  • python3 -m venv venv && source venv/bin/activate
  • pip install -r requirements.txt
• 🔫 Instalar y probar Gunicorn
  • pip install gunicorn
  • gunicorn stealthcore.wsgi:application

---

🌐 3. Servir con Nginx

• Crear configuración de 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;
      }
  }
  

• 🔐 Habilitar HTTPS con Let’s Encrypt
  • sudo certbot --nginx -d ___.net
• 🔄 Reiniciar Nginx:
  • sudo systemctl restart nginx

---

✅ FASE 4 — Pruebas finales y endurecimiento

• 💻 Visitar https://___.net
  • Confirmar que la UI de calculadora carga correctamente
• 🔍 Introducir '1004' en el input de Flutter y enviar
  • Django debería responder con { "status": "success" }
• 🧪 Probar que una entrada inválida devuelve un mensaje de denegación

---

✅ Notas finales

• 🧼 Eliminar toda lógica sensible del frontend
• 🔒 Proteger futuros endpoints API con validación de token de sesión
• 🧊 Pulir el disfraz: actualizar icono de la app, título de página y añadir elementos falsos de utilidad
• 🧠 Escribir documentación interna (deploy.md) para despliegues repetibles

---

💭 Diario

Hubo grandes cambios como estos.

• Cambié la ruta a Flutter Web (Frontend) + Django (Backend).
  • Porque pienso seguir empujando con esa combinación cuando desarrolle apps en adelante.
  • Y porque ambos son frameworks que ya he usado, así que puedo esperar una productividad mucho más rápida.
• Decidí escribir toda la documentación, comentarios y mensajes de commit en inglés.
  • Porque si escribo prompts en inglés, puedo esperar aunque sea una pequeña mejora de rendimiento.
  • Porque la mayor parte del conocimiento más reciente del mundo se maneja en inglés.
  • Porque necesito acostumbrarme a usar inglés una y otra vez para que se vuelva más familiar.
• Decidí que la convención de mensajes de Git commit debe seguir obligatoriamente el formato estándar de la industria de desarrollo.

  • 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
    

  • Porque, salvo que vaya a vivir toda la vida como desarrollador en solitario, es correcto acostumbrarme desde ya a seguir el estándar de la industria.
  • Porque más adelante, si uso un programa relacionado con Change log, solo podrá parsear correctamente si el formato es estándar.

Solo mirando la hoja de ruta, creo que salió una guía lo bastante buena para seguirla.

Mañana seguiré recibiendo feedback de GPT, la puliré y luego intentaré seguirla tal cual.