Home GoogleAppScript / Pemrograman / script


Aplikasi input data biasanya dimulai dari kebutuhan sederhana.

Kita punya formulir. Pengguna mengisi nama, keterangan, atau laporan. Setelah itu data disimpan ke database.

Namun dalam praktiknya, data yang masuk sering tidak rapi. Ada yang menulis terlalu singkat, ada yang menulis dengan huruf besar semua, ada yang mencampur banyak informasi dalam satu kolom, dan ada juga yang membuat keterangan sulit dipahami.

Di sinilah AI Gemini bisa membantu.

Pada tutorial ini kita akan membuat konsep aplikasi input data menggunakan Google Apps Script sebagai halaman web, AppSheet Database sebagai tempat penyimpanan, dan AI Gemini untuk merapikan input sebelum data disimpan.

Gambaran sederhananya:
Pengguna mengisi form. Google Apps Script menerima data. Gemini merapikan isi input. Setelah itu data dikirim ke AppSheet Database melalui AppSheet API.

Kenapa Menggabungkan Apps Script, AppSheet Database, dan Gemini?

Google Apps Script cocok digunakan ketika kita ingin membuat halaman web ringan, form internal, endpoint sederhana, atau aplikasi kecil yang terhubung dengan layanan Google.

AppSheet Database dapat digunakan sebagai sumber data untuk aplikasi AppSheet, sehingga data yang masuk dari Apps Script tetap bisa dimanfaatkan pada aplikasi no-code.

Gemini membantu pada bagian yang biasanya melelahkan: membaca teks bebas dan mengubahnya menjadi informasi yang lebih rapi.

Contoh kasusnya seperti ini.

Input asli:
barang rusak di gudang belakang, kayaknya scanner barcode tidak bisa nyala dari pagi

Hasil dirapikan AI:
Scanner barcode di gudang belakang tidak dapat menyala sejak pagi.

Data asli tetap disimpan. Namun kita juga memiliki versi ringkas yang lebih mudah dibaca admin.

Alur Aplikasi yang Akan Dibuat

Sebelum masuk ke kode, kita buat dulu alurnya.

Form HTML
    ↓
Google Apps Script Web App
    ↓
Gemini API
    ↓
AppSheet API
    ↓
AppSheet Database

Form HTML digunakan sebagai tampilan input.

Google Apps Script menerima data dari form.

Gemini API digunakan untuk merapikan keterangan.

AppSheet API digunakan untuk menyimpan data ke tabel AppSheet.

Dengan alur ini, kita tidak membuat aplikasi terlalu rumit. Setiap bagian punya tugas yang jelas.

Yang Perlu Disiapkan

Sebelum mengikuti tutorial ini, siapkan beberapa hal berikut.

  1. Akun Google.
  2. Project Google Apps Script.
  3. Aplikasi AppSheet dengan tabel database.
  4. App ID dari aplikasi AppSheet.
  5. Application Access Key AppSheet API.
  6. API key Gemini dari Google AI Studio.

Untuk nama tabel, pada contoh ini kita gunakan:

DataMasuk

Anda bisa menggantinya sesuai kebutuhan project.

Contoh Struktur Tabel AppSheet Database

Buat tabel dengan struktur sederhana seperti berikut.

Nama Kolom Fungsi
ID Kode unik data
Nama Nama pengirim
KeteranganAsli Input asli dari pengguna
KeteranganAI Hasil keterangan yang dirapikan Gemini
KategoriAI Kategori otomatis dari Gemini
WaktuInput Waktu data dikirim

Kolom ID sebaiknya dijadikan key atau identitas unik.

Ketika menggunakan AppSheet API untuk menambah data, baris baru perlu memiliki nilai key yang valid atau cukup informasi agar key dapat dibuat sesuai konfigurasi tabel.

Menyimpan Konfigurasi di Script Properties

Jangan menaruh API key langsung di file HTML.

Lebih aman jika konfigurasi disimpan di Script Properties. Buka Google Apps Script, lalu buat fungsi berikut.

