Tugas 8 Pemrograman Berbasis Kerangka Kerja (Google Apps Script Integrated Form)

Nama : Kevin Nathanael Halim

NRP : 5025211140

Kelas : Pemrograman Berbasis Kerangka Kerja B

Tahun Ajaran : 2023/2024 (Semester Gasal)

Link GitHub Repository : https://github.com/zetsux/google-apps-script-form

Link Deployment : https://pbkk-google-apps-script-form.vercel.app/

Penjelasan :

Tugas kedelapan dari mata kuliah Pemrograman Berbasis Kerangka Kerja untuk mengimplementasikan serta mengintegrasikan framework dari Google yakni Google Apps Script guna melakukan penyimpanan data secara otomatis pada Google Spreadsheet melalui aplikasi web yang sudah dibuat. Google Apps Script sendiri adalah platform pengembangan aplikasi cepat yang mempercepat dan mempermudah pembuatan aplikasi bisnis yang terintegrasi denganGoogle Workspace. Kita dapat menulis kode dalam JavaScript modern dan memiliki akses ke library bawaan untuk aplikasi favorit Google Workspace seperti Gmail, Kalender, Drive, dan lainnya. Tidak ada yang perlu diinstal. Terdapat editor kode langsung di browser kita, dan skrip yang dibuat akan berjalan di server Google. Cara mengintegrasikannya diawali dengan pembuatan Google Spreadsheet dan dilanjutkan dengan pembuatan script untuk spreadsheet tersebut sebagai berikut,

- Spreadsheet

Link : Google Spreadsheet

- Script

Setelah spreadsheet dan juga link untuk deployment siap, kita dapat membuat form html dan juga melakukan integrasi dengan mengirimkan request POST berisikan berbagai data yg ingin diinput dalam bentuk FormData melalui script.js, tidak lupa diberikan animasi loading sembari menunggu pengiriman dan diberikan alert sebagai tanda pengiriman telah berhasil atau gagal. Script JavaScriptnya sendiri sebagai berikut,

const urlScript =
  "https://script.google.com/macros/s/AKfycbzXh4AVnIst5-kh_FZqpQdsL_Q5uH9JeKm5I_q7Q-53k54kAEHmyC-Tbx_1yLyezgXb/exec";

const form = document.forms["contact-form"];
const loadingOverlay = document.getElementById("loading-overlay");

const handleSubmit = async (e) => {
  e.preventDefault();
  try {
    loadingOverlay.style.display = "flex";

    const response = await fetch(urlScript, {
      method: "POST",
      body: new FormData(form),
    });

    if (response.ok) {
      alert("Your message has been sent successfully. We'll respond back ASAP!");
      window.location.reload();
    } else {
      throw new Error(`Server responded with status: ${response.status}`);
    }
  } catch (error) {
    console.error("Error!", error.message);
  } finally {
    loadingOverlay.style.display = "none";
  }
};

form.addEventListener("submit", handleSubmit);

Kemudian untuk design formnya saya membuat dengan tema gelap dan futuristik yang memuat nilai nama, email, dan juga pesan yang ingin disampaikan sebagai berikut,

Bila form diisi dan tombol send ditekan, maka fungsi handleSubmit() pada script.js akan dijalankan dan animasi loading akan ditampilkan sembari dilakukan pengiriman data ke spreadsheet yang telah dibuat sebelumnya.

- Pengisian Form