WhisperCart — Intent-Based AI E-Commerce

"Whisper what you need. We'll find your cart."

Platform E-Commerce Berbasis Kecerdasan Buatan (Intent-Based AI)
Dikembangkan oleh Tim Marhas Digital Solutions

---

🏆 Prestasi & Pengakuan

• Juara 1 Kompetisi Web Development Tingkat SMA/K Se-Jawa Barat — INNOVENTURE Chapter II 2026 (Diselenggarakan oleh Himpunan Teknik Informatika & Universitas Komputer Indonesia / UNIKOM).

---

🎨 Arti & Filosofi Logo

Desain logo WhisperCart menggabungkan elemen geometris modern dan abstrak yang membentuk harmoni antara teknologi kecerdasan buatan (Artificial Intelligence) dan ekosistem e-commerce:

• Bentuk Abstrak Huruf "W" dan "C": Pola garis sudut tajam dan dinamis secara samar membentuk inisial W (Whisper) dan C (Cart). Sudut-sudut yang mengarah ke atas melambangkan pertumbuhan bisnis, efisiensi proses belanja, dan perkembangan teknologi yang adaptif.
• Elemen Lingkaran / Titik Fokus: Dua elemen lingkaran di bagian atas dan bawah mencerminkan fokus platform pada dua pilar utama ekosistem digital, yaitu Pengguna (Pelanggan) dan Sistem/AI. Hubungan posisi ini melambangkan interaksi yang mulus (seamless interaction) dalam mengenali intensi belanja pengguna secara presisi.
• Aksen Garis Diagonal Berkembang: Garis-garis tegas yang saling terhubung melambangkan jaringan data, integrasi sistem, dan konsep Smart Shopping Cart yang terstruktur. Ini menegaskan posisi WhisperCart sebagai Intent-Based AI E-Commerce yang solutif terhadap kebutuhan kontekstual dan anggaran pengguna.
• Representasi Warna Putih dan Bayangan (Shadow): Penggunaan warna putih bersih (clean white) dengan efek dimensi bayangan melambangkan transparansi, fleksibilitas aplikasi di berbagai media (multi-platform), serta pendekatan teknologi masa depan yang minimalis namun berdampak besar.

---

📖 Pendahuluan & Latar Belakang

Perkembangan teknologi e-commerce saat ini telah mengubah lanskap bisnis global dan menuntut adanya sistem yang mampu memberikan pengalaman berbelanja yang personal, sederhana, dan relevan bagi pengguna. Namun, sistem e-commerce tradisional yang ada saat ini masih sangat bergantung pada pendekatan pencarian berbasis kata kunci (keyword-based shopping). Kelemahan sistem ini adalah pengguna dituntut untuk mengetahui nama, merek, atau kategori spesifik dari produk yang ingin mereka beli.

Ketika seorang pengguna memiliki kebutuhan yang kontekstual, seperti mencari "kombinasi pakaian casual untuk kencan dengan batas anggaran Rp500.000", mereka harus melakukan pencarian produk secara terpisah, membandingkan harga secara manual, dan menyusun kombinasi tersebut sendiri. Proses ini tidak efisien dan sering kali membingungkan konsumen secara drastis.

Untuk mengatasi batasan tersebut, tim Marhas Digital Solutions menginisiasi proyek pengembangan WhisperCart, sebuah aplikasi web e-commerce berbasis AI (Intent-Based AI E-Commerce). Berbeda dengan platform konvensional, WhisperCart mengubah paradigma berbelanja dari mencari kata kunci menjadi menyampaikan kebutuhan secara natural melalui percakapan bahasa sehari-hari.

---

🎯 Rumusan Masalah, Tujuan & Manfaat Proyek

❓ Rumusan Masalah

1. Bagaimana merancang dan membangun platform e-commerce WhisperCart yang mampu menganalisis maksud belanja (shopping intent) pengguna berbasis bahasa natural?
2. Bagaimana mengimplementasikan fitur AI Shopping Assistant dan AI Bundle Generator agar dapat menyusun rekomendasi produk yang relevan dan interaktif sesuai dengan anggaran pengguna?
3. Bagaimana mengintegrasikan sistem analisis AI tersebut dengan proses transaksi e-commerce standar seperti manajemen keranjang, checkout, hingga konfirmasi pesanan?

🎯 Tujuan Proyek

1. Menghasilkan platform e-commerce WhisperCart dengan pendekatan intent-based shopping yang fungsional.
2. Menerapkan modul kecerdasan buatan (AI Shopping Assistant & Bundle Generator) untuk memproses preferensi gaya, kesempatan, dan batasan dana pengguna secara otomatis.
3. Mengembangkan alur transaksi e-commerce yang lengkap dan dinamis, mulai dari eksplorasi produk interaktif hingga proses checkout pesanan.

💡 Manfaat Proyek

• Bagi Pengguna: Memberikan pengalaman berbelanja yang jauh lebih praktis, hemat waktu, dan personal karena pengguna cukup membisikkan atau mengetik kebutuhan mereka tanpa perlu pusing memikirkan kata kunci produk.
• Bagi Akademisi / Pengembang Web: Menjadi referensi nyata mengenai implementasi teknologi AI (khususnya Natural Language Processing atau Intent Analysis) yang diintegrasikan langsung ke dalam arsitektur aplikasi web e-commerce modern.

---

👥 Target Pengguna

1. Masyarakat Umum & Pengguna Awam: Pembeli yang menginginkan proses belanja praktis tanpa harus meluangkan waktu menyortir kategori produk secara manual satu per satu.
2. Pembeli dengan Kebutuhan Spesifik (Contextual & Budget-Oriented): Pengguna yang berbelanja untuk acara tertentu (misal: pernikahan, kencan, atau naik gunung) dengan batas anggaran ketat dan ingin langsung mendapatkan rekomendasi paket lengkap.