function setConfig() {
  PropertiesService.getScriptProperties().setProperties({
    APPSHEET_APP_ID: 'ISI_APP_ID_APPSHEET_ANDA',
    APPSHEET_ACCESS_KEY: 'ISI_ACCESS_KEY_APPSHEET_ANDA',
    GEMINI_API_KEY: 'ISI_API_KEY_GEMINI_ANDA'
  });
}

Jalankan fungsi setConfig() satu kali dari editor Apps Script.

Setelah itu, kode lain dapat membaca konfigurasi tersebut tanpa menampilkannya di halaman pengguna.

Catatan keamanan:
Jangan membagikan file project yang berisi API key asli. Jika key sudah terlanjur tersebar, ganti key tersebut dari layanan terkait.

Membuat File Code.gs

Di Google Apps Script, buat file Code.gs.

Untuk membuat Apps Script menjadi halaman web, kita membutuhkan fungsi doGet().

function doGet() {
  return HtmlService
    .createHtmlOutputFromFile('Index')
    .setTitle('Aplikasi Input Data AI');
}

Fungsi ini akan membuka file HTML bernama Index.

Jadi setelah ini kita perlu membuat file HTML dengan nama Index.html.

Membuat Tampilan Form Input

Buat file baru di Apps Script dengan nama:

Index.html

Isi dengan kode berikut.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Input Data AI</title>

  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f4f7fb;
      margin: 0;
      padding: 24px;
    }

    .box {
      max-width: 640px;
      margin: auto;
      background: #fff;
      padding: 24px;
      border-radius: 14px;
      box-shadow: 0 8px 24px rgba(20,40,70,.08);
    }

    h1 {
      margin-top: 0;
      color: #123b66;
    }

    label {
      display: block;
      margin-top: 16px;
      font-weight: bold;
    }

    input,
    textarea {
      width: 100%;
      box-sizing: border-box;
      padding: 12px;
      margin-top: 8px;
      border: 1px solid #ccd7e2;
      border-radius: 8px;
      font-size: 15px;
    }

    textarea {
      min-height: 130px;
      resize: vertical;
    }

    button {
      margin-top: 18px;
      padding: 12px 18px;
      border: none;
      border-radius: 8px;
      background: #1976d2;
      color: #fff;
      font-weight: bold;
      cursor: pointer;
    }

    button:disabled {
      background: #9db9d4;
      cursor: wait;
    }

    #hasil {
      margin-top: 18px;
      padding: 14px;
      border-radius: 8px;
      background: #eef7ff;
      display: none;
    }
  </style>
</head>

<body>

  <div class="box">
    <h1>Input Data AI</h1>

    <p>
      Isi data berikut. Keterangan akan dirapikan oleh AI Gemini
      sebelum disimpan ke AppSheet Database.
    </p>

    <form id="formInput">
      <label>Nama</label>
      <input type="text" name="nama" required>

      <label>Keterangan</label>
      <textarea name="keterangan" required></textarea>

      <button id="btnSimpan" type="submit">Simpan Data</button>
    </form>

    <div id="hasil"></div>
  </div>

  <script>
    const form = document.getElementById('formInput');
    const hasil = document.getElementById('hasil');
    const btn = document.getElementById('btnSimpan');

    form.addEventListener('submit', function(e) {
      e.preventDefault();

      btn.disabled = true;
      btn.textContent = 'Menyimpan...';
      hasil.style.display = 'block';
      hasil.textContent = 'Data sedang diproses oleh AI...';

      const data = {
        nama: form.nama.value,
        keterangan: form.keterangan.value
      };

      google.script.run
        .withSuccessHandler(function(res) {
          btn.disabled = false;
          btn.textContent = 'Simpan Data';

          hasil.textContent = res.message;

          if (res.status) {
            form.reset();
          }
        })
        .withFailureHandler(function(err) {
          btn.disabled = false;
          btn.textContent = 'Simpan Data';
          hasil.textContent = 'Terjadi kesalahan: ' + err.message;
        })
        .simpanData(data);
    });
  </script>

</body>
</html>

Form ini belum menyimpan data sendiri.

