Aplikasi Si Pintar Pencatat Keuangan

 

Dokumentasi Aplikasi Web: Si Pintar Pencatat Pengeluaran

1. Deskripsi

Si Pintar Pencatat Pengeluaran adalah sebuah aplikasi web yang dirancang untuk merevolusi cara pengguna mencatat pengeluaran harian. Aplikasi ini memanfaatkan kekuatan kecerdasan buatan (AI) dari Google Gemini untuk memberikan pengalaman input data yang akurat dan efisien. Pengguna tidak lagi terbatas pada pengetikan manual; mereka dapat mendiktekan pengeluaran melalui suara, mengunggah gambar struk, atau bahkan memindai struk langsung dengan kamera.
Aplikasi ini bersifat client-side (berjalan sepenuhnya di browser pengguna), membuatnya sangat ringan. Fleksibilitasnya memungkinkan pengguna memilih antara mode menggunakan Kunci API Gemini pribadi dan mode menggunakan akun Google Gemini), memberikan kontrol penuh kepada pengguna.
Akses ke aplikasi ini klik >> https://catatpengeluaran.isparmo.com/ 

2. Fitur-Fitur

• Pilihan Mode Penggunaan AI:

• Mode API Gemini: Dengan mengonfigurasi Kunci API Gemini, ada fitur untuk melihat riwayat pengeluaran dan grafiknya, langusng di aplikasi.

• Mode Akun Gemini: Tanpa Kunci API, pengguna diarahkan ke akun Gemini mereka untuk melakukan analisis data, memberikan alternatif yang tetap fungsional.

• Tiga Metode Input Cerdas:

1. Input dengan Suara: Mendukung bahasa alami dalam Bahasa Indonesia, termasuk frasa waktu relatif seperti "kemarin" atau "dua hari yang lalu".

2. Upload Struk Belanja: Mengunggah gambar struk dari galeri untuk dianalisis secara otomatis.

3. Scan Struk dengan Kamera: Membuka kamera perangkat secara langsung untuk memfoto dan menganalisis struk (dioptimalkan untuk mobile).

• Penyimpanan Data Fleksibel:

• Integrasi Google Sheets: Data dapat disimpan dengan aman dan terorganisir di Google Sheet pribadi pengguna melalui Google Apps Script.

• Ekspor ke CSV: Pengguna dapat mengunduh riwayat pengeluaran mereka sebagai file CSV untuk penggunaan offline atau analisis lebih lanjut.

• Antarmuka Pengguna Intuitif:

• Panduan Interaktif: Jendela pop-up memandu pengguna langkah demi langkah dalam proses konfigurasi Kunci API dan koneksi ke Google Sheets.

• Desain Responsif: Tampilan yang bersih dan adaptif di berbagai perangkat, dari desktop hingga mobile.

• Progress Bar Visual: Memberikan umpan balik yang jelas saat AI sedang memproses data.

3. Teknologi yang Dipakai

• Frontend:

• HTML5: Struktur dasar aplikasi web.

• Tailwind CSS: Kerangka kerja CSS untuk membangun antarmuka yang modern dan responsif dengan cepat.

• JavaScript (ES6+): Menangani semua logika aplikasi, interaksi DOM, manajemen status (pilihan API), dan komunikasi dengan layanan eksternal.

• Kecerdasan Buatan (AI):

• Google Gemini API (model gemini-2.0-flash): Inti dari fitur cerdas, digunakan untuk Natural Language Understanding (NLU) pada input suara dan Optical Character Recognition (OCR) pada gambar struk.

• Web Speech API: API bawaan browser untuk menangkap audio dari mikrofon pengguna.

• Penyimpanan & Backend Sederhana:

• Google Sheets: Berfungsi sebagai database gratis dan mudah diakses.

• Google Apps Script: Bertindak sebagai backend minimalis untuk menerima data dari aplikasi (via doPost) dan menuliskannya ke Google Sheets.

• Local Storage Browser: Menyimpan preferensi pengguna seperti pilihan mode AI, Kunci API, dan URL Google Sheet Web App.

4. Untuk Siapa Saja

Aplikasi ini dirancang untuk:

• Individu & Mahasiswa: Yang ingin memulai kebiasaan mencatat keuangan dengan cara yang tidak merepotkan.

• Profesional Sibuk: Yang membutuhkan cara cepat untuk mencatat pengeluaran di tengah kesibukan.

• Pengguna GitHub Pages: Developer atau individu yang ingin meng-hosting aplikasi personal tanpa biaya server.

• Keluarga: Untuk melacak pengeluaran rumah tangga secara transparan.