---

✨ Spesifikasi & Fitur Utama Website

1. 💬 AI Shopping Assistant

   • Kolom input utama di mana pengguna cukup mengetikkan narasi kebutuhannya secara bebas. Sistem akan mengekstrak informasi berupa kategori, gaya, warna, kesempatan penggunaan, hingga batas anggaran secara real-time.

2. 📦 AI Bundle Generator (Paket Hemat & Paket Komplit)

   • Logika sistem yang secara otomatis menggabungkan beberapa produk relevan dari katalog menjadi satu paket hemat atau komplit.
   • Logika Integritas Kelompok Paket: Jika pengguna menambahkan Paket Hemat atau Paket Komplit, seluruh item paket masuk sebagai satu kesatuan. Mengganti ke paket lain akan memperbarui paket di keranjang tanpa menghapus item belanja individual lainnya.

3. 🎙️ Voice Search Integration (Live Voice Mode)

   • Fitur pencocokan niat belanja berbasis percakapan suara interaktif memanfaatkan Web Speech API bawaan peramban.

4. 🔄 Interactive Adjustment System

   • Fitur penyesuaian interaktif yang memungkinkan pengguna meminta alternatif produk yang lebih murah atau mengubah pilihan tanpa harus mengulang proses pencarian dari awal.

5. 🛍️ Modul E-Commerce Standar & Simulator Pembayaran

   • Fasilitas belanja lengkap mencakup katalog produk responsif, keranjang belanja (shopping cart), manajemen transaksi checkout dengan simulator pembayaran digital (QRIS & Virtual Account BCA/Mandiri dengan countdown timer 15 menit), serta konfirmasi pesanan.

---

🏗️ Arsitektur & Teknologi Pengembangan (Tech Stack)

Front-End

• HTML5 & CSS3: Menyusun kerangka dasar dan gaya visual seluruh halaman antarmuka web.
• Bootstrap 5: Framework CSS untuk mempercepat pembuatan desain antarmuka yang modern dan responsif.
• JavaScript (Vanilla JS): Mengatur elemen interaktif halaman dinamis pada sisi klien (client-side) secara ringan tanpa framework bloat.

Back-End

• Node.js & Express.js: Framework server yang menangani arsitektur API, routing, dan logika bisnis utama aplikasi.
• OpenRouter API / Gemini API: Integrasi kecerdasan buatan untuk memproses input teks percakapan dan mendeteksi maksud belanja pengguna (intent parsing).

Database & Deployment

• Supabase: Mengelola dan menyimpan data katalog produk serta transaksi pengguna secara real-time.
• Vercel: Platform serverless cloud deployment untuk menghosting aplikasi web secara stabil.

---

📊 Laporan Progress Pengerjaan (8 Hari Mandiri)

Hari	Tanggal	Aktivitas Pengerjaan Proyek	Detail Progress
1	11 Agustus 2026	Instalasi dan Konfigurasi Template & Lingkungan Proyek	Setup repositori GitHub, instalasi template Bootstrap 5, konfigurasi environment backend Node.js + Express.js, dan inisialisasi proyek Supabase.
2	12 Agustus 2026	Perancangan Basis Data dan Arsitektur Sistem	Berdiskusi dengan bantuan AI untuk merancang struktur skema database pada Supabase serta menyusun diagram alur kerja (workflow) sistem.
3	13 Agustus 2026	Pengembangan dan Integrasi Backend API Awal	Membangun fondasi server menggunakan Express.js serta mengintegrasikan API dasar untuk fungsi autentikasi seperti fitur Simple Login.
4	14 Agustus 2026	Integrasi Antarmuka Utama dan Struktur Keranjang	Menyelesaikan interaktivitas Halaman Utama, struktur modul keranjang belanja (shopping cart), dan penyusunan draf awal PDF laporan akhir proyek.
5	15 Agustus 2026	Integrasi Fitur AI Rekomendasi Belanja	Menghubungkan backend ke OpenRouter API untuk mengaktifkan asisten AI, membangun logika intent parsing, serta menampilkan rekomendasi dan paket bundel otomatis di frontend.
6	16 Agustus 2026	Implementasi Fitur Voice dan Pencarian Pintar	Mengembangkan fitur Voice Search (pencarian berbasis suara) dan pencarian produk berbasis pemrosesan bahasa alami menggunakan kecerdasan buatan.
7	17 Agustus 2026	Implementasi Fitur Pendukung dan Finalisasi Laporan	Mengintegrasikan fitur manajemen profil (Kelola Akun), fitur pelengkap e-commerce lainnya, serta menyelesaikan penyusunan PDF dokumen penjelasan proyek.
8	18 Agustus 2026	Quality Assurance (QA) Testing dan Deployment	Melakukan pengujian menyeluruh terhadap performa AI dan fungsi transaksi, memperbaiki kesalahan kode (bug fixing), serta melakukan pengiriman karya.

---

💻 Panduan Menjalankan Proyek Secara Lokal

1. Klon Repositori:

   git clone https://github.com/RyukaAngga/WhisperCart.git
   cd WhisperCart

2. Instal Dependensi:

   npm install

3. Konfigurasi Environment (.env): Salin .env.example ke .env di folder server dan sesuaikan kunci API (Supabase & OpenRouter/Gemini).

4. Jalankan Server Lokal:

   npm start

5. Buka di Browser: Akses http://localhost:5000 atau buka index.html.

---

Hak Cipta © 2026 Marhas Digital Solutions. All Rights Reserved.
WhisperCart — Intent-Based AI E-Commerce