Web Application Efisiensi Server Integrasi Google API

Sistem Monitoring Digitalisasi Pendidikan

Sebuah solusi cerdas untuk memantau distribusi bantuan peralatan TIK ke ribuan sekolah. Dirancang khusus untuk menghemat biaya server instansi dengan cara menitipkan file bukti foto ke Google Drive dan menggunakan Google Sheets sebagai pangkalan datanya.

Kunjungi Sistem Live

digitalisasi.bpmpdiy.id

Peran Saya

Full-Stack Developer

Platform

Sistem Monitoring Terpusat

Instansi

BPMP DIY

Solusi Inti

Efisiensi via Google API

Bagaimana Sistem Ini Bekerja? (Alur Logis)

1. Pengisian Data yang Cerdas

Pengguna tidak perlu mengetik nama sekolah manual. Cukup pilih nama Kabupaten dan Jenjang, lalu sistem otomatis memunculkan nama sekolah yang sesuai. Formulirnya juga dibuat bertahap (Langkah 1, 2, 3) agar pengguna tidak merasa pusing melihat banyak kolom isian sekaligus.

2. Foto Dikecilkan & Langsung Dikirim ke Google

Jika sekolah mengunggah foto langsung dari HP, ukurannya pasti sangat besar dan bisa membuat server kita down. Solusinya: foto tersebut dikecilkan dulu otomatis di browser pengguna, lalu dikirim secara bersamaan langsung ke Google Drive. Server lokal kita sama sekali tidak terbebani file berat.

3. Antrean Pencatatan (Biar Tidak Loading Lama)

Setelah foto masuk ke Google Drive, data laporannya dicatat ke Google Sheets. Tapi karena proses ke Sheets itu agak lambat, pengguna tidak disuruh menunggu. Sistem akan langsung memunculkan pesan "Berhasil Terkirim!", sementara pekerja di belakang layar (Queue) yang akan perlahan-lahan menuliskannya ke Sheets.

4. Dashboard Cepat & Interaktif

Saat Kepala Dinas membuka Dashboard, grafiknya muncul seketika karena data sudah disimpan di memori sementara (Cache). Meskipun sekolah melapor mencicil, perhitungan grafik akan menyatukannya secara akurat berdasarkan nomor identitas (NPSN).

01 Masalah Formulir yang Membingungkan

Masalah: Jika pengguna dihadapkan pada puluhan isian sekaligus, mereka rentan melakukan kesalahan (human error).
Solusi: Saya menerapkan konsep Form Wizard (langkah bertahap). Jika pengguna mengaku hanya menerima bantuan Laptop, maka kotak unggah untuk Hardisk otomatis disembunyikan agar form tetap ringkas.

02 Masalah Server Instansi yang Terbatas

Masalah: Instansi tidak punya server berkapasitas besar untuk menampung ribuan foto dari sekolah se-DIY.
Solusi: Server lokal hanya bertugas menjadi "tukang stempel" perizinan. File fisik foto-foto tersebut "dilempar" secara massal langsung ke Google Drive instansi yang kapasitasnya gratis dan memadai.

03 Masalah Jaringan API Sering Putus

Masalah: Menghubungi layanan luar seperti Google Sheets sering kali timeout atau lambat, membuat layar pengguna hang.
Solusi: Proses diserahkan pada Sistem Antrean (Queue). Pengguna bisa menutup halaman karena tugas mencatat diurus oleh robot belakang layar. Jika error, data ditampung di Failed Jobs untuk dicoba lagi nanti.

04 Masalah Perhitungan Data di Google Sheets

Masalah: Google Sheets hanyalah tabel biasa, bukan sistem *database* canggih yang pintar menghitung data tumpang tindih.
Solusi: Saya menanamkan kecerdasan perhitungan pada browser pengguna (Client-side Aggregation). Browser akan menyaring dan menjumlahkan fisik barang secara akurat berdasarkan kunci NPSN sekolah.

Pilihan Teknologi (Tech Stack)

Dasar: PHP & Laravel MVC
Penyimpanan: Google Drive API
Basis Data: Google Sheets API
Proses Berat: Background Queue
Visualisasi: JavaScript & Chart.js

Pemenuhan Standar Kompetensi SKKNI

J.620100.005.01 Mengimplementasikan User Interface

Memecah proses pelaporan yang panjang menjadi tahapan dialog yang saling berkaitan (Form Wizard).
Mengatur kondisi aktif/pasif tombol. Kolom isian spesifik aktif jika tahapan sebelumnya valid.

J.620100.019.002 Menggunakan Library Pre-Existing

