Bikin Halaman Dukungan Sendiri Tanpa Potongan: Panduan Setup viaQris

“Panduan lengkap dan santai cara pasang viaQris, platform dukungan kreator open-source yang pakai GitHub sebagai database gratis tanpa potongan biaya sepeser pun.”

💬 "Memberi dukungan kini semudah scan QR." Halaman Dukungan Kreator 100% Gratis yang Dikelola Sepenuhnya via GitHub.

Halo, teman-teman kreator! 👋 Pernahkah kamu merasa gemas karena uang dukungan (donasi) dari penonton yang harusnya utuh malah terpotong biaya admin platform pihak ketiga yang lumayan besar?

Nah, viaQris hadir sebagai penyelamat. Ini adalah platform open-source buatan lokal yang memungkinkanmu punya halaman dukungan sendiri. Uniknya, sistem ini memanfaatkan GitHub sebagai "gudang penyimpanan" gratis dan menggunakan QRIS Dinamis agar nominal donasi langsung otomatis terisi saat discan. Tanpa potongan, tanpa biaya bulanan!

💡 Biar Nggak Bingung: Apa Bedanya QRIS Statis dan Dinamis?

Sebelum masuk ke instalasi, bayangkan dua situasi ini di warung kopi:

QRIS Statis (Buku Menu Kosong): Ini kayak stiker QRIS yang biasa kamu lihat di kasir toko. Kalau orang mau bayar, mereka harus ketik sendiri nominal uangnya di aplikasi m-banking. Kadang salah ketik, atau lupa nulis berita transfer.
QRIS Dinamis (Nota Belanja Otomatis): Ini versi canggihnya. Begitu pendukung ngetik angka Rp50.000 di websitemu, QR code langsung berubah otomatis membawa angka Rp50.000 itu. Pendukung tinggal scan dan klik bayar tanpa perlu repot ngetik apa-apa lagi. viaQris bertugas membuat QRIS Dinamis ini secara instan!

✨ Fitur Andalan viaQris

✅ 100% Gratis & Tanpa Potongan – Duit donasi murni masuk ke rekeningmu tanpa disunat admin.
💳 QRIS Dinamis Otomatis – Nominal langsung tertera pas discan pakai GoPay, OVO, Dana, BCA, atau m-banking apa pun.
📂 GitHub sebagai "Database Gratis" – Nggak perlu sewa server mahal; data transaksi dicatat rapi langsung di akun GitHub pribadimu.
📊 Dashboard Transaksi – Biar kamu bisa senyum-senyum sendiri lihat riwayat dukungan yang masuk.
📄 Invoice Otomatis – Pendukung bisa download bukti dukung mereka yang tampilannya rapi banget.
⏳ Timer 5 Menit – Batas waktu pembayaran biar antrean QR code tetap bersih.

🚀 Dibangun Dengan Teknologi Apa Saja?

Buat kamu yang penasaran di balik layar, viaQris diracik menggunakan:

Next.js & React: Mesin utama yang bikin websitemu ngebut dan interaktif.
TypeScript: Biar kode programnya lebih "disiplin" dan minim error.
GitHub API: Berfungsi layaknya lemari arsip pribadi yang mencatat setiap ada yang kasih dukungan.
html2canvas & qrcode: Kombinasi maut buat bikin gambar QR code dan unduh invoice instan.

🛠️ Panduan Instalasi & Deployment (Step-by-Step ala Temen Ngopi)

Tenang, nggak serumit itu kok! Anggap saja kita lagi merakit meja belajar baru. Ikuti langkah santai di bawah ini ya:

Bagian 1: Menyiapkan "Lemari Arsip" di GitHub (Repository Data)

Karena kita butuh tempat nyimpen riwayat dukungan, kita bakal pakai repositori GitHub privat (rahasia).

Buka akun GitHub kamu, lalu buat New Repository baru.
Beri nama bebas, contohnya: data-viaqris. Pastikan visibilitasnya diatur ke Private (pribadi) supaya orang lain nggak bisa ngintip data donasimu.
Di dalam repository baru itu, buat file baru dengan jalur public/data.json dan isi dengan kurung siku buka-tutup seperti ini:

json

(Analoginya: Ini seperti menyiapkan laci kosong yang siap diisi catatan transaksi nanti).

Bagian 2: Membuat "Kunci Kamar" (GitHub Token)

Supaya website kamu bisa nulis data ke lemari arsip GitHub tadi, dia butuh kunci khusus bernama Personal Access Token.

Masuk ke Settings akun GitHub kamu (paling bawah di menu profil) -> pilih Developer settings.
Klik Personal access tokens -> pilih Tokens (classic).
Klik tombol Generate new token (classic).
Beri catatan nama tokennya (misal: Kunci viaQris).
Pada bagian daftar izin (scopes), centang kotak pada bagian repo (ini penting banget supaya aplikasinya punya izin baca-tulis data).
Gulir ke bawah, klik Generate token, lalu salin kodenya dan simpan di tempat aman (karena kode ini cuma muncul sekali!).

Bagian 3: Instalasi di Komputer Sendiri (Local Development)

Unduh (Clone) Kode Sumber viaQris Buka terminal/command prompt di komputer, lalu ketik:

Pasang Bahan-Bahan (Install Dependencies)

Meracik Lemari Rahasia (.env.local) Buat file baru bernama .env.local di dalam folder utama viaQris, lalu masukkan resep rahasia ini:

env

(Analoginya: Ini seperti memasukkan password Wi-Fi dan alamat rumah supaya aplikasinya tahu arah).

Nyalakan Mesin Lokal!

Buka browser kesayanganmu dan akses http://localhost:3000/dukungan. Yey, halaman dukunganmu sudah jalan secara lokal! 🎉

Bagian 4: Mengudara ke Internet (Deployment ke Vercel)

Supaya bisa diakses seluruh dunia lewat internet, kita pasang ke Vercel (gratis & ngebut):

Login ke Vercel pakai akun GitHub kamu, lalu klik Import Project dan pilih repositori viaQris.
Masuk ke menu Project Settings -> Environment Variables.
Masukkan seluruh variabel rahasia (GITHUB_TOKEN, DATA_STATIS_QRIS, dll) yang tadinya ada di file .env.local satu per satu ke Vercel.
Klik Deploy! Tunggu beberapa detik, dan halaman dukunganmu kini resmi mengudara dengan domain sendiri!

🗺️ Rencana Pengembangan (Roadmap)

[x] QRIS Dinamis otomatis untuk setiap nominal.
[x] Simpan data aman pakai GitHub API.
[x] Dashboard Transaksi yang interaktif.
[ ] Notifikasi instan via Telegram Bot (Segera!).
[ ] Pilihan kustomisasi tema warna dari dashboard (Segera!).

🤝 Ingin Ikut Berkontribusi?

Punya ide brilian atau menemukan celah bug? Kontribusi kamu sangat ditunggu! Silakan ikuti langkah-langkah ini:

Fork repositori ini.
Buat cabang baru: git checkout -b fitur/KerenBaru
Simpan perubahan: git commit -m 'Tambah fitur keren baru'
Kirim ke cabang: git push origin fitur/KerenBaru
Buka Pull Request dan mari kita diskusikan bersama!

📄 Lisensi

Proyek ini dirilis di bawah lisensi MIT. Bebas digunakan, dimodifikasi, dan disebarluaskan untuk kebaikan bersama.