Tugas 8 PBKK - Google App Script

Nama    : Mohammad Zhafran Dzaky

NRP    : 5025211142

Kelas    : Pemrograman Berbasis Kerangka Kerja (A)

Link :

• Link Github Google App Script : Github

Penjelasan Singkat :

Tugas kedelapan mata kuliah Pemrograman Berbasis Kerangka Kerja (PBKK) ini adalah membuat sebuah aplikasi web berupa form sederhana yang diintegrasikan dengan sebuah layanan google untuk mengolah data form yang cukup umum, yakni google spreadsheet. Untuk dapat melakukan hal ini, kita perlu untuk membuat sebuah spreadsheet terlebih dahulu di google drive. Kemudian kita dapat menggunakan fitur App Script yang ada di bagian "tools" atau "alat" dan kita akan diarahkan ke platform Google App Script untuk mendeploy spreadsheet yang telah kita buat sebelumnya agar dapat digunakan pada aplikasi web kita. Hal ini dapat dilakukan dengan membuat fungsi kustom di dalam kode.gs yang sudah disediakan dari platform tersebut untuk dapat menghubungkan spreadsheet kita dengan data yang akan dimasukkan. Berikut ini adalah script yang saya gunakan untuk aplikasi web saya yang akan menyimpan atribut - atribut seperti nama, email, nomor telepon, dan pesan. 

function doPost(e) {

var id = SpreadsheetApp.openById('1E4sufSh6h0LrRU_TPwhNJ-NUlmKtC3ATdYaiernjbcM');

var name = e.parameter.name;

var email = e.parameter.email;

var number = e.parameter.number;

var message = e.parameter.message;

id.appendRow([name,email, number, message]);

var jsonObject =

{

status: 'berhasil'

}

var JSONString = JSON.stringify(jsonObject);

var JSONOutput = ContentService.createTextOutput(JSONString);

JSONOutput.setMimeType(ContentService.MimeType.JSON);

return JSONOutput;

}

Setelah membuat script, kita dapat lanjut untuk melakukan deploy spreadsheet ini dengan menekan tombol "terapkan" dan lakukan deployment baru dengan pilihan project yakni untuk aplikasi web. Kemudian tinggal ikuti saja langkah otorisasi yang diberikan oleh google dan kita akan mendapatkan url Google App Script macro untuk bisa langsung diimplementasikan ke dalam aplikasi web kita. Berikut ini adalah script untuk menembak url yang telah kita dapatkan tadi untuk melakukan post data form kita agar dapat dimasukkan ke dalam spreadsheet. 

const scriptURL =

"https://script.google.com/macros/s/AKfycbxiUsPtS6QsoxkwvOdzLAzbgqxudCdw1r2qHRfAISznkWsnol0npdMoH2p8sQDbQZU1aQ/exec";

const form = document.forms["contact-form"];

form.addEventListener("submit", (e) => {

e.preventDefault();

fetch(scriptURL, { method: "POST", body: new FormData(form) })

.then(() => alert("Thank you! your form is submitted successfully."))

.then(() => {

window.location.reload();

})

.catch((error) => console.error("Error!", error.message));

});

Setelah itu, buat form nya dalam file index.html yang meminta input dari user berupa nama, email, nomor telepon, dan pesan yang akan dikirimkan seperti berikut ini. Konsep ini saya buat agar seperti form contact-us untuk website - website portofolio.

Setelah mengisi dan mengirimkan form tersebut, alert sukses atau gagal akan muncul untuk menandakan bahwa data yang telah kita isikan sudah masuk atau belum. Berikut ini adalah bukti bahwa data dari form sudah masuk ke dalam spreadsheet

Dapat terlihat bahwa data sudah masuk yang menandakan bahwa integrasi aplikasi web kita dengan spreadsheet menggunakan fitur Google App Script telah berhasil.