Ketika tombol diklik, HTML memanggil fungsi Apps Script bernama simpanData() menggunakan google.script.run.

Membuat Fungsi untuk Memanggil Gemini

Sekarang kita buat fungsi untuk meminta Gemini merapikan teks input.

Kembali ke file Code.gs, tambahkan fungsi berikut.

function prosesDenganGemini(keterangan) {
  const apiKey = PropertiesService
    .getScriptProperties()
    .getProperty('GEMINI_API_KEY');

  const url =
    'https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key='
    + apiKey;

  const prompt =
    'Rapikan data input berikut dalam bahasa Indonesia. ' +
    'Berikan hasil dalam format JSON valid dengan field "keterangan_rapi" dan "kategori". ' +
    'Kategori dibuat singkat, misalnya Laporan, Inventaris, Absensi, Kerusakan, atau Lainnya. ' +
    'Input: ' + keterangan;

  const payload = {
    contents: [
      {
        parts: [
          {
            text: prompt
          }
        ]
      }
    ]
  };

  const response = UrlFetchApp.fetch(url, {
    method: 'post',
    contentType: 'application/json',
    payload: JSON.stringify(payload),
    muteHttpExceptions: true
  });

  const json = JSON.parse(response.getContentText());
  const text = json.candidates?.[0]?.content?.parts?.[0]?.text || '';

  return bersihkanJsonGemini(text, keterangan);
}

Gemini kadang mengembalikan JSON di dalam blok markdown. Karena itu kita buat fungsi pembersih sederhana.

function bersihkanJsonGemini(text, fallback) {
  try {
    let cleaned = text
      .replace(/```json/g, '')
      .replace(/```/g, '')
      .trim();

    return JSON.parse(cleaned);

  } catch (err) {
    return {
      keterangan_rapi: fallback,
      kategori: 'Lainnya'
    };
  }
}

Jika output Gemini tidak dapat dibaca sebagai JSON, aplikasi tetap berjalan dan memakai input asli sebagai cadangan.

Mengirim Data ke AppSheet Database

AppSheet API menggunakan endpoint Action untuk menjalankan operasi seperti Add, Find, Edit, atau Delete.

Untuk menambahkan data, kita gunakan Action Add.

function simpanKeAppSheet(row) {
  const props = PropertiesService.getScriptProperties();

  const appId = props.getProperty('APPSHEET_APP_ID');
  const accessKey = props.getProperty('APPSHEET_ACCESS_KEY');

  const tableName = 'DataMasuk';

  const url =
    'https://api.appsheet.com/api/v2/apps/' +
    appId +
    '/tables/' +
    tableName +
    '/Action';

  const payload = {
    Action: 'Add',
    Properties: {
      Locale: 'id-ID'
    },
    Rows: [row]
  };

  const response = UrlFetchApp.fetch(url, {
    method: 'post',
    contentType: 'application/json',
    headers: {
      ApplicationAccessKey: accessKey
    },
    payload: JSON.stringify(payload),
    muteHttpExceptions: true
  });

  return response.getContentText();
}

Pastikan nama tabel DataMasuk sama dengan tabel yang ada pada aplikasi AppSheet Anda.

Membuat Fungsi Utama simpanData()

Fungsi inilah yang dipanggil dari HTML.

function simpanData(data) {
  if (!data || !data.nama || !data.keterangan) {
    return {
      status: false,
      message: 'Nama dan keterangan wajib diisi.'
    };
  }

  const hasilAI = prosesDenganGemini(data.keterangan);

  const row = {
    ID: Utilities.getUuid(),
    Nama: data.nama,
    KeteranganAsli: data.keterangan,
    KeteranganAI: hasilAI.keterangan_rapi,
    KategoriAI: hasilAI.kategori,
    WaktuInput: new Date().toISOString()
  };

  simpanKeAppSheet(row);

  return {
    status: true,
    message:
      'Data berhasil disimpan. Kategori AI: ' +
      hasilAI.kategori
  };
}

