Google Forms Integration

Overview

Input data penerima akan masuk via Google Forms. Ada beberapa cara menghubungkan Google Forms ke backend.

Opsi Integrasi

Opsi A: Webhook via Google Apps Script (Rekomendasi)

Google Forms → Apps Script → UrlFetchApp.fetch() ke API backend. Real-time.

Pros:

• Real-time — data masuk segera setelah submit
• Simple — satu Apps Script 10-20 baris
• Gratis

Cons:

• Butuh deploy Apps Script
• Jika API down, data bisa hilang (butuh retry logic)

Cara setup:

1. Buka Google Forms → Responses → spreadsheet icon (buat linked Google Sheet)
2. Buka spreadsheet → Extensions → Apps Script
3. Tulis script:

function onFormSubmit(e) {
  const response = e.values;
  const payload = {
    name: response[1],
    bank_code: response[2],
    account_number: response[3],
    account_name: response[4],
    amount: parseInt(response[5])
  };

  const options = {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer ' + ScriptProperties.getProperty('API_KEY')
    },
    payload: JSON.stringify(payload),
    muteHttpExceptions: true
  };

  try {
    UrlFetchApp.fetch('https://your-api.com/api/recipients', options);
  } catch (error) {
    // Log error, bisa kirim email alert
    console.error(error);
  }
}

function createTrigger() {
  ScriptApp.newTrigger('onFormSubmit')
    .forSpreadsheet(SpreadsheetApp.getActive())
    .onFormSubmit()
    .create();
}

4. Set API key di Script Properties (Project Settings → Script Properties)
5. Run createTrigger() sekali untuk aktifkan trigger
6. Deploy sebagai web app (tidak perlu, trigger cukup)

Opsi B: Sheet Sync via Apps Script

Responses masuk Sheet, Apps Script trigger on-edit atau timer, push ke API.

Pros:

• Data tersimpan di Sheet sebagai backup
• Bisa batch process (lebih efisien)
• Bisa retry jika API down

Cons:

• Delay (tergantung timer interval, min 1 menit)
• Lebih kompleks dari webhook

Cara setup:

function syncToApi() {
  const sheet = SpreadsheetApp.getActiveSheet();
  const data = sheet.getDataRange().getValues();
  const headers = data[0];

  for (let i = 1; i < data.length; i++) {
    const row = data[i];
    const status = row[6]; // kolom status

    if (status === 'SYNCED') continue;

    const payload = {
      name: row[1],
      bank_code: row[2],
      account_number: row[3],
      account_name: row[4],
      amount: parseInt(row[5])
    };

    try {
      UrlFetchApp.fetch('https://your-api.com/api/recipients', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        payload: JSON.stringify(payload)
      });
      sheet.getRange(i + 1, 7).setValue('SYNCED');
    } catch (error) {
      sheet.getRange(i + 1, 7).setValue('FAILED: ' + error.message);
    }
  }
}

function createTimeTrigger() {
  ScriptApp.newTrigger('syncToApi')
    .timeBased()
    .everyMinutes(1)
    .create();
}

Opsi C: Polling dari Backend

Backend baca Sheet via Google Service Account.

Pros:

• Tidak perlu Apps Script
• Full control dari backend

Cons:

• Kurang elegan
• Delay (tergantung polling interval)
• Rate limit Google Sheets API
• Butuh service account setup

Cara setup:

1. Buat Google Cloud project
2. Enable Google Sheets API
3. Buat Service Account, download JSON key
4. Share Sheet dengan service account email
5. Backend polling:

import { google } from 'googleapis';

const auth = new google.auth.GoogleAuth({
  keyFile: './service-account.json',
  scopes: ['https://www.googleapis.com/auth/spreadsheets.readonly'],
});

const sheets = google.sheets({ version: 'v4', auth });

async function pollSheet() {
  const response = await sheets.spreadsheets.values.get({
    spreadsheetId: 'YOUR_SHEET_ID',
    range: 'Form Responses 1',
  });

  const rows = response.data.values;
  // Process rows, insert to DB
}

// Run setiap 1 menit
setInterval(pollSheet, 60000);

Rekomendasi

Opsi A (Webhook) untuk case ini karena:

• Real-time — data masuk segera, tidak perlu tunggu
• Simple — tidak perlu status tracking di Sheet
• Untuk jumlah transaksi yang tidak terlalu besar, webhook lebih dari cukup
• Kalau perlu backup, Google Forms tetap simpan responses di Sheet secara otomatis

Hybrid approach (Opsi A + Sheet backup):

• Gunakan webhook untuk real-time push ke API
• Google Forms tetap linked ke Sheet untuk backup
• Kalau API down, data masih ada di Sheet dan bisa di-import manual

Google Forms Fields

Field	Tipe	Contoh
Nama Penerima	Short answer	Budi Santoso
Nama Bank	Dropdown (pilihan bank yang support)	BCA
Nomor Rekening	Short answer (validasi numeric)	1234567890
Nama di Rekening	Short answer	Budi Santoso
Jumlah (Rp)	Short answer (validasi number)	500000000

Tips

• Validasi input: Gunakan response validation di Google Forms untuk memastikan:
  • Nomor rekening hanya angka
  • Jumlah adalah angka positif
  • Bank code valid (dropdown)
• Test dulu: Buat form test, submit beberapa data, pastikan webhook bekerja
• Error handling: Apps Script harus handle error gracefully (jangan throw uncaught)
• Retry: Kalau API return error, bisa simpan ke Sheet dan retry nanti