Alih-alih membuat penyimpanan sendiri, efisien meminjam fasilitas luar (Google API) hemat biaya.
Menggunakan ulang (reuse) kode perizinan Google pada berbagai modul untuk cegah duplikasi.

J.620100.016.01 Penulisan Kode Sesuai Best Practices

Memperhitungkan efisiensi server. Menyimpan data di memori (Cache) kurangi panggilan API.
Terdapat jaring pengaman (Try-Catch). Error tidak merusak aplikasi, dicatat rapi di "Gagal".

J.620100.015.01 Menyusun Sumber Daya Pemrograman

Memisahkan kode View, Controller, dan Jobs dalam folder rapi sesuai standar Laravel MVC.
Memberikan komentar di dalam kode program agar mudah dipelajari staf IT instansi (Maintainability).

Bukti Implementasi Kode (Code Showcase)

Tiga potongan kode kunci yang membuktikan bagaimana sistem ini menangani masalah efisiensi performa dan kecepatan.

Unggah File Jalur Tol

Kode ini berfungsi melemparkan ke-8 file foto dan dokumen secara bersamaan langsung ke Google Drive. Trik Promise.all membuat durasi unggah menjadi seketika.

input.js (Sisi Pengguna)

uploadSerentak()

// MENGUNGGAH KE-8 FILE SEKALIGUS (PARALEL) KE GOOGLE
Swal.update({ html: 'Mengunggah file langsung ke server Google...' });

const [urlFLaptop, urlSerLaptop, urlFHdd, urlSerHdd, urlFIfp, urlSerIfp, urlBast, urlBapp] = await Promise.all([
    uploadLangsungKeGoogle(fLaptop, folderId),
    uploadLangsungKeGoogle(fSerLaptop, folderId),
    uploadLangsungKeGoogle(fHdd, folderId),
    uploadLangsungKeGoogle(fSerHdd, folderId),
    uploadLangsungKeGoogle(fIfp, folderId),
    uploadLangsungKeGoogle(fSerIfp, folderId),
    uploadLangsungKeGoogle(fBast, folderId),
    uploadLangsungKeGoogle(fBapp, folderId),
]);

Penjumlahan Data Pintar

Karena Google Sheets terbatas, maka browser pengunjung yang bertugas merapikan datanya. Kode ini menyatukan jumlah fisik barang jika sekolah melapor berkali-kali.

dashboard.js (Sisi Pengguna)

renderDashboard()

let rekapSekolah = {};

// MENGAKUMULASI DATA BERDASARKAN ID NPSN SEKOLAH
globalRawData.forEach(row => {
    let kolom = [...Object.values(row)]; 
    let npsn = bersihkanXSS(kolom[5]);

    if (!rekapSekolah[npsn]) {
        // Buat wadah baru jika sekolah belum masuk rekap
        rekapSekolah[npsn] = {
            npsn: npsn, namaSekolah: bersihkanXSS(kolom[6]),
            jmlLaptop: 0, jmlHardisk: 0, jmlIfp: 0
        };
    }

    // Tambahkan jumlah barangnya saja, nama sekolah tetap satu
    rekapSekolah[npsn].jmlLaptop += (parseInt(kolom[7]) || 0);
    rekapSekolah[npsn].jmlHardisk += (parseInt(kolom[12]) || 0);
    rekapSekolah[npsn].jmlIfp += (parseInt(kolom[17]) || 0);
});

Penjaga Laporan Darurat

Pekerja di belakang layar (Background Job). Saat jaringan ke Google bermasalah, kode throw $e menyelamatkan data ke kotak darurat untuk dikirim ulang nanti oleh Admin.

ProsesLaporanGoogle.php (Server)

handle()

public function handle(): void
{
    try {
        // Menulis data ke Spreadsheet di balik layar
        $sheetsService->spreadsheets_values->append(
            $this->spreadsheet_id, 'respon!A:Y', $body, 
            ['valueInputOption' => 'USER_ENTERED']
        );

        // Hapus ingatan lama agar grafik otomatis refresh
        Cache::forget('cache_get_respon');

    } catch (Exception $e) {
        // JIKA GOOGLE DOWN, JANGAN HILANGKAN DATA!
        Log::error("GAGAL: " . $e->getMessage());
        
        // Lempar ke kotak 'failed_jobs' agar di-retry admin
        throw $e; 
    }
}

Mencari Solusi Teknologi yang Masuk Akal?

Membuat program bukan hanya tentang menyusun kode agar bisa berjalan, tetapi tentang menemukan jalan paling hemat dan efisien untuk memecahkan masalah instansi Anda.

Mari Berkolaborasi