💳 Kuesioner Pemilihan E-Wallet Terbaik (Metode AHP)

Aplikasi kuesioner web interaktif berbasis metode Analytic Hierarchy Process (AHP) untuk mengevaluasi dan menentukan dompet elektronik (e-wallet) terbaik bagi transaksi digital di kalangan mahasiswa.

📸 Tangkapan Layar (Screenshots)

Halaman Identitas Responden

Petunjuk Pengisian Kuesioner

Level 1: Perbandingan Berpasangan Kriteria

Level 2: Perbandingan Sub-Kriteria

Level 3: Perbandingan Alternatif

✨ Fitur Utama

• Metode AHP (Analytic Hierarchy Process):
  • Level 1: Perbandingan berpasangan (pairwise comparison) antar kriteria utama.
  • Level 2: Perbandingan berpasangan antar sub-kriteria.
  • Level 3: Perbandingan berpasangan antar alternatif e-wallet berdasarkan sub-kriteria.
• Pengecekan Konsistensi Real-time (Consistency Ratio - CR):
  • Menghitung rasio konsistensi matriks perbandingan secara otomatis secara real-time.
  • Memberikan indikator visual apakah jawaban responden konsisten ($CR \le 0.1$) atau inkonsisten.
• Integrasi Discord Webhook:
  • Rekapitulasi hasil jawaban responden dikirimkan langsung ke Discord channel secara rapi menggunakan Discord Embeds.
• Modern & Responsive UI:
  • Tampilan elegan, responsif diakses melalui desktop maupun perangkat mobile.
  • Menggunakan komponen antarmuka yang aksesibel dan animasi interaktif.

📊 Struktur Hierarki AHP

1. Kriteria & Sub-Kriteria

Kriteria UtamaSub-KriteriaKeamananProteksi Data Pengguna, Keamanan SaldoKemudahan PenggunaanUI & UX, Kemudahan Registrasi & Verifikasi, Kecepatan Proses TransaksiFiturPromo & Cashback, Kerjasama Merchant & E-Commerce, Kelengkapan FiturBiaya Admin*(Kriteria Langsung*)Responsivitas Layanan*(Kriteria Langsung)*

2. Alternatif E-Wallet

• 🔵 Dana
• 🟣 Ovo
• 🟢 GoPay
• 🟠 ShopeePay

🛠️ Teknologi yang Digunakan

• Framework: React 19
• Build Tool: Vite 6
• Styling: Tailwind CSS v4 & tw-animate-css
• Komponen UI: Radix UI (Alert Dialog, Radio Group, Select, Label, Slot)
• Icons: Lucide React
• Integrasi: Discord Webhook API

🚀 Memulai (Getting Started)

Prasyarat

• Pastikan Node.js (versi 18 ke atas disarankan) sudah terpasang di komputer Anda.

Instalasi & Menjalankan Aplikasi

1. Clone repositori:

   Copy

   git clone git@github.com:Gefila/kuesioner-e-wallet.git
   cd kuesioner-e-wallet
   

2. Pasang dependensi:

   Copy

   npm install
   

3. Konfigurasi Environment Variable: Salin berkas .env.example menjadi .env:

   Copy

   cp .env.example .env
   

   Buka file .env dan masukkan Webhook URL Discord Anda:

   Copy

   VITE_WEBHOOK_URL=https://discord.com/api/webhooks/YOUR_WEBHOOK_ID/YOUR_WEBHOOK_TOKEN
   

4. Jalankan server pengembangan (development mode):

   Copy

   npm run dev
   

   Buka browser dan akses alamat yang tertera (biasanya http://localhost:5173).

📦 Perintah Script yang Tersedia

ScriptDeskripsinpm run devMenjalankan local development server dengan Vitenpm run buildMelakukan build aplikasi untuk tahap produksi (dist)npm run previewMeninjau hasil build produksi secara lokalnpm run hostMenjalankan Vite development server yang dapat diakses dari jaringan lokal (LAN)npm run lintMenjalankan linter ESLint untuk memeriksa kualitas kode

📁 Struktur Direktori Proyek

kuesioner-e-wallet/
├── public/                 # Static assets
├── src/
│   ├── assets/             # Gambar & file pembantu
│   │   └── utils/
│   │       └── webhookData.js  # Format payload Discord Webhook
│   ├── components/         # Komponen React
│   │   ├── pages/          # Halaman multi-step (Identitas, Level 1, 2, 3)
│   │   └── ui/             # Komponen UI Radix & Tailwind
│   ├── lib/                # Utility helper (cn / clsx / twMerge)
│   ├── App.jsx             # State utama & logika hierarki AHP
│   ├── index.css           # Konfigurasi Tailwind CSS
│   └── main.jsx            # Entry point aplikasi
├── .env.example            # Contoh template environment variable
├── package.json            # Daftar dependensi & scripts
└── vite.config.js          # Konfigurasi Vite

👤 Pembuat

Dibuat oleh Gefila Zona Pranata