• Siapa Saja yang Lelah dengan Input Manual: Pengguna yang menginginkan efisiensi dan akurasi yang ditawarkan oleh AI.

5. Cara Menggunakan

A. Pengaturan Awal (Wajib)

Saat pertama kali membuka aplikasi, Anda akan disambut dengan pilihan:

1. Gunakan Kunci API Gemini: Pilih ini untuk pengalaman otomatis. Anda akan diminta memasukkan Kunci API yang bisa didapat dari Google AI Studio. Setelah disimpan, fitur suara dan scan akan berfungsi penuh.

2. Gunakan Akun Gemini (Google): Pilih ini jika Anda tidak memiliki atau tidak ingin menggunakan Kunci API. Saat Anda menggunakan fitur suara atau scan, aplikasi akan membuka tab baru ke laman Gemini, di mana Anda bisa melanjutkan proses secara manual.

B. Menghubungkan ke Google Sheet

Untuk menyimpan data secara online, Anda perlu menghubungkan aplikasi ke Google Sheet:

Langkah 1: Buat Spreadsheet Baru

Tindakan pertama adalah menyiapkan "rumah" untuk data Anda.

1. Buka browser Anda dan kunjungi https://docs.google.com/spreadsheets/create .

2. Anda akan langsung diarahkan ke sebuah Spreadsheet baru yang kosong. Beri nama spreadsheet ini sesuka Anda, misalnya "Data Pengeluaran Pribadi".

3. Penting: Anda tidak perlu membuat header kolom (Timestamp, Tanggal Pembelian, dll.) secara manual. Skrip yang akan kita pasang nanti akan membuatnya secara otomatis untuk Anda.

Langkah 2: Buka Editor Apps Script

Setiap Google Sheet memiliki editor skrip tersembunyi. Di sinilah kita akan meletakkan "jembatan" antara aplikasi dan spreadsheet Anda.

1. Di menu Google Sheet Anda, klik Ekstensi.

2. Pilih Apps Script.

3. Sebuah tab baru akan terbuka yang berisi editor kode.

Langkah 3: Salin dan Tempel Kode Script

Sekarang kita akan memasukkan kode pintar yang akan menangani penyimpanan data.

1. Di dalam editor Apps Script, hapus semua contoh kode yang mungkin sudah ada.

2. Kembali ke aplikasi Pintar Pencatat Pengeluaran, buka panduan setup, dan klik tombol "Salin" pada kotak kode di Langkah 2. Ini script nya:

/**

 * Script untuk MENERIMA (doPost) dan MENGIRIM (doGet) data

 * dari Web App Pencatat Pengeluaran.

 */

// Fungsi untuk MENYIMPAN data ke Sheet

function doPost(e) {

  try {

    const sheetName = "Pengeluaran";

    const ss = SpreadsheetApp.getActiveSpreadsheet();

    let sheet = ss.getSheetByName(sheetName);

    if (!sheet) {

      sheet = ss.insertSheet(sheetName);

      const headers = ["Timestamp", "Tanggal Pembelian", "Toko/Tempat", "Item", "Total Pengeluaran"];

      sheet.appendRow(headers);

    }

    const data = JSON.parse(e.postData.contents);

    const newRow = [

      new Date(),

      data.date || "",

      data.store || "",

      data.items || "",

      data.total || ""

    ];

    sheet.appendRow(newRow);

   

    return ContentService

      .createTextOutput(JSON.stringify({ "status": "success" }))

      .setMimeType(ContentService.MimeType.JSON);

  } catch (error) {

    Logger.log(error);

    return ContentService

      .createTextOutput(JSON.stringify({ "status": "error", "message": error.toString() }))

      .setMimeType(ContentService.MimeType.JSON);

  }

}

// --- FUNGSI BARU ---

// Fungsi untuk MENGAMBIL data dari Sheet dan mengirimkannya ke Web App

function doGet(e) {

  try {

    const sheetName = "Pengeluaran";

    const ss = SpreadsheetApp.getActiveSpreadsheet();

    const sheet = ss.getSheetByName(sheetName);

    // Jika sheet tidak ada, kembalikan array kosong

    if (!sheet) {

      return ContentService

        .createTextOutput(JSON.stringify({ status: "success", data: [] }))

        .setMimeType(ContentService.MimeType.JSON);

    }

    const dataRange = sheet.getDataRange();

    const values = dataRange.getValues();

    // Jika hanya ada header (atau kosong), kembalikan array kosong

    if (values.length <= 1) {

      return ContentService

        .createTextOutput(JSON.stringify({ status: "success", data: [] }))

        .setMimeType(ContentService.MimeType.JSON);

    }

    const headers = values.shift(); // Ambil baris header dan hapus dari data

    const data = values.map(row => {

      const rowObject = {};

      headers.forEach((header, index) => {

        rowObject[header] = row[index];

      });

      return rowObject;

    });

    // Kembalikan data dalam format JSON

    return ContentService

      .createTextOutput(JSON.stringify({ status: "success", data: data }))

      .setMimeType(ContentService.MimeType.JSON);

  } catch (error) {

    Logger.log(error);

    return ContentService

      .createTextOutput(JSON.stringify({ status: "error", message: error.toString() }))

      .setMimeType(ContentService.MimeType.JSON);

  }

}