Alur di dalam fungsi ini cukup jelas.

  1. Memastikan input tidak kosong.
  2. Mengirim keterangan ke Gemini.
  3. Membuat baris data baru.
  4. Mengirim baris ke AppSheet Database.
  5. Mengembalikan pesan ke halaman HTML.

Contoh Hasil Data yang Tersimpan

Misalnya pengguna mengisi:

Nama:
Budi

Keterangan:
scanner di gudang belakang ga bisa nyala dari pagi, jadi barang masuk belum bisa discan

Data yang tersimpan bisa menjadi seperti ini.

Kolom Isi
Nama Budi
KeteranganAsli scanner di gudang belakang ga bisa nyala dari pagi, jadi barang masuk belum bisa discan
KeteranganAI Scanner di gudang belakang tidak dapat menyala sejak pagi sehingga proses pemindaian barang masuk belum bisa dilakukan.
KategoriAI Kerusakan

Inilah manfaat utama AI dalam aplikasi input data.

Pengguna tetap menulis dengan gaya bebas. Admin menerima data yang lebih rapi.

Deploy Apps Script sebagai Web App

Setelah kode selesai, deploy project sebagai Web App.

  1. Klik Deploy.
  2. Pilih New deployment.
  3. Pilih type Web app.
  4. Atur siapa yang dapat mengakses aplikasi.
  5. Klik Deploy.
  6. Salin URL Web App.

Jika halaman berhasil dibuka, form input akan tampil di browser.

Tips pengujian:
Uji dulu dengan satu data sederhana. Jangan langsung membuat banyak kolom dan banyak fitur. Pastikan form, Gemini, dan AppSheet API bekerja satu per satu.

Masalah yang Sering Terjadi

Form tampil, tetapi data tidak tersimpan

Periksa App ID, Access Key, nama tabel, dan nama kolom AppSheet.

Nama kolom pada payload harus sesuai dengan kolom di tabel.

Gemini tidak mengembalikan hasil

Periksa API key Gemini dan respons dari UrlFetchApp.fetch().

Untuk debugging, Anda dapat mencatat respons ke log.

Logger.log(response.getContentText());

Output Gemini bukan JSON

Ini bisa terjadi. Karena itu artikel ini menggunakan fungsi fallback bersihkanJsonGemini().

Untuk aplikasi produksi, Anda bisa memakai structured output atau validasi tambahan agar hasil lebih konsisten.

AppSheet menolak data baru

Periksa key column. Untuk Action Add, baris baru harus memiliki key yang valid atau konfigurasi tabel harus dapat menghasilkan key sendiri.

Pengembangan Lanjutan

Setelah versi dasar berjalan, aplikasi ini bisa dikembangkan menjadi banyak hal.

  • Form laporan kerusakan.
  • Form input barang inventaris.
  • Form absensi manual.
  • Form permintaan barang.
  • Form komplain pelanggan.
  • Dashboard ringkasan data dengan AI.

Gemini juga dapat diminta membuat kategori, ringkasan, prioritas, atau saran tindak lanjut.

Namun tetap ingat: keputusan penting sebaiknya tidak sepenuhnya diserahkan kepada AI. Gunakan AI sebagai alat bantu, bukan satu-satunya pemeriksa data.

Kesimpulan

Google Apps Script, AppSheet Database, dan AI Gemini dapat digabungkan untuk membuat aplikasi input data yang ringan tetapi bermanfaat.

Apps Script menangani halaman web dan proses backend sederhana.

AppSheet Database menyimpan data agar tetap dapat digunakan oleh aplikasi AppSheet.

Gemini membantu merapikan input sehingga data yang masuk lebih mudah dibaca dan dianalisis.

Dengan pola ini, kita dapat membuat aplikasi internal tanpa membangun server sendiri. Cocok untuk kebutuhan admin, inventaris, laporan, absensi, dan berbagai proses input data yang membutuhkan bantuan AI.

Sumber Referensi

Baca juga :

Tidak ada komentar

Posting Komentar

Punya pertanyaan, saran, atau kritik seputar topik ini? Yuk, tulis di kolom komentar.

to Top