[🛠] Log Pengembangan Secret Messenger #2: Flutter Web + Django, Roadmap, English

✨ Ringkasan GPT 　

Hari ketika tech stack dialihkan ke kombinasi Flutter Web + Django, lalu keseluruhan roadmap pengembangan dan lingkungan pengembangan berbasis bahasa Inggris ditetapkan.

🚀 Roadmap

To-Do List bertahap untuk Phase 1-4 — mencakup:

1. 🧠 Perencanaan proyek, pemilihan tech stack, dan pembelian domain
2. 🛠️ Build Flutter Web + integrasi static Django (local dev)
3. 🔗 Implementasi trigger API dasar
4. 🌐 Deployment VPS, setup Nginx, dan penyajian domain aman

---

✅ PHASE 1 — Perencanaan Awal & Keputusan Strategis

• 🧠 Menentukan cakupan proyek & strategi keamanan
  • Target pengguna: pembelot Korea Utara tanpa dokumen yang tinggal di China
  • Tujuan: menyediakan alat komunikasi aman, tersamar, dan berbasis browser
  • Strategi UX: meniru antarmuka kalkulator untuk menyembunyikan fungsi sebenarnya
• 🤖 Memilih pendekatan pengembangan berbantuan AI
  • Menggunakan GPT-4o dan o1 untuk membantu desain dan implementasi
  • Menerapkan workflow “Vibe Coding” — memakai bahasa alami dan prototyping iteratif dengan AI
• ⚙️ Memilih tech stack
  • Frontend: Flutter Web (untuk UI yang rapi dan terasa seperti aplikasi, disamarkan sebagai kalkulator)
  • Backend: Django + Django REST Framework (untuk API terstruktur, admin bawaan, dan keamanan)
  • Deployment: satu container VPS yang menyajikan file static Flutter dan Django API sekaligus
• 🌐 Membeli domain penyamaran
  • Domain: ___.net
  • Tujuan: tampilan utilitas kalkulator yang masuk akal
  • Harga: ₩18,000/tahun lewat registrar Korea

---

✅ PHASE 2 — Pengembangan Lokal: Integrasi Flutter Web + Django

🔧 1. Setup Lingkungan Proyek

• 🧱 Membuat proyek Django
  • django-admin startproject stealthcore .
• ⚙️ Membuat app Django (untuk API)
  • python manage.py startapp api
• 🧩 Menambahkan 'api' dan 'rest_framework' ke INSTALLED_APPS
• 🐍 Membuat virtual environment dan menginstal dependency
  • python -m venv venv && source venv/bin/activate
  • pip install django djangorestframework whitenoise

---

🛠️ 2. Build Flutter Web

• 💻 Menginisialisasi app Flutter
  • flutter create ____web
  • Mengganti UI default dengan TextField dan tombol Send
• 🧪 Mengirim input melalui http.post() ke /api/check-trigger/
• 🔨 Membuat output Web
  • flutter build web
• 📁 Memindahkan file build
  • Membuat folder frontend_static/ di root Django
  • cp -r build/web/* frontend_static/

---

⚙️ 3. Penyajian Static File Django

• 🧷 Memperbarui settings.py:

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

• (Opsional) Mengaktifkan WhiteNoise
  • Menambahkan 'whitenoise.middleware.WhiteNoiseMiddleware' ke MIDDLEWARE
• 🎛️ Menyalin build/web/index.html ke templates/index.html

• 🛠️ Memperbaiki path asset di index.html:

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

---

🔗 4. Menghubungkan Flutter ke Django

• 🧪 Membuat endpoint /api/check-trigger/
  • Menerima POST { input: "..." }
  • Mengembalikan { status: "success" } jika input adalah '1004'
• 🔐 Memastikan tidak ada string trigger di source frontend
• 🧪 Mengonfirmasi integrasi frontend dengan http.post(...)

---

✅ PHASE 3 — Deployment VPS (Vultr)

🛒 1. Setup Server

• Membuat instance Vultr (Ubuntu 22.04, RAM 1GB)
• 🔑 Menyiapkan akses SSH (ssh root@<ip>)
• 📦 Menginstal dependency:
  • sudo apt update && sudo apt upgrade
  • sudo apt install python3 python3-pip nginx git
  • sudo apt install certbot python3-certbot-nginx

---

🚀 2. Deploy Django

• Mengunggah proyek (scp atau git clone)
• Menyiapkan virtual environment
  • python3 -m venv venv && source venv/bin/activate
  • pip install -r requirements.txt
• 🔫 Menginstal dan menguji Gunicorn
  • pip install gunicorn
  • gunicorn stealthcore.wsgi:application

---

🌐 3. Menyajikan dengan Nginx

• Membuat konfigurasi 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;
      }
  }
  

• 🔐 Mengaktifkan HTTPS dengan Let’s Encrypt
  • sudo certbot --nginx -d ___.net
• 🔄 Me-restart Nginx:
  • sudo systemctl restart nginx

---

✅ PHASE 4 — Pengujian Akhir & Hardening

• 💻 Mengunjungi https://___.net
  • Memastikan UI kalkulator berhasil dimuat
• 🔍 Memasukkan '1004' di input Flutter dan mengirimnya
  • Django harus merespons dengan { "status": "success" }
• 🧪 Menguji input tidak valid agar mengembalikan pesan penolakan

---

✅ Catatan Akhir

• 🧼 Menghapus semua logika sensitif dari frontend
• 🔒 Melindungi endpoint API berikutnya dengan validasi token sesi
• 🧊 Memoles penyamaran: memperbarui ikon app, judul halaman, dan menambahkan elemen utilitas palsu
• 🧠 Menulis dokumen internal (deploy.md) untuk deployment yang bisa diulang

---

💭 Diary

Ada beberapa perubahan besar.

• Aku mengubah arah ke Flutter Web (Frontend) + Django (Backend).
  • Karena ke depannya, saat mengembangkan aplikasi, aku berniat terus mendorong kombinasi seperti ini.
  • Dan karena keduanya adalah framework yang pernah kupakai, jadi aku bisa berharap produktivitas yang jauh lebih cepat.
• Aku memutuskan bahwa semua documentation, comment, dan commit message akan ditulis dalam bahasa Inggris.
  • Karena menulis prompt dalam bahasa Inggris mungkin bisa memberi sedikit peningkatan performa.
  • Karena sebagian besar pengetahuan terbaru di dunia dibahas dalam bahasa Inggris.
  • Karena aku harus membiasakan diri terus memakai bahasa Inggris supaya makin akrab dengannya.
• Aku memutuskan bahwa Git Commit Message Convention harus mengikuti format standar industri pengembangan.

  • 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
    

  • Karena kalau tidak berniat hidup selamanya sebagai developer solo, membiasakan diri mengikuti standar industri sejak awal memang benar.
  • Karena nanti, kalau memakai program terkait Change log, formatnya harus standar supaya pesan bisa diparse dengan benar.

Kalau melihat roadmap-nya saja, rasanya sudah keluar guideline yang cukup enak untuk diikuti.

Besok aku harus terus meminta feedback dari GPT, merapikannya, lalu mengikuti roadmap itu apa adanya.