3. Tempelkan kode yang sudah Anda salin ke dalam editor Apps Script yang kosong.

4. Klik ikon Simpan proyek (gambar disket) di bagian atas.

Langkah 4: Deploy Script sebagai Web App

"Deploy" berarti kita mempublikasikan skrip ini agar bisa diakses oleh aplikasi kita.

1. Di pojok kanan atas editor Apps Script, klik tombol biru Deploy.

2. Pilih New deployment.

3. Sebuah jendela baru akan muncul. Klik ikon gerigi (⚙️) di sebelah kiri "Select type", lalu pilih Web app.

4. Pada bagian deskripsi, Anda bisa mengisinya (opsional).

5. Pada bagian "Who has access", ubah dari "Only myself" menjadi "Anyone". Ini sangat penting agar aplikasi bisa mengirim data.

6. Klik tombol Deploy.

Langkah 5: Otorisasi Akun Google Anda

Google perlu memastikan bahwa Anda benar-benar memberikan izin kepada skrip ini untuk menulis data ke Sheet Anda.

1. Sebuah jendela "Authorize access" akan muncul. Klik tombol Authorize access.

2. Pilih akun Google Anda.

3. Anda akan melihat layar peringatan "Google hasn’t verified this app". Ini normal karena skrip ini Anda buat sendiri. Klik Advanced.

4. Klik tulisan "Go to ... (unsafe)" di bagian bawah.

5. Scroll ke bawah dan klik tombol Allow untuk memberikan izin.

Langkah 6: Salin dan Simpan URL Web App

Ini adalah langkah terakhir untuk menghubungkan semuanya.

1. Setelah otorisasi berhasil, Anda akan melihat jendela "Deployment successfully updated" yang berisi Web app URL.

2. Klik tombol Copy untuk menyalin URL tersebut.

3. Kembali ke aplikasi Pintar Pencatat Pengeluaran, tempelkan URL yang baru saja Anda salin ke dalam kolom input pada Langkah 4 di panduan.

4. Klik tombol Simpan.

Selesai! Aplikasi Anda kini telah terhubung sepenuhnya dengan Google Sheet. Setiap kali Anda menyimpan data, data tersebut akan secara otomatis muncul di spreadsheet Anda.

6. Saran Pengembangan di Masa Depan

1. Dasbor Visualisasi Data & Laporan Otomatis:

• Gambaran: Menambahkan tab atau halaman baru di dalam aplikasi yang mengambil data dari Google Sheet dan menampilkannya dalam bentuk grafik (misalnya, diagram lingkaran pengeluaran per kategori, tren pengeluaran bulanan). Pengguna juga bisa mendapatkan laporan PDF bulanan yang dikirim ke email mereka.

• Manfaat: Mengubah aplikasi dari sekadar alat pencatat menjadi alat analisis keuangan pribadi yang memberikan wawasan mendalam kepada pengguna.

2. Kategorisasi Otomatis & Fitur Anggaran (Budgeting):

• Gambaran: Memperbarui prompt Gemini untuk tidak hanya mengekstrak item, tetapi juga mengkategorikannya secara otomatis (misalnya, "Kopi Starbucks" -> "Makanan & Minuman"). Pengguna kemudian dapat menetapkan batas anggaran untuk setiap kategori. Aplikasi akan memberikan notifikasi visual jika pengeluaran mendekati batas.

• Manfaat: Membantu pengguna untuk lebih proaktif dalam mengelola keuangan, bukan hanya reaktif mencatat pengeluaran.

3. Fitur Pengingat & Pencatatan Berulang:

• Gambaran: Pengguna dapat mengatur pengeluaran rutin (misalnya, "Bayar langganan Netflix setiap tanggal 25"). Aplikasi akan secara otomatis menambahkan entri tersebut setiap bulan atau memberikan notifikasi pengingat kepada pengguna untuk mencatatnya.

• Manfaat: Mengurangi beban pengguna untuk mengingat dan mencatat pengeluaran yang bersifat rutin, sehingga meningkatkan konsistensi pencatatan.