Bangun Financial Dashboard Modern (React + Supabase + Google Sheets + Gemini) — Siap Android!
Halo, Sobat Cuan! Pingin pantau pemasukan & pengeluaran pakai dashboard yang cakep, cepat, dan mobile-friendly? Di artikel ini kita bikin Financial Dashboard dari repo Wimboro/financial-dashboard lengkap dengan login Supabase, data dari Google Sheets, dan AI Insights pakai Gemini. Mantap! GitHub
Apa yang Kamu Dapat 🎯
- Grafik interaktif: tren bulanan, pembagian kategori, detail harian.
- Mode gelap/terang, desain responsif.
- AI Insights: klik tombol “✨ Dapatkan Wawasan Pengeluaran”.
- Login aman via Supabase, sinkron real-time dari Google Sheets.
- Siap Android via Capacitor (build APK gampang). GitHub
Yang Kamu Butuhkan (Cepat Aja)
- Node.js + npm terpasang.
- Akun Supabase (Project URL + anon key).
- Google Sheet ID (dibuat publik “Anyone with the link can view”).
- Gemini API Key (Google AI Studio).
- (Opsional) Backend URL buat fitur hapus transaksi di produksi. GitHub
Setup Kilat ⚡
# 1) Clone & install
git clone https://github.com/Wimboro/financial-dashboard
cd financial-dashboard
npm install
# 2) Salin env
cp .env.example .env
Isi .env dengan nilai punyamu:
VITE_SUPABASE_URL=
VITE_SUPABASE_ANON_KEY=
VITE_GOOGLE_SHEET_ID=
VITE_GEMINI_API_KEY=
VITE_BACKEND_API_URL_LOCALHOST=http://localhost:4000/api
VITE_BACKEND_API_URL_PRODUCTION=
Semua variabel & struktur repo ada di README proyek. GitHub
Siapkan Layanannya
1) Supabase (Auth)
- Buat project → Settings → API → ambil Project URL & anon public key.
- Detail setup auth ada di
SUPABASE_SETUP.md. GitHub
2) Google Sheets (Sumber Data)
- Buat Sheet dengan kolom: Date, Description, Category, Amount (+ opsional User ID, Timestamp).
- Share: Anyone with the link can view.
- Ambil SHEET_ID dari URL:
.../spreadsheets/d/{SHEET_ID}/edit. GitHub
3) Gemini (AI Insights)
- Buka Google AI Studio, buat API key, tempel ke
.env. GitHub
Jalanin Aplikasi 🚀
# Dev mode (hot reload)
npm run dev
# build produksi
npm run build
npm run preview
# Cek kualitas
npm run lint
npx tsc --noEmit
Port default: http://localhost:5173. GitHub
Format Data di Google Sheets (Contoh)
| Date | Description | Category | Amount | User ID | Timestamp |
|---|---|---|---|---|---|
| 2024-01-15 | Coffee | Food | -5000 | user123 | 2024-01-15T10:30:00Z |
| 2024-01-15 | Salary | Income | 5000000 | user123 | 2024-01-15T09:00:00Z |
Catatan:
- + = pemasukan, – = pengeluaran
- Tanggal
YYYY-MM-DD, Category bebas (Food, Transport, Salary, dll). GitHub
Fitur di UI yang Bikin Betah 👀
- Monthly Trends: income vs expense per bulan
- Category Breakdown: pie chart pengeluaran
- Daily Analysis: detail transaksi harian
- Dark Mode toggle
- AI Insights dari Gemini via tombol “✨”
Semua fitur ini tersedia di repo & didokumentasikan di README. GitHub
Build Jadi APK Android 📱 (Opsional tapi Rekomended)
Prasyarat: Android Studio, JDK ≥ 11, Android SDK API ≥ 22, Node ≥ 16. GitHub
Langkah:
npm install -g @capacitor/cli
npm run build
npx cap sync android
npx cap open android
# Lalu build APK di Android Studio (Build → Build APKs)
Butuh rilis? ./gradlew assembleRelease di folder android/. Tips & troubleshooting ada di README Android. GitHub
Keamanan (Wajib Baca)
- Jangan commit
.envke repo publik. - Rutin rotate API key.
- Pisahkan env dev vs production. GitHub
Siap Gas? 💪
Itu dia—dashboard keuangan modern, ringan, dan bisa kamu bawa ke Android. Langsung oprek & kustom sesuai kebutuhanmu. Jangan lupa star repositorinya ya! GitHub
Referensi fitur & langkah lengkap ada di README repo. Artikel ini disesuaikan gaya tulisannya mengikuti konten di Hidden Cyber yang santai, jelas, dan praktis. Contoh tone & struktur bisa kamu lihat di postingan bot WhatsApp keuangan di situsmu. Hidden Cyber